# Design from Reference: Composer AI 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:** AI Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/696756beaa3c207d03f4ba3f_ubviL8P7mUWdFK2BYZuyqwnai97i_raa-7s_TfjvNMk.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:** Cinematic trading-product marketing combining photographic landscapes, technical grids, glowing interface artwork and a restrained black/gray/forest-green system. - **Capture scale:** Source screenshot is 2001 × 12483px. Measurements below refer to the 1200px-wide inspection rendering unless stated otherwise; CSS scale is unverified. ### Page composition - **Top bands:** A slim black promotional strip sits above a pale navigation bar with the Composer mark left and product links, Login and a small black Sign Up pill right. - **Hero:** A broad two-column composition places a large left-aligned headline, short supporting copy and dark pill action beside an oversized hand holding a luminous sphere. A blue sky photograph and fine square grid form the right background; the hand overlaps and fades into the pale surface. - **Proof and demonstration:** A near-black band displays two headline metrics, followed by a large founder-video thumbnail with a centered outlined play circle. - **Product explanation:** A pale split section pairs a bold heading and four stacked selector-like rows with layered strategy/chart artwork over a dark textured photograph. - **Benefits:** A large blue-gray photographic panel introduces three vertically stacked themes—Creativity, Clarity and Control—then three illustrated capability columns and a centered white action. - **Lower regions:** An inset dark MCP feature panel precedes a two-column FAQ. A rocky landscape with a forest-green conversion card leads into a green footer dominated by dense legal copy. ### Information hierarchy - **Primary path:** The hero establishes the product proposition and Trade with AI action; the metric strip and founder video provide supporting proof before detailed capabilities. - **Feature progression:** The page moves from conversational strategy creation to editable strategies, automation infrastructure and an advanced MCP offering. - **FAQ:** A large bold heading occupies the left side while 19 closed question rows form a narrow-rule list on the right. No answers are expanded. - **Final conversion:** A short white statement and orange Start free trial pill sit inside the green card, followed by brand/social links and extensive disclosures. ### Typography - **Family:** Modern sans-serif with rounded forms and tight display spacing; exact font identity is unverified. - **Hero:** Approximately 50–54px regular headline in the 1200px rendering, with about 20px/27px muted supporting copy and 16px action labels. - **Section roles:** Conversational-product heading around 26px bold; benefits display heading around 48px regular; individual theme headings around 48px bold. FAQ title is approximately 48px bold. - **Supporting roles:** Feature descriptions are around 16px/23px; FAQ rows about 20px. Footer legal copy is much smaller, around 11–12px/17px, with subdued contrast. ### Colors & surfaces - **Sampled palette:** ICC-aware sRGB samples include pale gray #ECEEF0 and #EBEDEF, forest green #233C2F and dark tones #111416, #111417 and #192025. - **Accent roles:** Orange distinguishes the final trial action and small square motifs. Pink, green and cyan appear in strategy artwork; the hero sphere carries a multicolor iridescent glow. - **Photography:** Blue sky, dark rock textures and pink-brown geological imagery create distinct section moods while remaining integrated with grids, dot patterns and overlays. - **Surface contrast:** The page alternates pale editorial areas, near-black proof/MCP bands and a blue-gray benefits area rather than enclosing every section in a white card. ### Components - **Actions:** Pill-shaped dark hero button, wide white benefits button, thin white outlined MCP action and saturated orange trial button; right arrows repeat consistently. - **Founder video:** Broad landscape thumbnail with modest rounding, a large white outlined play circle and a visible speaker-name graphic. Playback state is not shown. - **Strategy illustration:** A translucent chart with green performance curves overlays stacked white action cards; prompt bubble and title/avatar establish a conversational workflow. - **Capability graphics:** Three evenly spaced illustrations use orbiting asset marks, editable strategy blocks and concentric automation arrows, each above centered text. - **MCP panel:** Large dark rectangle with colorful construction-line MCP lettering on the left and text plus outlined action on the right. - **FAQ rows:** Thin gray separators, one-line questions and right-facing chevrons, approximately 46–48px high in the inspection rendering. - **Final card:** Roughly square green panel over the rocky photograph, with white bold text, orange pill and orange/lavender square decorations at its upper-right edge. ### Visual rhythm - **Section cadence:** Large full-width photographic regions alternate with quieter text/interface sections; substantial vertical padding separates the major narratives. - **Alignment:** Outer margins are compact, roughly 26px in the inspection rendering, while interior content frequently follows halves or three equal columns. - **Detail rhythm:** Fine grids, dotted fields and small pixel-like squares repeat across artwork; rounded buttons contrast with mostly rectangular section boundaries. - **Footer density:** The sparse brand/social row transitions abruptly into tightly stacked legal paragraphs, producing a deliberately information-heavy ending. ### Responsive - **Recommended adaptation:** Only desktop is observed. Stack hero and feature splits, reduce display sizes and convert the three capability columns to a vertical sequence. - **Media treatment:** Crop the hand and landscape imagery deliberately while retaining the sphere and key subject; keep interface artwork readable rather than shrinking it uniformly. - **FAQ and footer:** Move the FAQ heading above the list, allow questions to wrap, and maintain readable legal text with adequate line spacing. ### Adaptation guidance - **Preserve:** Retain the cinematic photography, technical graphic overlays, alternating tonal sections, clear feature progression and recurring pill actions. - **Adapt:** Replace product artwork, metrics, founder video and capability claims with actual material. Preserve relevant legal content as real copy; do not reuse financial claims or disclosures merely as decorative texture. - **Restraint:** Concentrate visual complexity in media and diagrams, keeping surrounding typography, alignment and actions simple and consistent. 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.