Nexials NEXIALSAI ACADEMY
DARKGOLD
INSPIRATION
Moodboard
DESIGN SYSTEM//TYPOGRAPHY//TYPE SYSTEM 01
3 FAMILIES
SECTION 01 · TYPE SYSTEM

Typography

Clash Display dá a força aos títulos e ao wordmark — uma grotesca premium com cantos vivos. Manrope mantém o corpo limpo e legível. JetBrains Mono assina rótulos e tokens. Três vozes, um sistema.

Clash Display
DISPLAY · TÍTULOS · WORDMARK
Aa
A ponte entre curiosidade e execução · 0123456789
500 MEDIUM700 BOLD800 EXTRABOLD900 BLACK
Manrope
CORPO · UI
Aa

Um agente é um assistente que executa tarefas sozinho. No fim da aula você sai com algo montado, não com anotações soltas.

JetBrains Mono
RÓTULOS · TOKENS
Aa
MÓDULO 01 · AGENTES NA PRÁTICA
var(--gold) // #E8B84B
TYPE SCALE
DISPLAY / 80 / 900Execução
H1 / 48 / 800Título de seção
H2 / 28 / 700Subtítulo destacado
BODY / 18 / 400Texto de leitura corrida e explicações.
SMALL / 14 / 500Legendas e textos de apoio.
LABEL / 11 / MONORÓTULO MONOESPAÇADO
REGRAS DE USO · QUANDO USAR CADA FAMÍLIA
Clash Display
Use em: títulos (≥28px), wordmark, números de destaque, frases curtas de impacto.

Nunca em: texto corrido, parágrafos, legendas, ou tamanhos abaixo de 20px — perde legibilidade.
Manrope
Use em: todo corpo de texto, parágrafos, UI, botões, formulários, listas (14–18px).

Nunca em: títulos enormes — não tem a personalidade do display. Acima de 32px, troque por Clash.
JetBrains Mono
Use em: rótulos, tokens, código, metadados, breadcrumbs técnicos — sempre CAIXA ALTA + tracking 0.2em.

Nunca em: texto de leitura ou títulos. É tempero, não prato principal.
ESPECIFICAÇÕES · LINE-HEIGHT & TRACKING
ESTILOSIZELINE-HTRACKWEIGHT
Display80px0.92-0.02em700
H148px1.0-0.02em700
H228px1.1-0.01em600
Body16-18px1.70400
Label mono11px1.00.2em500

Regra de ouro: quanto maior o texto, mais apertado o line-height e o tracking. Display respira com line-height 0.92 e tracking negativo; corpo precisa de 1.7 para leitura confortável no escuro.

DO / DON'T
FAÇA
Da curiosidade
à execução

Display no título, Manrope no corpo. Hierarquia clara, contraste forte.

NÃO FAÇA
DA CURIOSIDADE À EXECUÇÃO

Mono em título longo, display no corpo. Cansa a leitura e quebra a hierarquia.

CÓDIGO PRONTO
/* import + tokens */
--font-display: 'Clash Display', sans-serif;
--font-body: 'Manrope', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
h1 { font:700 48px/1 var(--font-display); letter-spacing:-.02em; }
p { font:400 17px/1.7 var(--font-body); color:#9B978C; }
.label { font:500 11px/1 var(--font-mono); letter-spacing:.2em; text-transform:uppercase; }