---
title: "Linktree design system"
variant: extended
source: https://linktr.ee/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/bento-me)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Linktree · Design System

> Creator tools in vivid, confident color

**Theme:** light · **Industry:** saas · **Source:** https://linktr.ee/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Linktree’s homepage pairs expressive color-blocked sections with creator-focused photography and product previews. Oversized, heavy headings and pill-shaped actions make the page feel friendly, direct, and easy to scan.

## North star

Make every section feel like a distinct, colorful creator story while keeping the message and pill-shaped action immediately legible.

## Overview

The page builds its visual identity through a sequence of bold, full-width color fields: vivid lime for the opening hero, saturated blue and burgundy for feature stories, pale green for analytics, and light gray for proof and editorial content. Deep ink text anchors the bright backgrounds, while lilac and lime pill buttons provide repeated, high-contrast calls to action. LinkSans carries everything from the oversized, tightly tracked display headline to compact navigation and body copy; headings are heavy and conversational, with mostly sentence case. The opening layout balances a left-aligned pitch and sign-up form against a vertical stack of rounded creator imagery. Lower sections alternate split feature presentations, image-led cards, centered testimonials, and a burgundy FAQ. Generous section spacing gives each color band room to register, while large rounded media and controls soften the otherwise graphic, high-impact composition.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Lilac | `#e9c0e9` | `--color-soft-lilac` | accent | Lilac CTA fill, pink headings on burgundy, and the featured-content card surface. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Hero canvas, navigation capsule, sign-up input, and white footer panel. |
| Electric Lime | `#d2e823` | `--color-electric-lime` | brand | Primary hero field and recurring high-visibility CTA and feature-card color. |
| Soft Chalk | `#f3f3f1` | `--color-soft-chalk` | surface | Broad light-gray backdrop for trust, feature cards, testimonials, and editorial sections. |
| Deep Ink | `#1e2330` | `--color-deep-ink` | neutral | Default headings, body copy, navigation, and dark text on bright buttons. |
| Oxblood | `#780016` | `--color-oxblood` | brand | Burgundy feature band and FAQ background, with pale text and darker accordion rows. |
| Plum Night | `#502274` | `--color-plum-night` | brand | Lower-page CTA and footer backdrop. |
| Quiet Line | `#ebebeb` | `--color-quiet-line` | neutral | Fine navigation border and subtle separators. |
| Forest Green | `#254f1a` | `--color-forest-green` | semantic | Dark green CTA treatment and select creator imagery; not a primary page-wide surface. |
| Olive Gray | `#676b5f` | `--color-olive-gray` | neutral | Muted supporting text, especially in navigation and footer content. |
| Pale Sage | `#e8efd6` | `--color-pale-sage` | surface | Full-width audience analytics feature band. |
| Creator Blue | `#2665d6` | `--color-creator-blue` | brand | Saturated blue feature section behind the Linktree customization showcase. |
| Dusty Mauve | `#d1acd1` | `--color-dusty-mauve` | semantic | Measured mainly in decorative borders or media details; not a defining page background. |
| Cobalt Detail | `#061492` | `--color-cobalt-detail` | semantic | Blue detail within creator and product mockup artwork rather than core interface chrome. |
| Dark Merlot | `#54000f` | `--color-dark-merlot` | brand | Dark burgundy card and accordion treatment within the red feature and FAQ areas. |
| Moss Lime | `#bdd01f` | `--color-moss-lime` | semantic | Measured as a border or secondary detail; the brighter Electric Lime defines the page instead. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f3f3f1` (Soft Chalk) · `--color-surface-2` → `#e8efd6` (Pale Sage) · `--color-surface-3` → `#54000f` (Dark Merlot) · `--color-surface-4` → `#e9c0e9` (Soft Lilac) · `--color-text` → `#1e2330` (Deep Ink) · `--color-text-muted` → `#e9c0e9` (Soft Lilac) · `--color-text-subtle` → `#676b5f` (Olive Gray) · `--color-border` → `#ebebeb` (Quiet Line) · `--color-accent` → `#e9c0e9` (Soft Lilac) · `--color-accent-2` → `#d2e823` (Electric Lime) · `--color-accent-3` → `#780016` (Oxblood) · `--color-on-accent` → `#1e2330` (Deep Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1e2330` | `#ffffff` | 15.69:1 | AAA |
| `#1e2330` | `#f3f3f1` | 14.12:1 | AAA |
| `#1e2330` | `#e8efd6` | 13.26:1 | AAA |
| `#1e2330` | `#54000f` | 1.03:1 | fail |
| `#e9c0e9` | `#ffffff` | 1.59:1 | fail |
| `#e9c0e9` | `#f3f3f1` | 1.43:1 | fail |
| `#e9c0e9` | `#e8efd6` | 1.35:1 | fail |
| `#e9c0e9` | `#54000f` | 9.52:1 | AAA |
| `#676b5f` | `#ffffff` | 5.46:1 | AA |
| `#676b5f` | `#f3f3f1` | 4.92:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Linksans | `--font-body` | webfont | 400, 600, 500, 700, 800 | All interface and marketing text, including display headlines, navigation, body copy, and buttons. | DM Sans |

