Linklist Design System Deep-Dive

1. Brand Overview

Linklist is playing in the “link-in-bio” space, but they’re not trying to be another generic pastel clone. The design language screams utility-first with a slight premium lean — clean typography, restrained color usage, and purposeful spacing. This isn’t a maximalist aesthetic; they’re targeting creators, businesses, and anyone who wants their micro-site to feel polished without feeling corporate-stiff.

The vibe is “functional elegance.” The core palette is mostly monochrome with sharp injections of saturated accents — think bold pinks, deep greens, and warm yellows layered over a black-and-white base. It’s not trying too hard to look “fun,” but it’s also not sterile. The result is a brand that feels approachable yet serious enough for professional use.

Typography choices tell you a lot about their intent. Source Sans Pro dominates body and heading work — a neutral, readable sans-serif that works well across screens. But they also sprinkle in Oswald, Montserrat, and Poppins for certain headings and buttons. This mixing adds texture without breaking the system. It’s a subtle way to differentiate sections and give hierarchy more character.

Component styling leans heavily into rounded forms. You see 50px radii on buttons all over the place — big pills that communicate friendliness — alongside 4.8px radii for smaller actions and cards. Shadows exist, but they’re soft and sparing; depth is added where it matters for click targets, not as a default aesthetic.

The UX philosophy here feels “fast, clear, friendly.” Buttons are obvious, color-coded for function. Spacing is generous, sticking to an 8px grid, so everything breathes. There’s no ambiguity about clickable elements — pill shapes, hover scaling, and bold colors make sure of that.

This is a system that’s easy to theme without breaking. It’s modular — colors swap out per link, typography scales cleanly, components handle different palettes without collapsing. If you’re designing in their ecosystem, you’ll quickly find that the guardrails are tight enough to keep things coherent but loose enough to brand your page.

2. Color System

2.1 Primary Colors

