Design System — Extranets Associação Digital
O Design System das Extranets é dividido em dois níveis: tokens estruturais compartilhados (extranet-base.css) e identidade visual por cliente (theme.{cliente}.css). Todos os produtos herdam a base e cada um sobrepõe apenas cores e fontes.
Arquitetura de arquivos
O entry point é apps/web/styles/globals.css, que importa todos os demais:
| Arquivo | Responsabilidade | Escopo |
|---|---|---|
styles/globals.css | Entry point — importa todos os demais | Global |
styles/extranet-base.css | Tokens estruturais compartilhados | Todos os clientes |
styles/theme.abracaf.css | Cores + fontes Abracaf | Abracaf |
styles/theme.assobens.css | Cores + fontes Assobens | Assobens (futuro) |
styles/theme.abcnissan.css | Cores + fontes ABCNissan | ABCNissan (futuro) |
Regra de ouro: extranet-base.css nunca é modificado para adequações de cliente. Toda variação visual fica no arquivo de tema do respectivo cliente.
extranet-base.css — Tokens estruturais
Layout
| Token CSS | Valor | Classe Tailwind | Uso |
|---|---|---|---|
--extranet-header-height | 72px | h-extranet-header | Altura do header desktop |
--extranet-header-height-mobile | 56px | h-extranet-header-mobile | Altura do header mobile |
--extranet-container-max | 1320px | w-extranet-container | Largura máxima do container |
--extranet-container-px | 40px | px-extranet-container-px | Padding lateral desktop |
--extranet-container-px-sm | 20px | px-extranet-container-px-sm | Padding lateral mobile |
--extranet-section-y | 80px | py-extranet-section | Espaçamento vertical de seções |
--extranet-gap | 24px | gap-extranet-gap | Gap padrão de grid |
--extranet-gap-sm | 16px | gap-extranet-gap-sm | Gap pequeno |
--extranet-gap-lg | 40px | gap-extranet-gap-lg | Gap grande |
Container padrão de toda seção:
<div className="max-w-extranet-container px-extranet-container-px mx-auto">
Z-index
| Classe Tailwind | Valor | Uso |
|---|---|---|
z-extranet-base | 50 | Elementos base |
z-extranet-raised | 10 | Elementos elevados |
z-extranet-overlay | 100 | Overlays |
z-extranet-header | 200 | Header fixo |
z-extranet-modal | 300 | Modais |
z-extranet-toast | 400 | Notificações |
Escala tipográfica
| Classe Tailwind | Tamanho | Uso sugerido |
|---|---|---|
text-extranet-2xs | 11px | Micro labels, eyebrows |
text-extranet-xs | 12px | Legendas, badges |
text-extranet-sm | 14px | Body small, nav items |
text-extranet-base | 16px | Corpo padrão |
text-extranet-lg | 18px | Corpo destaque |
text-extranet-xl | 20px | Subtítulos |
text-extranet-2xl | 24px | Heading sm |
text-extranet-3xl | 32px | Heading md |
text-extranet-4xl | 40px | Heading lg |
text-extranet-5xl | 56px | Hero desktop |
text-extranet-6xl | 72px | Hero large |
Geometria de botões
| Tamanho | padding-y | padding-x | font-size |
|---|---|---|---|
sm | 6px | 14px | 14px |
md | 10px | 22px | 16px |
lg | 14px | 32px | 18px |
Border radius
| Classe Tailwind | Valor | Uso |
|---|---|---|
rounded-extranet-sm | 6px | Inputs, badges |
rounded-extranet | 10px | Botões, cards pequenos |
rounded-extranet-lg | 16px | Cards, modais |
rounded-extranet-xl | 24px | Containers de destaque |
rounded-extranet-full | 9999px | Tags, avatares, pills |
Sombras
| Classe Tailwind | Uso |
|---|---|
shadow-extranet-sm | Inputs, campos de formulário |
shadow-extranet | Cards padrão |
shadow-extranet-lg | Modais, dropdowns |
Transições
| Classe Tailwind | Duração | Easing |
|---|---|---|
duration-extranet-fast | 150ms | padrão |
duration-extranet-base | 200ms | padrão |
duration-extranet-slow | 300ms | out |
duration-extranet-slower | 500ms | spring |
Easings disponíveis: ease-extranet, ease-extranet-in, ease-extranet-out, ease-extranet-spring.
theme.abracaf.css — Identidade visual
Paleta de cores
| Família | Classe Tailwind | Hex | Uso |
|---|---|---|---|
| Navy | bg-abc-navy-900 | #0b2650 | Texto escuro, fundo escuro, ink |
| Navy | bg-abc-navy-700 | #005491 | Cor primária da marca |
| Navy | bg-abc-navy-500 | #2587c4 | Hover states |
| Cyan | bg-abc-cyan-500 | #00c0ea | Acento / CTAs |
| Cyan | bg-abc-cyan-400 | #4dd4f0 | Hover de acento |
| Cyan | bg-abc-cyan-100 | #d6f3fb | Backgrounds suaves |
| Slate | bg-abc-slate-50 | #f7f8fc | Background de página |
| Slate | bg-abc-slate-200 | #e2e5f0 | Borders |
| Slate | bg-abc-slate-500 | #5a607a | Texto secundário |
| Semântico | text-abc-success | #15a36e | Sucesso |
| Semântico | text-abc-warning | #e6a100 | Aviso |
| Semântico | text-abc-danger | #d64545 | Erro |
Fontes
| Classe Tailwind | Fonte | Pesos | Uso |
|---|---|---|---|
font-abc-display | Sora | 400–800 | Headings, títulos |
font-abc-body | Space Grotesk | 300–700 | Corpo, labels, UI |
As fontes são carregadas via next/font/google no abracaf/layout.tsx e injetadas nas variáveis CSS --font-abc-sora e --font-abc-space-grotesk.
Uso nos componentes
{/* Heading */}
<h1 className="font-abc-display text-extranet-5xl font-black text-abc-navy-900">
{/* Parágrafo */}
<p className="font-abc-body text-extranet-base text-abc-slate-500">
{/* Botão primário */}
<button className="bg-abc-navy-700 hover:bg-abc-navy-700/80 text-white rounded-extranet px-[22px] py-[10px] text-[16px]">
{/* Header fixo */}
<header className="h-extranet-header z-extranet-header fixed inset-x-0 top-0">
{/* Seção com container padrão */}
<section className="bg-abc-slate-50 py-extranet-section">
<div className="max-w-extranet-container px-extranet-container-px mx-auto">
Adicionando novo cliente
| # | Passo | Detalhe |
|---|---|---|
| 1 | Criar styles/theme.{cliente}.css | Seguir o modelo do theme.abracaf.css — apenas cores e fontes |
| 2 | Importar em styles/globals.css | @import './theme.{cliente}.css' |
| 3 | Configurar fontes no layout.tsx do produto | Usar next/font/google e injetar as variáveis CSS |
| 4 | Não alterar extranet-base.css | Tokens estruturais são compartilhados e imutáveis |
aviso
Nunca modifique extranet-base.css para adequar um cliente específico. Qualquer variação visual deve ficar exclusivamente no theme.{cliente}.css do respectivo produto.