Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Folio Comparison 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:** Folio
- **Category:** Comparison Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb67f9c08cd859ff869388_6acb66da0e8221f13081a9e7_cms-0b740951857ec10fdd4f64de.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 comparison page uses near-black navy backgrounds, slate tables, white headings, vivid violet CTAs, and a restrained geometric grid motif.
- **Tone:** The design is product-led and comparative, with long feature matrices carrying most of the content.
- **Observed scale:** The source measures 2880 ร 11772 pixels. CSS estimates assume a 2ร capture, equivalent to a 1440-pixel-wide page; actual pixel ratio is unverified.
### Page composition
- **Header:** Folio branding sits left, navigation spans the middle, and outlined Sign In plus violet Get Folio Free controls align right.
- **Hero:** A centered comparison title and short supporting sentence sit above two white logo tiles separated by โvs.โ Faint grid lines form the background.
- **First matrix:** A broad rounded table compares feature names against Folio and Arcade columns. The Folio column is lighter than the surrounding table.
- **Alternative comparisons:** A centered heading introduces three horizontal comparison cards with competitor wordmarks and chevrons.
- **Second comparison:** A centered value-oriented heading and short description introduce a second matrix comparing a free Folio plan, a highlighted Folio paid plan, and an Arcade paid plan.
- **Closing CTA:** A vivid violet rounded banner pairs a large invitation and Start for free control at left with a cropped product-library screenshot at right.
- **Footer:** A thin rule precedes branding/social details at left and four compact link groups at right.
### Information hierarchy
- **Comparison identity:** The hero title and paired logos establish the two products immediately.
- **Feature scan:** The first column is substantially wider than the status columns, allowing long feature labels to remain readable.
- **Preferred-column emphasis:** A lighter slate fill, brighter checks, and stronger text distinguish Folio in the first table and its paid plan in the second.
- **Status language:** Checks, x symbols, dollar signs, blanks, and short text values are used across the matrices. The screenshot does not provide a complete explicit legend for every symbol.
- **Plan detail:** Small plan/price lines sit beneath the second tableโs product headings.
- **Conversion:** Violet appears strongly in the header CTA and final banner, keeping the long comparison focused on signup.
- **Claim scope:** Feature availability, relative advantages, prices, and plan limits are historical comparison claims, not independently verified current product facts.
### Typography
- **Typeface appearance:** A rounded neutral sans-serif is used with bold headings and medium-weight table labels. Exact family is unverified.
- **Hero title:** Approximately 42โ46 CSS pixels, bold, with line-height near 52 pixels.
- **Section headings:** Around 32โ38 pixels, bold, centered.
- **Supporting text:** Approximately 16โ18 pixels with 25โ27-pixel line-height, in pale gray.
- **Table roles:** Header labels are around 18 pixels and bold; feature names around 16 pixels and semibold. Status text and values are around 14โ16 pixels.
- **Plan sublabels:** Small muted lines beneath headings use about 12โ14 pixels.
- **Footer:** Group headings are compact and bright; links and attribution are approximately 12โ14 pixels and muted.
### Colors & surfaces
- **Measured canvas:** #0A101C forms the darkest page family.
- **Measured tables:** #171E2A supplies table/card surfaces; #232D3B supplies highlighted comparison columns.
- **Measured violet:** #4D03FF appears in the strong CTA/banner family.
- **Measured neutrals:** #FFFFFF supplies bright text/logo tiles; #2E3540 contributes to subtle boundaries and gray controls.
- **Text tiers:** White headings and highlighted statuses contrast with muted blue-gray feature labels and competitor statuses.
- **Brand accents:** Pink/purple Folio marks and competitor logos provide small identity details; most content remains neutral.
- **Flat depth:** Tables use fine horizontal rules and filled columns rather than shadows. Rounded outer corners soften large dense blocks.
### Components
- **Header controls:** Sign In is a dark outlined rectangle; Get Folio Free is a filled violet rectangle with small corner rounding.
- **Logo comparison:** Two approximately 100-pixel white rounded tiles contain product marks, with a centered contrasting โvs.โ
- **First table:** Roughly 1220 pixels wide, with a broad feature column and two equal comparison columns. Rows are approximately 78โ82 pixels high.
- **Status marks:** Folio checks appear in bright white circles; competitor checks/x marks use darker slate circles. Dollar signs indicate a distinct captured status whose exact semantics require a legend.
- **Comparison cards:** Three equal dark rounded panels contain โvs,โ competitor wordmark, and a small right chevron.
- **Second table:** A broad feature column is followed by three plan columns. The central paid Folio column has a lighter slate fill.
- **Mixed values:** Some rows use short text such as unlimited or resolution values rather than symbols. Blank cells remain visually empty.
- **CTA banner:** A violet grid-backed rectangle has large rounded corners, white heading, outlined/lightly filled action, and a cropped dark product screenshot.
- **Product screenshot:** The illustration shows a sidebar and a grid of demo cards with thumbnails. It is marketing imagery, not a live workspace state.
- **Footer:** Solutions, Company, Compare, and Resource groups form four columns. Social/email icons sit beneath brand attribution.
- **Unshown states:** Signup, open menus, comparison-card destinations, hover/focus, and product interaction are not visible.
### Visual rhythm
- **Centered framework:** Hero, tables, comparison cards, CTA, and footer share a broad central container.
- **Long matrix cadence:** Equal row heights and fine horizontal rules make the large tables scannable.
- **Column contrast:** The highlighted slate column creates a continuous vertical guide through dense rows.
- **Section breathing room:** Large gaps separate the first table, alternative comparisons, second table, and closing banner.
- **Color concentration:** Violet is reserved for major conversion points, while tables remain dark neutral.
- **Quiet ending:** The compact footer follows a strong CTA without adding another large promotional block.
### Responsive
- **Evidence limit:** Only a desktop comparison page is captured. Mobile tables and sticky headers are unverified.
- **Recommended tables:** Preserve feature-to-plan relationships with accessible horizontal scrolling or a carefully designed stacked comparison view.
- **Recommended labels:** Keep feature names visible and provide explicit text equivalents for checks, crosses, dollar signs, and blank statuses.
- **Recommended header:** Collapse navigation while retaining a clear signup action.
- **Recommended cards/banner:** Stack comparison links and CTA content, scaling or cropping product artwork without hiding meaningful copy.
- **Recommended accessibility:** Use semantic table headers, captions, focus states, and adequate contrast for muted text.
### Adaptation guidance
- **Preserve comparative structure:** Separate broad feature availability from plan-specific detail rather than merging both into one ambiguous matrix.
- **Validate every claim:** Confirm competitor features, plan prices, limits, and terminology before reuse.
- **Add a status legend:** Define the meaning of each symbol and missing value explicitly.
- **Use reusable table tokens:** Standardize row heights, borders, text hierarchy, highlighted columns, and rounded containers.
- **Keep artwork secondary:** The product screenshot supports conversion but should not imply live demo data.
- **Build from measured dark colors:** Near-black navy, slate surfaces, white text, and vivid violet actions provide a coherent foundation.
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.