---
fonte: 02-tokens/seed-tokens.md
versao_da_fonte: v1.23
secao: 02
titulo: "Camada 1 — Primitivos"
sequencia: 3 de 17
bytes_do_corpo: 12161
md5_do_corpo: ffe70558729e61bfcf2ffacef828f84b
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/02-tokens/seed-tokens.md
---
## 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).

| Rampa | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|---|
| turquesa | #E8FBF7 | #CDF3EC | #9CE4D8 | #66D1C2 | **#11B0A0** ⚓ | #00A192 | **#098475** ⚓ | #006C62 | #005048 | #00352F |
| amarelo | #FFF6D2 | #FDEA9E | **#FAD61D** ⚓ | #DABA00 | #BDA100 | #A28A00 | #877200 | #6D5C00 | #504300 | #352C00 |
| dourado | #FFF4E4 | #FFE6C0 | #FECA76 | **#F9B11C** ⚓ | #D49400 | #B67F00 | #986900 | #7B5500 | #5B3E00 | #3D2800 |
| azul | **#ECF4FC** ⚓ | #CDF1FF | #96E0FD | **#53C2E9** ⚓ | #01B3E0 | #0099C1 | #007FA1 | #006783 | #004C61 | #003241 |
| cinza | #F2F6F9 | #E3EBF0 | #C8D6DF | #ACBECA | #90A6B3 | #788F9D | **#617683** ⚓ | #4D606C | #38464F | #242E34 |
| vermelho | #FFF2F1 | #FFE2DF | #FFC2BD | #FF9C95 | #FC6F6A | **#D94545** ⚓ | #C6393B | #A5272A | #7A1C1E | #521112 |

⚓ = 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:**
```css
--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):**
```css
--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.