LinkedIn Brand Design System Deep-Dive
1. Brand Overview
LinkedIn’s interface has always been about professionalism first. You open the homepage and it’s instantly clear: this is not a playground for visual experiments. It’s a work environment, and the design system is tuned for clarity, trust, and efficiency.
The vibe: corporate, restrained, but with just enough warmth to keep it human. The blue (#0a66c2) is the anchor — instantly recognizable, consistent across every touchpoint. It’s not just any blue; it’s slightly muted compared to tech rivals like Facebook (#1877f2) and Twitter (#1DA1F2), which makes it feel more mature. This works because LinkedIn is about credibility. It’s a place where your boss might scroll next to your resume. Loud colors would break that trust.
The design philosophy is “functional minimalism.” They use white and neutral grays as the canvas, the blue for primary actions, and a handful of accent colors for reactions and status indicators. Every component feels like it’s part of a grid. Spacing is precise — an 8px base scale, no random gaps. Typography is system-based — they lean on -apple-system and other native UI fonts instead of custom display faces. That’s a deliberate choice: it makes the interface feel integrated with whatever OS you’re on.
Audience: business professionals, recruiters, job seekers, thought leaders. This is not a design system chasing consumer delight — it’s built for scanning, quick decision-making, and a sense of reliability.
2. Color System
2.1 Primary Colors
The primary brand color is:
- Primary Blue:
#0a66c2(rgb(10, 102, 194)) — used for CTAs, primary buttons, links, and highlighted actions.
Why it works: Blue is safe. It signals trust and stability. This tone is deep enough to pass accessibility checks against white text, but still vibrant enough to draw the eye in a feed full of neutral tones.
Competitor comparison:
- Facebook’s blue is brighter; more social, less corporate.
- Twitter’s blue is lighter; more airy, less serious.
- LinkedIn’s blue is grounded — perfect for a professional network.
Secondary main semantic color is transparent (rgba(0,0,0,0)), used to create invisible backgrounds for ghost buttons and spacing tricks.
2.2 Complete Palette
| Color Name | Hex | Role | Usage |
|---|---|---|---|
| Black | #000000 | Base text, icons | Top nav links, headers |
| Primary Blue | #0a66c2 | Brand primary | Buttons (btn-md btn-primary), skip links |
| Gray 102 | #666666 | Secondary text | Captions, muted UI text |
| Accent Orange | #b24020 | Accent / caution | Header accents |
| White | #ffffff | Background / text on dark | Buttons, skip links |
| Dark Blue | #004182 | Brand active state | Hover/focus states |
| Semi Black 0.9 | #000000 (0.9 opacity) | Hover/focus overlay | UI hover states |
| Light Blue Tint | #70b5f9 (0.1 opacity) | Hover highlight | Hover/focus states |
| Transparent Black 0.04 | #000000 (0.04 opacity) | Hover subtle | Hover/focus states |
| Canvas Background | #f3f2f0 | Page background | Overall site BG |
| Accent Gray | #474139 | Surface accent | Cards, modals |
| Link Blue7 | #0073b1 | Links | Reset link styles |
| Link Blue8 | #006097 | Links hover | Reset link styles |
| Link Blue9 | #004b7c | Links active | Reset link styles |
| Signal Negative | #cf0007 | Error | Validation errors |
| Data Icon Positive | #057642 | Success | Positive icons |
| Data Sequential C6 | #378fe9 | Data viz | Graph accents |
| Data Divergent Status A6 | #e16745 | Warning | Alerts |
| Data Sequential D5 | #e7a33e | Data viz | Charts |
| Checked Offset | #13a05f | Checkbox active | Form UI |
| Text Highlight | #fde2bc | Highlight | Annotated text |
(Full palette includes all extracted CSS variables — see section 7 for complete token list.)
2.3 Color Relationships
The primary blue (#0a66c2) on white (#ffffff) passes WCAG AA for normal text and AAA for large text. Black (#000000) on canvas background (#f3f2f0) is high contrast — easy to read. Accent colors like #b24020 (orange) are mostly used sparingly to avoid overwhelming the blue focus.
Dark mode: While LinkedIn’s main site doesn’t surface a dark mode here, the palette includes “on-dark” variants (e.g., --color-brand-accent-2-on-dark), which suggest internal theming for dark surfaces — lighter accent colors for text on dark backgrounds.
2.4 Usage Guide
Do:
- Use #0a66c2 for primary actions only.
- Keep backgrounds neutral (#ffffff, #f3f2f0) for readability.
- Use accent colors as functional signals (error, success, warning).
Avoid:
- Mixing primary blue with other blues like #0073b1 unless following link styles.
- Using accent orange (#b24020) for text — it’s for highlights, not body copy.
- Overusing tints like #70b5f9 — they’re for hover states.
3. Typography
3.1 Font Families
LinkedIn uses the system stack:
-apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, ArialNo Google or Adobe fonts. No variable fonts. This is about speed and familiarity — matches your OS typography for instant comfort.
3.2 Type Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| Heading-1 | system stack | 48px (3.00rem) | 400 | 1.25 |
| Heading-1 | system stack | 32px (2.00rem) | 400 | 1.25 |
| Heading-1 | system stack | 20px (1.25rem) | 400 | 1.50 |
| Heading-1 | system stack | 16px (1.00rem) | 600 | 1.50 |
| Heading-1 | system stack | 16px (1.00rem) | 400 | 1.50 |
| Link | system stack | 20px (1.25rem) | 400 | 1.50 |
| Link | system stack | 16px (1.00rem) | 600 | 1.50 |
| Link | system stack | 14px (0.88rem) | 600 | 1.50 |
| Link | system stack | 12px (0.75rem) | 600 | 1.50 |
| Button | system stack | 16px (1.00rem) | 600 | 1.50 |
| Button | system stack | 16px (1.00rem) | 400 | 1.50 |
| Button | system stack | 14px (0.88rem) | 600 | 1.50 |
| Button | system stack | 13.3333px (0.83rem) | 400 | — |
| Button | system stack | 12px (0.75rem) | 400 | — |
| Button | system stack | 12px (0.75rem) | 600 | — |
| Caption | system stack | 14px (0.88rem) | 400 | 1.50 |
| Caption | system stack | 12px (0.75rem) | 400 | 1.25 |
| Caption | system stack | 12px (0.75rem) | 600 | — |
3.3 Hierarchy
They rely on size and weight, not exotic typefaces. H1s at 48px are rare — mostly in hero areas. The bulk of UI is 14–16px, with weight shifts (400→600) to indicate interactivity (links, buttons). This keeps readability high and scanning fast.
4. Spacing & Layout
4.1 Spacing Scale
Base: 8px scale. Common values:
| Px | Rem | Count | Notes |
|---|---|---|---|
| 1px | 0.06rem | 2 | Borders |
| 4px | 0.25rem | 1 | Tight gaps |
| 5px | 0.31rem | 72 | Micro padding |
| 7px | 0.44rem | 8 | Small gaps |
| 8px | 0.50rem | 37 | Base unit multiples |
| 12px | 0.75rem | 181 | Primary padding |
| 15px | 0.94rem | 1 | Rare |
| 16px | 1.00rem | 70 | Button padding, card spacing |
| 24px | 1.50rem | 9 | Section gaps |
| 32px | 2.00rem | 4 | Large gaps |
| 48px | 3.00rem | 2 | Hero spacing |
| 60px | 3.75rem | 18 | Section padding |
| 64px | 4.00rem | 4 | Max gaps |
| 185px | 11.56rem | 2 | Large layout offsets |
4.2 Layout
No breakpoints extracted, but spacing suggests strict 8px grid alignment. Tailwind CSS is present — responsive modifiers likely handle layout shifts via standard breakpoints.
5. Visual Elements
Border Radius:
- 8px — cards, dropdown buttons
- 24px — pill buttons, navigation controls
- 25px — rare, possibly a special CTA
- 50% — avatars
Shadows:
- Dominant:
rgba(0,0,0,0.75) 0px 0px 0px 1px— used as a faux border. - Minimal depth — occasional
rgba(0,0,0,0.3) 0px 4px 12px 0pxfor modals.
Borders:
- 1px solid
rgba(0,0,0,0.08)— subtle, keeps components separated without heavy lines.
6. Components
6.1 Buttons
Primary Button (btn-md btn-primary):
- Default: bg #0a66c2, text #ffffff, padding 12px 24px, radius 24px, no border, box-shadow transparent, font-weight 600, font-size 16px.
Ghost Button (show-more-less__button):
- Default: bg transparent, text rgba(0,0,0,0.75), padding 7px 16px, radius 24px, border transparent, box-shadow rgba(0,0,0,0.75) 1px outline, font-weight 600, font-size 14px.
Dark Button (slide-list__nav-button):
- Default: bg rgba(0,0,0,0.75), text #ffffff, padding 8px 12px, radius 24px, font-weight 400, font-size 13.3333px.
Dropdown Button:
- Default: bg #ffffff, text rgba(0,0,0,0.75), padding 16px 12px 16px 16px, radius 8px, border 1px solid rgba(0,0,0,0.08), font-weight 600, font-size 16px.
6.2 Links
Variants:
- White text, weight 600.
- Primary blue (#0a66c2), weight 600.
- Semi-black (#000000 with 0.6 opacity), weight 600.
- Gray (#666666), weight 600.
No underline by default.
6.3 Forms
No inputs extracted — likely styled with 8px radius, subtle borders, focus color #0a66c2.
6.4 Cards
Canvas background (#f3f2f0) or white (#ffffff), radius 8px, subtle border or shadow for separation.
7. Design Tokens
:root {
/* Semantic colors */
--color-primary: #0a66c2;
--color-secondary: rgba(0,0,0,0);
--color-black: #000000;
--color-gray-102: #666666;
--color-accent-orange: #b24020;
--color-white: #ffffff;
--color-dark-blue: #004182;
--color-light-blue-tint: #70b5f9;
--color-canvas-bg: #f3f2f0;
--color-signal-negative: #cf0007;
--color-data-icon-positive: #057642;
--color-data-sequential-c6: #378fe9;
--color-data-divergent-status-a6: #e16745;
--color-data-sequential-d5: #e7a33e;
--color-checked-offset: #13a05f;
--color-text-highlight: #fde2bc;
/* Typography */
--font-family-system: -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial;
--font-size-h1: 48px;
--font-size-h1-alt: 32px;
--font-size-h1-sm: 20px;
--font-size-body-lg: 20px;
--font-size-body: 16px;
--font-size-body-sm: 14px;
--font-size-body-xs: 12px;
--font-size-button-sm: 13.3333px;
--line-height-tight: 1.25;
--line-height-normal: 1.50;
/* Spacing */
--space-1: 1px;
--space-4: 4px;
--space-5: 5px;
--space-7: 7px;
--space-8: 8px;
--space-12: 12px;
--space-15: 15px;
--space-16: 16px;
--space-24: 24px;
--space-32: 32px;
--space-48: 48px;
--space-60: 60px;
--space-64: 64px;
--space-185: 185px;
/* Border radius */
--radius-sm: 8px;
--radius-lg: 24px;
--radius-xl: 25px;
--radius-full: 50%;
/* Shadows */
--shadow-outline-dark: rgba(0,0,0,0.75) 0px 0px 0px 1px;
--shadow-outline-transparent: rgba(0,0,0,0) 0px 0px 0px 1px;
--shadow-outline-blue: rgb(10,102,194) 0px 0px 0px 1px;
--shadow-md: rgba(0,0,0,0.3) 0px 4px 12px 0px;
}8. AI Coding Assistant Prompt
# LinkedIn Design System Specification
You are a LinkedIn design expert. Build UIs matching their visual language exactly.
## Brand Context
LinkedIn’s design is professional, minimal, and built for clarity. It uses a restrained palette centered on deep blue for primary actions, neutral backgrounds, and system fonts for familiarity. Components align to an 8px grid with precise spacing.
## Color Palette
- Primary Blue: #0a66c2 — CTAs, primary buttons, key actions
- Black: #000000 — Main text, icons
- Gray 102: #666666 — Secondary text
- Accent Orange: #b24020 — Alerts, caution highlights
- White: #ffffff — Backgrounds, text on dark
- Dark Blue: #004182 — Active states
- Light Blue Tint: #70b5f9 — Hover highlights
- Canvas Background: #f3f2f0 — Page BG
- Signal Negative: #cf0007 — Errors
- Data Icon Positive: #057642 — Success icons
- Data Sequential C6: #378fe9 — Data visuals
- Data Divergent Status A6: #e16745 — Warnings
- Data Sequential D5: #e7a33e — Charts
- Checked Offset: #13a05f — Checkbox active
- Text Highlight: #fde2bc — Highlighted text
## Typography
Font family: -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu, Oxygen, Oxygen Sans, Cantarell, Droid Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Lucida Grande, Helvetica, Arial
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 48px | 400 | 1.25 | Hero titles |
| H1-alt | 32px | 400 | 1.25 | Page titles |
| H1-sm | 20px | 400 | 1.50 | Section headers |
| Body-lg | 20px | 400 | 1.50 | Large text |
| Body | 16px | 400 | 1.50 | Main copy |
| Body-bold | 16px | 600 | 1.50 | Emphasis text |
| Body-sm | 14px | 400 | 1.50 | Secondary copy |
| Body-sm-bold | 14px | 600 | 1.50 | Labels |
| Body-xs | 12px | 400 | 1.25 | Captions |
| Body-xs-bold | 12px | 600 | 1.50 | Small labels |
## Spacing & Grid
Base: 8px grid. Scale: 1px, 4px, 5px, 7px, 8px, 12px, 15px, 16px, 24px, 32px, 48px, 60px, 64px, 185px.
Use multiples for all paddings and margins.
## Border Radius
- sm: 8px — cards, dropdowns
- lg: 24px — pill buttons
- xl: 25px — special CTAs
- full: 50% — avatars
## Shadows & Depth
- Outline dark: rgba(0,0,0,0.75) 0px 0px 0px 1px
- Outline transparent: rgba(0,0,0,0) 0px 0px 0px 1px
- Outline blue: rgb(10,102,194) 0px 0px 0px 1px
- md: rgba(0,0,0,0.3) 0px 4px 12px 0px
## Component Specifications
### Primary Button
Default:
```css
background-color: #0a66c2;
color: #ffffff;
padding: 12px 24px;
border-radius: 24px;
border: none;
font-weight: 600;
font-size: 16px;
box-shadow: rgba(0,0,0,0) 0px 0px 0px 1px;
```
Hover: darken blue slightly.
Focus: outline 2px solid #0a66c2.
Disabled: opacity 0.5.
### Secondary (Ghost) Button
```css
background-color: transparent;
color: rgba(0,0,0,0.75);
padding: 7px 16px;
border-radius: 24px;
border: 1px solid transparent;
box-shadow: rgba(0,0,0,0.75) 0px 0px 0px 1px;
font-weight: 600;
font-size: 14px;
```
### Dark Button
```css
background-color: rgba(0,0,0,0.75);
color: #ffffff;
padding: 8px 12px;
border-radius: 24px;
font-weight: 400;
font-size: 13.3333px;
```
### Dropdown Button
```css
background-color: #ffffff;
color: rgba(0,0,0,0.75);
padding: 16px 12px 16px 16px;
border-radius: 8px;
border: 1px solid rgba(0,0,0,0.08);
font-weight: 600;
font-size: 16px;
```
## Layout & Responsive Rules
- Max content width: fluid, align to 8px grid.
- Page padding: 16px mobile, 24px desktop.
- Grid gap: multiples of 8px.
## Interaction Rules
- Transition timing: 150ms ease for hover/focus changes.
- Focus indicators: 2px solid primary blue.
- Loading states: fade opacity to 0.5.
## DO List
- Use only colors from the palette.
- Maintain 8px grid spacing.
- Use system font stack for all text.
- Keep primary blue for interactive elements.
- Use correct radius per component.
## DON'T List
- Don't invent new blues.
- Don't mix sharp and rounded corners.
- Don't use heavy shadows.
- Don't apply underline to links unless specified.
## Code Examples
Primary button (Tailwind):
```html
<button class="bg-[#0a66c2] text-white px-6 py-3 rounded-[24px] font-semibold text-[16px]">Connect</button>
```
Ghost button:
```html
<button class="bg-transparent text-black/75 px-4 py-2 rounded-[24px] border border-transparent shadow-[0_0_0_1px_rgba(0,0,0,0.75)] font-semibold text-[14px]">Show more</button>
```
Card container:
```html
<div class="bg-white rounded-[8px] p-4 border border-black/8">Card content here</div>
```9. Summary
TL;DR — LinkedIn’s design system is professional, minimal, and tightly controlled. Blue (#0a66c2) is sacred. Everything sits on an 8px grid. System fonts keep it familiar. Shadows are rare — borders handle separation.
Brand Keywords:
- trust-driven
- corporate-minimal
- grid-precise
- blue-centric
- functional-ui