Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Vercel Security 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:** Vercel
- **Category:** Security Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acc0c5c3cd54160b13d154d_6acc08433a07eb05fa9c576d_cms-1d27fb8f1ee87ae3f7608a40-v3.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:** A monochrome security marketing page with black backgrounds, white headings, subdued gray copy and selective blue shield/icon accents. Fine outlines and broad spacing create a sober technical presentation.
- **Image basis:** The 1440 × 4731 source was inspected throughout at approximately 1400 px wide in four crops. Dimensions below are inspection-pixel estimates; CSS scale, pixel ratio and font identity are unverified.
### Page composition
- **Header:** A thin black bar places the brand left, product navigation centrally and account/contact/signup controls right, separated from the hero by a faint rule.
- **Hero:** A blue shield with nested outline shields sits above a centered title, two-line supporting statement and paired actions. An uppercase trust caption precedes four customer logos.
- **Security features:** Three outlined cards form the first row, followed by three open icon/text items and a centered final pair.
- **Platform section:** A charcoal full-width band contains centered heading, copy and a white expert-contact action, then three black partner cards.
- **FAQ:** A black section contains a heading, introductory paragraph and eleven collapsed question rows within a roughly 934 px column.
- **Closing and footer:** A bordered security-contact banner precedes a footer with logo and four link groups. Copyright, social icons, status and a dark-theme selector occupy the final row.
### Information hierarchy
- **Opening:** The large white title and blue shield establish the topic. The white contact button is stronger than the dark outlined secondary action.
- **Feature scanning:** Icon/title pairs identify security themes; gray descriptions explain them at lower emphasis.
- **Platform proof:** Partner cards use circular logo areas, centered titles and short descriptions. Their content is promotional evidence shown in the image, not independently verified claims.
- **Questions:** Large white question labels and right chevrons make the FAQ the main detailed browsing layer. All answers are collapsed.
- **Utilities:** Footer links and legal information use subdued gray; blue status text provides a small final accent.
### Typography
- **Hero:** Approximately 62 px bold sans-serif with tight tracking and compact line-height. Supporting copy is around 20 px with 29 px line-height.
- **Sections:** Major headings are approximately 40 px bold. Partner-card titles and FAQ questions are around 24 px semibold.
- **Features:** Feature headings are around 20 px medium; descriptions are approximately 14–15 px with 25 px line-height.
- **Utilities:** Header and footer links use approximately 14 px. The trust eyebrow is roughly 12 px uppercase with wide tracking. Exact font family and CSS metrics remain unverified.
### Colors & surfaces
- **Measured foundations:** Black #000000 dominates, with charcoal #111111 in the platform band and #333333 among outlines.
- **Measured text:** White #FFFFFF and gray #888888 establish primary/secondary hierarchy; pale #D8D8D8 appears among lighter detail pixels.
- **Measured accent:** Blue #4398F7 appears in the shield artwork. Other blue icon/status variations remain localized.
- **Depth:** Surfaces are mostly flat. Borders and background shifts define cards; the shield's gradient and faint nested outlines provide the main decorative depth.
### Components
- **Hero actions:** Two approximately 194 × 47 px rectangular buttons have modest roughly 5 px corners and a 24 px gap.
- **Feature cards:** Three roughly 310 × 186 px cards use thin gray borders, around 7 px corners and approximately 20 px padding. Blue circular icons align beside titles.
- **Open benefits:** Outlined circular icons precede headings, with descriptions aligned below. These lack enclosing card borders.
- **Partner cards:** Three approximately 296 × 313 px black panels have fine borders, circular logo frames and centered content.
- **FAQ rows:** Approximately 83 px vertical cadence, full-width thin separators and small right-side downward chevrons. No expanded state is visible.
- **Contact banner:** A roughly 964 × 122 px outlined panel places title/description left and a small white action right.
- **Footer controls:** A compact outlined status chip and small theme selector sit on the last line. Hover/focus states are not shown.
### Visual rhythm
- **Centered width:** Hero and section introductions are centered; card grids and FAQ align within approximately 950–970 px content widths.
- **Macro spacing:** Large gaps separate hero, logos, features, partner proof and FAQ. Section boundaries use thin horizontal rules.
- **Repetition:** Three-column cards, circular icons and repeated question rows provide a consistent scanning rhythm.
- **Contrast:** Black and charcoal bands alternate subtly; white actions punctuate otherwise low-saturation content.
### Responsive
- **Evidence limit:** Only a desktop page is observed.
- **Recommended grids:** Stack feature and partner cards, keeping icons and headings attached to their descriptions.
- **Recommended FAQ:** Let long questions wrap and maintain large accessible row targets with explicit expanded states.
- **Recommended navigation:** Collapse the wide header/footer menus; wrap paired hero actions and lower utilities.
- **Recommended artwork:** Scale the shield and nested outlines without clipping the title or creating horizontal overflow.
### Adaptation guidance
- **Preserve:** Keep the black/white hierarchy, selective blue accents, fine borders and strong FAQ structure.
- **Build:** Reuse security-feature, partner-card, accordion-row and contact-banner components.
- **Content integrity:** Use verified current security claims in implementation; screenshot text alone does not establish compliance or platform behavior.
- **Validate:** Confirm font metrics, gray-text contrast, keyboard accordion operation and narrow-screen spacing.
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.