The semantic primary is rgb(156, 163, 175) (#9ca3af), a muted gray. That’s interesting — they’re not calling their hot pink or deep green “primary.” This suggests a functional “primary” for UI logic, not marketing. The “secondary” is fully transparent — rgba(0, 0, 0, 0).

For brand personality, the boldest hue is rgb(223, 37, 112) (#df2570) — a rich magenta-pink. It’s used for text accents and CTA links. Paired with black (#000000) and white (#ffffff), it’s high-contrast and eye-catching without being neon.

Competitor comparison: Linktree leans green, Beacons goes pastel. Linklist’s choice of magenta as its energy color sets it apart and feels a bit more premium/fashion-oriented.

2.2 Complete Palette

2.3 Color Relationships

Contrast is generally solid — white text on #cb004d or #009933 passes WCAG AA easily. Magenta pink (#df2570) on white is borderline for smaller text; it works for headings but could be risky for 14px body copy.

Dark mode isn’t explicitly separate here — the palette is versatile enough to invert. Black backgrounds with white and pink accents are already common in their UI.

2.4 Usage Guide

• Work well:

  • #cb004d (deep magenta) with white text — strong CTA.
  • #009933 (deep green) with white — success, confirmation buttons.
  • #8c465d (mauve) with #f9e4e7 text — softer, secondary actions.

• Avoid:

  • Pink (#df2570) on pale pink (#f9e4e7) — too low contrast.
  • Medium gray (#4b5563) on charcoal brown (#252021) — readability drops.

3. Typography

3.1 Font Families

Main workhorse: Source Sans Pro with a full UI-safe fallback stack (ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans).

Supporting cast:

• Oswald — condensed, punchy headings.
• Montserrat — geometric sans, often uppercase in buttons.
• Poppins — rounded, friendly headings/buttons.

No Google Fonts or Adobe kits detected — likely self-hosted or CDN.

3.2 Type Scale

3.3 Hierarchy

The scale is tight — lots of small increments (30px, 32px) for headings. This gives flexibility for micro-sites where you might have multiple heading tiers in a small viewport. The uppercase Montserrat/Poppins buttons stand out visually thanks to letter spacing. Body copy stays at 16–18px for legibility.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Common values:

4.2 Layout

No breakpoint data extracted, but Tailwind CSS usage suggests a responsive approach with utility classes controlling spacing per screen size. The density of 16px spacing in the data shows that’s the default padding between elements.

5. Visual Elements

Border Radius

Shadows

Soft and functional. Most common: rgba(0, 0, 0, 0.063) 0px 0px 20px 0px — a barely-there ambient shadow. Some heavier variants for specific buttons: rgba(0, 0, 0, 0.4) and rgba(0, 0, 0, 0.75) for colored buttons.

Borders

Minimal — 1px solids in white or light rgba grays. Used for outlined buttons and dividers.

6. Components

6.1 Buttons

Variants from data:

• Primary Magenta (#cb004d, white text, pill radius 9999px) — scales up on hover, down on active.
• White Pill (#ffffff, black text, 50px radius, soft shadow).
• Outlined White (transparent bg, white border, 50px radius).
• WhatsApp Green (#25d366, white text, 50px radius).
• Light Green (#58cc02, white text, 4.8px radius).
• Red (#ff0000, white text, 50px radius, heavier shadow).
• Navy (#084a70, white text, 50px radius).
• Overlay (#000000, opacity 0, 24px radius — v-btn__overlay).
• Mauve (#8c465d, pale pink text, 4.8px radius).
• Yellow (#ffc200, black text, 50px radius, shadow).
• Pale Peach (#f9e4e7, black text, 4.8px radius).
• Light Gray (#edede9, black text, 4.8px radius).
• Warm Gray (#e5e5de, black text, 4.8px radius).
• Purple (#a265ff, white text, 4.8px radius).

6.2 Links

Color-coded per theme, no hover underline. Examples:

• Dark gray (#111827), weight 600
• Black (#000000), weight 400
• White (#ffffff), weight 400
• Magenta pink (#df2570), weight 600
• Yellow-green (#e0f612), weight 600
• Deep magenta (#cb004d), weight 600

6.3 Forms

No text input styles extracted — likely styled via Vuetify defaults.

6.4 Cards

Not explicitly extracted, but shadows and 4.8px radii suggest card surfaces follow the same small-radius/soft-shadow pattern.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-dark-gray: #111827;
  --color-magenta-pink: #df2570;
  --color-medium-gray: #4b5563;
  --color-deep-green: #009933;
  --color-mauve: #8c465d;
  --color-blue: #3679bd;
  --color-pale-pink: #f9e4e7;
  --color-deep-magenta: #cb004d;
  --color-charcoal-brown: #252021;
  --color-royal-blue: #005fcc;
  --color-semantic-primary: #9ca3af;
  --color-transparent: transparent;

  /* Typography */
  --font-source-sans-pro: "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans;
  --font-oswald: "Oswald";
  --font-montserrat: "Montserrat";
  --font-poppins: "Poppins";

  /* Spacing */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11_2: 11.2px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-96: 96px;
  --space-112: 112px;
  --space-128: 128px;
  --space-136: 136px;
  --space-142_656: 142.656px;
  --space-240: 240px;

  /* Border Radius */
  --radius-xs: 4.8px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 48px;
  --radius-pill: 50px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.063) 0px 0px 20px 0px;
  --shadow-medium: rgba(0, 0, 0, 0.4) 4.8px 6.4px 6.4px 0px;
  --shadow-strong: rgba(0, 0, 0, 0.75) 4.8px 6.4px 0px 0px;
}

8. AI Coding Assistant Prompt

# Linklist Design System Specification

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

## Brand Context
Linklist values functional elegance with approachable friendliness. The design blends monochrome foundations with bold, saturated accents. Typography is clean and readable, with occasional stylistic headings for character.

## Color Palette
- Black: #000000 — primary dark backgrounds, headings
- White: #ffffff — base background, text on dark
- Dark Gray: #111827 — headings, link text
- Magenta Pink: #df2570 — accent links, highlights
- Medium Gray: #4b5563 — secondary text
- Deep Green: #009933 — success states, green buttons
- Mauve: #8c465d — themed buttons, cards
- Blue: #3679bd — link accents
- Pale Pink: #f9e4e7 — soft backgrounds
- Deep Magenta: #cb004d — primary buttons
- Charcoal Brown: #252021 — section backgrounds
- Royal Blue: #005fcc — hover/focus states
- Semantic Primary: #9ca3af — functional UI primary
- Transparent: transparent — secondary background

## Typography
- Source Sans Pro: headings, body copy
- Oswald: alternative headings
- Montserrat: uppercase headings/buttons
- Poppins: friendly headings/buttons

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 60px | 700 | 1.00 | Main titles |
| H1 (Oswald) | 60px | 600 | 1.25 | Display headings |
| H2 | 48px | 700 | 1.00 | Section headings |
| H3 | 36px | 700 | 1.11 | Subsections |
| Heading | 32px | 600 | 1.25 | Cards, hero sections |
| Heading Upper | 30px | 500 | 1.00 | Uppercase buttons |
| Body | 18px | 400/600 | 1.56–1.78 | Main text |
| Button | 17.6px | 400 | 1.50 | Action labels |
| Caption | 14px | 400/600 | 1.43–1.71 | Small annotations |
| Small Caption | 12px | 400/600 | 1.67 | Footnotes |

## Spacing & Grid
Base: 8px grid. Scale: 4px, 6px, 8px, 10px, 11.2px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 96px, 112px, 128px, 136px, 142.656px, 240px.

Map:
- Button padding: 16px
- Card padding: 24px
- Section gaps: 32–48px

## Border Radius
- xs: 4.8px — small buttons, cards
- sm: 6px — rare (single button)
- md: 8px — images
- lg: 12px — iframes
- xl: 16px — figures
- 2xl: 24px — medium buttons
- 3xl: 48px — large divs
- pill: 50px — standard buttons
- full: 9999px — pills, avatars

## Shadows & Depth
- Soft: rgba(0,0,0,0.063) 0 0 20px — general buttons/cards
- Medium: rgba(0,0,0,0.4) 4.8px 6.4px — colored buttons
- Strong: rgba(0,0,0,0.75) 4.8px 6.4px — high-contrast buttons

## Component Specifications

### Primary Button
Default:

background-color: #cb004d; color: #ffffff; padding: 0 16px; border-radius: 9999px; border: none; font-size: 14px; font-weight: 400; transform: scale(1);

Hover: `transform: scale(1.1)`
Active: `transform: scale(0.85)`
Focus: `outline: none`

### White Pill Button

background-color: #ffffff; color: #000000; padding: 16px; border-radius: 50px; box-shadow: var(--shadow-soft); font-size: 17.6px;

### Outlined White Button

background-color: transparent; color: #ffffff; border: 1px solid #ffffff; border-radius: 50px; box-shadow: var(--shadow-soft);

### Input Fields
No explicit data; follow Vuetify defaults with matching border-radius (4.8px) and palette colors.

### Card

background-color: #ffffff; border-radius: 4.8px; box-shadow: var(--shadow-soft); padding: 24px;

## Layout & Responsive Rules
- Use Tailwind utility classes for responsive spacing.
- Default gap: 16px between items.
- Section padding: 32px or higher.

## Interaction Rules
- Scaling transform for primary button hover (1.1x) and active (0.85x).
- Soft shadows on interactive elements.
- No hover underline for links.

## DO List
- Use only palette colors.
- Maintain 8px spacing multiples.
- Use Source Sans Pro for body text.
- Apply correct border-radius per component type.
- Keep link text-decoration: none.

## DON'T List
- Don’t invent new colors.
- Don’t mix sharp and rounded corners in same component.
- Don’t apply shadows to text.
- Don’t reduce button padding below 16px.

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #cb004d;
  color: #fff;
  padding: 0 16px;
  border-radius: 9999px;
  font-size: 14px;
  transition: transform 150ms ease;
}
.btn-primary:hover { transform: scale(1.1); }
.btn-primary:active { transform: scale(0.85); }
```

Card:
```css
.card {
  background: #fff;
  border-radius: 4.8px;
  box-shadow: rgba(0,0,0,0.063) 0 0 20px;
  padding: 24px;
}
```

9. Summary

TL;DR — Linklist’s system is clean, modular, and friendly. Black-and-white base, bold accents, pill buttons, generous spacing. Typography mixes neutral and character fonts for hierarchy. Easy to theme without breaking.

Brand Keywords: functional-friendly, bold-accented, grid-disciplined, pill-centric