Pular para conteúdo

Auraxis Docs

MVP-1 Web Design System v3 - Market Pulse

italofelipe/auraxis-platform

MVP-1 Web Design System v3 - Market Pulse¶

Objetivo¶

Estabelecer um Design System profissional, completo e implementável para o web Auraxis após o rebrand total.

Metas do DS:

consistência visual em todas as telas;
clareza para usuário leigo;
profundidade analítica para usuário hardcore;
escalabilidade de produto sem drift de UI.

Princípios de Design¶

Signal First
Sempre mostrar primeiro a informação acionável.
Progressive Disclosure
Resumo no topo, detalhe sob demanda.
Precision over Decoration
Estética forte, mas guiada por legibilidade e decisão.
Dual Persona Ready
A mesma tela deve funcionar para iniciante e analítico avançado.

Arquitetura de Tokens¶

Camadas de token:

Primitives (cores cruas, tipografia base, escala)
Semantic (papel de interface: bg-canvas, text-primary, action-primary)
Component (token local de componente: button-primary-bg, table-row-hover-bg)

Regra: - Componentes consomem apenas tokens semânticos. - Semânticos mapeiam para primitives. - Nunca usar valor literal em componente de produto.

Sistema de Cores (Primitives)¶

Neutral / Surfaces¶

neutral-950: #05070D
neutral-900: #0A0F1A
neutral-850: #0E1523
neutral-800: #121A2A
neutral-750: #172338
neutral-700: #1D2B44
neutral-650: #243652
neutral-600: #2D4466

Text¶

text-100: #F1F5FF
text-200: #D2DCF3
text-300: #94A3BF
text-400: #6E7F9F

Accent Families¶

Cyan (primary action/data)¶

cyan-300: #9BE9FF
cyan-400: #6FE0FF
cyan-500: #44D4FF
cyan-600: #24BEEA
cyan-700: #1598BE

Violet (secondary analytics)¶

violet-300: #BFB5FF
violet-400: #A495FF
violet-500: #8B7DFF
violet-600: #6F62E2
violet-700: #594FC2

Lime (success/profit emphasis)¶

lime-300: #86F7CC
lime-400: #63F0B9
lime-500: #42E8A9
lime-600: #22C88A
lime-700: #169B6B

Orange (warning/highlight)¶

orange-300: #FFD7A7
orange-400: #FFC985
orange-500: #FFB861
orange-600: #E89E47
orange-700: #C68431

Red (loss/error)¶

red-300: #FFB0B6
red-400: #FF9099
red-500: #FF6F79
red-600: #E85763
red-700: #C53F4A

Cores Semânticas¶

bg-canvas: neutral-950
bg-app: neutral-900
bg-elevated: neutral-850
bg-surface: neutral-800
bg-surface-2: neutral-750
text-primary: text-100
text-secondary: text-200
text-muted: text-300
action-primary-bg: cyan-500
action-primary-fg: neutral-900
action-secondary-bg: neutral-800
action-secondary-fg: text-100
action-secondary-border: rgba(255,255,255,.14)
status-profit: lime-500
status-loss: red-500
status-warning: orange-500
status-info: cyan-500
border-subtle: rgba(255,255,255,.10)
border-strong: rgba(68,212,255,.40)

Gradientes Oficiais¶

gradient-brand-primary: linear-gradient(140deg, #44D4FF 0%, #42E8A9 100%)
gradient-brand-secondary: linear-gradient(145deg, #44D4FF 0%, #8B7DFF 100%)
gradient-surface: linear-gradient(175deg, rgba(18,26,42,.86), rgba(10,15,26,.92))

Tipografia¶

Famílias¶

font-ui: Inter
font-mono: IBM Plex Mono

Escala tipográfica¶

display-2xl: 56 / 60 / 700
display-xl: 44 / 50 / 700
h1: 34 / 40 / 700
h2: 28 / 34 / 700
h3: 22 / 28 / 600
h4: 18 / 24 / 600
body-lg: 16 / 24 / 500
body-md: 15 / 22 / 500
body-sm: 14 / 20 / 500
caption: 12 / 16 / 600

Regras¶

Heading sempre com font-ui e tracking levemente negativo.
Valores financeiros (moeda, percentuais, séries) em font-mono.
Evitar mais de 3 níveis tipográficos na mesma área semântica.

Espaçamento e Grid¶

Escala¶

space-1: 4
space-2: 8
space-3: 12
space-4: 16
space-5: 24
space-6: 32
space-7: 40
space-8: 48
space-9: 64

Grid¶

Desktop: 12 colunas
Tablet: 8 colunas
Mobile: 4 colunas
Gutter padrão: 16

Radius / Border / Elevation¶

Radius¶

radius-xs: 6
radius-sm: 10
radius-md: 14
radius-lg: 20
radius-xl: 28
radius-pill: 999

Border¶

border-subtle: 1px solid rgba(255,255,255,.10)
border-strong: 1px solid rgba(68,212,255,.40)

Elevation¶

elevation-soft: 0 14px 34px rgba(0,0,0,.35)
elevation-lift: 0 24px 60px rgba(0,0,0,.50)
elevation-accent: 0 18px 44px rgba(68,212,255,.24)

Motion¶

motion-fast: 140ms ease
motion-standard: 220ms ease
motion-slow: 320ms ease

Usos: - hover/focus: fast - trocar aba de gráfico: standard - mudança de layout relevante: slow

Componentes (Core)¶

TopNav
SidebarNav
Breadcrumbs
estados: default/hover/active/focus/disabled

Inputs¶

TextField, PasswordField, Select, SearchField
estados: default/hover/focus/error/disabled/success

Actions¶

PrimaryButton
SecondaryButton
GhostButton
IconButton

Data¶

KpiCard
ChartContainer
SegmentedControl
DataTable
StatusBadge

Feedback¶

InlineError
InlineSuccess
EmptyState
LoadingState
ErrorState

Data Visualization Rules¶

Paleta de série (ordem)¶

cyan-500
violet-500
lime-500
orange-500
red-500

Gráficos obrigatórios no dashboard¶

Fluxo de caixa (barras + linha)
Composição de gastos (stacked/donut)
Tendência acumulada (área)
Heatmap diário

Regras¶

Não usar mais de 5 cores simultâneas em uma visualização.
Eixo e grid discretos (não competir com série).
Tooltip sempre com valor monetário formatado em font-mono.
Drill-down sempre disponível por clique.

Acessibilidade (AA+)¶

contraste AA mínimo em texto e controles;
foco visível com contorno claro (outline);
alvo mínimo confortável em elementos clicáveis;
labels explícitos para campos;
não depender apenas de cor para status.

Voice & Copy¶

idioma padrão: PT-BR
frases curtas e objetivas
termos financeiros com explicação simples quando necessário
evitar jargão excessivo sem contexto

Anti-Patterns (proibidos)¶

cores do DS antigo (#ffab1a, #ffbe4d, #ffd180, #272020, #413939, #0c0909, #0b0909)
tipografia antiga (Playfair Display, Raleway) no web rebrand
tema claro isolado em páginas específicas
componente sem estado de foco/erro/loading
uso de literal hardcoded em componente de produto

Checklist de QA visual¶

Fontes e referência¶

Apple HIG Materials
Apple HIG Charts
WCAG 2.2
referências de produto: TradeMap, Copilot, Monarch