Governança

Regras de uso, restrições operacionais e histórico de versões do Design System. Tudo que não é permitido explicitamente é proibido. A consistência não é sugestão — é protocolo.

Seção 15

Do's & Don'ts — Product Stack

Regras absolutas para o stack de produto (Fraunces + Inter Tight + IBM Plex Mono — Post-Digital Hybrid, DEC-004). Violação invalida a peça.

DO

Usar Fraunces em sentence case para headlines e nomes de produto (DEC-023). Aplicar font-variation-settings: "opsz" 144 em display e "opsz" 24 em editorial. letter-spacing: -0.02em.

Usar Inter Tight 400/500/600/700 para body text. Pesos calibrados para UI de alta densidade.

Usar IBM Plex Mono em sentence case (tracking 0.04em) para labels, tiers e metadados. ALL CAPS com tracking largo só em kickers que abrem seção, card ou página (DEC-023).

Aplicar grid 54×54px a 0.025 opacity em todas as superfícies escuras.

Usar data-product attribute para ativar paleta (mscs, oracle, fronteiristas, neuro, style, design, execution).

Manter gradient de background por produto. Nunca flat color — sempre linear-gradient(145deg).

Wireframe 3D sempre monocromático — ambos os stops (c1 e c2) usam a mesma cor emphasis do produto. Study E aprovado.

DON'T

Don't

