Sistema de Grafismos Operacional Sincronow v1.0

Atualização v2.0 (2026-06-11) — Sistema Visual v2.0: a regra "nunca usar border-radius, sempre chanfro" foi flexibilizada. A UI operacional passa a usar border-radius leve (tokens --radius 4/8/12px), alinhada a componentes shadcn/ui. O chanfro (clip-path) deixa de ser obrigatório e passa a ser acento editorial opcional (classes .chanfro-edge-*). Os demais grafismos (Viga, Módulo ◇, Cota Técnica, patterns) seguem inalterados. Ver Changelog v2.0.0 no BRAND-SYSTEM.md.

Status: Documento de execução. Estende o Pilar 4 das Diretrizes Estratégicas de Identidade Visual com o nível técnico necessário para produzir grafismos em volume com qualidade controlada.

Quando consultar: antes de desenhar um separador, especificar uma viga, criar pattern de fundo, montar capa de peça editorial, compor um post, validar marca de cota técnica, ou exportar textura como asset.

Dependências aprovadas:

• Princípio organizador: grafismos declaram estrutura, não decoram (§4.1).
• 3 Virtudes traduzidas em forma: Discernimento (linha + ângulo), Integridade (viga + base), Presença (ar) (§4.2).
• 12 elementos canônicos definidos (§4.10).
• Cantos retos por padrão; chanfro sutil em referência à arquitetura modernista brasileira.
• 2D dominante, com texturas materiais sutis.
• Animação ease-out 300-500ms, sem bounce.

Este documento fecha 8 gaps técnicos identificados: (1) decisão sobre rapport, (2) specs de cada elemento canônico, (3) marca de cota técnica como ativo desenhado, (4) backgrounds editoriais full-bleed, (5) texturas como assets reais, (6) repertório cultural ampliado, (7) tokens CSS/Figma, (8) biblioteca de composições canônicas.

---

1. Decisão sobre rapport (patterns repetíveis)

1.1 Tensão estratégica resolvida

O Pilar 4 estabelece que a marca não tem grafismo decorativo. Isso gerou ambiguidade sobre se patterns repetíveis (rapport) podem existir.

Decisão v1.0: a Sincronow terá rapport, mas com regra inegociável:

O rapport da Sincronow é a estrutura construtiva ampliada — nunca decoração.

O pattern só é aprovado quando lê como grid arquitetônico visível (referência: as vigas do teto do SESC Pompeia vistas de baixo, a malha estrutural exposta de Lina Bo Bardi). Nunca como ornamento que poderia ser substituído por outro ornamento sem perda de leitura.

1.2 Três rapports oficiais

Rapport A — Trama Construtiva

─────────────────────────────────────────────
  │     │     │     │     │     │     │
──┼─────┼─────┼─────┼─────┼─────┼─────┼──
  │     │     │     │     │     │     │
──┼─────┼─────┼─────┼─────┼─────┼─────┼──
  │     │     │     │     │     │     │
──┼─────┼─────┼─────┼─────┼─────┼─────┼──
  │     │     │     │     │     │     │
─────────────────────────────────────────────

Lógica: grade ortogonal de linhas finas. Lê como planta arquitetônica vista do alto.

Rapport B — Tessellation Modular

─────────────────────────────────────────────
   ◇       ◇       ◇       ◇       ◇

       ◇       ◇       ◇       ◇

   ◇       ◇       ◇       ◇       ◇

       ◇       ◇       ◇       ◇

   ◇       ◇       ◇       ◇       ◇
─────────────────────────────────────────────

Lógica: o módulo isolado (◇) extraído do símbolo, repetido em grid alternado (offset 50%). Lê como módulo construtivo amplificado.

Rapport C — Cota Técnica em Repetição

─────────────────────────────────────────────
  ├──── 32 ────┤    ├──── 32 ────┤    ├──── 32 ────┤

  ├──── 32 ────┤    ├──── 32 ────┤    ├──── 32 ────┤

  ├──── 32 ────┤    ├──── 32 ────┤    ├──── 32 ────┤
