Warm Humanist Minimalism

---
name: warm-humanist-minimal
description: Apply the Warm Humanist Minimalism visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Warm Humanist Minimalism, mentions anthropic style, warm minimal, humanist SaaS, or describes warm cream background, serif display with sans body, muted clay/terracotta accent — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Warm Humanist Minimalism Design System

Calm, literate minimalism: warm cream backgrounds, a serif for headlines and a humanist sans for UI, one muted clay accent, soft edges, and generous line heights. Technology presented with a human, bookish voice.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Warm Humanist Minimalism.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (anthropic style, warm minimal, humanist SaaS, cream and serif), or describes its traits: warm cream background; serif display with sans body; muted clay/terracotta accent; generous whitespace and line height; soft small radii.

## Design tokens

### Color palette

- Warm cream ground: `#faf9f5` (--color-bg)
- Cards and panels: `#ffffff` (--color-surface)
- Tinted section background: `#f0eee6` (--color-surface-2)
- Near-black warm ink: `#141413` (--color-text)
- Secondary text, warm gray: `#6e6d66` (--color-text-muted)
- Clay/terracotta accent: `#d97757` (--color-accent)
- Muted blue for informational moments: `#6a9bcc` (--color-accent-blue)
- Soft warm hairlines: `#e8e6dc` (--color-border)

### Typography

- Display / headings: Lora (fallback: Georgia, serif) (ideal: Tiempos Headline, premium — use Lora as the free substitute)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Type scale: 1.25 ratio, base 17px — computed steps: 17px / 21px / 27px / 33px / 42px / 52px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 500, line-height 1.15, letter-spacing -0.015em
- Body: line-height 1.65, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64, 96 — Unhurried: wide margins, 1.65 body leading, narrow text measures (~65ch); the page should feel like a well-set book.
- Border radius: sm 8px, md 12px, lg 16px, pill 999px — Soft but modest; nothing bubbly.
- Border treatment: 1px solid #e8e6dc — Warm hairlines, close in tone to the background — separation should whisper.

### Shadows

- card: `0 1px 3px rgba(20, 20, 19, 0.06)` — Barely-there card lift
- raised: `0 4px 16px rgba(20, 20, 19, 0.08)` — Modals and popovers

### Layout

- Max content width: 1150px
- Narrow centered prose columns with occasional full-width tinted bands
- Hand-drawn or engraved-style illustrations rather than 3D renders
- Sections separated by whitespace or a soft tint change, rarely by rules

### Effects

- Occasional hand-drawn underline or asterisk ornament in accent color
- Subtle paper-grain texture at 1–2% opacity on large cream fields

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 150ms / 250ms / 400ms
- Gentle fades and small rises; nothing attention-seeking
- Illustrations may draw in on first view
- Hover states are tonal shifts, not lifts

## CSS variables (drop-in)

```css
:root {
  --color-bg: #faf9f5;
  --color-surface: #ffffff;
  --color-surface-2: #f0eee6;
  --color-text: #141413;
  --color-text-muted: #6e6d66;
  --color-accent: #d97757;
  --color-accent-blue: #6a9bcc;
  --color-border: #e8e6dc;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 3px rgba(20, 20, 19, 0.06);
  --shadow-raised: 0 4px 16px rgba(20, 20, 19, 0.08);
  --border-default: 1px solid #e8e6dc;
  --font-display: Lora, Georgia, serif;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --text-base: 17px;
  --leading-heading: 1.15;
  --leading-body: 1.65;
  --tracking-heading: -0.015em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Lora:wght@500;600&family=Inter:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Cream bar, wordmark in serif, 15px sans links in warm gray; hairline bottom border appears on scroll
- **Hero:** Serif headline at 48–72px in warm ink, 60ch muted subhead, clay primary button + quiet text link; ample empty cream around it
- **Card:** White surface, 12px radius, warm hairline border, minimal shadow, 24–32px padding
- **Button (primary):** Clay fill, white text, 8–10px radius, medium sans label; darkens slightly on hover
- **Button (secondary):** Transparent, 1px warm border, ink text; tint fill on hover
- **Form fields:** White, warm hairline border, 8px radius; focus ring clay at 30% opacity

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The pairing of a literary serif headline over cream (#faf9f5) with a single muted clay accent (#d97757) — bookish warmth applied to product UI. Spend boldness here; keep everything else quiet.

## Do

- Set headlines in the serif and everything interactive in the sans
- Keep the palette warm — grays, borders, and blacks all lean cream, never blue
- Hold body measures near 65ch with 1.6+ leading
- Use the clay accent for primary actions and small ornaments only

## Don't

- No pure white page background (#fff is reserved for cards) and no cold neutral grays
- Don't add more than the clay + muted blue accents; rainbow palettes break the calm
- No dramatic shadows, glows, or dark-mode-first styling
- Avoid dense, boxed-in layouts — if it needs a border, try whitespace first

## Accessibility notes

- Ink #141413 on cream passes AAA; muted #6e6d66 on cream is ≈4.9:1 — AA for normal text
- Clay #d97757 on cream is ≈2.9:1 — decorative and large-text use only; never body links without underlines
- White text on clay fills is ≈3.2:1 — passes only for large/bold button labels; consider ink text on clay for small labels

## Reference sites

- Anthropic: https://www.anthropic.com
- Medium: https://medium.com
- Readwise: https://readwise.io

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip warm-humanist-minimal.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/warm-humanist-minimal.json

Settings → Capabilities → Skills → Upload skill → warm-humanist-minimal.zip