# Design from Reference: Unkey Landing Page Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Unkey - **Category:** Landing Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad3acc2028efdec71b070_6acad15ef37764a00e04bdaa_cms-d9b0091b2db2456bb3fff07f.webp Analyze the screenshot first. If inaccessible, request it rather than guessing. ## Content {{content.instructions}} {{content.data}} Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims. ## Visual Design ### Overall aesthetic - **Style:** Cinematic developer-platform landing page built on black, with grayscale gradient typography, dark technical diagrams and localized green/cyan glows. - **Character:** Circuit-board traces, chip-like blocks, soft spotlights and low-contrast product mockups create a technical atmosphere. - **Emphasis:** White compact CTAs provide sharp action contrast; color remains mostly inside code syntax and illustrative status indicators. ### Page composition - **Canvas:** Source 2079 × 12020 pixels, inspected throughout in six crops at 1400px width. Geometry uses inspection pixels; exact CSS capture scale is unverified. - **Wrapper/header:** A roughly 1082px wrapper spans x159–1241. Wordmark, navigation, account link and white sign-in control form one top row. - **Hero:** A centered two-line headline overlays circuit artwork, followed by two-line supporting copy, paired actions and three customer logos. - **Developer section:** Centered heading/copy/actions introduce a wide tabbed code panel with a narrow framework sidebar. - **Open-source section:** Left-aligned heading/copy/GitHub action balance a large rounded graphical panel on the right. - **Feature sections:** A wide analytics mockup precedes asymmetrical map and monetization tiles. A security section adds a four-card grid for hashed keys, audit logs, IP whitelisting and rate limits. - **Closing:** A left-aligned capabilities introduction leads to a three-column, three-row text grid, then a centered CTA and five-column footer with oversized dark wordmark. ### Information hierarchy - **Primary statement:** The developer-platform headline is the strongest typographic element, with a white-to-gray tonal gradient. - **Progression:** Integration/code demonstration, open-source credibility, product capabilities, security features and final action follow in sequence. - **Feature explanation:** Illustrations occupy most card area; small icon/title/paragraph groups sit near the lower edges. - **Actions:** Get started controls recur alongside quieter documentation links; final Chat with us and Start Now actions sit above small qualifying copy. - **Footer:** Small grouped links remain secondary to the main conversion region. ### Typography - **Hero:** Approximately 74px medium-to-semibold sans serif, around 78px line height with tight negative tracking in the inspection rendering. - **Major headings:** Around 48px medium with roughly 59px line height; several use partial gray gradients. - **Body:** About 16px regular, 23–25px line height; hero supporting copy around 18px/27px. - **Feature and utility roles:** Feature titles around 18px medium, small grid titles around 16px; navigation/buttons around 14px. - **Technical text:** Code, line numbers and selected labels use a monospace face around 13–14px. Exact font identities are unverified. ### Colors & surfaces - **Measured base:** #000000 dominates. #010101, #020202, #030303, #040404, #050505, #060606 and #070707 describe the very dark stepped surface/glow range. - **Foreground:** Headings and primary controls appear white to light gray; secondary copy uses medium gray. Gradients soften heading edges toward gray. - **Localized accents:** Mint/teal indicators, cyan and purple circuit lights, purple/green/pink code syntax and faint green map points appear inside illustrations. - **Depth:** Fine charcoal borders and broad blurred grayscale spotlights separate black-on-black panels; there are no bright full-width color bands. ### Components - **Primary buttons:** Typically around 126 × 39px, white/light-gray gradient fill, dark label, small icon or chevron and 7px radius. - **Code panel:** Approximately 1082px wide, strongly rounded outer corners around 28px, thin outline and dark gradient body. Language tabs sit above a framework list and numbered syntax-highlighted code area; copy icon appears upper right. - **Open-source graphic:** Roughly 569 × 462px rounded panel, with a dark GitHub-style mascot, faint lines and upward glow. - **Capability tiles:** Large rounded dark shells use roughly 28–32px radii; a narrow map tile sits beside a wider activity/monetization tile. - **Security grid:** Alternating narrow/wide panels contain abstract key artwork, audit table, concentric shield/network graphic and code/rate-limit illustration. - **Text grid:** Nine unboxed icon/title/paragraph groups repeat across three columns. - **Captured state:** Tabs and mockup controls are visible, but switching, animation, copy behavior and live product actions are not verified. ### Visual rhythm - **Hero cadence:** Broad spacing separates headline, copy, action row and logo strip. - **Section gaps:** Major blocks are separated by roughly 150–220px of dark breathing room, often bridged by soft spotlights or circuit traces. - **Card gaps:** Approximately 20–24px separates adjacent rounded feature panels. - **Text cadence:** Feature paragraphs use compact line lengths; the lower three-column grid uses broad horizontal gutters and roughly 70–90px row gaps. - **Footer:** A thin rule precedes generous top padding, evenly spaced link columns and the oversized dark brand lettering. ### Responsive - **Observed scope:** Desktop long page only; animation and mobile layouts are unverified. - **Recommended hero:** Reduce headline to a readable mobile scale, simplify background circuitry and wrap paired actions. - **Recommended code:** Keep code text readable with internal horizontal scrolling; collapse framework navigation if necessary. - **Recommended grids:** Stack asymmetrical feature cards, reduce the capabilities grid to one column and retain title/copy hierarchy. - **Recommended footer:** Wrap link groups and contain the large decorative wordmark without creating horizontal overflow. ### Adaptation guidance - **Preserve:** Black canvas, restrained grayscale gradients, white CTAs, technical illustration language and code-first product explanation. - **Assets:** Use supplied product imagery and code examples; treat embedded keys, addresses and logs as visual examples, not actionable data. - **Implementation:** Build layout with shared max-width containers, responsive grids and reusable rounded panel tokens. - **Accessibility:** Raise contrast where necessary for essential copy, provide focus states and reduced-motion alternatives for any added animation. - **Restraint:** Keep circuit traces and glows decorative so they do not obscure headings, code or primary actions. Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict. ## Direction {{preferences.fidelityInstructions}} ## Output {{output.instructions}} Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.