─────────────────────────────────────────────

Lógica: linhas de cota arquitetônica (com ticks nas pontas e número em mono) em rapport. Lê como prancha de desenho técnico.

1.3 Regras transversais para qualquer rapport

1. Nunca aplicar dois rapports na mesma peça. Escolher um.
2. Opacidade máxima de 25% — o rapport vive como estrutura ambiente, não como protagonista.
3. Em peça com texto longo: rapport só na margem ou em faixa lateral. Nunca atrás de corpo.
4. Em peça com fotografia: rapport não convive com foto na mesma área. Pode aparecer em faixa adjacente.
5. Escala responsiva: módulos do rapport escalam proporcionalmente ao tamanho da peça — não absoluto.

---

2. Especificação técnica dos 12 elementos canônicos

2.1 Viga horizontal (separador estrutural)

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

2.2 Linha fina (separador técnico)

─────────────────────────────────────────────

2.3 Separador de respiro

2.4 Separador em cadência

◇ ─ ─ ─ ◇ ─ ─ ─ ◇

2.5 Marcador modular ◇ (losango isolado)

2.6 Numerador de camada (01, 02, 03…)

2.7 Seta técnica →

2.8 Chanfro (bisel no canto)

┌────────────┐       ┌────────────┐
│            │       │           ╲
│   bloco    │  vs.  │   bloco    │
│            │       │            │
└────────────┘       └────────────┘
   canto reto         chanfro inferior-direito

2.9 Grid editorial visível (baseline grid)

─────────────────────────────────────────────
Linha de texto exemplo aqui...........
─────────────────────────────────────────────
Segunda linha de texto exemplo aqui...
─────────────────────────────────────────────
Terceira linha alinhada ao baseline...
─────────────────────────────────────────────

2.10 Setas técnicas duplas (cota)

├─────── 64 px ───────┤

Detalhado na §3 (marca de cota técnica).

2.11 Texturas materiais sutis

Detalhado na §5 (texturas como assets).

2.12 Símbolo principal e variantes

Detalhado no Briefing de Construção da Assinatura.

---

3. Marca de cota técnica — novo ativo proprietário

Elemento mencionado nas Diretrizes (§4.2 como manifestação de Discernimento) mas nunca desenhado. A v1.0 estabelece a marca de cota como ativo gráfico oficial da Sincronow — referência direta ao desenho técnico de arquitetura modernista brasileira.

3.1 Anatomia

─────────────────────────────────────────────
                   24
        ├────────────────────┤
        │                    │
        │   conteúdo medido   │
        │                    │
─────────────────────────────────────────────

3.2 Variantes oficiais

Cota horizontal:

├──── 64 px ────┤

Cota vertical:

┬
│
│ 96 px
│
│
┴

Cota com chamada (objeto afastado):

                                    ◇
                                    ╎
                                    ╎
├──────── 240 px ────────┤

3.3 Aplicações canônicas

1. Capa de Brand System — uma cota subtle indicando a altura da viga superior, como "cota de prancha"
2. Página "Como construímos" — diagrama de processo com cotas reais (duração de fase, etc.)
3. Hero de site institucional — cota discreta ao redor de imagem destacada, como assinatura de prancha
4. Documento entregue ao cliente — cota de "duração da fase atual"
5. Rodapé institucional — cota canônica subtle abaixo do selo

3.4 Não-aplicações

• ❌ Em peças onde a cota não tem referente real (não é decoração)
• ❌ Acima de body de texto (compete com leitura)
• ❌ Em UI funcional (não é elemento de interface)
• ❌ Com números fictícios sem relação ao conteúdo

3.5 Justificativa estratégica

A marca de cota técnica é o elemento gráfico que mais identifica a Sincronow como marca arquitetônica, e não como marca de consultoria genérica. Nenhum concorrente no segmento de consultoria/marca brasileiro usa cota arquitetônica como linguagem. É território livre e altamente proprietário.

