Gover
nanç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

DO
Usar Fraunces ALL CAPS para headlines e nomes de produto. Aplicar font-variation-settings: "opsz" 144 em display e "opsz" 24 em editorial. letter-spacing: -0.02em.
DO
Usar Inter Tight 400/500/600/700 para body text. Pesos calibrados para UI de alta densidade.
DO
Usar IBM Plex Mono ALL CAPS com tracking 0.2em para labels, tiers e metadados.
DO
Aplicar grid 54×54px a 0.025 opacity em todas as superfícies escuras.
DO
Usar data-product attribute para ativar paleta (mscs, oracle, fronteiristas, neuro, style, design, execution).
DO
Manter gradient de background por produto. Nunca flat color — sempre linear-gradient(145deg).
DO
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 stack editorial (IBM Plex Sans + Libre Caslon Text + Space Mono). Fonte: EDITORIAL_TYPOGRAPHY_SYSTEM_V1 §9.

01EDITORIAL
Nunca usar Libre Caslon Text em parágrafos de leitura. Só emphasis, initials e pull quote.
02EDITORIAL
Nunca usar Anton em peças editoriais. Anton pertence ao stack de produto.
03EDITORIAL
Nunca usar IBM Plex Sans Bold (700+) em headlines editoriais. O peso é Light (300).
04EDITORIAL
Nunca usar DM Sans em peças editoriais. DM Sans pertence ao stack de produto.
05EDITORIAL
Nunca misturar os dois stacks no mesmo bloco visual. Exceções em §7.1 da spec editorial.
06EDITORIAL
Nunca usar Libre Caslon Text 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 Space Mono em texto corrido. Space Mono é apenas label, meta e info strip.
10EDITORIAL
Nunca criar nova paleta editorial. Chumbo Puro + Electric Orange é o único subsistema aprovado.
Seção 17

Stack Routing — Decision Tree

Fluxo de decisão para escolher entre Stack Produto e Stack Editorial. Três perguntas, zero ambiguidade.

A peça reconhece produto? (codex card, site UI, navegação, CTA)
SIM → Stack Produto (Fraunces + Inter Tight + IBM Plex Mono)
A peça carrega insight para leitura? (editorial, curadoria, atribuição, artigo)
SIM → Stack Editorial (IBM Plex Sans + Libre Caslon Text + Space Mono)
Ambos? (CTA de produto dentro de peça editorial, citação editorial no site)
Editorial envelopa · Produto marca o CTA
Mono codes são os conectores dos dois stacks. Stack Produto usa IBM Plex Mono; stack Editorial usa Space Mono. Quando um carousel editorial termina com CTA de produto (Fraunces), o info strip mono fecha a continuidade — embora as famílias sejam distintas, o papel (label, metadado, tech voice) é o mesmo.
Seção 18

Versionamento

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

VersãoDescrição
v1.0Fundação: Anton + DM Sans + Space Mono. Paleta base. Grid 54×54.
v1.1Adição de Chumbo Quente (gold accent system). Tokens de opacidade.
v1.2Sistema cromático por produto. data-product attributes.
v1.3Tipografia de labels refinada. Space Mono tracking padronizado (0.2em).
v2.0Pipeline de carousel. Story format 9:16. Hierarquia de contraste documentada.
v2.1Visual Studies (carousel capa, OFFF Story Factory). Cormorant Garamond accent stack.
v2.2Editorial Typography System V1 (IBM Plex Sans + Libre Caslon Text). Dual-stack.
v2.3Formatos editoriais (Story, Carousel, Substack, LinkedIn, Newsletter, OG).
v2.4Chumbo Puro + Electric Orange (paleta editorial). Ghost elements + ASCII frags.
v2.53D Geometries (codex wireframes). Identity assets padronizados.
v2.6Speaker card, pull quote, drop cap, vertical text — elementos editoriais especiais.
v2.7Safe zones e margens canônicas por formato. Clamp scale responsiva.
v2.8Stack routing formalizado. Decision tree produto vs editorial. Conector Space Mono.
v3.0Reestruturação completa: multi-page, design tokens unificados, code bank, dual-view, LLM guide.
v3.1MS 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.

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.

1
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.
2
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 <!-- EDITABLE CONTENT -->. Não altere estrutura ou classes.
3
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.
4
Routing tipográfico
Reconhecimento de produto → stack Produto (Fraunces + Inter Tight + IBM Plex Mono). Leitura editorial → stack Editorial (IBM Plex Sans + Libre Caslon Text + Space Mono). Nunca misture os dois stacks no mesmo bloco visual.
5
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.
6
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.
7
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.
Copiado!