Linktree

Overview

Linktree is a creator-centric link aggregation platform that transforms fragmented social media presence into a unified, visually expressive digital hub. The design system embodies "Vibrant Minimalism"—a bold aesthetic that pairs energetic, saturated accent colors (forest green #254f1a, chartreuse #d2e823, electric blue #2665d6) with clean white surfaces and generous whitespace. The brand serves 70M+ creators, influencers, and small businesses who need to consolidate links, products, and audience engagement without technical friction. The UI evokes clarity, accessibility, and creative empowerment—users feel in control of their digital identity.

Linktree's voice is conversational, encouraging, and action-oriented. The tone avoids corporate jargon; instead, it speaks directly to creators' ambitions and pain points. Vocabulary emphasizes ownership ("your Linktree," "your audience"), simplicity ("one link," "everything you create"), and possibility ("share," "curate," "sell"). Example sentence in brand voice: "One link to help you share everything you create, curate and sell from your Instagram, TikTok, Twitter, YouTube and other social media profiles."

Colors

The color system is anchored by a forest-green primary (#254f1a, rgb(37, 79, 26)) used exclusively on high-priority CTAs ("Sign up free" button, primary actions). This green conveys growth, trust, and creator empowerment. The secondary accent is a vibrant chartreuse (#d2e823, rgb(210, 232, 35))—a high-energy highlight used for hero backgrounds, accent text, and interactive states. The tertiary accent is a saturated blue (#2665d6, rgb(38, 101, 214)) reserved for secondary CTAs, informational badges, and supporting UI elements. Surfaces are predominantly white (#ffffff) with a carefully calibrated neutral stack: surface-container (#eff0ec) for subtle card backgrounds, surface-container-high (#e5e7eb) for hover states, and on-surface (#1e2330, rgb(30, 35, 48)) for body text. Error states use

Typography

The type system is built on LinkSans, a custom geometric sans-serif that conveys approachability and modernity. The hierarchy spans from Display (96px, 800 weight) for hero headlines down to Label-sm (12px, 500 weight) for metadata. Headlines use aggressive negative letter-spacing (-0.02em) to create visual punch and reinforce the bold, confident brand voice. Body text (16px, 400 weight, 24px line-height) is set with generous line-height (1.5) to maximize readability on mobile and desktop. All type weights are 400, 500, 600, 700, or 800—no ultra-light or ultra-heavy weights, maintaining visual clarity. For small labels over busy backgrounds (e.g., badges on hero imagery), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility. Monospace (DM Mono) is used sparingly for code s

Layout

The layout system uses a 12-column fluid grid with a max-width of 1280px, allowing content to breathe on ultra-wide displays while remaining readable on mobile. The gutter spacing is 24px (md spacing token), applied consistently between grid columns and section margins. Hero sections use lg spacing (40px) for vertical separation between headline, subheading, and CTA. Cards and containers are separated by xl spacing (64px) to create clear visual rhythm and prevent cognitive overload. The container-max-width of 1280px ensures that no single line of body text exceeds ~70 characters, optimizing for reading comfort. Whitespace is treated as a first-class design element: empty space around CTAs, breathing room between form fields, and generous padding inside modals (lg spacing: 40px) all reinfor

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like form inputs and small cards; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, dropdowns, and modals; and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for full-screen overlays and prominent modals. Modals use a semi-transparent dark overlay (rgba(30, 35, 48, 0.5)) with a 4px blur backdrop-filter to create visual separation from the page beneath. No harsh shadows or brutalist hard-edged borders are used; instea

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used generously to soften the geometric precision of the interface, making it feel approachable rather than sterile. Buttons use full-radius (9999px) for a pill-shaped silhouette that feels friendly and clickable. Cards and containers use lg radius (32px) for a modern, rounded aesthetic that avoids sharp corners while maintaining visual clarity. Input fields use a tighter DEFAULT radius (16px) to signal their functional purpose without appearing overly playful. Modals and overlays use lg radius (32px) to match card styling and create

Components

Action Elements Buttons are the primary interaction pattern. The primary button (bg: #254f1a, text: #f3f3f1, padding: 12px 36px, height: 48px, radius: 9999px) uses forest green with white text and a 500-weight label. On hover, the background darkens to #1a3a12 with a 150ms cubic-bezier(0.4, 0, 0.2, 1) transition. The secondary button (bg: #1e2330, text: #ffffff, padding: 12px 23px, height: 40px) is used for lower-priority actions and uses the on-surface color. Tertiary buttons are transparent with a 2px solid border in primary green, used for cancel or "learn more" actions. All buttons include a focus state with a 3px outline in primary-container (#d2e823) at 20% opacity.

Containers & Surfaces Cards use surface-container (#eff0ec) as the default background with md elevation shadow

Do's and Don'ts

**Do**

• Do use the forest green primary (#254f1a) exclusively on high-intent CTAs—"Sign up free," "Create Linktree," primary form submissions—to create a clear visual hierarchy and guide user attention.
• Do apply lg spacing (40px) between major sections and xl spacing (64px) between hero and content blocks to create breathing room and prevent cognitive overload.
• Do use full-radius (9999px) on all buttons and pill-shaped interactive elements to signal clickability and reinforce the approachable, friendly brand voice.
• Do maintain a minimum contrast ratio of 4.5:1 between text and background colors; test all color combinations against WCAG AA standards before shipping.

**Don't**

• Don't use the chartreuse secondary (#d2e823) as a background for body text or small UI elements; it's reserved for hero sections, accent highlights, and decorative moments where it can breathe.
• Don't apply hard drop-shadows (e.g., 4px 4px 0 0 #000) or brutalist border treatments; the brand uses soft, subtle shadows (md: 0 3px 8px rgba(0, 0, 0, 0.15)) to maintain visual softness.
• Don't mix rounded radii inconsistently—buttons are always full-radius (9999px), cards are always lg (32px), inputs are always DEFAULT (16px). Consistency reinforces the design system's credibility.
• Don't use system fonts or generic sans-serifs; always load LinkSans from the custom font stack (linksans, linksans Fallback) to preserve the brand's distinctive geometric personality.