Design System

Visão Geral

O Design System do Aura define tokens, componentes e regras visuais para todas as aplicações. É baseado em CSS custom properties com suporte a dark/light mode.

Propriedade	Valor
Localização	`design-system/` no repositório
Arquivos	`tokens.css`, `components.css`, `utilities.css`
Framework	Tailwind CSS + CSS custom properties
Mode padrão	Dark
Light mode	`[data-theme="light"]`

Cores — Brand

Token	Dark	Light	Uso
`--accent`	`#00aaaf`	`#00aaaf`	Cor principal (teal/turquesa)
`--accent-secondary`	`#3c1469`	`#3c1469`	Cor secundária (roxo)
`--gradient`	`#00aaaf → #3c1469`	`#00aaaf → #3c1469`	Gradiente brand

Cores — Surface

Token	Dark	Light	Uso
`--surface-0`	`#0a0a0f`	`#ffffff`	Background principal
`--surface-1`	`#12121a`	`#f8f9fa`	Cards, containers
`--surface-2`	`#1a1a25`	`#f0f1f3`	Hover, secondary
`--surface-3`	`#22222f`	`#e8e9eb`	Borders, dividers

Cores — Text

Token	Dark	Light	Uso
`--text-primary`	`#f0f0f5`	`#1a1a2e`	Títulos, body text
`--text-secondary`	`#9999aa`	`#666680`	Subtítulos, labels
`--text-muted`	`#555566`	`#999aab`	Placeholders, hints

Cores — Status

Token	Cor	Uso
`--status-success`	`#22c55e`	Operacional, aprovado
`--status-warning`	`#f59e0b`	Atenção, pendente
`--status-error`	`#ef4444`	Erro, offline
`--status-info`	`#3b82f6`	Informação

Tipografia

Propriedade	Valor
Font family	Inter, system-ui, sans-serif
Base size	16px
Scale	1.25 (Major Third)
Line height	1.5 (body), 1.2 (headings)

Espaçamento

Baseado em múltiplos de 4px:

Token	Valor	Uso
`--space-1`	4px	Gaps mínimos
`--space-2`	8px	Inner padding
`--space-3`	12px	Between elements
`--space-4`	16px	Card padding
`--space-6`	24px	Section spacing
`--space-8`	32px	Large spacing

Border Radius

Token	Valor	Uso
`--radius-sm`	4px	Buttons, inputs
`--radius-md`	8px	Cards
`--radius-lg`	12px	Modals, panels
`--radius-xl`	16px	Feature cards
`--radius-full`	9999px	Badges, pills

Componentes

Cards

Background: --surface-1
Border: 1px --surface-3
Radius: --radius-md
Padding: --space-4
Hover: border --accent com transition

Buttons

Primary: background --accent, text white
Secondary: background --surface-2, text --text-primary
Ghost: background transparent, text --accent
Radius: --radius-sm
Padding: --space-2 --space-4

Inputs

Background: --surface-0
Border: 1px --surface-3
Focus: border --accent, glow subtle
Radius: --radius-sm

Dark/Light Mode

O modo padrão é dark. Light mode é ativado via data-theme="light" no <html>:

<!-- Dark (padrão) -->
<html>

<!-- Light -->
<html data-theme="light">

Todos os tokens são redefinidos no seletor [data-theme="light"] — componentes usam os tokens e se adaptam automaticamente.

Arquivos

Arquivo	Conteúdo
tokens.css	Custom properties (cores, tipografia, espaçamento)
components.css	Estilos de componentes (cards, buttons, inputs)
utilities.css	Classes utilitárias