Referência cultural: pranchas de Lina Bo Bardi (SESC Pompeia), Paulo Mendes da Rocha, Niemeyer (Brasília civic) — todas com cotas visíveis como parte do desenho institucional.

---

4. Backgrounds editoriais full-bleed

Composições oficiais para preencher peças inteiras com sistema de grafismo. Cada uma especificada com mockup ASCII + parâmetros.

4.1 Capa de Brand System (A4 vertical)

─────────────────────────────────────────────
                                              ← cota técnica subtle no topo
                          ├── 100 ──┤
                                              ← 64px margem
   ◇◇   SINCRONOW · v1.0
                                              ← 96px respiro
                                              ← faixa Trama Construtiva (rapport A)
                                                full-width, 24% opacidade
   ◇◇

   Brand System
                                              ← display-xl 80 px Newsreader Light

   Estrutura Habitável
                                              ← display-md 48 px Newsreader Regular
                                              ← Areia Dourada 600 `#DD7302` (acento de presença, raro)

                                              ← respiro
   ◇                                          ← módulo 12px
                                              ← Versão 1.0 · Maio 2026
                                                JetBrains Mono Regular 14 px
                                                Petróleo 700 `#425462` (subtle)
                                                                            ╱
                                                                        ╱   ← chanfro 16px
─────────────────────────────────────────────  ← canto inferior-direito

4.2 Post Instagram quadrado (1080 × 1080) — editorial

─────────────────────────────────────────────
                                              ← 64px margem
   ◇ ─ ─ ─ ◇ ─ ─ ─ ◇                          ← cadência sutil
                                              ← respiro

   Antes de acelerar,                         ← headline-lg Newsreader Regular
   organize.                                    Tinta-Noite `#22292F`

                                              ← 64px respiro

   Empresas estão integrando ferramentas       ← body Mona Sans Regular
   de IA antes de ter base operacional         Tinta-Noite `#22292F`
   documentada.

                                              ← 96px respiro
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬                          ← viga 4px Areia Dourada 600 `#DD7302`
                                              ← respiro

   ◇  Sincronow                                ← símbolo + wordmark inline
─────────────────────────────────────────────  ← fundo Luz-Papel `#F8F6F4` sólido

4.3 Post Instagram vertical (1080 × 1350) — Reels cover / Story

─────────────────────────────────────────────
                                              ← fundo Tinta-Noite `#22292F` full-bleed
                                              ← Trama Construtiva sutil (rapport A)
                                                em Luz-Papel `#F8F6F4` @ 8% opacidade

   01                                         ← numerador 64px JetBrains Mono
                                                Areia Dourada 600 `#DD7302`

                                              ← respiro

   Diagnóstico                                ← display-md Newsreader Regular
   de Clareza                                   Luz-Papel `#F8F6F4`

                                              ← respiro

   ├──── 14 dias ────┤                         ← marca de cota técnica
                                                JetBrains Mono 12px
                                                Luz-Papel `#F8F6F4` @ 70%

                                              ← grande respiro

                                              ← viga 4px Areia Dourada 600 `#DD7302`
   ◇  Sincronow                                ← rodapé fino
─────────────────────────────────────────────

4.4 Hero web institucional (1920 × 800)

─────────────────────────────────────────────
  fundo Luz-Papel `#F8F6F4` com Tessellation Modular @ 18% opacidade
  em Tinta-Noite `#22292F` no terço direito da tela

  ────────────────────────────────────  ◇  ◇  ◇  ◇  ◇  ◇  ◇
                                                              ◇  ◇  ◇  ◇  ◇  ◇
  ┌──┐                                                    ◇  ◇  ◇  ◇  ◇  ◇  ◇
                                                              ◇  ◇  ◇  ◇  ◇  ◇
  Antes de acelerar,
  organize.                            ← display-lg 64px Newsreader Light

  Construímos a base operacional       ← body-lg 18px Mona Sans Regular
  que sua empresa precisa para crescer
  sem reinventar a roda toda semana.

  [Agendar Diagnóstico de Clareza →]   ← CTA Mona Sans Bold 16px

