Tokens de Grade e Layout
Design System · Arrow DS · Dimensão 07 Grade e Layout
Versão: 1.0 · Status: Validado
Âncora base: 1200px (grid.breakpoint.lg) baseline desktop
Depende de: Dimensão 03 Espaçamento
Usado por: Todos os componentes de UI, composição e layout de página
Princípios da Dimensão
Ancoragem generosa a grade cria território, não compete por espaço.
Em um mercado onde sistemas legados espremem informação até a claustrofobia, a Effecti usa a grade para dizer: aqui você tem espaço para pensar.
Densidade calibrada operacional sem claustrofobia.
A Effecti opera com conteúdo denso e operacional. Mas densidade não significa claustrofobia. Cada decisão de espaçamento é calibrada para equilibrar aproveitamento de território, respiração cognitiva e identidade visual.
Desktop-first, mobile-aware duas experiências distintas.
A superfície prioritária é desktop operacional. Mobile é uma experiência diferente não tentamos replicar a densidade desktop em 360px.
Fundação
| Propriedade | Valor | Descrição |
|---|---|---|
| Sistema base | 12 colunas | Padrão universal desktop/tablet |
| Sistema simplificado | 4 colunas | Mobile |
| Baseline | lg (1200px) | Ponto de referência tudo é pensado para funcionar aqui primeiro |
| Padrão de gutter (desktop) | 20px | Equilíbrio entre respiração e pragmatismo |
| Padrão de margin (desktop) | 40px | Conteúdo nunca toca as bordas da viewport |
Regra: Nome por território, não por hardware.
xl/lg/md/sm/xsdescrevem tamanho de viewport nãodesktop/tablet/mobile.
Primitivos
Colunas
| Token Primitivo | Valor | Notas |
|---|---|---|
grid.primitive.columns.base | 12 | Base universal divide por 2, 3, 4, 6 |
grid.primitive.columns.simplified | 4 | Simplificação mobile |
Gutters
| Token Primitivo | Valor | Origem (Dimensão 03) |
|---|---|---|
grid.primitive.gutter.xl | 24px | space.scale.6 |
grid.primitive.gutter.lg | 20px | space.scale.5 ← PADRÃO DESKTOP |
grid.primitive.gutter.md | 16px | space.scale.4 |
grid.primitive.gutter.sm | 12px | space.scale.3 |
Margins
| Token Primitivo | Valor | Origem (Dimensão 03) |
|---|---|---|
grid.primitive.margin.xl | 48px | space.scale.8 |
grid.primitive.margin.lg | 40px | space.scale.7 ← PADRÃO DESKTOP |
grid.primitive.margin.md | 32px | space.scale.6 |
grid.primitive.margin.sm | 24px | space.scale.5 |
grid.primitive.margin.xs | 16px | space.scale.4 |
Breakpoints
| Token Primitivo | Valor | Papel |
|---|---|---|
grid.breakpoint.xl | 1440px | Desktop amplo território extra |
grid.breakpoint.lg | 1200px | BASELINE referência principal |
grid.breakpoint.md | 900px | Tablet/laptop pequeno |
grid.breakpoint.sm | 600px | Tablet vertical |
grid.breakpoint.xs | 0px | Mobile |
css
:root {
--grid-columns-base: 12;
--grid-columns-simplified: 4;
--grid-gutter-xl: 24px;
--grid-gutter-lg: 20px;
--grid-gutter-md: 16px;
--grid-gutter-sm: 12px;
--grid-margin-xl: 48px;
--grid-margin-lg: 40px;
--grid-margin-md: 32px;
--grid-margin-sm: 24px;
--grid-margin-xs: 16px;
--grid-breakpoint-xl: 1440px;
--grid-breakpoint-lg: 1200px;
--grid-breakpoint-md: 900px;
--grid-breakpoint-sm: 600px;
--grid-breakpoint-xs: 0px;
}Tokens Semânticos
Categoria: Containers
| Token | Valor | Uso |
|---|---|---|
grid.container.wide | 1440px | Dashboards amplos, painéis executivos com múltiplos KPIs |
grid.container.content | 1200px | Conteúdo operacional padrão container mais usado |
grid.container.text | 720px | Documentação, artigos de ajuda, conteúdo educacional |
grid.container.narrow | 480px | Formulários lineares, wizards, fluxos guiados |
css
--grid-container-wide: 1440px;
--grid-container-content: 1200px;
--grid-container-text: 720px;
--grid-container-narrow: 480px;Categoria: Colunas
| Token | Valor (colunas) | Uso |
|---|---|---|
grid.columns.full | 12 | Layout sem subdivisão |
grid.columns.primary | 8 | Conteúdo principal em layouts com sidebar |
grid.columns.secondary | 4 | Navegação lateral ou filtros |
grid.columns.half | 6 | Layout 50/50 |
grid.columns.third | 4 | Layout em terços |
grid.columns.quarter | 3 | Layout em quartos |
Categoria: Gutters
| Token | Valor | Uso |
|---|---|---|
grid.gutter.default | 20px | Padrão universal |
grid.gutter.comfortable | 24px | container.wide ou respiração extra |
grid.gutter.compact | 16px | Modificador de densidade compacta |
grid.gutter.dense | 12px | Modificador de densidade densa |
Categoria: Margins
| Token | Valor | Uso |
|---|---|---|
grid.margin.default | 40px | Padrão universal desktop |
grid.margin.comfortable | 48px | container.wide, conteúdo de leitura |
grid.margin.compact | 32px | Modificador de densidade compacta |
grid.margin.minimal | 24px | Modificador de densidade densa |
Categoria: Densidade
| Token | Gutter | Margin | Quando usar |
|---|---|---|---|
density.comfortable | 20px | 40px | Sempre padrão universal da Effecti |
density.compact | 16px | 32px | Dashboards densos com toggle "Visualização compacta" |
density.dense | 12px | 24px | Tabelas complexas, comparação de múltiplas licitações |
Regra crítica: Dense nunca é padrão. É escolha consciente quando usuário troca conforto por quantidade.
Comportamento Responsivo
lg 1200px (BASELINE)
| Atributo | Valor |
|---|---|
| Columns | 12 |
| Gutter | 20px |
| Margin | 40px |
| Container | grid.container.content |
md 900px a 1199px
- Gutters reduzem de 20px para 16px
- Margins reduzem de 40px para 32px
- Layouts de 3 ou 4 colunas começam a colapsar para 2 colunas
- Sidebars de 3 colunas podem virar off-canvas
sm 600px a 899px
- Grid simplifica 12 colunas não fazem mais sentido
- Layouts em múltiplas colunas viram stack vertical
- Densidade é ignorada sempre comfortable em tablet
xs 0px a 599px
- 4 colunas fixo
- Gutter 12px, margin 16px
- Tudo vira stack vertical
- Touch targets mínimos de 44×44px
Padrões de Uso
Padrão 01 Layout operacional primário
Container: content (1200px) · Density: comfortable
Sidebar filtros (3 colunas) + conteúdo principal (9 colunas).
Padrão 02 Layout de leitura
Container: text (720px) · Margin: comfortable (48px)
Texto longo não usa grade de 12 colunas.
Padrão 03 Dashboard wide
Container: wide (1440px) · Gutter: comfortable (24px)
4 KPIs de 3 colunas cada, ou 2 gráficos de 6 colunas cada.
Padrão 04 Formulários lineares
Container: narrow (480px) · Density: comfortable
Container estreito centrado cria foco e reduz fadiga cognitiva.
Padrão 05 Densidade adaptativa
Container: content · Density: compact ou dense (OPT-IN do usuário)
Tabelas complexas onde usuário precisa comparar múltiplas licitações.
Regras Globais
O que nunca fazer
| Proibido | Alternativa correta |
|---|---|
Usar valor numérico direto (1200px) | Usar grid.container.content |
| Usar primitivo em componente | Usar grid.gutter.default |
Aplicar density.compact/dense como padrão | density.comfortable é universal |
| Nomear breakpoint por dispositivo | xl/lg/md/sm/xs território, não hardware |
| Replicar densidade desktop em mobile | Mobile é experiência simplificada |
Inventar gutter ou margin fora de space.scale.* | Todo valor vem da Dimensão 03 |
Decisões Estratégicas Registradas
Desktop-first, mobile-aware desde o design
Sistema pensado para lg como baseline. Adaptações para mobile são simplificações conscientes.
12 colunas como base universal
Máxima flexibilidade matemática (divide por 2, 3, 4, 6). Padrão de mercado que desenvolvedores já conhecem.
Gutters de 20px como padrão
Não 16px (muito apertado), não 24px (muito generoso). Equilíbrio entre respiração e pragmatismo.
Densidade é opt-in, nunca padrão
A Effecti não aperta por padrão. Clareza e respiração vêm antes de aproveitamento de espaço.
Margem mínima de 40px em desktop
Conteúdo nunca toca as bordas da viewport. Layouts full-bleed são exceção documentada.
Arquivos de Output Dimensão 07
| Arquivo | Formato | Conteúdo |
|---|---|---|
effecti_tokens_grid.css | CSS | Custom Properties primitivos + semânticos + densidade + responsivo |
effecti_tokens_grid.dart | Dart | EffectiGrid, EffectiBreakpoints, EffectiContainers |
effecti_grid_layouts_v1.svg | SVG | Visualização dos 5 padrões de layout |
Effecti Programa de Governança de Design System · Dimensão 07 · v1.0