Sistema de Iconografia Operacional Sincronow v1.0

Status: Documento de execução. Estende o Pilar 6 das Diretrizes Estratégicas de Identidade Visual com o nível técnico necessário para usar Phosphor com consistência, desenhar os 7 ícones proprietários da v1.1, implementar em produto digital, e expandir o kit com coerência futura.

Quando consultar: antes de escolher ícone para uma peça, configurar biblioteca de ícones em projeto, briefar designer para desenhar ícone proprietário, mapear conceito da marca a ícone existente, validar uso de ícone em peça, ou implementar sistema de ícones em produto digital.

Dependências aprovadas:

• Família oficial v1.0: Phosphor Icons (Regular padrão; Bold em destaque; Fill em UI ativo).
• Pesos rejeitados: Thin, Light, Duotone.
• Tamanhos: 16px mínimo, 20-24px UI padrão, 24-32px destaque, 40-48px hero.
• 7 ícones proprietários planejados (Diagnóstico, Brand System, Company Brain, Prompt Mestre, Matriz, Documento da Verdade, Método SNCRO) — apenas como ideia de forma nas Diretrizes.
• Princípio: ícones são funcionais antes de decorativos — sem charm sem função.

Este documento fecha 12 gaps técnicos: (1) sistema de construção do kit proprietário, (2) especificação geométrica dos 7 ícones com detalhes reproduzíveis, (3) variantes Regular/Bold/Fill de cada um, (4) mapeamento Phosphor → uso corrente da marca, (5) sistema de estados em UI, (6) tokens CSS/Figma/sprite, (7) workflow de criação de novo ícone proprietário, (8) asset library e naming, (9) acessibilidade WCAG, (10) composição em ilustração técnica, (11) ícones em assinatura institucional vs produto, (12) checklist de validação.

---

1. Sistema técnico do kit proprietário

Antes de desenhar qualquer ícone, fixar o sistema que sustenta a coerência com Phosphor.

1.1 Canvas e grid

─────────────────────────────────────────────
CANVAS                24 × 24 px (padrão)
                      Versão @ 16 px (densa) — sub-grid de 16
                      Versão @ 32 px (hero) — sub-grid de 32

KEYLINE / SAFE AREA   Padding 2 px de cada lado em canvas 24px
                      Área útil real: 20 × 20 px
                      Conteúdo nunca toca a borda do canvas

GRID INTERNO          Linhas a cada 2px (12 unidades em 24px)
                      Pontos de ancoragem em metades (passo 1px)
─────────────────────────────────────────────

Justificativa: Phosphor opera em canvas 256 nativo escalável; em 24px renderizado mantém 2px de safe area. Reproduzir o mesmo princípio no kit proprietário garante harmonia óptica quando Phosphor e proprietários aparecem lado a lado.

1.2 Stroke (espessura de linha)

Regras:

• Stroke nunca varia dentro de um ícone — toda linha tem a mesma espessura.
• Em redimensionamento, escala proporcionalmente (não fixo a 1.5px em todos os tamanhos — usar tabela acima).
• Terminais: round cap proibido (anti-marca, Apple-friendly demais). Usar butt ou square cap.
• Cantos internos das linhas: miter join (cantos retos), nunca round join.

1.3 Keyline shapes (formas-guia)

Formas matriz que normalizam visualmente ícones de naturezas diferentes:

─────────────────────────────────────────────
QUADRADO    20 × 20 px (occupa área útil completa)
            Para ícones de container, documento, frame

CÍRCULO     20 px diâmetro (mesma área visual perceptível)
            Para ícones de pessoa, círculo, status

LOSANGO     20 × 20 px em rotação 45° (16.97 × 16.97 visual)
            Para ícones com módulo da marca (◇)

RETÂNGULO   20 × 16 px (horizontal) ou 16 × 20 px (vertical)
            Para ícones de viga, faixa, separador
            ALTURA ou LARGURA escalada para igualar PESO visual
            de quadrado/círculo
─────────────────────────────────────────────

Princípio do peso óptico igual: ícones devem ler como mesma "presença" mesmo quando geometricamente são diferentes. Um quadrado de 20×20 e um círculo de 20px diâmetro têm áreas diferentes (400 vs ~314), mas percepção visual aproxima — não exagerar o círculo para compensar.

1.4 Cantos

Regra: cantos arredondados em ícones são rejeitados — pertencem a Material Design / iOS. A Sincronow herda o tratamento de cantos do Sistema de Grafismos §2.

1.5 Espaços internos

1.6 Cor

Ícones proprietários seguem as mesmas regras do Pilar 6 §6.3:

---

2. Especificação dos 7 ícones proprietários

Cada ícone tem: (a) conceito da marca que carrega, (b) construção geométrica em canvas 24, (c) variantes Regular/Bold/Fill, (d) casos de uso, (e) o que evitar.

Convenção de coordenadas: canvas 24×24. Origem (0,0) no canto superior-esquerdo. Eixo X cresce para direita, Y cresce para baixo. Safe area útil: (2,2) a (22,22).

2.1 Ícone 01 — Diagnóstico de Clareza

Conceito: mapear o que está obscuro. Camadas sobrepostas atravessadas por linha-guia que marca um ponto.

