Voltage Lime
#d2e823Primary action buttons, highlighted headlines, accent surfaces — the brand's signature chartreuse, used sparingly as functional punctuation across every section
Linktr
linktr.eeWebsite preview
The design language
Linktree speaks in full-volume color blocks: each section is a saturated wall of lime, cobalt, or maroon, and content floats on top as white pills and dark text. The system treats color as the layout, not decoration — headers, cards, and CTAs inherit the section hue rather than fighting it, while a recurring chartreuse green acts as the brand's singular action accent. Typography is a single custom geometric sans (Linksans) set extra-bold with tight negative tracking at display sizes, giving headlines a compressed, poster-like weight. Shapes are aggressively rounded: nav bars and buttons become perfect pills, cards become lozenges, and only form inputs keep a modest 8px corner. The result reads as a series of bold editorial spreads rather than a conventional product page.
Color palette
brand
Cobalt Signal
#2665d6Full-bleed section backgrounds, link accents — saturated blue used as an alternate hero band
Bordeaux Maroon
#780016Full-bleed FAQ and deep sections — dark wine red for high-contrast blocks
accent
Lilac Whisper
#e9c0e9Decorative borders, icon strokes, soft accent washes — pastel pink used for outlines and ornaments
Indigo Abyss
#061492Deep card surfaces, tertiary button backgrounds — saturated navy
Forest Depth
#254f1aHeadline outlines, bordered cards, body emphasis — dark forest green as an alternate text color
Saffron
#d6a337Card accent backgrounds — warm gold for variety blocks
neutral
Midnight Ink
#1e2330Primary text, icon fills, dark UI outlines — near-black with a faint blue undertone, the default ink color
Plaster White
#ffffffCard surfaces, button text, pill nav background — pure white floats above the colored sections
Bone Canvas
#f3f3f1Page background base, subtle button surfaces — warm off-white with a faint green cast
Cement Gray
#adadadMuted card backgrounds, disabled or secondary surfaces
Slate Mute
#676b5fMuted link text, secondary borders, low-emphasis text — warm desaturated olive-gray
Carbon
#222222Deep button text and borders for inverted controls
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
80px · 800 · 1 · -3.44px trackingThe quick brown fox jumps
display-alt
56px · 700 · 1.06 · -1.34px trackingThe quick brown fox jumps
heading-lg
51px · 700 · 1.06 · -1.22px trackingThe quick brown fox jumps
heading
28px · 500 · 1.2 · -0.56px trackingThe quick brown fox jumps
text-25
25px · 700 · 1.31The quick brown fox jumps
heading-sm
24px · 500 · 1.2 · -0.48px trackingThe quick brown fox jumps
subheading
20px · 400 · 1.31 · -0.4px trackingThe quick brown fox jumps
text-18
18px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Arial
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.50
- Fallback
- system-ui
System fallback for form inputs and legacy text nodes — only appears as a default rendering, not a designed choice
Additional typeface
Linksans
- Weights
- 400, 500, 700, 800
- Sizes
- 12px, 13px, 14px, 15px, 20px, 24px, 25px, 51px
- Line height
- 1.06–1.50
- Letter spacing
- -0.043em at 80px, -0.024em at 56px, -0.020em at 24–28px, -0.013em at 18px, -0.010em at 15–16px, normal at 12–14px
- Fallback
- Inter
Primary brand typeface — geometric custom sans used everywhere from nav to 80px display headlines. Weight 700–800 at large sizes with negative letter-spacing creates the compressed, poster-like headline voice. Substitute with Inter or Space Grotesk if Linksans is unavailable.
Additional typeface
Linksans Linksansvf
- Weights
- 400, 500, 700, 800
- Sizes
- 14px, 16px, 18px, 24px, 28px, 56px, 80px
- Line height
- 1, 1.06, 1.07, 1.2, 1.3, 1.5
- Letter spacing
- -0.02, -0.01, 0.01
Linksans Linksansvf — detected in extracted data but not described by AI
Additional typeface
yerk
- Weights
- 400
- Sizes
- 14px
- Line height
- 1.5
yerk — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Max width
- 1280px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 16px
Border radius
nav
8pxtags
9999pxcards
32pxpills
1000pxinputs
8pxbuttons
9999pxSpacing scale
4px6px8px9px10px12px13px14px16px18px20px22px24px26px32px35px36px40px44px48px58px60px64px65px73px80px126px128px201px216px230px250px272px298px302pxGuidelines
Do
- Use Voltage Lime (#d2e823) as the single primary action color on every section; never substitute another hue for CTAs
- Set display headlines at 56–80px Linksans 800 with negative letter-spacing (-0.024em to -0.043em) — tight tracking is signature
- Float the white pill navigation over full-bleed color sections; it should never sit on a flat white page edge
- Use pill radius (9999px) for all buttons and tags; reserve 8px only for inputs and form fields
- Apply full-bleed solid color section backgrounds as the primary layout device; avoid gradients and shadows entirely
- Pair each section's background with a single contrasting text color — Midnight Ink on lime, Voltage Lime on blue, Lilac Whisper on maroon
- Keep card radius in the 32–64px range for a lozenge, sticker-like feel on colored backgrounds
Don’t
- Don't use box-shadow or any drop-shadow effect for depth — separation must come from color contrast
- Don't set body or headline type in Arial or any system font; Linksans is non-negotiable for brand voice
- Don't use CTA colors other than #d2e823 — avoid blue, maroon, or pink buttons even when they match a section
- Don't apply tight negative letter-spacing below 18px — tracking only tightens at display sizes
- Don't break the full-bleed section model with subtle background tints or muted neutrals; sections should be loud and saturated
- Don't center body paragraphs — text blocks are left-aligned in a generous measure (max ~520px)
- Don't use square or small-radius buttons; everything clickable is a pill or lozenge
- Don't add gradients to backgrounds, buttons, or text — the system is strictly flat color
Components
Floating Pill Navigation
Primary site navigationWhite rounded pill floating over full-bleed color sections. Background #ffffff, radius 1000px, height ~64px, horizontal padding ~32px. Logo on left in Midnight Ink (#1e2330). Nav links in 14–15px Linksans 500 at #1e2330. Right side: ghost 'Log in' (dark text, no border) + filled black 'Sign up free' button (#000000, white text, 9999px radius, 18px 22px padding).
Lime Primary Button
Main call-to-actionFilled chartreuse green button. Background #d2e823, text #1e2330, radius 9999px, padding 18px 22px. Font: Linksans 700 at 16px. The signature CTA color; appears on every section. Hover darkens to #b8c91b.
Black Sign-Up Button
Secondary navigation actionFilled black button in the nav pill. Background #000000, text #ffffff, radius 9999px, padding 12px 20px. Font: Linksans 500 at 14–15px. Sits at the far right of the floating nav.
Ghost Text Button
Tertiary inline actionText-only button with no fill or border. Text in #1e2330, Linksans 500 at 14–15px. Used for 'Log in' in nav. Hover adds underline.
Dark Outlined Card
Feature or FAQ cardCard with dark background and light text. Background #780016 (maroon) or #061492, text #ffffff, radius 32–64px, padding 24px. Thin 1px border in #e9c0e9 or #254f1a. Used for FAQ items and feature blocks.
Phone Mockup Card
Product showcaseRounded device frame containing app screenshots. Outer container radius 32–64px, often a brand-color block. Inner phone shape radius 41.6px. Used to display Linktree profile previews at angles.
Bordered Accent Card
Highlighted content blockCard with visible colored border, no fill or tinted fill. Border 2px in #e9c0e9 (pink) or #254f1a (forest), radius 32–64px, padding 24–32px. Background can be #ffffff or section color. Creates a sticker-like emphasis.
Text Input Field
Form inputSimple input with bottom border or full border. Border 1px in #000000 or #676b5f, radius 8px, padding 8px 16px. Placeholder text in #757575. Font: Linksans 400 at 16px. Used in handle-creation form.
Section Heading Block
Display headlineLarge headline set in 80px or 56px Linksans 800, letter-spacing -0.043em or -0.024em, line-height 1.0–1.06. Color matches section logic: Midnight Ink (#1e2330) on lime, Voltage Lime (#d2e823) on blue, Lilac Whisper (#e9c0e9) on maroon. Word-wraps in 2-line editorial stacks.
Handle Input Group
Profile creation formComposite input: small fixed prefix label ('linktr.ee/') in Linksans 500, paired with a text input. Sits inline with the lime primary button to its right. White card-like container with subtle background.
FAQ Accordion Row
Expandable question itemFull-width row inside maroon section. Background a slightly lighter maroon, radius 16–32px, padding 20–24px. Question text in #ffffff Linksans 500 at 16–18px. Chevron icon in white, rotates 180° on expand. 1px Lilac Whisper (#e9c0e9) border possible.
Top Banner Strip
Promotional announcement barFull-width thin strip above the floating nav. Background Voltage Lime (#d2e823) or white, text #1e2330 in Linksans 500 at 13–14px. Includes a close (×) button on the right. Centers a short message with bold inline emphasis.
Surfaces & elevation
Level 0
Bone Canvas
#f3f3f1Base page background, off-white warm neutral
Level 1
Plaster White
#ffffffFloating nav, cards, input fields, button text
Level 2
Color Section Band
#d2e823Full-bleed hero and content sections
Level 3
Color Section Band Alt
#2665d6Alternate full-bleed sections
Level 4
Deep Section Band
#780016FAQ and footer depth sections
Level 5
Cement Overlay
#adadadMuted overlays and secondary card backgrounds
The system avoids drop shadows entirely. Depth is achieved through full-bleed color contrast — a white pill nav visibly sits on a lime or blue field, a maroon card sits on a slightly lighter maroon, a phone mockup sits on a cobalt block. No box-shadow, no blur, no glow. Flatness is the identity; separation comes from hue jumps, not elevation.
Layout & imagery
Layout
Full-bleed color sections stacked vertically, each one a different hue (lime → blue → maroon). Inside each band, a max-width ~1280px centered content column. Hero pattern is a 2-column split: oversized left-aligned headline + supporting paragraph on the left, a contained photo or device mockup on the right. Navigation is a floating white pill that sits on top of the first color band, not pinned to the page edge. Sections alternate 2-column (text+visual) and full-width stacked content (centered headline → grid). No sidebar, no sticky header beyond the floating nav. Vertical rhythm is generous (80px section gaps) and the bottom of each section is a hard color cut, never a gradient fade.
Imagery
Photography is lifestyle-candid: real creators in real environments, shot at medium distance with natural light, often posed with props that reinforce their trade (lettering artist with a brush, food founders with ingredients). Subjects are cropped with generous breathing room and never full-bleed — they sit in contained frames to the right of text. Product visuals are angled phone mockups floating in colored space, never literal screenshots. No illustration, no abstract graphics, no 3D renders. Iconography is minimal: simple outlined or filled glyphs at small sizes, Lilac Whisper or Midnight Ink, no multicolor icon system.
Design notes
Agent Guide
Quick Color Reference: - text: #1e2330 (Midnight Ink) - background: #f3f3f1 (Bone Canvas) for neutral pages, or section-specific full-bleed colors - surface/card: #ffffff (Plaster White) - border: #e9c0e9 (Lilac Whisper) for decorative outlines, #000000 for structural edges - accent: #d2e823 (Voltage Lime) - primary action: #d2e823 (filled action) Example Component Prompts: 1. Create a Primary Action Button: #d2e823 background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. Create a floating white pill navigation: #ffffff background, 1000px radius, ~64px height, 32px horizontal padding. Left: 'Linktree' wordmark in 20px Linksans 700, #1e2330. Center: 5 nav links in 14px Linksans 500, #1e2330, 20px gap. Right: ghost 'Log in' text button (#1e2330, no border) + filled 'Sign up free' button (#000000 fill, #ffffff text, 9999px radius, 12px 20px padding, Linksans 500 14px). 4. Create a maroon FAQ section: full-bleed background #780016. Centered headline 'Questions? Answered' in 56px Linksans 800, color #e9c0e9, letter-spacing -1.34px. Below: 4 full-width accordion rows, each with background a slightly lighter maroon, 16–32px radius, 20–24px padding, 1px #e9c0e9 border, question text in #ffffff Linksans 500 18px, and a white chevron icon on the right. 5. Create a top announcement banner: full-width strip, background #d2e823, padding 12px 16px. Centered text in 13px Linksans 500, #1e2330, with a bold inline phrase and a × close button on the far right (16px, #1e2330).
Type System Rules
Linksans is the only designed typeface; Arial appears only as a legacy fallback in form fields and should be replaced with Linksans wherever possible. The voice is compressed and heavy: display sizes (51–80px) use weight 800 with -0.024em to -0.043em letter-spacing, subheadings (20–28px) use weight 700 with -0.013em to -0.020em, and body (14–18px) uses weight 400–500 with -0.010em to normal tracking. Never set Linksans below 12px. Line-heights collapse at display sizes (1.0–1.06) and breathe at body sizes (1.31–1.50).
Section Color Rotation
The page cycles through bold solid colors as full-bleed section bands, typically lime → blue → maroon with occasional neutral white in between. Each section pairs its background with exactly one text accent: Midnight Ink on lime, Voltage Lime on blue, Lilac Whisper on maroon. Do not introduce new section colors beyond the four established (lime, blue, maroon, white) unless extending the palette intentionally.
Similar brands
Duolingo
Full-bleed saturated color sections with a single lime-green action accent and rounded pill-shaped CTAs
Headspace
Bold flat-color bands stacked vertically, playful rounded shapes, and a single warm accent punctuating the palette
Gumroad
Loud solid-color hero sections, compressed bold display type, and a creator-first lifestyle photography style
Loom
Vivid blue and purple full-bleed sections with pill navigation and oversized editorial headlines
Spotify Wrapped
Saturated color-block storytelling with a single bright accent (lime) popping against deep brand hues
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
