Design System Tokens

Visualização completa dos tokens de design do BOLTR

Paleta de Cores Brand

Cores personalizadas do projeto BOLTR (escala de cinza)

brand.0
#f5f5f5

Muito claro (backgrounds suaves)

brand.5
#8b8b8b

PRIMÁRIA (botões, links)

brand.9
#212121

Muito escuro (contraste máximo)

Cores Semânticas

Cores para estados e feedback do sistema

Success
#edfcf2 - #168c3d

Tarefas concluídas, validações bem-sucedidas

Error
#fceeef - #70161c

Erros de validação, estados de falha

Warning
#fff8e1 - #b07100

Avisos importantes, estados de atenção

Tipografia

Famílias de fonte e hierarquia de títulos

Famílias de Fonte

Inter TightFonte principal (interface, textos, títulos)

The quick brown fox jumps over the lazy dog

Fira CodeFonte monospace (código, dados)

const theme = createTheme({ colors: { brand: [...] } });

Hierarquia de Títulos

Title order=1 - H1 (títulos principais)

Title order=2 - H2 (seções)

Title order=3 - H3 (subseções)

Title order=4 - H4 (subtítulos)

Title order=5 - H5 (labels)
Title order=6 - H6 (menor)

Sistema de Espaçamento

Valores consistentes para padding, margin e gaps

xs0.5rem8px
md1rem16px
xl2rem32px

Breakpoints Responsivos

Sistema de breakpoints para design responsivo

xs36em576px
Mobile
md62em992px
Desktop pequeno
xl88em1408px
Desktop grande

Tokens de Componentes

Exemplos de componentes com diferentes variantes

Badges

FilledLightOutline

Sombras

xs (desabilitada)
sm (desabilitada)
md (desabilitada)
lg (desabilitada)

Todas as sombras estão desabilitadas por padrão

Cores Semânticas

SuccessErrorWarning