Nunca usar branco puro (#FFFFFF). O texto mais claro é --ds-text-primary (#B2A898).

Don't

Nunca usar gradiente duo-tone no wireframe (accent → accent-dark). Descartado em favor de accent puro monocromático.

Don't

Nunca usar glow/shadowBlur no wireframe. Zero efeito luminoso — reservado para estudos futuros.

Don't

Nunca usar preto puro (#000000). Background mínimo é --ds-bg-primary (#0A0C10).

Don't

Nunca usar emoji, fotografia ou ilustração. O sistema é tipográfico + geométrico.

Don't

Nunca usar border-radius maior que 4px. Máximo é --ds-radius-md (4px).

Don't

Nunca omitir a textura de grid em superfícies escuras. É assinatura de sistema.

Don't

Nunca usar Fraunces sem font-variation-settings: "opsz" N. Sem isso a variable font cai no default e perde warmth. Display: opsz 144. Editorial: opsz 24. Body: opsz 12.

Seção 16

Editorial Don'ts

Restrições do registro editorial (Fraunces opsz 24–36 + Inter Tight + IBM Plex Mono — DEC-024). Fonte: EDITORIAL_TYPOGRAPHY_SYSTEM_V1 §9 (superseded por DEC-024).

01Editorial

Nunca usar Fraunces itálico (ênfase) em parágrafos de leitura. Só emphasis, initials e pull quote.

02Editorial

Nunca usar o registro de produto (opsz 144, wght 700–900) em peça editorial. Editorial recua para opsz 24–36, wght 340–400.

03Editorial

Nunca usar Fraunces pesado (700+) em headline editorial. O peso editorial é 340–400 (quieto).

04Editorial

Nunca usar Inter Tight para ênfase. Ênfase é sempre Fraunces itálico.

05Editorial

Nunca misturar os dois registros (produto/editorial) no mesmo bloco sem hierarquia. Exceções em §7.1 da spec editorial.

06Editorial

Nunca usar Fraunces de ênfase sem itálico. Exceção única: drop cap (§6.4).

07Editorial

Nunca compensar fraqueza de copy com escala. O impacto vem do contraste peso/estilo, não tamanho.

08Editorial

Nunca alterar o letter-spacing de headline. -0.02em é canônico e imutável.

09Editorial

Nunca usar IBM Plex Mono em texto corrido. IBM Plex Mono é apenas label, meta e info strip.

10Editorial

Nunca criar nova paleta editorial. Chumbo Puro + Electric Orange é o único subsistema aprovado.

Seção 17

Registro Tipográfico — Decision Tree

Fraunces governa os dois registros (DEC-024). A decisão não é mais de família — é de registro óptico: produto (impacto) vs editorial (quieto). Três perguntas, zero ambiguidade.

A peça reconhece produto? (codex card, site UI, navegação, CTA)

Sim → Registro Produto — Fraunces opsz 144, wght 700–900 (impacto)

A peça carrega insight para leitura? (editorial, curadoria, atribuição, artigo)

Sim → Registro Editorial — Fraunces opsz 24–36, wght 340–400 (quieto), ênfase em Fraunces itálico

Ambos? (CTA de produto dentro de peça editorial, citação editorial no site)

Editorial envelopa · Produto marca o CTA — mesma Fraunces, registros distintos

IBM Plex Mono é o conector único dos dois registros. Inter Tight é o corpo universal; IBM Plex Mono é o único monoespaçado em ambos os registros. Quando um carousel editorial termina com CTA de produto, o info strip mono fecha a continuidade — mesma família, mesmo papel (label, metadado, tech voice).

Seção 18

Versionamento

Histórico completo de evolução do Design System. Cada versão é imutável após publicação.

Versão	Descrição
v1.0	Fundação: Anton + DM Sans + Space Mono. Paleta base. Grid 54×54.
v1.1	Adição de Chumbo Quente (gold accent system). Tokens de opacidade.
v1.2	Sistema cromático por produto. data-product attributes.
v1.3	Tipografia de labels refinada. Space Mono tracking padronizado (0.2em).
v2.0	Pipeline de carousel. Story format 9:16. Hierarquia de contraste documentada.
v2.1	Visual Studies (carousel capa, OFFF Story Factory). Cormorant Garamond accent stack.
v2.2	Editorial Typography System V1 (IBM Plex Sans + Libre Caslon Text). Dual-stack.
v2.3	Formatos editoriais (Story, Carousel, Substack, LinkedIn, Newsletter, OG).
v2.4	Chumbo Puro + Electric Orange (paleta editorial). Ghost elements + ASCII frags.
v2.5	3D Geometries (codex wireframes). Identity assets padronizados.
v2.6	Speaker card, pull quote, drop cap, vertical text — elementos editoriais especiais.
v2.7	Safe zones e margens canônicas por formato. Clamp scale responsiva.
v2.8	Stack routing formalizado. Decision tree produto vs editorial. Conector Space Mono.
v3.0	Reestruturação completa: multi-page, design tokens unificados, code bank, dual-view, LLM guide.
v3.1	MS Midnight palette (DEC-001) + Typo A Post-Digital Hybrid (DEC-004). Gold → Midnight (#A89D80 / #756750); Anton/DM Sans/Space Mono → Fraunces + Inter Tight + IBM Plex Mono. Gold reservado como cerimonial.
v3.2	Fraunces unificado (DEC-024): Fraunces governa headline e ênfase nos dois registros via opsz. Typo B (IBM Plex Sans + Libre Caslon Text + Space Mono) retirado; Inter Tight vira corpo universal; IBM Plex Mono vira o único monoespaçado. Cormorant (Typo C) reservada a manifesto/longform. Caixa intocada (DEC-023).

Próximas iterações: motion tokens, dark/light mode editorial, component library exportada, Figma sync automático.

Seção 19

LLM Usage Guide

Instruções para agentes de IA consumirem este Design System. Leia nesta ordem. Siga sem desvio.

Leia os tokens primeiro

Abra css/tokens.css e carregue todos os design tokens. Esse arquivo é o single source of truth — todas as cores, fontes, espaçamentos e escalas estão lá. Não invente valores.

Para gerar um carousel

Copie o template de formats.html (Code Bank view). Altere o atributo data-product para o produto desejado. Edite apenas o conteúdo entre os marcadores . Não altere estrutura ou classes.

Para trocar paleta de produto

Altere data-product="mscs" para qualquer um dos 7 produtos: mscs, oracle, fronteiristas, neuro, style, design, execution. As variáveis --p-* se ajustam automaticamente.

Routing tipográfico

Fraunces governa os dois registros (DEC-024). Reconhecimento de produto → registro Produto (Fraunces opsz 144 / wght 700–900 + Inter Tight + IBM Plex Mono). Leitura editorial → registro Editorial (Fraunces opsz 24–36 / wght 340–400, ênfase em Fraunces italic, + Inter Tight + IBM Plex Mono). Nunca misture os dois registros no mesmo bloco sem hierarquia.

Templates são self-contained

Cada template é HTML completo — sem dependências além de Google Fonts. Copie, edite conteúdo e abra no navegador. Sem build, bundler ou framework.

Grid obrigatório

Grid 54×54px a rgba(255,255,255, 0.025) é obrigatório em TODAS as superfícies escuras. Omiti-lo quebra a assinatura visual.

Restrições absolutas

Nunca usar emoji. Nunca usar fotografia. Nunca usar ilustração. Nunca usar branco puro (#FFFFFF) ou preto puro (#000000). Nunca inventar cores fora dos tokens. Nunca alterar letter-spacing canônico. O sistema é tipográfico + geométrico.

Regra zero: se um token existe em css/tokens.css, use-o. Se não existe, não invente — consulte o Design System. A consistência é mais importante que a criatividade. Design não é preferência — é protocolo.