Logo
Uma marca, cinco formas
O símbolo é o "swoosh" azul-e-vermelho; o wordmark é plaorc em caixa-baixa. Sobre fundo claro, a versão colorida; sobre navy, a branca — nunca a colorida no escuro.
O que evitar
Não usar o logo colorido sobre o navy — o swoosh vinho/vermelho reprova no escuro (~1,1:1). Não recolorir nem distorcer, e mantenha um respiro mínimo do tamanho do "p" ao redor do logo.
Paleta
Quatro cores de marca, sobre fundo claro
As quatro cores saem da identidade oficial. Foram medidas contra o fundo claro — é onde todas passam com folga em AAA. Os selos mostram o contraste WCAG verificado.
Neutros (viés azul)
A paleta é feita para fundo claro
Sobre o navy, as quatro cores de marca despencam para ~1,1–1,5:1 e ficam ilegíveis. Em seção escura, o navy é o fundo e o texto é branco ou --plaorc-mist — nunca o azul ou o vermelho como texto.
Tipografia
IBM Plex, com Plex Mono nos dados
IBM Plex Sans no texto e nos títulos; IBM Plex Mono nos números, marcos e chapéus; Kalam como destaque manuscrito pontual. A escala é fluida — redimensione a janela e ela cresce sem saltos.
clamp 2.5→4.5rem
clamp 1.9→2.9rem
clamp 1.5→2rem
clamp 1.2→1.45rem
1.2rem
1.05rem
clamp 1.08→1.3rem
Componentes
Os mesmos blocos da home
Botões, campos, cards e a seção escura — exatamente como aparecem em index.html. Passe o mouse para ver os estados.
Botões
Vermelho, texto branco, canto 8px. No hover vira vinho (mesma família) e sobe 2px. O fantasma e a versão para fundo escuro completam o conjunto.
Formulário
Seção escura
Fundo navy #133658, texto em névoa e branco. Aqui entram a versão branca do logo e o botão para fundo escuro.
Card & chapéu
Card branco com borda de 1px; no hover, um fio vermelho corre no topo e a sombra cresce. O chapéu em Plex Mono abre a seção.
Frente 03 · ManutençãoAcessibilidade
Contraste medido, não estimado
Todas as combinações de texto usadas no site, com a razão de contraste WCAG calculada. Meta: AAA (7:1) no texto de corpo; AA (4.5:1) no mínimo.
| Texto | Sobre | Razão | Nível | Uso |
|---|---|---|---|---|
| navy | branco | 12.38:1 | AAA | Títulos |
| vinho | branco | 11.16:1 | AAA | Hover |
| azul | branco | 8.74:1 | AAA | Links, wordmark |
| vermelho | branco | 8.47:1 | AAA | Ação, marcos |
| texto | branco | 7.68:1 | AAA | Corpo |
| texto | paper | 7.02:1 | AAA | Corpo em seção clara |
| texto suave | branco | 4.60:1 | AA | Secundário |
| texto suave | paper | 4.21:1 | AA ≥18px | Só em fonte grande |
| branco | navy | 12.38:1 | AAA | Texto em seção escura |
| névoa | navy | 7.91:1 | AAA | Texto de apoio no navy |
| branco | vermelho | 8.47:1 | AAA | Texto do botão |
Além do contraste
Foco de teclado sempre visível (contorno azul de 2px com afastamento), prefers-reduced-motion respeitado (animações desligam), toda imagem com alt e todo campo com label. Responsivo do desktop ao celular.
Referência
Tokens — espelho de tokens.css
Os nomes e valores abaixo são exatamente os de tokens.css, pronto para virar o design system do Django.
| Token | Valor | Onde aparece |
|---|---|---|
| --plaorc-blue | #0b4d83 | Wordmark, links, previsto |
| --plaorc-navy | #133658 | Títulos, seções escuras |
| --plaorc-red | #9a1318 | Ação, caminho crítico |
| --plaorc-wine | #751614 | Hover do vermelho |
| --plaorc-paper | #F2F5F9 | Superfície alternada |
| --plaorc-line | #DDE4EC | Divisores, bordas |
| --plaorc-text | #4A5462 | Corpo de texto |
| --plaorc-text-soft | #6B7686 | Texto secundário |
| --plaorc-mist | #C3D0E0 | Texto sobre navy |
| --plaorc-font | "IBM Plex Sans" | Texto e títulos |
| --plaorc-mono | "IBM Plex Mono" | Dados, marcos, chapéus |
| --plaorc-font-hand | "Kalam" | Destaque manuscrito |
| --plaorc-h1 | clamp(2.5rem, 5.6vw, 4.5rem) | Display do hero |
| --plaorc-h2 | clamp(1.9rem, 3.4vw, 2.9rem) | Título de seção |
| --plaorc-body | 1.0625rem | Corpo |
| --plaorc-btn-radius | 8px | Botões |
| --plaorc-input-radius | 6px | Campos |
| --plaorc-card-radius | 12px | Cards |
| --plaorc-wrap | 1180px | Largura máxima |
| --plaorc-pad | clamp(20px, 4vw, 44px) | Respiro lateral |
| --plaorc-gap | 20px | Espaço entre blocos |