Notion Soft Neutral

---
name: notion-soft-neutral
description: Apply the Notion Soft Neutral visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Notion Soft Neutral, mentions Notion style, document-first UI, warm productivity neutral, or describes warm gray neutrals, hover-reveal controls, single-column reading layout — 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
---

# Notion Soft Neutral Design System

Warm, low-chroma, document-first productivity styling: soft ivory-gray surfaces, warm charcoal text, a single calm blue accent, tiny radii, and controls that stay invisible until hovered. The interface recedes so the user's own content feels like the product.

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 Notion Soft Neutral.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (Notion style, document-first UI, warm productivity neutral, wiki minimal), or describes its traits: warm gray neutrals; hover-reveal controls; single-column reading layout; inline emoji icons; gray callout blocks; barely-there shadows.

## Design tokens

### Color palette

- Page background — the paper: `#ffffff` (--color-bg)
- Sidebars, callouts, and hover wells — warm ivory gray: `#f7f6f3` (--color-surface)
- Primary warm charcoal ink: `#37352f` (--color-text)
- Placeholder text, captions, metadata: `#787774` (--color-text-muted)
- Links, selection, and focused controls: `#2383e2` (--color-accent)
- Hairline dividers and input edges: `#e9e9e7` (--color-border)
- Text highlight and warning-tinted callouts: `#fdecc8` (--color-highlight)

### Typography

- Display / headings: Inter (fallback: -apple-system, Segoe UI, sans-serif) (ideal: System UI stack (SF Pro / Segoe UI), premium — use Inter as the free substitute)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif) (ideal: System UI stack (SF Pro / Segoe UI), premium — use Inter as the free substitute)
- Type scale: 1.333 ratio, base 16px — computed steps: 16px / 21px / 28px / 38px / 51px / 67px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.2, letter-spacing -0.01em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 96 — Dense chrome, airy content: sidebar rows are 28px tight, but the reading column gets 1.6 leading and generous block spacing like a well-set document.
- Border radius: sm 3px, md 6px — Small radii only — 3px on buttons and inputs, 6px on cards and images. Nothing pill-shaped.
- Border treatment: 1px solid #e9e9e7 — Hairlines on inputs and table cells; most block separation is whitespace or a surface-tint change, not a line.

### Shadows

- subtle: `0 1px 2px rgba(0,0,0,.06)` — Cards and small raised elements
- popover: `0 4px 12px rgba(15,15,15,.1), 0 0 0 1px rgba(15,15,15,.05)` — Menus, slash-command palette, dialogs

### Layout

- Max content width: 900px
- Single reading column ~700–900px, generously padded
- Collapsible warm-gray sidebar for navigation
- Blocks stack vertically; columns are an opt-in exception
- Page begins with an oversized emoji icon and a plain title

### Effects

- Hover-reveal block controls (drag handle, + button) fading in at 100ms
- Warm gray hover wash on every interactive row
- Emoji used as first-class icons for pages and callouts

### Motion

- Easing: ease; durations 100ms / 200ms / 300ms
- Controls fade in/out on hover rather than sliding
- Sidebar and toggles animate height at base duration
- No decorative motion anywhere in the content column

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #f7f6f3;
  --color-text: #37352f;
  --color-text-muted: #787774;
  --color-accent: #2383e2;
  --color-border: #e9e9e7;
  --color-highlight: #fdecc8;
  --radius-sm: 3px;
  --radius-md: 6px;
  --shadow-subtle: 0 1px 2px rgba(0,0,0,.06);
  --shadow-popover: 0 4px 12px rgba(15,15,15,.1), 0 0 0 1px rgba(15,15,15,.05);
  --border-default: 1px solid #e9e9e7;
  --font-display: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: ease;
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
}
```

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

## Component recipes

- **Nav:** 240px warm-gray sidebar with 28px rows, tiny 14px labels, emoji page icons, and hover-only affordances; top bar is a plain breadcrumb
- **Hero:** For marketing: plain white, large 600-weight charcoal headline, one-line muted subhead, small blue CTA — closer to a document title than a hero
- **Card:** White or #f7f6f3 surface, 6px radius, subtle shadow, 16px padding; database cards show a cover image and tiny property rows
- **Button (primary):** Solid #2383e2, white text, 3px radius, 32px tall, 14px 500 label — deliberately modest
- **Button (secondary):** White fill, 1px #e9e9e7 border, charcoal text; gray hover wash
- **Form fields:** 1px hairline border, 3px radius, white fill; focus shows a soft blue ring (#2383e2 at ~30%) rather than a hard outline

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

A 900px single-column page where toolbars, drag handles, and ⋮⋮ block controls materialize only on hover, and content blocks like callouts sit in warm #f7f6f3 wells with an inline emoji as their icon. Spend boldness here; keep everything else quiet.

## Do

- Keep chroma near zero everywhere except links and selection
- Hide secondary controls until hover — quiet by default is the core interaction idea
- Use warm grays (#f7f6f3, #e9e9e7), never cool blue-grays
- Let emoji do the iconography in callouts and page headers

## Don't

- No saturated brand colors on surfaces — tint washes stay under ~8%
- No large radii, pills, or floating gradient CTAs
- Don't add heavy borders around content blocks; separation is whitespace
- Avoid dense multi-column layouts as the default reading experience

## Accessibility notes

- text-muted #787774 on white measures ~4.5:1 — right at the AA boundary; keep it at 14px+ and never use it for essential instructions
- Accent #2383e2 on white is ~3.9:1 — below AA for small text; underline links or reserve the blue for 18px+ and icon-plus-label pairs
- Hover-reveal controls must also be reachable by keyboard focus, or they are invisible to non-pointer users

## Reference sites

- Notion: https://www.notion.com
- Coda: https://coda.io
- Craft: https://www.craft.do

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

Install this skill

unzip notion-soft-neutral.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/notion-soft-neutral.json

Settings → Capabilities → Skills → Upload skill → notion-soft-neutral.zip