Forma síntese: três linhas horizontais empilhadas, atravessadas por uma linha de cota diagonal com tick no ponto medido.

Construção geométrica (Regular)

   ┌─────────────────────────┐
   │                         │
   │    ▬▬▬▬▬▬▬▬▬▬▬▬          │  ← linha superior
   │              ╲           │
   │    ▬▬▬▬▬▬▬▬▬▬╲▬▬          │  ← linha média (com tick)
   │              ╲           │
   │    ▬▬▬▬▬▬▬▬▬▬▬▬          │  ← linha inferior
   │                         │
   └─────────────────────────┘

Stroke: 1.5px em todos os elementos. As 3 linhas horizontais têm o mesmo comprimento; a diagonal cruza só a linha do meio (Discernimento = identificar a camada específica).

Justificativa: referência direta à Marca de Cota Técnica do Sistema de Grafismos. Carrega Discernimento (linha precisa atravessa camadas).

Variantes

• Regular (padrão) — como descrito acima
• Bold — stroke 2px, demais elementos iguais
• Fill — as 3 linhas horizontais viram retângulos preenchidos (4×0.8 cada); a linha de cota fica em outline 1.5px. Híbrido fill+outline preservando legibilidade.

Casos de uso

• Botão "Iniciar Diagnóstico de Clareza" (CTA principal da Sincronow)
• Marcador de etapa "Diagnóstico" no Método SNCRO
• Tag de produto na página de serviços
• Ícone de menu/navegação quando "Diagnóstico" é seção

O que evitar

• ❌ Lupa sobre documento (clichê de "análise")
• ❌ Cérebro com circuitos (clichê IA)
• ❌ Olho aberto (vigilância — agressivo)
• ❌ Coração com pulso (medical — fora de território)

---

2.2 Ícone 02 — Brand System

Conceito: sistema modular de marca. Módulos entrelaçados dentro de frame estrutural.

Forma síntese: dois losangos entrelaçados (módulo da marca em pequeno) inscritos em um frame quadrado.

Construção geométrica (Regular)

   ┌─────────────────────────┐
   │                         │
   │   ┌─────────────────┐   │
   │   │     ◇    ◇      │   │  ← dois losangos
   │   │      ╲╳ ╳╱       │   │     entrelaçados
   │   │      ╱╳ ╳╲       │   │
   │   │     ◇    ◇      │   │
   │   └─────────────────┘   │
   │                         │
   └─────────────────────────┘

Stroke: 1.5px no frame e nos losangos. O entrelace simula gaps de 0.5px nas intersecções para criar leitura de "tecido".

Justificativa: o ícone é a marca em pequeno, contida pelo frame "sistema". Carrega Integridade (frame sólido) + Discernimento (módulos articulados).

Variantes

• Regular — entrelace com gaps
• Bold — stroke 2px, gaps mantidos
• Fill — frame outline 1.5px; losangos preenchidos sólidos com Tinta-Noite, entrelace simulado por gap branco/transparente de 1px no cruzamento

Casos de uso

• Página/seção "Brand System" no site
• Marcador na lista de produtos da Sincronow
• Capa de documento de entrega de Brand System
• Item de menu/navegação

O que evitar

• ❌ Pincel + paleta (clichê design)
• ❌ Letra "B" estilizada
• ❌ Camadas tipo Photoshop empilhadas

---

2.3 Ícone 03 — Company Brain

Conceito: memória operacional acumulada. Camadas conectadas com circulação.

Forma síntese: 4 camadas horizontais empilhadas com uma seta circular à esquerda conectando-as (loop de circulação de conhecimento).

Construção geométrica (Regular)

   ┌─────────────────────────┐
   │                         │
   │  ╭─▬▬▬▬▬▬▬▬▬▬▬▬▬▬       │  ← camada 1
   │  │                       │
   │  │ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬       │  ← camada 2
   │  │                       │
   │  │ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬       │  ← camada 3
   │  │                       │
   │  ╰▶▬▬▬▬▬▬▬▬▬▬▬▬▬▬       │  ← camada 4 (seta entra)
   │                         │
   └─────────────────────────┘

Stroke: 1.5px em todas as linhas e no arco. A seta na ponta é micro-detalhe (2px de comprimento).

Justificativa: as 4 linhas representam camadas de memória (operacional, decisória, cultural, técnica). O arco circular conecta-as como retorno contínuo — Company Brain é circulação, não armazenamento.

Variantes

• Regular — como descrito
• Bold — stroke 2px
• Fill — camadas viram retângulos finos preenchidos (12×1px); arco continua outline 1.5px

Casos de uso

• Página/seção "Company Brain"
• Marcador em material sobre o produto
• Tag em conteúdo relacionado a memória operacional
• Frequentemente acompanhado de Violeta-Sincronow (cor técnica)

O que evitar

• ❌ Cérebro humano estilizado (anti-marca)
• ❌ Nuvem com seta (clichê cloud)
• ❌ Disco / banco de dados isométrico
• ❌ Robô humanoide

---

2.4 Ícone 04 — Prompt Mestre

Conceito: documento calibrado que produz saída calibrada para IA.

Forma síntese: retângulo de documento com canto chanfrado (referência ao chanfro da marca), com seta saindo do lado direito modulada por pequeno losango.

