# Stripe homepage design spec (free) - Site: stripe.com - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Stripe. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Stripe'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 **Evidence provenance:** Public-page capture requested at `https://stripe.com/`, which resolved to the observed destination `https://stripe.com/nz`. Measurements are from the supplied computed-style evidence and captures: desktop 1440×900 at scrollY 0; phone 390×844 at scrollY 0. The hero ends at document y=761 desktop and y=550 phone. Artwork extends beyond the visible hero and viewport; unseen portions are unknown. **CRAFT ARCHETYPE: illustration-led** ## The big idea A spacious white text field shares the hero with oversized, brightly colored abstract artwork. The artwork crosses the text area, but the text remains visually legible. Keep the headline and paired actions as the primary content; do not treat the artwork as a contained card. ## Layers Desktop header ends at y=76. The hero spans x=0–1440, y=76–761, with 16px section padding. Intro line begins at (208,199), and the headline box is (208,258), 958×221. Headline styling measures 48px, 55.2px line-height, weight 300, and −0.96px tracking. Actions begin at y=519: 141×48 and 212×48, with an 8px gap. Artwork image box is (337,−107), 1392×975; its crop is intentional evidence, not a missing-asset state. A partner-logo strip begins around y=708 and continues beyond the hero boundary; exclude its source marks from a recreation. ## Type Use a light sans-serif headline, compact introductory line, and subordinate action labels. The heading contains multiple observed color spans; any cycling or animation is unknown. ## Colour White field, deep navy text, saturated violet primary action, and translucent blue, pink, orange, and violet artwork. Preserve text contrast over the art. ## States and motion Action transitions are 0.3s ease-out. Artwork movement and headline animation are unknown. ## Do NOT copy or add Do not reproduce source wording, marks, artwork, partner identities, changing figures, or unobserved motion. ## Checks you can run At 1440px verify hero y=76 and height 685px, headline x=208/y=258 at 48px, actions y=519 and 48px high, and image bounds (337,−107,1392,975). Ensure the artwork is oversized and cropped. ## Phone at 390px At 390×844 the header is 66px high and hero bounds are y=66–550, height 484px. Intro begins (16,143), 12px; headline is (16,191), 358×70, 34px/35.02px, tracking −0.34px, visibly two lines. Actions move below it to x=16, width 358px, y=301 and 353, each 44px high with 8px separation. Desktop links and utility actions are hidden; a 40×40 menu control is at (338,12). Artwork bounds are (−117,−217), 624×975; visible color crosses behind the text and exits at the right edge. At y=485 the partner strip begins and remains visible to y=550; the next section starts at y=550. Do not infer the cropped artwork or later hero content. --- # Navigation **Evidence provenance:** Requested URL `https://stripe.com/` resolved to observed destination `https://stripe.com/nz`. Measurements use the supplied computed-style evidence and captures at desktop 1440×900, scrollY 0, and phone 390×844, scrollY 0. The menu-open, hover, focus, and scrolled states are unobserved. **CRAFT ARCHETYPE: type-led** ## The big idea Build a shallow, transparent horizontal header. At desktop, separate a compact identity treatment, central navigation controls, and right-aligned utility actions. At phone width, retain the identity and replace the desktop control groups with one menu control. Do not force desktop navigation into the narrow layout. ## Layers Desktop header bounds are (0,0), 1440×76. Nav bounds are (89,6), 1262×64, with 10px 16px padding, 28px gap, and 6px radius. The identity link box is (105,26), 60×25. Central controls begin at x=193; four measured control boxes are 77×40, 78×40, 91×40, and 86×40. A further link measures 44×38 at x=621. Right utility action boxes are (1106,18), 84×40 and (1198,18), 137×40. Header and nav backgrounds are transparent in computed styles. Preserve the generous interval between central links and utility actions without copying the source identity or labels. At phone size, header and nav both measure 390×66. Nav padding is 12px 12px 14px 16px, with a 16px gap. Identity box is (16,20), 60×25. The desktop link groups and both utility actions are absent in this capture. The sole menu control is (338,12), 40×40, with 4px radius and pale violet surface. Its open-state composition is unknown. ## Type Observed desktop navigation labels use 14px regular sans-serif with 14px line-height. Utility actions use 14px labels. Preserve compact scale and clear grouping, not source wording or wordmark. ## Colour Use transparent header surfaces over the hero, dark navy navigation text, violet identity accent and filled utility action, and a pale lavender phone control. Exact hover colors are unknown. ## States and motion Desktop links and actions have 0.24s color/background/border transitions with a cubic-bezier curve. Phone menu surface transitions are 0.3s. Hover, focus, menu-open, sticky, and dropdown behavior are unknown. ## Do NOT copy or add Do not copy source labels, identity artwork, icons, destination-specific content, or unobserved dropdown, sticky, or open-menu behavior. ## Checks you can run At 1440px verify header height 76px; nav x=89, y=6, 1262×64; 28px gap; identity x=105; and action heights 40px. At 390px verify header height 66px, identity x=16, menu x=338 at 40×40, and absence of desktop controls. --- # Below-hero signature: product-capability showcase **Evidence provenance:** Requested URL `https://stripe.com/` resolved to observed destination `https://stripe.com/nz`. Evidence includes desktop captures at 1440×900, scrollY 900 and 1800, plus phone 390×844, scrollY 0. The section begins at document y=761 and measures 1440×2196 in computed geometry. Its first row is visible at scrollY 900; further product panels appear at scrollY 1800. The phone capture shows the section beginning at y=550. Descriptions below abstract source UI contents. **CRAFT ARCHETYPE: product-UI-led** ## The big idea A distinct capability showcase pairs concise panel headings with large product-interface compositions. The first row is asymmetrical: a broad payment-oriented interface beside a narrower usage-and-chart interface. Later rows show smaller panels and a wide embedded-interface panel. Use this observed variation rather than assuming a uniform card grid. ## Layers The desktop section bounds are x=0, y=761, width 1440, height 2196; horizontal padding is 16px. Heading begins at (104,854), box 593×40, with 32px type, 35.2px line-height and −0.64px tracking. Supporting text shares the observed 32px treatment and occupies 774×110 at (104,854); its apparent overlap is preserved by the captured inline layout. First-row panel boxes are (104,887), 816×676 and (936,887), 400×676 in document coordinates. The first panel has a 24px heading inset and combines a 280×477 mobile device image with a wider checkout interface. The adjacent panel has a 24px inset and compact usage interface with chart. A later row begins around document y=1579: three 400×676 panels at x=104, 520, and 936. A subsequent embedded panel measures 1232×450 at x=104. Do not copy visible source interface text or values. ## Type Panel headings are 26px, weight 300, 29.12px line-height, and −0.26px tracking on desktop. Use dark navy headings and muted blue-gray supporting text. Later section and phone typography may differ; do not extrapolate unseen states. ## Colour Observed panels sit on white within a pale cool-gray surrounding field. Interfaces use restrained white surfaces, navy text, muted details, and localized warm and violet gradients. Keep decorative color subordinate to interface legibility. ## States and motion Panel controls report a 0.1s stepped z-index transition; heading transform is 0.8s ease-out. A visible expansion affordance does not establish its outcome. Trigger, interaction result, and hover appearance are unknown. ## Do NOT copy or add Do not reproduce source labels, product or company names, logos, screenshots, prices, chart data, or numerical claims. Do not invent functioning controls. ## Checks you can run Verify section y=761 and height 2196px; heading x=104/y=854 with 32px type; first-row panels at x=104 and 936 with widths 816px and 400px; later three-panel row at x=104/520/936; and wide panel width 1232px. Keep mock UI content original and non-verbatim.