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

tableschartssidebarsstat-cardsnavigation-tabsform-inputs

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, 13px

DESIGN.md para SaaS

Ver todos →

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