Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Clutch Features 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:** Clutch
- **Category:** Features Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad45c886583e9d96b6e11_6acad3035a5fdf4c30305233_cms-f0b9653f1c78566cc295e790.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
- **Character:** Monochrome enterprise-security page with oversized sans-serif headlines, fine structural rules, isometric line illustrations and very limited electric-blue highlights.
- **Evidence and scale:** Screenshot is 2880 ร 11392 image pixels. Dimensions estimate a 1440px CSS page at 2ร capture scale; DPR, font family and computed styling remain unverified.
### Page composition
- **Header and hero:** A compact centered navigation frame places the logo left and demo button right. A large two-line centered headline, short subtitle and isometric mechanical illustration sit within faint vertical container rails.
- **Overview grid:** A centered multi-line section heading precedes a three-column, two-row grid: five capability cards plus a demo-action tile.
- **Process section:** A left-aligned major heading introduces five generously spaced two-column rows, with explanatory text left and cropped/faded product-interface illustrations right. A fine vertical ticked track with a black marker runs along the left edge.
- **Trust and conversion:** A centered security-expertise message is surrounded by pale integration logos and followed by a dark action. Three icon-led assurance columns sit below a horizontal rule.
- **Footer:** Brand/social/demo content sits beside a newsletter form; below are five link columns, compliance-style seals, legal links and copyright. An oversized faint cropped wordmark extends beneath the main footer.
### Information hierarchy
- **Display emphasis:** The hero and major section statements use strong black typography and deliberate line breaks, far larger than surrounding copy.
- **Capability levels:** Card titles and process-row headings are bold; regular paragraphs explain each item without dense secondary navigation.
- **Action pattern:** Dark rounded demo buttons repeat in the header, grid and conversion region; the footer offers an outlined variant.
- **Form hierarchy:** Newsletter heading leads to a single underline-style email field and inline signup action, followed by a small consent checkbox and dense gray explanatory copy.
### Typography
- **Display:** Hero title appears approximately 64px CSS, bold, with tight tracking and leading around 72px. Major section titles are approximately 52โ56px.
- **Content headings:** Process-row headings are around 23โ24px, semibold, with approximately 30px leading; card titles are around 20px.
- **Body and utilities:** Paragraphs and navigation are approximately 14โ16px CSS with 22โ24px leading. Footer links are around 14px; consent text is smaller near 12px. Exact font family is unverified.
### Colors & surfaces
- **Measured foundation:** White #FFFFFF dominates, with black #000000 for headings and line illustration. #F9F9F9 and nearby #FAFAFA support subtle interface surfaces.
- **Accent distribution:** Blue is confined to small gradients and product-preview marks; measured saturated samples include #2584FF and #004EFF, each covering very few pixels compared with the white ground.
- **Secondary UI colors:** Tiny red, yellow, green and purple status marks appear in embedded interface examples. They do not establish a broad page palette.
- **Depth:** Hairline gray borders, very light shadows and white edge fades create layering without large colored backgrounds; the grid CTA tile adds a grainy black-to-white gradient with a blue edge.
### Components
- **Header controls:** Small navigation labels include chevrons. The demo control is approximately 108 ร 40px CSS, dark with a small radius and subtle shadow.
- **Capability cards:** Approximately 315 ร 262px CSS with 8px radii, thin pale borders and faint shadows. Small isometric icons sit high in each card; title and copy occupy the lower region.
- **Process illustrations:** Compact tables show source chips, identity inventories, severity cards, alert counts and integration lists. Fine separators, badges and vendor icons create realistic product texture; right edges fade into white.
- **Assurance blocks:** Three equal centered columns pair small outline icons with bold headings and short two-line descriptions.
- **Newsletter:** An underline field and right-aligned signup arrow share a wide row. Consent uses a small square checkbox and multi-line gray legal text.
- **Footer assets:** Black social icons and two small outlined circular compliance seals contrast with the pale oversized brand watermark.
### Visual rhythm
- **Container:** Main rails sit around 158px and 1282px CSS, while most inner content occupies approximately 964px centered width.
- **Spacing:** Sections use broad 80โ120px intervals; process rows have substantial vertical gaps and consistent text/illustration alignment.
- **Grid cadence:** Tight card gutters near 8px create a compact overview, followed by much looser process storytelling.
- **Boundary rhythm:** Faint vertical rails and horizontal separators organize the long page without strong background changes.
### Responsive
- **Observed limit:** Only a desktop full-page capture is shown; menus, timeline animation, form submission and mobile behavior are unobserved.
- **Recommended grids:** Reduce the overview to two and then one column; stack each process description with its corresponding illustration while retaining reading order.
- **Recommended header and type:** Collapse navigation into a compact menu, scale display text fluidly and simplify peripheral decorative rails/logos on narrow screens.
- **Recommended footer:** Stack newsletter and brand regions, wrap link columns and preserve readable consent text and tap targets.
### Adaptation guidance
- **Preserve the system:** Use monochrome line-art illustration, strong sans-serif hierarchy, thin container rails and sparse blue highlights.
- **Explain progressively:** Move from a concise overview grid to detailed paired text/interface rows, then reassurance and a clear conversion region.
- **Implementation:** Render core copy as text, use descriptive alternatives for complex illustrations and provide accessible form labels, focus and validation. Security claims and certification marks are visual content in the capture, not independently verified assertions.
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.