# Clerk homepage design spec (free) - Site: clerk.com - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Clerk. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Clerk'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 --- # Centered interface-led hero Evidence provenance: desktop capture at 1440×900, scrollY 0, and same-page phone capture at 390×844, scrollY 0. Bounds below use the supplied computed measurements; artwork crop is based on the captures. The announcement strip and trust band are adjacent elements, not part of the hero copy. CRAFT ARCHETYPE: product-UI-led ## The big idea Use a centered, high-contrast headline over an unusually pale, low-contrast product-interface collage. The visual field should support the message without competing with it. Keep the compact monospace action distinct from the prose and allow generous whitespace around the main content. ## Layers At desktop, the announcement strip is 40px high and the sticky navigation is 42px high, initially at y=48. The headline bounds are x=272, y=218, 896×144px. Supporting copy is x=384, y=378, 672×56px. A small 12px label starts at y=470; the outlined action is x=503, y=495, 435×36px with an 11.5px radius. Interface imagery sits behind the text, with paired large image layers measured 969×887px at x=-249 and x=720, y=46; treat these as artwork placement evidence, not a requirement to duplicate the assets. The trust band begins below the hero, around y=603 in the phone capture; its desktop content starts at y=659. ## Type Use a neutral sans-serif. Desktop heading: 64px, weight 700, 72px line-height, -1.6px tracking. Supporting text: 18px/28px, regular, muted gray. The prompt label is 12px/20px, medium. Action text is 13px/24px in a monospace face. Phone heading is 32px/36px, weight 700, -0.8px tracking; phone supporting text is 15px/24px. ## Colour Canvas is near-white; heading is near-black, body copy muted gray. Keep artwork exceptionally faint. The action has a fine neutral outline and transparent or white surface. Do not substitute a dark hero background. ## States and motion The action reports a 0.15s linear transition. Outcome, hover, focus styling, and any artwork motion are unknown. Listed global keyframes do not establish hero animation. ## Phone at 390px At 390×844, announcement remains 40px high and navigation occupies y=48–90. Heading bounds are x=55, y=170, 280×144px, centered across four lines. Supporting copy is x=24, y=330, 342×96px. Label begins at x=81, y=462; action is x=25, y=487, 341×36px. The desktop-scale artwork is cropped: measured image layers extend to x=-774 and x=195, while visible center artwork remains behind content. Trust content begins near y=603, with its statement at x=24 and marks arranged in two columns; do not treat it as hero content. Desktop navigation links are replaced by the compact menu control, while account actions remain visible. ## Do NOT copy or add Do not reproduce source identity, wording, logos, interface content, customer marks, claims, or unseen interaction. Do not make faint artwork prominent or infer animation from unrelated keyframes. ## Checks you can run At 1440px, check headline [272,218,896,144], 64px/72px; paragraph [384,378,672,56]; action [503,495,435,36]. At 390px, check headline [55,170,280,144], paragraph [24,330,342,96], and action [25,487,341,36]. Verify centered wrapping, artwork clipping, and no horizontal overflow. --- # Compact sticky navigation Evidence provenance: computed styles and page pixels at 1440×900, scrollY 0, 900, 1800, and 2700, plus phone capture at 390×844, scrollY 0. The initial desktop position differs from its scrolled position; the announcement strip is a separate element above the initial header. CRAFT ARCHETYPE: type-led ## The big idea Build a single compact horizontal bar: identity at the left, primary navigation directly beside it, and account actions at the far right. The header is restrained against a pale surface in light contexts and changes text treatment over the dark section. Preserve the same compact structure while scrolling rather than adding an unsupported promotional row to the header. ## Layers The desktop header measures 1440×42px. Initially it is at y=48, immediately below the 40px announcement strip; after scrolling it sticks at y=8. Inner content begins at x=118. Identity bounds are 76×26px at x=118; primary nav is x=206, 434×20px. Account controls are x=1185, 63×26px and x=1258, 68×26px, with 6px corner radii. Navigation labels are 13px; their measured line-height is 19.89px, and typical horizontal padding is 8px. In the dark section at scrollY 2700, the same header geometry remains and labels switch to a light color. The computed header background is transparent; pixels show a pale contained bar in the light section and a dark treatment in the dark section, so do not assert a specific shadow or opacity. ## Type Use neutral sans-serif labels at 13px, weight 500, and roughly 20px line-height. Keep identity visually distinct but similarly compact. Avoid copying any captured labels or identity. ## Colour Use near-black labels on light surfaces and near-white labels against dark surfaces. Account controls are transparent, with restrained outlines or subtle surface differentiation. The bar itself should not become a high-contrast oversized panel. ## States and motion Sticky positioning is observed at y=8 after scrolling. Account controls report 0.15s transitions; navigation labels report 0.45s ease-out cubic transitions. The precise hover appearance, menu-panel content, and keyboard interaction are unknown. Do not infer a color-switch trigger beyond the observed section context. ## Do NOT copy or add Do not reproduce source logo, wording, links, exact destinations, or fabricated dropdown content. Do not add a mobile menu panel or behavior not evidenced by the capture. ## Checks you can run At desktop, verify 42px height, initial y=48 and scrolled y=8, identity x≈118, navigation x≈206 with 434×20px bounds, and account controls near x=1185 and x=1258. At phone width, verify header [0,48,390,42], identity [20,60,62,18], account controls at x=199 and x=272, and menu [340,48,42,42]. Confirm desktop links are absent in the phone capture, no overlap occurs, and light/dark contexts retain legible contrast. --- # Dark authentication feature gallery Evidence provenance: desktop captures at 1440×900, scrollY 1800 and 2700. The first capture shows the section introduction and portions of its initial feature layout; the second shows further feature panels and the wide lower panel. Card edges and gutters are visual estimates from pixels, not computed element bounds. No phone-width capture of this section is supplied. CRAFT ARCHETYPE: product-UI-led ## The big idea Create a dark product-feature gallery in which concise explanations pair with subdued interface illustrations. The gallery is a true multi-panel section, not a continuation of the hero. Use a consistent charcoal surface language while varying illustration scale and placement. Keep the overview centered and let the panels carry the detailed material. ## Layers The section introduction is measured at x=120, y=189, width 1200px for its eyebrow; heading at x=384, y=229, 672×40px; paragraph at x=432, y=285, 576×48px; and centered link at y=354. In the scrollY 1800 viewport, the panel field begins visually around y=314. Three columns align approximately to x=85, 371, and 657 in the screenshot, with panel widths near 280px and narrow gaps; these are pixel estimates, not DOM boxes. Text examples begin at x=144, 547, and 949, with text columns about 347px wide. A later capture shows three columns and a lower panel spanning about two columns beside a one-column panel. Use softly differentiated charcoal cards, rounded corners, and varied product-interface illustrations; avoid bright framing. The visible gallery is on a near-black field. ## Type Introduction heading is 32px/40px, weight 600, tracking -0.48px. Supporting copy is 16px/24px. Card headings are 13px/24px, weight 500; descriptions are 13px/20px. Use subdued gray for descriptions and near-white for headings. Tiny UI annotations may be smaller, but their content is not evidence for reusable copy. ## Colour Use near-black section background, charcoal panels, white headings, and muted gray body text. The section eyebrow uses a restrained violet accent. Illustrations remain low-luminance, with occasional controlled brighter details. No exact card fill or border value is supplied. ## States and motion Card hover and interaction behavior are unknown. Some text elements report 0.5s transitions, but no specific gallery animation is established. Do not add motion, counters, or interactive outcomes based on global keyframes. ## Do NOT copy or add Do not reproduce source identity, feature names, prose, product screens, personal data, numeric examples, or claims. Do not assert mobile stacking or card behavior without a phone capture. ## Checks you can run At 1440px, verify the intro bounds and type sizes above, followed by a three-column dark gallery. Check approximately 347px text columns, restrained gutters, illustration-led panels, and the visually wider lower panel beside a narrower one. Treat estimated card dimensions as visual targets, not exact DOM assertions. Flag copied text, identifying marks, sample data, or unsupported animation.