Linktr Brand Design System Deep-Dive

1. Brand Overview

Linktr (Linktree rebranded shorthand) is still very much the “link in bio” brand, but the design language has matured into something intentional and restrained. This isn’t a loud, gradient-heavy social app aesthetic. It’s more “confident utility” with playful accents. They’ve stripped the UI down to a few strong brand colors, a custom typeface stack, and a predictable spacing rhythm.

The vibe: approachable, slightly quirky, but professional enough that brands and creators both feel comfortable. They lean on a mostly neutral base — black (#000000), deep charcoal (#1e2330), and white (#ffffff) — then inject personality with chartreuse (#d2e823) and lavender (#e9c0e9). That splash of oddball color is the “Linktr wink” — it’s what keeps the brand from feeling like a generic SaaS dashboard.

Typography is custom and bold. The “Linksans” family shows up everywhere, with variable weights from 400 to 900. They also drop in “Elza Condensed” for huge uppercase headlines, giving certain moments a billboard punch. This tells me they care about hierarchy and impact — not just utility.

Spacing is clean and predictable, with an 8px scale underpinning everything. Border radii are either small (8px), medium (16px/32px), or extreme (99px/1000px) — no half-measures. Buttons are either tight rectangles or full pills.

No heavy shadows — the brand is largely flat, relying on solid fills, strong contrast, and rounded shapes for depth cues. That’s an intentional choice: shadows introduce visual noise, while their audience wants speed and clarity.

This design system is for creators, marketers, and anyone who needs to build a landing page in minutes. It’s optimized for clarity, quick scanning, and strong CTAs. The personality comes from the selective use of color and type — not from complex illustrations or motion.

2. Color System

2.1 Primary Colors

The main “brand” standout is chartreuse (#d2e823). It’s bright, almost acidic, and impossible to miss. They use it for hero buttons, links, and interactive highlights. Psychologically, it’s energetic and slightly unconventional — not the safe blues and greens you see in enterprise SaaS. Compared to competitors like Beacons or Campsite, Linktr’s green-yellow pop is more rebellious.

Their base is strong neutrals: pure black (#000000) for text and logo, deep charcoal (#1e2330) for backgrounds, and white (#ffffff) for surfaces. Lavender (#e9c0e9) is the secondary accent — softer, friendlier.

2.2 Complete Palette

Also extracted CSS variables:

• --primitive--brand--orchid: #d717e7 (possible tertiary brand color)
• --_faq---bg-color: #00000052 (semi-transparent black for overlays)
• --_faq---border-color: #780016 (deep red for borders)

2.3 Color Relationships

Black on white: infinite contrast. Chartreuse on black: WCAG AAA for large text, borderline for small text — but they use it mostly in large buttons and headings, so it works. Lavender on black: lower contrast, used for decorative elements, not body copy.

Dark mode isn’t explicitly implemented here — but the palette would adapt well. Swap white backgrounds for deep charcoal, keep chartreuse and lavender as accents, and invert text colors.

2.4 Usage Guide

• Pair chartreuse with black for maximum pop.
• Lavender works better on dark backgrounds — avoid on white for contrast reasons.
• Keep blue limited — it’s not a primary brand tone, so don’t overuse.
• Avoid mixing chartreuse and lavender in the same UI block — too much visual competition.
• Use off-white (#eff0ec) for subtle section backgrounds to break up heavy black.

3. Typography

3.1 Font Families

Primary: Linksans Linksansvf — custom variable font.
Fallback: None specified, but there’s also a plain Linksans variant.
Secondary: Elza Condensed for giant uppercase headlines.
Fallback: Arial appears as a fallback in some contexts (buttons, headings).
Google Fonts: Inconsolata is loaded but not prominently used here.

3.2 Type Scale

And so on — they have a lot of micro-variants, but the core pattern is: big, bold headings; medium-weight body; tight captions.

3.3 Hierarchy

They’ve nailed hierarchy by using massive H1 sizes (up to 150px) in key hero sections — almost theatrical. Subheadings drop to 24–28px, keeping the visual gap wide. Body text sits at 18–20px with generous line height, making it readable on mobile. Small captions are airy (lineHeight: 2.05), which helps them fade back visually.

4. Spacing & Layout

4.1 Spacing Scale

8px base grid. Common values:

• 7.2px — micro gaps (icons, label spacing)
• 8px — tight component padding
• 12px — small button padding
• 16px — standard inline padding
• 24px — section padding in components
• 48px — large vertical section gaps
• 128px — massive hero spacing

No weird one-offs — even odd decimals like 13.2px or 14.4px are consistent multiples from the base.

4.2 Layout

Breakpoints:

• 479px — mobile
• 767px — small tablet
• 991px — tablet
• 1280px — desktop

Responsive approach: scale typography and spacing down predictably; keep buttons touch-friendly at all sizes.

5. Visual Elements

Border Radius

Values:

• 8px — small buttons, inputs, cards
• 16px — medium cards/images
• 32px — larger blocks
• 50px — groups
• 64px — images
• 99px — pill buttons
• 1000px — full pills, avatars

Extreme radii (99px, 1000px) are for identity — big pill buttons are part of the brand look.

Shadows

Only two shadows:

• rgba(0,0,0,0.15) 0px 4px 4px
• rgba(1,1,63,0.1) 0px 2px 19px -4px

They use shadows sparingly — mostly flat.

Borders

Mostly 1px solid in low-opacity black (rgba(0,0,0,0.1)), used for separators.

6. Components

6.1 Buttons

Variants:

1. Login Button

   • Background: #eff0ec
   • Color: #000000
   • Padding: 24px 31.2px 26.4px
   • Radius: 8px

2. Signup Button

   • Background: #1e2330
   • Color: #ffffff
   • Radius: 99px

3. Forest Wide Button

   • Background: rgb(37,79,26)
   • Color: #ffffff
   • Radius: 99px

4. Chartreuse Hero Button

   • Background: #d2e823
   • Color: #000000
   • Radius: 99px

5. Lavender Button

   • Background: #e9c0e9
   • Color: #000000
   • Radius: 99px

6. Testimonial Nav Button

   • Transparent
   • Border: 1px solid rgba(30,35,48,0.25)
   • Radius: 8px

Focus states are mostly outline: none — they rely on background change rather than browser defaults.

6.2 Links

Multiple styles:

• Chartreuse underline (#d2e823) — accent link
• Black underline — primary nav
• White — footer links
• Gray (#676b5f) — low-priority links

6.3 Forms

Text input:

• Background: #ffffff
• Color: rgb(117,117,117)
• Radius: 8px
• Padding: 8px 16px

No heavy focus styling — likely subtle border or shadow.

6.4 Cards

No explicit card data, but radii and spacing tell me: 16px radius, 24–32px padding, flat fill, no shadow.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-charcoal: #1e2330;
  --color-olive-gray: #676b5f;
  --color-lavender: #e9c0e9;
  --color-white: #ffffff;
  --color-blue: #2665d6;
  --color-warm-gray: #a8a29e;
  --color-taupe: #78716c;
  --color-chartreuse: #d2e823;
  --color-off-white: #eff0ec;
  --color-orchid: #d717e7;
  --color-faq-bg: #00000052;
  --color-faq-border: #780016;

  /* Typography */
  --font-linksans: 'Linksans Linksansvf', sans-serif;
  --font-elza-condensed: 'Elza Condensed', Arial, sans-serif;
  --font-arial: Arial, sans-serif;

  /* Spacing */
  --space-7-2: 7.2px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-48: 48px;
  --space-128: 128px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --radius-group: 50px;
  --radius-xl: 64px;
  --radius-pill: 99px;
  --radius-full: 1000px;

  /* Shadows */
  --shadow-soft: rgba(0,0,0,0.15) 0px 4px 4px;
  --shadow-wide: rgba(1,1,63,0.1) 0px 2px 19px -4px;
}

8. AI Coding Assistant Prompt

# Linktr Design System Specification

You are a Linktr design expert. Build UIs matching their visual language exactly.

## Brand Context
Linktr’s design language is minimal, bold, and approachable. Neutral base colors carry the UI, with chartreuse and lavender accents used sparingly for personality. Typography is custom and confident, with extreme sizes for hero moments.

## Color Palette
- Black: #000000 — Primary text, logo
- Deep Charcoal: #1e2330 — Secondary text, dark backgrounds
- Olive Gray: #676b5f — Tertiary text, icons
- Lavender: #e9c0e9 — Secondary accent buttons and pills
- White: #ffffff — Backgrounds, text on dark
- Blue: #2665d6 — Occasional links/CTAs
- Warm Gray: #a8a29e — Neutrals for subtle elements
- Medium Taupe: #78716c — Caption text
- Chartreuse: #d2e823 — Primary accent for hero buttons and highlights
- Off-White: #eff0ec — Background sections
- Orchid: #d717e7 — Alternate accent
- FAQ BG: #00000052 — Overlay backgrounds
- FAQ Border: #780016 — Overlay borders

## Typography
- Headings: 'Linksans Linksansvf'
- Hero Headings: 'Elza Condensed', Arial
- Body: 'Linksans Linksansvf'
- Sizes:
  - H1 billboard: 150px / 900 / 0.85
  - H1: 88px / 800 / 1.07
  - Subheading: 28px / 500 / 1.30
  - Body: 18-20px / 400 / 1.50
  - Caption: 13.2px / 400 / 2.05

## Spacing & Grid
Base: 8px grid.
Values: 7.2px, 8px, 12px, 16px, 24px, 48px, 128px.
Use multiples for padding, margins, gaps.

## Border Radius
- sm: 8px — inputs, small buttons
- md: 16px — cards, images
- lg: 32px — larger blocks
- group: 50px — grouped elements
- xl: 64px — images
- pill: 99px — pill buttons
- full: 1000px — avatars, extreme pills

## Shadows & Depth
Flat design — minimal shadows. Use:
- soft: rgba(0,0,0,0.15) 0px 4px 4px
- wide: rgba(1,1,63,0.1) 0px 2px 19px -4px

## Components

### Primary Button (Chartreuse)
```css
.btn-primary {
  background: #d2e823;
  color: #000000;
  padding: 20px 26px 22px;
  border-radius: 99px;
  font-weight: 500;
  font-size: 16px;
  border: none;
}
.btn-primary:focus { outline: none; }

Secondary Button (Lavender)

.btn-secondary {
  background: #e9c0e9;
  color: #000000;
  padding: 20px 26px 22px;
  border-radius: 99px;
  font-weight: 500;
  font-size: 16px;
  border: none;
}

Input Field

.input {
  background: #ffffff;
  color: rgb(117,117,117);
  border-radius: 8px;
  padding: 8px 16px;
  border: none;
}

Layout & Responsive Rules

Breakpoints:

• Mobile: <479px
• Tablet: 480–991px
• Desktop: >1280px

Interaction Rules

• Transition: 150ms ease for hover/focus
• Focus: remove default outline; rely on color change

DO

• Use only palette colors
• Maintain 8px spacing multiples
• Keep button radii consistent
• Use Linksans for all UI text
• Reserve chartreuse for key CTAs

DON'T

• Invent new colors
• Mix sharp and rounded corners
• Add heavy shadows
• Use chartreuse for non-interactive elements

Code Examples

Primary Button:

.btn-primary {
  background: #d2e823;
  color: #000;
  padding: 20px 26px;
  border-radius: 99px;
}

Card:

.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
}

Form Input:

.input {
  background: #ffffff;
  border-radius: 8px;
  padding: 8px 16px;
}

---

## 9. Summary

**TL;DR** — Linktr’s design is flat, bold, and disciplined. Neutrals dominate, chartreuse and lavender add personality. Typography is custom and confident. Spacing is strict 8px multiples. Buttons are either rectangles or extreme pills.

**Brand Keywords**  
- bold-minimalist  
- creator-friendly  
- flat-colorist  
- accent-driven