Construção geométrica (Regular)

   ┌─────────────────────────┐
   │                         │
   │   ┌────────────┐         │
   │   │            ╲         │  ← documento com chanfro
   │   │            ▬▬▬▬▬◇   │  ← seta + módulo (calibração)
   │   │             │         │
   │   │             │         │
   │   └─────────────┘         │
   │                         │
   └─────────────────────────┘

Stroke: 1.5px em todo o ícone. O módulo ◇ no final da seta é proprietário — não é seta padrão, é "seta com saída calibrada".

Justificativa: o chanfro no documento é a referência mais direta possível à arquitetura modernista da marca. O módulo ◇ na ponta da seta é a "calibração proprietária" que diferencia Prompt Mestre de um prompt qualquer.

Variantes

• Regular — chanfro outline + módulo outline
• Bold — stroke 2px
• Fill — documento preenchido, chanfro mantido; módulo na ponta preenchido sólido

Casos de uso

• Página/produto "Prompt Mestre"
• Tag de IA em conteúdo (acompanhado de Violeta-Sincronow)
• Marcador em diagramas que envolvem IA
• Botão "Gerar com Prompt Mestre" em produto digital

O que evitar

• ❌ Robô / cabeça de máquina
• ❌ Chip / circuito eletrônico
• ❌ Varinha mágica (clichê IA)
• ❌ Estrela com brilho

---

2.5 Ícone 05 — Matriz de Mensagens

Conceito: grid de comunicação com módulo destacado.

Forma síntese: grid 3×3 de quadrados pequenos com um deles destacado por preenchimento ou módulo ◇ interno.

Construção geométrica (Regular)

   ┌─────────────────────────┐
   │                         │
   │     ┌──┬──┬──┐           │
   │     │  │  │  │           │  ← linha 1
   │     ├──┼──┼──┤           │
   │     │  │ ◇│  │           │  ← linha 2 (centro com ◇)
   │     ├──┼──┼──┤           │
   │     │  │  │  │           │  ← linha 3
   │     └──┴──┴──┘           │
   │                         │
   └─────────────────────────┘

