2. Camada 1 — Primitivos

2.1 Rampas tonais (o coração da entrega)#

Cada cor de marca virou uma rampa de 10 stops (50→900). Método, para auditoria e regeneração futura:

• Espaço de cor OKLCH (perceptualmente uniforme): garante que "400" tenha o mesmo peso visual em qualquer rampa.
• Curva de luminosidade compartilhada entre todas as rampas (L 0.972 no stop 50 → 0.294 no 900), com chroma em sino (pico no meio, dessaturando nas pontas).
• Âncora automática: cada hex canônico de marca foi cravado EXATO (sem alteração de um dígito) no stop cuja luminosidade da curva é a mais próxima da sua luminosidade real. Os demais stops são interpolados.
• Calibração funcional: o stop 600 de cada rampa foi verificado (e ajustado quando preciso) para contraste ≥ 4.5:1 com branco — é o stop que serve botões e texto funcional.
• Monotonicidade verificada: luminosidade estritamente decrescente em todas as rampas (a v1 do algoritmo produzia inversões; corrigido).

⚓ = hex canônico de marca, preservado exato. Pantones (do Manual 2018, confirmados): Turquesa 3275C · Amarelo 115C · Verde 327C · Cinza 5487C · Dourado 7409C · Azul 2985C · Azul-claro 656C. CMYK no marca-seed.md.

2.2 Três descobertas estruturais (fatos, não opiniões — medidos em OKLCH)#

1. O verde institucional #098475 É o turquesa-600. As duas cores "diferentes" da marca são a mesma rampa em stops diferentes — e o 600 é exatamente o stop de ação acessível (4.60:1 com branco). Consequência: o botão primário da SEED em fundo claro é o verde institucional, de graça, sem inventar cor nova. A rampa turquesa tem âncora dupla (400 e 600).
2. O azul-claro #ECF4FC É o azul-50. Nunca foi uma oitava cor independente; era o primeiro stop da rampa azul. Absorvido como âncora do stop 50 (rampa azul tem âncora dupla: 50 e 300).
3. O turquesa principal #11B0A0 é um stop 400, não 500. Sua luminosidade real (OKLCH L 0.712) o coloca no 400. Implicação prática de acessibilidade documentada na §5.

2.3 Vermelho funcional (adição, não é cor de marca)#

A paleta de 2018 não tem vermelho — mas nenhum sistema digital vive sem estado de erro. Em vez de inventar, formalizamos o #D94545 que o DS digital v1 já usava informalmente em .alert-danger (âncora do stop 500; o hover informal #c63838 morre, substituído pelo vermelho-600 #C6393B gerado). Classificação: cor funcional — proibida em material de marca (posts, capas, propostas), permitida apenas em estados de erro/perigo de interface e dataviz negativa.

2.4 Superfícies do modo escuro#

