DESIGN.md for SaaS
Padrões de design system para produtos SaaS: paletas neutras com accent forte, tipografia de alta legibilidade, espaçamento denso para dashboards e componentes data-driven.
Design patterns
Palette
Paletas neutras (Slate/Zinc) + 1 accent forte (Blue/Indigo). Backgrounds em gray-50/gray-900. Semântica clara: success green, warning amber, error red.
Typography
System fonts ou sans-serif de alta legibilidade (Inter, Geist). Escala compacta para densidade de informação. Mono para dados numéricos e código.
Spacing
Base 4px. Espaçamento denso em dashboards (8-12px entre elementos). Padding generoso em cards e seções (16-24px). Grid de 12 colunas.
Key Components
Exemplo DESIGN.md
DESIGN.md mínimo para SaaS. Copie, customize e coloque na raiz do projeto.
# Design System — SaaS Dashboard
## Overview
Dashboard analytics para produto SaaS B2B. Interface densa, funcional, profissional.
## Colors
- **Primary** (#3B82F6): CTAs, estados ativos, links
- **Surface** (#F8FAFC): Background principal
- **On-surface** (#0F172A): Texto principal
## Typography
- Headlines: Inter, 600, 20-32px
- Body: Inter, 400, 14px
- Mono: JetBrains Mono, 400, 13pxDESIGN.md para SaaS
Ver todos →
Minimalism & Swiss Style
Design minimalista com grid, tipografia clara e espaço em branco. Ideal para Saa…
Aurora UI
Gradientes fluxo animado, efeito Northern Lights, cores complementares. Interfac…
Grunge Rock dos Anos 90
Grunge Rock dos Anos 90 — Design general com grunge, 90s rock, raw. Template e p…
Art Nouveau Florido
Art Nouveau Florido — Design general com art nouveau, ornate, elegant. Template…
Flat Design Corporativo
Flat Design Corporativo — Design general com flat design, corporate, clean. Temp…
Precisa de um DESIGN.md customizado para seu projeto SaaS? A skill design-md gera um a partir do seu codebase → skill.dev.br/skills/design-md