Airtable Referral Interface

# Design from Reference: Airtable Referral Interface Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Airtable - **Category:** Referral - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecad600e99ef819cd91ff1_1659676344106-5ee53a4676303de9d3e67f99_screencapture-airtable-account-credits-2020-06-13-22_38_04.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 sparse account-referral page uses a white canvas, simple text columns, blue navigation accents and small green credit indicators. - **Capture evidence:** The screenshot measures 1440 × 934 pixels. Approximate dimensions refer to image pixels; a near-1× CSS scale is plausible but unverified. - **Tone:** Plain administrative typography and minimal borders prioritize referral information over decoration. ### Page composition - **Brand and utilities:** The Airtable logo sits upper left, with small Help and Log out utilities upper right. - **Sidebar:** A narrow left rail groups account links and workspace information without a colored background. - **Main content:** A large Referrals and credits title sits above a central referral-information column. - **Credit summary:** A narrower right column lists the current credit total and individual credit events. - **Invitation tools:** A referral-link block and small social-share control sit above an email field and blue Send invite button. - **Invited list:** Six avatar-led entries appear below, with credit-awarded status and relative timing aligned right. ### Information hierarchy - **Page title:** The bold heading establishes the account area. - **Section labels:** Small uppercase gray labels identify Tell a friend and Your credits. - **Referral explanation:** A medium heading and compact paragraphs explain the offer; one phrase uses an underlined link. - **Action area:** The tinted referral link and blue invitation action stand out from the otherwise text-led page. - **Credit status:** Green amounts and checkmarks distinguish earned credits from muted descriptive text. - **Visible values:** Displayed amounts and referral rules are screenshot content, not verified current commercial terms. ### Typography - **Family:** A familiar interface sans-serif is visible; the referral URL uses monospace. Exact identities are unverified. - **Page heading:** Approximately 30–32px bold with 38px line-height. - **Subheadings:** Approximately 16px medium-to-semibold. - **Body and controls:** Approximately 14px with 19px line-height. - **List metadata:** Approximately 12–13px in muted gray. - **Section labels:** Approximately 12px uppercase with increased letter spacing. ### Colors & surfaces - **Canvas:** Sampled #FFFFFF supplies the entire page background. - **Input fill:** Sampled #F2F2F2 supports the email field. - **Referral highlight:** Sampled #EEE2FF forms the pale lavender URL block. - **Action blue:** Sampled #2D7FFA supplies selected navigation and the invitation action. - **Status:** Green amounts and checkmarks indicate credit events. - **Avatars:** Purple, gray, pink, red, cyan and yellow circles distinguish invited entries. ### Components - **Referral URL:** A roughly 348 × 36px tinted rounded rectangle contains a single monospace line. - **Email input:** Approximately 424 × 38px, pale gray with small corner rounding and muted placeholder. - **Send action:** A compact blue rectangle around 106 × 38px uses white semibold text and roughly 5px radii. - **Invited rows:** Small circular generic-user avatars align with stacked identity details; status and timing sit in a separate right-aligned block. - **Sidebar selection:** A blue star icon and blue label mark the current account destination. - **Social control:** A small blue share widget sits separately beside the referral-link area. ### Visual rhythm - **Content grid:** The central column begins around 456px from the left, while the credit summary begins around 1028px. - **Section spacing:** Approximately 32–40px separates explanation, referral link, email tool and invited-user list. - **Row cadence:** Invited entries repeat at roughly 52–56px intervals. - **Whitespace:** Broad blank areas and lack of enclosing cards give the page a lightweight administrative appearance. ### Responsive - **Evidence limit:** Only a desktop capture is observed; sharing, invitations and mobile behavior are unverified. - **Column recommendation:** Move credit summary below referral tools on narrow screens. - **Navigation recommendation:** Collapse account/workspace navigation into an accessible menu. - **Field recommendation:** Let the invitation input and action stack or wrap while preserving readable labels. - **URL recommendation:** Allow safe wrapping or scrolling without exposing layout overflow. ### Adaptation guidance - **Information structure:** Keep referral rules, invitation tools, invited-user history and credit totals distinct. - **Privacy:** Use representative referral URLs and account data in mockups; avoid reproducing personal tokens or identifiers. - **Status clarity:** Pair credit colors with explicit labels and amounts. - **Accessibility:** Label the email field, give the referral link a clear purpose and expose invitation feedback accessibly. - **Behavior:** Define sharing, validation and send outcomes separately; the screenshot only establishes their visible controls. 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.