Color Palette
Background Colors
Mid Gray
rgba(140,140,140,.2)
Typography
System Font · -apple-system
System UI
Connect the world's professionals to make them more productive and successful.
Regular · 400
Semibold · 600
Letter Spacing — No tokens defined
Default tracking
LinkedIn's typography uses the OS system font with no custom letter-spacing tokens. Hierarchy is achieved through size and weight alone.
No custom tracking
LinkedIn
3xl Display · 40px · Semibold · line-height: 48px
Connect & grow
2xl Heading · 32px · Semibold · line-height: 40px
Your professional community
xl Heading · 20px · Semibold · line-height: 25px
Jobs, news and insights
lg Body Bold · 16px · Semibold · line-height: 24px
Stay up to date with the latest developments in your industry and network.
lg Body Regular · 16px · Regular · line-height: 24px
2nd degree connection · Software Engineer at Acme Corp · 3h ago
base Body · 14px · Regular · line-height: 21px
CONNECTIONS · JOBS · LEARNING
xs Label · 12px · Semibold · uppercase · line-height: 16px
Letter Spacing
No tokens defined
Not extracted
LinkedIn defines no letter-spacing tokens. All letter-spacing is handled by browser defaults or inline styles.
Spacing
Spacing Scale
17 tokens — 1px → 492px
Borders
Border Widths
Two border widths: hairline for general UI boundaries, and thin for the brand-blue focus state outline on interactive elements.
Shadow / Elevation
Shadow Tokens
5 tokens
Outline Ring
×12
rgba(140,140,140,.2) 1px — subtle border ring for cards
Raised
×8
Gray ring + rgba(0,0,0,.08) 4px drop — elevated cards, dropdowns
Brand Focus
×4
rgb(10,102,194) ring — brand-blue focus indicator
Dark Inset
×3
rgba(0,0,0,.75) 1px inset — pressed / active state
White Outline
×1
rgb(255,255,255) 2px — white ring for avatars on image backgrounds
Z-Index
| Layer | Value | Usage |
|---|
| z-1 (Background) | -1 | Elements placed behind static content |
| z-2 (Base) | 1 | Base elevated elements above static layer |
| z-3 (Content) | 2 | Slightly elevated content layers |
| z-4 (Raised) | 4 | Raised interactive elements |
| z-5 (Floating) | 5 | Floating UI elements, badges |
| z-6 (Navigation) | 100 | Sticky navigation, top bars |
| z-7 (Dropdown) | 105 | Dropdown menus above nav |
| z-8 (Modal) | 999 | Modal dialogs, overlays |
| z-9 (Maximum) | 11000 | Highest priority — chat overlays, tooltips |
Breakpoints
No breakpoints defined
The LinkedIn design system extracted from the feed page defines no CSS breakpoint tokens. Responsive behavior is handled via JavaScript or inline media queries not captured as CSS custom properties.
Opacity
Opacity Scale
11 tokens — 8% → 92% in ~8% steps
LinkedIn defines 11 opacity stops in approximately 8% increments — a granular animation ramp for feed animations and UI state changes.
Accessibility
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| Blue 2 (#56687A) | Black (#000000) | 3.66:1 | AA Large |
| Blue 2 (#56687A) | Blue (#0A66C2) | 1.01:1 | Fail |
| Blue 2 (#56687A) | White (#FFFFFF) | 5.74:1 | AA |
| Blue 2 (#56687A) | Mid Gray (rgba) | 1.71:1 | Fail |
| Blue 2 (#56687A) | Light Gray (#F4F2EE) | 5.14:1 | AA |
| Green (#5F9B41) | Black (#000000) | 6.25:1 | AA |
| Green (#5F9B41) | White (#FFFFFF) | 3.36:1 | AA Large |
| Green (#5F9B41) | Light Gray (#F4F2EE) | 3:1 | AA Large |
| Blue 3 (#378FE9) | Black (#000000) | 6.27:1 | AA |
| Blue 3 (#378FE9) | White (#FFFFFF) | 3.35:1 | AA Large |
| Blue 3 (#378FE9) | Light Gray (#F4F2EE) | 3:1 | AA Large |
| Red (#E06847) | Black (#000000) | 6.24:1 | AA |
| Red (#E06847) | White (#FFFFFF) | 3.37:1 | AA Large |
| Mid Gray 2 (#808080) | Black (#000000) | 5.32:1 | AA |
| Mid Gray 2 (#808080) | White (#FFFFFF) | 3.95:1 | AA Large |
| Mid Gray 2 (#808080) | Light Gray (#F4F2EE) | 3.53:1 | AA Large |
CSS Variables Reference
Black--color-black#000000
Blue (Brand)--color-blue#0A66C2
White--color-white#FFFFFF
Mid Gray (Translucent)--color-mid-grayrgba(140,140,140,.2)
Light Gray (Cream)--color-light-gray#F4F2EE
Orange (Tan)--color-orange#BBB1A1
Blue 2 (Muted Text)--color-blue-2#56687A
Green (Success/Hiring)--color-green#5F9B41
Blue 3 (Links)--color-blue-3#378FE9
Red (Error/Warning)--color-red#E06847
Mid Gray 2--color-mid-gray-2#808080
Light Blue (Border)--color-light-blue#9EB5CA
Orange 2 (Gold)--color-orange-2#E7A33E
Orange 3 (Amber)--color-orange-3#C37D16
-apple-system (System)--font-family-base-apple-system
Regular--font-weight-regular400
Semibold--font-weight-semibold600
2xs--font-size-2xs10px
xs--font-size-xs12px
sm--font-size-sm13.33px
base--font-size-base14px
lg--font-size-lg16px
xl--font-size-xl20px
2xl--font-size-2xl32px
3xl--font-size-3xl40px
Letter spacing—None defined
Space 12 (MD)--space-1216px
Space 20 (LG)--space-2024px
Space 32 (XL)--space-3240px
Space 80 (Max)--space-80492px
Hairline--border-width-hairline1px
Thin--border-width-thin2px
r12 (Circle)--radius-r1250%
r13 (Pill)--radius-r13999px
Instant--duration-instant83ms · ×14
Slow--duration-slow167ms · ×90
Linear--easing-linearlinear · ×12
Ease In/Out--easing-ease-in-outease-in-out · ×7
Ghosting 8%--opacity-80.08
Faint 25%--opacity-250.25
Near-full 92%--opacity-920.92
Background--z-1-1
Base--z-21
Navigation--z-6100
Modal--z-8999
Maximum--z-911000
LinkedIn Design System · Light Theme · Generated 15/04/2026 · 14 color tokens · 21 type tokens · 17 spacing steps · 13 border radii · 2 border widths · 5 shadows · 11 durations · 4 easings · 9 z-index layers · No breakpoints · 11 opacity tokens