Instituto Moreira
WhatsApp

Design system

Tokens visuais do Instituto Moreira

Fonte única de cor, tipografia e estados usados em /instituto-moreira/*. Consumo via variáveis CSS escopadas no wrapper — nunca em :root, para não vazar para o portal Vida Sem Vício.

Paleta

black#08090B
--im-black

Fundo primário. Fundo do shell, hero, seções extensas.

Contraste: cream 17:1 · gray 11:1 (AAA)

graphite#111418
--im-graphite

Superfície 1. Cards, footer, blocos elevados.

Contraste: cream 14:1 (AAA)

graphite-hi#181C21
--im-graphite-hi

Superfície 2. Modais, popovers, camadas sobre cards.

petroleum#0D2C35
--im-petroleum

Âncora institucional. Gradientes de hero e headers de seção.

teal#0F8F6B
--im-teal

CTA primário. Botões principais, símbolo, foco.

Contraste: cream 4.7:1 (AA)

teal-hover#12A278
--im-teal-hover

CTA :hover. Estado hover do CTA primário.

teal-active#0B7657
--im-teal-active

CTA :active. Estado pressed / seleção.

teal-light#3FB894
--im-teal-light

Acento verde. Ícones, sublinhados, badges de sucesso.

teal-softrgba(15,143,107,0.14)
--im-teal-soft

Fundo verde suave. Chips, badges, backgrounds de tags.

gold#C99A3D
--im-gold

Acento editorial. Eyebrow, linhas divisórias, monograma. Nunca texto de corpo.

Contraste: sobre black 7.8:1 (AAA para acento)

gold-hover#D9AC55
--im-gold-hover

Acento :hover. Links dourados no hover.

gold-softrgba(201,154,61,0.14)
--im-gold-soft

Fundo dourado suave. Chips e badges neutros.

cream#F3EDE2
--im-cream

Texto principal. Títulos, corpo, texto de botão sobre fundo escuro.

Contraste: sobre black 17:1 (AAA)

cream-mutedF3EDE2 · 72%
--im-cream-muted

Texto secundário claro. Legendas e apoios sobre fundo escuro.

gray-text#B9C0C4
--im-gray-text

Texto secundário. Parágrafos de apoio, metadados.

Contraste: sobre black 10.9:1 (AAA)

gray-disabledB9C0C4 · 45%
--im-gray-disabled

Estado desabilitado. Texto/ícones inativos, botões disabled.

danger#E5675A
--im-danger

Erro. Mensagens de erro, avisos críticos.

warning#E0A94C
--im-warning

Atenção. Alertas moderados, recaída, cautela.

success#3FB894
--im-success

Confirmação. Toasts e badges de sucesso.

focus-ring#3FB894
--im-focus-ring

Anel de foco. focus-visible em botões e links. WCAG 3:1 sobre fundos escuros.

Tipografia

Display · --im-font-display

Instituto Moreira

Logo, H1 e citações editoriais. Fraunces / Libre Baskerville.

UI · --im-font-ui

Corpo, menus, botões e microcopy do subprojeto.

Inter Tight / Sora / system-ui.

Estados de botão

Foco visível padrão: outline 2px var(--im-focus-ring) com offset de 2px — contraste ≥ 3:1 sobre qualquer superfície da paleta.

Uso em componentes

  • Header: fundo --im-black, divisor --im-divider, CTA em --im-teal, links em --im-cream.
  • Footer: superfície --im-graphite, texto --im-cream-muted, títulos --im-cream.
  • Cards: fundo --im-graphite, borda --im-divider, título --im-cream, corpo --im-gray-text.
  • Modais / popovers: elevar para --im-graphite-hi.
  • Acentos: --im-gold apenas em eyebrow, linhas, dot decorativo — nunca texto de corpo.
  • Feedback: --im-danger, --im-warning, --im-success em mensagens curtas com ícone.

Primitivas

Componentes unificados

Substituir cards e seções ad-hoc por estas primitivas garante paleta, tipografia e espaçamentos consistentes em todo /instituto-moreira.

MoreiraCard · graphite

Card padrão

Uso geral: notícia, perfil, evento, bloco institucional.

MoreiraCard · graphite-hi

Superfície elevada

Para modais, popovers e camadas sobre cards.

MoreiraCard · outline · interactive

Cartão-link

Borda ganha verde-claro no hover / focus-within.