Visual Studies
& Editorial
Typography

Laboratório visual do ecossistema. Cada study documenta decisões tipográficas, cromáticas e compositivas para formatos específicos. O sistema editorial dual-stack governa a separação entre produto e conteúdo.

Study 01

Carousel Capa

Override visual para slides de capa em carousels. 7 paletas de produto, geometria 3D, headlines com ênfase, fragmentos ASCII e histórico de iteração.

Paletas por Produto

MSCS Chumbo Puro

#0A0A0E

Headline

#6A6A6A

Emphasis

#A85A30

Rule

#A85A30 → #6A3818

Creative Oracle Gold Profundo

#0A0C10

Headline

#5E5545

Emphasis

#8A6A18

Rule

#8A6A18 → #5A4010

Fronteiristas Terra Neutra

#0A0C10

Headline

#5A5550

Emphasis

#8A7A62

Rule

#8A7A62 → #5A5040

Neuro Codex Frio Cognitivo

#0A0C10

Headline

#4A4460

Emphasis

#5A9AAA

Rule

#5A9AAA → #3A5A6A

Style Codex Rosa Estrutural

#0A0C10

Headline

#5B4C50

Emphasis

#9A6068

Rule

#9A6068 → #6A3A42

Design Codex Azul Arquitetural

#0A0C10

Headline

#4A5060

Emphasis

#5A7A9A

Rule

#5A7A9A → #3A4A6A

Execution Codex Laranja Operacional

#0A0C10

Headline

#5A5040

Emphasis

#9A7048

Rule

#9A7048 → #6A4828

Polígonos 3D por Produto

Tier	Produto	Geometria	Rotação (X/Y/Z)	FOV
Ecosystem	MSCS	Icosaedro	0.12 / 0.16 / 0.06	3.5
Ecosystem	Oracle	Möbius	0.12 / 0.18 / 0.04	3.5
Canal Editorial	Fronteiristas	Threshold	0.06 / 0.10 / 0.04	3.5
Codex	Design	Tensegrity	0.13 / 0.16 / 0.09	3.5
Codex	Style	Turbine	0.10 / 0.25 / 0.06	3.5
Codex	Neuro	Dendrítico	0.14 / 0.22 / 0.10	3.5
Codex	Execution	Gyroscope	0.12 / 0.18 / 0.08	3.5

Elementos de Layout

Info Strips

Barras superior e inferior com metadados. height: 20px, font-size: 5px, Space Mono uppercase.

Ghost Layers

Camadas semi-transparentes de wireframe no fundo. Opacidade 0.06–0.08, grid 20×20px.

Glitch Lines

Linhas horizontais de interferência. height: 1px, opacidade 0.03–0.07, posição aleatória.

Gradient Rule

Separador horizontal: linear-gradient(90deg, emphasis, rule-end 60%, transparent).

Edge Markers

Marcadores verticais na borda esquerda. width: 2px, gradiente vertical da emphasis para transparente.

Brand Watermark

Logo SVG posicionado bottom: 32px; right: 32px. Opacidade 0.06 da cor identity.

Tipografia Carousel Capa

Papel	Fonte	Tamanho	Peso	Tracking
Headline	Anton	72px	400	-0.02em
Subtitle	DM Sans	21px	400	normal
Tag / Kicker	Space Mono	11px	400	0.18em
Numeração	Anton	26px	400	-0.02em
Info Strip	Space Mono	5px	400	0.1em
Attribution	DM Sans	18px	700 italic	normal
Meta	Space Mono	10px	400	0.15em

Headlines por Produto

MSCS

Infraestrutura do Improviso

Arquitetura de presença criativa

Oracle

O Mapa Não É o Território

Navegação por padrões culturais

Fronteiristas

Quem Cruza Fronteiras

Conversas com quem opera nas margens

Neuro

Percepção É Infraestrutura

Engenharia de como o cérebro decide

Style

Estilo Não É Decoração

Sistema visual como linguagem estratégica

Design

Design É Protocolo

Arquitetura visual como sistema operacional

Execution

Entregar É Decidir

Ops criativo com previsibilidade

Fragmentos ASCII

MSCS

    /\
   /  \
  /    \
 /______\
 |  MS  |
 |______|

Oracle

  .---.
 / o o \