─────────────────────────────────────────────

4.5 Slide de apresentação (16:9, 1920 × 1080)

─────────────────────────────────────────────
  01 ─────────────────────────────────────────  ← numerador 32px + linha fina
                                                  full-width

                                                ← respiro 96px

  Diagnóstico de Clareza                       ← headline-lg 32px Newsreader
                                                 Tinta-Noite `#22292F`

  Mapeamos a operação atual e identificamos    ← body-lg 18px Mona Sans
  os pontos onde decisões se perdem.              Tinta-Noite `#22292F`


                                                ← respiro 64px

  ◇   Duração            ◇   Entregável        ← lista com módulos
       14 dias                Mapa visível            Mona Sans Regular
                              do gargalo
                                                                            ╱
                                                                        ╱   ← chanfro
─────────────────────────────────────────────
  fundo Luz-Papel `#F8F6F4` · sem rapport (slide já tem muito sistema)

4.6 Cartão de visita (85 × 55 mm)

─────────────────────────────────────────────
  FRENTE (Luz-Papel `#F8F6F4` sólido)

  ◇   Sincronow              ← assinatura horizontal compacta
                               (24mm width, ver Briefing Assinatura)


  Construímos a base.        ← descritor body-sm 14px Mona Sans Regular

                                                                  ╱
                                                              ╱   ← chanfro 4mm
─────────────────────────────────────────────
  VERSO (Tinta-Noite `#22292F` sólido)

  Clarisse Pinheiro          ← Mona Sans Semibold 14px Luz-Papel `#F8F6F4`
  Fundadora · Diretora

  ─────                       ← linha fina Luz-Papel @ 40%

  clarisse@sincronow.com.br  ← Mona Sans Regular 11px Luz-Papel @ 80%
  +55 11 99000-0000

                              ← Trama Construtiva @ 6% Luz-Papel
                                em faixa lateral direita
─────────────────────────────────────────────

4.7 Separador de seção em documento longo

─────────────────────────────────────────────
                                              ← respiro 128px

   ▬▬▬▬▬▬▬▬                                  ← viga curta 4px Areia Dourada 600 `#DD7302`
                                                comprimento 96px

                                              ← respiro 32px

   Camada 02                                  ← numerador 24px JetBrains Mono
   Posicionamento                             ← headline-md 24px Mona Sans Semibold

                                              ← respiro 96px
─────────────────────────────────────────────

4.8 Rodapé institucional (web ou impresso)

─────────────────────────────────────────────
                                              ← linha fina full-width
                                                Tinta-Noite `#22292F` @ 30%

                                              ← respiro 48px

   ◇  SINCRONOW · CONSTRUÍDO PELA BASE        ← selo institucional
                                                Mona Sans Medium 12px UPPERCASE
                                                tracking +80%

                                              ← respiro 16px

   ├──── v1.0 · Maio 2026 ────┤                ← marca de cota
                                                JetBrains Mono 10px
─────────────────────────────────────────────

---

5. Texturas como assets reais

As Diretrizes listaram texturas aceitas (papel craft, algodão, sombra natural). Esta seção transforma cada uma em asset reproduzível com especificação de arquivo, parâmetros de aplicação e biblioteca a desenvolver.

5.1 Papel craft (grão sutil)

5.2 Papel de algodão (grão fino)

5.3 Sombra natural projetada (recipe para fotografia)

Não é asset estático — é receita de iluminação para fotografia.

5.4 Trama tipográfica densa

Não é asset — é resultado de composição tipográfica. Texto longo composto em alta densidade cria sua própria textura visual.

5.5 Mancha de tinta (uso especialíssimo)

Asset raríssimo. Usar apenas em capa de Manifesto físico ou peça única editorial.

