Design system

Tokens from @theme in globals.css.

Colors

brand-primary

primary-50

primary-100

primary-200

primary-300

primary-400

primary-500

primary-600

primary-700

primary-800

primary-900

primary-950

brand-secondary

ui-bg

ui-surface

ui-text

ui-muted

Semantic (alertas / badges)

semantic-success

semantic-warning

semantic-danger

semantic-info

ui-skeleton

Typography: Sora vs. system

font-display (Sora)

Heading 1

Heading 2

Heading 3

Heading 4

font-sans (system-ui)

Corpo de texto com a família de sistema. Compare o ritmo e a legibilidade com os títulos ao lado, que usam Sora (--font-display → --font-sora). Esta coluna usa font-sans e reflete o texto de interface padrão.

Parágrafo secundário em tamanho menor, ainda em system-ui, para contraste com a hierarquia dos títulos em Sora.

Type scale

text-xsThe quick brown fox jumps over the lazy dog

text-smThe quick brown fox jumps over the lazy dog

text-baseThe quick brown fox jumps over the lazy dog

text-lgThe quick brown fox jumps over the lazy dog

text-xlThe quick brown fox jumps over the lazy dog

text-2xlThe quick brown fox jumps over the lazy dog

text-3xlThe quick brown fox jumps over the lazy dog

text-4xlThe quick brown fox jumps over the lazy dog

text-5xlThe quick brown fox jumps over the lazy dog

Radius

rounded-sm

rounded-md

rounded-lg

rounded-xl

rounded-brand

Shadows

shadow-soft

Sombra suave para cartões e superfícies elevadas de forma discreta.

shadow-brand

Sombra com tom da cor primária para destaque de marca.

Links e listas

Links

Texto com link padrão (hover e foco visível).

Link visitado — use visited: com moderação.

Lista com marcadores

Primeiro item
Segundo item
Terceiro item

Lista numerada

Passo um
Passo dois
Passo três

Cards

Título do card

Subtítulo ou contexto opcional

Corpo do card: conteúdo principal, descrição ou lista resumida. Use rounded-xl e borda sutil para alinhar com o restante da UI.

Formulários

Nome

E-mail

Insira um e-mail válido.

Mensagem

Espécie

Campo desabilitado

CheckboxesLembre-me neste dispositivoReceber novidades por e-mail

RadioBásicoPro

Notificações push

Alertas

Info: Mensagem informativa alinhada à paleta primária.

Sucesso: Operação concluída.

Atenção: Revise os dados antes de enviar.

Erro: Não foi possível salvar. Tente de novo.

Badges

NovoAtivoPendenteErroNeutro

Loading

Skeleton

Spinner

Carregando…

Empty state

∅

Nada por aqui

Quando não houver itens, use um título claro, uma linha de apoio e um botão de ação.

Prefira contraste adequado: texto principal em ui-text sobre ui-surface ou fundos claros da escala primária.
Elementos interativos devem exibir foco visível (ex.: focus-visible:outline-2) — os botões e links desta página seguem esse padrão.
Associe label, aria-describedby e aria-invalid em campos com erro, como no exemplo de e-mail.

Botões

Todas as variantes usam rounded-brand e tokens de cor do tema.

Primary

Secondary

Outline

Ghost

Muted