Stroke: 1.5px no grid. O ◇ central é preenchido sólido (Tinta-Noite #22292F).

Justificativa: grid 3×3 = matriz de comunicação (3 níveis × 3 momentos da jornada). O módulo destacado no centro mostra a peça-âncora (mensagem central que organiza as demais). Direta referência à Matriz de Mensagens como produto da Sincronow.

Variantes

• Regular — grid outline + módulo central preenchido
• Bold — stroke 2px no grid
• Fill — grid mantido outline; uma célula (não necessariamente central) preenchida sólida em vez de ◇

Casos de uso

• Página/produto "Matriz de Mensagens"
• Marcador em documento entregue com matriz
• Tag em conteúdo sobre comunicação estratégica
• Capa de seção em apresentação

O que evitar

• ❌ Balão de fala (anti-marca, conversacional demais)
• ❌ Megafone (clichê marketing)
• ❌ Setas convergindo (clichê estratégia)

---

2.6 Ícone 06 — Documento da Verdade

Conceito: folha selada com viga horizontal — fonte canônica e única de verdade institucional.

Forma síntese: retângulo de documento vertical com uma viga horizontal sólida na altura ⅔ + pequeno módulo de assinatura no canto inferior-direito.

Construção geométrica (Regular)

   ┌─────────────────────────┐
   │                         │
   │      ┌──────────┐        │
   │      │          │        │  ← documento (parte superior)
   │      │          │        │
   │      │ ▬▬▬▬▬▬▬▬ │        │  ← VIGA horizontal sólida
   │      │          │        │     (linha de selo de verdade)
   │      │          │        │
   │      │       ◇  │        │  ← módulo de assinatura
   │      └──────────┘        │
   │                         │
   └─────────────────────────┘

Stroke: 1.5px no contorno do documento; 2.5px na viga (a viga é mais grossa propositalmente — carrega o peso de "selo de verdade"); módulo ◇ preenchido.

Justificativa: a viga é o elemento gráfico mais característico do Sistema de Grafismos Sincronow (separador estrutural). Colocá-la dentro de um documento é dizer "este documento está estruturalmente selado". O módulo ◇ é a assinatura proprietária — "este é da Sincronow".

Variantes

• Regular — documento outline + viga sólida + módulo preenchido
• Bold — stroke 2px no contorno; viga 3px; módulo maior (3.5px)
• Fill — documento preenchido com Tinta-Noite #22292F; viga em Areia Dourada 600 #DD7302 (acento de presença) atravessando; módulo em Luz-Papel #F8F6F4 para vazar do preenchimento

Casos de uso

• Página/produto "Documento da Verdade"
• Marcador em entregáveis canônicos
• Watermark em PDF entregue ao cliente
• Botão "Acessar Documento da Verdade" em portal

O que evitar

• ❌ Selo medieval / brasão
• ❌ Carimbo "Approved" tipo escritório
• ❌ Folha com check verde
• ❌ Livro aberto (sai do território "documento institucional")

---

2.7 Ícone 07 — Método SNCRO

Conceito: método proprietário em 5 etapas conectadas em circulação fechada.

Forma síntese: 5 nodos pequenos arranjados em pentágono (ou círculo de 5 pontos) conectados por linhas formando loop fechado.

Construção geométrica (Regular)

   ┌─────────────────────────┐
   │                         │
   │            ◇             │  ← nodo 1 (top)
   │          ╱   ╲           │
   │         ╱     ╲          │
   │        ◇       ◇         │  ← nodos 2 e 5
   │        │       │         │
   │         ╲     ╱          │
   │          ◇───◇           │  ← nodos 3 e 4
   │                         │
   └─────────────────────────┘

Stroke: 1.5px nas linhas; nodos preenchidos sólidos.

Justificativa: 5 etapas do método SNCRO (S, N, C, R, O — as letras do nome da marca também), conectadas em circulação. Pentágono regular cria estabilidade visual + completude (loop fechado = método completo).

Variantes

• Regular — pentágono em outline + nodos preenchidos
• Bold — stroke 2px nas linhas; nodos 3px
• Fill — área interna do pentágono preenchida sutilmente (Penumbra-Papel #EDEAE6); nodos sólidos em Tinta-Noite #22292F; linhas mantidas

Casos de uso

• Página/seção "Método SNCRO"
• Capa de documento do método
• Marcador em apresentações sobre processo
• Frequentemente em hero de página institucional

O que evitar

• ❌ Engrenagens (clichê processo)
• ❌ Fluxograma com setas em cascata
• ❌ Espiral (clichê crescimento)
• ❌ Círculo com flechas tipo "recycle"

---

3. Mapeamento Phosphor → uso corrente da marca

Para conceitos não cobertos pelos 7 proprietários, a marca usa Phosphor. Esta seção mapeia conceitos correntes da Sincronow → nomes específicos de ícones Phosphor — evita que cada designer escolha um ícone diferente para o mesmo conceito.

Princípio: uma vez que um conceito tem ícone mapeado aqui, toda peça da marca usa o mesmo. Não há "achei outro melhor" — se houver, atualizar esta tabela versionada.

3.1 Quando NÃO usar Phosphor

Em peça institucional (capa de Brand System, hero institucional, página "Sobre"), preferir grafismo do Sistema de Grafismos em vez de ícone. Ícones são funcionais; em peça institucional, a marca prefere viga, módulo, marca de cota — elementos proprietários — em vez de ícones genéricos.

---

4. Sistema de estados em UI

Para produto digital com componentes interativos.

4.1 Estados padrão

─────────────────────────────────────────────
IDLE          Tinta-Noite #22292F (institucional)
              ou Petróleo 700 #425462 (UI cotidiano)
              Stroke padrão (1.5px @ 24)
              Opacidade 100%

HOVER         Petróleo 800 #394753 (UI cotidiano — escurece 1 passo)
              ou Tinta-Noite #22292F mantida (institucional)
              Stroke padrão
              Opacidade 100%
              + tooltip ou cursor pointer
              + transition 200ms ease-out

ACTIVE        Areia Dourada 600 #DD7302 (selecionado — presença pontual)
              Stroke padrão OU variante Fill
              Opacidade 100%

FOCUS         Tinta-Noite #22292F (cor do ícone preservada)
              + outline focus ring 2px Petróleo-700 #425462
              Mesma cor do link — coerência interativo/focado por teclado

DISABLED      Tinta-Noite #22292F @ 30-40% opacidade
              ou Petróleo 400 #859BAB sólido
              Stroke padrão
              Cursor not-allowed

LOADING       Animação rotate 360° em 1200ms linear
              Apenas ícone `circle-notch` ou spinner
              Sem outros ícones animados
─────────────────────────────────────────────

4.2 Transições

Proibido: bounce, spring, scale-up no hover, glow effect, gradient transition.

4.3 Estados de toggle (on/off, expand/collapse)

---

5. Tokens de implementação

5.1 Estrutura de pastas oficial

Diretrizes/Iconografia/
├── proprietarios/
│   ├── svg/
│   │   ├── sincronow-diagnostico-regular.svg
│   │   ├── sincronow-diagnostico-bold.svg
│   │   ├── sincronow-diagnostico-fill.svg
│   │   ├── sincronow-brand-system-regular.svg
│   │   ├── sincronow-brand-system-bold.svg
│   │   ├── sincronow-brand-system-fill.svg
│   │   ├── sincronow-company-brain-regular.svg
│   │   ├── sincronow-company-brain-bold.svg
│   │   ├── sincronow-company-brain-fill.svg
│   │   ├── sincronow-prompt-mestre-regular.svg
│   │   ├── sincronow-prompt-mestre-bold.svg
│   │   ├── sincronow-prompt-mestre-fill.svg
│   │   ├── sincronow-matriz-mensagens-regular.svg
│   │   ├── sincronow-matriz-mensagens-bold.svg
│   │   ├── sincronow-matriz-mensagens-fill.svg
│   │   ├── sincronow-documento-verdade-regular.svg
│   │   ├── sincronow-documento-verdade-bold.svg
│   │   ├── sincronow-documento-verdade-fill.svg
│   │   ├── sincronow-metodo-sncro-regular.svg
│   │   ├── sincronow-metodo-sncro-bold.svg
│   │   └── sincronow-metodo-sncro-fill.svg
│   ├── source/
│   │   └── sincronow-icons-v1.fig (arquivo-fonte Figma)
│   └── sprite/
│       └── sincronow-icons-sprite.svg (todos em 1 arquivo com <symbol>)
├── phosphor-subset/
│   ├── svg/ (apenas os 45+ ícones mapeados na §3)
│   └── README.md (lista de quais Phosphor estão no subset)
└── icon-system.css (tokens e classes)

5.2 Sistema de nomeação

5.3 SVG template (proprietários)

Todos os ícones proprietários seguem este template:

<svg xmlns="http://www.w3.org/2000/svg"
     width="24" height="24" viewBox="0 0 24 24"
     fill="none"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linecap="butt"
     stroke-linejoin="miter"
     role="img"
     aria-label="[descrição em PT-BR]">
  <!-- paths específicos do ícone aqui -->
</svg>

Pontos críticos:

• fill="none" para variante Regular/Bold; sólido para Fill
• stroke="currentColor" permite controle de cor via CSS
• stroke-linecap="butt" — terminais retos (não round)
• stroke-linejoin="miter" — cantos vivos (não round)
• role="img" + aria-label obrigatórios para acessibilidade

5.4 CSS — Classes utilitárias

:root {
  /* Tamanhos de ícone */
  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 24px;  /* padrão */
  --icon-lg: 32px;
  --icon-xl: 48px;
 
  /* Cores de ícone — v1.1 (refinamento cromático 2026-05-26) */
  --icon-color: var(--text-primary);              /* Tinta-Noite #22292F */
  --icon-color-ui: var(--petroleo-700);           /* #425462 — UI cotidiano, links */
  --icon-color-ui-hover: var(--petroleo-800);     /* #394753 — hover UI */
  --icon-color-active: var(--accent-presence);    /* Areia Dourada 600 #DD7302 */
  --icon-color-technical: var(--accent-rare);     /* Violeta-Sincronow #4E3DBE — raridade governada */
  --icon-color-disabled: rgba(34, 41, 47, 0.35);  /* Tinta-Noite @ 35% */
  --icon-color-disabled-ui: var(--petroleo-400);  /* #859BAB sólido */
  --icon-color-inverse: var(--text-inverse);      /* Luz-Papel #F8F6F4 */
}
 
.icon {
  display: inline-block;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--icon-color);
  vertical-align: middle;
  flex-shrink: 0;
}
 
.icon--xs { width: var(--icon-xs); height: var(--icon-xs); }
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }
 