5.6 Texturas rejeitadas (lembrete)

❌ Noise digital pós-aplicado (Photoshop "Add Noise") ❌ Texturas 3D fotorrealistas ❌ Texturas de tecido fake ❌ Mármore, foil digital, holographic, iridescent ❌ Glassmorphism, blur, glow, bokeh

---

6. Repertório cultural ampliado

O Pilar 4 ancorou os grafismos em arquitetura modernista brasileira (Lina Bo Bardi, Paulo Mendes da Rocha). Esta seção amplia o vocabulário cultural para outros movimentos brasileiros que compartilham a mesma DNA estrutural — abrindo repertório para o designer sem diluir a marca.

6.1 Concretismo Brasileiro

6.2 Gráfico institucional brasileiro

6.3 Desenho técnico de arquitetura

6.4 Tradições populares brasileiras (uso cuidadoso)

A marca pode dialogar com tradições populares sem citá-las literalmente:

Regra: as tradições populares contribuem com lógica estrutural, nunca com estilização visual literal. A marca não é regionalista.

6.5 Repertório rejeitado (lembrete)

❌ Art Nouveau, Art Déco — pesos ornamentais incompatíveis ❌ Bauhaus literal (sai geometria + cor primária) — vira escola de design, não marca brasileira ❌ Tribal genérico, étnico decorativo — apropriação rasa ❌ Memphis (1980s) — território antagônico ❌ Vaporwave, retrowave, Y2K — anti-brasilidade e anti-estrutura ❌ Cottagecore, slow living estilizado — território C dos Moodboards explicitamente proibiu

---

7. Tokens de implementação (CSS/Figma)

7.1 CSS — componentes reproduzíveis

:root {
  /* Pesos de linha */
  --line-viga: 4px;
  --line-viga-tablet: 3px;
  --line-fina: 1px;
  --line-fina-thin: 0.5px;
 
  /* Tamanhos do módulo ◇ */
  --modulo-xs: 8px;
  --modulo-sm: 12px;
  --modulo-md: 16px;
  --modulo-lg: 24px;
  --modulo-xl: 32px;
 
  /* Chanfros */
  --chanfro-sm: 4px;
  --chanfro-md: 8px;
  --chanfro-lg: 16px;
 
  /* Cores oficiais para grafismos — v1.1 (refinamento cromático 2026-05-26) */
  --grafismo-primary: #22292F;            /* Tinta-Noite (Petróleo 950) */
  --grafismo-accent: #DD7302;             /* Areia Dourada 600 — acento raro */
  --grafismo-ui: #425462;                 /* Petróleo 700 — UI cotidiano, links */
  --grafismo-ui-hover: #394753;           /* Petróleo 800 — hover */
  --grafismo-rare: #4E3DBE;               /* Violeta-Sincronow — raridade governada */
  --grafismo-subtle: rgba(34, 41, 47, 0.30);
  --grafismo-grid: rgba(34, 41, 47, 0.08);
 
  /* Surfaces (Surface Layering v1.1) */
  --surface-page: #F8F6F4;                /* Luz-Papel — página */
  --surface-sidebar: #EDEAE6;             /* Penumbra-Papel — sidebar */
  --surface-card: #FDFCFB;                /* Crista-Papel — card */
  --surface-input: #FFFFFF;               /* uso restrito: input/modal */
}
 
/* VIGA HORIZONTAL */
.viga {
  width: 100%;
  height: var(--line-viga);
  background: var(--grafismo-primary);
  border: none;
}
.viga--areia { background: var(--grafismo-accent); }   /* Areia Dourada — acento raro */
.viga--ui { background: var(--grafismo-ui); }           /* Petróleo — UI cotidiano */
.viga--curta { width: 96px; }
.viga--media { width: 50%; }
 
/* LINHA FINA */
.linha-fina {
  width: 100%;
  height: var(--line-fina);
  background: var(--grafismo-subtle);
  border: none;
}
 
