W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
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.
1 palette 3 fonts 0 assets 10 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/linkedin/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/linkedin/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Source Sans 3 ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by LinkedIn
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
A clear hierarchy in LinkedIn's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
LinkedIn
[email protected]font · heading
Source Sans 3
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Source Sans 3
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ linkedin-blue #0A66C2 accent-hover
→ linkedin-blue-dark #004182 background-dark
→ linkedin-canvas-dark #1B1F23 background-light
→ linkedin-white #FFFFFF divider
→ linkedin-divider #E0DFDC error
→ linkedin-warm-orange #E68523 identity
→ linkedin-blue #0A66C2 on-identity
→ linkedin-white #FFFFFF primary
→ linkedin-blue #0A66C2 primary-hover
→ linkedin-blue-dark #004182 success
→ linkedin-green #057642 surface-dark
→ linkedin-surface-dark #2C3033 surface-light
→ linkedin-near-white #F4F2EE text-primary-dark
→ linkedin-white #FFFFFF text-primary-light
→ linkedin-black #000000E6 text-secondary-light
→ linkedin-text-secondary #00000099 warning
→ linkedin-warm-orange #E68523 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Source Sans 3 prose
→ body Source Sans 3 Palette mode mappings (from linkedin)
Light mode (14 roles)
accent
→ linkedin-blue accent-hover
→ linkedin-blue-dark background
→ linkedin-white error
→ linkedin-warm-orange primary
→ linkedin-blue primary-hover
→ linkedin-blue-dark success
→ linkedin-green surface
→ linkedin-white surface-elevated
→ linkedin-near-white text-primary
→ linkedin-black text-secondary
→ linkedin-text-secondary text-tertiary
→ linkedin-text-secondary warning
→ linkedin-warm-orange warning-hover
→ linkedin-warm-orange Dark mode (14 roles)
accent
→ linkedin-blue-light accent-hover
→ linkedin-blue background
→ linkedin-canvas-dark error
→ linkedin-warm-orange primary
→ linkedin-blue-light primary-hover
→ linkedin-blue success
→ linkedin-green surface
→ linkedin-surface-dark surface-elevated
→ linkedin-surface-dark text-primary
→ linkedin-white text-secondary
→ linkedin-divider text-tertiary
→ linkedin-divider warning
→ linkedin-warm-orange warning-hover
→ linkedin-warm-orange Rules (10 typed constraints)
error · 8 rules
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 rule
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 rule
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.