Tokens de Iconografia
Design System · Arrow DS · Dimensão 08 Iconografia
Versão: 1.0 · Status: Validado
Âncora base: ViewBox 24 × 24 · Stroke 2px · Linecap round
Depende de: Dimensões 01–04
Usado por: Todos os componentes de UI, navegação, ações, feedback, dados, formulários
Princípios da Dimensão
Reconhecer, não decifrar iconografia como linguagem visual mais compacta.
Iconografia não é decoração. É a linguagem visual mais compacta da Effecti a capacidade de comunicar ação, estado ou conceito em um único glifo, sem depender de texto, sem adicionar ruído. O usuário precisa reconhecer, não decifrar.
Precisos, mas acolhedores seriedade + calor + inovação como DNA gráfico.
Clareza sozinha não basta. Os ícones precisam ser precisos, mas acolhedores. Técnicos, mas humanos. Sérios, mas convidativos.
Filosoficamente coerente, não diferente por ser diferente.
A iconografia da Effecti compete sendo filosoficamente coerente com tudo que a Effecti é. Stroke-width fixo → consistência é confiança. Cantos arredondados → calor intencional.
Os 3 pilares expressos em iconografia
01 Seriedade e confiança. Ícones precisam ser inequívocos. A precisão geométrica, o alinhamento óptico, a consistência de peso tudo isso constrói confiança.
02 Humanização e calor. A escolha de cantos arredondados (stroke-linecap: round) não é estética é filosófica. Cantos arredondados acolhem, convidam, suavizam a interação sem perder precisão.
03 Inteligência e inovação. Iconografia é abstração inteligente a capacidade de reduzir um conceito à sua essência gráfica mínima.
Fundação
| Propriedade | Valor | Descrição |
|---|---|---|
| ViewBox | 24 × 24 | Padrão de mercado, escalável por natureza |
| Stroke Width | 2px (fixo, sem variação) | Equilíbrio óptico com tipografia + legibilidade em tamanhos pequenos |
| Stroke Linecap | round | Cantos arredondados calor sobre geometria pura |
| Stroke Linejoin | round | Coerência com linecap |
| Fill | none (outline puro) | Mais leveza, mais respiração |
| Color | currentColor | Herda cor do contexto integração com Dimensão 01 |
| Padding interno | 2px em todos os lados | Área de desenho efetiva: 20 × 20 |
svg
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="..." stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>Regra: ViewBox
24 × 24, stroke2px, linecapround, fillnone, corcurrentColor. Toda violação desses parâmetros é proibida.
Por que cada escolha
ViewBox 24×24. Padrão de mercado. Escalável por natureza. Não reinventamos o viewBox usamos o que funciona universalmente.
Stroke Width 2px fixo. Equilíbrio óptico com tipografia (pesos 400–600) e legibilidade em tamanhos pequenos. Fixo porque consistência é confiança bibliotecas com múltiplos pesos transferem a decisão para o designer de cada feature.
Stroke Linecap e Linejoin: round. Cantos arredondados são expressão filosófica. Alinhamento com Dimensão 04 (Forma): mesma filosofia, diferente superfície.
Fill: none. Outline puro. Mais leve. Ícones preenchidos são reservados para estados ativo/selecionado nunca como padrão.
currentColor. Integração total com Dimensão 01. O ícone não carrega cor própria herda a cor do contexto. Quando a paleta evolui, os ícones evoluem junto.
Primitivos
Parâmetros técnicos
| Token Primitivo | Valor |
|---|---|
icon.primitive.viewbox | 24 × 24 |
icon.primitive.stroke.width | 2px |
icon.primitive.stroke.linecap | round |
icon.primitive.stroke.linejoin | round |
icon.primitive.fill | none |
icon.primitive.color | currentColor |
icon.primitive.padding | 2px |
Escala primitiva de tamanhos
| Token Primitivo | Valor | Origem (Dimensão 03) |
|---|---|---|
icon.primitive.size.16 | 16px | space.scale.2 |
icon.primitive.size.20 | 20px | space.scale.2.5 |
icon.primitive.size.24 | 24px | space.scale.3 |
icon.primitive.size.32 | 32px | space.scale.4 |
Tokens Semânticos
Categoria: Tamanhos
| Token | Valor | Contexto |
|---|---|---|
icon.size.compact | 16px | Inline com texto (corpo 14px), labels densas, tabelas |
icon.size.default | 20px | Tamanho padrão para 90% dos casos |
icon.size.comfortable | 24px | Botões primários, headers, ações principais, CTAs |
icon.size.prominent | 32px | Empty states, onboarding, FABs |
css
--icon-size-compact: 16px;
--icon-size-default: 20px;
--icon-size-comfortable: 24px;
--icon-size-prominent: 32px;Categoria: Cores semânticas
| Token | Aponta para | Quando usar |
|---|---|---|
icon.color.neutral.primary | color.text.primary | Navegação, ações padrão, elementos estruturais |
icon.color.neutral.secondary | color.text.secondary | Suporte, metadados, informações complementares |
icon.color.neutral.tertiary | color.text.tertiary | Desabilitados, estados inativos |
icon.color.action.primary | color.action.primary | Botões primários, CTAs, ações principais |
icon.color.feedback.success | color.feedback.success | Alerts, notifications, status positivos |
icon.color.feedback.error | color.feedback.error | Alerts, notifications, status de erro |
icon.color.feedback.warning | color.feedback.warning | Alerts, notifications, status de aviso |
icon.color.surface.inverse | color.text.inverse | Fundos escuros, tooltips, modais |
Hierarquia visual através de cor. Cor de ícone não é decoração é hierarquia de informação. Um dashboard com 50 ícones não pode ter todos na mesma cor.
Categoria: Naming Convention
Estrutura: [conceito]-[variação]
| Regra | Aplicação |
|---|---|
| 01 | Conceito em kebab-case sempre minúscula, separado por hífen |
| 02 | Variação numérica (-01, -02) quando estados são visualmente equivalentes |
| 03 | Variação descritiva (-check, -off, -plus, -minus) quando o estado tem nome específico |
| 04 | Forma geométrica (-circle, -square, -triangle) quando o conceito varia por container |
Exemplos:
alarm-01,alarm-02,alarm-check,alarm-off,alarm-plus,alarm-minusalert-circle,alert-square,alert-triangleadd-square-01,add-square-02,add-square-03,add-square-04
Categoria: Contextos de Uso
Navegação
| Contexto | Tamanho | Cor |
|---|---|---|
| Sidebar | 20px | icon.color.neutral.primary |
| Menu dropdown | 20px | icon.color.neutral.primary |
| Breadcrumbs | 16px | icon.color.neutral.secondary |
| Tabs (ativo) | 20px | icon.color.neutral.primary |
| Tabs (inativo) | 20px | icon.color.neutral.secondary |
Ações
| Contexto | Tamanho | Cor |
|---|---|---|
| Botões primários | 24px | icon.color.action.primary |
| Botões secundários | 20px | icon.color.neutral.primary |
| Botões terciários/ghost | 20px | icon.color.neutral.secondary |
| FABs | 24px ou 32px | icon.color.surface.inverse |
| Toolbars | 20px | icon.color.neutral.primary |
Estados e Feedback
| Contexto | Tamanho | Cor |
|---|---|---|
| Alerts | 24px | icon.color.feedback.* |
| Notifications | 20px | icon.color.feedback.* |
| Toast messages | 20px | icon.color.feedback.* |
| Inline validation | 16px | icon.color.feedback.success/error |
| Status badges | 16px | icon.color.feedback.* |
Formulários
| Contexto | Tamanho | Cor |
|---|---|---|
| Input prefix/suffix | 20px | icon.color.neutral.secondary |
| Labels com ícone | 16px | icon.color.neutral.secondary |
| Help tooltips | 16px | icon.color.neutral.tertiary |
| Calendar pickers | 20px | icon.color.neutral.primary |
Regras Globais do Sistema
Acessibilidade (WCAG 2.1 Level AA)
Contraste (1.4.11). Ícones seguem o sistema de cores da Dimensão 01, que garante contraste mínimo de 3:1.
Touch targets (2.5.5). Área mínima de 44×44px via padding de container não tamanho do ícone.
css
.icon-button {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.icon-button svg {
width: 20px;
height: 20px;
}Texto alternativo (1.1.1). Todo ícone funcional precisa de aria-label ou aria-labelledby. Ícones decorativos devem ter aria-hidden="true".
Percepção sem cor (1.4.1). Ícones nunca dependem apenas de cor para comunicar informação. Forma e contexto sempre presentes.
Governança e Expansão
Quando criar um ícone novo
| Passo | Verificação |
|---|---|
| 01 | Verificar se existe similar na biblioteca atual |
| 02 | Verificar se existe em bibliotecas padrão (Lucide, Phosphor) que possa ser adaptado |
| 03 | Confirmar que o conceito é recorrente (usado em 3+ contextos diferentes) |
| 04 | Só então criar custom |
Checklist técnico para novos ícones
- [ ] ViewBox 24×24
- [ ] Stroke width 2px consistente
- [ ] Stroke linecap e linejoin: round
- [ ] Fill: none
- [ ] currentColor
- [ ] Padding interno de 2px em todos os lados
- [ ] Alinhamento óptico validado
- [ ] Testado em 16px, 20px, 24px, 32px
- [ ] Contraste mínimo 3:1 validado
- [ ] Naming convention seguida
- [ ] SVG otimizado
Integração com código
tsx
<Icon
name="alarm-check"
size="default"
color="feedback.success"
aria-label="Alarme confirmado"
/>O que nunca fazer
| Proibido | Alternativa correta |
|---|---|
Usar valor numérico direto (width: 20px) | var(--icon-size-default) |
Definir cor literal no SVG (fill="#0092BE") | currentColor herda do contexto |
Variar stroke-width entre ícones | Stroke fixo de 2px |
Usar stroke-linecap: square ou miter | round calor sobre geometria pura |
| Criar tamanhos fora da escala (18, 22, 28, 36) | Apenas 16/20/24/32 |
| Aplicar cor decorativa em ícone | Cor é hierarquia, não estética |
Ícone funcional sem aria-label | Toda ação ou informação exige rótulo acessível |
| Camel case ou snake case em nomes | Kebab-case sempre |
| Ícone preenchido (filled) como padrão | fill: none é padrão |
Decisões Estratégicas Registradas
Stroke fixo de 2px
Consistência > flexibilidade. Stroke fixo → coerência visual → confiança.
Cantos arredondados
Calor > geometria pura. Mesmo princípio do Beige Merino na Dimensão 01.
4 tamanhos apenas
Clareza > infinitas opções. 4 tamanhos cobrem 100% dos casos reais.
Tamanhos derivados de espaçamento
Coerência sistêmica > valores arbitrários. Tamanhos derivam da Dimensão 03.
currentColor
Integração com sistema de cores > cor própria. Quando a paleta evolui, os ícones evoluem junto.
Estados, não estilos
Não são ícones diferentes são representações visuais de diferentes estados do mesmo objeto conceitual.
Acessibilidade por design
Conformidade WCAG 2.1 AA é nativa, não retrofit.
Arquivos de Output Dimensão 08
| Arquivo | Formato | Conteúdo |
|---|---|---|
icons-effecti/*.svg | SVG | Biblioteca completa de ícones individuais |
effecti_tokens_icon.css | CSS | Custom Properties --icon-size-*, --icon-color-* |
effecti_tokens_icon.dart | Dart | EffectiIcons, EffectiIconSize, EffectiIconColor |
Icon.tsx | React | Componente <Icon> com props name, size, color, aria-label |
Effecti Programa de Governança de Design System · Dimensão 08 · v1.0