/* SEPARADOR EM CADÊNCIA */
.cadencia {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cadencia::before,
.cadencia::after,
.cadencia-mod {
  content: '';
  width: var(--modulo-sm);
  height: var(--modulo-sm);
  transform: rotate(45deg);
  background: var(--grafismo-primary);
  display: inline-block;
}
 
/* MARCADOR MODULAR ◇ */
.modulo {
  width: var(--modulo-md);
  height: var(--modulo-md);
  background: var(--grafismo-primary);
  transform: rotate(45deg);
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--modulo-md);
}
.modulo--outline {
  background: transparent;
  border: 2px solid var(--grafismo-primary);
}
.modulo--areia { background: var(--grafismo-accent); }   /* Areia Dourada — acento raro */
.modulo--ui { background: var(--grafismo-ui); }           /* Petróleo — UI cotidiano */
.modulo--xs { width: var(--modulo-xs); height: var(--modulo-xs); }
.modulo--lg { width: var(--modulo-lg); height: var(--modulo-lg); }
 
/* NUMERADOR DE CAMADA */
.numerador {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--grafismo-primary);   /* Tinta-Noite #22292F */
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.numerador--lg { font-size: 32px; }
.numerador--accent { color: var(--grafismo-accent); }   /* Areia Dourada — raro */
.numerador--subtle { color: var(--grafismo-ui); }       /* Petróleo 700 — UI */
 
/* SETA TÉCNICA */
.seta::before {
  content: '\2192'; /* → */
  font-family: var(--font-text);
  display: inline-block;
  margin: 0 0.5em;
}
 
/* CHANFRO (clip-path) */
.chanfro {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - var(--chanfro-md)),
    calc(100% - var(--chanfro-md)) 100%,
    0% 100%
  );
}
.chanfro--lg {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - var(--chanfro-lg)),
    calc(100% - var(--chanfro-lg)) 100%,
    0% 100%
  );
}
 
/* MARCA DE COTA TÉCNICA */
.cota {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(34, 41, 47, 0.7);   /* Tinta-Noite #22292F @ 70% */
  gap: 4px;
}
.cota::before,
.cota::after {
  content: '';
  width: 1px;
  height: 8px;
  background: rgba(34, 41, 47, 0.6);
}
.cota-linha {
  flex: 1;
  height: 1px;
  background: rgba(34, 41, 47, 0.6);
  margin: 0 4px;
}
/* Variante UI/produto — Petróleo sólido em vez de Tinta @ 60% */
.cota--ui { color: var(--grafismo-ui); }
.cota--ui::before,
.cota--ui::after,
.cota--ui .cota-linha { background: var(--grafismo-ui); }
 
