TRAKO/Design Systemv1.0
← BUILD

Paleta de Cores

Clique num swatch para copiar o hex. Tokens organizados por contexto semântico.

Primary — Verde
Secondary — Laranja
Neutros — Navy
Backgrounds
IA / Dados — Pink
Semânticos

Escala Tipográfica

Sistema de tipografia sem fonte customizada — usa a stack sans-serif do sistema (Inter / -apple-system / Segoe UI).

NomeClasseTamanhoPesoUso
Display / Herotext-5xl font-black48px900H1 de páginas hero
Heading 1text-4xl font-black36px900Títulos de seção principais
Heading 2text-3xl font-bold30px700Subtítulos de seção
Heading 3text-xl font-bold20px700Cards, títulos de bloco
Heading 4text-base font-bold16px700Labels, títulos menores
Body Largetext-lg font-normal18px400Parágrafos de hero/intro
Bodytext-base font-normal16px400Texto corrido padrão
Body Smalltext-sm font-normal14px400Texto secundário, descrições
Captiontext-xs font-medium12px500Labels, badges, metadados
Microtext-[10px] font-bold10px700Status chips, tags compactas

Display Hero 48px

Heading 1 — 36px Black

Heading 2 — 30px Bold

Heading 3 — 20px Bold

Body text — 16px Regular. Texto corrido para parágrafos, descrições e conteúdo secundário da interface.

Body Small — 14px Regular. Usado em descrições de cards, metadados e textos auxiliares.

Caption 12pxMICRO 10PX

Espaçamento

Escala de 4px base. Usada em padding, margin, gap e sizing.

space-1
4px0.25remGap mínimo entre ícones e texto
space-2
8px0.5remPadding interno de chips
space-3
12px0.75remGap entre elementos próximos
space-4
16px1remPadding de cards compactos
space-5
20px1.25remGap entre componentes
space-6
24px1.5remPadding de cards padrão
space-8
32px2remPadding de seções
space-10
40px2.5remEspaçamento entre blocos
space-14
56px3.5remMargin entre seções grandes
space-20
80px5remPadding vertical de seções

Elevação / Sombras

4 níveis de elevação para cards, modals e componentes flutuantes.

FlatCards sem destaque
smCards padrão
mdCards em hover, dropdowns
xlModals, popovers

Border Radius

Raios de borda padronizados para consistência visual.

rounded-lg8pxChips, badges pequenos
rounded-xl12pxBotões, inputs
rounded-2xl16pxCards padrão
rounded-3xl24pxCards hero, modals
rounded-full9999pxPills, avatars