# Design from Reference: ConvertKit Referral Flow Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** ConvertKit - **Category:** Referral - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbc06e7ce271b12870b60d_6acbbfbf39e7f22db402c811_cms-9edc69ec27c4553cf60ba802.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:** Traditional account-settings interface with an invitation-success panel and a parallel sent-invitations table. ### Page composition - **Canvas:** 1440 × 924 screenshot px. - **Structure:** Dark main navigation, white settings tab strip, light-gray left settings menu; main area title above two columns; lower pale action/footer bands. ### Information hierarchy - **Priority:** Referral benefit headline introduces the feature. Invite sent confirmation and Send more invites action sit left; progress and delivery status sit right. ### Typography - **Family:** Humanist sans serif, with small italic serif-style secondary sidebar captions; exact families unverified. - **Scale:** Estimated screenshot page heading 26 px, section/body 16 px and table labels 12 px uppercase. ### Colors & surfaces - **Sampled palette:** White #FFFFFF, pale surround #F3F6F9, navy #212F4F, outlines #DCE1E5/#E6EBEF, coral action #EB666E and muted blue #48639C. ### Components - **Success panel:** Large outlined white rectangle with paper-plane/envelope illustration, small gold sparkles, centered copy and muted gray action. - **Table:** Sent invitations heading, thin horizontal progress track, email/status columns and small orange outlined Sent badge. - **Settings:** Selected referral row turns white with blue icon/label; coral Save Settings action aligns lower right. ### Visual rhythm - **Spacing:** Approximately 30 screenshot px content gutters; large internal panel padding and broad blank lower area. ### Responsive - **Observed:** Desktop only. - **Adaptation:** Stack success panel and invitation table, collapse settings navigation and preserve readable delivery status. ### Adaptation guidance - **Preserve:** Clear success feedback, separate invitation history and subdued settings chrome. - **Replace:** Use actual referral terms and invite status; never reuse the reference recipient address. 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.