# Design from Reference: Composer 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:** Composer - **Category:** Comparison Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad3a2c2028efdec71af4c_6acad14950cf4647822be90a_cms-3b1d89d330cbadfe431aac6d.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:** Typography-led comparison article on white, with bold black headings, thin rules and a restrained green conversion card. - **Character:** A narrow metadata/table-of-contents rail supports a long editorial column with embedded product screenshots. - **Closing treatment:** Dense gray disclosures and a broad pale-gray footer contrast with the main high-contrast article. ### Page composition - **Canvas:** Source 2465 × 10138 pixels, inspected throughout in five crops at 1400px width. Geometry uses inspection pixels; exact CSS capture scale is unverified. - **Header:** Black promotional strip above a white horizontal logo/navigation row. - **Title region:** A large two-line comparison headline begins near x30, y286, following a broad empty band and small breadcrumb. A one-line subtitle sits below. - **Article grid:** Approximately 343px metadata/sidebar at x30, a 23px gap and roughly 761px article column at x396. - **Body:** Introductory heading/prose, pricing imagery, competitor pricing table, interface screenshot and subsequent comparison sections continue in the right column. - **Ending:** Full-width black article CTA and small disclosures precede a pale-gray footer with logo, social/contact row and extensive legal paragraphs. ### Information hierarchy - **Headline:** Bold comparison title is the primary visual anchor; subtitle clarifies the article topic. - **Sidebar:** Author role, date, social links and hierarchical table of contents are separated by horizontal rules. - **Article:** Large introductory heading leads to smaller bold subsections covering pricing, interface/access, security, asset types, AI, support and concluding remarks. - **Media:** Embedded pricing cards, table and strategy-builder screenshot provide visual breaks within the prose. - **Conversion:** A green sidebar panel contains a black pill action; another black pill spans the article near its end. - **Disclosures:** Small gray text is subordinate and visually separated from editorial content. ### Typography - **Headline:** Approximately 58px bold sans serif with around 58–60px line height and tight tracking. - **Intro heading:** Approximately 32px bold, around 41px line height. - **Subsections:** Approximately 24px bold, around 29px line height. - **Body:** Approximately 16px regular, 23px line height, with bold inline emphasis and underlined links. - **Sidebar/navigation:** Around 14px, with muted gray labels and indented contents items. - **Disclosures:** Around 12px/15px in the article and about 14px/19px in the broader footer. Exact font identity is unverified. ### Colors & surfaces - **Measured base:** #FFFFFF white, #000000 black and #ECEDEE pale-gray footer/media surface. - **Measured secondary neutrals:** #EDEEF0, #F7F7F7, #EEEFF1 and #F4F5F7 occur in embedded interface surfaces. - **Measured accent:** #32805A green sidebar conversion panel. - **Text hierarchy:** Strong black article text contrasts with gray metadata and lighter gray disclosure paragraphs. - **Surface treatment:** Minimal page decoration; most borders/shadows belong to embedded product imagery and the sidebar CTA. ### Components - **Metadata rail:** Thin horizontal rules divide author, date, sharing and contents groups; small chevrons mark indented contents entries. - **Sidebar CTA:** Approximately 343 × 144px green panel with small radius, subtle shadow, large mixed-weight heading and black pill. - **Pill actions:** Black rounded controls use white text and a right arrow; the article-end action spans roughly 761px. - **Embedded images:** Centered pricing graphic, wide competitor table and strategy-builder screenshot scale to the article width with no uniform enclosing card. - **Footer:** Logo left, social icons/contact right, then many legal paragraphs. A privacy-choice control and thin green bottom line finish the page. - **States:** Contents expansion, sticky behavior, link hover and signup outcomes are not demonstrated. ### Visual rhythm - **Header gap:** Substantial whitespace separates navigation from the title block. - **Article cadence:** Paragraphs use roughly 16px gaps; subsections receive broader 30–40px separation. - **Image breaks:** Large screenshots interrupt prose at major comparison points, maintaining the same reading-column alignment. - **Sidebar balance:** The left rail ends early, leaving broad white space beside the remainder of the article. - **Closing:** A large gap precedes disclosures, then a full-width pale-gray footer creates a clear structural boundary. ### Responsive - **Observed scope:** Desktop long article only; sticky navigation and mobile behavior are unverified. - **Recommended columns:** Move metadata and contents above the article at narrow widths. - **Recommended type:** Reduce headline scale and use a comfortable reading width with 20–24px gutters. - **Recommended media:** Keep images fluid and provide detail access for dense screenshots/tables. - **Recommended footer:** Wrap social/contact utilities and preserve readable disclosure text. ### Adaptation guidance - **Preserve:** Strong editorial hierarchy, visible contents navigation, restrained conversion placements and clear disclosure separation. - **Content fidelity:** Replace comparison claims, prices and financial examples with supplied approved content; visual inspection does not verify their current accuracy. - **Implementation:** Use semantic article headings and anchor links; treat embedded product interfaces as images unless functionality is specified. - **Accessibility:** Ensure underlined links remain clear, provide useful image alternatives and maintain sufficient contrast for small gray text. 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.