Design system da Solvion

• Fundo

  --background

  Tela da página

• Cartão

  --card

  Superfícies elevadas, popovers

• Atenuado

  --muted

  Preenchimentos discretos, cabeçalhos de tabela

• Destaque

  --accent

  Hover e linhas selecionadas

• Primeiro plano

  --foreground

  Texto, botões primários

• Primeiro plano atenuado

  --muted-foreground

  Texto secundário

• Contorno

  --border

  Divisores, contornos

• Anel

  --ring

  Contorno de foco

• Ink

  --color-ink

  Superfície escura fixa para heroes

• Marca

  --brand

  Ações, ligações, foco

• Marca suave

  --brand-soft

  Preenchimentos com tom da marca

• Marca 2

  --brand-2

  Prova, resultados, estado em direto

• Marca 2 suave

  --brand-2-soft

  Preenchimentos com tom de resultado

• Sucesso

  --success

  Guardado, publicado, operacional

• Aviso

  --warning

  Requer atenção, a expirar

• Destrutivo

  --destructive

  Erros, ações de apagar

• Informação

  --brand

  Avisos neutros reutilizam a marca

• Um destaque por vista. O índigo assinala a próxima ação. Se duas coisas estão a índigo, uma delas está errada.
• O ciano conquista-se. Só para resultados, conquistas e estado em direto. Nunca como decoração.
• O texto mantém-se neutro. O texto corrido é foreground ou muted-foreground; o texto colorido é para ligações e etiquetas curtas.
• Proporção ≈ 80 / 15 / 5. Os neutros dominam, o índigo apoia, o ciano realça.
• Use tokens, não hex. bg-brand e não bg-[#3672e9]; o modo escuro depende disso.
• Ink para impacto. Heroes e secções finais podem usar a superfície escura ink, independentemente do tema.

• Linhas de 45–75 caracteres. Limite os parágrafos a max-w-xl / max-w-2xl.
• Maiúscula só no início da frase — títulos, botões, etiquetas. Tudo em maiúsculas só nos eyebrows.
• Equilibre os títulos com text-wrap: balance (já incluído nos utilitários de display).
• Números tabulares em tabelas e métricas: tabular-nums.
• Hierarquia por tamanho e peso, não por cor. Uma linha de display por página.
• Mínimo de 16px para texto corrido e campos de formulário (evita o zoom do iOS ao focar).

• Entrar devagar, sair depressa. As saídas duram cerca de dois terços da duração da entrada.
• Animar só transform e opacity. Nunca width, height ou top — provocam saltos no layout.
• Respeitar o movimento reduzido. motion-reduce: remove o movimento; os fades podem manter-se.
• Nada se repete em ciclo, exceto indicadores de carregamento. Sem carrosséis em reprodução automática.

Também disponíveis no shadcn/ui e usados no painel: sidebar, sheet, drawer, command, combobox, calendar, context-menu, menubar, navigation-menu, resizable, scroll-area, table, chart, carousel.

Tema: claro, escuro ou do sistema, guardado em localStorage e aplicado por um script inline em <head> antes da primeira pintura (theme-script.tsx, use-theme.ts). Disponível no site, no login e no painel.

• Escolha a forma antes da cor. Um único número é um cartão de indicador, não um gráfico.
• Um só eixo y. Duas medidas com escalas diferentes dão dois gráficos.
• A cor acompanha a entidade, nunca a sua posição — filtrar não pode mudar a cor das séries que ficam.
• Legenda a partir de 2 séries, rótulos diretos até 4; a identificação nunca depende só da cor.
• Marcas finas: linhas de 2px, extremidades das barras arredondadas a 4px, 2px de intervalo entre barras.
• O texto fica em ink. Rótulos e valores usam tokens de texto, nunca a cor da série.

• Comece pelas palavras importantes — as pessoas leem na diagonal as duas primeiras.
• Estados vazios explicam o que vai aparecer e como começar.
• Confirmações repetem o objeto: “Apagar ‘Plataforma de sinistros’?”.
• Placeholders mostram o formato, nunca substituem a etiqueta.

• HTML semântico primeiro: button para ações, a para navegação, um único h1 por página.
• Áreas de toque ≥ 44×44px no telemóvel; espaçamento mínimo de 24px entre alvos pequenos.
• Cada campo tem uma etiqueta visível; os erros são associados com aria-describedby.
• Imagens: alt com significado, ou alt="" quando são decorativas.
• Nunca só a cor — acompanhe o estado com ícone e texto.
• Movimento reduzido desativa WebGL, varrimentos, scroll suave e transições de diapositivos.
• A ligação para saltar para #main é o primeiro elemento focável do site.
• Zoom a 200% sem scroll horizontal com 320px de largura.