# Design from Reference: ParityDeals Integrations 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:** ParityDeals - **Category:** Integrations Page - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbcc4ae13ab9df8f053226_6acad147bf4db4ed68046895_cms-4dba11e6aa36d5e9491f1b5c.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 - **Character:** A spacious integration tutorial combines heavy charcoal headings, orange conversion accents and large interface illustrations. - **Structure:** Fine frame lines organize a white page before a near-black footer with oversized decorative branding. ### Page composition - **Capture scale:** The source is 2527 × 9887 pixels, inspected throughout. Capture density is unverified; sizes below describe the approximately 1400-pixel-wide inspection rendition rather than confirmed CSS dimensions. - **Hero:** Navigation precedes a split layout with a three-line pricing-integration headline, description and orange action left, paired brand artwork right. - **Tutorial:** A centered heading introduces six vertically stacked steps; each pairs a left explanation with a large right screenshot. - **Sequence:** Screens illustrate platform choice, credential creation, authentication, product selection, country pricing rules and app integration. - **Closing:** A hatched conversion strip with two actions precedes a dark multi-column footer and giant low-contrast wordmark. ### Information hierarchy - **Opening:** Large bold headline and orange action establish the integration purpose. - **Steps:** Small orange uppercase step labels precede bold titles and muted descriptions. - **Proof:** Large screenshots dominate each row, showing the interface associated with the instruction. - **Footer:** White subgroup headings organize muted links; the oversized wordmark is decorative. ### Typography - **Family:** A rounded modern sans serif appears throughout; exact identity is unverified. - **Hero:** Approximately 60 pixels in the inspection rendition, bold with 72-pixel leading. - **Step headings:** Around 28 pixels and bold; body around 16 pixels with 27-pixel leading. - **Section heading:** Approximately 34 pixels, centered across two lines. - **Utilities:** Step labels around 14 pixels; navigation/footer links compact and regular. ### Colors & surfaces - **Measured foundation:** White #FFFFFF dominates tutorial content. - **Measured footer:** Near-black #07080A creates the final band. - **Measured soft surface:** #F7FAFC frames selected screenshots. - **Measured ink:** #1A202C provides the strong text palette. - **Image tones:** #A89D99 and #A69B97 appear within dimmed screenshot backdrops; orange actions and yellow/purple brand art provide focal accents. ### Components - **Hero artwork:** Two circular brand marks sit on an abstract white/yellow dimensional form with looping yellow outlines. - **Orange buttons:** Rounded rectangles use white labels and a darker lower edge/shadow. - **Tutorial images:** Wide rounded screenshot panels show dialogs and forms, often against pale or dimmed backgrounds. - **Step layout:** A narrow text column aligns beside a wider image column with substantial whitespace. - **Conversion strip:** Fine diagonal hatching surrounds a bold centered statement and orange/white actions. - **Footer:** Rounded upper corners, brand/social block and three grouped link columns lead to a large cropped wordmark. ### Visual rhythm - **Frame:** Thin vertical lines define the centered page body and intersect horizontal section boundaries. - **Pacing:** Large vertical intervals separate tutorial rows; step labels, titles and descriptions remain tightly grouped. - **Consistency:** All six rows preserve text-left/image-right alignment. ### Responsive - **Observed state:** Only desktop is supplied; responsive behavior is unverified. - **Recommended tutorial:** Stack each explanation above its screenshot while preserving numbered order. - **Recommended imagery:** Keep screenshots proportional and provide explanatory text for small embedded controls. - **Recommended footer:** Stack link groups and contain the decorative wordmark within viewport width. ### Adaptation guidance - **Preserve teaching rhythm:** Keep six distinct steps with consistent typography and image treatment. - **Credential imagery:** Describe credential-field structure without reproducing or using token-like screenshot contents. - **Content fidelity:** Treat setup claims and UI states as captured examples, not verified live functionality. - **Accessibility:** Use descriptive step headings, meaningful image alternatives and service-specific action names. 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.