Brand Design System / Components

UI Components

Todos os componentes construídos sobre os design tokens. Cada preview é ao vivo — o que vês é CSS puro com variáveis do sistema.

01

Buttons

Quatro variantes com três tamanhos. O botão primário usa --cta-bg (gold) para máxima atenção. O secundário usa bordas e accent green para acções alternativas.

Primary Button
Variantes
--btn-primary-bg→ cta-bg
--btn-primary-bg-hover→ cta-bg-hover
--btn-primary-text→ cta-text
--btn-radius→ r-md (8px)
--btn-font-weight700
--btn-transitionall 180ms ease
02

Cards

Cards são superfícies elevadas sobre o --bg-base. Versão estática para conteúdo informativo, versão interactiva com hover para elementos clicáveis.

Card — Estático
Guidelines
Brand Guidelines
Estratégia de marca, identidade visual e tom de comunicação para todos os pontos de contacto.
v1.0 · 7 secções
Card — Interactivo (hover para ver)
01 — FOUNDATIONS
Design Tokens
80+ tokens em 3 camadas. Primitivos → Semânticos → Componente.
Ver tokens
--card-bg→ bg-surface
--card-border→ border-subtle
--card-radius→ r-lg (12px)
--card-padding→ s6 (24px)
--card-hover-border→ accent-dim
shadow on hovershadow-md + shadow-glow
03

Inputs

Campos de texto com estados definidos: default, focus (glow verde), erro e desactivado. O anel de foco usa box-shadow para não alterar o layout.

Input States
Usa o teu email de trabalho
Formato de email inválido.
--input-bg→ bg-surface-raised
--input-border→ border-default
--input-border-focus→ accent-primary
--input-text→ text-primary
--input-placeholder→ text-disabled
--input-radius→ r-md (8px)
04

Badges & Tags

Badges para estado e categorização. Tags em JetBrains Mono para secções e labels técnicos. Ambos usam border-radius full para distinguir de botões.

Badges
Live
Em breve
Beta
Depreciado
Planeado
Section Tags
Guidelines Foundations Components Patterns v1.0
--badge-bgrgba(114,184,114,.08)
--badge-borderrgba(114,184,114,.2)
--badge-text→ accent-primary
--badge-radius→ r-full (9999px)
--badge-padding4px 12px
--tag-font→ font-mono
05

Feedback

Alerts, toggles e avatares para comunicar estados ao utilizador. Usam os tokens --status-* para consistência.

Alerts
Usa sempre tokens semânticos — nunca valores primitivos directamente nos componentes.
Tokens importados com sucesso. Sistema pronto a usar.
Componente em beta — pode ter alterações antes do v1.0.
Ficheiro tokens.css não encontrado. Verifica o caminho de importação.
Toggles & Avatars
Dark mode activo
Notificações
AN
NG
DS
V1
06

Data Display

Componentes para exibir progresso, estados de carregamento e atalhos de teclado.

Progress Bars
Tokens configurados 100%
Componentes documentados 75%
Padrões publicados 40%
Skeleton Loaders
07

Miscellaneous

Dividers, tooltips e keyboard badges — elementos utilitários que completam a biblioteca.

Dividers
ou continua com
Tooltip & Keyboard Badges
Abre o brandbook completo
⌘ K Pesquisa rápida
Ctrl Shift P Command palette