# Notion homepage design spec (free) - Site: notion.com - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Notion. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Notion's name, logo, wording, imagery or artwork. - Contents: 1. Hero, 2. Navigation, 3. Signature component. - Build your own site from this spec: https://iter0.com/build --- # Hero — centered type, accent pill, and interface preview **Evidence provenance:** Public-page captures and computed styles at `https://www.notion.com/`: desktop 1440×900, scrollY 0; phone 390×844, scrollY 0. The requested URL `https://notion.com/` resolved to the observed destination `https://www.notion.com/`. Measurements are CSS pixels. The desktop capture shows the hero and the start of the following logo strip; the phone capture shows the hero, logo strip, and beginning of the next section. **CRAFT ARCHETYPE:** product-UI-led ## The big idea Use a white, centered opening with a bold two-line desktop headline, a rounded inline highlight, supporting text, two adjacent actions, and a wide application-interface preview. At 1440px, the headline box is (94,144), 1252×210px; the larger containing header is 1252×308px. The supporting line is at y=366, 20px/28px, and the 156×38px actions begin at y=414, at x=556 and x=728. The 958×599px preview begins at (241,533). Its lower portion is cropped by the 900px viewport; the image element continues below the capture. Small illustrated accents sit at (104,747), 160×170px, and (1040,386), 160×170px. Their full artwork and behavior are unknown. ## Layers Keep the text group centered and the preview directly beneath it. The inline highlight is a pale green capsule with a small contrasting circular accent; preserve the shape and inline emphasis, not the original wording or artwork. Use 8px action radii and a 16px gap. The preview uses `object-fit: cover`; do not infer its unseen lower content from the crop. Leave generous white space around the text and media. ## Type Use a neutral sans-serif. Desktop headline: 96px/100px, weight 600, −4.6px tracking; the highlighted word is 72px/87px, weight 500. Supporting text is 20px/28px. Action labels are 16px/24px, weight 500. Keep the text centered. ## Colour White canvas, near-black type, blue primary action (#0075DE), and pale-blue secondary action (#E6F3FE). The highlight is pale green; exact sampled colour is unavailable. ## States and motion Both actions report 0.2s background/text transitions. The illustrated assets report a 0.3s rotate transition, but its trigger and visible result are unknown. Do not invent preview animation. ## Phone at 390px The 64px navigation ends at y=64. Seven 48×48px circular illustrations form a row from x=51 to x=339 at y=104, with 40px steps. The headline is (16,176), 358×145px, 42px/48px, weight 600, −1.5px tracking; its inline highlighted word is 31.5px/38.1px. Supporting copy is (16,333), 358×48px, 16px/24px. Actions stack at x=55: each 280×38px, y=401 and 447. The desktop preview and flanking illustrations are not visible in this viewport; their phone treatment is unknown. A centered trust caption begins at y=557, followed by a moving logo strip; the next section heading begins at (16,693), 358×80px. These visible elements establish the crop, not the hero’s unseen lower content. ## Do NOT copy or add Do not reproduce source copy, marks, interface imagery, illustrations, claims, or customer proof. Do not add unobserved overlays or media controls. ## Checks you can run At 1440px verify headline bounds (94,144,1252,210), actions y=414, preview bounds (241,533,958,599), and desktop accent bounds. At 390px verify the illustration row, headline, supporting line, stacked actions, and caption positions above; do not claim the preview is absent below the fold. --- # Navigation — 64px rail with compact phone controls **Evidence provenance:** Public-page captures and computed styles at `https://www.notion.com/`: desktop 1440×900 at scrollY 0 and 900, and phone 390×844 at scrollY 0. The requested URL `https://notion.com/` resolved to the observed destination `https://www.notion.com/`. Desktop navigation is also present in captures at scrollY 1800 and 2700. Measurements are CSS pixels. **CRAFT ARCHETYPE:** product-UI-led ## The big idea Build a white, 64px-high navigation band with a small left brand-mark position, centered destination controls, and right-aligned account actions. Preserve this measured spatial grouping without reproducing any source identity or labels. On desktop, the left mark link occupies (24,15), 33×34px. The central control run spans x=517–923, with controls at y=17 and height 30px. The account link begins at (1207,17), 61×30px; the filled action occupies (1284,14), 132×36px. The navigation is observed at the top of scrolled captures, but its computed position is `relative`; do not describe it as fixed or sticky. ## Layers The nav spans the full viewport width and has a white background with a fine lower separator visible in the capture. Central controls use 5px 10px padding, 4px radii, and an 8px internal gap where measured. Leave flexible space between the center group and account controls. The filled action uses 4px 14px padding and an 8px radius. At phone width retain the 64px band, place the mark at (16,15), 33×34px, the filled action at (204,14), 132×36px, and a 44×44px menu button at (341,10). Desktop destination controls are not displayed in the phone capture. ## Type Use a neutral sans-serif. Visible destination and action labels measure 14px/20px, weight 500. The nav container’s inherited 16px/24px style is not the visible label size. Keep labels vertically centered and aligned; use replacement copy. ## Colour The canvas is white; text is near-black. The filled action is sampled as RGB(0,117,222), with white text. Do not add unobserved badges, gradients, or decorative colour. ## States and motion The nav container reports a 0.2s box-shadow transition; individual destination controls report a 0.15s background-color transition. Hover appearance, menu expansion, and interaction outcomes are unknown. A menu button is visible on phone, but its open state is not evidenced. ## Do NOT copy or add Do not reproduce source marks, labels, icons, or copy. Do not invent a drawer, search control, account avatar, sticky behavior, or active-link treatment. ## Checks you can run At 1440px verify a 1440×64px band, mark bounds (24,15,33,34), 30px-high central controls at y=17, and filled action bounds (1284,14,132,36). At 390px verify mark (16,15,33,34), action (204,14,132,36), menu button (341,10,44,44), and absence of desktop destination controls in the captured layout. Confirm positioning is not asserted as fixed. --- # Signature component — paired capability cards **Evidence provenance:** Public-page capture and computed styles at `https://www.notion.com/`, viewport 1440×900, scrollY 900; phone capture at 390×844, scrollY 0. The requested URL `https://notion.com/` resolved to the observed destination `https://www.notion.com/`. Desktop coordinates are relative to the viewport at the recorded scroll position. The component is a distinct below-hero feature section, not a repeated hero or footer. The phone capture exposes its heading and only the top of its first card. **CRAFT ARCHETYPE:** product-UI-led ## The big idea Create a two-card capability section with an editorial heading above equal-width cards. Each card pairs a compact category label and bold feature title with a circular arrow affordance and a large product image. At desktop scrollY 900, the section heading begins at (106,589), 655×56px. Cards begin at y=677: first x=106, second x=732; each is 602×560px, separated by 24px. Their images extend past the card’s measured lower boundary, so reproduce the evidenced crop rather than forcing the complete image into the visible card area. ## Layers Use a 1229px-wide content span from x=106 to x=1335. Each card has a white body, 12px radius, and a 108px-tall warm near-white header (#F9F9F8) with 24px padding. The category label begins 24px inside the card at y=701; the title begins at y=729. Place a 32px black circular arrow control beside the title. The image begins at x+24, y=810 and measures 554×554px, with 12px top corner radii. The image’s full content and lower-card treatment are not established by this viewport. ## Type The section heading is 54px/56px, weight 700, −1.875px tracking. Category text is 14px/20px, regular. Card titles are 22px/28px, weight 700, −0.25px tracking. Use original replacement wording, not source copy. ## Colour Keep the page and card body white, header RGB(249,249,248), and text near-black. The circular arrow is black with a white glyph. No additional card border or gradient is evidenced. ## States and motion Cards report a 0.2s outline-colour transition. Captures do not establish hover appearance or arrow behavior. Provide accessible keyboard focus, but treat the reference’s focus styling as unknown. ## Do NOT copy or add Do not reproduce source copy, brand marks, product screenshots, claims, or fabricated proof. Do not add cards, carousel controls, or interaction states unsupported by the captures. ## Checks you can run At desktop size verify heading (106,589,655,56), card bounds (106,677,602,560) and (732,677,602,560), 24px gap, 108px header, 24px padding, 32px arrow, and 554px image width. At 390px verify heading (16,693,358,80), 32px/40px, and first card (16,789), 358×385px, 6px radius, 116px header, and 16px padding. The phone viewport crops that card; the second card’s phone placement is unknown.