# Design from Reference: Dust 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:** Dust - **Category:** Comparison Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad347d5603a17eba5b78e_6acad10e053419932ab4a3c5_cms-7cf4d86204ecb2d6a1543c3e.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:** Clean competitive-comparison page with pale-blue hero/closing regions, white content and green-highlighted comparison columns. - **Character:** A monospaced hero headline and colorful geometric brand mark give the otherwise conventional marketing layout a technical identity. - **Capture:** The image measures 2464 × 10140 pixels. CSS estimates assume a 2× capture, equivalent to approximately 1232 × 5070 CSS pixels; actual scale and font identities are unverified. ### Page composition - **Header:** A colorful logo and grouped navigation align left; sign-in and blue sales controls align right. - **Hero:** A centered brand-versus-competitor mark precedes a large three-line headline, explanation and paired trial/demo actions. - **Customer proof:** A trust statement and twelve logos form a four-column, three-row grid within the same pale-blue region. - **Quick comparison:** A compact three-column table compares four criteria, with a green product header and pale highlighted product cells. - **Detailed comparison:** A second longer table presents ten criteria using check, cross and partial-status symbols. - **Reasons:** Six bordered icon-led cards form a three-column, two-row grid. - **Metrics:** A wide green rounded panel contains three large count-label groups. - **FAQ:** Eight collapsed question rows sit in a narrow centered column. - **Closing/footer:** A pale-blue conversion section repeats trial/demo actions, followed by a pale-gray multi-column footer. ### Information hierarchy - **Positioning:** The oversized hero headline frames the page as an alternative comparison. - **Conversion:** Blue trial is primary; white demo is secondary. A smaller join action follows customer proof. - **Table hierarchy:** Row labels occupy the left; product and competitor columns remain consistently aligned. - **Product emphasis:** Green header and pale yellow-green body cells distinguish the product column. - **Reason cards:** Short bold headings precede compact explanatory paragraphs. - **Metrics:** Three large numerals provide a separate proof layer before FAQ. - **Captured claims:** Comparison wording and counts are promotional screenshot content, not independently verified product facts. ### Typography - **Hero family:** A monospaced-style face is visible in the main headline; exact identity is unverified. - **Hero scale:** Approximately 46–50-pixel CSS size, medium-to-bold, with tight multi-line spacing. - **Other UI family:** A neutral sans-serif supports body and navigation; exact identity is unverified. - **Section headings:** Approximately 28–36 pixels, medium-to-semibold. - **Body:** Approximately 14–16 pixels with 22-pixel line height. - **Table labels:** Approximately 12–13 pixels; secondary descriptions are smaller and muted. - **Metrics:** Approximately 48 pixels, bold, with smaller labels beneath. - **Footer:** Small uppercase group labels and compact bold link text. ### Colors & surfaces - **Measured base:** White #FFFFFF supports main content; pale blue #E9F7FF fills hero and closing. - **Measured footer:** Light gray #F7F7F7 supports the lower navigation region. - **Measured green:** #428B5C fills the metric panel; #6AA668 appears in comparison headers. - **Measured highlighted cells:** Pale #FEFFF1 and #F0FBBD support product emphasis/status symbols. - **Measured action:** Blue #1B91FF appears in primary controls. - **Measured text:** Near-black #111418 supports headings and principal labels. - **Boundaries:** Pale gray #EEEEEF divides tables/cards; surfaces are mostly flat with restrained rounding. ### Components - **Hero actions:** Blue trial and white demo buttons use approximately 40-pixel heights and rounded corners. - **Logo grid:** Twelve muted customer marks have small case-study links under selected entries. - **Quick table:** Three aligned columns use rounded outer corners, fine horizontal rules and icon-led explanatory cells. - **Detailed table:** Ten rows use circular green check, gray cross and amber partial indicators. - **Reason cards:** Six equal bordered rounded rectangles contain pale-lime icon tiles, bold titles and small paragraphs. - **Metric panel:** A broad green rounded rectangle uses white counts and pale-lime supporting labels. - **FAQ:** Eight thin-rule-separated rows have right-aligned plus signs; answers are collapsed. - **Closing actions:** Trial/demo controls repeat beneath a centered two-line invitation and small trial note. - **Footer groups:** Product/developer, comparisons, company, social and legal links form a dense lower grid. - **State scope:** No expanded FAQ, checkout, demo form or alternate comparison state is visible. ### Visual rhythm - **Centered measure:** Hero and FAQ use narrower widths than cards and metric panel. - **Section spacing:** Large 80–120-pixel CSS breaks distinguish proof, tables, reasons, metrics and FAQ. - **Grid repetition:** Four-column logos, three-column comparisons/cards and three metrics create recurring structured groups. - **Color cadence:** Pale blue bookends white analysis content, with green emphasis reserved for product comparison and proof. - **Footer density:** Small link groups follow the spacious closing conversion region. ### Responsive - **Recommendation — tables:** Preserve row-label association through horizontal scrolling or stacked criterion cards. - **Recommendation — grids:** Reduce logo and reason-card columns on narrow screens. - **Recommendation — headline:** Scale the monospaced heading fluidly without awkward overflow. - **Recommendation — FAQ:** Allow long questions to wrap while keeping plus controls aligned. - **Recommendation — footer:** Stack groups and retain readable legal links. No mobile layout is evidenced. ### Adaptation guidance - **Preserve evidence layers:** Keep quick differences, detailed matrix, reasons, metrics and FAQ distinct. - **Use consistent comparison semantics:** Pair icons with accessible status labels rather than color alone. - **Reuse restrained palette:** Pale blue for framing, green for product emphasis and blue for conversion. - **Maintain commercial content separately:** Treat claims, counts and trial terms as data requiring independent review. - **Define interactions separately:** FAQ expansion, case studies, trial and demo outcomes are outside the capture. - **Avoid presenting claims as verified:** The design context describes the visible marketing structure, not comparative accuracy. 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.