A warm, paper-calm productivity system: an off-white canvas under near-black Inter type, structured by a single confident blue. A playful multi-colour sticker palette carries the personality while the chrome stays quiet — with one inverted deep-indigo hero band.
NotionInter - Notion's tuned cut of Inter (Inter shown as substitute). Hierarchy comes from size and increasingly-tight negative tracking on the display end (-2.125px at 64px); headlines run heavy at 700 while body stays calm at 400 for document readability.
White surface, hairline border, 12px corners. The workhorse marketing card, often topped by a colour-blocked sticker illustration band.
The deep-indigo night hero: the single inverted dark island, carrying white display type and a sticker constellation.
A feature card lifted on Notion barely-there layered shadow: many near-transparent stops, never a hard cast.
8px base unit. Card interiors land around lg (24px); section gaps stack the larger steps for an airy, document-like rhythm.
A deliberate split: tight 4px on form fields, 8px on utility buttons, 12px on content cards, and a full 9999px pill on marketing CTAs and badges.
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Single column; nav → hamburger; CTAs + pricing tiers stack full-width |
| Tablet | 768–1023px | Grids collapse toward 2-up / 1-up; nav condenses |
| Laptop | 1024–1279px | Tightened gutters; 3-col grids retained |
| Desktop | ≥ 1280px | Full multi-column grids; centred ~1200px column |
Touch targets: the pill CTAs clear 44x44 WCAG-AAA. Collapsing: the top nav condenses to a hamburger below the tablet breakpoint (blue CTA stays); multi-column feature grids reflow to a single stacked column; the 4-column pricing table reflows into stacked plan cards; display type scales down while headlines keep weight 700.
Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.
For individuals getting started.
For teams ready to ship.
For organizations operating at scale.
Plan summary + cadence picker + seat-count grid + start-trial CTA. Cadence chips use a 1px ink ring for selection; seat pills polarity-flip to ink fill.
Everything in one workspace - projects, members, and automation across unlimited seats. Billed annually with a 14-day free trial, cancel anytime.
Mono uppercase column headers, alternating canvas rows, status pills wired to semantic color tokens, hairline row dividers, and a footer pager.
Centered cards on canvas, full-width primary CTA, mono uppercase field labels, hairline-divided SSO fallback.
Centered card over a 50% ink scrim. Hairline divider above the action row, secondary text-button on the left, primary on the right.
Outlined icon tile, decimal index, declarative heading, one-sentence body, and a single primary CTA.
Connect a source or upload a CSV to start ingesting records into this workspace.
Four semantic variants — info, success, warning, error. Each is a 4px card with a 3px accent rule on the leading edge, a mono uppercase tag, and a single dismiss affordance.