.icon--ui { color: var(--icon-color-ui); }                  /* Petróleo 700 — UI cotidiano */
.icon--ui:hover { color: var(--icon-color-ui-hover); }      /* Petróleo 800 */
.icon--active { color: var(--icon-color-active); }          /* Areia Dourada 600 — selecionado */
.icon--technical { color: var(--icon-color-technical); }    /* Violeta — raridade governada */
.icon--disabled { color: var(--icon-color-disabled); cursor: not-allowed; }
.icon--inverse { color: var(--icon-color-inverse); }
 
/* Inline com texto */
.icon-inline {
  display: inline-block;
  vertical-align: -0.15em; /* alinha óptico com baseline */
  margin-right: 0.5em;     /* 8px @ body 16px */
}
 
/* Em botão */
.btn .icon {
  margin-right: 0.75em; /* 12px @ body 16px */
}
 
.btn .icon:only-child {
  margin: 0;
}
 
/* Loading rotation */
@keyframes icon-rotate {
  to { transform: rotate(360deg); }
}
 
.icon--loading {
  animation: icon-rotate 1200ms linear infinite;
}
 
/* Transitions */
.icon {
  transition: color 200ms ease-out, opacity 150ms ease-out;
}
 
/* Sem hover scale, sem bounce */

5.5 SVG Sprite (recomendado para web)

Compor todos os ícones em sprite único:

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="i-diagnostico" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5">
    <!-- paths -->
  </symbol>
  <symbol id="i-brand-system" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5">
    <!-- paths -->
  </symbol>
  <!-- demais símbolos -->
</svg>

Uso em HTML:

<svg class="icon" aria-label="Diagnóstico de Clareza" role="img">
  <use href="#i-diagnostico"></use>
</svg>

Vantagens do sprite: uma única requisição, cache eficiente, controle CSS global, ~5 KB para os 7 proprietários + 45 Phosphor.

5.6 Figma — Component Library

Criar Component Set "Sincronow Icons" com:

Proprietários/
├── Diagnostico (variants: Regular, Bold, Fill)
├── BrandSystem (variants: Regular, Bold, Fill)
├── CompanyBrain (variants: Regular, Bold, Fill)
├── PromptMestre (variants: Regular, Bold, Fill)
├── MatrizMensagens (variants: Regular, Bold, Fill)
├── DocumentoVerdade (variants: Regular, Bold, Fill)
└── MetodoSNCRO (variants: Regular, Bold, Fill)

Phosphor Subset/
├── file-text
├── notebook
├── magnifying-glass
└── ... (45+ componentes)

Cada componente com properties:

• Size: 16 / 20 / 24 / 32 / 48
• Color: Primary / Active / Technical / Disabled / Inverse
• Weight: Regular / Bold / Fill (para proprietários e Phosphor)

---

6. Workflow de criação de novo ícone proprietário