/* RAPPORT A — TRAMA CONSTRUTIVA (background) */
.rapport-trama {
  background-image:
    linear-gradient(to right, var(--grafismo-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grafismo-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}
 
/* RAPPORT B — TESSELLATION MODULAR */
.rapport-tessellation {
  background-image:
    radial-gradient(
      circle at center,
      var(--grafismo-grid) 4px,
      transparent 4.5px
    );
  background-size: 48px 36px;
  background-position: 0 0, 24px 18px;
}
 
/* GRID EDITORIAL VISÍVEL (baseline grid) */
.baseline-grid {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 23px,
    var(--grafismo-grid) 23px,
    var(--grafismo-grid) 24px
  );
}

7.2 Figma — components a criar

Criar Component Library "Sincronow Grafismos" com:

Vigas/
├── horizontal-full
├── horizontal-curta-96
├── horizontal-media-50
└── horizontal-inverso (Luz sobre Tinta)

Linhas/
├── linha-fina-full
├── linha-fina-curta
└── linha-fina-cadencia

Módulos ◇/
├── modulo-xs-8 (sólido / outline / terra)
├── modulo-sm-12 (sólido / outline / terra)
├── modulo-md-16 (sólido / outline / terra)
├── modulo-lg-24 (sólido / outline / terra)
└── modulo-xl-32 (sólido / outline / terra)

Separadores/
├── cadencia-3-mod
├── cadencia-5-mod
└── viga-com-modulo

Cotas/
├── cota-horizontal-64
├── cota-horizontal-128
├── cota-vertical-96
└── cota-com-chamada

Numeradores/
├── camada-inline-16
├── camada-display-32
└── camada-monumental-64

Chanfros (frames com clip)/
├── chanfro-inferior-direito-sm
├── chanfro-inferior-direito-md
└── chanfro-inferior-direito-lg

Rapports/
├── trama-construtiva-32
├── tessellation-modular-48
└── cota-tecnica-rapport

7.3 SVG exports (assets a gerar)

Pasta Diretrizes/Grafismos/svg/ deve conter:

viga-horizontal-full.svg
viga-horizontal-curta-96.svg
linha-fina-full.svg
modulo-12.svg
modulo-16.svg
modulo-24.svg
modulo-32.svg
cota-horizontal-64.svg
cota-vertical-96.svg
seta-tecnica.svg
trama-construtiva-tile-32.svg (tileable)
tessellation-modular-tile-48.svg (tileable)
cota-rapport-tile.svg (tileable)
papel-craft-tile-512.svg (tileable)
papel-algodao-tile-1024.svg (tileable)
mancha-tinta-1.svg (asset único, não tileable)

---

8. Checklist de validação para qualquer peça

PRINCÍPIO ORGANIZADOR
[ ] Cada grafismo presente declara estrutura ou organiza informação?
[ ] Há algum elemento decorativo (que poderia ser substituído sem perda)? Se sim, remover.

ELEMENTOS CANÔNICOS
[ ] Cores e tamanhos respeitam as specs da §2?
[ ] Cantos: retos por padrão; chanfro somente em 1 canto se aplicado?
[ ] Marcador ◇ alinhado opticamente (não top/bottom)?
[ ] Numerador de camada usa JetBrains Mono e formato 2-dígitos?

RAPPORT (se houver)
[ ] Apenas 1 rapport na peça?
[ ] Opacidade ≤ 25%?
[ ] Não atrás de texto longo?
[ ] Não atrás de fotografia?

MARCA DE COTA (se houver)
[ ] A cota tem referente real (não decorativa)?
[ ] Número correto e em JetBrains Mono?
[ ] Posicionada corretamente (acima da linha em horizontal)?

CHANFRO (se houver)
[ ] Apenas 1 canto chanfrado?
[ ] Canto inferior-direito ou superior-direito apenas?
[ ] Profundidade proporcional à peça (§2.8)?

TEXTURAS
[ ] Apenas texturas aceitas (§5.6)?
[ ] Opacidade adequada (15-25% típico)?
[ ] Blend mode correto?

REPORTOIRE
[ ] Não há citação literal de Bauhaus, Art Déco, Memphis, vaporwave?
[ ] Não há "regionalismo cliché" (cordel rendered, azulejo literal)?
[ ] As inspirações culturais são estruturais, não estilizadas?

GRID E ESPAÇAMENTO
[ ] Margens generosas (≥1 coluna no grid 12)?
[ ] Separadores de respiro em múltiplos de 8 px?
[ ] Não há horror vacui?

ANIMAÇÃO (se houver)
[ ] Easing: ease-out (não ease-in-out, não spring)?
[ ] Duração: 300-500 ms?
[ ] Sem bounce, spin, flicker, parallax exagerado?

---

9. Decisões em aberto (para v1.1+)

• Biblioteca de assets SVG real — a §5 e §7.3 listam arquivos a gerar. Executar a produção física desses arquivos em sprint dedicado.
• Pattern "cordel" reinterpretado — testar versão estrutural (não estilizada) de diagramação de cordel como composição editorial para post de manifesto. Risco de regionalismo — validar caso a caso.
• Variantes do chanfro — testar chanfro com profundidade dupla (escalonado) em capa de Brand System física, como referência a detalhe construtivo de Lina Bo Bardi (SESC Pompeia).
• Animação em rapport — testar Trama Construtiva com leve animação de "construção" (linhas aparecem da esquerda para direita, depois de cima para baixo) em vídeo de abertura. Ease-out 800 ms — exceção ao 500 ms padrão por gravidade.
• Cota em vídeo — marca de cota técnica animada (linha cresce, número aparece) como recurso de lower-third em vídeo institucional. Definir easing e timing.
• Tessellation modular em foil — testar rapport B em foil dourado para capa Brand System física. Possível elemento "uau" institucional.
• Sistema de ícones proprietários — os 7 ícones planejados para v1.1 (Diagnóstico, Brand System, Company Brain, Prompt Mestre, Matriz de Mensagens, Documento da Verdade, Método SNCRO) devem integrar-se com este sistema — losangos, vigas, módulos como vocabulário compartilhado.

---

Documento operacional. Versionar ao introduzir novos elementos, criar biblioteca de SVG ou expandir composições canônicas. Próxima revisão prevista: após produção da primeira capa de Brand System física (validar rapport, chanfro, cota), e após primeira peça em vídeo institucional (validar animação).

---

Mudanças desde v1.0

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

• Tokens CSS (§7.1) reescritos com nova paleta: --grafismo-primary #22292F (Tinta-Noite); --grafismo-accent #DD7302 (Areia Dourada 600 — substitui Terra-Ocre); novos --grafismo-ui #425462 (Petróleo 700) e --grafismo-ui-hover #394753 (Petróleo 800) para funções cotidianas; --grafismo-rare #4E3DBE (Violeta-Sincronow) reposicionado como raridade governada. Surfaces adicionadas: --surface-page #F8F6F4, --surface-sidebar #EDEAE6, --surface-card #FDFCFB, --surface-input #FFFFFF.
• Classes utilitárias renomeadas: .viga--terra → .viga--areia + .viga--ui; .modulo--terra → .modulo--areia + .modulo--ui. Adicionados .numerador--subtle e .cota--ui.
• Numerador (§2.6): default mudou de Tinta-Carvão #1A1A1A para Tinta-Noite #22292F; "subtle" agora é Petróleo 700 em vez de Tinta-Noite @ 60%.
• 3 rapports (§1.2): referências de cor atualizadas para Tinta-Noite #22292F sobre Luz-Papel #F8F6F4; em Rapport B, Terra-Ocre substituída por Areia Dourada 600 (uso raríssimo); cor de cota no Rapport C aceita Petróleo 700 sólido para UI.
• 12 elementos canônicos (§2): Viga, Linha fina, Marcador modular ◇, Numerador, Grid editorial e Marca de Cota Técnica atualizados com nova paleta — Tinta-Noite estrutural, Areia Dourada (acento raro), Petróleo (UI cotidiano), Penumbra-Papel para grids.
• 8 composições full-bleed (§4): todas as 8 atualizadas. Substituídas todas as menções a "Tinta-Carvão" e "Terra-Ocre" e "Luz-Bruta". Capa de Brand System usa Areia Dourada para "Estrutura Habitável" e Petróleo 700 para versão/data. Fundo Luz-Papel passa a referenciar #F8F6F4. Faixa lateral do cartão de visita mantém Trama Construtiva.
• Texturas (§5): papel craft sobre Luz-Papel/Penumbra-Papel/Crista-Papel; trama tipográfica com Tinta-Noite; mancha de tinta substituiu "Terra-Barro" por Areia Dourada 950 #461902.
• Petróleo 300 #B0BFC9 adicionado como variante sólida de linha fina para UI funcional.
• Pendências para revisão humana: considerar se "Linha fina @ 30% Tinta-Noite" e "linha de cota @ 60%" devem migrar 100% para Petróleo sólido em peças não-institucionais — atualmente convivem ambos no documento.