# Framer homepage design spec (free) - Site: framer.com - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Framer. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Framer'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 — product demonstration Evidence provenance: Based on the supplied desktop and 390px screenshots and computed-style extraction. The screenshot shows a cookie notice overlay; it is not treated as page content. CRAFT ARCHETYPE: product-UI-led ## The big idea Pair a large headline and two actions with a prominent product-media area on a black background. The supplied evidence shows a video frame and a 0:36 counter, but does not establish playback behavior. ## Layers At desktop, the black hero section begins below a 64px navigation bar and measures 1440×981px. The heading begins at x=120, y=164 and measures 721×108px. Two actions sit below it: the primary measures 149×34px and the secondary 143×35px; both have 8px corner radii. The announcement appears separately near the right side. The product media is visible below the heading and actions, with a 0:36 counter visible in the supplied screenshots. Do not infer unshown media details or interface content. ## Type The desktop heading is 54px with 54px line-height, weight 500, and −2.16px tracking. The action labels are 14px. At 390px, the heading is 36px with 36px line-height and measures 350×108px; the action labels are 13px. ## Colour The measured hero section background is RGB(0,0,0). The heading and primary action label are white and black respectively; the primary action background is white. The secondary action background is white at 10% opacity. Do not claim a specific decorative glow or assign colors to unseen media details. ## States and motion A 0:36 counter is visible in the screenshots. They do not establish playback, hover behavior, or transition timing; leave these unspecified. ## Do NOT copy or add Do not reuse the reference wording, brand assets, interface text, customer names, or identities. Do not add unsupported performance claims, fake controls, or invented media behavior. ## Checks you can run At desktop, verify the 64px nav, 1440×981px hero section, 54px/54px heading, and the 149×34px and 143×35px actions. At phone width, verify the 390px-wide section, 36px/36px heading, and 29px-high actions. ## Phone at 390px The nav and hero begin at y=0 and y=64 respectively. The heading begins at x=20, y=124 and measures 350×108px. The two actions begin at y=247 and each measures 29px high; the announcement appears at y=306. The media is visible below the text, in a 390px-wide frame; the screenshot shows a cropped portion of its imagery, not the full desktop composition. --- # Navigation — compact account and route bar Evidence provenance: Based on the supplied desktop and 390px screenshots and measured navigation boxes and text styles. CRAFT ARCHETYPE: type-led ## The big idea Keep the navigation compact against the black page. The desktop screenshot shows an identity, route links, and account actions; the phone screenshot shows the identity, account actions, and a menu icon. ## Layers The desktop bar measures 1440×64px with 20px horizontal padding. The identity text is at x=146, y=25; route controls begin at x=207 and have 40px-high boxes. The login link is at x=1199, y=23. The sign-up control is 66×30px at x=1254, y=17, with an 8px radius. At 390px, the bar is 390×64px; the identity text begins at x=46, login at x=205, and the sign-up control is 66×30px at x=260, y=18. The screenshot also shows a menu icon on the phone layout. ## Type Desktop route labels use 14px text, weight 400, 19.6px line-height, and −0.1px tracking. The identity text is 14px with 14px line-height. Login is 14px with 19.6px line-height and white at 60% opacity. The sign-up label is 14px. ## Colour The navigation background is transparent over the black page. The identity and route labels are white; login is white at 60% opacity. The sign-up control has a white background and black text. The measured control has an 8px radius. ## States and motion The supplied screenshots do not establish dropdown contents, menu behavior, or sticky behavior. Computed styles include general transitions, but do not establish a specific navigation hover result or duration. Do not invent these behaviors. ## Do NOT copy or add Do not reuse the reference identity, logo, route wording, or exact ordering. Do not invent dropdown contents, sticky behavior, or animated menu states. ## Checks you can run At desktop, verify a 1440×64px bar, 20px horizontal padding, 14px route labels, 40px-high route controls, and a 66×30px sign-up control with an 8px radius. At phone width, verify a 390×64px bar and the visible identity, login, sign-up control, and menu icon. ## Accessibility The supplied evidence does not establish a nav-specific focus treatment. Provide usable keyboard focus in an implementation without presenting it as a measured reference detail. --- # Feature examples — agent-assisted design Evidence provenance: Based on the supplied below-fold screenshot and computed-style extraction. The desktop extraction records a 1440×3017px section with a 1200px-wide header, example images, and a separate interface panel. The phone screenshot shows the beginning of this section, but does not provide measurements for its example cards. CRAFT ARCHETYPE: product-UI-led ## The big idea Introduce the section with a large heading and supporting action, then show visual examples alongside a separate product interface panel. The screenshot supports this layout; it does not establish whether the labels are interactive. ## Layers The measured desktop section begins at y=481 and measures 1440×3017px. Its header begins at x=120 and measures 1200×97px. The heading measures 520×97px; the supporting action measures 137×34px. Three example images are visible in the extraction, each 250px wide and respectively 323px, 299px, and 340px tall. Their x positions are 178, 448, and 718, giving 20px gaps between image boxes. Labels are at y=705 and image tops at y=729, a 24px vertical difference. A separate right-side interface panel is visible. At 390px, the section begins at y=739 and measures 390×2169px; its header begins at x=20 and measures 350×111px. The heading measures 330×62px. ## Type The desktop heading is 44px, weight 500, with 48.4px line-height. Example labels are 12px, weight 600, with 14.4px line-height. The visible active label is blue; neighboring labels are subdued white. At phone width, the heading is 28px with 30.8px line-height. ## Colour The page background and heading are black and white respectively. The active label is RGB(0,153,255); other measured labels are white at 50% opacity. The supporting action has a white background at 10% opacity and an 8px radius. ## States and motion The screenshot shows one blue label and quieter neighboring labels, but does not establish that they are interactive tabs. Interaction and animation behavior are unknown; do not invent them. ## Do NOT copy or add Do not reproduce reference imagery, interface copy, brand marks, customer identities, or named examples. Do not add invented feature claims or outcomes. ## Checks you can run At desktop, check the 1200px header width, 44px heading, 137×34px supporting action, three 250px-wide images, and 20px image gaps. At phone width, check the 350px header width and 28px heading. Preserve the distinct right-side interface panel where the desktop layout is used.