Link in bio tool: Everything you are, in one simple link | Linktree

Design Specification — Link in bio tool: Everything you are, in one simple link | Linktree

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a muted accent (#1E2330). All type is set in var(--font-linksans). Detected font weights: 100, 300, 400, 500, 600, 700, 800. Detected style signatures: gradient-rich / aurora; rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://linktr.ee/favicon.ico?favicon.12e703tnl4s-b.ico

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• radial-gradient(circle at 0%,#6fc2ca,#4f33f8 71.67%,#6c2ce2)
• linear-gradient(144deg,#f6f2ff 72.5%,#e8e1f7 101.9%)
• linear-gradient(145deg,#fff 65.7%,#f7f7f7 101.2%)
• linear-gradient(150deg,#f6f2ff 72.5%,#e8e1f7 101.9%)

> 1 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: var(--font-linksans) — stack: var(--font-linksans)

Font stacks (most used first)

• var(--font-linksans)
• DM Mono
• 'Anybody Variablefont Wdth Wght'
• var(--font-sans)
• var(--font-mono)
• 'Linksans'
• 'Roboto Flex'
• 'Archivo'
• DM Mono Fallback
• mencken

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 300, 400, 500, 600, 700, 800

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 4px 4px 0 0 #000
• 5px 5px 0 0

Layout

Container max-width: 700px

Grid columns (largest detected grid): 5

Breakpoints

• 480px
• 768px
• 991px
• 992px
• 1279px
• 1280px
• 1440px
• 1920px

Animation & Motion

Transitions

• none
• transform .3s cubic-bezier(1,0,0,1)
• transform .7s cubic-bezier(.433,.217,.355,1)

Easing curves

• cubic-bezier(.4, 0, 1, 1)
• cubic-bezier(0, 0, .2, 1)
• cubic-bezier(.4, 0, .2, 1)
• cubic-bezier(.4, 0, .6, 1)
• cubic-bezier(.4, 0, .2, 1)
• var(--tw-ease,var(--default-transition-timing-function))
• cubic-bezier(.4,.2,.2,1)
• cubic-bezier(.4,.2,.2,1)

Keyframes

@keyframes accordion-down { 0%{height:0}to{height:var(--radix-accordion-content-height)} }
@keyframes accordion-up { 0%{height:var(--radix-accordion-content-height)}to{height:0} }
@keyframes nav-dropdown-in { 0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)} }
@keyframes nav-tab-panel-in { 0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)} }
@keyframes overlay-in { 0%{opacity:0}to{opacity:1} }
@keyframes overlay-out { 0%{opacity:1}to{opacity:0} }
@keyframes content-in { 0%{opacity:0;transform:translate(-50%,-48%)scale(.96)}to{opacity:1;transform:translate(-50%,-50%)scale(1)} }
@keyframes content-out { 0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-48%)scale(.96)} }
@keyframes home-hero-tower-up { 0%,2%{transform:translateY(0)}20%,22%{transform:translateY(calc(-1 * var(--card-step)))}40%,42%{transform:translateY(calc(-2 * var(--card-step)))}60%,62%{transform:translateY(calc(-3 * var(--card-step)))}80%,82%{transform:translateY(calc(-4 * var(--card-step)))}to{transform:translateY(calc(-5 * var(--card-step)))} }
@keyframes home-hero-tower-left { 0%,2%{transform:translate(0)}20%,22%{transform:translateX(calc(-1 * var(--card-step)))}40%,42%{transform:translateX(calc(-2 * var(--card-step)))}60%,62%{transform:translateX(calc(-3 * var(--card-step)))}80%,82%{transform:translateX(calc(-4 * var(--card-step)))}to{transform:translateX(calc(-5 * var(--card-step)))} }
@keyframes marquee { 0%{transform:translate(0)}to{transform:translate(-50%)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes pulse { 50%{opacity:.5} }

Animations

• home-hero-tower-left var(--hero-tower-duration) ease-in-out infinite
• home-hero-tower-left var(--hero-tower-duration) ease-in-out infinite paused
• home-hero-tower-up var(--hero-tower-duration) ease-in-out infinite
• home-hero-tower-up var(--hero-tower-duration) ease-in-out infinite paused
• .2s ease-out nav-tab-panel-in
• var(--animate-pulse)
• var(--animate-spin)
• .18s ease-out accordion-up
• .15s ease-in content-out
• .15s ease-in overlay-out

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “Get started for free”

button-secondary — sample text: “Get started for free”

Effects

• backdrop-filter: saturate()

Source Design Tokens (CSS custom properties)

:root {
  --font-dm-mono: "DM Mono", "DM Mono Fallback";
  --font-mencken: "mencken", "mencken Fallback";
  --font-thatthat: "thatThat", "thatThat Fallback";
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-red-500: #fb2c36;
  --color-red-600: #e40014;
  --color-red-700: #bf000f;
  --color-yellow-200: #fff085;
  --color-green-100: #dcfce7;
  --color-green-500: #00c758;
  --color-emerald-600: #009767;
  --color-blue-100: #dbeafe;
  --color-blue-500: #3080ff;
  --color-blue-600: #155dfc;
  --color-blue-900: #1c398e;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-700: #314158;
  --color-slate-900: #0f172b;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-400: #99a1af;
  --color-gray-500: #6a7282;
  --color-gray-600: #4a5565;
  --color-gray-700: #364153;
  --color-gray-800: #1e2939;
  --color-gray-900: #101828;
  --color-gray-950: #030712;
  --color-stone-50: #fafaf9;
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-5xl: 64rem;
  --container-7xl: 80rem;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1 / .75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25 / .875);
  --text-base: 16px;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
}

Do's and Don'ts

Do

• Do reserve the accent #1E2330 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 100, 300, 400, 500, 600, 700, 800.
• Do align spacing to the 8px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #FFFFFF;
  --color-accent: #1E2330;
  --color-primary: #D2E823;
  --color-surface: #F3F3F1;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #5A662D;
  --color-border: #B69FAF;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F6F7F5;
  --color-surface-container: #F4F4F1;
  --color-surface-container-high: #F3F3F1;
  --color-surface-container-highest: #EFF0EC;
  --font-sans: var(--font-linksans);
  --font-size-display: 80px;
  --font-size-headline-lg: 41px;
  --font-size-headline-md: 28px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18.2px;
  --font-size-body-md: 16.6px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-md: 8px;
  --radius-lg: 48px;
  --shadow-sm: 4px 4px 0 0 #000;
  --shadow-md: 5px 5px 0 0;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 56px;
  --tracking-display: -.01em;
  --container-max: 700px;
}