Ir para o conteúdo
HENVARA TECH

Design System

O sistema por trás de cada pixel da HENVARA

Tokens, escala tipográfica, componentes e regras de qualidade. Esta página é gerada a partir do mesmo código que renderiza o site.

Princípios

Como o sistema pensa

  • Uma fonte de verdade

    Cores, espaçamento, tipografia e movimento nascem de um único arquivo de tokens. O CSS é gerado, nunca escrito à mão.

  • Semântica antes de aparência

    Componentes usam papéis (surface, content-muted), não cores. Trocar o tema é trocar valores, não reescrever telas.

  • Acessível por contrato

    Pares de cor têm contraste verificado por teste; exceções são documentadas, nunca silenciosas.

  • Regras que o build cobra

    Um lint de tokens falha o pipeline quando surgem hexadecimais, medidas soltas ou classes fora do sistema.

Fundamentos

Cor em três camadas

Primitivos guardam o valor bruto da marca. Papéis semânticos dizem para que a cor serve. Tokens de componente ligam o papel a um uso específico.

1 · Primitivos

  • blue-300

    #5ea2ff

  • blue-400

    #5b8def

  • blue-50

    #e8f1ff

  • blue-500

    #1677ff

  • blue-700

    #0b5bd3

  • gray-200

    #dbe3ee

  • gray-300

    #c3cfdf

  • gray-50

    #f5f7fa

  • green-400

    #2ad9ad

  • green-500

    #00c896

  • green-700

    #007a5e

  • navy-500

    #2a4a72

  • navy-600

    #1c3a5e

  • navy-800

    #0a2540

  • navy-900

    #0a1628

  • red-300

    #ff8f8f

  • red-700

    #c62828

  • slate-200

    #b4c2d6

  • slate-400

    #7a8aa0

  • slate-600

    #475569

  • white

    #ffffff

2 · Papéis semânticos (claro e escuro)

Papéis semânticos de cor e os primitivos a que apontam em cada tema
PapelClasse TailwindClaroEscuro
backgroundbg-backgroundwhite · #ffffffnavy-900 · #0a1628
foregroundbg-foregroundnavy-900 · #0a1628gray-50 · #f5f7fa
cardbg-cardwhite · #ffffffnavy-800 · #0a2540
card-foregroundbg-card-foregroundnavy-900 · #0a1628gray-50 · #f5f7fa
popoverbg-popoverwhite · #ffffffnavy-800 · #0a2540
popover-foregroundbg-popover-foregroundnavy-900 · #0a1628gray-50 · #f5f7fa
primarybg-primarynavy-800 · #0a2540blue-700 · #0b5bd3
primary-foregroundbg-primary-foregroundwhite · #ffffffwhite · #ffffff
secondarybg-secondarygray-50 · #f5f7fanavy-800 · #0a2540
secondary-foregroundbg-secondary-foregroundnavy-800 · #0a2540gray-50 · #f5f7fa
mutedbg-mutedgray-50 · #f5f7fanavy-800 · #0a2540
muted-foregroundbg-muted-foregroundslate-600 · #475569slate-200 · #b4c2d6
accentbg-accentblue-50 · #e8f1ffnavy-600 · #1c3a5e
accent-foregroundbg-accent-foregroundnavy-800 · #0a2540white · #ffffff
destructivebg-destructivered-700 · #c62828red-300 · #ff8f8f
borderbg-bordergray-200 · #dbe3eenavy-600 · #1c3a5e
border-strongbg-border-strongslate-400 · #7a8aa0slate-400 · #7a8aa0
inputbg-inputgray-300 · #c3cfdfnavy-500 · #2a4a72
ringbg-ringblue-500 · #1677ffblue-300 · #5ea2ff
chart-1bg-chart-1blue-500 · #1677ffblue-500 · #1677ff
chart-2bg-chart-2green-500 · #00c896green-500 · #00c896
chart-3bg-chart-3navy-800 · #0a2540navy-800 · #0a2540
chart-4bg-chart-4blue-400 · #5b8defblue-400 · #5b8def
chart-5bg-chart-5slate-400 · #7a8aa0slate-400 · #7a8aa0
brand-bluebg-brand-blueblue-500 · #1677ffblue-500 · #1677ff
brand-blue-softbg-brand-blue-softblue-300 · #5ea2ffblue-300 · #5ea2ff
brand-greenbg-brand-greengreen-500 · #00c896green-500 · #00c896
surfacebg-surfacewhite · #ffffffnavy-900 · #0a1628
surface-subtlebg-surface-subtlegray-50 · #f5f7fanavy-800 · #0a2540
surface-accentbg-surface-accentblue-50 · #e8f1ffnavy-600 · #1c3a5e
surface-brandbg-surface-brandnavy-800 · #0a2540navy-800 · #0a2540
surface-inversebg-surface-inversenavy-900 · #0a1628navy-900 · #0a1628
content-strongbg-content-strongnavy-800 · #0a2540white · #ffffff
content-mutedbg-content-mutedslate-600 · #475569slate-200 · #b4c2d6
content-inversebg-content-inversewhite · #ffffffwhite · #ffffff
content-inverse-mutedbg-content-inverse-mutedslate-200 · #b4c2d6slate-200 · #b4c2d6
content-linkbg-content-linkblue-700 · #0b5bd3blue-300 · #5ea2ff
content-successbg-content-successgreen-700 · #007a5egreen-500 · #00c896
content-errorbg-content-errorred-700 · #c62828red-300 · #ff8f8f
content-eyebrowbg-content-eyebrowgreen-500 · #00c896green-500 · #00c896
action-accentbg-action-accentgreen-500 · #00c896green-500 · #00c896
action-accent-hoverbg-action-accent-hovergreen-400 · #2ad9adgreen-400 · #2ad9ad
action-accent-foregroundbg-action-accent-foregroundnavy-900 · #0a1628navy-900 · #0a1628