|  ___  |
 \_____/
  |___|

Fronteiristas

 ---+---
    |
----+----
    |
 ---+---

Neuro

  /===\
 | . . |
 |  ^  |
  \===/
   ||

Style

 +------+
 | :  : |
 | :  : |
 +------+
   STYL

Design

  [====]
  |    |
  | DS |
  |    |
  [====]

Execution

  >>>>>
  | EX |
  | EC |
  >>>>>
  -----

Histórico de Iteração

Versão	Mudança Principal	Status
`v1`	Conceito inicial com fundo sólido preto	Descartada
`v2`	Introdução da paleta Chumbo Quente	Descartada
`v3`	Grid wireframe + ghost layers	Descartada
`v4`	Paletas por produto (7 variações)	Descartada
`v5`	ASCII fragments + edge markers	Descartada
`v6`	Consolidação final — sistema atual	Ativa

Study 02

OFFF Story Factory

Template de stories para conteúdo editorial baseado no OFFF Barcelona. Formato 1080×1920, tipografia IBM Plex Sans + Libre Caslon Text (Typo B editorial), paleta Chumbo Puro.

MSCREATIVE.SYSTEMSSTORY FACTORY

Inteligência Ep. 014

O design não resolve. O design revela.

Sistemas criativos que funcionam não decoram — estruturam a forma como você vê o problema.

Marcel Serrano

Creative Systems Architect

1080×19209:16

Specs de Formato

Canvas	`1080 × 1920 px`
Aspect Ratio	`9:16`
Safe Zone Top	`120px`
Safe Zone Bottom	`160px`
Safe Zone Lateral	`64px`
Grid Overlay	`54 × 54px`, opacidade 0.025

Paleta — MSCS Chumbo Puro

#0A0A0E

Headline

#6A6A6A

Emphasis

#A85A30

Subtitle

rgba(130,130,130,0.4)

Tipografia OFFF

Papel	Fonte	Peso	Tamanho	Cor
Headline Sans	IBM Plex Sans	300	`80px`	#6A6A6A
Headline Serif `<em>`	Libre Caslon Text	400 italic	`92px`	#A85A30
Subtitle	IBM Plex Sans	300	`36px`	rgba(130,130,130,0.4)
Tag Accent	Space Mono	400	`22px`	#A85A30
Tag Ghost	Space Mono	400	`22px`	rgba(140,140,140,0.5)
Speaker Name	IBM Plex Sans	400	`22px`	rgba(130,130,130,0.4)
Speaker Role	Space Mono	400	`26px`	rgba(168,90,48,0.2)
Speaker Initials	Libre Caslon Text	italic	`44px`	#A85A30
Info Strip	Space Mono	400	`18px`	rgba(130,130,130,0.18)
ASCII Fragments	Space Mono	400	`16px`	rgba(168,90,48,0.035)

Tipografia por Tipo — Citação

Papel	Fonte	Tamanho	Cor
Quote PT-BR	Libre Caslon Text italic	`80px`	#6A6A6A
Quote Original	Libre Caslon Text italic	`36px`	rgba(106,106,106,0.35)
Quote Marks “	serif	`160px`	rgba(168,90,48,0.08)
Attribution	IBM Plex Sans 300	`22px`	rgba(130,130,130,0.3)
Attr Name	Space Mono 400	`22px`	#A85A30
Gloss	IBM Plex Sans 300	`34px`	rgba(130,130,130,0.4)

Tipografia por Tipo — Lista

Papel	Fonte	Tamanho	Cor
List Number	IBM Plex Sans 300	`36px`	rgba(168,90,48,0.25)
List Text	IBM Plex Sans 300	`38px`	#6A6A6A
List `<em>`	Libre Caslon Text italic	`42px`	#A85A30

Tipografia por Tipo — Framework

Papel	Fonte	Tamanho	Cor
Layer Label	Space Mono 400 uppercase	`24px`	rgba(130,130,130,0.4)
Layer Number	IBM Plex Sans 300	`36px`	rgba(130,130,130,0.25)
Layer Desc	IBM Plex Sans 300	`34px`	#6A6A6A
Layer Desc `<em>`	Libre Caslon Text italic	`34px`	#A85A30

Tipografia por Tipo — Infográfico

