AUTH.ONE · DESIGN SYSTEM NOIR EDITORIAL · v0.1 BLOCO 02 / 03 · TYPOGRAPHY SYSTEM

Typography System — como os tokens viram voz.

Hierarquia aplicada, ritmo vertical, e 8 regras contextuais que fazem a tipografia soar como AUTH.ONE e não como qualquer agência com Inter.

2.1

Hero composition

Anatomia do hero principal. Ordem fixa: eyebrowdisplay-xlbody-lctas. Ênfase bifurcada no display — palavra-chave em cream, resto em ink-500.

— Preview: Hero /home
Infraestrutura estratégica de presença digital

Authenticity leads to authority.

Construímos presença digital para empresas que operam com ambição — do posicionamento estratégico à solução integrada de marketing, com IA aplicada em cada camada.

2.2

Ênfase bifurcada

A mecânica mais característica. Em displays e headings, uma ou duas palavras ficam em cream (full) e o resto em ink-500 (muted). Quebra o bloco monolítico e cria leitura acentuada. Nunca usar em body — só em títulos.

02 · MÉTODO ALTA

A autoridade se constrói em silêncio.

4 pilares, 1 trajetória: Clareza de Essência, Comunicação de Autoridade, Estética Estratégica, Consolidação de Presença.

Quando usarAplicação
Display XL / Display L / H1 / H2 em abertura de sessão ou hero — sempre. A palavra-chave é o conceito-marca (ex: "authority", "silêncio", "estratégica"). O muted carrega verbo/conectivo ("leads to", "se constrói", "é").
Quando NÃO usarExceção
Nunca em body (vira ruído). Nunca em eyebrow, caption ou dados. Nunca em dois níveis seguidos — só um heading por section usa a mecânica.
2.3

Sistema de eyebrow

3 variantes. Cada uma marca um tipo de contexto — index numérico, label temático ou marker simbólico.

Variante APill + marker
Infraestrutura estratégica
Uso em hero e pages-opener. Pill com border-strong + marker ◆ (diamond sólido — assinatura AUTH.ONE, substitui o ✦ comum).
Variante BIndex numérico
02 · MÉTODO ALTA
Uso em section-opener dentro de uma page. Numeral pad "01, 02, 03..." + separator · + label em uppercase. Família mono (JetBrains Mono) para contraste tipográfico pontual.
Variante CLabel simples
Ecossistema de serviços
Uso em sub-blocks e cards. Sem pill, apenas tracking agressivo + marker. Leve, não compete com heading.
2.4

Editorial body

Como texto longo se comporta. line-height: 1.7 em body-l dentro de editorial (mais respiração). Bold no body vira cream, não muda peso — peso só em títulos.

Posicionamento

Nada de soluções genéricas.

Aqui o marketing é feito sob medida. Desenhamos infraestrutura estratégica para marcas que querem presença digital de verdade — não performance efêmera. Nosso trabalho começa com clareza de essência e termina com consolidação de presença, passando por cada camada do Método ALTA.

A autoridade não se pede. Se constrói. Em silêncio, com rigor, repertório e execução. Conheça o método →

2.5

Pull quote

Para frases-âncora e manifestos. H1 (56px) centralizado, aspas em ink-500, atribuição em caption uppercase.

Marcas fortes começam com identidades verdadeiras.

Authenticity Leads To Authority
2.6

Data & numerais

Para métricas, cases, países. font-feature-settings: "tnum" (tabular numbers) — números alinham em colunas verticais. Label em eyebrow uppercase tracking +15%.

08
Países atendidos
24/7
Operação IA
Melhor agência
BG 2023 · 2024
+60
Marcas construídas
2.7

Mono — uso restrito

JetBrains Mono entra só em 4 contextos: index numérico (2.3), specs técnicas, coordenadas de grid, e callouts de stack/IA. Nunca em body. Cria contraste tipográfico sem virar mixing real.

// stack técnico
framework: Next.js 15 · Hostinger Cloud
ia_layer: OpenAI · Anthropic · automações sob medida
cms: Google Sheets API (leve, auditável)
locale: pt-BR / en-US
2.8

Tipografia em light mode

Inversão direta dos tokens: cream vira background, ink-900 vira texto primário, ink-700 vira texto secondary, ink-500 vira muted. Ênfase bifurcada funciona igual — keyword em ink-900, muted em ink-500.

Ecossistema

Do posicionamento à performance.

Operamos como infraestrutura — branding, marketing, IA e tecnologia em uma camada integrada. Nada de silos; tudo sob o mesmo rigor estratégico.

2.9

Ritmo vertical

Toda altura de linha é múltipla de 8px. H3 = 48px line-height, body = 24px line-height, gap padrão = 24/32px. Visualização com baseline grid de 8px.

Baseline 8px

Ecossistema de presença digital

Cada linha pousa na mesma grade invisível de 8px. Isso cria sensação de construção — não de improviso. H3 ocupa 6 linhas (48px), body ocupa 3 linhas (24px), gap entre elementos em múltiplos diretos (24, 32, 48).

É a estrutura que torna uma página "calma" sem parecer vazia. Layout rigoroso, leitura respirada.

Próximo · Componentes →