Quando a marca precisar de um 8º, 9º ícone — o processo para manter coerência.

6.1 Critérios para criar proprietário (em vez de usar Phosphor)

Um conceito merece ícone proprietário se passa em pelo menos 2 dos critérios:

1. Exclusividade conceitual: o conceito é único da Sincronow (não existe em biblioteca padrão).
2. Recorrência: vai aparecer em pelo menos 3 peças distintas / canais.
3. Visibilidade: é navegação principal, produto canônico, ou identidade.
4. Diferenciação: Phosphor existente é genérico demais e enfraquece a marca.

Se nenhum dos critérios bate, usar Phosphor (mapear na §3).

6.2 Processo de criação

1. Brief escrito — conceito + onde será usado + 3-5 referências visuais (de Phosphor ou outras bibliotecas) que se aproximam
2. Esboço a lápis ou wireframe — formas básicas, sem stroke ainda
3. Construção em Figma — canvas 24×24, grid 2px, stroke 1.5px, seguindo §1 deste documento
4. Stress-test em escala — exportar a 16px e 48px, conferir legibilidade nos extremos
5. Stress-test em par — colocar lado a lado com Phosphor (file-text, gear-six) e confirmar que parecem da mesma família
6. Revisão por Clarisse + designer — Tribunal de coerência (mesma família visual? funcional antes de decorativo? não é clichê?)
7. Variantes Bold e Fill geradas a partir do Regular aprovado
8. Exportação SVG + adição ao sprite
9. Documentação — adicionar seção neste documento + entrada na §3 do mapeamento

6.3 Quem aprova

• Aprovação técnica: designer-líder da marca (consistência com §1)
• Aprovação estratégica: Clarisse (conceito vale o investimento de ícone próprio?)
• Não pode entrar sem ambas as aprovações — proteção contra inflação de proprietários

---

7. Acessibilidade WCAG

7.1 aria-label e role

Todo ícone em produto digital deve ter:

<svg role="img" aria-label="Diagnóstico de Clareza">...</svg>

Quando NÃO usar aria-label:

• Ícone puramente decorativo acompanhando texto que já diz o mesmo → usar aria-hidden="true" em vez

Exemplo:

<!-- Ícone funcional, sem texto adjacente -->
<button aria-label="Abrir menu">
  <svg role="img" aria-hidden="true"><use href="#i-menu"/></svg>
</button>
 
<!-- Ícone decorativo acompanhando texto -->
<button>
  <svg aria-hidden="true"><use href="#i-arrow-right"/></svg>
  Próxima camada
</button>

7.2 aria-label padrão para os 7 proprietários (PT-BR)

7.3 Contraste

Todo ícone funcional precisa ter contraste mínimo 3:1 contra o fundo (WCAG AA para non-text content).

Atenção: Areia Dourada 600 como cor de ícone sobre Luz-Papel fica marginalmente abaixo de 3:1. Use Areia Dourada em ícone apenas quando:

• Estado "ativo" (selecionado) e há indicação adicional (background, underline, badge)
• Sobre fundo Tinta-Noite (passa folgado)
• Em ícone grande (≥32px) onde contraste perceptivo é mais tolerante
• Para variante Fill (massa preenchida ≠ stroke fino)

Petróleo é a cor padrão para ícones em UI cotidiano — atinge AAA tanto em idle (700) quanto em hover (800), e a transição entre os dois pesos é perceptível.

7.4 Tamanho de área clicável

Ícone clicável (botão de ícone solo) precisa de 44×44px de área clicável mínima (WCAG Target Size AAA). Mesmo se o ícone renderizado é 24px, padding de 10px de cada lado.

---

8. Composição em ilustração técnica

Quando 2-3 ícones aparecem juntos em diagrama (ex.: Método SNCRO em ilustração, jornada do cliente, esquema de produto).

8.1 Princípios de composição

1. Mesma família visual: preferir 100% Phosphor OU 100% proprietários OU mix coerente (proprietários como nodos principais + Phosphor para detalhes).
2. Mesmo peso: todos Regular ou todos Bold no mesmo diagrama. Não misturar.
3. Mesmo tamanho: ícones em diagrama partilham o mesmo size (geralmente 32px).
4. Cores limitadas: máximo 2 cores em um diagrama com ícones (Tinta-Noite + Terra-Ocre OU Tinta-Noite + Violeta-Sincronow).
5. Espaçamento generoso: mínimo 32px entre ícones em diagrama; mais ar quando possível.

8.2 Combinações canônicas

8.3 Conexões entre ícones em diagrama

Sempre usar:

• Linhas finas (1px) em Tinta-Noite @ 40-60% — não competir com os ícones
• Setas com módulo ◇ na ponta (referência ao Sistema de Grafismos)
• Cota técnica quando aplicável para indicar duração/etapa

---

9. Ícones em assinatura institucional vs produto digital

Distinção crítica que evita o erro mais comum.

9.1 Em peça institucional (capa Brand System, manifesto, hero institucional, post editorial)

Ícones aparecem raramente. A marca prefere grafismos do Sistema de Grafismos (viga, módulo ◇, marca de cota, chanfro) em vez de ícones.

Razão: ícones são linguagem funcional. Em peça institucional, o que comunica é a estrutura visual (tipografia + cor + grafismo), não símbolos pictográficos.