Contraste verificado

Pares do tema claro, checados automaticamente a cada mudança nos tokens.

Razões de contraste dos pares texto e fundo (WCAG AA exige 4,5 para texto normal)
TextoFundoRazãoResultado
foregroundbackground18.13:1AA ✔
content-strongsurface15.54:1AA ✔
content-strongsurface-subtle14.48:1AA ✔
content-mutedsurface7.58:1AA ✔
content-mutedsurface-subtle7.06:1AA ✔
content-mutedsurface-accent6.66:1AA ✔
content-linksurface6.08:1AA ✔
content-successsurface5.32:1AA ✔
content-inversesurface-inverse18.13:1AA ✔
content-inversesurface-brand15.54:1AA ✔
content-inverse-mutedsurface-inverse10.04:1AA ✔
content-inverse-mutedsurface-brand8.60:1AA ✔
action-accent-foregroundaction-accent8.38:1AA ✔
content-eyebrowsurface-inverse8.38:1AA ✔
content-eyebrowsurface-brand7.18:1AA ✔
content-eyebrowsurface2.16:1Exceção documentadaDecisão de marca: o verde #00C896 exato nos rótulos (eyebrow). Contraste ~2:1 sobre branco, abaixo do AA. Para corrigir, aponte `content-eyebrow` para `green-700` no tema claro.
content-eyebrowsurface-subtle2.02:1Exceção documentadaMesma decisão de marca do rótulo (eyebrow) sobre fundo claro.

Fundamentos

Escala tipográfica semântica

Sora nos títulos e Inter nos textos. Telas usam type-* (ou Heading e Text), nunca tamanhos soltos.

  • type-display

    2.25rem → 3rem → 3.75rem · lh 1.08 · 700

    Título principal da Home

    Transformando ideias em soluções inteligentes

  • type-h1

    2.25rem → 3rem · lh 1.1 · 700

    Título das páginas internas

    Transformando ideias em soluções inteligentes

  • type-statement

    1.875rem → 3rem · lh 1.2 → 1 · 700

    Chamada final (CTA)

    Transformando ideias em soluções inteligentes

  • type-h2

    1.875rem → 2.25rem · lh 1.2 → 1.1111 · 700

    Título de seção

    Transformando ideias em soluções inteligentes

  • type-title-lg

    1.5rem · lh 1.33 · 600

    Título de bloco grande

    Transformando ideias em soluções inteligentes

  • type-title

    1.25rem · lh 1.4 · 600

    Título de cartão destacado

    Transformando ideias em soluções inteligentes

  • type-h3

    1.125rem · lh 1.5556 · 600

    Título de cartão

    Transformando ideias em soluções inteligentes

  • type-lead

    1.125rem · lh 1.625

    Texto de apoio sob títulos

    Transformando ideias em soluções inteligentes

  • type-body

    1rem · lh 1.5

    Texto corrido

    Transformando ideias em soluções inteligentes

  • type-small

    0.875rem · lh 1.4286

    Texto secundário, navegação

    Transformando ideias em soluções inteligentes

  • type-caption

    0.75rem · lh 1.3333

    Notas, rótulos de badge

    Transformando ideias em soluções inteligentes

  • type-eyebrow

    0.875rem · lh 1.4286 · 700

    Rótulo acima de títulos

    Transformando ideias em soluções inteligentes

  • type-label

    0.875rem · lh 1.4286 · 600

    Cabeçalhos de rodapé e listas

    Transformando ideias em soluções inteligentes

Fundamentos

Espaço e movimento

Espaçamento

  • --space-gutter 1.5rem

  • --space-section 6rem

  • --space-section-hero 7rem

  • --space-page-hero-top 2.5rem

  • --space-page-hero-bottom 5rem

  • --space-page-hero-bottom-lg 6rem

  • --space-stage 3.5rem

Movimento

--motion-fast

0.2s · ease-brand

--motion-base

0.35s · ease-brand

--motion-slow

0.8s · ease-brand

Todas as animações respeitam prefers-reduced-motion.

Componentes

Biblioteca viva

Primitivos (ui), compostos (shared) e padrões de seção (sections). O catálogo completo, com estados e testes, está no Storybook.

Botões

Badges e rótulos

defaultbrandgreendark

Eyebrow

Cartões e ícones

Inteligência Artificial

Cartão de serviço com ícone, título, descrição e link.

Saiba mais

Card + IconBadge

Superfície base com spotlight que segue o ponteiro.

CheckList

  • Itens com marcador semântico
  • Cor via content-success

Marca

Variantes do componente Logo, cada uma indicada para uma superfície.

variant="horizontal"
variant="symbol"
variant="full-on-dark"
variant="full-on-light"

Governança

Regras que o pipeline cobra

O sistema só continua sendo sistema se alguém confere. Estas verificações rodam em cada alteração.

  • npm run tokens:check

    O CSS gerado precisa corresponder ao tokens.json.

  • npm run lint:ds

    Falha com hex, rgb, medidas arbitrárias, tamanhos de texto soltos ou cores legadas.

  • npm run test

    Componentes, tokens e contraste (Vitest + Testing Library).

  • npm run test:e2e

    Acessibilidade com axe e regressão visual em Playwright.