Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Narrative BI FAQ
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Narrative BI
- **Category:** FAQ Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbecd39e7f22db4028a0f_6acbbe163a787595fbdd2f2c_cms-2312f1f19ff8f00644d4ac30.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:** An editorial FAQ page combines substantial dark serif headings with clean sans-serif explanations and soft lavender accents.
- **Character:** Pale surfaces, fine rules, rounded support messaging and hand-drawn illustrations create a calm, approachable identity.
### Page composition
- **Capture:** The source measures 1440 × 4109 pixels. Approximate sizes below use image pixels; CSS scale is unverified.
- **Header:** A full-width pale band holds the brand left, five navigation items across the middle-left and login/free-start actions right.
- **Hero:** A large centered FAQ heading and two-line subtitle sit within a roughly 430-pixel-high pale region. A faint cone-like decorative graphic enters from the lower right.
- **FAQ area:** A centered content region around 1160 pixels wide splits into a roughly 565-pixel accordion column left and a roughly 470-pixel support callout right, separated by a broad gap.
- **Long list:** Fifteen questions run down the left column. One near the top is expanded with a multi-line answer; the others show circular plus controls.
- **Closing CTA:** A pale full-width region begins with a hand-drawn two-person illustration extending above its boundary, followed by centered eyebrow, two-line heading, copy and button.
- **Footer:** Three navigation columns occupy the left portion, with another pale cone graphic at right. A bottom rule precedes brand, legal links and copyright.
### Information hierarchy
- **Page heading:** Large serif text establishes the FAQ topic; centered sans-serif subtitle provides context.
- **Question hierarchy:** Bold serif questions remain visually stronger than the expanded answer.
- **Support alternative:** A rounded pale box offers a prominent underlined lavender contact link beside the top questions.
- **Final action:** A small uppercase eyebrow introduces the closing heading and lavender Start for free button.
- **Footer:** Category labels, serif integration/use-case links and smaller company/legal text form distinct levels.
### Typography
- **Families:** A heavy editorial serif contrasts with a neutral sans serif. Both identities are unverified.
- **Hero:** Approximately 52 pixels, bold serif, tight tracking and compact leading; subtitle around 24 pixels with 34-pixel line height.
- **Questions:** Approximately 29 pixels bold serif with roughly 36-pixel leading. Long questions wrap across two or three lines.
- **Answers:** Around 20 pixels sans serif with 32-pixel leading and dark muted color.
- **Closing heading:** Approximately 40 pixels bold serif; supporting copy around 20 pixels.
- **Navigation and utilities:** Header links around 16 pixels; buttons use bold serif labels. Legal text is approximately 12–13 pixels.
### Colors & surfaces
- **Measured base:** White #FFFFFF defines the FAQ area. Pale lavender-gray #F7F6F9 fills hero, callout and lower regions.
- **Ink:** Sampled dark #2A2C44 supplies the deep navy-like text tone.
- **Accent:** Lavender #8788CF appears in buttons, brand details and links.
- **Soft transitions:** Near-white samples such as #FAF9FB appear in subtle decorative shading.
- **Separation:** Thin pale gray-lavender rules divide questions and footer regions. No strong shadows are visible.
### Components
- **FAQ rows:** Unboxed text rows have a thin bottom rule and generous vertical padding. A roughly 24-pixel outlined circle containing plus or minus aligns near the right edge.
- **Expanded row:** The second question displays a four-line answer beneath its title; the minus icon marks its visible state. Interaction behavior beyond this captured state is unverified.
- **Support box:** Approximately 470 × 155 pixels with about 24-pixel corner radius and roughly 30-pixel padding; large sans-serif text wraps across three lines.
- **Header controls:** White outlined login and filled lavender signup buttons use rounded corners and compact heights around 36 pixels.
- **Closing button:** Approximately 156 × 48 pixels, lavender fill, white bold serif label and roughly 12-pixel radius.
- **Illustrations:** Dark hand-drawn outlines depict two people and a branded flag; faint white cone forms carry lavender overlapping-ring marks.
- **Footer details:** Small social icons sit in pale rounded squares. A small outlined hiring badge appears beside a company link.
### Visual rhythm
- **FAQ spacing:** Single-line question rows are around 100 pixels high; wrapped questions increase row height naturally.
- **Asymmetry:** The support callout occupies only the top-right area, leaving substantial white space beside the long left list.
- **Closing spacing:** A generous gap after the last question creates a clear transition to the illustrated CTA.
- **Footer cadence:** Broad column spacing and a substantial lower legal margin keep the dense link collection airy.
### Responsive
- **Evidence:** Only the wide desktop composition is shown; smaller layouts and accordion animation are unverified.
- **Recommended reflow:** Stack the support box after or before the question list, reduce side margins and keep question controls aligned with their titles.
- **Recommended type:** Reduce the hero toward 36–40 pixels and questions toward 22–24 pixels while maintaining comfortable answer leading.
- **Footer recommendation:** Stack columns progressively and crop or remove decorative cone artwork before it interferes with links.
- **Interaction recommendation:** Use accessible accordion buttons with expanded state and visible focus, allowing long titles to wrap without crowding icons.
### Adaptation guidance
- **Preserve:** Maintain the serif/sans-serif contrast, pale lavender surfaces, ruled FAQ list and illustrated closing action.
- **Structure:** Separate hero, question list, support alternative, CTA and footer into independently responsive regions.
- **Sizing:** Use flexible row heights and a centered maximum-width container; do not hard-code the long page height from the capture.
- **Content fidelity:** Match the observed expanded/collapsed appearance without inventing unseen answers or product behavior.
- **Artwork:** Keep the line-art and faint cone motifs restrained, reserving lavender for brand emphasis and 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.