Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Arc Landing 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:** Arc
- **Category:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6470b206c0d3f8f06776_6acb63e68162924cd9847ee5_cms-e2f836a2c129fe5bfa64ff3c.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:** Polished financial-product landing page with large regular-weight typography, teal and mint accents, warm beige panels and substantial product illustrations.
- **Character:** Broad rounded feature blocks and realistic dashboard fragments alternate with open white sections.
- **Contrast:** Dark financing, testimonial and closing regions create a strong lower-page shift.
### Page composition
- **Canvas:** Source 2880 × 14600 pixels, inspected throughout in six crops at 1400px width. Measurements use inspection pixels; approximate 2× CSS capture is plausible but unverified.
- **Top:** Teal announcement bar, spacious navigation row, centered two-line hero statement, two-line subtitle and paired actions.
- **Hero media:** A large white financial dashboard mockup, about 1106px wide, extends below the pale-gray hero background with a diffuse shadow.
- **Solutions:** Centered section heading precedes three large full-width rounded panels: deep-teal operating account, beige treasury account and dark revenue financing.
- **Support:** A large left-aligned heading introduces three equal illustrated benefit columns.
- **Proof:** Dark grid-backed testimonial pairs a large portrait at left with quote and attribution at right.
- **Closing/footer:** Dark CTA band with large mixed-weight statement precedes white legal paragraphs, logo/link columns, email signup and final legal/social row.
### Information hierarchy
- **Hero:** The startup-finance statement is dominant; Get started is filled teal and Book a demo is outlined.
- **Product sequence:** Each solution panel has a small pill label, large benefit heading, supporting copy and Learn more action beside illustrative financial UI.
- **Capabilities:** Three security/experience/support groups use abstract geometric illustrations above title and paragraph.
- **Trust:** The testimonial quote is prominent and supported by a portrait and smaller attribution.
- **Final action:** A large statement emphasizes selected words in bold, followed by short copy and a restrained outlined action.
- **Disclosures:** Dense small legal text is separated from marketing content above the navigation footer.
### Typography
- **Hero/major sections:** Approximately 62px regular sans serif, around 68–70px line height and tight tracking.
- **Solution titles:** Approximately 54px regular, around 60px line height; dark/colored panels switch foreground contrast appropriately.
- **Benefit titles:** Around 22px medium, with 16px/23px descriptions.
- **Testimonial:** Around 29px regular with roughly 34px line height; attribution around 16px.
- **Utility roles:** Navigation around 16px medium, buttons 14px semibold, pills 14px, legal copy around 12px/18px and footer links around 14px.
- **Font identity:** Neutral proportional sans serif; exact family is unverified.
### Colors & surfaces
- **Measured base:** #FFFFFF white and #F3F3F3 pale hero background.
- **Measured darks:** #1E1E1C primary dark foreground/closing tone, #1B1B1B financing panel and #222222 testimonial region.
- **Measured feature colors:** #01544F deep teal, #E0D8BF warm beige and #F8F7F4 pale illustration surfaces.
- **Accents:** Mint buttons and geometric shapes, gold treasury accents and teal dashboard marks create a restrained financial palette.
- **Depth:** Broad low-opacity shadows under product panels and mockups create depth without heavy outlines.
### Components
- **Hero controls:** Filled and outlined buttons around 145–150 × 55px, small 3–4px radius and a right chevron on primary actions.
- **Dashboard mockup:** White shell with around 8px radius, narrow icon rail, asset summary, allocation bar and account/financing cards. It is illustrative rather than a live transfer interface.
- **Solution panels:** Approximately 1106px wide and around 720px tall, 16px radius and roughly 70px padding; content uses two columns.
- **Operating artwork:** Three stacked white transaction/integration cards with icons and arrows.
- **Treasury artwork:** Overlapping white chart cards and a black circular exchange symbol; charts use teal/gold lines with translucent area fills.
- **Financing artwork:** Large stacked monetary figures with fading opacity and a thin slider-like line with white circular handle; actual interaction is unverified.
- **Benefit illustrations:** Three square pale tiles with geometric lock, directional and conversation motifs on fine grid lines.
- **Footer signup:** Small email input and full-width teal Sign up button within the final column.
### Visual rhythm
- **Hero cadence:** Title, subtitle and action row are separated by roughly 25–40px; media follows with a broad gap.
- **Feature rhythm:** Around 39px separates solution panels; each uses generous internal whitespace and vertically centered content.
- **Section spacing:** Major white sections use approximately 110–140px vertical breathing room.
- **Support columns:** Equal illustration widths and aligned text groups create a three-column cadence.
- **Dark proof:** Grid lines provide subtle structure behind portrait and quote, followed by a broad dark CTA region.
- **Footer:** Long disclosures occupy a full-width reading block before evenly spaced navigation columns and a fine-rule legal row.
### Responsive
- **Observed scope:** Desktop long page only; animations, menus and mobile behavior are unverified.
- **Recommended hero:** Reduce headline size and wrap actions; preserve readable mockup detail through responsive cropping or an alternate asset.
- **Recommended solutions:** Stack text above artwork and reduce padding while retaining each panel’s color identity.
- **Recommended benefits/proof:** Stack benefit columns and place testimonial portrait above quote.
- **Recommended footer:** Wrap link groups, use a fluid signup field and keep disclosure text legible without horizontal scrolling.
### Adaptation guidance
- **Preserve:** Teal/mint/beige palette, large regular-weight headings, substantial rounded product panels and alternating light/dark narrative.
- **Content fidelity:** Replace financial figures, rates, coverage statements, product claims and testimonials with supplied approved content; screenshot text is not current guidance.
- **Assets:** Treat dashboard, transactions, charts and financing slider as illustrative unless actual functionality is specified.
- **Implementation:** Use a shared centered wrapper, responsive two-column panels and consistent button/spacing tokens.
- **Accessibility:** Ensure contrast on beige and dark surfaces, meaningful alternatives for product imagery and clear labels for signup/actions.
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.