Design for AI

Estilo Só tipografia: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de só tipografia. Também chamado de design guiado por tipografia, typography-first, site só de texto, design sem imagem, tipografia como imagem. pôsteres dos anos 1960; web de 2010 em diante (estúdios, fundições de tipos, manifestos, sites pessoais).

Traços

  • sem fotos, sem ilustração, sem ícones: a tipografia é o único material visual
  • contraste de escala extremo, de manchetes de 200px a notas de rodapé de 12px
  • a grade é visível só pelo alinhamento
  • uma ou duas famílias tipográficas, exploradas ao máximo: pesos, itálicos, versaletes, algarismos
  • cor usada como um único campo ou uma única palavra, se tanto
  • o texto pode ser o layout: rotacionado, contornado, sobreposto, correndo na vertical
  • movimento: eixos de fonte variável animando, revelações de texto, marquee

Paleta

#ffffff papel (ou #111111 invertido), #111111 tinta, #ff3b00 um acento (opcional), #9a9a9a atenuado

Tipografia

uma família expressiva com alcance: Fraunces (tamanho óptico e peso variáveis), Geist ou IBM Plex Sans variável, Space Grotesk, Playfair Display, ou uma mono como JetBrains Mono; manchetes 96-240px, corpo 16-18px, notas de rodapé 12px

Faça

  • escolha uma fonte variável e use seus eixos (peso, tamanho óptico, largura) como sistema de design
  • defina uma escala tipográfica rígida (12, 16, 24, 40, 72, 128, 240) e nunca saia dela
  • use texto contornado (-webkit-text-stroke 1px) e linhas sobrepostas para hierarquia em vez de imagens

Evite

  • não contrabandeie ícones nem formas decorativas; se não é um glifo, está fora do estilo
  • não use mais de duas famílias
  • não dificulte a leitura do corpo para parecer esperto; só o texto de display fica experimental

Conhecido por: Pentagram (parcial), Klim Type Foundry, Dinamo, Bureau Borsche, vitrines do Readymag

Semente CSS
:root {
  --bg: #ffffff;
   --fg: #111111;
   --accent: #ff3b00;
   --muted: #9a9a9a;
   --radius: 0;
   --scale: 1.6;
   --font: 'Fraunces',serif;
   --font-ui: 'Geist',sans-serif
}
Prompt

Construa o site como um design só de tipografia. Sem imagens, sem ícones, sem ilustrações, sem formas decorativas. Fundo #ffffff, tinta #111111, atenuado #9a9a9a, um acento #ff3b00 usado numa única palavra por tela. Fontes: Fraunces variável para display e corpo, Geist 400 a 13px para nav e notas de rodapé. Escala tipográfica fixada em 12, 16, 24, 40, 72, 128 e 240px. Hero: uma manchete de 240px em Fraunces com peso 900 e tamanho óptico 144, line-height 0.85, tracking -0.04em, quebrando em três linhas alinhadas à esquerda, com a segunda linha contornada (-webkit-text-stroke 1px #111111, preenchimento transparente). Abaixo, um parágrafo de 24px em peso 300 com max-width 40ch. Os títulos de seção correm na vertical (writing-mode vertical-rl) na margem esquerda a 16px em caixa alta 0.2em. Os filetes são 1px #111111. Movimento: no load a manchete anima seu eixo de peso de 300 a 900 ao longo de 1.2s; um marquee de 16px em caixa alta roda a 30s linear infinite. Sem raio, sem sombras.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site como um design só de tipografia. Sem imagens, sem ícones, sem ilustrações, sem formas decorativas. Fundo #ffffff, tinta #111111, atenuado #9a9a9a, um acento #ff3b00 usado numa única palavra por tela. Fontes: Fraunces variável para display e corpo, Geist 400 a 13px para nav e notas de rodapé. Escala tipográfica fixada em 12, 16, 24, 40, 72, 128 e 240px. Hero: uma manchete de 240px em Fraunces com peso 900 e tamanho óptico 144, line-height 0.85, tracking -0.04em, quebrando em três linhas alinhadas à esquerda, com a segunda linha contornada (-webkit-text-stroke 1px #111111, preenchimento transparente). Abaixo, um parágrafo de 24px em peso 300 com max-width 40ch. Os títulos de seção correm na vertical (writing-mode vertical-rl) na margem esquerda a 16px em caixa alta 0.2em. Os filetes são 1px #111111. Movimento: no load a manchete anima seu eixo de peso de 300 a 900 ao longo de 1.2s; um marquee de 16px em caixa alta roda a 30s linear infinite. Sem raio, sem sombras.

## Tokens
:root { --bg:#ffffff; --fg:#111111; --accent:#ff3b00; --muted:#9a9a9a; --radius:0; --scale:1.6; --font:'Fraunces',serif; --font-ui:'Geist',sans-serif }

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.