Vol. III · Nº 1·Terra-2026·Preço: um token
Design System · The Daily Prophet
Daily Prophet — jornal antigo: pergaminho, tinta e composição em colunas.
Editorial · Nº 01
Dar a O Anfitrião uma linguagem visual que se aplique sem adivinhação: as decisões já foram tomadas e estão impressas, então quem compõe uma página nova não recomeça do zero nem inventa mais uma variação do mesmo botão. Este guia documenta o que existe no código, não o que seria bom existir — cada exemplo usa as classes reais de daily-prophet.css. Se uma quebrar, quebra aqui, que é o ponto de uma folha viva: ela sai da prensa toda edição.
Os cinco princípios da casa
Expediente
Composição Iowan · Playbill
Folhas prophet.css · daily-prophet.css · daily-prophet-ui.css · fonts-arcane.css
Rota /anfitriao
№ 02A oficina de composição
Antes da cor e do componente vêm as regras do impressor: a medida, a entrelinha, o espaço e o fio. São elas que fazem uma folha ler como folha — decisões de 1920 que aqui ainda mandam.
A medida — largura de coluna
A coluna estreita não é estética: é o que torna a old style legível. O olho não salta linhas de 34 caracteres. A rotativa impunha; aqui é escolha.
Corpo justificado e hifenizado, ~28–36ch por coluna.
O espaço — tipos de tira
| — | travessão (em) · aparte, diálogo |
| – | meia-risca (en) · intervalos, 1920–26 |
| · | ponto médio · separa itens do expediente |
Sem canto redondo
raio = 0
Papel cortado a guilhotina não tem canto arredondado. Profundidade é moldura e fio, nunca sombra.
№ 02.1Filetes
O papel não tem sombra, não tem elevação, não tem card flutuante. Tem filete. As quatro espessuras são todo o sistema de separação da folha — e por isso cada uma significa algo diferente. Esta página obedece à regra: o caderno abre com fio grosso, a matéria com fio médio.
.dp-rule--hair · separa itens dentro de um bloco
.dp-rule · separa matérias
.dp-rule--double · separa seções do jornal
.dp-rule--thick · abre cada caderno
№ 02.2O papel envelhecido
A folha não é uma superfície limpa: tem o vinco da dobra, as manchas de foxing e a tinta que passou de leve e desalinhou. São defeitos de propósito — é o que faz o olho ler papel de 1920 em vez de div.
Vinco
A dobra central que todo jornal de banca carrega. .dp-crease
Foxing
O amarelado do papel guardado décadas. .dp-foxing
Sangria de tinta
MÁ REGISTAÇÃO
A chapa a cores que desalinhou um fio. .dp-bleed
№ 03Tintas & Tokens
Token é o contrato: o nome dura, o valor muda. A folha quase não tem cor — a hierarquia vem do peso, do corpo e do fio. Sépia, ocre e ouro só pontuam; o preto do fio separa.
Acentos — usados com parcimônia
--dp-sepia#7a5c34--dp-ocre#8a6a2f--dp-gold#9a7b28--dp-rule#2a2216№ 03.1Metais e tintas de sinalização
A folha ganhou dois metais (ouro e prata, para o brasão e os selos) e cinco tintas escuras — vermelho, azul, amarelo, verde — para marcar a editoria e a urgência. São tons fundos, dessaturados: a folha imprime, não acende. Cada um foi medido para AA sobre o papel.
Brasão cunhado — a única superfície onde o gradiente é lícito: metal reflete.
Fio de edital na tinta da editoria. .dp-flag--red
O mesmo fio, outro caderno. A cor diz a que secção pertence.
№ 04As quatro vozes
A tipografia deste realm não é um cardápio de fontes bonitas: é uma linha do tempo da própria impressão. O tipo de madeira existe porque metal daquele corpo rachava; a slab foi feita para aguentar tinta pesada em cartaz; a old style, para desaparecer sob a leitura. Cada uma ocupa o degrau da hierarquia que a sua tecnologia justificava — a página é cronologia, não gosto.
font-family: var(--dp-wood)Tipo de madeira · Headline One/Two · séc. XIX · cartazes
O nameplate e a manchete que grita. Talhada em madeira porque metal daquele corpo rachava.
font-family: var(--dp-head)Slab / Clarendon · séc. XIX · anúncios
Títulos de matéria e cabeçalhos de caixa. Serifa quadrada, aguenta tinta pesada.
font-family: var(--dp-body)Old Style · séc. XVIII · livro
O corpo do texto. Feita para ser lida em coluna estreita, não para ser notada.
font-family: var(--dp-black)Blackletter — prometida, não servida · séc. XV · tipos móveis
Subtítulo do nameplate. O token declara UnifrakturCook, mas o projeto não serve essa face: cai em Georgia. A amostra abaixo é o que você realmente vê — não o que o token promete.
⚠ Lacuna conhecida — face ausente em fonts-arcane.css
№ 04.1Hierarquia da manchete
Cinco peças, nesta ordem, sempre: chapéu, manchete, olho, linha de crédito e data. É a gramática que permite ler a página em três segundos e decidir se vale os três minutos.
Exclusivo · Terra-2026
Três universos convivem sob o mesmo teto; especialistas divergem
Porto Alegre, 17 de julho de 2026
O chapéu classifica, a manchete afirma, o olho qualifica, o crédito responsabiliza e a data situa. Retire qualquer um e a folha perde uma função inteira.
.dp-kicker · .dp-bighead · .dp-subhead · .dp-byline · .dp-dateline
№ 04.2Capitular
A letra que desce três linhas existe desde o manuscrito iluminado: marca onde o texto começa de verdade. Uma por matéria — duas e o olho não sabe mais onde entrar. Ela vive no início de uma coluna: .dp-cap usa float, e dentro de um bloco multi-coluna o float ancora na coluna errada, separando a capitular da própria palavra. Por isso a demo abaixo é de coluna única — que é onde ela pertence.
Neste realm o movimento é quase inexistente, e isso é uma escolha, não uma limitação. A capitular ancora o olho no início da coluna e não se repete: ela é o único ponto de entrada. O resto do parágrafo desce em medida estreita, com a entrelinha curta que a old style pede, até encontrar o filete.
№ 04.3Blackletter, old-style e máquina
Três vozes que a folha não tinha impressas de verdade — dependiam de fontes que o leitor talvez não tivesse. Agora são tipos carregados: o gótico do nameplate, a old-style do corpo e a datilografada da errata.
Nameplate · blackletter
O Anfitrião
UnifrakturCook. Só no cabeçalho — uma folha inteira em gótico é ilegível.
Corpo · old-style 1900
O olho lê old-style sem esforço porque o contraste entre a haste e o filete é gentil. Itálico verdadeiro, não inclinado.
Old Standard TT — desenhada para texto corrido de jornal.
Errata · máquina de escrever
Onde se lê “token”, leia-se “sicautomóvel”.
Special Elite. A voz do comunicado datilografado, não composto na prensa.
№ 05As superfícies
Duas folhas e três tintas. A folha (--dp-paper) é o fundo; a folha 2 (--dp-paper-2) recua caixas e anúncios. O texto desce em três pesos de tinta — e o contraste de cada um está medido na seção de acessibilidade, sobre as duas folhas.
Folhas & tintas
--dp-paper#e8dcbe--dp-paper-2#ded0ac--dp-ink#1c1710--dp-ink-2#43382a--dp-ink-3#6b5c45№ 06A grade de colunas
Duas coisas diferentes, e confundi-las quebra a página. A grade (.dp-grid) divide a folha em matéria e trilho. O corpo (.dp-lead-body) é ele próprio multi-coluna — de 2 a 4 colunas conforme a largura. Aninhar um dentro do outro produz colunas de uma palavra: o corpo já é o motor de colunas, precisa da medida cheia.
.dp-lead-body — o corpo em medida cheia, fluindo em colunas reais
Ministério
O corpo desce em medida estreita, com entrelinha curta e alinhamento justificado. Cada coluna é uma unidade de leitura, não uma caixa de layout — e é isso que torna a old style legível: ela foi desenhada para linhas curtas. Quando a matéria não cabe, salta para a coluna seguinte; nunca encolhe a fonte. O papel tem tamanho fixo, e o que sobra vai para a página interna. A rotativa impunha essa disciplina; aqui ela é escolha, mas a razão continua a mesma.
.dp-grid · .dp-col--rail — a grade da página: matéria e trilho
Matéria
A coluna larga recebe a matéria. Aqui o texto é simples: quem faz colunas é o corpo, não a grade.
No trilho
Índice, breves e classificados. O que não é matéria vive à margem, separado por filete.
№ 07Ornamentos & sinais
Não há icon font em 1920 — os sinais são peças de metal fundido da caixa do tipógrafo. Cada um tem função, não é enfeite: o fleurão fecha, a manícula aponta, a adaga chama a nota. Todos existem em Unicode; nada foi desenhado.
São tipo, não desenho
Por serem caracteres, obedecem a font-size e color — não têm fill, stroke nem viewBox. Herdam a tinta do texto ao redor, como qualquer letra.
Em contexto — o fecho de matéria
…e a rotativa parou às três da manhã, quando o último caderno desceu para a expedição. O silêncio na oficina durou o tempo de um cigarro.
❦
O fleurão fecha a matéria — poupa o leitor de procurar se o texto continua.
Quando não usar
✕ Como botão
Ornamento não é alvo de clique. Um link se anuncia com palavra e filete.
✕ Em fila decorativa
Três fleurões seguidos viram enfeite. Um ornamento tem função ou não entra.
✕ Colorido
Sépia e ouro pontuam; o resto é tinta. Ornamento em cor vira logotipo.
№ 07.1Runas dos anões e a escrita mística
Duas escritas ancestrais entram como ornamento de tipógrafo — nunca como conteúdo que alguém precise de ler: o Fuþark rúnico (as runas nórdicas) e o Ogham celta, o alfabeto-árvore. Baixadas e servidas do próprio projeto, para carregarem em qualquer folha sem depender de fonte de sistema.
Runas · Fuþark
Noto Sans Runic (OFL). Cerca cadernos e assina o brasão. Sempre com o latim ao lado.
Místico · Ogham
Noto Sans Ogham (OFL), no lugar da tengwar élfica — que não é Unicode nem tem licença redistribuível. Lê como escrita mística, e é honesto.
A capitular pode vir ladeada por um glifo ancestral — o ar de mistério sobre a folha séria, sem que o corpo do texto deixe de ser latim legível.
№ 08Movimento
A folha está parada sobre a mesa. Não há hover que levante, parallax nem spring — as outras interfaces são luz; esta finge ser papel. O único gesto é o filete que se revela sob um link, porque um link precisa se anunciar.
deliberadamente imóvel
| quase nenhum | — | Papel não anima. O realm é deliberadamente estático. |
| hover de link | cor → sépia + sublinhado | Único feedback interativo |
| ink settle (arcane) | letra a letra via CSS | Só no masthead do Arcane na home Creative |
№ 08.1O silêncio
Este é o capítulo mais curto de todos os três guias, e de propósito. As outras duas interfaces são luz: podem saltar, piscar, seguir o ponteiro. Esta finge ser papel — e papel está parado sobre a mesa. Não há hover que levante, não há parallax, não há spring. O único gesto permitido é o filete que se revela sob um link, e mesmo esse existe porque um link precisa se anunciar como link.
Regra prática: se você precisou de transition para algo além de cor de link, provavelmente está escrevendo no realm errado.
A única exceção é o ink settle — a tinta assentando letra a letra no masthead, que existe para dizer “esta folha acabou de sair da prensa”. Ver o registro de motion acima: dos quatro gestos deste realm, dois são “imóvel”.
№ 08.2Tinta a secar, folha a assentar
Os dois únicos gestos que um jornal admite, ambos disparados uma vez e nunca em loop: a manchete que escurece do sépia claro ao preto conforme a tinta seca, e a folha que entra torta e endireita ao pousar na mesa.
A TINTA AINDA SECA
.dp-anim-ink — do sépia diluído ao ink, no primeiro paint.
Assenta na mesa
.dp-anim-drop — entra torta, endireita. Respeita prefers-reduced-motion.
№ 09A caixa de tipos
O catálogo das peças da folha, cada uma com o seu ofício. A oficina (o UI Kit) mostra-as vivas; aqui ficam documentadas — o quando usar e, sobretudo, o quando não. Todas são classes reais de daily-prophet.css.
.dp-kicker☞ Classifica a matéria acima da manchete
✕ Nunca como título — não afirma nada
.dp-bighead☞ A afirmação da página, em slab pesada
✕ Uma por página; duas e a hierarquia some
.dp-subhead☞ Qualifica a manchete em uma frase
✕ Não repete a manchete com outras palavras
.dp-cap☞ Abre a matéria, ancora o olho na coluna
✕ Uma por matéria; float pede coluna única
.dp-pull☞ Rouba uma frase forte para o miolo
✕ Não inventa citação que não está no texto
.dp-byline☞ Responsabiliza — quem escreveu e quando
✕ Não some: matéria sem assinatura é boato
.dp-box☞ Tira do fluxo o que é apoio — cercado por fio
✕ Não levanta card: papel separa com moldura
.dp-ad☞ Anúncio na mesma tinta, assinado ao pé
✕ Não grita com cor: quem paga assina discreto
№ 09.1A gravura e a legenda
Foto de jornal antigo é retícula grossa, não fotografia: a chapa não conseguia meio-tom fino. A folha resolve isso em duas camadas — a moldura de chapa e o miolo, que dessatura, entinta de sépia e recebe a trama de pontos por cima. A legenda nunca é opcional: imagem sem legenda, na folha, é imagem sem procedência.
A moldura (.dp-plate) é o filete de 1px com 3px de folga: a margem branca que a chapa deixava no papel. O miolo (.dp-plate-inner) aplica grayscale(1) sepia(.55) contrast(1.35) e sobrepõe a retícula em mix-blend-mode: multiply.
Por que duas camadas
Separar moldura de miolo é o que permite entintar a imagem sem entintar a margem. Se o filtro morasse na moldura, o filete cinzaria junto e a chapa perderia a borda — que é justamente o que prova que aquilo é uma gravura colada na página, e não a página.
Limitação conhecida
O tratamento é filter, não uma imagem preparada: o arquivo original continua colorido. Serve para fotografia; num logotipo de traço fino a retícula de 3px come o desenho. Nesse caso, entregue a arte já em bitmap de 1 bit e use só a moldura.
.dp-figure · .dp-plate · .dp-plate-inner · .dp-figcaption
№ 09.2Caixas, olho e breves
Quando algo precisa sair do fluxo da coluna, a folha não levanta um card — ela cerca com filete. O olho (pull quote) rouba uma frase da matéria; os breves empilham o que não merece manchete.
Caixa
Conteúdo cercado por filete, fora do fluxo da coluna.
Caixa pesada
Para aviso oficial — o filete grosso é a voz do Ministério.
Papel não anima. Se algo se mexe nesta folha, alguém errou.
O texto do olho entra sem aspas — a peça as compõe sozinha, na tinta e no corpo certos.
Breves. Notas curtas, empilhadas, separadas por filete fino.
№ 09.3Classificados
O anúncio é parte da folha, não intruso: tem a mesma tinta, o mesmo filete e a mesma tipografia. O que o distingue é a assinatura ao pé — quem paga, assina.
Modelo 2026. Cabo de freixo, cerdas alinhadas à mão. Entrega em toda a Terra-2026.
Aviso
Comunicado oficial ocupa medida cheia e dispensa manchete: quem precisa gritar não tem autoridade.
.dp-ad · .dp-ad-head · .dp-ad-sign · .dp-notice
№ 09.4A grade de reportagens
O que não é manchete mas também não é breve: as matérias secundárias que ocupam o pé da página. Cada uma repete a mesma gramática da manchete em miniatura — chapéu, título, linha fina, corpo e nota —, e é essa repetição que deixa o olho comparar quatro assuntos sem reler nenhum.
Mecânicas
Rotativa nova chega em março
A casa dobra a tiragem sem dobrar o turno
A máquina veio de Leeds em três vagões e levou nove dias para ser montada no subsolo.
Apuração de L. Riboldi
Oficina
Fundição refaz a caixa alta
Corpo 48 volta ao catálogo depois de doze anos
O punção original tinha-se perdido; o novo foi cortado à mão a partir de uma prova de 1898.
Com o compositor-chefe
Expediente
Assinaturas sobem 4%
Preço do papel explica quase toda a diferença
A direção garante que a folha mantém as doze páginas e não corta o caderno de classificados.
Nota da direção
Terra-2026
Três universos, um só teto
Especialistas divergem sobre a convivência
O design system passou a documentar cada realm na própria língua, em vez de um guia neutro.
Continua na pág. 7
A grade se dobra sozinha
Quatro colunas na folha larga, duas na média, uma no telefone — e o filete de separação muda de lado junto: vertical entre colunas, horizontal quando empilham. Não há variante a escolher; a peça sabe onde está.
1 col · 2 col a partir de 680px · 4 col a partir de 1060px
O “continua” — a única peça clicável da folha
Leia a matéria completa pág. 7.dp-more é link e se anuncia como tal: filete acima, versalete, e o número da página empurrado à direita. Ao passar o ponteiro ele muda para sépia com um fundo de tinta muito diluída — é um dos quatro únicos gestos da folha inteira (ver a seção 12).
.dp-reports · .dp-report · .dp-report-kicker · .dp-report-head · .dp-report-sub · .dp-report-body · .dp-report-note · .dp-more
№ 09.5O editorial
A única peça da folha onde o jornal fala por si — e por isso a única composta em gótica. A distinção não é decorativa: o leitor precisa saber, antes de ler a primeira linha, que ali não há apuração, há posição. Fecha com assinatura, porque opinião sem assinatura é panfleto.
Documentar um sistema é diferente de descrevê-lo. A descrição envelhece no dia em que alguém muda um valor e esquece o texto; a documentação viva quebra junto, e é essa quebra que a torna confiável.
Esta casa escolheu o caminho incômodo: cada exemplo destas páginas usa a classe real da folha de estilo. Quando uma delas falhar, falha aqui, à vista de todos — e não em silêncio, três meses depois, na página de alguém que confiou no guia.
— A direção
Anatomia
Fio duplo acima. Separa o editorial da matéria anterior com mais peso que um fio comum — muda a voz, não só o assunto.
Título em gótica (--dp-black), centrado, corpo pequeno. Nunca em tipo de madeira: o editorial não grita, afirma.
Parágrafos com entrada. Recuo de 0.9em na primeira linha, justificado e hifenizado — a densidade de um texto para ser lido inteiro, não varrido.
Assinatura à direita (.dp-sign), em itálico e tinta fraca.
Lembrete honesto: --dp-black promete UnifrakturCook e o projeto não serve essa face — na prática o título cai em Georgia. A distinção de voz existe no código e não chega ao olho. Ver a bancada de provas, seção 19.
.dp-editorial · .dp-editorial h3 · .dp-sign
№ 09.6A barra de serviço
A faixa de utilidade que todo jornal carrega no alto: tempo, câmbio, marés, santo do dia. É a peça mais densa da folha em informação por centímetro, e a única que o leitor consulta sem ler — ele varre, encontra o número e sai. Por isso é tabela, não texto.
O tempo
ManhãNévoa, 11°
TardeAberto, 19°
NoiteChuva fina
Praça
Papel (resma)4/6
Tinta (libra)1/3
Chumboestável
Expediente
Oficina aberta das 6 às 22.
Fecho da edição à meia-noite.
Duas linhas, dois ofícios
.dp-svc-row é par: rótulo à esquerda em versalete apagado, valor à direita. Serve para o que se compara. .dp-svc-line é frase corrida, para o que não tem valor — um horário, um aviso. Misturar os dois na mesma coluna desalinha a varredura.
Três colunas, sempre
A grade é fixa em repeat(3, 1fr) e não se dobra no telefone — a barra fica apertada em telas estreitas. É uma limitação real da peça, não uma escolha: numa folha impressa a largura nunca muda. Em tela, prefira três colunas curtas a quatro espremidas.
.dp-service · .dp-svc-title · .dp-svc-row · .dp-svc-line
№ 09.7A gravura de dados
O gráfico de jornal antigo não tem cor, preenchimento nem legenda flutuante: é traço de nanquim sobre a mesma folha. Toda a informação vem da linha e do rótulo ao lado dela — o que, por acidente feliz, é exatamente o que um gráfico acessível precisa ser.
A folha de estilo pinta o SVG
Nenhum atributo de cor no marcador: .dp-chart line e polyline herdam traço em --dp-ink com fill: none, e o texto sai em old style, corpo 4. Trocar a tinta da folha reentinta o gráfico — não há um segundo lugar para atualizar.
O aria-label não é opcional
Uma polilinha é invisível para quem usa leitor de tela. O gráfico acima leva role="img" e um rótulo que diz a série por extenso. Sem isso a peça entrega ao leitor cego exatamente nada — e a legenda (.dp-figcaption) não substitui, porque ela dá a fonte, não os valores.
.dp-chart · .dp-chart line · .dp-chart polyline · .dp-chart text
№ 09.8Carimbo, verbete, vinheta e pé
As peças pequenas que ninguém procura no catálogo e todas as páginas acabam precisando: o carimbo que data, o verbete que define, a vinheta que separa sem fio e o pé que numera. São o miúdo da tipografia — e é o miúdo que faz a página parecer composta por alguém.
O carimbo
.dp-stamp — filete sépia de 2px, versalete, girado −4° e a 72% de opacidade. A inclinação é o ponto: carimbo aplicado à mão nunca sai reto.
O verbete
Fólio — o número da página, no pé
Olho — citação roubada ao miolo
Chapéu — a linha que classifica
.dp-term — versalete no termo, tinta fraca na definição, pontilhado entre entradas. É a peça do glossário.
O par
Edição Nº 5
Tiragem 31.000
Fecho 00h00
.dp-kv — rótulo e valor nas pontas, pontilhado a separar. Para ficha técnica; nunca para texto corrido.
Vinheta e pé
.dp-orn separa seções sem gastar um fio; .dp-foot distribui as três marcas de registro e o fólio ao centro.
Uma ressalva medida, sobre o carimbo
O carimbo sai em --dp-sepia a 0.58rem — cerca de 9px — e ainda por cima a 72% de opacidade, o que derruba o contraste efetivo abaixo dos 4.52:1 que a tinta mede em cheio. Ele passa como ornamento datado, não como texto: se a informação do carimbo importar para o leitor (um prazo, um estado), repita-a em tinta cheia num .dp-kv ao lado. Carimbo que carrega informação única é uma falha de acessibilidade com cara de charme.
.dp-stamp · .dp-term · .dp-kv · .dp-orn · .dp-foot · .dp-folio
№ 09.9Botões
O realm não tinha botão nenhum — a folha sabia noticiar, não sabia pedir uma ação. A peça nasce da física da prensa: como papel não levanta, o botão pressionado não sobe com sombra, ele afunda. O tipo de metal morde a folha, e numa prova de tipografia você sente o relevo com o dedo.
Variantes — o que cada tinta autoriza
Pressione qualquer um e repare: ele desce. É inset box-shadow com translateY(1px) — a mordida do tipo no papel. Nenhum outro realm pode fazer isso, porque nos outros a superfície é luz.
Quando usar cada uma
Chapa entintada — a ação que a página existe para realizar. Uma por página; duas e a folha não diz mais qual importa.
Fio simples — apoio legítimo. Quantas fizerem sentido, lado a lado.
Sem chapa — navegação disfarçada. Se leva a outro lugar, considere um link de verdade.
Tinta da errata — só o irreversível. O vermelho da folha pede confirmação; nunca convida.
Tamanhos e cerimônia
O fio duplo (.dp-btn--double) é o botão de maior cerimônia da folha — o mesmo fio que fecha o masthead. Reserve-o para a ação única de uma página inteira, senão a cerimônia vira ruído.
O foco — corrigindo uma dívida que a seção 12 registrava
Até aqui só .dp-press declarava :focus-visible; todo o resto caía no anel azul do navegador sobre papel sépia. A folha nova torna o foco pontilhado sistemático — botão, campo, caixa de marcar e caderno usam o mesmo. Tabule pelos botões acima para ver.
Pontilhado porque é o que a prensa sabia fazer, e em sépia para pertencer à folha.
.dp-btn · --primary · --ghost · --danger · --sm · --lg · --double · [disabled] · :active (inset) · :focus-visible
№ 09.10O formulário impresso
A decisão que define esta camada: o campo não é uma caixa, é uma LINHA para escrever em cima. Formulário de repartição, de 1920, não tem retângulo com fundo — tem pauta. A caixa existe só onde o texto precisa de área, e a marca de seleção é ✕, não ✓, porque o impresso pedia “marque com um X”.
Requerimento de assinatura
A caixa aparece só aqui: texto longo precisa de área.
A tiragem mínima desta casa é de quinhentos exemplares.
Escolha — a marca feita à mão
O ✕ da caixa entra girado −6°, sempre para o mesmo lado: marca de caneta não sai reta, mas a mesma mão erra igual. O botão redondo enche de tinta, sem girar.
O grupo empilha por padrão — .dp-choice é flex, não inline-flex. Com inline-flex, dois rótulos curtos corriam lado a lado sem ninguém pedir, e só empilhavam por acidente quando o texto era comprido. Para o caso horizontal legítimo, como o par acima, existe .dp-choice--inline.
Cadernos — as abas do fichário
O caderno aberto ganha fio grosso por baixo — como a aba física que se levanta no fichário. Não acende, não muda de fundo: continua sendo papel. Em código, role="tablist" e tabIndex=-1 nas inativas: setas navegam entre abas, Tab sai do grupo.
.dp-field · .dp-label[data-required] · .dp-input · --boxed · [aria-invalid] · .dp-help · .dp-error · .dp-choice · .dp-check · --radio · .dp-tabs · .dp-tab[aria-selected]
№ 09.11Selos, carimbos e assinaturas
O que dá autoridade a um papel: o selo em relevo, o carimbo da repartição e a rubrica de quem responde. São as peças que transformam uma folha impressa em documento — e as três existem justamente porque, no papel, não há sessão nem login para provar quem fez o quê.
Selo em relevo
Dois fios concêntricos e versalete girado. O de sépia é o corrente.
Variantes
Tinta cheia para o que vale; vermelho da errata para o que foi anulado.
Carimbo da repartição
Retangular e com data — o irmão do .dp-stamp, para quando o que importa é quando.
A assinatura
L. Riboldi
Lucas Floriano Riboldi
Compositor-chefe desta casa
A rubrica é itálico inclinado em skewX(-8deg), não uma face manuscrita: o projeto não serve nenhuma, e fingir que serve é o tipo de mentira que este guia recusa. Se um dia entrar uma face de punho, troca-se aqui e a peça inteira melhora sozinha.
Contraste — a medida antes da estética
| peça | papel | papel-2 | veredito |
|---|---|---|---|
| Vermelho da errata | 7,08 | 6,31 | AA nas duas |
| Selo em sépia | 4,52 | 4,03 | cai no papel-2 |
| Chapa entintada | 13,07 | 11,64 | AA nas duas |
O #7a2a1c da errata foi escolhido medindo, não a olho: dá 7,08:1 contra os 6,11:1 do vermelho antigo. Já o selo em sépia reprova no papel-2 — por isso ele é ornamento de autoridade, nunca portador de informação única. Se o selo diz algo que o leitor precisa saber, repita em tinta cheia ao lado.
.dp-seal · --ink · --void · .dp-postmark · .dp-signature · .dp-autograph · .dp-signature-line · .dp-signature-name · .dp-signature-role · .dp-table
№ 09.12Letras desenhadas e marcadores
A inicial iluminada herdada do manuscrito, e os recursos que a própria face já traz e quase ninguém liga: versalete verdadeiro, algarismos antigos que descem abaixo da linha, ligaduras históricas e frações diagonais. Não são desenhos — são instruções à fonte, e é isso que os torna sustentáveis.
A inicial em caixa
Ocompositor que abre uma matéria com inicial em caixa está a citar o manuscrito iluminado, onde a letra ganhava moldura de ouro. Aqui a moldura é fio, e a diferença para a capitular solta é que esta ocupa área própria.
Fio duplo para matéria de abertura; chapa entintada para o caderno inteiro. Uma por matéria — duas e o olho não sabe por onde entrar.
Recursos da face — instrução, não desenho
| Versalete verdadeiro | font-variant-caps |
| 1908 · 1926 · 31.000 | oldstyle-nums |
| 1908 · 1926 · 31.000 | lining tabular-nums |
| fi · fl · ffi · ct · st | historical-ligatures |
| 1/2 · 3/4 · 7/8 | diagonal-fractions |
Algarismo antigo desce abaixo da linha e convive com o texto sem gritar — use no corpo. O alinhado e tabular serve para tabela, onde as casas precisam encaixar. Trocar um pelo outro é a diferença entre uma tabela legível e uma coluna torta.
Marcadores — cada lista com o seu sinal
Fleurão
Aldus
Manícula
Travessão
Romano
O marcador não é enfeite: o fleurão fecha, a manícula manda fazer, o travessão só enumera. Escolher pelo significado é o que impede a folha de virar mostruário de ornamento — regra que a seção 07 já estabelece para os sinais soltos.
.dp-initial · --ornate · --wood · .dp-sc · .dp-oldstyle · .dp-lining · .dp-liga · .dp-frac · .dp-list · --fleuron · --aldus · --hand · --dash · --roman · .dp-tag
№ 09.13O movimento da prensa
Este realm declara que a página não anima, e continua verdade. Mas havia uma distinção por fazer: a PÁGINA não se move — a PRENSA se move, e só no instante em que imprime. Essa fronteira é o que permite ter movimento sem trair o material.
O que é permitido
Recarregue a página para ver de novo — as duas tocam uma vez e param. Nenhuma tem infinite, nenhuma responde ao ponteiro.
dp-ink-settle | 0,28s | steps(3) |
dp-press | 0,16s | steps(2) |
Ambas em steps(), nunca em curva suave: a prensa desce de uma vez. Uma folha que faz fade-in está a fingir ser luz — e este realm finge ser papel. É a mesma lógica que faz o _Dev usar steps no cursor, chegando lá por outro caminho.
O que é proibido, sem exceção
✕Hover que levanta — Papel sobre a mesa não sobe porque um ponteiro passou perto.
✕Parallax — A folha é uma superfície só. Camadas a velocidades diferentes são vidro, não papel.
✕Spring / bounce — Elasticidade é borracha. Papel amassa, não quica.
✕Skeleton pulsante — Escreva “Compondo…”. A folha diz o que está a acontecer, com palavra.
✕Spinner girando — Nada gira numa oficina de tipos. Use texto e um fio.
✕Qualquer infinite — Se ainda se mexe depois de impresso, não é papel.
Movimento reduzido
As duas animações desligam em prefers-reduced-motion e o leitor não perde nada: não há informação no gesto, só a lembrança de que a folha saiu da prensa. É o teste que separa movimento decorativo de movimento funcional — se desligar custa compreensão, o gesto estava a carregar significado que devia estar escrito.
@keyframes dp-ink-settle · dp-press · .dp-anim-settle · .dp-anim-press · @media (prefers-reduced-motion)
№ 09.15Tokens, diagramação e a coluna do Wire
A folha passou a viver sobre o layout original do Daily Prophet, e o encontro dos dois sistemas exigiu uma decisão em cada eixo: um papel, uma tinta, uma tríade de tipos. Esta matéria é o registro dessas decisões e das peças que nasceram delas — a linha de data, a barra de cadernos e a coluna de notícia que o agregador preenche sozinho.
A paleta única
--anf-paperpapel · a folha--anf-paper-2recuo · caixas e quadros--anf-inktinta · texto e título--anf-ink-2tinta 2 · legenda e olho--anf-ink-3tinta 3 · nota e rodapé--anf-rulefilete · fios e molduras--anf-accentouro · selo e realce--anf-alarmalarme · só carimbo de alertaDois sistemas chegaram com paletas próprias: o original trazia papel quase branco (#fff8ee) e âmbar de destaque; o kit da casa, papel envelhecido e ouro. Venceu o envelhecido — sobre tela iluminada, o quase-branco lê como interface, não como papel — e o ouro, porque o âmbar acendia como adesivo fluorescente sobre o tom envelhecido. As duas metades da página passaram a usar estes mesmos oito valores.
A tríade tipográfica
Manchete
--anf-display — Mugglenews. Só o logotipo e a manchete de primeira página. Nunca em texto corrido.
Título de matéria
--anf-head — Kreon. Tudo que titula abaixo da manchete, inclusive chapéu e barra de cadernos.
Texto corrido da folha, composto em corpo legível e justificado na coluna.
--anf-body — Vollkorn. Corpo, legenda, formulário. --anf-poster (Playbill) fica reservada ao classificado: no impresso ele saía de outra oficina, com o tipo que ela tinha na gaveta.
Armadilha registrada: os tokens de tipo são declarados no :root pelos NOMES das famílias, e só promovidos às fontes do next/font dentro de .newspaper. Um var() irresolvível dentro de um custom property invalida o token inteiro e derruba a página para sans-serif — silenciosamente.
A coluna do Wire
Lançamentos
A tiragem volta ao prelo depois de fila de espera em três continentes
Afolha compõe a notícia do agregador na mesma coluna do impresso: chapéu que classifica, título que chama, olho que explica, corpo justificado e o crédito da fonte ao pé, porque matéria de telégrafo se credita.
Nota do expedidor.
Fonte ↗.dpx-news — a coluna, com filete à esquerda que some no primeiro item e vira filete superior no celular · .dpx-news-kicker — chapéu em tinta cheia com papel por cima · .dpx-news-head — título em Kreon, entrelinha fechada · .dpx-news-sub — olho em itálico, tinta 2 · .dpx-news-plate — gravura vazia, hachura a 45° e proporção 3:2 · .dpx-news-body — corpo justificado com hifenização · .dpx-news-cap — capitular flutuada · .dpx-news-source — crédito da fonte, com realce de foco em ouro
A gravura vazia não é um buraco à espera de imagem: é peça de impresso. A cascata de arte tenta a imagem da fonte, depois a busca, depois a foto padrão da categoria — e só então desenha a hachura. Quando cai na foto padrão, a legenda passa a dizer imagem ilustrativa, porque foto de arquivo não pode se apresentar como registro do fato.
Faixa, zona e peça — a diagramação
A linha de apoio da faixa
Quadro
A peça cercada por fio, sobre o papel de recuo. Não define margem externa: quem espaça é a faixa.
Par chave/valorXII
Algarismo tabularCDXVII
Verbete — termo e definição
.dpx-band — a faixa: largura inteira da folha, de fio a fio · .dpx-band-head / .dpx-band-title / .dpx-band-sub — o cabeçalho de editoria entre fios duplos · .dpx-zone--2 / --3 / --4 — a subdivisão interna, com filete entre colunas · .dpx-box, .dpx-ad, .dpx-table, .dpx-kv, .dpx-term, .dpx-list — as peças
A regra que faz o alinhamento fechar: nenhuma peça define margem externa própria — quem espaça é a faixa, sempre pela escala --anf-space-*. Foi assim que a folha deixou de ter duas metades: antes o caderno da oficina era um bloco com grelha e vocabulário próprios, encaixado no meio como encarte de outra gráfica.
O erro de registro
27 °C
XII
.dpx-misregister — deslocamento em ouro · .dpx-misregister--ink — em tinta fraca · .dpx-misregister--cold — no único tom frio do sistema
Herdado do original, que assina assim os algarismos grandes do quadro de clima: text-shadow: 3px 0 0, deslocamento horizontal e sem desfoque. Não é sombra — é a chapa de cor saindo fora de registro, defeito clássico da rotativa. Regra de uso: só em tipo grande; em corpo pequeno o deslocamento não lê como impressão, lê como texto borrado.
Linha de data e barra de cadernos
.dpx-dateline — volume, data e preço entre dois fios · .dpx-dateline-price — o grupo do preço, que abriga a troca de multiverso · .dpx-sections — cadernos em versalete espaçado, separados por fleurão
Ambas declaram grid-column: 1 / -1. O .newspaper do original é uma grelha de seis colunas e posiciona cada seção explicitamente; sem essa declaração, peças novas eram auto-posicionadas em duas colunas e apareciam espremidas a um terço da largura.
№ 09.14Oficina · UI Kit
Os componentes reais da folha, não capturas — troque a versão para reimprimir a mesma matéria noutra tiragem.
A capa do Prophet: manchete, colunas e expediente
Cabeçalho
Crônica das artes de mesa
Manchete & capitular
Edição Especial
Como cartão e madeira viram memória
Todo jogo começa por uma pergunta, e a pergunta jamais é sobre o tema. Dessa pergunta nasce a mecânica: a peça, a carta, o dado.
Um bom protótipo é feio de propósito.
Figura emoldurada
Caixas, anúncio e fios
Números desta Casa
ProtótiposXII+
Folhas ao cestoCDXVII
Curiosidades
Gramaturas de 250 a 350g, corte e vinco sob medida.
Índice
Botões — variantes e tamanhos
Campos & escolha
A caixa é a exceção — texto longo pede área.
Mínimo de quinhentos exemplares.
Selos, carimbo e assinatura
L. Riboldi
Lucas F. Riboldi
Compositor-chefe
Tabela, etiquetas e marcadores
| Caderno | Páginas | Exemplares |
|---|---|---|
| Manchete | 4 | 31.000 |
| Mecânicas | 6 | 28.400 |
| Classificados | 2 | 31.000 |
Letras desenhadas
Ocompositor abre a matéria com a inicial em caixa e fecha os números em 1908 com algarismo antigo, que desce abaixo da linha e convive com o texto sem gritar. Em versalete verdadeiro o nome da casa, e as frações saem em 1/2 e 3/4.
№ 10Composições resolvidas
Peças combinadas num arranjo que se repete: a primeira página, a errata, a coluna de classificados. Não são telas — são diagramações que a oficina já sabe compor de cor.
Padrão · a primeira página
Terra-2026 · exclusivo
Design system é achado em edição rara
Três universos sob o mesmo teto; especialistas divergem
Amatéria abre com capitular e desce em colunas justificadas até o fio, quando salta para a página interna. O corpo nunca encolhe — o papel tem tamanho fixo.
No trilho
Manchete1
Mecânicas4
Classificados12
Padrão · a continuação
…o Ministério não quis comentar até o fecho desta edição, mas fontes da própria repartição confirmam que a portaria já circula assinada desde
Continua na pág. 4 ▸
◂ Continuação da pág. 1
a semana passada. A reportagem apurou ainda que dois cadernos foram recolhidos antes da distribuição.
O papel tem tamanho fixo: quando a matéria não cabe, ela salta — nunca encolhe a fonte. O salto precisa de destino (pág. 4) e de origem (pág. 1), senão o leitor se perde.
Padrão · a coluna de classificados
Vende-se
Vassoura Nimbus, pouco uso, cabo de freixo. Tratar na oficina.
— Q. Quidditch
Procura-se
Compositor com prática em tipo de madeira. Paga-se bem.
— Esta folha
Achados
Coruja cinzenta entregue sem bilhete. Reclamar no expediente.
— Redação
Colunas estreitas, título em versalete, assinatura ao pé. Quem paga, assina.
Padrão · a errata
Errata
Na edição anterior, onde se lia “o componente flutua”, leia-se “o componente é cercado por fio”. Papel não tem elevação. A redação lamenta o engano.
Padrão · a nota de falecimento
✝
A rotativa nº 2
1908 — 2026. Serviu a esta casa por cento e dezoito anos. O expediente agradece.
№ 11Os cadernos
As páginas inteiras que a folha compõe — cada uma um arranjo fixo de fios e colunas. Não são maquetes: cada caderno tem a sua diagramação, como a página impressa tem a sua grade.
Primeira página
Manchete + 3 colunas + trilho
Página interna
Matéria corrida, sem manchete
Classificados
Colunas estreitas de anúncios
Nota / obituário
Medida cheia, ✝ e fio duplo
№ 11.1Os blocos da folha
As seções que uma folha real diagrama e que faltavam ao catálogo: a tarja de última hora, o almanaque do tempo, o pregão, o obituário, o cupão recortável, a citação de destaque e a linha de salto.
| Dimensão | Cotação |
|---|---|
| Mumbattan | +3,2 |
| Noir | −1,1 |
| Colisor | +0,8 |
Descansa. A folha tem fim.
Vale um token
Uma ideia grátis
continua na pág. 7
Nada aqui foi finalizado. É de propósito.
№ 12As tintas sobre o papel
Medido pela fórmula do WCAG 2 sobre os dois papéis, e é aí que está a armadilha: a folha tem duas superfícies. --dp-ink-3 e --dp-sepia passam no papel claro e caem no escuro — escolher a tinta sem saber sobre qual papel vai imprimir é como aprovar contraste no Figma e reprovar no site. Já o --dp-gold reprova nos dois (2.94:1): é ornamento, nunca texto.
| tinta | hex | papel | papel-2 | veredito |
|---|---|---|---|---|
| --dp-ink | #1c1710 | 13.07 | 11.64 | AA |
| --dp-rule | #2a2216 | 11.51 | 10.25 | AA |
| --dp-ink-2 | #43382a | 8.39 | 7.47 | AA |
| --dp-ink-3 | #6b5c45 | 4.75 | 4.23 ↓ | cai no papel-2 |
| --dp-sepia | #7a5c34 | 4.52 | 4.03 ↓ | cai no papel-2 |
| --dp-ocre | #8a6a2f | 3.68 | 3.28 | só título grande |
| --dp-gold | #9a7b28 | 2.94 | 2.62 | reprova |
O foco — e a lacuna que ele expõe
A folha inteira declara um estilo de foco, no verbete do expediente: outline: 1px dotted var(--dp-sepia) com outline-offset: 2px. Pontilhado porque é o que a prensa sabia fazer — e a mesma tinta do link, para o foco parecer parte da composição.
✕ A lacuna: as outras peças clicáveis — .dp-more, .dp-index-item, .dp-sections a — não declaram foco nenhum e caem no anel padrão do navegador. Ele funciona, mas é azul de sistema sobre papel sépia: quem navega por teclado vê a folha quebrar de estilo a cada tabulação. Está registrado como dívida, não como decisão.
Experimente com o teclado
Tabule pelos três abaixo: o primeiro tem o foco da casa, os outros dois mostram o que a lacuna acima significa na prática.
Leitor de tela, movimento e impressão
O que a tinta não diz
Metade das peças desta folha é ornamento puro e precisa sumir para quem ouve a página: o fleurão de fecho, a vinheta, as marcas de registro no pé. Todas levam aria-hidden. O contrário também vale — a gravura de dados (09.7) é invisível sem role="img" e um rótulo que leia a série por extenso.
Regra: se o elemento é uma peça de metal fundido, esconda. Se carrega dado, rotule.
Movimento reduzido
Este é o único realm dos três em que prefers-reduced-motion não muda absolutamente nada — e isso é uma conquista de arquitetura, não um esquecimento. Papel não anima (ver 08.1), então não há o que desligar. As únicas transições da folha são de cor, em links, que a preferência não pede para remover.
Quem compõe uma peça nova neste realm herda essa garantia — desde que não traga spring de fora.
No papel de verdade
A folha tem @media print: ao imprimir, o ruído de impressão sobreposto (.dp::after) é removido — a textura que simula tinta velha na tela viraria sujeira real no papel. É o raro caso de um site cuja versão impressa fica mais limpa que a original.
Teste com Ctrl+P antes de dar por fechada qualquer página deste realm.
Corpo de texto — o risco desta estética
Jornal antigo é denso por natureza, e densidade é o inimigo natural da legibilidade. Três números desta folha merecem vigilância: o corpo base é 15px (acima do mínimo confortável, bom), mas peças como .dp-figcaption (0.62rem), .dp-ad-sign (0.6rem) e .dp-foot (0.58rem) descem a ~9px. Elas passam porque são metadados — legenda, assinatura, fólio. Nenhuma informação que o leitor precise para agir pode viver nesse corpo. E o texto justificado com hyphens: auto exige a coluna estreita de 28–36ch: numa medida larga, a justificação abre rios brancos que dificultam a leitura de quem tem dislexia.
№ 13Manual da redação
A folha também tem voz, e ela é econômica: manchete no presente, voz ativa, chapéu que classifica em vez de gritar. O texto de interface aqui se escreve como se escreve jornal — não como se anuncia software.
A manchete afirma, no presente
☞Ministério nega tudo
✕O Ministério teria negado as acusações
Voz ativa — quem fez o quê
☞Aranha salva a cidade
✕A cidade foi salva
O chapéu classifica, não repete
☞Exclusivo · Terra-2026
✕Notícia importante sobre o Ministério
O vazio é uma nota, não um desenho
☞Aguardando composição…
✕Ilustração de caixa vazia
Números por extenso até dez
☞três cadernos · 12 páginas
✕3 cadernos · doze páginas
O erro se assume, não se disfarça
☞A redação lamenta o engano
✕Ops! Algo deu errado :(
A legenda diz o que a foto não diz
☞A rotativa, horas antes do fecho
✕Foto de uma máquina
Sem exclamação — a folha não grita
☞Ministério confirma a portaria
✕Ministério confirma a portaria!
O vocabulário da casa
Metade das discussões de design é gente chamando a mesma peça por nomes diferentes. Aqui cada uma tem um nome só — e é o nome de oficina, não o de software.
Chapéu — A linha curta ACIMA da manchete, que classifica
Manchete — O título grande da matéria principal
Linha fina — A frase ABAIXO da manchete, que qualifica
Olho — A citação destacada no meio do texto
Capitular — A letra grande que abre o parágrafo
Fólio — O número da página, no pé
Expediente — Quem imprime, onde, em que edição
Trilho — A coluna estreita lateral
№ 14Brasão & nome
A marca do realm é o nameplate — o nome do jornal talhado em tipo de madeira — e o brasão que o assina no masthead.
The Daily Prophet
O Anfitrião
RealmLogoMini com selo girando e o d20. Classes .rl / .rl-anf em realm-logo.css.
Área de proteção
Uma linha de corpo em volta, de todos os lados. Nada de fio, texto ou anúncio invade essa margem — é o branco que faz o nameplate ser nameplate.
Reduções
O Anfitrião
O Anfitrião
O Anfitrião
Abaixo de 14px o tipo de madeira fecha os contraforma e vira borrão de tinta. Nesse tamanho, usa-se a slab (--dp-head) no lugar.
Usos incorretos
✕Não distorcer — o tipo foi talhado nessa proporção
✕Não colorir — a folha imprime em tinta, não em cor
✕Não inclinar — a chapa é reta na prensa
✕Não trocar a face — nameplate é tipo de madeira
№ 15O material da oficina
O que a gráfica guarda na estante: as fontes fundidas, as folhas de estilo e a caixa de ornamentos. Tudo real, do próprio projeto — não há download que não exista no código.
As fontes fundidas
--dp-body--dp-head--dp-wood--dp-blackAs folhas de estilo
src/styles/prophet.csssrc/styles/daily-prophet.csssrc/styles/daily-prophet-ui.csssrc/styles/fonts-arcane.cssA caixa de ornamentos
❦ ❧ ☞ ¶ § † ‡ ※ ⁂ ☙ ✝ ℔
Selecione e copie — são caracteres, não arquivos.
As medidas da oficina — o resumo que se leva para a bancada
| Medida da coluna | ~28–36ch | O que torna a old style legível |
| Raio | 0 | Guilhotina não faz canto redondo |
| Elevação | nenhuma | Separação é fio e moldura, nunca sombra |
| Corpo | 15px / 1.42 | Base da folha, em .dp |
| Colunas do corpo | 2 → 4 | Conforme a largura, via .dp-lead-body |
| Tinta segura | --dp-ink · --dp-ink-2 | AA nas duas folhas |
№ 16Números anteriores
O arquivo da folha: cada edição com a sua data e o que trouxe. Destilado dos commits reais do projeto — não é ficção de changelog, é a hemeroteca.
Edição
Edição extra
Edição extra
Edição
Primeira tiragem
Como se numera uma edição
majorRefunde a chapa: remove token, renomeia classe, muda a diagramação. Quem compunha do jeito antigo precisa recompor.
minorAcrescenta caderno, peça ou ornamento. Nada do que já existia deixa de servir.
patchCorrige valor, contraste ou texto. A matéria é a mesma; o engano é que sai.
№ 17Os blocos da página
Uma folha não é uma pilha de componentes: é um punhado de blocos que sempre aparecem na mesma ordem. Cabeçalho em cima, manchete, corpo em colunas, trilho à direita, reportagens no pé, expediente fechando. Quem conhece a ordem lê a página sem procurar.
.dp-mastheadNameplate, data, preço e lema. Abre a folha e não se repete — página interna não tem masthead, tem fólio.
.dp-bighead + .dp-subheadChapéu, manchete e linha fina, sempre nessa ordem. É o bloco que faz a página ser lida em três segundos.
.dp-lead-bodyO texto corrido, justificado, de 2 a 4 colunas conforme a largura. É o motor de colunas — nunca aninhar noutro.
.dp-col--railA coluna estreita à direita: índice, breves e classificados. O que não é matéria vive à margem.
.dp-reportsAté quatro matérias secundárias no pé da página, cada uma com chapéu e título curto.
.dp-colophon + .dp-folioQuem imprime, onde, em que edição — e o fólio que numera a página. Fecha a folha sob fio grosso.
A ordem na página
cabeçalho
bloco de manchete
corpo em colunas
trilho
grade de reportagens
expediente · fólio
№ 17.1O cabeçalho e o nameplate
A peça mais cerimoniosa da folha, e a única que nunca se repete: abre a primeira página e some das internas, que passam a se identificar só pelo fólio. É composta em quatro andares — a linha de registro, o nome, o subtítulo em gótica e o lema —, e cada andar existe para responder a uma pergunta diferente do leitor: onde estou, que jornal é este, de que espécie, e por quê.
The Daily Prophet
“A tinta seca; o sistema, não.”Fundada em MCMVIII · Impressa na Terra-2026
O nameplate não é um h1
.dp-nameplate estiliza :is(h1, h2, h3), não h1. A razão é esta página: na folha real o nameplate é o título do documento, mas aqui ele é uma amostra dentro de um guia que já tem o seu h1. Prender o estilo à tag obrigaria a duplicar o h1 só para a amostra ficar bonita — e dois h1 quebram a árvore de cabeçalhos de quem usa leitor de tela.
Mesma armadilha já corrigida no _Dev com .dv-hero.
A letra que quebra a caixa
.dp-amp devolve uma letra ao itálico da old style dentro do nome em tipo de madeira. Nasceu para o “&” dos nomes compostos — que em madeira sai grosseiro —, e serve para qualquer caractere que a face talhada não resolve bem, como o “ã” acima.
Uma exceção por nameplate. Duas e vira efeito.
A folha e o lema
.dp-sheet é o papel em si: 1180px no máximo, filete de 1px nas laterais e nada em cima nem embaixo — porque a folha é cortada nos lados e contínua no rolo. .dp-motto traz o lema em itálico e, no small, a fundação e a praça.
Envolva a página em .dp .dp-sheet, nessa ordem.
Só na primeira página
Repetir o cabeçalho na página interna é o erro mais comum de quem compõe uma folha pela primeira vez — o instinto de web, onde todo layout carrega o mesmo header. Aqui não: a página interna abre direto na matéria e se identifica pelo .dp-foot, com o fólio. O nameplate é uma cerimônia de abertura, e cerimônia que se repete deixa de ser cerimônia.
.dp-sheet · .dp-masthead · .dp-masthead-top · .dp-crest · .dp-nameplate · .dp-amp · .dp-nameplate-sub · .dp-motto · .dp-dateline · .dp-sections · .dp-lead
№ 17.2Expediente, fólio e índice
O rodapé de um jornal não é rodapé: é o expediente — quem imprime, onde, em que edição. É também, neste site, onde vive o acesso administrativo, embutido no nome da tipografia (ver PressMark). Nada de botão flutuante: quebraria a folha.
Manchete1
Mecânicas4
Oficina7
Classificados12
Composto em Iowan Old Style e Playbill · Impresso na Terra-2026 · Edição #1
— 1 —
.dp-index · .dp-index-dots · .dp-colophon · .dp-folio
№ 18As tiragens
Onde os outros universos têm “temas”, a folha tem tiragens: a mesma matéria impressa noutra chapa. Não é um seletor de aparência — é o estado físico do papel, e cada estado muda o que se pode ler nele. Trocáveis ao vivo na Oficina, abaixo.
Tiragem 01
Primeira página
A capa do Prophet: manchete, colunas e expediente
.dpTiragem 02
Página interna
Matéria corrida — capitular, colunas estreitas, sem manchete
.prophetTiragem 03
Envelhecida
A mesma folha esquecida na caixa: manchas de umidade e amarelado
.dp .art-tex-foxingA tiragem “envelhecida” não é um filtro bonito: soma a textura de foxing (manchas de umidade) à primeira página. É a mesma chapa, guardada na caixa por um século.
№ 19A bancada de provas
Onde o compositor testa antes de mandar para a rotativa: combinações de ornamento, provas de fio, e as lacunas que ainda não se resolveram. Nada aqui é norma — é oficina. O que der certo sobe para o catálogo; o que não, fica registrado como aviso.
Prova · combinações de ornamento
❦
❦ ❧ ❦
⁂
— ❧ —
Fecho de matéria, quebra de seção e vinheta de pé. Um ornamento por função.
Prova · a capitular em corpos diferentes
Três linhas é o padrão da casa. Duas some no corpo; quatro rouba a coluna inteira.
Lacuna registrada · a gótica que não existe
O token --dp-black promete UnifrakturCook, mas nenhum @font-face dessa face é servido pelo projeto: na prática ele resolve em Georgia. A amostra abaixo é o que se vê, não o que o token diz. Fica na bancada até a face ser fundida — documentar a lacuna é mais honesto que fingir que a chapa existe.
The Daily Prophet
№ 20O manual da casa
Onde a folha guarda as próprias regras — os arquivos reais, não prosa duplicada. Este guia não repete o que o código já diz: aponta para ele. Se divergirem, o código manda, e o guia é que está errado.
Onde mora cada coisa
Como se compõe uma página nova
.dp — é a folha: papel, tinta, serifa e textura, de uma vez.box-shadow, está no realm errado.