# LinkedIn

> `linkedin@1.0.0`

LinkedIn is the global professional-networking platform, a Microsoft subsidiary since 2016. The brand voice is professional, optimistic, and human — "connect the world's professionals to make them more productive and successful." Visually, LinkedIn is anchored on LinkedIn Blue (#0A66C2) — the saturated mid-blue introduced with the 2019 brand refresh (darkened from the original #0077B5 to clear WCAG AA contrast on white at body size). The identity sits on a warm, light-first canvas with Source Sans serving as the open-source proxy for LinkedIn's in-house humanist sans.


**Tags:** `social`, `professional`, `linkedin`, `blue`, `corporate`, `light-first`, `microsoft`

## Atoms

### Palette

**LinkedIn** · `linkedin@1.0.0` · Proprietary — All Rights Reserved

> LinkedIn corporate palette, anchored on LinkedIn Blue (#0A66C2) — the saturated mid-blue introduced with the 2019 brand refresh and used across the LinkedIn product, marketing materials, and the in-bug wordmark. The palette is light-first: the canonical LinkedIn surface is white with the blue used as the primary identity color and on key interactive surfaces. A small set of supporting accents (warm orange, green for status, near-black for headlines) appears in LinkedIn's published brand guidance. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Source Sans 3** `(source-sans-3@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Source Sans 3** `(source-sans-3@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `linkedin-blue` | LinkedIn Blue | `#0A66C2` |
| `linkedin-blue-dark` | LinkedIn Blue Dark | `#004182` |
| `linkedin-blue-light` | LinkedIn Blue Light | `#378FE9` |
| `linkedin-white` | LinkedIn White | `#FFFFFF` |
| `linkedin-near-white` | LinkedIn Near-White | `#F4F2EE` |
| `linkedin-black` | LinkedIn Black | `#000000E6` |
| `linkedin-black-solid` | LinkedIn Black Solid | `#000000` |
| `linkedin-text-secondary` | LinkedIn Text Secondary | `#00000099` |
| `linkedin-divider` | LinkedIn Divider | `#E0DFDC` |
| `linkedin-warm-orange` | LinkedIn Warm Orange | `#E68523` |
| `linkedin-green` | LinkedIn Green | `#057642` |
| `linkedin-canvas-dark` | LinkedIn Canvas Dark | `#1B1F23` |
| `linkedin-surface-dark` | LinkedIn Surface Dark | `#2C3033` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `linkedin-white` | `#FFFFFF` |
| `surface` | `linkedin-white` | `#FFFFFF` |
| `surface-elevated` | `linkedin-near-white` | `#F4F2EE` |
| `text-primary` | `linkedin-black` | `#000000E6` |
| `text-secondary` | `linkedin-text-secondary` | `#00000099` |
| `text-tertiary` | `linkedin-text-secondary` | `#00000099` |
| `primary` | `linkedin-blue` | `#0A66C2` |
| `primary-hover` | `linkedin-blue-dark` | `#004182` |
| `accent` | `linkedin-blue` | `#0A66C2` |
| `accent-hover` | `linkedin-blue-dark` | `#004182` |
| `warning` | `linkedin-warm-orange` | `#E68523` |
| `warning-hover` | `linkedin-warm-orange` | `#E68523` |
| `error` | `linkedin-warm-orange` | `#E68523` |
| `success` | `linkedin-green` | `#057642` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `linkedin-canvas-dark` | `#1B1F23` |
| `surface` | `linkedin-surface-dark` | `#2C3033` |
| `surface-elevated` | `linkedin-surface-dark` | `#2C3033` |
| `text-primary` | `linkedin-white` | `#FFFFFF` |
| `text-secondary` | `linkedin-divider` | `#E0DFDC` |
| `text-tertiary` | `linkedin-divider` | `#E0DFDC` |
| `primary` | `linkedin-blue-light` | `#378FE9` |
| `primary-hover` | `linkedin-blue` | `#0A66C2` |
| `accent` | `linkedin-blue-light` | `#378FE9` |
| `accent-hover` | `linkedin-blue` | `#0A66C2` |
| `warning` | `linkedin-warm-orange` | `#E68523` |
| `warning-hover` | `linkedin-warm-orange` | `#E68523` |
| `error` | `linkedin-warm-orange` | `#E68523` |
| `success` | `linkedin-green` | `#057642` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `linkedin-blue` | `#0A66C2` |
| `on-identity` | `linkedin-white` | `#FFFFFF` |
| `primary` | `linkedin-blue` | `#0A66C2` |
| `primary-hover` | `linkedin-blue-dark` | `#004182` |
| `accent` | `linkedin-blue` | `#0A66C2` |
| `accent-hover` | `linkedin-blue-dark` | `#004182` |
| `success` | `linkedin-green` | `#057642` |
| `warning` | `linkedin-warm-orange` | `#E68523` |
| `error` | `linkedin-warm-orange` | `#E68523` |
| `background-light` | `linkedin-white` | `#FFFFFF` |
| `background-dark` | `linkedin-canvas-dark` | `#1B1F23` |
| `surface-light` | `linkedin-near-white` | `#F4F2EE` |
| `surface-dark` | `linkedin-surface-dark` | `#2C3033` |
| `text-primary-light` | `linkedin-black` | `#000000E6` |
| `text-primary-dark` | `linkedin-white` | `#FFFFFF` |
| `text-secondary-light` | `linkedin-text-secondary` | `#00000099` |
| `divider` | `linkedin-divider` | `#E0DFDC` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (8)

#### `colorChoice` → `logo.mark`

- **allowed:** linkedin-blue, linkedin-blue-dark, linkedin-white, linkedin-black-solid
- **forbidden:** any-non-brand-color, linkedin-warm-orange, linkedin-green

> The LinkedIn in-bug renders in LinkedIn Blue, white (on dark surfaces), or black (in monochrome contexts). The supporting accents (warm orange, green) are reserved for product status affordances and never recolor the mark itself. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, placed-without-clearspace, cropped

> LinkedIn's brand guidance prescribes the in-bug only in approved variants with adequate clearspace and forbids stretching, rotating, or recoloring the mark. The lockup with the "Linked" wordmark must respect the published proportions. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast minimum for body text. LinkedIn Black (rgba black at 90% on white) clears AA comfortably; the darkened 2019 LinkedIn Blue also clears AA on white at body size, which was the explicit motivation for the refresh. 

#### `contrastRatio` → `roles.colors.primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> LinkedIn Blue (#0A66C2) on white reads at ~4.6:1 — clearing WCAG AA for body text. The 2019 refresh darkened the previous LinkedIn Blue (#0077B5, ~3.8:1) specifically to clear this threshold; the rule encodes that floor. 

#### `variantSelection` → `logo`

- **use:** `in-bug-white`
- **when:** `backgroundColorScheme="dark"`

> On dark surfaces, use the white in-bug variant for legibility. Do not place the LinkedIn Blue in-bug on dark canvases where it loses contrast against the background. 

#### `variantSelection` → `logo`

- **use:** `in-bug-blue`
- **when:** `backgroundColorScheme="light"`

> On light surfaces, the in-bug renders in LinkedIn Blue — the canonical brand application across linkedin.com and marketing. 

#### `contextRestriction` → `roles.colors.identity`

- **forbiddenContexts:** product-of-competitor, merchandise, endorsement-implication

> LinkedIn's brand-use guidance restricts use of the in-bug and wordmark in ways that imply affiliation, on competing-product surfaces, or on third-party merchandise without explicit license. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. LinkedIn's 2019 brand refresh was driven specifically by AA contrast considerations; the threshold is non-negotiable on LinkedIn-skinned surfaces. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 400, 600, 700

> LinkedIn's display typography sits in the Regular (400), Semi-Bold (600), and Bold (700) band. Lighter cuts compromise the institutional, professional voice the platform's marketing depends on. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.identity`

- **pairsWith:** linkedin-white, linkedin-near-white, linkedin-black-solid
- **doesNotPairWith:** linkedin-warm-orange

> LinkedIn Blue + Warm Orange creates a saturated complementary tension that fights LinkedIn's calm professional voice. The Blue pairs cleanly with the warm-white canvas and the near-black text tone; reserve Warm Orange for editorial accents on a neutral canvas. 

## Provenance

- **Source:** <https://brand.linkedin.com/>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** LinkedIn and the LinkedIn "in" mark are registered trademarks of LinkedIn Corporation (a Microsoft subsidiary). The primary brand color (#0A66C2) is documented in LinkedIn's published brand guidelines at brand.linkedin.com and independently verified via the simple-icons brand database, which cites linkedin.com as the source. LinkedIn's published typography stack uses a proprietary humanist sans derived from Source Sans; brand-atoms references Source Sans 3 (already in the catalog) as the open-source equivalent. 
- **Imported:** `2026-05-18`
- **Notes:** LinkedIn's identity is light-first: the canonical product surface is white with LinkedIn Blue on the in-bug, primary CTAs, and link color. The dark-mode role mapping is an authored inversion supporting LinkedIn's user-selectable product dark theme. The 2019 brand refresh darkened LinkedIn Blue from #0077B5 to #0A66C2 specifically to clear WCAG AA at body-text size. 

---

*Generated by the brand-atoms converter. Source: `linkedin@1.0.0` from the encyclopedia.*