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
DESIGN.md Example
Minimal DESIGN.md for SaaS. Copy, customize and place at project root.
# Design System — SaaS Dashboard
## Overview
Dashboard analytics for B2B SaaS product. Dense, functional, professional interface.
## Colors
- **Primary** (#3B82F6): CTAs, active states, links
- **Surface** (#F8FAFC): Main background
- **On-surface** (#0F172A): Primary text
## Typography
- Headlines: Inter, 600, 20-32px
- Body: Inter, 400, 14px
- Mono: JetBrains Mono, 400, 13pxDESIGN.md for SaaS
View all →
Minimalism & Swiss Style
Minimalist landing page. Ideal for b2b saas, enterprise apps, design saas, profe…
Aurora UI
Vibrant gradient interface inspired by Northern Lights with mesh gradients, smoo…
Grunge Rock dos Anos 90
90s grunge rock landing page. Ideal for landing pages, saas. AI-ready template.
Art Nouveau Florido
Design an Art Nouveau floral landing page. Ideal for landing pages, saas. AI-rea…
Flat Design Corporativo
Corporate flat design landing page. Ideal for landing pages, saas. AI-ready temp…
Need a custom DESIGN.md for your SaaS project? The design-md skill generates one from your codebase → skill.dev.br/skills/design-md