# Design from Reference: Remote Referral Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Remote - **Category:** Referral - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad9bba43009b06fe6bea5_6acad93abd9ce0e960550f02_cms-668ccdc97663be2e9642c40d.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 payroll-platform referral settings with pale chrome, a large white information card, and bright blue utility accents. - **Visual character:** Restrained neutral typography, clear section dividers, small illustrated step icons, and broad empty margins. - **Surface treatment:** One dominant rounded white panel carries the complete referral explanation. ### Page composition - **Screenshot size:** 5760 × 3260 image px. Capture-to-CSS scale is unverified; estimates below use a hypothetical 1440 px desktop rendering. - **Shell:** Left navigation occupies about 17% of width; account-settings workspace occupies the remainder. - **Header:** Account settings title, four tabs, and search/help/notification icons. - **Main card:** Broad white referral panel with title/reward sentence, unique link, divider, three how-it-works rows, and support links. - **Sidebar:** Payments and Company groups, employee-handbooks link, and bottom user identity. ### Information hierarchy - **Active context:** Referral Program is the dark selected tab with blue underline. - **Primary message:** Referral heading and reward sentence introduce the offer. - **Utility action:** Unique referral URL and blue copy icon are isolated above the process explanation. - **Process:** Refer, earn, and claim form three ordered explanatory rows. - **Supporting links:** Referral portal and Help center sit in a small final line below a divider. ### Typography - **Family:** Rounded neutral sans serif; exact family unverified. - **Page title:** Approximately 24 px at the hypothetical desktop scale, weight 600, line-height 30 px. - **Card heading:** Approximately 18 px bold. - **Body/steps:** Approximately 14 px with 21–22 px line-height; secondary descriptions are muted blue-gray. - **Labels/tabs:** Approximately 14 px, selected tab medium weight. - **Small help line:** Approximately 12 px. - **Precision:** These are reconstruction estimates, not measured browser CSS. ### Colors & surfaces - **Card:** Sampled sRGB #FFFFFF. - **Sidebar:** Sampled pale #F8FCFF. - **Workspace/chrome:** Sampled #F3F4F8, #F2F3F7, and #F1F2F6. - **Subtle separators:** Sampled #EDF2F6. - **Local emphasis:** Bright blue copy icon, active underline, step icons, and help links. - **Text treatment:** Near-black titles contrast with muted blue-gray descriptions; bold reward amount is embedded in the supporting sentence. ### Components - **Main card:** Approximately 12 px radius at hypothetical desktop scale, broad soft shadow, and roughly 32 px padding. - **Referral link:** Plain readable URL with adjacent unboxed copy icon; no heavy input enclosure. - **Process icons:** Three pale-blue rounded squares, approximately 36 px, containing person-plus, currency, and gift symbols. - **Process rows:** Short title above one or two lines of explanatory text. - **Tabs:** Flat text tabs with thin baseline and blue active underline. - **Footer links:** Blue text with small external-link arrows. - **Observed state:** Referral information only; copying, eligibility, reward payment, and portal behavior are not shown. ### Visual rhythm - **Alignment:** Card title, referral label, section heading, and dividers share one left edge. - **Link separation:** Generous whitespace around the unique link distinguishes it from the process explanation. - **Process cadence:** Three evenly spaced icon/text rows with consistent left alignment. - **Card width:** Long claim-description line spans most of the card, while earlier rows are shorter. ### Responsive - **Observed version:** Desktop only. - **Shell recommendation:** Collapse sidebar and scroll or wrap settings tabs. - **Card recommendation:** Reduce padding to 20–24 px on small screens. - **Link recommendation:** Allow long referral URL wrapping or controlled horizontal scrolling; keep copy reachable. - **Process recommendation:** Retain vertical icon/title/description order. ### Adaptation guidance - **Preserve:** Simple referral-link utility, three-step explanation, blue accents, and quiet settings shell. - **Content fidelity:** Use real reward amounts, qualifying events, payout methods, and eligibility. - **Privacy:** Replace the screenshot referral URL with the current user's valid link. - **Starting dimensions:** Approximately 24 px page title, 18 px card title, 14 px body, 32 px card padding, and 36 px step icons under the stated hypothetical scale. - **Interaction fidelity:** Provide copy feedback and external navigation only according to implemented product behavior. 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.