Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Front Culture Book
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Front
- **Category:** Culture Handbooks
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62f272ce3288e34a6ec38895_1660054770216-6caeea96-34f9-48b9-b9d5-f6d071845381-name%3DFrontCultureBook.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 long editorial culture article combines dark navy text, a pale pink hero band and extensive white space. Serif display typography adds warmth to a practical sans-serif reading system.
- **Illustration style:** A candid workplace photograph opens the story; flat colorful illustrations of a report, puzzle pieces, trophy, heart and mountain divide the values chapters.
### Page composition
- **Capture:** The source measures 1440 × 14548 image pixels. Dimensions below refer to observed pixels; a comparable CSS scale would assume an unverified 1× capture.
- **Navigation:** A roughly 80 px global header contains the Front mark, product links and a dark rounded action. A second, approximately 64 px publication bar contains the Front Page identity, category links and search icon.
- **Hero:** A pale pink full-width band holds a back link and large serif article title. A roughly 925 × 485 px photograph begins around x=120 and crosses from the colored band into the white article area.
- **Article introduction:** A bold serif summary follows the image. Author portrait, metadata and two sharing icons precede the italic opening note.
- **Reading layout:** The main prose column is approximately 700 px wide, aligned around x=120. A roughly 370 px subscription panel sits to its right near the opening; the right side remains largely empty through the later article.
- **Long-form sequence:** Introduction and a founder letter lead into five illustrated values, followed by inclusion and career-development sections. Author/publication credits close the prose.
- **Page ending:** A centered newsletter heading and capsule form precede a pale neutral footer with brand, about text, site-link groups, social icons and a small legal row.
### Information hierarchy
- **Article identity:** The large serif title, wide photograph and bold summary establish the article before the denser reading material.
- **Chapter levels:** Large bold sans-serif headings introduce major chapters; smaller value headings sit beneath centered illustrations. Bold inline prompts separate definitions from practical examples.
- **Reading aids:** Bullet lists, numbered circular markers, short paragraph groups and occasional blue links organize the lengthy prose.
- **Subscription priority:** The sidebar panel uses large coral text and a navy pill button. A second subscription invitation appears after the article, outside the reading column.
### Typography
- **Families:** The title, summary and final newsletter heading use a serif; navigation, paragraphs and chapter headings use a rounded-looking sans serif. Exact font identities are unverified.
- **Display roles:** The title is approximately 72 px, bold, with roughly 84 px line height. The summary is around 24 px with 36 px line height.
- **Article headings:** Major chapter headings are approximately 48 px, bold; individual value headings are around 32 px. Multi-line headings retain tight leading.
- **Body:** Prose appears approximately 18 px with 26 px line height. Bold lead-ins and an italic introduction provide local emphasis without changing the column width.
- **Metadata:** Author details, dates and footer legal copy step down to approximately 12–14 px; the author name uses uppercase emphasis.
### Colors & surfaces
- **Measured foundation:** ICC-aware sRGB sampling yields white #FFFFFF, pale pink #FAE9F1 and warm light gray #F4F2F0 as major surfaces.
- **Measured navy:** Dark text and button pixels include #031B3A; the deep blue provides a consistent reading and navigation color.
- **Illustration accents:** Sampled coral #EB5457 appears in the flat artwork. Lavender, indigo and golden yellow support the other chapter illustrations.
- **Minimal chrome:** Article content has no enclosing card or repeated borders. The sidebar and footer rely on subtle surface changes; the upper navigation has a light shadow.
### Components
- **Hero photograph:** A wide landscape workplace image has approximately 8 px corner radii and remains aligned with the article's left edge.
- **Author strip:** A small circular coral portrait sits beside stacked name, role and date information. Envelope and link icons align farther right within the reading area.
- **Sidebar subscription:** A pale gray rounded rectangle contains the publication wordmark, large multiline coral message and full-width navy pill button, with approximately 40 px internal padding.
- **Value illustrations:** Centered graphics roughly 250–320 px wide create chapter markers; each has generous white space above the associated heading.
- **Lists:** Standard bullets use hanging indentation, while the founder letter includes small navy numbered discs with white numerals.
- **Closing form:** A roughly 500 px capsule joins a white email input to a navy Subscribe segment with a continuous dark outline.
- **Footer:** Brand, explanatory text and two link groups form a wide horizontal layout; social icons sit low at the left and compact policy links at the right.
### Visual rhythm
- **Reading cadence:** Paragraphs have approximately 30–40 px separation. Lists keep generous gaps between items while wrapped lines use the same body leading.
- **Chapter breathing room:** Large illustrations and broad blank intervals create pauses between dense text chapters, avoiding a continuous wall of prose.
- **Consistent alignment:** Paragraphs, lists, headings and credits maintain one reading edge. The hero image is wider than the prose; the final newsletter section returns to centered alignment.
- **Asymmetry:** The narrow left-aligned article with a largely vacant right region gives the long page a calm editorial character.
### Responsive
- **Evidence boundary:** Only the desktop capture is available; the following are recommendations.
- **Reading width:** Convert the article to a fluid single column with comfortable side gutters and a maximum readable line length.
- **Sidebar handling:** Move the subscription panel below the introduction or article on small screens rather than squeezing the prose.
- **Media and type:** Scale the hero photograph and illustrations proportionally; reduce display headings while preserving chapter hierarchy.
- **Navigation and footer:** Collapse both navigation bars accessibly, stack footer groups and keep the email field/action usable at narrow widths.
### Adaptation guidance
- **Editorial system:** Reuse the serif article hero, sans-serif body, author strip and illustrated chapter markers for substantial guides or company handbooks.
- **Long-form structure:** Maintain semantic heading levels, real list markup and clear definition/example lead-ins. Consider an accessible chapter index for similarly lengthy material.
- **Content flexibility:** Allow heading wraps, variable list lengths and optional sidebar promotion without changing the primary reading width.
- **Visual assets:** Use a consistent flat illustration palette and meaningful image alternatives. Preserve the distinction between the opening photograph and symbolic chapter artwork.
- **Implementation scale:** Validate observed pixel measurements against the intended viewport before assigning CSS tokens; retain the navy/pink/neutral relationships and generous 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.