Quando ícone aparece em peça institucional:

• Apenas se for proprietário (não Phosphor)
• Apenas em destaque pontual (ex.: marcador no rodapé de capa, símbolo do produto na páginal final)
• Sempre em tamanho médio-grande (24-48px) — nunca microcopy

9.2 Em produto digital (site institucional como UI, app futuro, dashboard, portal de cliente)

Ícones são onipresentes e funcionais. Phosphor + 7 proprietários cobrem 95% das necessidades.

Razão: produto digital exige UI clara; ícones aceleram leitura, marcam navegação, identificam ações.

Princípio: quanto mais funcional a peça, mais ícone. Quanto mais institucional, menos ícone.

9.3 Em documento entregue ao cliente

Híbrido:

• Ícones proprietários marcando seções (Diagnóstico, Brand System, etc.)
• Phosphor para indicadores de tipo de conteúdo (anexo, exemplo, aviso, nota)
• Grafismos para separadores e estrutura

Equilíbrio: ~3-5 ícones por página é máximo saudável. Acima disso, vira UI dashboard.

---

10. Asset library inicial — produzir na v1.1

Lista priorizada do que precisa ser produzido fisicamente para sair do nível de especificação:

10.1 Sprint 1 (alta prioridade)

• Arquivo Figma fonte sincronow-icons-v1.fig com os 7 proprietários × 3 variantes = 21 ícones desenhados
• SVG export dos 21 ícones na pasta proprietarios/svg/
• SVG sprite consolidado em proprietarios/sprite/sincronow-icons-sprite.svg
• Subset Phosphor baixado e organizado em phosphor-subset/svg/ (apenas os 45+ mapeados na §3)
• CSS de tokens icon-system.css pronto para distribuição

10.2 Sprint 2 (média prioridade)

• Component Library Figma completa com properties (size, color, weight)
• Variável de cor em Figma sincronizada com Sistema Cromático Operacional
• NPM package @sincronow/icons para uso em projeto React/Vue/Svelte (decisão de tooling)
• Documentação online (Storybook ou similar) com todos os ícones, estados e exemplos

10.3 Sprint 3 (baixa prioridade — quando demanda surgir)

• Variantes de cor exportadas em PNG (para uso em ferramentas que não suportam SVG bem — PowerPoint, Word)
• Versões coloridas em foil dourado dos 7 proprietários (apenas para peça impressa premium — capa BS física)
• Versões animadas de ícones específicos (loading, transição entre estados) em Lottie

---

11. Checklist de validação

ALINHAMENTO ESTRATÉGICO
[ ] O ícone é funcional (identifica conceito, organiza, marca função)?
[ ] Se decorativo sem função, foi removido?
[ ] Se conceito é proprietário da marca, está usando ícone proprietário (não Phosphor)?
[ ] Se conceito é genérico, está usando Phosphor mapeado na §3?

SISTEMA TÉCNICO
[ ] Stroke 1.5px (Regular) ou 2px (Bold)?
[ ] Stroke-linecap: butt ou square (nunca round)?
[ ] Canvas 24×24 (ou variante específica para 16/32)?
[ ] Safe area de 2px respeitada?

PESO E VARIANTE
[ ] Phosphor: Regular padrão; Bold em destaque; Fill em UI ativo?
[ ] Thin/Light/Duotone NÃO utilizados?
[ ] No mesmo diagrama, todos os ícones no mesmo peso?

COR
[ ] Apenas 1 cor por ícone (sem múltiplas cores)?
[ ] Cor padrão Tinta-Noite `#22292F` (institucional) ou Petróleo 700 `#425462` (UI cotidiano)?
[ ] Estado ativo em Areia Dourada 600 `#DD7302` (com cuidado de contraste — ver §7.3)?
[ ] Estado técnico em Violeta-Sincronow `#4E3DBE` (uso governado: tag IA, Company Brain, easter-egg do Mago)?
[ ] Focus ring em Petróleo-700 `#425462` (canônico v1.1 — DL-009)?
[ ] Hover em Petróleo 800 `#394753` quando partindo de Petróleo 700?
[ ] Disabled em Tinta-Noite @ 35% ou Petróleo 400 `#859BAB`?
[ ] Contraste ≥3:1 contra fundo?

ALINHAMENTO E ESPAÇAMENTO
[ ] Ícone inline com texto: alinhado a x-height da fonte?
[ ] 8px de gap entre ícone e texto?
[ ] 12-16px entre ícone e label em botão?
[ ] Área clicável ≥44×44px em UI?

ACESSIBILIDADE
[ ] Tag SVG tem role="img"?
[ ] Tem aria-label quando funcional?
[ ] Tem aria-hidden="true" quando decorativo acompanhando texto?
[ ] Texto alternativo descreve a função, não a forma visual?

PROIBIÇÕES
[ ] Não tem sombra, gradient, glow?
[ ] Não está em ângulo/perspectiva 3D?
[ ] Não tem fill com cor da marca (só Tinta-Noite/Petróleo, ou Areia Dourada/Violeta em estados específicos)?
[ ] Não é animado (exceto loading)?
[ ] Não é emoji disfarçado?
[ ] Não há mais de uma família simultânea?

---

12. Decisões em aberto (para v1.2+)

