raw/brand/yellow-200
#FFE082
source: 2:3
Categorias de Foundations
Hub central de foundations com rotas dedicadas para cada área de detalhe.
Primitive ColorsSemantic TokensNon-color FoundationsText StylesEffect Styles
Subpáginas de Foundations
Cada área abaixo possui sua própria página interna com visual examples, tabelas e regras.
Primitive Colors
Paleta base raw de brand, feedback e neutrals.
Preview
raw/brand/yellow-500
#FBBF0E
source: 2:5
raw/brand/purple-100
#F3E8FF
source: 2:6
raw/brand/purple-300
#DBC1F6
source: 2:7
Foundation / Semantic Color Tokens
Tokens semânticos para ação, feedback, background e texto.
Preview
--color/action/primary/light
#FFE082
source: 521:1089
--color/action/primary/dark
#FBBF0E
source: 521:1091
--color/action/secondary/light
#DBC1F6
source: 521:1090
--color/action/secondary/dark
#B994E0
source: 521:1092
Non-color Foundations
Spacing, radius, stroke, reset e famílias tipográficas.
| Token | Valor | Tipo |
|---|---|---|
--font/family/primary | Outfit | font |
--font/family/secondary | Figtree | font |
--spacing/4 | 4px | spacing |
--spacing/8 | 8px | spacing |
--spacing/12 | 12px | spacing |
Text Styles
Estilos tipográficos oficiais com famílias Outfit e Figtree.
Headings/H2
Headings/H2 sample
Outfit / 500 / 32px
LH 1.1 / LS -0.96px
source: 1:75
Headings/H3
Headings/H3 sample
Outfit / 800 / 20px
LH 1.25 / LS -0.2px
source: 1:72
Headings/H4
Headings/H4 sample
Outfit / 400 / 20px
LH 1.25 / LS -0.2px
source: 1:67
Text/Regular
Text/Regular sample
Figtree / 400 / 16px
LH 1.35 / LS -0.32px
source: 1:71
Text/Accent
Text/Accent sample
Figtree / 700 / 16px
LH 1.35 / LS -0.32px
source: 1:74
Label/Regular
Label/Regular sample
Figtree / 400 / 14px
LH 1.25 / LS 0px
source: 1:69
Label/Accent
Label/Accent sample
Figtree / 700 / 14px
LH 1.25 / LS 0px
source: 1:73
Effect Styles
Efeitos oficiais permitidos para construção dos componentes na v1.0.
Box/Shadow right ->
--effect/box/shadow-right
source: vBoKPXMXYU:Effect styles
Box/<- Shadow left
--effect/box/shadow-left
source: eyujNDacLd:Effect styles
Button/Button shadow
--effect/button/shadow
source: CXoBOl57Gd:Effect styles
Button/Button active
--effect/button/active
source: 7ZHZeOW54N:Effect styles
Input/Input focus
--effect/input/focus
source: IaEufgBTFa:Effect styles
Resumo Estrutural
Mapa rápido do que cada subpágina cobre.
| Categoria | Conteúdo | Rota |
|---|---|---|
Primitive Colors | Paleta raw | /foundations/primitive-colors |
Semantic Color Tokens | Tokens semânticos de cor | /foundations/semantic-color-tokens |
Non-color Foundations | Spacing, radius, stroke, reset, fonts | /foundations/non-color-foundations |
Text Styles | Escala tipográfica oficial | /foundations/text-styles |
Effect Styles | Catálogo oficial de efeitos | /foundations/effect-styles |