Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Livestorm Checklist
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Livestorm
- **Category:** Empty
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6ac6127d848730a1e2429e1e_6ac61123fcec85d15f17737e_livestorm-checklist-desktop-compressed.avif
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 exceptionally long educational checklist/article with a narrow centered reading column, pale chapter bands, blue product examples, and repeated sharing controls.
- **Character:** Practical and instructional, using small checkboxes, tip callouts, screenshots, and occasional conversion banners rather than decorative card grids.
### Page composition
- **Capture and scale:** The screenshot measures 1440 × 25093 pixels. Approximate dimensions below refer to screenshot pixels; CSS scale is unverified. All nine chapters and the footer are visible in the full capture.
- **Opening:** A white navigation header precedes a centered two-line webinar-promotion title, muted subtitle, and a left-aligned nine-item linked summary.
- **Chapters:** The sequence covers planning, evergreen content, owned-media creation, community outreach, paid advertising, existing-user messaging, registrant reminders, improvement/analytics, and post-event value.
- **Chapter framing:** Each chapter begins on a full-width near-white band containing a small colored line icon, heading, introduction, and copy-link/URL control. White tactic sections follow within the same roughly 710 px reading width.
- **Repeated content:** Tactics combine checkbox headings, paragraphs, optional media, pale-blue team tips, and small social/email sharing controls. Blue product/trial banners recur between selected chapters.
- **Footer:** A deep navy footer contains brand/language/badge left, five link groups across the width, and a lower legal/compliance row.
### Information hierarchy
- **Navigation:** The linked summary provides a chapter-level entry point before the very long reading sequence.
- **Tactic hierarchy:** Semibold checkbox titles lead each tactic. Supporting prose, media, and optional tips remain clearly subordinate.
- **State:** The first visible tactic is checked and struck through; most others are unchecked. This is a displayed checklist state, not evidence of persistence behavior.
- **Conversion:** Product trial banners are visually distinct from instructional content and recur at chapter breaks.
### Typography
- **Family:** A straightforward sans serif is visible; exact family identity is unverified.
- **Title and chapters:** Opening title is approximately 36–38 px medium, with 46 px line-height. Chapter headings are about 27–29 px semibold.
- **Tactics:** Tactic titles are roughly 20–21 px semibold; body copy is about 17 px with generous 29–30 px line-height.
- **Utilities:** Tip labels use bold body-size text. Copy-link, share controls, metadata, and footer labels use smaller 13–15 px type.
### Colors & surfaces
- **Foundation:** Sampled sRGB #FFFFFF forms reading regions and #FBFBFB the broad chapter-introduction bands.
- **Tips:** Sampled pale blue #F3FBFD supports tip callouts with a brighter blue left border.
- **Brand and media:** Sampled navy #0C2F45 defines the footer/brand ink. Blue #0F5AAC and #3286D4 appear in large instructional graphics and conversion imagery.
- **Utility accents:** Blue links/share controls and pale green email-share controls recur. Chapter icons vary among blue, violet, green, mint, and orange. Exact individual utility accents are unverified.
### Components
- **Chapter bands:** Broad near-white rectangles provide generous vertical padding while keeping icon, title, prose, and copy-link aligned to the reading column.
- **Checklist items:** Small square checkboxes sit immediately before titles. Some titles include a small circular brand marker.
- **Tip callouts:** Pale-blue rectangles use a fine blue left rule and roughly 28 px padding, with bold source label and one or more explanatory sentences.
- **Media:** Large blue infographics illustrate timing/duration, while browser/product screenshots demonstrate embeds, forms, social posts, and invitations. A video example includes a play overlay and player controls.
- **Sharing row:** Three compact lightly filled controls for Twitter, LinkedIn, and email repeat beneath tactics.
- **Conversion banners:** Wide blue image-backed banners pair product copy left with a white trial action and smaller demo link right. Corners are only modestly rounded.
- **Footer:** Compact white links sit under muted uppercase group labels on navy, with thinly separated lower legal details.
### Visual rhythm
- **Reading width:** Keep the primary column around 710 px despite full-width chapter backgrounds; all tactic/media/tip edges align consistently.
- **Spacing:** Use roughly 60–90 px between tactics, 25–35 px between prose and callouts/media, and 90–120 px around chapter transitions.
- **Repetition:** Preserve the checkbox → explanation → optional evidence/tip → sharing rhythm, varying height naturally with content.
- **Long-page pacing:** Chapter bands and occasional blue conversion banners provide landmarks without interrupting every tactic.
### Responsive
- **Observed state:** Only desktop is visible.
- **Recommended reflow:** Use 20–24 px page gutters, make media and tips fluid, wrap sharing controls, and stack banner copy/actions.
- **Long-form navigation:** Keep chapter anchors usable and checkboxes associated with their labels. Avoid shrinking lengthy prose to reduce page height.
### Adaptation guidance
- **Preserve:** Retain the summary-led navigation, chapter bands, readable checklist structure, tips, evidence media, and restrained repeated sharing pattern.
- **Adapt:** Organize the new material into meaningful chapters and actionable items. Use real evidence and original media rather than copying webinar recommendations.
- **Avoid:** Do not reproduce unsupported performance statistics, platform claims, or checked states. Scale the long-page structure to actual content length.
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.