• Produção física dos 21 ícones proprietários (7 × 3 variantes) — primeira tarefa após este documento.
• Variante "Mono" dos proprietários — versão em estilo JetBrains Mono peso (para uso em código/terminal/snippets técnicos). Avaliar se vale o esforço.
• Variante "Stamp" dos proprietários — versão em selo/carimbo para uso em foil ou impressão especial.
• 8º ícone proprietário: "Auditoria de Marca" — se virar produto canônico, vale ícone próprio. Avaliar em 6-12 meses.
• 9º ícone proprietário: "Manifesto" — se a marca for produzir manifestos para terceiros como serviço.
• Tradução de mapeamento Phosphor para outras línguas — se a marca expandir para mercados de língua espanhola/inglesa, manter mesmo mapeamento conceito → ícone, traduzir aria-labels.
• Sistema de "Status Icons" para UI — quando produto digital pedir indicadores de status (online/offline, ativo/inativo, processando), desenhar pequeno conjunto coerente.
• Bookmark/Save — provisoriamente sem ícone proprietário; usar Phosphor bookmark-simple quando necessário; reavaliar se virar uso recorrente.

---

Documento operacional. Versionar ao adicionar novo ícone proprietário, expandir mapeamento Phosphor ou ao migrar tooling de implementação. Próxima revisão prevista: após produção dos 21 SVGs proprietários (validar specs geométricas em desenho real) e após primeira aplicação em produto digital (validar UX dos estados).

---

Mudanças desde v1.0

Refinamento cromático aprovado em 2026-05-26 (v1.0 → v1.1):

• §1.6 Cor (tabela de estados) reescrita: Tinta-Noite #0F1E2E → #22292F; Terra-Ocre #C49A4A substituída por Areia Dourada 600 #DD7302 como estado ativo; adicionado Petróleo 700 #425462 como padrão de UI cotidiano e Petróleo 800 #394753 como hover; disabled aceita Petróleo 400 #859BAB sólido; Luz-Papel atualizada para #F8F6F4. Violeta-Sincronow mantida apenas como cor técnica de raridade governada.
• §2.6 Documento da Verdade — variante Fill: viga atravessando agora em Areia Dourada 600 #DD7302 (substitui Terra-Ocre); documento preenchido em Tinta-Noite #22292F; módulo em Luz-Papel #F8F6F4.
• §2.5 Matriz — variante Regular: módulo central preenchido em Tinta-Noite #22292F.
• §2.7 Método SNCRO — variante Fill: área interna do pentágono preenchida com Penumbra-Papel #EDEAE6 (substitui "Luz-Bruta"); nodos sólidos em Tinta-Noite #22292F.
• §4.1 Estados padrão (UI): reescrito com bifurcação institucional ↔ UI cotidiano. Idle pode ser Tinta-Noite OU Petróleo 700; hover é Petróleo 800; active é Areia Dourada 600; focus mantém Tinta-Noite + focus ring Petróleo-700 (canônico v1.1.0); disabled aceita Tinta-Noite @ 35% ou Petróleo 400 sólido.
• §5.4 Tokens CSS: --icon-color aponta para Tinta-Noite #22292F; adicionados --icon-color-ui (Petróleo 700), --icon-color-ui-hover (Petróleo 800), --icon-color-active (Areia Dourada 600), --icon-color-disabled-ui (Petróleo 400). --icon-color-technical mantido (Violeta) como raridade governada. Novas classes utilitárias .icon--ui e .icon--ui:hover.
• §7.3 Acessibilidade WCAG (tabela de contraste) reescrita com novos valores: Tinta-Noite/Luz-Papel ~13.1:1 (AAA); Petróleo 700/Luz-Papel ~7.6:1 (AAA); Petróleo 800/Luz-Papel ~8.9:1 (AAA); Petróleo 400/Luz-Papel ~3.1:1 (limiar AA — disabled); Areia Dourada/Luz-Papel ~2.9:1 (marginal — restringido a ícone ≥32px com indicação adicional); Violeta/Luz-Papel ~6.7:1 (AA, uso governado). Adicionadas combinações sobre Penumbra-Papel #EDEAE6 e Crista-Papel #FDFCFB.
• §11 Checklist atualizado: "Tinta-Carvão" removida do padrão; Areia Dourada substitui Terra-Ocre como estado ativo; adicionados itens de hover (Petróleo 800) e disabled (Petróleo 400). Item de proibições reescrito para incluir Petróleo nas cores permitidas.
• Pendências para revisão humana:
  • Areia Dourada 600 sobre Luz-Papel fica em ~2.9:1 (marginalmente abaixo de 3:1). Decidir se a regra "estado ativo precisa de indicação adicional" é suficiente ou se Areia Dourada 700 #B74F06 deveria ser o ponto operacional para ícones (custo: distancia do "pivô" canônico #DD7302).
  • O documento original mencionava "Tinta-Carvão #1A1A1A" como cor alternativa de ícone — ela não consta no refinamento aprovado; tratada como descontinuada e substituída por Tinta-Noite #22292F. Confirmar.
  • Em §4.1, manteve-se a possibilidade de "hover preservando Tinta-Noite" para uso institucional — decidir se isso é desejável ou se todo hover deve ser Petróleo 800.