Design for AI

Estilo E-ink / calmo de baixo contraste: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de e-ink / calmo de baixo contraste. Também chamado de UI e-ink, design de tecnologia calma, UI de baixo contraste, estilo de tela de papel, modo leitura, estilo Kindle. 2007 (Kindle), tendência de design de 2020 em diante (calm tech, Readwise, apps Reader, computador Daylight).

Traços

  • cinzas sobre cinza quente, como uma tela de e-paper: sem branco puro, sem preto puro
  • contraste mantido moderado (5-7:1), nunca duro; nenhuma cor saturada exceto um acento apagado
  • tipografia de leitura: corpo serifado a 18-20px, medida longa, entrelinha generosa
  • sem sombras, sem gradientes, bordas mínimas num cinza levemente mais escuro
  • controles são formas simples com contorno; estados mostrados por inversão de preenchimento
  • animação deliberadamente lenta ou nenhuma, imitando o refresh do e-ink (trocas instantâneas ou 0ms)
  • dithering ou meio-tom sutil nas imagens para imitar a tela

Paleta

#dedcd6 cinza papel, #2f2f2d tinta, #7a7975 atenuado, #b9b7b1 linha, #c9c7c0 superfície, #4a5d4f um acento verde apagado

Tipografia

Literata, a "Source Serif 4" parecida com Bookerly, Newsreader ou Charter (gratuita) para o corpo a 19px line-height 1.7; Karla ou Public Sans a 14px para UI; títulos 500 a 28-36px

Faça

  • mantenha a paleta em 6 cinzas mais um acento apagado e confira que cada par fica entre 5:1 e 8:1 de contraste
  • faça as transições em 0ms (troca instantânea) ou um único fade de 200ms; sem curvas de easing, sem movimento
  • converta as imagens para escala de cinza e aplique dither ou meio-tom de 2px para pertencerem à superfície

Evite

  • não use branco nem preto; o visual de tela depende do papel cinza médio
  • não adicione efeitos de hover além de um sublinhado; e-ink não tem hover
  • não use cor para estado; use inversão (preenchimento escuro, texto claro)

Conhecido por: Kindle, Kobo, reMarkable, Readwise Reader (parcial), marketing do Daylight DC-1

Semente CSS
:root {
  --bg: #dedcd6;
   --fg: #2f2f2d;
   --muted: #7a7975;
   --line: #b9b7b1;
   --surface: #c9c7c0;
   --accent: #4a5d4f;
   --radius: 2px;
   --font: 'Literata',serif;
   --font-ui: 'Public Sans',sans-serif
}
Prompt

Construa o site em estilo e-ink calmo de baixo contraste. Fundo #dedcd6, texto #2f2f2d, atenuado #7a7975, linhas #b9b7b1, superfície elevada #c9c7c0, um acento apagado #4a5d4f para links. Sem branco, sem preto, sem cor saturada, sem gradientes, sem sombras. Fontes: Literata 400 a 19px, line-height 1.7, max-width 68ch para o corpo; Literata 500 a 34/26px para títulos; Public Sans 400 a 14px para nav e controles. Layout: coluna única centralizada, padding 32px, 72px entre seções, filetes 1px #b9b7b1. Botões: contorno 1px #2f2f2d, transparente, raio 2px, 40px de altura; o estado active ou selecionado inverte para preenchimento #2f2f2d com texto #dedcd6; nenhum efeito de hover exceto um sublinhado de 1px nos links. Inputs: mesmo contorno, sem brilho de foco, foco mostrado por um outline de 2px. Imagens em escala de cinza com aparência de dither ordenado (CSS filter grayscale(1) contrast(1.1) mais um overlay de padrão de meio-tom de 2px a 30%). Transições: trocas de 0ms; a única animação é um fade de 200ms no load. Ícones com traço de 1px, 20px.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo e-ink calmo de baixo contraste. Fundo #dedcd6, texto #2f2f2d, atenuado #7a7975, linhas #b9b7b1, superfície elevada #c9c7c0, um acento apagado #4a5d4f para links. Sem branco, sem preto, sem cor saturada, sem gradientes, sem sombras. Fontes: Literata 400 a 19px, line-height 1.7, max-width 68ch para o corpo; Literata 500 a 34/26px para títulos; Public Sans 400 a 14px para nav e controles. Layout: coluna única centralizada, padding 32px, 72px entre seções, filetes 1px #b9b7b1. Botões: contorno 1px #2f2f2d, transparente, raio 2px, 40px de altura; o estado active ou selecionado inverte para preenchimento #2f2f2d com texto #dedcd6; nenhum efeito de hover exceto um sublinhado de 1px nos links. Inputs: mesmo contorno, sem brilho de foco, foco mostrado por um outline de 2px. Imagens em escala de cinza com aparência de dither ordenado (CSS filter grayscale(1) contrast(1.1) mais um overlay de padrão de meio-tom de 2px a 30%). Transições: trocas de 0ms; a única animação é um fade de 200ms no load. Ícones com traço de 1px, 20px.

## Tokens
:root { --bg:#dedcd6; --fg:#2f2f2d; --muted:#7a7975; --line:#b9b7b1; --surface:#c9c7c0; --accent:#4a5d4f; --radius:2px; --font:'Literata',serif; --font-ui:'Public Sans',sans-serif }

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