Versão 1.0 • 2026
Gabriel Silva
Sistema de Design & Identidade Visual
1. Paleta de Cores
DARK MODE (Default)
Tokens
Primary
#00d1b2
CTAs, Destaques
Background
#1a1a1a
Surface
#242424
Border
#2f2f2f
Texto
text-primary
#ffffff
text-secondary
#a3a3a3
text-muted
#6b7280
LIGHT MODE
Tokens
Primary
#00a896
CTAs, Destaques
Background
#ffffff
Surface
#f5f5f5
Border
#e5e5e5
Texto
text-primary
#1a1a1a
text-secondary
#525252
text-muted
#a3a3a3
Cores de Acento
Blue
#3b82f6
Sky
#38bdf8
Orange
#fb923c
Emerald
#34d399
2. Tipografia
Aa
Google Sans Flex
Fallback: Inter, Instrument Sans, system-ui
H1 / 700 / 48-60px
The quick brown fox
H2 / 700 / 30-36px
Jumps over the lazy dog
H3 / 700 / 18-20px
Pack my box with five dozen liquor jugs
Body / 400 / 14-16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Small / 500 / 12px
Labels, metadados e informações auxiliares
3. Espaçamento & Radius
Espaçamento (base: 4px)
xs
4px
sm
8px
md
16px
lg
24px
xl
32px
2xl
48px
3xl
64px
4xl
96px
Border Radius
sm
4px
md
8px
lg
12px
full
9999px
4. Sombras
Dark Mode
shadow-card
0 10px 40px -10px rgba(0, 209, 178, 0.15)
shadow-elevated
0 4px 20px rgba(0, 0, 0, 0.4)
Light Mode
shadow-card
0 4px 20px rgba(0, 0, 0, 0.08)
shadow-elevated
0 8px 30px rgba(0, 0, 0, 0.12)
5. Transições & Estados
Durações
| Token | Duração | Easing |
|---|---|---|
| fast | 150ms | ease-out |
| normal | 300ms | ease-out |
| slow | 500ms | ease-out |
| entrance | 800ms | cubic-bezier(0.33, 1, 0.68, 1) |
Estados de Interação
| Elemento | Hover / Focus |
|---|---|
| Botões | translateY(-4px), opacity 90% |
| Cards | translateY(-8px), border → primary |
| Ícones | scale(1.1) rotate(3deg) |
| Inputs (focus) | ring 2px primary, offset 2px |
| Disabled | opacity 50%, cursor not-allowed |
6. Componentes & Interações
Botões
Normal
Primary
Secondary
- • Primary: bg primary, texto background
- • Secondary: bg surface, border border
- • Padding: 12px 24px, radius sm (4px)
Hover
Primary
Secondary
- • translateY(-4px) — eleva o botão
- • opacity: 90% — leve fade
- • Transição: 300ms ease-out
Inputs
Normal
nome@exemplo.com
- • Background: border (#2f2f2f)
- • Border: 1px #404040
- • Padding: 12px 16px, radius md (8px)
Focus
nome@exemplo.com|
- • ring: 2px primary
- • offset: 2px (espaço entre borda e ring)
- • Texto muda para text-primary
Cards
Normal
Título do Card
Descrição breve do conteúdo.
- • Background: surface 50% opacity
- • Border: 1px border
- • Padding: 24-32px, radius lg (12px)
HOVER
Hover
Título do Card
Descrição breve do conteúdo.
- • translateY(-8px) — eleva o card
- • border → primary
- • Ícone: scale(1.1) rotate(3deg)
- • Transição: 300ms ease-out