Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Mine 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:** Mine
- **Category:** FAQ Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbca3d8313d4c6c0cc4156_6ac5735f13e14044ebbe86f1_richtext-fedf7ebc3674380bd7f3.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:** Editorial FAQ page with bold serif headings, simple sans-serif reading text, whimsical black line/texture illustrations and restrained violet actions.
- **Evidence and scale:** Screenshot measures 1440 × 4949 image pixels. Sizes estimate 1× CSS capture; DPR and exact fonts remain unverified. All content through the footer was inspected.
### Page composition
- **Header:** Brand at left, horizontal navigation in the middle and outlined/filled account actions right; FAQ link is violet.
- **Hero:** Left-aligned eyebrow, two-line serif title and short explanation pair with a large hand-drawn balloon/eye illustration at right.
- **FAQ body:** A small two-link topic index occupies the left; a narrower right reading column contains About Mine and Getting Started sections with fully visible question/answer text.
- **Help/conversion:** A pale rounded help-center callout spans the central area, followed by centered contact copy and an illustrated signup region.
- **Footer:** Dark charcoal band contains white brand, three link groups, an app badge and lower copyright/social row.
### Information hierarchy
- **Article structure:** Large bold serif category headings, smaller regular serif questions and sans-serif answers create three clear levels.
- **Reading format:** Answers are expanded static text in the capture; no accordion rows or collapse controls are visible.
- **Inline emphasis:** Bold phrases, bullet/number lists and violet links break up dense paragraphs.
- **Next steps:** Help-center outlined action and final filled Get started action follow the informational content.
### Typography
- **Hero/category headings:** Approximately 48–52px CSS bold serif with compact leading.
- **Questions:** Approximately 28px regular serif, around 36px line height.
- **Answers:** Approximately 15–16px sans-serif with 24px leading; long paragraphs use a readable narrow measure.
- **Navigation/actions:** Around 15–16px; footer category labels uppercase gray around 14px. Exact serif/sans families are unverified.
### Colors & surfaces
- **Measured foundation:** White #FFFFFF dominates; pale #F9F9F9 fills the help callout.
- **Measured foreground:** Dark #2A2B35 supports headings, copy and footer ground; related #35363F/#3C3D46 appear in text/antialiasing.
- **Measured accent:** Violet #666AF3 supports buttons, links and small illustration grounds.
- **Artwork:** Black/gray textured linework and pale lavender accents maintain a light, informal visual voice.
### Components
- **Header actions:** Thin violet outlined Sign In pill and filled violet Get started pill, approximately 40–42px high.
- **Topic index:** Two simple text links aligned near the article start; no bordered navigation container.
- **FAQ content:** Long-form paragraphs, standard bullets and numbered steps; category/answer widths remain consistent.
- **Help callout:** Broad pale-gray rectangle with approximately 20px radius, centered sentence, small animal line icon and outlined pill action.
- **Final illustration:** Ostrich and bird/line motifs flank a centered-left serif signup statement and small violet pill.
- **Footer:** Broad charcoal surface, thin lower divider, white links and small social glyphs; black store badge sits in the app column.
### Visual rhythm
- **Reading column:** Main answers begin around x538 and span roughly 600px; wide left whitespace accommodates the topic index.
- **Spacing:** Questions use roughly 32–40px gaps before answers/next blocks, while category changes create larger breaks.
- **Illustrative punctuation:** Balloon motifs appear in hero and along the article edge; lower ostrich artwork reintroduces personality after dense text.
- **Surface contrast:** The dark footer provides the only strong full-width background change.
### Responsive
- **Observed limit:** Desktop only; anchor navigation, signup, policies and mobile layout are unobserved.
- **Recommended layout:** Move the topic index above the article, keep a single reading column and reduce decorative edge illustrations where space is limited.
- **Recommended type:** Scale serif category headings fluidly while preserving answer text size and comfortable line length.
- **Recommended footer:** Stack link groups and app badge with readable spacing.
### Adaptation guidance
- **Preserve readability:** Use a strong serif question hierarchy and quiet sans-serif answers, with real lists and meaningful inline links.
- **Keep help close:** Place a clear help-center route after dense informational content, then a separate signup region.
- **Implementation:** Provide semantic headings, anchor targets, keyboard focus and illustration alternatives. Privacy/legal and product statements are captured page copy, not independently verified current guidance.
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.