Papel	Fonte	Tamanho	Cor
Number Big	IBM Plex Sans 300	`200px`	#A85A30
Number Label	Space Mono 400 uppercase	`24px`	rgba(130,130,130,0.35)

7 Camadas Obrigatórias

Info Strip Top

Barra superior com brand + formato. height: 20px

Regras de Variação

Elemento	Pode Variar	Não Pode
Headline	Texto, posição da palavra em destaque	Fontes, sistema de ênfase (IBM Plex Sans + Libre Caslon Text)
Tags	Texto, quantidade (1–3)	Estilo visual, posicionamento
Speaker	Nome, role, iniciais	Layout do card, border radius
Palette	Nada	Cores são fixas por template
Grid	Nada	54×54px, opacidade 0.025
Icosaedro posição	Alternar quadrantes, nunca repetir consecutivo	Cor (sempre accent puro monocromático)
Icosaedro speeds	[0.05–0.12] por eixo	—
Glitch lines Y	±30px entre consecutivos	Cor (sempre accent)
ASCII conteúdo	Keyword contextual `▸ KEY.SYS ▸▸▸`	Fonte, cor, opacidade
Frase editorial top	Contextual e provocativa	Posição, fonte

Regras de Acento

Hierarquia de Tags: tag-accent → Speaker, conceito proprietário, framework nomeado (máx 1 por story). tag-ghost → MSCS, Codex, evento, série, metadados.

Tipo de Story	Tag Accent	Tag Ghost	Headline `<em>`
CITAÇÃO	Nome do autor	Série editorial	Keyword da citação
TESE PROPRIETÁRIA	Ghost Concept / conceito	MSCREATIVE.SYSTEMS™	Conceito focal
FRAMEWORK	Nome do framework	Codex de origem	Conceito-chave
INSIGHT	Nome do speaker	Evento + Key Insights	Palavra-tese (foco)
INFOGRÁFICO	Conceito / dado	Fonte do dado	Interpretação do número
LISTA	Tema / conceito	Série	Tese-veredicto

Regras de Idioma

PT-BR Default

Toda comunicação editorial em português brasileiro. Sem exceção para headlines e subtitles.

Citações Estrangeiras

PT-BR como versão principal (font maior). Original abaixo com peso visual reduzido: ~40% do tamanho, ~35% opacidade. Libre Caslon Text italic 22px, rgba(106,106,106,0.35).

Tags e Labels

Inglês permitido quando termo técnico ou proprietário (ex: Ghost Concept, Key Insights). Nomes próprios de frameworks mantidos no original.

Specs por Tipo de Story

Insight

Headline: IBM Plex Sans 300 80px + Libre Caslon Text italic 92px para . Subtitle: IBM Plex Sans 300 36px, rgba(130,130,130,0.4). Speaker card com iniciais 44px, nome 22px, role 26px.

Citação

Citação PT-BR: Libre Caslon Text italic 80px, cor #6A6A6A. Keywords em  accent. Quebra por  . Aspas decorativas: serif 160px, rgba(168,90,48,0.08). Atribuição: nome em accent 22px, restante rgba(130,130,130,0.3). Gloss: IBM Plex Sans 300 34px. Versão original: Libre Caslon Text italic 36px, rgba(106,106,106,0.35).

Framework Desconstruído

Layer labels: Space Mono 400 uppercase 24px, rgba(130,130,130,0.4). Layer numbers: IBM Plex Sans 300 36px, rgba(130,130,130,0.25). Descriptions: IBM Plex Sans 300 34px, #6A6A6A. Keyword em  accent (Libre Caslon Text italic 34px, #A85A30). Container: border rgba(168,90,48,0.06), bg rgba(168,90,48,0.015).

Lista

Número: IBM Plex Sans 300 36px, rgba(168,90,48,0.25). Min-width 40px. Texto: IBM Plex Sans 300 38px, #6A6A6A, line-height 1.4. Keyword em : Libre Caslon Text italic 42px, #A85A30.

Infográfico

Número grande: IBM Plex Sans 300 200px, #A85A30. Label: Space Mono 400 uppercase 24px, rgba(130,130,130,0.35). Failure Strip: grid de dots 16px (--ds-story-fail-dot-size).

Tese Proprietária