- **Linksans:** Use heavy weights for oversized, tight-tracked headlines; keep body and navigation sentence case, clear, and comparatively restrained.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 800 | 1.07 | -0.02em | — | Linksans | Oversized campaign headlines and high-impact hero messaging. |
| h1 | 56px | 700 | 1.06 | -0.02em | — | Linksans | Primary page or major feature-section heading. |
| h2 | 28px | 500 | 1.3 | -0.01em | — | Linksans | Feature and supporting section headings. |
| h3 | 24px | 500 | 1.5 | 0 | — | Linksans | Feature-card and testimonial-related headings. |
| h4 | 20px | 500 | 1.5 | -0.01em | — | Linksans | Smaller subheads within feature and information areas. |
| body | 16px | 400 | 1.5 | 0 | — | Linksans | Paragraphs, explanatory copy, and standard interface text. |
| caption | 13px | 400 | 1.5 | -0.013em | — | Linksans | Image labels, attribution, and compact supporting details. |
| button | 16px | 500 | 1.5 | 0 | — | Linksans | Primary and secondary CTA labels. |
| nav | 16px | 400 | 1.5 | 0 | — | Linksans | Header navigation and supporting footer links. |
| link | 16px | 400 | 1.5 | 0 | — | Linksans | Inline feature links and content destinations. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 12, 13, 14, 16, 20, 24, 26, 32, 36, 40, 48, 64, 128 px.
- Section rhythm 64px · element gap 24px · card padding — · max content width 1020px.

