Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Clutch Use Cases
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:** Use Cases
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad45b886583e9d96b6ddd_6acad3014dc332e891b679e7_cms-9dfed9bc4a72f0281a639f23.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:** A monochrome technical use-case page uses large black headings, white surfaces, fine grid rules and occasional electric-blue accents.
- **Character:** Isometric line artwork and a structured editorial grid communicate technical precision with little decorative excess.
### Page composition
- **Capture:** The source measures 2880 × 11506 pixels. Estimated CSS dimensions below assume an unverified 2× capture.
- **Container:** A centered region around 1120 CSS pixels wide has faint vertical boundary rules.
- **Header:** Brand left, six text/dropdown navigation items center and a black demo action right.
- **Hero:** A centered two-line use-case title, three-line description and isometric illustration sit over a faint diagonal grid.
- **Problem:** A large heading introduces three equal outlined cells containing icons and bold statements.
- **Solution and challenge:** A centered solution statement precedes a three-column challenge row.
- **Capabilities:** A large heading and subtitle lead to four icon-led capability items, then two columns of arrow-led differentiators and integration points.
- **Product evidence:** A wide browser-style application screenshot is followed by a centered black CTA.
- **Benefits:** Two text columns divide immediate and longer-term benefits.
- **Closing:** A split demo band pairs abstract diagonal artwork and blue action left with three icon-led statements right.
- **Footer:** Brand/demo/social group sits beside newsletter signup, followed by five link columns, compliance/legal row and oversized faded brand lettering.
### Information hierarchy
- **Display headings:** Large centered titles establish the page's major chapters.
- **Grid statements:** Short bold problem and capability headings lead smaller explanatory copy.
- **Solution:** A large regular-weight statement receives its own spacious band.
- **Product screenshot:** Detailed filters and a people table provide a visual demonstration beneath conceptual explanations.
- **Actions:** Black buttons recur in navigation and mid-page; the final blue demo button adds stronger color emphasis.
### Typography
- **Family:** Neutral sans serif throughout; exact identity is unverified.
- **Hero:** Approximately 64 pixels, bold, with compact line height.
- **Section headings:** Around 52–56 pixels, bold; secondary headings around 30 pixels.
- **Solution statement:** Approximately 36 pixels, regular weight, centered across multiple lines.
- **Card headings:** Around 20 pixels, semibold; body and arrow-list copy around 14–16 pixels with 22-pixel leading.
- **Footer:** Around 14 pixels for links, with smaller consent and legal text.
### Colors & surfaces
- **Measured base:** White #FFFFFF dominates, with black #000000 for headings and controls.
- **Secondary surfaces:** Near-white #F9F9F9 and gray #DFDFDF appear in subtle panels and rules.
- **Blue accent:** #004DFF is sampled in the accent system.
- **Artwork:** Black/white isometric forms contain a glossy blue node; the final demo band introduces soft violet/blue shading within diagonal black streaks.
- **Depth:** Most page regions are flat and ruled. Buttons and the embedded product window use restrained shadows.
### Components
- **Buttons:** Compact black rounded rectangles around 40–44 pixels high, with white labels and occasional right arrows.
- **Problem cells:** Three equal columns use thin borders, around 32-pixel padding and large vertical gaps between icon and statement.
- **Capability items:** Four unboxed columns pair small isometric icons with bold headings and short descriptions.
- **Arrow lists:** Thin right arrows align left of multiline text, with generous row spacing.
- **Product window:** A roughly 960-pixel-wide rounded browser frame contains toolbar, three filter groups, a three-row table and a visible connection-details popover.
- **Demo band:** Two equal ruled cells contrast image-led conversion content with a plain icon/text list.
- **Newsletter:** An underlined email field and right-aligned signup action sit above a checkbox and small consent paragraph.
- **Footer:** Five open navigation columns and two small compliance seals align above the legal row.
### Visual rhythm
- **Section cadence:** Large 80–100-pixel vertical paddings separate chapter headings and content.
- **Grid continuity:** Thin horizontal and vertical rules connect otherwise distinct sections into a coherent framework.
- **Density variation:** Spacious headlines alternate with denser grids, lists and the application screenshot.
- **Alignment:** Centered chapter headings contrast with left-aligned text inside cells.
### Responsive
- **Evidence:** Only desktop is observed; dropdown, product-preview and mobile behavior are unverified.
- **Recommended grids:** Reduce three/four-column sections to two, then one; stack the split demo band.
- **Recommended type:** Reduce the hero toward 38–44 pixels and maintain comfortable body size.
- **Screenshot handling:** Allow an enlarged product view rather than scaling every table label to illegibility.
- **Footer:** Stack newsletter and navigation groups, preserving readable consent controls.
### Adaptation guidance
- **Preserve:** Keep the white/black ruled framework, isometric icon style and selective blue action color.
- **Build:** Use reusable chapter, grid-cell, arrow-list and screenshot components.
- **Content fidelity:** Treat security capabilities and benefits as supplied marketing content, not independently verified claims.
- **Privacy:** Use appropriate sample data rather than copying personal details visible in the embedded table.
- **Interaction:** Define demo, navigation and newsletter behavior explicitly; only their visual appearance is established.
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.