Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: WhatsApp 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:** WhatsApp
- **Category:** Security Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb646eb206c0d3f8f06747_6acb62e0b8517e813b41d181_cms-cf47572dbdc1ff7d4da79908.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 dark security-information page pairs large white typography with bright green highlighted words, human photography and cropped mobile-interface demonstrations.
- **Evidence:** The source is 2880 × 15582 pixels. All six readable portions were inspected; CSS sizes assume an unverified 2× capture density.
### Page composition
- **Header/hero:** Green branding and a wide navigation row sit above split hero copy and a rounded portrait with layered message/file/reaction bubbles.
- **Security overview:** A centered statement precedes three icon-led benefit columns.
- **Practical guidance:** A two-by-two grid pairs cropped app screenshots with headings, descriptions and Learn more links.
- **Support tools:** A large statement leads into three alternating image/text rows for reporting, blocking and account recovery.
- **Updates/help:** A darker region contains a horizontally clipped article-card carousel, six outlined FAQ-link rows and a feature-discovery carousel.
- **Footer:** Brand/download control sits beside four link groups; a lower rule separates legal, social and language controls.
### Information hierarchy
- **Display emphasis:** Selected words in large headings are green, directing attention without changing the overall typographic style.
- **Guidance hierarchy:** Screenshot-led cards use medium headings and concise paragraphs; larger alternating rows give support tools stronger emphasis.
- **Secondary reading:** White article cards contrast strongly with the dark page, while FAQ rows use outlines and arrow icons.
- **Navigation:** Green download pills provide the principal site-level action in both header and footer.
### Typography
- **Hero:** Approximately 76–80 CSS pixels, regular weight, tight tracking and roughly 1.0 line-height.
- **Section statements:** Around 48 pixels with close leading; alternating support headings are roughly 58–62 pixels.
- **Card/body roles:** Card headings are about 24–26 pixels; body copy is around 18 pixels with 25-pixel leading.
- **Footer/navigation:** Around 16–18 pixels, with smaller group captions. The neutral sans-serif identity is unverified.
### Colors & surfaces
- **Measured palette:** ICC-to-sRGB sampling identifies #111B21 as the main dark canvas, #0C141A as darker section/image surfaces and #FFFFFF as foreground/light cards.
- **Measured greens:** #23D366 is the bright brand/display accent; #008069 appears prominently in demonstrated mobile UI headers.
- **Supporting dark:** #1C1E21 occurs in dark text/UI regions.
- **Surface treatment:** Rounded image containers and white article cards create contrast; thin muted green-gray outlines frame FAQ rows.
### Components
- **Hero media:** A tall rounded photograph is overlaid with realistic light chat bubbles, a file-transfer panel, timestamps and reaction elements.
- **Benefit columns:** Three evenly spaced line icons sit above centered titles and short paragraphs.
- **Guidance cards:** Four unboxed columns in a two-by-two arrangement use wide rounded UI crops above left-aligned text.
- **Support demonstrations:** Large near-black rounded containers hold phone UI crops; adjacent text uses highlighted verbs and underlined green-accent links.
- **Article carousel:** Large white rounded cards contain a small brand symbol, multi-line headline, excerpt and outlined Read More pill; the next item is partially clipped.
- **FAQ rows:** Six broad rounded outlined rectangles contain a question and a small circular diagonal-arrow control.
- **Feature carousel/footer:** Rounded photos, large two-line labels and underlined links precede circular social controls and an outlined language dropdown.
### Visual rhythm
- **Section spacing:** Very large vertical gaps separate themes, keeping the long dark page from feeling dense.
- **Alternation:** Centered statements, multi-column cards and alternating split rows vary the reading pattern.
- **Shared bounds:** Most content uses a centered approximately 1080-pixel region, while carousels deliberately extend beyond it.
- **Rounded continuity:** Repeated large image radii, pills and circular arrows unify photography, UI examples and navigation.
### Responsive
- **Observed scope:** One desktop layout is supplied; carousel transitions and mobile arrangements are not visible.
- **Recommended stacking:** Stack hero and support rows, reduce display size and convert guidance grids to one column.
- **Recommended carousels:** Preserve visible navigation, keyboard access and readable card widths rather than shrinking multiple cards.
- **Recommended footer:** Stack link groups and allow legal/social/language controls to wrap with sufficient tap spacing.
### Adaptation guidance
- **Information pattern:** Move from security reassurance to practical controls, support routes, updates and FAQs.
- **Visual system:** Use one bright accent for key words/actions, human imagery for context and carefully cropped product demonstrations for concrete guidance.
- **Content fidelity:** Treat security statements as screenshot content; verify current product guidance before publishing a live adaptation.
- **Implementation:** Confirm fonts/scale, provide accessible image descriptions and carousel controls, and keep dark-theme contrast strong across muted labels and outlines.
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.