# Mintlify homepage design spec (free) - Site: mintlify.com - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Mintlify. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Mintlify'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 craft spec Evidence provenance: based on the supplied desktop and 390px screenshots and computed bounds/styles. CRAFT ARCHETYPE: product-UI-led ## The big idea Place a short headline and two actions beside an oversized product preview. Keep the text readable and the preview as visual proof. Use original product imagery and copy. ## Layers The desktop hero section is 974px high. The heading begins at x=169px and measures 352×138px; the product image begins at x=584px and measures 1055×641px. A 189×34px outlined chip sits above the heading. Supporting copy is 18px/24px, followed by two 42px-high actions. The primary action is dark with white text; the secondary action is white with a fine border. Pale green curves are visible behind the product image. ## Type Use a serif headline and sans-serif supporting text and controls. The desktop heading is 44px/46px, weight 400, with -1.75px letter spacing. Supporting copy is 18px/24px. The chip text is 12px/16px, weight 500, with 0.24px letter spacing. ## Colour The hero canvas is white. Use near-black for the headline and primary action, muted gray for supporting copy, and green as an accent. The chip’s measured green text is rgb(12, 140, 94); the curves are pale green. ## States and motion The primary action has a computed 0.1s transition. The chip is a link, but its resulting state is unknown. Do not claim the curves animate or add unobserved entrance motion. ## Do NOT copy or add Do not reuse the source wording, logo, product UI, illustration, or brand identity. Do not add unsupported metrics, autoplay, or invented interaction states. ## Checks you can run At 1425px viewport width, verify the 974px section, heading at x=169px with 352px width, and product image at x=584px with 1055px width. Check 44px/46px desktop heading type, 18px/24px supporting type, and adjacent 42px actions. ## Phone at 390px The phone hero section measures 390×797px. Its content has 16px side insets; the chip begins at x=16px, y=128px and measures 189×34px. The heading begins at x=16px, y=178px and measures 358×132px at 40px/44px. Supporting copy begins at y=326px and measures 358×48px. The two actions begin at y=406px and each measure 42px high. The image begins at x=17px, y=545px and measures 585×356px, extending past the phone’s right edge. The 40px announcement and 64px header precede the hero; a 38×38px menu button is visible in the header. Do not assume an unobserved image crop or mobile interaction state. --- # Navigation craft spec Evidence provenance: measured from the supplied desktop and 390px screenshots and computed styles. The desktop header is sticky; the phone screenshot shows a menu control instead of desktop route links. CRAFT ARCHETYPE: type-led ## The big idea Use a single desktop row with the brand at left, route controls in the middle, and account and sales actions at right. Keep the announcement strip distinct above the header. Use original branding and route labels. ## Layers At 1425px viewport width, the announcement strip is 40px high and the sticky header is 65px high, beginning at y=40px. The desktop navigation measures 1088×64px and begins at x=169px. Route controls measure 100px, 102px, and 111px wide; the pricing link is 67px wide. The sign-in action measures 75×34px and the filled sales action 121×34px. Both account actions have 4px corners; the compact account action has 8px 14px padding. The header has a lower divider. ## Type Use sans-serif typography. Announcement label: 12px/18px, weight 500, with 0.24px tracking. Announcement title and supporting link: 14px/20px. Desktop route controls and account actions: 14px/16px, weight 500; route controls have a 4px gap. ## Colour The announcement background is rgb(250, 248, 245). Use a near-white header, near-black route text, green announcement emphasis, and muted gray supporting text. The filled account action is near-black with white text; the adjacent account action is white with a subtle border. ## States and motion The desktop header is sticky with z-index 100. Route buttons have a computed 0.3s background-color transition; account controls have approximately 0.1s transitions. Supplied rules indicate a 2px focus outline with 2px offset for links in prose, not a general navigation-specific focus treatment. Dropdown contents and hover outcomes are unknown. ## Do NOT copy or add Do not reproduce the original logo, route wording, report title, icons, or brand identity. Do not invent dropdown contents, animation, or mobile drawer behavior. ## Checks you can run At 1425px width, check the 40px announcement, 65px sticky header, and 1088px navigation beginning at x=169px. Verify the 100px, 102px, and 111px route controls, 75×34px sign-in action, and 121×34px filled action. ## Phone behavior At 390px, the announcement is 40px high and the header is 64px high. The brand link begins at x=20px and measures 104×24px. A 38×38px menu button begins at x=338px, y=53px. Desktop route links and account actions are not visible in the supplied phone screenshot. The announcement shows a short green label and the report title. The menu’s open state is unknown. --- # Below-fold social-proof grid craft spec Evidence provenance: based on the supplied below-fold screenshot at scrollY=900 and its computed bounds/styles. CRAFT ARCHETYPE: data-led ## The big idea Pair a credibility statement and action with a two-row grid of customer-logo tiles. Place a horizontal activity-label strip below the grid, separated from the next section. Recreate the layout with original content and assets. ## Layers The section begins at y=179px in the scrolled viewport and measures 1425×608px. The statement begins at x=198px, y=208px and measures 306×84px; it is 24px/28px and includes a darker emphasized number. The action begins at x=198px, y=467px and measures 200×42px. The screenshot shows eight pale tiles arranged in four columns and two rows, each approximately 119×116px with 6px corners. Below the grid, the activity strip begins around y=570px. Its lead label is 16px/24px; the category labels are 12px/16px. The strip continues beyond the right edge of the visible content. ## Type Use sans-serif typography. The statement is 24px/28px, weight 500, with a darker emphasized fragment. The action is 14px/16px, weight 500. The activity lead is 16px/24px, weight 500; category labels are 12px/16px, weight 500. ## Colour Keep the canvas white and the tiles pale, with dark text for emphasis and the action. Activity labels are muted gray; small green-tinted value areas are visible in the strip. Do not adopt customer-logo colors as a brand palette. ## States and motion The tiles are links with 6px corners. Their hover and focus behavior is unknown. The screenshot does not establish animation or automatic scrolling; do not add either. ## Do NOT copy or add Do not reuse customer names, logos, source headline, or displayed numerical claim. Do not invent endorsements, metrics, tile descriptions, or carousel behavior. ## Checks you can run Verify a 1425×608px section at the supplied scroll position, a 306×84px statement at x=198px, and a 200×42px action at x=198px. Check eight tiles in a 4×2 arrangement, approximately 119×116px with 6px corners, and activity text at 16px/24px and 12px/16px.