---
fonte: 01-canonicos/seed-composicao.md
versao_da_fonte: v2.1
secao: 07b
titulo: "Primitivos de layout — CP25 *(camada nova, F5/2026-08-15)*"
sequencia: 10 de 17
bytes_do_corpo: 3064
md5_do_corpo: 60b02802875fb36b703076a590d7fed6
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/01-canonicos/seed-composicao.md
---
## 7b. Primitivos de layout — CP25 *(camada nova, F5/2026-08-15)*

> **CP25 — CINCO PRIMITIVOS MECÂNICOS, ABAIXO DOS BLOCOS. Todo espaçamento entre elementos é
> responsabilidade de um primitivo declarado; nenhum componente resolve o próprio layout externo.**

**O problema que motiva, com o fato.** O DS tinha blocos (o QUE a coisa é: peça, régua, faixa) e
componentes (§1–§45), e **nada entre eles** — então cada preview resolvia espaçamento no CSS
local. Consequência medida na CP-P4 (2026-08-15): onze artefatos, onze soluções diferentes para
o mesmo problema de empilhar coisas. O canon converge nesta camada: *Every Layout* (primitivo =
"uma responsabilidade estrutural só"), **Atlassian Primitives** (Box/Inline/Stack, com a regra
*"toda decisão de layout precisa ter um dono explícito"*) e o **W3C Design System** (Box, Center,
Cluster, Frame, Sidebar, Switcher). Nenhum deles inventa layout novo — todos **nomeiam o dono**.

| Primitivo | Responsabilidade única | Parâmetro | Onde já existe hoje sem nome |
|---|---|---|---|
| **pilha** | empilhar verticalmente com ritmo constante | escala `sp-*` | conteúdo de cartão, corpo de formulário, lista de mensagens |
| **linha** | dispor horizontalmente com alinhamento e sem quebra | `sp-*` + alinhamento | zonas da topbar, ações do rodapé de cartão, cabeçalho de peça |
| **cacho** | dispor horizontalmente **permitindo quebra** | `sp-*` | chips de filtro aplicado (§42), tags, avatares agrupados |
| **caixa** | dar respiro interno e superfície a um conteúdo | padding + superfície | o interior de toda peça |
| **lateral** | dois painéis lado a lado que **empilham quando o espaço acaba**, sem media query | largura do painel lateral + limite de quebra | shell (rail+conteúdo), gantt, chat, configurações |

**Regras do CP25, todas verificáveis:**
1. **Um primitivo tem uma responsabilidade.** `pilha` não alinha horizontalmente; `caixa` não
   espaça filhos entre si.
2. **Espaçamento vive no pai, nunca no filho.** Componente não declara `margin` externo — a
   regra do "owl" (`* + *`) do canon: quem separa é o contexto, e assim não sobra margem no
   primeiro nem no último item.
3. **Primitivos compõem-se; blocos não mudam.** Uma peça é um bloco; por dentro ela é `caixa` +
   `pilha`. O vocabulário de sete blocos (CP2) **não muda** — o CP25 é a camada de baixo.
4. **`lateral` é a única forma canônica de dois painéis** — proibido resolver com media query
   (CP27/CP28).

*Alternativa descartada:* seguir sem a camada, documentando espaçamento caso a caso — é
exatamente o estado que produziu onze soluções para um problema. *Custo declarado:* mais uma
camada para manter e para ensinar; o ganho é que **layout deixa de ser opinião local**.

**Nomes em português** por coerência com o resto do canônico (todo conteúdo técnico do projeto é
PT-BR). No código, a skill `seed-ds-ui` mapeia para as classes utilitárias da stack — o nome do
DS é o contrato; o nome da implementação é detalhe dela.

---