Notion
A warm paper notebook in the midday sun
Notion's interface looks like a beloved paper notebook in broad daylight: a warm, creamy canvas (#f6f5f4) that feels tactile rather than sterile, generous sans-serif typography lending editorial weight to the product copy, and color used as sparse punctuation—peach "pills" highlight verbs, a single blue anchors the main action, and a rotating array of accent hues (coral, amber, sky, midnight) color the card backgrounds like stickers. Cards are arranged on a canvas with thin borders and corners—no shadows, no chrome—like the lined sections of a Moleskine notebook. Animation is playful and springy, with smooth transitions at 200ms and springy character animations that bring life to the interface without being decorative.
Centered, the maximum width is limited to approximately 1440px. The main element is a centered stack: a row of symbols → a large two-line headline with an embedded colored pill → a subheading → a row with two call-to-action buttons → a large product UI mockup. Below the main element, sections alternate between grids of white cards and full-color accent panels. The logo wall is a centered single-row grid of partner logos in grayscale. The feature blocks use a two-column layout (text on the left, colored panel on the right), alternating left to right between sections. The "Ask your assistants on demand" section uses a 2x2 card grid, where the top card takes up the full width, and the bottom row is divided into two equal columns. The gutters between sections are generous (~80px), creating a calm vertical rhythm. The navigation is a fixed 64px tall top bar with centered navigation elements and right-aligned action buttons.
Illustrations are paramount, with no photos. The visual language is built on flat, illustrated symbols (rounded edges in 2px colored circles), abstract decorative elements (hand-drawn squiggles, glitter, arrows, flower shapes), and mockups of the product's user interface. The symbols appear in the main window as a horizontal row of seven avatars and are scattered across the page as playful punctuation. Product screenshots are the only "real" visual elements: they show the actual Notion interface (Kanban boards, document views, AI agent panels) with a full set of elements and real data. The product mockup in the main window is large, centered, and casts a single shadow separating it from the canvas. There are no lifestyle photos, no stock images, no abstract 3D renders.
Palette
Brand
- Notion Blue
#0075de— The main element filling the call-to-action (CTA) button, an accent in the active navigation, filled action buttons are the only color scheme in a nearly monochrome system that is saturated enough to be perceived as a switch.
Neutral
- Paper Warmth
#f6f5f4— The page canvas, main window background, and section background are all warm, slightly beige colors that give the system a tactile, analog feel. - Pure White
#ffffff— Card surfaces, raised panels, logo background, contrasting text on dark cards. - Ink Black
#000000— Main text, navigation links, headings - used with different transparency (100%, 95%, 90%, 60%, 40%, 20%) to build hierarchy without adding new colors. - Charcoal
#111111— A dark text option for those UI areas where pure black would look too harsh. - Stone
#757575— Secondary navigation text, muted helper text, disabled button labels - 60% ink alpha - Graphite
#615d59— The main text has a warm tone - brownish gray, which harmonizes with the warm background.
Typography
from 12 to 96px · 10 steps
- NotionInter — replacement: Inter · outlines 400, 500, 600, 700 · The main sans-serif font is a geometric humanist with subtle nuances, used at sizes 400 for body text, 500 for navigation/user interface, and 600-700 for headings. The font scale uses aggressive negative letter spacing at larger sizes (-4.6px at 96px, -2px at 72px), which makes the heading feel more compact and confident, rather than airy.
- Lyon Text — replacement: Source Serif Pro · outlines 400 · The editorial serif font, reserved for individual sections of the main text and section introductions, is used sparingly (four times) to give the typeface literary weight, similar to a quote in a magazine layout. It functions as a systemic accent rather than a parallel hierarchy.
Intervals and form
| Purpose | Meaning |
|---|---|
| Density | average |
| Basic step | 8px |
| Button radius | 8px |
| Card radius | 12px |
| Shadows | no - borders instead of shadows |
| Between sections | 80px |
| Page width | 1440px |
AI will build your website in Notion style and fill it
- Fill with products and posts via the link - Instagram, TikTok, Facebook.
- Transfer content from your old site—just specify the address.
- Modern design on the best engine: React ( Next.js) with server rendering and SEO optimization out of the box.
- Fully automated SEO optimization for search results and neural network recommendations.
Similar styles
- Mollie — A cashmere counter, a dark ledger. Leave ample white space for editorial design around the black text, then reinforce product-related points with warm creams, espresso browns, and tactile photos of actual payment methods.
- Kagi — A separate reading room. Create an open white space around bold graphite text, using subtle purple accents and warm pastel surfaces to break up the tranquility.
- Milanote — Milanote is a dedicated creative studio. Create editorial gallery-style pages using floating visual boards: dark framed walls, white display space, and screenshots that look like real objects with a soft depth.
- Co2 — A climate atlas in winter light. Create pages like an aerial document landscape, where serif headings, category-coded data, and icy images highlight wide white margins.
- GitButler — Turquoise at the end of the text. A combination of high-contrast serif headlines with subtle technical grids, warm graphite surfaces, and a discreet turquoise accent.
- ElevenLabs — A photo essay in warm cream tones with subtle headlines. A Bauhaus-style notebook—eggshell-colored paper, black ink, and a single purple and orange accent for product display.
- Awesomic — Editorial zinc mesh with orange punctuation marks reminiscent of confetti
- Monad — editorial technical journal on warm parchment
- Dub — Link's matte rice paper control panel
- Seline Analytics — A quiet analytical table on warm paper
- Anthropic — A scientific field journal on warm vellum—calm ivory surfaces, serifed editorial headings, and a single clay accent that appears only when action is needed.
- Calendly — Dark blue ink on cold marble