# Cursor homepage design spec (free) - Site: cursor.com - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Cursor. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Cursor'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 --- # Airy product-led hero with cropped application preview **Evidence provenance:** Desktop capture, 1440×900 at scrollY 0, matched to measured desktop rows; phone capture, 390×844 at scrollY 0, matched to measured phone rows. Coordinates are viewport-relative. The preview is an image with `object-fit: cover`; its overlaid interface is part of the observed artwork. **CRAFT ARCHETYPE:** product-UI-led ## The big idea Set a short, restrained headline and compact calls to action above a large, immersive product preview. Generous blank space separates the fixed navigation from the headline; the preview then anchors the lower half of the desktop view. The phone version preserves the left-aligned hierarchy but shows only part of the wide interface artwork, not a complete miniature. ## Layers - Use the measured warm off-white surface, rgb(247, 247, 244), and dark foreground, rgb(38, 37, 30). Desktop hero section begins at y=52 and measures 1440×1086; its padding is 112px top, 20px horizontal, and 67.2px bottom. - Desktop headline: x=70, y=164, 658×65. Two pill actions begin at y=251, measure 216×43 and 183×43, with a 10px gap. Preview image: x=70, y=351, 1300×720. - The artwork depicts a layered desktop application over a photographic landscape. Preserve the broad image and its overlap of application panes as visual structure, not as source interface content. ## Type Use a neutral sans-serif. Desktop heading measures 26px/32.5px, weight 400, tracking −0.325px. Desktop action labels are 16px. Keep the heading relatively small compared with the expansive preview; do not turn the hero into a large display-type composition. ## Colour Keep the page at rgb(247, 247, 244), text at rgb(38, 37, 30), and secondary action fill at rgb(230, 229, 224). The primary pill reverses the page/text contrast. Let the preview supply the richer color; avoid added decoration. ## States and motion The image and controls are observable in static captures; hover and image-motion behavior are unknown. Keep the actions as distinct pill links without inventing transitions. ## Phone at 390px The measured fixed header is 390×56. The hero section begins at y=56, measures 390×1066, and uses 105px top, 18.75px horizontal, and 63px bottom padding. The heading sits at (19,161), size 353×61, with 24.375px/30.4688px type and −0.304688px tracking. One dark action sits at (19,243), 138×44; the second desktop action is absent. The image begins at (19,339), is 353×720, and uses cover cropping. At the screenshot’s bottom, y=844, only 505px of its height is visible. The image’s desktop-scale interface is clipped at the right edge: do not scale it down to fit or claim unseen lower content is absent. ## Do NOT copy or add Do not reproduce source wording, identity, logo, artwork, interface labels, or product claims. Do not add extra phone actions or assert unobserved behavior. ## Checks you can run At 1440×900, check 52px header, hero top y=52, heading 658×65 at x=70, two 43px actions, and preview 1300×720 at (70,351). At 390×844, check 56px header, heading 353×61 at y=161, one 138×44 action at y=243, and 353×720 cover image at y=339. --- # Fixed desktop bar; expanded phone navigation **Evidence provenance:** Desktop capture at 1440×900, scrollY 0, and below-hero captures at scrollY 900, 1800, and 2700; the measured header remains fixed at the same viewport coordinates. Phone capture at 390×844, scrollY 0, plus computed boxes. The phone screenshot visibly shows the expanded navigation, not a closed-menu state. **CRAFT ARCHETYPE:** type-led ## The big idea Use a thin, quiet bar to balance a compact identity mark, centered text navigation, and right-aligned account and action links. At phone width, preserve identity, account access, and a menu control in the top bar; the observed phone state also displays a large, vertically stacked navigation list beneath it. ## Layers - Desktop header spans 1440×52 at (0,0), is fixed, and has 20px horizontal padding. The identity link measures 96×24 at (68,14). Center nav measures 437×34 at (502,9), containing five links with 14px text and 34px-high hit areas. - Right-side controls occupy x=1103–1370: account link 54×31 at y=11, secondary pill 110×27 at x=1164, and dark pill 88×27 at x=1282. The page and header background are rgb(247,247,244). - Phone header measures 390×56. The identity link is 95×24 at (17,16); account link is 50×29 at (285,13); menu button is 32×32 at (344,12). In the captured expanded state, five large links occupy x=19, width 353, y=119, 170, 221, 272, and 323; each box is 353×51. Do not describe this as a closed-only menu or assume its dismissal behavior. ## Type Use the same neutral sans-serif as the page. Desktop links are 14px/21px, regular weight, with 15px horizontal padding. Phone header text is 15px/22.5px; expanded links compute to 33.75px/40.5px, weight 400, tracking −0.675px. The account label is 13.125px/19.6875px. ## Colour Use rgb(38,37,30) foreground on rgb(247,247,244). Desktop secondary action is pale and the final action dark with light text. The phone menu list is dark text on the page surface. No distinct header border or shadow is measured. ## States and motion The desktop bar remains fixed across scroll captures. Phone evidence is the expanded list with a menu icon visible; opening/closing animation and hover effects are unknown. Do not invent dropdown styling or transitions. ## Do NOT copy or add Do not reproduce the original identity, logo, link labels, destinations, or icon. Do not add a border, shadow, active marker, or unsupported menu behavior. ## Checks you can run At 1440px, assert fixed 1440×52 header, 437×34 nav at x=502, and action widths 110px and 88px. At 390px, assert 390×56 header, identity at x=17, account at x=285, menu at x=344, and expanded link boxes at y=119 through 323, each 353×51. --- # Split editorial feature with application-preview artwork **Evidence provenance:** Desktop capture labelled 1440×900 at scrollY 900, matched to the measured feature section and its child boxes. This is the first distinct below-hero feature panel, not the hero or a repeated panel. Measurements are viewport-relative in this scrolled capture; copy is paraphrased rather than transcribed. **CRAFT ARCHETYPE:** product-UI-led ## The big idea A wide, softly differentiated panel pairs an editorial explanation with a large product-interface preview. On desktop, the text occupies the left region and the preview occupies the right; both sit within one rounded, linked surface. Keep the overall treatment restrained and let the interface image provide detail. This is a split editorial feature, not a card grid. ## Layers - At scrollY 900, the feature section and panel begin at viewport y=482. The section measures 1440×715 with 20px horizontal padding; its linked panel is x=70, 1300×715, with 17.5px internal padding, 4px corner radius, and a 10px grid gap. - Panel fill is rgb(242,241,237); surrounding page is rgb(247,247,244). Text column starts at x=90 and measures 383px wide. Heading box is 383×29 at y=763; supporting text is 383×86 at y=791; link begins at y=892. - The product preview sits to the right and shows a multi-pane application window. Measured preview details include a tab strip at x=897, y=568, 29px high, and a right-side explanatory column at x=949, width 452px. Some preview content extends past the panel’s x=1370 edge in measured boxes; preserve the observed expansive right-side composition rather than forcing an unsupported fit. ## Type Use the site’s neutral sans-serif for editorial copy. Heading and supporting text both measure 22px/28.6px, weight 400, tracking −0.11px; supporting text uses 60% foreground opacity. The link is 16px/24px. Interface details use compact system sans-serif: observed labels include 12px controls and 13px/20.15px explanatory text. ## Colour Use rgb(38,37,30) foreground, rgb(247,247,244) page surface, and rgb(242,241,237) panel surface. The measured link accent is rgb(245,78,0). Keep the preview’s light panes subtly differentiated; do not introduce a heavy frame. ## States and motion The complete panel is an anchor. Its hover appearance and destination are unknown. A preview element shows a shimmer animation in computed styles, but its visual effect and timing are not established by the static capture; do not extrapolate this into panel motion or interaction. ## Do NOT copy or add Do not reproduce source copy, identity, logos, proprietary interface text, product claims, or fabricated content. Do not add controls or imply the preview is interactive. ## Checks you can run At 1440×900, scrollY 900, assert panel at (70,482), size 1300×715, radius 4px, padding 17.5px, and text column x=90, width 383px. Check heading at y=763 with 22px/28.6px type, link at y=892, and right preview column beginning near x=949. Avoid substituting centered cards for the split composition.