# Design from Reference: Linktree Appearance Customization Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Linktree - **Category:** Appearance Customization - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6466b206c0d3f8f06672_6acb62d65e515b69c794ef6f_cms-e55528303478e20b47d5a301.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:** Appearance editor with a pale warm-gray canvas, rounded white settings cards, vivid purple actions, and a black mobile-page preview. - **Character:** Friendly sans serif, generous card radii, colorful theme thumbnails, lime upgrade promotion, and repeated pill controls. - **Density:** Long customization catalog in the left pane; broad quiet preview area at right. ### Page composition - **Capture and scale:** 2880 × 12426 image px. CSS estimates assume a 2× capture, approximately 1440 × 6213 CSS px; scale is unverified. All portions inspected. - **Top navigation:** Floating white rounded bar with brand, Links/Appearance/Analytics/Settings, promotional utility, trial, share, and avatar. - **Pane split:** Thin vertical separator near x=870 CSS px. Left settings column around 640px wide; right contains a phone-like preview near the top. - **Profile card:** Avatar with image/remove actions, profile-title field, bio textarea/count, and separate add-social-icons footer. - **Upgrade banner:** Large lime panel with headline, short offer, three checked benefits, dark-green trial pill, small pricing line, and three tilted example profiles. - **Themes:** White rounded card with a four-column gallery of 37 tall previews, including custom, pastel, gradient, patterned, graphic, light, and dark options. - **Custom appearance:** Introductory heading/copy followed by background, button, font, and logo-visibility cards. - **Background controls:** Eight tall style previews in two rows of four, then a color swatch and labeled color-value field. - **Buttons:** Three shape variants across Fill, Outline, Soft shadow, and Hard shadow rows; six special variants; button/font/shadow color controls. - **Fonts:** Selected font tile and color control. - **Final card:** Logo-visibility option with a Pro badge and Linktree mark. - **Preview:** Black rounded phone-like page with avatar, title/bio, two dark link buttons, menu dots, and white brand at bottom. ### Information hierarchy - **Active area:** Appearance is emphasized in the top navigation. - **Customization order:** Profile identity precedes theme choice, then detailed background/button/font settings. - **Selection cues:** Theme and button samples use an extra outline to indicate the captured choice. - **Commercial emphasis:** Lime upgrade panel and small black Pro badges distinguish premium-looking options. - **Preview role:** Compact right-hand page provides a visual reference; persistence or live updating cannot be proven from the still image. - **Font identity:** The selector visibly reads DM Sans; this is an observed setting label, not independent verification of all rendered text. ### Typography - **Interface family:** Neutral sans serif; actual rendered family is unverified. - **Section headings:** Approximately 20px semibold with 26px line-height. - **Upgrade heading:** Approximately 24px bold. - **Body / labels:** Approximately 14–16px with 21–24px leading. - **Theme captions:** Approximately 14px centered below previews. - **Buttons:** Approximately 16px semibold; Pro badges around 12px. - **Preview text:** Much smaller at the displayed phone scale; title is bold, bio muted, links compact. - **Precision:** CSS sizes, weights, and line-heights are visual reconstruction estimates. ### Colors & surfaces - **Canvas:** Sampled #F3F3F1. - **Cards:** Sampled #FFFFFF. - **Black preview / samples:** Sampled #000000. - **Upgrade lime:** Sampled #CDE800. - **Field fills:** Sampled #F6F7F5. - **Dark neutral previews:** Sampled #3D444B and #3A444B. - **Fine boundaries:** Sampled #DEE2D8. - **Light sample details:** Sampled #EAEEF1. - **Action accent:** Vivid purple on image selection and add-social controls. - **Theme palette:** Pastel cyan/yellow/pink, saturated blue/green/purple, gradients, and graphic patterns are confined to selectable samples. - **Color values:** Visible hex strings in controls describe the UI’s displayed settings; they are distinct from independently sampled pixels. ### Components - **Navigation shell:** Broad white capsule around 64px high with fine pale outline. - **Settings cards:** Approximately 640px wide, 24px radius, and 24px padding. - **Profile avatar:** Approximately 96px circle with black fill and white mark. - **Image actions:** Wide purple and white outlined pills around 48px high. - **Profile fields:** Pale filled title input and multiline bio with small inset labels; character count sits below at right. - **Social footer:** Top divider and purple plus/link action. - **Upgrade panel:** Approximately 640 × 378px with 24px radius and large illustrative profile cards at right. - **Theme previews:** Approximately 128 × 200px with small radius, thin outline, caption, and optional black Pro pill near the upper-right. - **Background previews:** Same tall sample geometry, covering flat, gradient, image, video, dots, stripes, waves, and zigzag patterns. - **Button samples:** Three columns demonstrate square, rounded, and pill shapes; hard-shadow pill is outlined as selected. - **Special samples:** Rough edges, waves, offset outlines, shadowed pill, selection-handle outline, and asymmetric shape. - **Color controls:** Square swatch beside pale labeled value field, arranged in separate vertical groups. - **Font tile:** Raised white row with Aa sample and DM Sans label. - **Phone preview:** Approximately 250 × 516px, about 40px radius, black page, and two rounded dark link rows. - **Help:** Purple circular question-mark launcher near the lower-right. - **State limits:** No picker, upload dialog, font menu, or save confirmation is open. ### Visual rhythm - **Column alignment:** Section headings and cards share the same left edge and width. - **Card gaps:** Approximately 48px separates major settings groups. - **Gallery rhythm:** Four equal preview columns, consistent caption spacing, and generous vertical row gaps. - **Button rhythm:** Repeated three-shape rows make visual comparisons immediate. - **Preview contrast:** Sparse black preview balances a long dense customization pane. - **Capture limit:** Preview is visible near the top only; sticky behavior is not established. ### Responsive - **Observed state:** Desktop only; editor mobile behavior is unverified. - **Pane recommendation:** Stack settings and preview or expose a preview toggle on narrow screens. - **Gallery recommendation:** Reduce four theme columns to two while preserving sample readability. - **Controls recommendation:** Allow button samples and color controls to wrap without shrinking labels. - **Promotion recommendation:** Simplify upgrade artwork and keep functional settings easy to reach. - **Navigation recommendation:** Collapse secondary destinations while retaining Appearance and preview access. ### Adaptation guidance - **Preserve:** Clear identity/theme/detail progression, large selectable samples, rounded white surfaces, and a distinct page preview. - **Starting geometry:** Approximately 640px settings width, 24px radii/padding, 128 × 200px theme previews, and 48px main controls under the unverified 2× assumption. - **State modeling:** Keep selected theme/button/font values explicit and consistent with the real preview. - **Asset fidelity:** Use supplied themes and actual profile content rather than inventing premium capabilities. - **Implementation recommendation:** Provide keyboard-selectable samples, noncolor selection indicators, accessible color inputs, and clear feedback for persisted changes. - **Commercial fidelity:** Upgrade labels and trial terms must reflect actual supplied product conditions. 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.