DAUWO · Typography Documentation
Type
System.
Versão 1.0 · Março 2025 · Sistema bloqueado
Documentação completa do sistema tipográfico de DAUWO — regras de uso, proporções, hierarquia e exemplos de aplicação em contexto editorial.
Display & Títulos
General Sans
Destaque Itálico
Sentient
Interface & Labels
IBM Plex Mono
§ 01 · Conceito e Intenção
Engenharia
tipográfica.
O sistema tipográfico de DAUWO não é uma seleção de fontes — é uma posição intelectual materializada em forma. Cada família foi escolhida por uma função específica e irredutível dentro da hierarquia. Nenhuma é decorativa.
A tensão produtiva entre o geométrico romano de General Sans e o cursivo serifado de Sentient é o coração visual da marca: a mesma tensão entre engenharia e criação que define o território de DAUWO.
Princípios fundadores
Contraste sem conflito
Roman geométrico e serifada cursiva — oposta em natureza, complementares em função. A diferença é o ponto.
Hierarquia explícita
Cada família habita um único papel. Não há usos mistos nem excepções. A clareza da regra é a sua autoridade.
Proporção sobre arbitrariedade
Tamanhos derivados de relações matemáticas — não de preferências estéticas. O sistema justifica-se a si mesmo.
Âmbar como voz
A cor de acento não é decorativa — é semântica. Âmbar marca exatamente o que é de DAUWO: a voz, o destaque, o itálico.
A tensão central — em acção
Creation is a form of
engineering.
Geométrico romano + Cursiva serifada · mesma linha de base · contraste máximo
Referência de intenção: a tipografia editorial do Guardian pós-2018 (Chris Barker), o sistema de Le Monde Diplomatique, e a escala de impressão do New York Review of Books. Tamanhos de corpo pensados para tela a 1.5× o que seria confortável — à semelhança da proporção de leitura impressa em broadsheet.
§ 02 · Famílias Tipográficas
2.1 Display & Títulos
General
Sans.
| Atributo | Valor |
|---|
| Foundry | Indian Type Foundry (ITF) |
| Distribuição | Fontshare · Gratuita |
| Classificação | Sans-serif geométrica humanizada |
| Pesos usados | 500 Medium · 600 SemiBold · 700 Bold |
| Tracking | −0.020em a −0.030em (negativo) |
| Uso exclusivo | Headlines · Display · Wordmark |
Anatomia · letras diagnóstico
Gg Qq Rr
Pesos disponíveis
Medium 500 — DAUWO Creative Engineering
SemiBold 600 — DAUWO Creative Engineering
Bold 700 — DAUWO CREATIVE ENGINEERING
Geométrica com suavizações humanistas nos terminais — evita a frieza da Futura mantendo a precisão construtiva. Cap-height ratio: ~0.70 de em. Sem itálico: o contraste com a Sentient é intencional e estrutural.
2.2 Destaque Itálico
Sentient.
| Atributo | Valor |
|---|
| Foundry | Indian Type Foundry (ITF) |
| Distribuição | Fontshare · Gratuita |
| Classificação | Serifada de transição · cursiva |
| Estilo usado | Italic 400 exclusivamente |
| Cor exclusiva | #C8872A (amber) sempre |
| Uso exclusivo | Palavra de ênfase em títulos · Pull quotes |
Anatomia · letras diagnóstico
Gg Qq Rr
Regra de uso
A Sentient aparece SEMPRE em itálico.
SEMPRE em âmbar #C8872A.
NUNCA em romano. NUNCA noutra cor.
NUNCA como corpo de texto.
Serifada clássica com cursiva verdadeira — inclinação ~8°, formas calígraficas autênticas. Cap-height ratio: ~0.68 de em. É esta diferença de 0.02 que cria o desvio óptico que justifica o factor de escala 1.6656 quando combinada com General Sans.
2.3 Corpo de Texto
Petrona.
| Atributo | Valor |
|---|
| Autores | Veronica Burian & José Scaglione |
| Distribuição | Google Fonts · Gratuita · Variable |
| Classificação | Serifada de transição · screen-optimised |
| Pesos usados | 300 Light · 400 Regular · 500 Medium |
| Estilos usados | Roman · Italic (cursivo verdadeiro) |
| Uso | Todo o corpo — XL / L / M / Pull quote |
Anatomia · letras diagnóstico
Gg Qq Rr
Gg Qq Rr
Razão da escolha vs. alternativas
Escolhida sobre David Libre (sem itálico real), Lora (sobreusada), IBM Plex Serif (demasiado técnica), Alegreya Sans (demasiado expressiva). Petrona oferece: itálico cursivo verdadeiro, contraste médio-alto adequado para dark background, variable font para controlo fino de peso, e carácter tipográfico suficiente sem dominar.
2.4 Interface & Labels
IBM Plex
Mono.
| Atributo | Valor |
|---|
| Autores | Mike Abbink · Bold Monday · IBM |
| Distribuição | Google Fonts · Gratuita · Open Source |
| Classificação | Monospace · humanizada |
| Pesos usados | 300 Light · 400 Regular |
| Tracking padrão | +0.14em a +0.22em (positivo) |
| Uso | Tags · Labels · Números · Separadores · Código |
Padrões de uso
Tag de seção
Creative Engineering Initiative
Separador e anotação
/// FIELD NOTES · 001 · THE DESK ///
Meta linha
DAUWO · 2025 · Creative Engineering
§ 03 · Escala e Proporções
Os tamanhos não são arbitrários. Os tamanhos de corpo derivam de uma proporção editorial — pensados para tela a uma escala equivalente à leitura confortável de broadsheet impresso.
Todos os tamanhos usam clamp() com três valores: mínimo mobile, valor fluido em vw, e máximo desktop. O sistema é responsivo por definição.
Os valores clamp(min, vw, max) foram calibrados para que o corpo XL (hero intro) seja lido a ~30px num tela de 1280px — equivalente a ~11pt em impressão. Esta é a proporção de corpo principal do Guardian, Economist e Le Monde nas suas versões digitais premium.
Escala completa · demonstração ao vivo
Display
General Sans 600
clamp(72px,11vw,148px)
tracking −0.030em
line-height 0.86
Signal.
Display Italic
Sentient Italic 400
clamp(72px,11vw,148px)
tracking −0.025em
line-height 0.86 · cor âmbar
essential.
H1 Large
General Sans 600
clamp(48px,7.5vw,100px)
tracking −0.025em
line-height 0.88
Three Domains.
H2 Mid
General Sans 600
clamp(32px,4.5vw,60px)
tracking −0.020em
line-height 0.92
Active Research.
H3 Small
General Sans 500
clamp(22px,2.8vw,36px)
tracking −0.015em
line-height 1.00
Tool and instrument.
Body XL · Hero intro
Petrona 400
clamp(20px,2.3vw,30px)
line-height 1.65
cor: dim 48%
Underpinned by Newton's immutable logic — what goes up, must come down. This field of energy storage technology is remarkably simple.
Body L · Seção
Petrona 400
clamp(17px,1.8vw,22px)
line-height 1.78
cor: dim 48%
Human intelligence is entering a new phase. Artists build tools. Engineers design imagination. DAUWO exists for builders who don't just use technology — they shape it.
Body M · Cards
Petrona 400
clamp(14px,1.3vw,17px)
line-height 1.92
cor: dim 48%
When words become geometry, meaning inhabits form. The gap between the written and the drawn narrows to nothing. Typography as spatial thinking.
Pull Quote
Petrona Italic 400
clamp(18px,2vw,26px)
line-height 1.60
border-left âmbar
"The builder is the person who makes the prototype. Not the person who describes it."
Label / Tag
IBM Plex Mono 300–400
9–11px
tracking +0.20em
uppercase · âmbar
·001·
Creative Engineering
/// DAUWO · 2025 ///
§ 04 · Paleta e Uso de Cor
A paleta de DAUWO é de uma contenção radical. Uma única cor de acento. Todo o resto é variações de neutralidade — do quase-preto orgânico ao creme de papel velho.
O âmbar não é arbitrário: é a cor da luz incandescente, do latão, da madeira vernizada — referências do mundo físico e artesanal que estão no DNA da marca.
Regra absoluta: o âmbar aparece APENAS em elementos tipográficos de voz activa — o itálico Sentient, os labels Mono, os números de seção. Nunca em fundos, nunca em bordas decorativas, nunca em ilustrações. A raridade é o que lhe dá força.
#12110F
Ink · Fundo primário
#1A1815
Paper · Superfícies
#E8E2D9
Off-white · Texto
#C8872A
Amber · Único acento
Opacidades de texto — hierarquia de legibilidade
100% · #E8E2D9 · Títulos
Corpo principal · máxima legibilidade
48% · dim · Corpo primário
Corpo principal · leitura corrida
25% · labels · Interface
Labels, captions, meta-informação
10% · ghost · Linhas
Linhas divisórias, bordas, backgrounds subtis
§ 05 · Padrões de Composição
5.1 Título com destaque itálico
O padrão mais característico de DAUWO. Linha(s) em General Sans 600 romano, seguidas da palavra ou frase de ênfase em Sentient Italic âmbar. O itálico é sempre a última linha ou o elemento final.
Regra: o romano define o território, o itálico nomeia o que importa. Nunca o inverso.
<div class="h-large">Active</div>
<div class="h-large"><span class="it">Research.</span></div>
— OU numa única div:
<div class="h-large">
Creation is a form of<br>
<span class="it">engineering.</span>
</div>
·05·
References
& thinking.
·02·
Creation is a form of
engineering.
5.2 Número de seção + título
O número em IBM Plex Mono com o padrão · N · precede sempre o título de seção. O número é âmbar, os pontos são fantasmas (40% de opacidade).
<div class="num"><i>·</i>03<i>·</i></div>
<!-- i com all:unset para remover itálico -->
5.3 Bloco editorial completo
·02·
Creation is a form of
engineering.
Ideas do not appear fully formed. They evolve through attempts, through the resistance of materials, through friction with the real world.
Making tangible what was only possible — the moment imagination becomes matter. Every broken prototype teaches form.
"The builder is the person who makes the prototype. Not the person who describes it."
·02·
Creation is a form of
engineering.
Ideas do not appear fully formed. They evolve through attempts, through the resistance of materials, through friction with the real world.
Making tangible what was only possible — the moment imagination becomes matter. Every broken prototype teaches form.
"The builder is the person who makes the prototype. Not the person who describes it."
5.4 Tag de seção (doc-tag)
Marca o início de cada seção ou bloco editorial. IBM Plex Mono uppercase, 9px, tracking .22em, âmbar, com linha de 16px à esquerda. Nunca mais de 5 palavras.
<div class="doc-tag">Creative Engineering Initiative</div>
§ 06 · Specimens Contextuais
6.1 Hero · Dark
Hero Section · Dark Background
Creative Engineering Initiative
Build what
doesn't exist.
Form · 2025 · Three Domains
Human intelligence is entering a new phase. Artists build tools. Engineers design imagination. DAUWO exists for builders who don't just use technology — they shape it.
6.2 Section · Light
Section Block · Light Background
·02·
Creation is a form of
engineering.
Ideas do not appear fully formed. They evolve through attempts, through the resistance of materials, through friction with the real world. The first prototype is always wrong. The second less so.
Making tangible what was only possible — the moment imagination becomes matter.
"Not the person who describes it. The person who makes the prototype."
6.3 Texto corrido longo
Long-form Body · Leitura contínua
Territory
The collapse of the
boundary.
Human intelligence is entering a new phase. For most of our history, making required either physical skill or specialised knowledge — the sculptor's hand, the engineer's mathematics. The divide between those who design and those who build was structural, almost ontological.
That separation is dissolving. Not because the difficulty has disappeared, but because the tools have changed. When a musician writes code to generate sound, when a programmer draws the interface they're building, when an architect simulates the structural behaviour of a wall before it exists — the old categories stop being useful.
"Creation is a form of engineering. Engineering is a form of creation. The distinction was always a convenience, never a truth."
DAUWO is built for the people who live in that collapsed boundary. Not as a label or an aspiration, but as an operational description. Three domains — Territory, Process, Library — map the actual texture of this kind of work.
Territory is about context — the systems, constraints, and conceptual landscapes within which creation happens. Process is about method — the specific moves, experiments, and iterative cycles that produce results. Library is about material — the references, ideas, and prior work that inform new work.
/// Territory · DAUWO · 2025 ///
§ 07 · Referência de Código
CSS e variáveis prontas para copiar diretamente para o projecto. Todas as fontes carregam via Google Fonts e Fontshare sem qualquer instalação adicional.
Importar sempre as fontes por ordem: General Sans + Sentient via Fontshare, Petrona + IBM Plex Mono via Google Fonts. O IBM Plex Mono carrega separado para controlar os pesos exactos.
Imports de fonte
<!-- Fontshare -->
<link href="https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&f[]=sentient@400i,500i&display=swap" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400&display=swap" rel="stylesheet">
CSS Custom Properties
:root {
/* Cor */
--ink: #12110F;
--cream: #F2EDE4;
--amber: #C8872A;
--off: #E8E2D9;
--dim: rgba(232,226,217,.48);
--line: rgba(232,226,217,.07);
/* Famílias */
--gs: 'General Sans', sans-serif;
--pet: 'Petrona', serif;
--sent: 'Sentient', Georgia, serif;
--mono: 'IBM Plex Mono', monospace;
}
Classes de tipografia
/* Headlines */
.h-display { font-family:var(--gs); font-weight:600; font-size:clamp(72px,11vw,148px); letter-spacing:-.03em; line-height:.86; }
.h-large { font-family:var(--gs); font-weight:600; font-size:clamp(48px,7.5vw,100px); letter-spacing:-.025em; line-height:.88; }
.h-mid { font-family:var(--gs); font-weight:600; font-size:clamp(32px,4.5vw,60px); letter-spacing:-.02em; line-height:.92; }
.h-sm { font-family:var(--gs); font-weight:500; font-size:clamp(22px,2.8vw,36px); letter-spacing:-.015em; }
/* Itálico âmbar */
.it { font-family:var(--sent); font-style:italic; font-weight:400; color:var(--amber); }
/* Corpo Petrona */
.b-xl { font-family:var(--pet); font-weight:400; font-size:clamp(20px,2.3vw,30px); line-height:1.65; color:var(--dim); }
.b-l { font-family:var(--pet); font-weight:400; font-size:clamp(17px,1.8vw,22px); line-height:1.78; color:var(--dim); }
.b-m { font-family:var(--pet); font-weight:400; font-size:clamp(14px,1.3vw,17px); line-height:1.92; color:var(--dim); }
.b-pull { font-family:var(--pet); font-style:italic; font-size:clamp(18px,2vw,26px); line-height:1.60; border-left:2px solid var(--amber); padding-left:24px; }
/* Número de seção */
.num { font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--amber); }
.num i { all:unset; opacity:.4; font-size:9px; } /* pontos fantasma */
DAUWO
Typography System · v1.0 · 2025 · General Sans · Sentient · Petrona · IBM Plex Mono
/// Bloqueado ///