Segue tipografia base Headline (80px / 92px em) + Subtitle (36px). Tag accent: Ghost Concept ou conceito proprietário. Tag ghost: MSCREATIVE.SYSTEMS™. Headline  marca o conceito focal da tese.

Componentes Visuais

Failure Strip

Grid de dots para tipo INFOGRÁFICO. Dot size: 16px (--ds-story-fail-dot-size). Visualização de dados como padrão de pontos preenchidos vs vazios.

Spectrum Bar

Barra gradient horizontal para FRAMEWORK tipo espectro. Labels em Space Mono 22px (--ds-story-spectrum-label-size). Gradiente accent → transparente.

Number Row

Número grande (200px) + label lateral (24px uppercase) para INFOGRÁFICO. Número em accent #A85A30, label em rgba(130,130,130,0.35).

Study 03

Cormorant Garamond

Typo C — stack accent para peças que precisam de voz clássica. Drop caps, texto vertical, icosaedro centralizado. Uso restrito a contextos de alta solenidade.

A beleza está no sistema, não na superfície

Q Quando a estrutura é bonita, o resultado é inevitável. A tipografia clássica não decora — ela governa o ritmo visual.

Type Stack

Papel	Fonte	Peso	Uso
Headline	Cormorant Garamond	300	Títulos editoriais de alto impacto
Emphasis	Cormorant Garamond italic	600	Palavra-chave em destaque
Drop Cap	Cormorant Garamond	700	Primeira letra de parágrafo, 36px
Body Editorial	DM Sans	300	Texto corrido de apoio
Labels	Space Mono	400	Metadados e tags

Elementos Exclusivos

Rule Thin

Separador de 1px, cor rgba(168,90,48,0.12). Mais sutil que o gradient rule padrão.

Drop Cap

Cormorant 700, font-size: 36px, line-height: 0.8. Cor emphasis a 0.12 opacidade.

Vertical Text

writing-mode: vertical-rl. Cormorant italic 300, ancorado na borda esquerda. Decorativo.

Icosaedro Centralizado

Wireframe 3D centralizado no fundo. Opacidade 0.04. Rotação lenta. Nunca domina a composição.

Seção 14

Editorial Dual-Stack System

Duas famílias tipográficas coexistem no ecossistema. Produto usa Anton + DM Sans. Editorial usa IBM Plex Sans + Libre Caslon Text. Nunca misturar.

Product Stack — Typo A

Infraestrutura do Improviso

Existe uma diferença entre improvisar e ter infraestrutura de improviso. Uma é aposta. A outra é arquitetura.

Anton + DM Sans + Space Mono

Editorial Stack — Typo B

O design não resolve. O design revela.

Sistemas criativos que funcionam não decoram — estruturam a forma como você vê o problema antes de tentar resolvê-lo.

IBM Plex Sans + Libre Caslon Text + Space Mono

Type Stacks

Stack	Headline	Body	Label	Accent/Emphasis
`Produto (Typo A)`	Anton 400, ALL CAPS, -0.02em	DM Sans 400, 0.85 opacity	Space Mono 400, ALL CAPS, 0.2em	Cor emphasis do produto
`Editorial (Typo B)`	IBM Plex Sans 300, sentence case	IBM Plex Sans 300, `--ds-text-body` (color explicit)	Space Mono 400, ALL CAPS, 0.2em	Libre Caslon Text italic 400
`Accent (Typo C)`	Cormorant Garamond 300	DM Sans 300	Space Mono 400	Cormorant italic 600

Ajuste de Contraste — DEC-018 (2026-04-23)

A hierarquia tipográfica Editorial (Typo B) agora usa tokens de cor explícitos em vez de opacidade inline. Razão: opacidade sobre fundos escuros com múltiplas superfícies (bg-primary / bg-surface / bg-secondary) produz contraste imprevisível. Tokens de cor são fonte única da verdade.

Novos tokens: --ds-text-secondary (0.65 α) · --ds-text-muted (0.38 α, antes 0.5 α)

Amostras Vivas

Infraestrutura Criativa

Typo A — Anton + DM Sans

O design não resolve. O design revela.

Typo B — IBM Plex Sans + Libre Caslon Text

A beleza está no sistema

Typo C — Cormorant Garamond

Matriz de Roteamento

→

Carousel / Story Produto

Typo A — Product Stack