Quatro superfícies tintadas no hue do cinza da marca (OKLCH h≈235°, o azul-acinzentado do #617683), do fundo ao topo: page #0B1419 · default #141D23 · elevated #1D272D · overlay #273137. Nunca preto puro. Supersede: substituem os hex ad-hoc #0d1f25, #1d3138, #11272f da seção dark do seed-design-system.html v1 (mesma direção estética, agora derivados por método).

2.5 Tipografia#

• --seed-font-sans: Montserrat (marca e interface; pesos carregados: 300/400/600/700). Regra de legibilidade: texto corrido longo usa Light/Regular com line-height 1.65 — pesos médios em massa ficam monótonos nesta fonte.
• --seed-font-mono: JetBrains Mono (pesos 400/500/700). Papel exclusivo: dados de medição (kWh, kWp, demanda), identificadores (UC, ART, nº de proposta), código, timestamps, acento em labels micro. Nunca em títulos ou parágrafos. Motivo da escolha: algarismos tabulares nativos (colunas de números alinham), maior nota de acessibilidade entre monos gratuitas, Google Fonts, licença aberta.
• Escala (herdada do DS v1, mantida — decisão: a escala estava correta, o problema era aplicação): display 64/72 · h1 42 · h2 32 · h3 24 · h4 18 · body-lg 17 · body 14 · small 12 · caption 11 (SemiBold, UPPERCASE, tracking 2px).
• Escala fluida (v1.2 — mobile/app): os 4 topos da escala respondem ao viewport via clamp(); de h4 para baixo, invariante. Valores: display clamp(2.5rem, 1.9rem + 2.6vw, 4rem) (40→64px) · h1 clamp(1.875rem, 1.58rem + 1.3vw, 2.625rem) (30→42px) · h2 clamp(1.5rem, 1.3rem + 0.87vw, 2rem) (24→32px) · h3 clamp(1.25rem, 1.15rem + 0.43vw, 1.5rem) (20→24px). Interpolação calibrada entre 360px (Android BR mais comum) e 1280px. Regra WCAG 1.4.4 embutida: a fórmula SEMPRE combina termo rem dominante + termo vw — clamp com vw puro não responde ao zoom do navegador e reprova em redimensionamento de texto 200%; o teste de zoom 200% faz parte do preview de cada bloco. Desktop puro pode continuar usando os valores fixos; peças de marketing usam a camada expressiva da Marca v5.0 normalmente.
• --seed-font-expressive: Caveat (pesos 400/600/700). Papel exclusivo: peça de MARKETING que precise de algo alegórico, fora do normal, festivo. Nunca em interface, nunca em documento técnico, nunca como assinatura padrão de peça de rotina. Token nascido em 2026-08-20 — ver a errata abaixo.
• Supersede tipográfico: Indie Flower aposentada (tagline manuscrita "Soluções Sustentáveis" sai de cena nas peças novas — decisão de 2026-07-30). Neo Tech aposentada (não tinha papel definido nem uso real).

ERRATA FORMAL — 2026-08-20: o sistema tem TRÊS famílias, não duas#

Esta subseção dizia "Sistema final: 2 famílias, papéis sem sobreposição", e a tabela de decisões do §"Decisões" registrava "3ª família" como alternativa descartada ("necessidade inexistente hoje; decidir se/quando surgir"). A necessidade surgiu e foi decidida pelo Rafael em 2026-08-20, verbatim:

"nós ja temos decisao das 3 fontes canonicas, principal, a secundaria e a terciaria é extritamente para uso do marketing em peças que precise criar algo alegorico, fora do normal, festivo, etc"

Papéis, sem sobreposição: principal Montserrat (marca e interface) · secundária JetBrains Mono (dado, identificador, código) · terciária --seed-font-expressive (marketing alegórico).

Nome do token — e a alternativa descartada. Escolhido --seed-font-expressive em vez de --seed-font-display, que é o terceiro slot convencional dos design systems. Motivo: "display" nomeia tamanho e seria lido como "fonte de título grande", que é exatamente o uso que esta família não tem — a escala de display desta casa é Montserrat. expressive nomeia o propósito, e propósito é o que impede consumo errado. Regra da casa: quando o valor está certo e o propósito não tem nome, o conserto é NOME.

⚠ A família é Caveat por INFERÊNCIA declarada, não por fala dele. Ele decidiu o papel e o escopo; o único canônico que nomeia a terciária é o marca-seed.md v5.0 §4.3, que não está na pasta (pendência MR-P3). Confirmar o nome antes de qualquer peça sair com ela.

⚠ Fronteira que esta errata NÃO abre: a terciária não volta a ser a assinatura manuscrita padrão que a Indie Flower era. A Indie Flower foi aposentada porque a tagline manuscrita aparecia em toda peça; a terciária existe para o excepcional. Trocar a fonte e manter o uso onipresente seria desfazer a decisão de 2026-07-30 com outra letra.

2.6 Spacing, radius#

• Spacing: base 4px mantida (decisão: já era correta), escala estendida sp-0…sp-24 (0→96px).
• Radius: sm 4 (chips) · md 8 (controles) · lg 12 (cards) · xl 16 (modais) · full (pills). O DS v1 não tinha escala de radius formal — cada componente inventava a sua; agora é token.

2.7 Motion — dois registros (modelo Carbon)#

• Produtivo (tarefa; sutil, sai do caminho): 100ms (hover/foco) e 150ms (dropdowns, estados), easing cubic-bezier(0.2, 0, 0.38, 0.9).
• Expressivo (momentos significativos): 300ms (modais, notificações) e 400ms (transições de tela), easing cubic-bezier(0.4, 0.14, 0.3, 1).
• Saída — --seed-ease-out = cubic-bezier(.2,.8,.4,1) (v1.23, 2026-08-26). Entradas e revelações de componente: thumb do switch (120ms), toast (160ms), barra de progresso (200ms), modal e drawer. ⚠ Não é apelido do produtivo, e isso foi medido, não suposto: contra o ease-productive a diferença é 36,8% do percurso e 24,9 ms — quase um quadro e meio a 60 Hz. O seed-componentes.md usava este nome quatro vezes sem nunca fixar a curva, e o acervo carregava dois valores; os dois, medidos em 21 instantes de um movimento de 120 ms, diferem 0,3 ms, que é 1/56 de um quadro. ⭐ Dois nomes para a mesma curva; e a curva de verdade diferente era a terceira, que ninguém estava comparando.
• Acessibilidade embutida no token: com prefers-reduced-motion, durações produtivas zeram e expressivas caem para crossfade de 100ms (regra do Uber Base). Quem consome o token respeita a preferência sem escrever media query.

2.8 Elevação — par superfície+sombra (modelo Atlassian)#

Elevação nunca é só sombra: é o par. surface-raised + shadow-raised (cards) · surface-overlay + shadow-overlay (menus, popovers) · modal usa shadow-modal. Sombras tintadas no cinza-900 (#242E34), nunca preto. No dark, a sombra escurece e a borda sutil assume a separação (sombra sozinha some em fundo escuro). Existe também surface-sunken para áreas rebaixadas (wells, blocos de código).

2.9 Breakpoints, toque e app (v1.2)#

Breakpoints — escala oficial (alinhada ao Tailwind, stack dos produtos): sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1536 (px, min-width). Limitação técnica documentada: media query NÃO lê CSS custom property — por isso breakpoint não existe como --seed-* no CSS; as fontes canônicas são o seed-tokens.json (consumo por app nativo e ferramentas) e o theme.screens do Tailwind (consumo pelos produtos web). O corte 960 do HTML v1 fica superseded (§ Supersedes abaixo). Faixa de projeto: mobile <640 · tablet 640–1023 · desktop ≥1024. Pior caso de teste: 360px (largura Android mais comum no Brasil — o mercado é ~80% Android).

Tokens de toque:

--seed-fs-field-touch: 16px; /* fonte mínima de CAMPO em superfície de toque —
  campo <16px dispara zoom automático no iOS Safari ao focar */
@media (pointer: coarse) { /* detector correto: TOQUE, não largura —
  tablet grande também é toque; desktop estreito não é */
  .seed-field__control { font-size: var(--seed-fs-field-touch); }
}

Safe areas (PWA/WebView/app com notch e barra de gesto):

--seed-safe-top: env(safe-area-inset-top);
--seed-safe-bottom: env(safe-area-inset-bottom);
--seed-safe-left: env(safe-area-inset-left);
--seed-safe-right: env(safe-area-inset-right);

Barras fixas (header, tab bar, CTA fixo de rodapé) somam o safe-area ao próprio padding. Requer viewport-fit=cover no meta viewport.

Supersede (v1.2): breakpoints do seed-design-system.html v1.0 (mobile 0–639 / tablet 640–959 / desktop 960+) → escala Tailwind acima. Motivo: os produtos rodam Lovable/Tailwind/shadcn; manter 960 exigiria configuração divergente em todo produto, fricção diária sem ganho. Diferença prática (960→1024) é mínima.