Foundations
Design tokens: spacing, radius, shadows, transitions e variáveis CSS.
01
Spacing Scale
Sistema de espaçamento
Spacing Tokens
| Token | Value |
|---|---|
| --space-xs | 4px |
| --space-sm | 8px |
| --space-md | 16px |
| --space-lg | 24px |
| --space-xl | 32px |
| --space-2xl | 48px |
| --space-3xl | 64px |
4
8
16
24
32
48
64
02
Border Radius
Cantos arredondados
Button
12px
Card
16px
Input
10px
Modal
20px
Pill
9999px
03
Shadows
Sombras e glow effects
Shadow SM
0 1px 2px rgba(0,0,0,0.05)
Shadow MD
0 4px 6px rgba(0,0,0,0.07)
Shadow LG
0 10px 15px rgba(0,0,0,0.1)
Glow
0 0 20px forest/15%
04
Transitions
Durações e easing
Transition Tokens
| Token | Value |
|---|---|
| --transition-fast | 150ms ease |
| --transition-normal | 250ms ease |
| --transition-slow | 400ms ease-out |
05
CSS Variables
Implementação completa
:root {
/* Primary */
--color-primary: #2D6A4F;
--color-primary-light: #40916C;
--color-primary-dark: #1B4332;
/* Secondary */
--color-coral: #F4845F;
--color-amber: #FFB703;
--color-sky: #90E0EF;
/* Neutral (Light Mode) */
--color-bg: #FFFFFF;
--color-surface: #F8F9FA;
--color-border: #E9ECEF;
--color-text-muted: #6C757D;
--color-text: #212529;
/* Semantic */
--color-success: #40916C;
--color-warning: #FFB703;
--color-danger: #E5383B;
--color-info: #90E0EF;
/* Typography */
--font-display: 'Outfit', system-ui, sans-serif;
--font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
[data-theme="dark"] {
--color-bg: #0D1117;
--color-surface: #161B22;
--color-border: #30363D;
--color-text-muted: #8B949E;
--color-text: #E6EDF3;
}