The page uses full-width stacked color bands, with content arranged within a measured maximum width of 1020px. The hero is a two-column composition: left-aligned headline, copy, URL field, and CTA beside a tall image stack. Feature bands switch between split layouts and centered single-column messaging; lower proof sections use card grids, centered editorial elements, and a vertical FAQ list. A measured 64px section gap and 24px element gap support a comfortable rhythm. Navigation sits in a floating, rounded capsule, and footer links resolve into multiple columns.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `64px` · media `64px` · nav `16px` · link `32px` · xs `8px` · sm `16px` · md `32px` · lg `42px` · xl `64px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is largely flat: bold background bands and color contrast establish hierarchy instead of shadows. Fine light borders appear around navigation or controls, while rounded white capsules and cards sit cleanly against the page. Layering comes from the floating header, overlapping or stacked creator media, and darker accordion rows nested within the burgundy FAQ section.

## Imagery

Authentic creator and small-business photography is the main emotional anchor, often shown in large rounded frames and stacked media in the hero. Product features use app and profile previews, device-like mockups, and colorful content cards. Image treatment is bright and varied, with each section’s solid background contrasting against the media. Some colors and intricate details belong to the embedded creator examples rather than the core interface palette.

## Components

### Floating navigation capsule

White pill-shaped navigation with brand mark, links, account actions, and a fine measured #ebebeb border on the outlined variant.

### Hero URL form

White, rounded URL field with a subdued linktr.ee/ prefix beside a large pill CTA; the hero pairs the form with vivid imagery.

### Pill CTA

Rounded 9999px actions use #d2e823 or #e9c0e9 with #1e2330 text; section-specific variants may switch to darker green.

### Feature band

Full-width saturated color block with one focused feature story, bold headline, supporting copy, and prominent media or product preview.

### Creator showcase card

Large rounded media cards combine creator photography or product mockups with short feature messaging on pastel, lime, or blue surfaces.

### FAQ accordion

Centered question list on a #780016 band, with rounded dark #54000f rows, pale labels, and a right-aligned disclosure icon.

### Footer panel

Multi-column link directory presented as a white rounded panel within the #502274 footer area.

### Measured component styles

- **Primary button** (“Get started for free”): background #d2e823 · text #1e2330 · radius 9999px · padding 0px 36px · 500 16px Linksans
- **Secondary button** (“Get started for free”): background #e9c0e9 · text #1e2330 · radius 9999px · padding 0px 36px · 500 16px Linksans
- **Link** (“/selenagomez”): transparent background · text #1e2330 · radius 0px · padding 0px · 400 16px Linksans
- **Input** (“linktr.ee/”): background #ffffff · text #757575 · radius 8px · padding 8px 16px · 500 16px Linksans
- **Card** (“Is Linktree the original link in bio too”): background #54000f · text #e9c0e9 · border 2px solid · radius 32px · padding 0px · 400 16px Linksans
- **Navigation item** (“Solutions Features Integrations Resource”): transparent background · text #1e2330 · radius 0px · padding 0px · 400 16px Linksans

## Do

- Use broad, confident color bands to distinguish major stories.
- Reserve Electric Lime and Soft Lilac for conspicuous CTA treatments.
- Keep headings heavy, short, and easy to scan.
- Use rounded creator photography and product previews as visual proof.
- Give each section comfortable breathing room.
- Keep dark text legible against bright surfaces.

## Don't

- Do not flatten the page into one neutral background.
- Do not introduce unmeasured palette hex values.
- Do not rely on shadows for hierarchy.
- Do not use tiny, low-contrast body copy over saturated color.
- Do not make every section use the same layout.
- Do not treat colors inside creator mockups as core interface colors.

## Agent prompt

Build a new Linktree-style page with LinkSans or a close substitute, DM Sans. Establish clear section bands using Electric Lime (#d2e823), Creator Blue (#2665d6), Oxblood (#780016), Pale Sage (#e8efd6), and Soft Chalk (#f3f3f1), with Gallery White (#ffffff) and Deep Ink (#1e2330) for legibility. Use a bold, tight-tracked headline, concise supporting text, rounded creator photography or product previews, and pill-shaped actions. Keep the opening area split between messaging and imagery, then vary the layout across feature sections, proof cards, testimonials, and FAQs. Use Soft Lilac (#e9c0e9) as a secondary CTA color. Favor flat color fields, generous section breathing room, and rounded controls over shadows or elaborate borders. Include a structured footer on Plum Night (#502274).

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with left-aligned headline and URL form, paired with a vertical stack of creator imagery. | URL entry, primary sign-up CTA, creator proof imagery | bright lime canvas, floating capsule navigation, rounded media |
| 2 | feature-split | Single-column feature band with product imagery, headline, copy, and CTA arranged as a split presentation. | feature explanation, customization CTA | saturated blue background, product preview, lime heading |
| 3 | feature-split | Single-column burgundy section with left-aligned heading, supporting copy, and pill CTA. | sharing guidance, QR code mention, CTA | burgundy color field, lilac heading and button |
| 4 | feature-split | Single-column pale-green band with a focused analytics feature story and supporting product imagery. | benefit explanation, engagement analytics | pale sage background, dark headline, rounded CTA |
| 5 | stats | Centered heading introducing social proof across a light-gray band. | trust statement | centered bold heading, light-gray surface |
| 6 | gallery | Twelve-column showcase of creator profile images and names on a continuous light surface. | creator discovery, profile destinations | creator image tiles, repeated grid |
| 7 | feature-grid | Two-column light-gray feature area with large image-led cards and three benefit themes. | content sharing, selling and payments, audience growth | rounded feature cards, contrasting surfaces, product mockups |
| 8 | cta | Centered headline and plan link within a spacious light-gray section. | plan exploration | centered typography, lilac pill action |
| 9 | logo-cloud | Centered heading above a three-column arrangement of publication marks. | third-party credibility | publication logos, light-gray canvas |
| 10 | testimonials | Editorial testimonial area with creator imagery, quotation, attribution, and carousel controls. | testimonial carousel, creator attribution | large quote typography, rounded creator image |
| 11 | faq | Centered heading above a long, single-column accordion on a burgundy background. | expandable answers, question browsing | dark rounded rows, pale text, disclosure icons |
| 12 | cta | Centered two-column call to action with headline and a URL claim form. | URL entry, claim Linktree | plum background, white input, lime pill button |
| 13 | footer | Five-column footer links set within a white panel on a plum backdrop. | site navigation, resource discovery | rounded white directory panel, multi-column links |
| 14 | footer | Low-profile two-column footer row for acknowledgment and company details. | land acknowledgment, company information | small muted text, plum background |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/bento-me