Design for AI

Estilo Minimal quente papel creme: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de minimal quente papel creme. Também chamado de minimalismo quente, minimal creme, UI bege, minimal aconchegante, design papel-branco, web de luxo discreto. 2021 em diante (Arc, ferramentas adjacentes ao Notion, SaaS indie, sites de newsletter).

Traços

  • base branco-quente (creme, osso, linho) em vez de branco puro
  • texto carvão ou preto-quente, nunca #000 frio
  • um acento terroso: terracota, oliva, ocre ou azul empoeirado
  • títulos serifados com corpo em sans humanista, ou uma única sans quente
  • raio suave (10-14px), sombras quase imperceptíveis ou bordas de 1px em cinza-quente
  • espaço em branco generoso, hierarquia calma, pequenas tags em pílula
  • movimento suave; nada quica

Paleta

#f7f3ea creme, #1f1d1a preto quente, #6b665e atenuado, #e4ddd0 linha, #c2603e acento terracota, #ede7da superfície sutil

Tipografia

Fraunces, Newsreader ou Instrument Serif para títulos (500-600 a 36-56px), DM Sans, Geist ou Manrope para o corpo a 16-17px; ou então só a "Instrument Sans" parecida com Söhne

Faça

  • escolha a temperatura uma vez: cada cinza deve carregar um toque de amarelo ou vermelho para nada parecer frio
  • use bordas de 1px em #e4ddd0 em vez de sombras; no máximo uma sombra suave para um elemento flutuante
  • mantenha o acento abaixo de 5% da página (links, um botão, uma tag)

Evite

  • não misture um acento azul frio na paleta quente
  • não adicione dark mode como um extra; se precisar, construa um escuro quente (#1c1a17), não um frio
  • não aperte; o estilo morre sem espaço

Conhecido por: Site do navegador Arc, Cosmos, Read.cv, temas do Bearblog, Are.na (parcial)

Semente CSS
:root {
  --bg: #f7f3ea;
   --surface: #ede7da;
   --fg: #1f1d1a;
   --muted: #6b665e;
   --line: #e4ddd0;
   --accent: #c2603e;
   --radius: 12px;
   --font: 'DM Sans',sans-serif;
   --font-display: 'Fraunces',serif
}
Prompt

Construa o site em estilo minimal quente papel creme. Fundo #f7f3ea, superfície secundária #ede7da, texto #1f1d1a, atenuado #6b665e, bordas #e4ddd0, acento único #c2603e. Fontes: Fraunces 500 para títulos a 52/34/24px com tracking -0.015em e line-height 1.1, DM Sans 400 a 17px para o corpo com line-height 1.65, 13px 500 para labels. Layout: max-width 720px para texto e 1080px para grades, padding da página 24px, 112px entre seções. Os cards são superfície #ede7da com borda 1px #e4ddd0, border-radius 12px, padding 24px, sem sombra. Botão primário: fundo #1f1d1a, texto #f7f3ea, raio 10px, 44px de altura; o secundário é um link de texto em #c2603e com sublinhado de 1px deslocado 4px. Tags: pílula, #ede7da, 12px em caixa alta 0.06em. Imagens recebem raio 12px e borda de 1px. Ícones 20px, traço 1.5px, #6b665e. Movimento: 200ms ease na cor do hover e um fade de 400ms só no carregamento da página. Nenhum branco puro nem preto puro em lugar nenhum.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo minimal quente papel creme. Fundo #f7f3ea, superfície secundária #ede7da, texto #1f1d1a, atenuado #6b665e, bordas #e4ddd0, acento único #c2603e. Fontes: Fraunces 500 para títulos a 52/34/24px com tracking -0.015em e line-height 1.1, DM Sans 400 a 17px para o corpo com line-height 1.65, 13px 500 para labels. Layout: max-width 720px para texto e 1080px para grades, padding da página 24px, 112px entre seções. Os cards são superfície #ede7da com borda 1px #e4ddd0, border-radius 12px, padding 24px, sem sombra. Botão primário: fundo #1f1d1a, texto #f7f3ea, raio 10px, 44px de altura; o secundário é um link de texto em #c2603e com sublinhado de 1px deslocado 4px. Tags: pílula, #ede7da, 12px em caixa alta 0.06em. Imagens recebem raio 12px e borda de 1px. Ícones 20px, traço 1.5px, #6b665e. Movimento: 200ms ease na cor do hover e um fade de 400ms só no carregamento da página. Nenhum branco puro nem preto puro em lugar nenhum.

## Tokens
:root { --bg:#f7f3ea; --surface:#ede7da; --fg:#1f1d1a; --muted:#6b665e; --line:#e4ddd0; --accent:#c2603e; --radius:12px; --font:'DM Sans',sans-serif; --font-display:'Fraunces',serif }

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