Anton + DM Sans + Space Mono

→

Story Editorial / OFFF

Typo B — Editorial Stack

IBM Plex Sans + Libre Caslon Text + Space Mono

→

Newsletter / Substack

Typo B ou Typo C

Depende do tom: institucional (B) ou manifesto (C)

→

Landing Page / Site

Typo A — Product Stack

Anton + DM Sans + Space Mono

→

Manifesto / Artigo Longo

Typo C — Accent Stack

Cormorant Garamond + DM Sans + Space Mono

CSS Tokens

CSS — Dual-Stack Tokens

/* Product Stack (Typo A) */
--ds-font-display:  'Anton', sans-serif;
--ds-font-body:     'DM Sans', sans-serif;
--ds-font-label:    'Space Mono', monospace;

/* Editorial Stack (Typo B) */
--ds-ed-font-headline:  'IBM Plex Sans', sans-serif;  /* wt 300 */
--ds-ed-font-emphasis:  'Libre Caslon Text', serif;    /* italic 400 */
--ds-ed-font-body:      'IBM Plex Sans', sans-serif;   /* wt 300 */
--ds-ed-font-label:     'Space Mono', monospace;

/* Accent Stack (Typo C) */
--ds-tc-font:           'Cormorant Garamond', serif;
/* Weights: 300 (headline) / 600 italic (emphasis) / 700 (drop cap) */

Don'ts

Don't

Anton + Libre Caslon no mesmo quadro

Product e Editorial não coexistem visualmente.

Don't

Cormorant em carousel padrão

Typo C é reservada para peças de alta solenidade.

Don't

IBM Plex Sans em ALL CAPS

Editorial nunca grita. Sentence case sempre.

Don't

Mais de um stack por peça

Cada peça usa exatamente um stack tipográfico.

Don't

Libre Caslon Text fora de  — fonte exclusiva de emphasis editorial

Fonte exclusiva do template Story Factory.

Don't

Substituir Space Mono por outro mono

Space Mono é o único monospace do ecossistema.

Seção 14.1

Formatos Editoriais

Especificações de canvas, safe zones e elementos especiais para cada formato editorial do ecossistema.

Specs por Formato

Formato	Dimensões	Ratio	Stack	Uso Principal
Story	`1080 × 1920`	9:16	Typo B (Editorial)	Instagram Stories, OFFF Factory
Carousel Slide	`1080 × 1080`	1:1	Typo A (Product)	Instagram Carousel
Carousel Cover	`1080 × 1080`	1:1	Typo A + Override	Slide de capa com Chumbo Quente
Newsletter Header	`1200 × 630`	~1.9:1	Typo B ou C	Substack header image
LinkedIn	`1200 × 627`	~1.9:1	Typo B (Editorial)	Posts LinkedIn
Substack Header	`1456 × 180`	~8:1	Typo B (Editorial)	Banner da publicação
OG Image	`1200 × 630`	~1.9:1	Typo A (Product)	Open Graph / social share

Safe Zones

Formato	Top	Bottom	Lateral	Nota
Story (9:16)	`120px`	`160px`	`64px`	Bottom maior por UI do Instagram
Carousel (1:1)	`80px`	`80px`	`64px`	Uniforme
Newsletter	`40px`	`40px`	`48px`	Margem compacta
LinkedIn	`48px`	`48px`	`56px`	Compatível com crop mobile
OG Image	`60px`	`60px`	`80px`	Prever crop de plataformas

Elementos Especiais

Speaker Card

Iniciais em Libre Caslon Text italic, 64×64px. Nome em IBM Plex Sans 400, role em Space Mono 4px. Border rgba(168,90,48,0.15), border-radius: 6px. Exclusivo de stories OFFF.

Pull Quote

Cormorant Garamond italic 600 para citação em destaque. border-left: 3px solid emphasis. Usado em newsletter e artigos longos (Typo C).

Kicker / Tag

Space Mono 11px, ALL CAPS, letter-spacing: 0.18em. Border 1px solid com opacidade 0.25 da cor emphasis. Presente em todos os formatos.

Badge

Space Mono 10px, ALL CAPS, letter-spacing: 0.2em. Background rgba(emphasis, 0.05), padding: 3px 10px. Classifica conteúdo por tipo (Inteligência, Análise, Manifesto).