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-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-full: 999px;
}
radius-2,radius-24eradius-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, switch track |
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 |
css
--shape-interactive-sm: var(--radius-6); /* 6px */
--shape-interactive-md: var(--radius-8); /* 8px */
--shape-interactive-lg: var(--radius-10); /* 10px */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 CTAFamí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 |
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 */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-8 | 8px | 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-8); /* 8px */
--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 | Elementos de ação granularidade fina ao redor da âncora |
| Container | 8px–20px | 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 (calibrado, assinatura tátil)
Container → radius-8 a radius-20 (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.xl é 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 de uso único e exclusivo
O radius-full pertence exclusivamente ao token shape.feedback.pill. 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.
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