# Cream-paper warm minimal

Also called: warm minimalism, cream minimal, beige UI, cozy minimal, paper-white design, quiet luxury web  
Era: 2021 onward (Arc, Notion-adjacent tools, indie SaaS, newsletter sites)  
Page: https://designforai.dev/style/cream-paper-warm-minimal

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

```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

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.