Dioros Design System

Paleta de Cores

Tokens do tema Dioros Intelligence Dark. Use as variáveis CSS — não valores fixos.

Superfícies

Background

#171717

Background Subtle

#1f1f1f

Surface

#202020

Surface Elevated

#262626

Surface Soft

#2a2a2a

Sidebar

#0b1f33

Sidebar Elevated

#142234

Sidebar Accent

#12314f

Bordas

Border

rgba(255,255,255,0.08)

Border Strong

rgba(255,255,255,0.14)

Input

rgba(255,255,255,0.12)

Texto

Text Primary

#f4f4f5

Text Secondary

#c7c9cc

Text Muted

#8f949c

Text Faint

#626872

Marca

Brand Orange

#f97316

Brand Orange Hover

#fb923c

Brand Blue

#3b82f6

Brand Navy

#0b1f33

Semântica

Success

#22c55e

Warning

#f59e0b

Danger

#ef4444

Uso no código: Use bg-surface, text-muted-foreground, border-border — nunca valores hex fixos. Laranja (bg-brand-orange) apenas para ação principal. Azul (bg-brand-blue) para suporte e foco.

Tipografia

Fonte Inter via Tailwind. Os pesos e tamanhos seguem a escala definida no DESIGN.md.

Tamanhos

xs (12px) — text-xs

Labels de tabela, badges, metadados

sm (13px) — text-sm

Texto corrido, descrições, inputs

base (15px) — text-base

Tamanho padrão do body

lg (16px) — text-lg

Destaques sutis, nomes de cliente

xl (20px) — text-xl

Títulos de seção, métricas

2xl (24px) — text-2xl

Headers de página

3xl (32px) — text-3xl

Números grandes, hero

Pesos

Regular 400

Texto comum, descrições, parágrafos

Medium 500

Labels de formulário, nav, botões, nomes

Semibold 600

Títulos de seção, métricas, cards

Bold 700

Raramente — apenas números grandes ou destaque crítico

Números tabulares

R$ 12.458,32 · 94,7% · CPC R$ 3,42

Use tabular-nums em métricas, valores e dados financeiros.

Botões

Variantes do componente Button do shadcn. Use com moderação — laranja só na ação principal.

Variantes

Tamanhos

Com ícone

Estados

Regra: Laranja (variant="default") apenas para a ação principal da tela. Os demais botões devem usar outline, ghost ou secondary. Botões destrutivos usam vermelho sem glow.

Inputs

Componente Input do shadcn + exemplos de campo com ícone e prefixo.

Estados

Default

Foco

Desabilitado

Com ícone e prefixo

Busca

Data

Moeda

R$

Com label

Nome do cliente

Regra: Inputs têm h-8, rounded-lg, borda fina. Labels acima do campo. Foco com anel laranja (focus-visible:border-ring). Prefixos e ícones usam pointer-events-none.

Cards

Componente Card do shadcn. Use como container de dados, nunca como bloco decorativo.

Card padrão

Card com tamanho default, borda fina e sem sombra. Use para métricas e resumos.

Card elevado

O fundo usa bg-card (#202020). A superfície elevada pode ser usada com bg-surface-elevated.

Card destacado

Use borda laranja apenas para destacar um item importante. Raro. Prefira a borda sutil padrão.

Card de métrica

Impressões

12.458

Cliques

894

CTR

7,2%

CPC

R$ 3,42

Badges / Status

Componente Badge do shadcn. Use discretamente — fundo suave + texto semântico.

Variantes

Default Secondary Outline Ghost Destructive Link

Status semânticos

No ar Fora do ar Atenção Info

Regra: Badges usam cores semânticas apenas — verde para sucesso, vermelho para erro, amarelo para alerta. Fundo sempre suave (bg-success-soft), nunca cor chapada.

Modais

Modal visual mockado (inline). O modal real usa overlay + blur + centralizado.

Regras: Overlay bg-black/60 backdrop-blur-sm. Modal centralizado com rounded-2xl, border, bg-surface-elevated. Fecha com ESC, clique no X e clique no overlay. Botão primário em laranja.

Sidebar / Topbar

Referência visual dos componentes de layout. A sidebar é recolhível; a topbar é fina e translúcida.

Sidebar (recolhível)

← sidebar aberta

Sidebar recolhida

Topbar

Regras: Sidebar usa bg-sidebar (#0b1f33). Largura expandida w-52 (208px), recolhida w-16 (64px). Topbar com h-11, fundo bg-background/70 e backdrop-blur-lg.

Exemplos Práticos

Composições reais usando os componentes do sistema.

Barra de busca com contagem

10 clientes

Card de cliente (frente)

Dr. Exemplo

Anúncios desde 15/03/2024

14 meses em veiculação

Ação principal

Cards de resumo

Clientes

10

Investimento

R$ 48.200

CTR Médio

4,8%

O que evitar

Padrões que comprometem a identidade visual da Dioros.

Laranja em excesso

Botões, bordas, ícones e badges tudo ao mesmo tempo. Laranja é ação principal, não decoração.

laranja laranja

Bordas muito fortes

Bordas com opacidade alta quebram a hierarquia de superfícies. Prefira border com opacidade 8-14%.

border-2 border-red-500/30

Azul neon

Azul saturado no fundo ou em cards polui a identidade. Use brand-blue com controle e brand-navy para superfícies.

bg-blue-600/20

Glow e sombras pesadas

Efeitos de brilho, glow e sombras fortes destoam do minimalismo. Use bordas e camadas de superfície.

shadow-lg shadow-yellow-500/20

Inputs com altura inconsistente

Inputs com alturas diferentes quebram o ritmo visual. Mantenha h-8 para inputs compactos.

Botão outline em toda ação

Botões outline demais criam ruído visual. Alterne entre ghost, outline e secondary.