Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Highnote 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:** Highnote
- **Category:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbc5492488d2f8f7d36791_6acbbccc6b6ddc4c143badab_cms-62f59fb0ae902150dbf67295.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:** A bold fintech platform landing page combining oversized regular-weight black typography, warm cream surfaces, lime/mint gradients, and simplified card-platform illustrations.
- **Character:** Editorial scale and strong black-and-white contrast give the page confidence. Rounded panels and pill actions keep the technical subject approachable.
### Page composition
- **Capture and scale:** The screenshot measures 1440 ร 7626 pixels. Approximate dimensions below refer to screenshot pixels; the CSS capture scale is unverified.
- **Hero:** A full-width navigation row sits over a white-to-mint-to-yellow gradient. A very large two-line headline spans the upper region; supporting copy and two actions sit left, while a card/dashboard composition extends to the right edge. Four customer marks appear below.
- **Platform overview:** A thin rule introduces a split heading/body section, followed by six white illustration cards in a three-by-two grid.
- **Middle sections:** A centered brand-customization heading precedes card/mobile/mail artwork opposite prose. A product section pairs a vertical list of product links with a large white illustration panel.
- **Closing sequence:** A large black rounded developer panel is followed by two cream conversion tiles, a three-card news grid, an oversized horizontally cropped text strip, and a black multicolumn footer with newsletter signup.
### Information hierarchy
- **Display system:** Large regular-weight headings dominate each section, with restrained body copy and short pill actions beneath.
- **Feature evidence:** The six-card grid translates capabilities into compact diagrams and one-sentence captions. Product choices become a large typographic list, with Debit underlined as the visible selection.
- **Developer focus:** The black panel isolates API/developer messaging and three supporting capability columns. News and newsletter content close at a quieter level.
### Typography
- **Family:** A neutral contemporary sans serif is visible; exact font identity is unverified.
- **Display:** Hero and major headings are approximately 90โ98 screenshot px, regular weight, with tight 1.1โ1.15 line-height and slightly negative tracking.
- **Body:** Main supporting paragraphs are approximately 22โ24 px with 32โ34 px line-height. Grid captions and navigation are about 16โ17 px.
- **Secondary headings:** Product links are roughly 48 px; conversion-tile headings around 46โ48 px. News titles are approximately 23โ24 px with comfortable multiline leading.
- **Utility labels:** Footer category labels use small uppercase gray text with expanded tracking. Button labels remain compact and regular weight.
### Colors & surfaces
- **Foundation:** Sampled sRGB colors include warm cream #F5F3EB, white #FFFFFF, black #000000, and soft warm gray #E2DFD6.
- **Green accent:** Sampled mint-green #9FECA3 and nearby #9FECA4 anchor the logo disk, hero action, and diagram accents.
- **Gradient:** The opening transitions through mint and lime/yellow, fading toward cream below. The product-card illustration also carries a green-to-lime blend; exact gradient stops are not verified.
- **Contrast regions:** Use white text and monochrome icons inside the black developer panel and footer. Cream conversion/news panels sit within the white lower page.
### Components
- **Pill actions:** Buttons are approximately 44โ48 px tall with fully rounded ends and trailing arrow icons. Treatments include mint with black ink, black with white ink, white on black, and an outlined header action.
- **Hero illustration:** A large black payment card overlaps a pale dashboard window. The card includes a chip and contactless mark; interface rows use simplified neutral and green indicators.
- **Capability cards:** Six roughly 400 px-wide white cards have approximately 20 px radii, large monochrome diagrams above centered captions, and consistent internal spacing. Diagrams include identity, account connectivity, ledger entries, rule switches, and authorization links.
- **Developer panel:** A broad black rectangle has approximately 40 px corner radii, a centered headline/description/actions group, and three equal lower columns for API, notifications/webhooks, and dashboard concepts.
- **Conversion and news:** Two large cream rounded tiles pair centered copy and black actions with small connection diagrams. News cards use cream outer panels, inset white image areas, and left-aligned titles.
- **Footer:** Four compact link groups share space with a pill-shaped email/subscribe control. A fine rule separates the legal/disclosure row beneath.
### Visual rhythm
- **Layout cadence:** Alternate oversized headings, two-column explanations, and regular three-column grids. Preserve the broad approximately 80 px side gutters.
- **Spacing:** Major sections have roughly 120โ180 px breathing room; card-grid gaps are about 35โ40 px. Body-to-action gaps are approximately 40โ48 px.
- **Decorative restraint:** Dotted connectors and rounded diagrams repeat within illustrations; the general reading surface remains uncluttered.
### Responsive
- **Observed state:** Only desktop is shown. The oversized text strip is cropped horizontally in this capture; motion cannot be inferred.
- **Recommended reflow:** Stack hero copy and artwork, reduce display headings to roughly 40โ48 px CSS, collapse three-column grids to two and then one, and stack the paired conversion tiles.
- **Controls and artwork:** Keep pill actions readable, allow footer groups to wrap, and simplify large product diagrams for narrow screens rather than shrinking their labels beyond legibility.
### Adaptation guidance
- **Preserve:** Retain regular-weight oversized type, cream/white section changes, localized green gradients, pill actions, simplified technical diagrams, and the strong black developer panel.
- **Adapt:** Replace card-finance imagery with genuine illustrations of the new product's workflows. Maintain comparable visual hierarchy without copying regulatory or product claims.
- **Content discipline:** Use supplied customer logos, news, and capabilities. The cropped oversized strip can become a complete static statement if no intentional motion design is provided.
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.