Design for AI

Cream-paper warm minimal: UI design prompt

Palette, type rules and a pasteable prompt for cream-paper warm minimal. Also called warm minimalism, cream minimal, beige UI, cozy minimal, paper-white design, quiet luxury web. 2021 onward (Arc, Notion-adjacent tools, indie SaaS, newsletter sites).

Traits

  • warm off-white base (cream, bone, linen) instead of pure white
  • charcoal or warm-black text, never cold #000
  • one earthy accent: terracotta, olive, ochre or dusty blue
  • serif headings with a humanist sans body, or a single warm sans
  • soft radius (10-14px), barely-there shadows or 1px warm-grey borders
  • generous whitespace, calm hierarchy, small pill tags
  • gentle motion; nothing bounces

Palette

#f7f3ea cream, #1f1d1a warm black, #6b665e muted, #e4ddd0 line, #c2603e terracotta accent, #ede7da subtle surface

Type

Fraunces, Newsreader or Instrument Serif for headings (500-600 at 36-56px), DM Sans, Geist or Manrope for body at 16-17px; alternatively Söhne-alike "Instrument Sans" alone

Do

  • pick warmth once: every grey should carry a touch of yellow or red so nothing looks cold
  • use 1px borders in #e4ddd0 rather than shadows; one soft shadow max for a floating element
  • keep the accent to under 5% of the page (links, one button, one tag)

Don't

  • do not mix a cold blue accent into the warm palette
  • do not add dark mode as an afterthought; if you need it, build a warm dark (#1c1a17) not a cold one
  • do not crowd; the style dies without space

Known for it: Arc browser site, Cosmos, Read.cv, Bearblog themes, Are.na (partial)

CSS seed
: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

Build the site in cream-paper warm minimal style. Background #f7f3ea, secondary surface #ede7da, text #1f1d1a, muted #6b665e, borders #e4ddd0, single accent #c2603e. Fonts: Fraunces 500 for headings at 52/34/24px with -0.015em tracking and line-height 1.1, DM Sans 400 at 17px for body with line-height 1.65, 13px 500 for labels. Layout: content max-width 720px for text and 1080px for grids, 24px page padding, 112px between sections. Cards are surface #ede7da with 1px #e4ddd0 border, border-radius 12px, 24px padding, no shadow. Primary button: #1f1d1a background, #f7f3ea text, radius 10px, 44px tall; secondary is a text link in #c2603e with a 1px underline offset 4px. Tags: pill, #ede7da, 12px uppercase 0.06em. Images get radius 12px and a 1px border. Icons 20px, 1.5px stroke, #6b665e. Motion: 200ms ease on hover colour and a 400ms fade on page load only. No pure white or pure black anywhere.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in cream-paper warm minimal style. Background #f7f3ea, secondary surface #ede7da, text #1f1d1a, muted #6b665e, borders #e4ddd0, single accent #c2603e. Fonts: Fraunces 500 for headings at 52/34/24px with -0.015em tracking and line-height 1.1, DM Sans 400 at 17px for body with line-height 1.65, 13px 500 for labels. Layout: content max-width 720px for text and 1080px for grids, 24px page padding, 112px between sections. Cards are surface #ede7da with 1px #e4ddd0 border, border-radius 12px, 24px padding, no shadow. Primary button: #1f1d1a background, #f7f3ea text, radius 10px, 44px tall; secondary is a text link in #c2603e with a 1px underline offset 4px. Tags: pill, #ede7da, 12px uppercase 0.06em. Images get radius 12px and a 1px border. Icons 20px, 1.5px stroke, #6b665e. Motion: 200ms ease on hover colour and a 400ms fade on page load only. No pure white or pure black anywhere.

## 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 }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.