🏗️ O que sao Design Systems
Um Design System e muito mais que um style guide ou uma biblioteca de componentes. E uma linguagem completa que conecta design e codigo, garantindo consistencia em todos os produtos e acelerando drasticamente o desenvolvimento.
💡 Design System = Single Source of Truth
Pense no Design System como o "dicionario oficial" do seu projeto. Todos - designers, desenvolvedores, IAs - falam a mesma lingua e usam as mesmas definicoes.
- • Tokens: As variaveis fundamentais (cores, espacamentos, fontes)
- • Componentes: Blocos de UI reutilizaveis (botoes, cards, inputs)
- • Padroes: Como combinar componentes (forms, navigation, layouts)
- • Diretrizes: Regras de uso e boas praticas
Material Design
Google - O mais documentado e usado por IAs.
material-design-system
Human Interface
Apple - Foco em iOS, macOS, visionOS.
apple-hig
Fluent Design
Microsoft - Windows, Office, web apps.
fluent-design
🎯 Vocabulario para Prompts
Ao pedir para uma IA criar interfaces, mencione o design system:
"Use Material Design 3 tokens para cores e espacamento"
"Siga o design system do Tailwind UI"
"Crie um design system proprio com tokens semanticos"
🔢 Design Tokens - Variaveis como Fundamento
Design tokens sao as menores unidades de decisao de design. Sao variaveis nomeadas que armazenam valores como cores, tamanhos e espacamentos. A magia esta em usar nomes semanticos em vez de valores brutos.
✗ Sem Tokens (Valores Hardcoded)
/* Dificil de manter */
.button {
background: #3B82F6;
padding: 12px 24px;
font-size: 14px;
}
Valores "magicos" espalhados pelo codigo. Mudar a cor primaria exige buscar e substituir em centenas de lugares.
✓ Com Tokens (Variaveis Semanticas)
/* Facil de manter */
.button {
background: var(--color-primary);
padding: var(--spacing-3) var(--spacing-6);
font-size: var(--font-size-sm);
}
Um lugar para mudar, todo o sistema atualiza. IAs entendem e aplicam consistentemente.
📦 Hierarquia de Tokens
Valores brutos: blue-500: #3B82F6, gray-100: #F3F4F6
Referencias com contexto: color-primary: blue-500, color-background: gray-100
Para componentes: button-bg: color-primary, card-bg: color-background
🎯 Vocabulario para Prompts
"Crie tokens semanticos para cores: primary, secondary, background, surface, text"
"Use uma escala de tokens de espacamento baseada em 4px (4, 8, 12, 16, 24, 32, 48)"
"Defina tokens primitivos primeiro, depois mapeie para tokens semanticos"
🌈 Cores como Tokens
Cores sao os tokens mais importantes. Um sistema de cores bem estruturado usa nomes semanticos que descrevem a funcao, nao a aparencia. Isso permite temas (dark/light) e manutencao facil.
🎨 Anatomia de um Sistema de Cores
Tokens de Marca
--color-primary
--color-secondary
--color-accent
Tokens de Superficie
--color-background
--color-surface
--color-surface-elevated
Tokens de Texto
--color-text-primary
--color-text-secondary
--color-text-muted
Tokens de Feedback
--color-success
--color-error
--color-warning
✓ Nomes Semanticos
- ✓ --color-primary
- ✓ --color-background
- ✓ --color-text-primary
- ✓ --color-surface-hover
- ✓ --color-border-subtle
Descrevem a funcao. Funcionam em qualquer tema.
✗ Nomes Literais
- ✗ --blue-500
- ✗ --dark-gray
- ✗ --white
- ✗ --light-blue-hover
- ✗ --gray-border
Descrevem a cor. Quebram em temas diferentes.
🎯 Vocabulario para Prompts
"Sistema de cores com tokens semanticos: primary, secondary, background, surface, text-primary, text-muted"
"Inclua tokens de feedback: success, error, warning, info"
"Crie variacoes para estados: hover, active, disabled, focus"
📏 Espacamento como Tokens
Espacamento consistente e o segredo de interfaces harmoniosas. Use uma escala matematica
(geralmente baseada em 4px ou 8px) para criar ritmo visual. IAs entendem escalas como
spacing-1, spacing-2, spacing-4.
📐 Escala de Espacamento (Base 4px)
--spacing-1
4px - Micro espacamentos
--spacing-2
8px - Entre elementos relacionados
--spacing-3
12px - Padding interno pequeno
--spacing-4
16px - Padding padrao, gaps
--spacing-6
24px - Entre grupos de conteudo
--spacing-8
32px - Entre secoes
--spacing-12
48px - Espacamento de secao
--spacing-16
64px - Espacamento major
🧩 Onde Usar Cada Token
Padding Interno
- Botoes:
spacing-2aspacing-4 - Cards:
spacing-4aspacing-6 - Modais:
spacing-6aspacing-8
Gaps e Margens
- Entre icone e texto:
spacing-2 - Entre itens de lista:
spacing-3 - Entre secoes:
spacing-12aspacing-16
🎯 Vocabulario para Prompts
"Use escala de espacamento 4px: 4, 8, 12, 16, 24, 32, 48, 64"
"Espacamento consistente com tokens: spacing-sm (8px), spacing-md (16px), spacing-lg (24px)"
"Gap de 16px entre cards, padding de 24px dentro dos cards"
✏️ Tipografia como Tokens
Tipografia vai alem de escolher uma fonte. Envolve tamanhos, pesos, line-heights e letter-spacing. Cada um deve ser um token para consistencia total.
📝 Escala Tipografica Modular
--font-size-xs
12px - Captions, labels
--font-size-sm
14px - Texto secundario
--font-size-base
16px - Texto principal (body)
--font-size-lg
18px - Texto enfatizado
--font-size-xl
20px - Subtitulos
--font-size-2xl
24px - Titulos de secao
--font-size-3xl
30px - Titulos de pagina
--font-size-4xl
36px - Hero headlines
Font Weight Tokens
--font-weight-normal
400 - Regular
--font-weight-medium
500 - Medium
--font-weight-semibold
600 - Semibold
--font-weight-bold
700 - Bold
Line Height Tokens
--line-height-tight
1.25 - Headlines
--line-height-snug
1.375 - Subtitulos
--line-height-normal
1.5 - Body text
--line-height-relaxed
1.625 - Leitura longa
🎯 Vocabulario para Prompts
"Escala tipografica modular: xs (12px), sm (14px), base (16px), lg (18px), xl (20px), 2xl (24px)"
"Headlines com font-weight-bold e line-height-tight (1.25)"
"Body text com font-size-base, line-height-relaxed para melhor legibilidade"
⚙️ Implementando Tokens
Tokens podem ser implementados de varias formas. As duas mais comuns sao CSS Custom Properties (variaveis nativas) e Tailwind Config (para quem usa Tailwind CSS). IAs dominam ambas as abordagens.
🎨 CSS Custom Properties (Variaveis Nativas)
/* Definicao dos tokens na :root */
:root {
/* Cores */
--color-primary: #3B82F6;
--color-background: #111827;
--color-surface: #1F2937;
--color-text-primary: #F9FAFB;
/* Espacamento */
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-4: 16px;
/* Tipografia */
--font-size-base: 16px;
--font-weight-bold: 700;
}
/* Uso */
.card {
background: var(--color-surface);
padding: var(--spacing-4);
color: var(--color-text-primary);
}
🌊 Tailwind CSS Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
background: '#111827',
surface: '#1F2937',
},
spacing: {
'1': '4px',
'2': '8px',
'4': '16px',
},
fontSize: {
'base': '16px',
'lg': '18px',
}
}
}
}
Uso: bg-primary, p-4, text-base
✓ CSS Variables - Quando Usar
- ✓ Projetos sem framework CSS
- ✓ Precisa de temas dinamicos (dark/light)
- ✓ Quer controle total sobre o CSS
- ✓ Integracao com Web Components
✓ Tailwind Config - Quando Usar
- ✓ Ja usa Tailwind no projeto
- ✓ Quer desenvolvimento ultra-rapido
- ✓ IAs como v0/Lovable usam Tailwind
- ✓ Equipe ja conhece utility-first CSS
🎯 Vocabulario para Prompts
"Crie CSS custom properties para o design system: cores, espacamentos, tipografia"
"Configure tailwind.config.js com tokens customizados para cores e espacamento"
"Use var(--token-name) para referenciar os design tokens"
"Implemente tema dark/light usando CSS variables no :root e .dark"
📝 Resumo do Modulo
Proximo Modulo:
2.2 - Componentes UI Essenciais: Botoes, cards, inputs e como descreve-los para IAs