# Linktree — Design System
> The original link-in-bio tool for creators to curate and share content.
- **Canonical:** https://uiuxskills.com/library/linktree
- **Source:** https://bento.me/en/home
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:10:59.324Z

---

---
version: alpha
name: Linktree
description: The original link-in-bio tool for creators to curate and share content.
tone: Professional, friendly, and empowering.
color-scheme: light
colors:
  primary: "#D2E823"
  on-primary: "#1E2330"
  surface: "#FFFFFF"
  on-surface: "#1E2330"
  secondary: "#E9C0E9"
  error: "#FF3D3D"
  outline: "#D1D1D1"
  surface-container: "#F7F6F3"
  focus-ring: "#1E2330"
  on-error: "#FFFFFF"
typography:
  display-lg:
    fontFamily: Linksans, sans-serif
    fontSize: 80px
    fontWeight: 700
  headline-md:
    fontFamily: Linksans, sans-serif
    fontSize: 56px
    fontWeight: 700
  body-md:
    fontFamily: Arial, sans-serif
    fontSize: 18px
    fontWeight: 400
  body-sm:
    fontFamily: Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
  label-lg:
    fontFamily: Arial, sans-serif
    fontSize: 18px
    fontWeight: 600
  label-md:
    fontFamily: Arial, sans-serif
    fontSize: 14px
    fontWeight: 500
  label-sm:
    fontFamily: Arial, sans-serif
    fontSize: 12px
    fontWeight: 400
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
  2xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    width: auto
  button-primary-hover:
    backgroundColor: "#B8CC1F"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
  card:
    backgroundColor: "{colors.surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.on-surface}"
  link-hover:
    textColor: "#000000"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-error}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  card-container:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: ease-in-out
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.1)
  md: 0 4px 6px rgba(0, 0, 0, 0.1)
  lg: 0 10px 20px rgba(0, 0, 0, 0.1)
---

## Overview

Linktree utilizes a high-energy, vibrant aesthetic anchored by its signature chartreuse primary color. The brand experience is approachable and creator-focused, balancing bold, impactful typography with a clean, utility-driven interface that prioritizes functionality and conversion.

## Colors

The color strategy relies on high-contrast pairings to maintain accessibility while leveraging a bold, energetic palette. The primary chartreuse is used sparingly for high-impact elements, while dark navy provides the structural text and icon foundation.

*   **Primary (#D2E823):** The signature brand color used for primary call-to-action buttons and hero highlights.
*   **On-Primary (#1E2330):** Dark navy text and icon color, used for high contrast against the primary background.
*   **Surface (#FFFFFF):** The standard background color for cards, modals, and navigation containers.
*   **On-Surface (#1E2330):** The primary text color for all headings and body copy.
*   **Secondary (inferred) (#E9C0E9):** A soft accent color used for secondary UI elements and highlights.
*   **Error (#FF3D3D):** Semantic color for error states and form validation.
*   **Outline (inferred) (#D1D1D1):** Neutral border color for input fields and dividers.
*   **Surface-Container (#F7F6F3):** A light neutral background for section containers and alternating content blocks.
*   **Focus-Ring (inferred) (#1E2330):** High-contrast ring for keyboard navigation.
*   **On-Error (inferred) (#FFFFFF):** White text for error badges.

## Typography

Typography is used to establish a clear hierarchy, utilizing a custom sans-serif font for impact and a standard system font for readability.

*   **Display-lg:** Used exclusively for hero headlines to create maximum impact.
*   **Headline-md:** Used for section headers to maintain consistent structure.
*   **Body-md:** Standard body copy for readability across the site.
*   **Label-lg (inferred):** Used for button labels and primary navigation items.

## Layout

The layout system is built on a 4px base unit, creating a rhythmic, airy experience that emphasizes content blocks. The site utilizes a fluid grid system with a maximum width container to ensure readability on larger screens.

*   **Section Order:** Nav → Hero → Features → Social Proof → Testimonials → FAQ → Footer.
*   **Hero Pattern:** Centered headline and subhead with a prominent input field and primary CTA.
*   **Responsive Behaviour:** Mobile-first design; navigation collapses into a menu drawer on smaller viewports.
*   **Spacing:** Uses a consistent scale (xs: 4px, sm: 8px, md: 16px, lg: 32px, xl: 64px, 2xl: 80px) to maintain vertical rhythm.

## Elevation & Depth

Elevation is used sparingly to differentiate interactive cards from the background, providing a subtle, modern depth.

*   **elevation.sm:** Used for subtle lift on small UI elements.
*   **elevation.md:** The standard elevation for cards and interactive containers.
*   **elevation.lg:** Used for modals, drawers, and overlay components.

## Shapes

The design language favors rounded corners to create a friendly and approachable feel. Radius values are applied consistently to maintain visual harmony across the component library.

`{rounded.md}` is used for input fields and smaller containers, while `{rounded.lg}` is the standard for larger card-based containers. `{rounded.full}` is reserved for pill-shaped buttons or badges where appropriate.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The button component comes in primary and secondary variants. The primary button uses `{colors.primary}` with `{typography.label-lg}` for high-impact actions, while the secondary variant uses `{colors.surface}`. Use primary buttons for the main conversion goal of the page.

### Card
Cards are the primary container for content, utilizing `{colors.surface}` and `{rounded.lg}`. Use these to group related information, ensuring they maintain consistent padding and alignment.

### Input Field
Input fields use `{colors.surface}` with a `{colors.outline}` border. On focus, the border should transition to `{colors.focus-ring}` to indicate active state. Always pair with `{typography.body-md}`.

### Badge
Badges use `{colors.secondary}` as a background with `{typography.label-sm}`. Use these for small tags or metadata highlights.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Never use `{colors.primary}` for body text as it lacks contrast. |
| Apply `{typography.display-lg}` for hero headlines only. | Do not mix `{typography.display-lg}` with small body text without adequate spacing. |
| Use `{rounded.lg}` for all card-based containers. | Avoid using sharp corners (0px) on buttons or inputs. |
| Maintain consistent `{spacing.md}` between form elements. | Do not use `{colors.error}` for non-destructive actions. |
| Use `{colors.on-surface}` for all primary body text. | Never apply `{typography.body-md}` on `{colors.primary}` without checking contrast. |
| Apply `{elevation.md}` to elevated cards to create visual hierarchy. | Avoid using more than two levels of elevation on a single page. |
| Use `{colors.focus-ring}` for all keyboard navigation states. | Do not use `{colors.outline}` for primary button borders. |
| Use `{typography.label-lg}` for all primary button text. | Avoid using `{typography.label-sm}` for primary navigation links. |

## Content Style

CTA style uses imperative verbs in sentence case, keeping labels short and direct (e.g., "Get started for free"). This maintains the empowering and professional tone of the brand.

Headings are benefit-driven and concise, designed to scan quickly. They should clearly communicate the value proposition of the section they introduce.

Copy density is kept low, utilizing short, scannable paragraphs and frequent use of lists to break up information. White space is used generously to keep the interface feeling light and accessible.

## Imagery & Icons

The imagery style is a mix of high-quality lifestyle photography and clean, flat-style vector icons. Photography should feel authentic and creator-focused, while icons should be used to simplify complex concepts or navigation items. Avoid overly complex or illustrative styles that clash with the clean, utility-driven interface.