Tokens de Forma
Design System · Arrow DS · Dimensão 04 Forma
Versão: 1.0 · Status: Validado
Âncora base: 8px (radius-8)
Depende de:
Usado por: Todos os componentes de UI
Princípios da Dimensão
A forma é a dimensão mais silenciosa do design system.
Cor você vê. Tipografia você lê. Espaçamento você sente. Forma você absorve sem perceber. É a personalidade tátil da marca operando no subconsciente do usuário.
Acolhimento sem ingenuidade. Seriedade sem frieza.
Um produto de licitações que parece um app de banco é frio demais afasta quem já tem medo do tema. Um produto que parece um app de delivery é leve demais perde a credibilidade que o mercado exige. A Effecti precisa viver num território que poucos produtos habitam: autoridade empática.
Arredondamento calibrado com intenção hierárquica.
O arredondamento da Effecti não é o arredondamento do Google Material generoso, quase infantil. Não é o arredondamento do Linear minimalista, quase cirúrgico. É um arredondamento calibrado com intenção hierárquica onde cada categoria de elemento tem sua própria expressão de forma.
Fundação
| Princípio | Descrição |
|---|---|
| 01 Hierarquia pela forma | Elementos diferentes têm radius diferentes não por acidente, mas por intenção. |
| 02 Contenção progressiva | Quanto menor e mais interativo o elemento, mais arredondado proporcionalmente. |
| 03 A âncora de 8px | O radius-8 é o valor canônico da Effecti a assinatura tátil da marca. |
css
:root {
--radius-base: 8px;
}Primitivos
| Token primitivo | Valor |
|---|---|
radius-0 | 0px |
radius-2 | 2px |
radius-4 | 4px |
radius-6 | 6px |
radius-8 | 8px |
radius-10 | 10px |
radius-12 | 12px |
radius-16 | 16px |
radius-20 | 20px |
radius-24 | 24px |
radius-28 | 28px |
radius-32 | 32px |
radius-full | 999px |
css
:root {
--radius-0: 0px;
--radius-2: 2px;
--radius-4: 4px;
--radius-6: 6px;
--radius-8: 8px;
--radius-10: 10px;
--radius-12: 12px;
--radius-16: 16px;
--radius-20: 20px;
--radius-24: 24px;
--radius-28: 28px;
--radius-32: 32px;
--radius-full: 999px;
}
radius-2eradius-28permanecem disponíveis como primitivos para casos excepcionais, mas não são expostos como tokens semânticos canônicos.
Tokens Semânticos
Estrutura de cada token
shape.{família}.{tamanho}
└── border-radius (valor em px via alias do primitivo)
Exemplo:
shape.interactive.md → var(--radius-8)
shape.container.lg → var(--radius-16)
shape.feedback.pill → var(--radius-full)Família 01 shape.interactive
Papel: Elementos que o usuário aciona. A assinatura tátil mais frequente da marca.
| Token semântico | Primitivo | Valor | Uso |
|---|---|---|---|
shape.interactive.sm | radius-6 | 6px | Checkbox, radio button |
shape.interactive.md | radius-8 | 8px | Âncora botão primário, input, select, dropdown |
shape.interactive.lg | radius-10 | 10px | Botão grande (hero CTA), input de busca principal |
shape.interactive.pill | radius-full | 999px | Switch (trilha + bolinha) — o único interativo totalmente arredondado |
css
--shape-interactive-sm: var(--radius-6); /* 6px */
--shape-interactive-md: var(--radius-8); /* 8px */
--shape-interactive-lg: var(--radius-10); /* 10px */
--shape-interactive-pill: var(--radius-full); /* 999px — switch (trilha + bolinha) */Combinações recomendadas
shape.interactive.md + color.action.primary → botão primário
shape.interactive.md + color.border.default → input idle
shape.interactive.md + color.border.accent → input em foco
shape.interactive.md + color.border.error → input com erro de validação
shape.interactive.sm + color.action.primary → checkbox / radio ativo
shape.interactive.lg + color.action.primary → hero CTA
shape.interactive.pill + color.action.primary → switch ligadoFamília 02 shape.container
Papel: Superfícies que contêm conteúdo. Onde o produto respira.
| Token semântico | Primitivo | Valor | Uso |
|---|---|---|---|
shape.container.sm | radius-8 | 8px | Tooltip, popover, menu dropdown |
shape.container.md | radius-12 | 12px | Card padrão, painel lateral, banner, container de tabela |
shape.container.lg | radius-16 | 16px | Modal, drawer, card de destaque |
shape.container.xl | radius-20 | 20px | Card hero, onboarding, empty state |
shape.container.2xl | radius-24 | 24px | Modal feature ampla, onboarding imersivo |
shape.container.3xl | radius-32 | 32px | Seção editorial ou de marketing expansiva |
css
--shape-container-sm: var(--radius-8); /* 8px */
--shape-container-md: var(--radius-12); /* 12px */
--shape-container-lg: var(--radius-16); /* 16px */
--shape-container-xl: var(--radius-20); /* 20px */
--shape-container-2xl: var(--radius-24); /* 24px */
--shape-container-3xl: var(--radius-32); /* 32px */Combinações recomendadas
shape.container.sm + space.component.md → tooltip, popover
shape.container.md + space.component.xl → card padrão arejado
shape.container.lg + space.layout.sm → modal, drawer
shape.container.xl + space.layout.md → card hero, onboardingFamília 03 shape.feedback
Papel: Elementos de comunicação de estado e identidade. Onde a forma fala mais alto.
| Token semântico | Primitivo | Valor | Uso |
|---|---|---|---|
shape.feedback.sm | radius-4 | 4px | Tag inline, label de status em tabela |
shape.feedback.md | radius-12 | 12px | Alert, banner de notificação |
shape.feedback.pill | radius-full | 999px | Badge de contagem, chip de filtro, status pill |
css
--shape-feedback-sm: var(--radius-4); /* 4px */
--shape-feedback-md: var(--radius-12); /* 12px */
--shape-feedback-pill: var(--radius-full); /* 999px */Combinações recomendadas
shape.feedback.sm + color.feedback.error-surface → tag de status de erro em tabela
shape.feedback.sm + color.feedback.success-surface → tag de status positivo
shape.feedback.md + color.feedback.warning-surface → banner de aviso
shape.feedback.pill + color.feedback.badge-surface → badge de contagem
shape.feedback.pill + color.action.subtle → chip de filtro ativoFamília 04 shape.structural
Papel: Elementos de estrutura da página. Onde a forma quase desaparece.
| Token semântico | Primitivo | Valor | Uso |
|---|---|---|---|
shape.structural.none | radius-0 | 0px | Linhas internas de tabela, bordas de divisão, separadores |
shape.structural.sm | radius-4 | 4px | Barra de progresso, skeleton loader, scrollbar thumb |
shape.structural.md | radius-8 | 8px | Área de upload, seção destacada dentro de card |
css
--shape-structural-none: var(--radius-0); /* 0px */
--shape-structural-sm: var(--radius-4); /* 4px */
--shape-structural-md: var(--radius-8); /* 8px */Regras Globais do Sistema
Hierarquia pela Forma
| Família | Range de valores | Função |
|---|---|---|
| Interactive | 6px–10px (+ pill no switch) | Elementos de ação granularidade fina ao redor da âncora |
| Container | 8px–32px | Superfícies de conteúdo progressão por área |
| Feedback | 4px / 8px / 999px | Comunicação de estado do contido ao pill |
| Structural | 0px–8px | Estrutura de página invisível a serviço do conteúdo |
Contenção Progressiva
Structural → radius-0 a radius-8 (invisível, âncora na seriedade)
Interactive → radius-6 a radius-10 (+ radius-full no switch) (calibrado, assinatura tátil)
Container → radius-8 a radius-32 (progressivo, respira com a área)
Feedback → radius-4 a radius-full (contido ou pill sem meio-termo)O que nunca fazer
| Proibido | Alternativa correta |
|---|---|
Usar valor de radius bruto no componente (border-radius: 8px) | Usar shape.interactive.md |
Usar token primitivo diretamente (var(--radius-8)) | Usar o token semântico correspondente |
Usar radius-full em botões | shape.interactive.md, .sm ou .lg |
Usar radius-full em cards ou containers | shape.container.3xl é o máximo para containers |
Usar body text em shape.feedback.pill | type.label.sm ou type.label.md |
Integração com Outras Dimensões
| Token desta dimensão | Token de outra dimensão | Contexto |
|---|---|---|
shape.interactive.md | color.border.default | Input idle geometria + borda neutra |
shape.interactive.md | color.border.accent | Input em foco geometria + borda de acento |
shape.interactive.md | color.border.error | Input com erro geometria + borda de erro |
shape.container.md | color.surface.raised | Card padrão geometria + superfície elevada |
shape.container.lg | color.surface.base | Modal geometria + superfície base |
shape.feedback.pill | color.feedback.badge-surface | Badge de contagem |
shape.container.xl (radius-20) | space.component.xl (space-24) | Card hero, onboarding |
shape.container.lg (radius-16) | space.component.xl (space-24) | Modal, drawer |
Decisões Estratégicas Registradas
radius-8 como âncora canônica da Effecti
O radius-8 é o valor de identidade tátil da marca. Aparece em três famílias e é o fio condutor que unifica a linguagem de forma da Effecti.
radius-full restrito a dois tokens semânticos
O radius-full pertence a apenas dois tokens: shape.feedback.pill (badge, chip, status pill) e shape.interactive.pill (exclusivo do switch — trilha + bolinha). Nunca em botões, nunca em cards, nunca em containers.
Tabela é container não estrutura plana
O container externo de qualquer tabela usa shape.container.md (radius-12). As linhas internas usam shape.structural.none (radius-0).
radius-full nunca em botões
Botões com border-radius: 9999px não fazem parte da linguagem da Effecti incompatíveis com a autoridade empática que a marca precisa transmitir.
shape.container.3xl reservado a superfícies expansivas O raio de 32px existe para seções editoriais ou de marketing que ocupam grande parte da largura da página. Não substitui os tokens menores em cards, modais ou componentes de produto.
Exemplos de Uso
Escala primitiva de radius
radius-0 → radius-full — a âncora de 8px destacada
0px
4px
6px
8px ⚓
12px
16px
20px
full
Famílias semânticas em uso
shape.interactive · shape.container · shape.feedback
Interactive — sm (6px) · md (8px) · lg (10px)
Nome completo
Container — sm (8px) → xl (20px)
Tooltip · 8px
Card · 12px
Modal · 16px
Hero · 20px
Feedback — sm (4px) · md (8px) · pill (999px)
Prazo críticoHabilitado3
Arquivos de Output Dimensão 04
| Arquivo | Formato | Conteúdo |
|---|---|---|
effecti_shape_tokens_v1.md | Markdown | Documentação completa |
Effecti Programa de Governança de Design System · Dimensão 04 · v1.0