What is LinkedIn's primary brand color?

LinkedIn's brand voltage is the corporate blue at #0a66c2 — a saturated mid-cobalt that the brand has used since the 2003 launch with minimal drift. On the captured marketing page it carries three jobs: the LinkedIn wordmark in the top-left, the 'Join now' primary CTA pill in the hero, and the inline 'See more' anchor links that appear in every content-discovery panel. The blue appears as text 10 times, as background 3 times, as border 10 times, and as shadow 4 times. Every other interactive element on the page is either a neutral pill chip with a near-black hairline border or plain weight-600 nav-link text. The rust-red #b24020 appears once on a single promotional panel ('Get the right people drawn to you') — the only chromatic surprise on the page.

What typeface does LinkedIn use, and what should I use as a substitute?

LinkedIn renders in pure system fonts. The stack is -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Fira Sans, Ubuntu, Oxygen, Cantarell, Droid Sans, Helvetica, Arial, sans-serif — which means San Francisco displays on macOS, Segoe UI Variable on Windows, and Roboto on Android. There is no custom webfont anywhere on the captured page. Display tier sits at 48px in weight 400 for the hero h1; section headings at 32px in weight 400; body copy at 20px in weight 400; navigation and CTA labels at 16px in weight 600; small labels at 14px in weight 600. The closest reproduction is to use the same system-sans stack in your own project — LinkedIn's design intentionally inherits whatever the OS ships, which keeps the page feeling native to every viewer.

Why does LinkedIn use stark white instead of a tinted canvas?

The page floor is pure white, and the entire marketing surface keeps it that way except for two bands: a warm beige zone marking the 'New to LinkedIn?' / sign-in area near the page midpoint, and a single rust-red promotional panel for a recruiter-targeted feature. The stark white reads as 'office document' rather than 'consumer app' — it is the canvas of a CV, a job application, a printed memo. Microsoft acquired LinkedIn in 2016 but did not push the page toward Microsoft's signature gradient-blue surfaces; LinkedIn's marketing surface stays deliberately monochrome white because the content panels below the hero need a neutral floor that doesn't compete with the pill chips' near-black borders.

What is LinkedIn's corner-radius philosophy?

LinkedIn's radius scale is essentially one value: 24px. Every pill chip, every CTA button, every interactive container rounds to 24px on the captured page — 46 occurrences out of 49 total rounded elements. The remaining three are a 25px radius (likely a one-off content card), an 8px radius on a code-style element, and a single 50% radius on an avatar. There is no 4px, 12px, or 16px tier anywhere in the captured page. The pill-everywhere discipline matches the brand's positioning as a directory of named entities — every job title, every company, every skill is a pill chip, and pills imply 'tappable, swappable, taggable.' The 24px radius is generous enough to read soft but tight enough to fit dense lists of chips without breaking the row rhythm.

Can I use this DESIGN.md to build my own career-network marketing site?

Yes — feed this file to Claude, Cursor, or any AI tool that reads structured design tokens and the agent will reproduce LinkedIn's specific moves: corporate-blue voltage reserved for brand wordmark + primary CTA + inline link, pure system-sans stack with no custom webfont, 24px pill radius across every interactive surface, and content-discovery panels as the dominant below-hero block rather than feature screenshots. You can also reference the tokens directly. One caveat: the 'content-as-marketing' move only works if your product is itself a content directory — for most SaaS, listing real product content on the marketing surface would feel like a chip dump rather than a discovery affordance.

LinkedIn Design System

LinkedIn's marketing system pairs near-black ink on white with the corporate blue at #0a66c2 reserved for primary CTAs.

About LinkedIn DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source linkedin.com

Social & Community

LinkedIn.com logged-out is the world's largest career-directory surface disguised as a sign-up page. The hero headline reads as a welcome to the member community — 48px, weight 400, set in a system-sans stack on stark white, with the LinkedIn wordmark in the corporate blue at the top-left and a single blue "Join now" pill anchoring the call to action. Below the hero, eight content-discovery panels stack vertically: an "Explore top LinkedIn content" row, a job-and-internship finder row, a software-discovery row, a games row, each one rendered as a horizontal row of pill-shaped chips at 24px radius. The page is content surfacing, not feature marketing. Where Twitter's logged-out page paints a vibrant gradient and where Facebook hides everything behind a login wall, LinkedIn does the inverse — it exposes the entire content graph as the marketing argument.

The chromatic palette is restrained to a degree that is unusual at this scale. There is exactly one brand voltage — the corporate blue at `{colors.primary}` (#0a66c2) — and it carries three jobs: the "Join now" primary CTA pill, the LinkedIn wordmark itself, and the inline anchor links that surface "See more" affordances. Every other interactive element on the page is either a pill chip in soft white with a near-black hairline border, or plain text. The remaining structural tones are near-black ink for body and headline copy, a soft mid-gray for secondary metadata, and a warm beige band that marks the "sign-in / new-to-LinkedIn?" zone in the middle of the page. There is also a deep rust-red color reserved for a single "Get the right people drawn to you" promotional panel — the only chromatic surprise on the page.

Typography is pure system-sans — no webfont, no custom typeface. The stack reads `-apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue"`, which means San Francisco renders on macOS, Segoe UI on Windows, and Roboto on Android. Display hits at 48px in weight 400 for the hero h1 and 32px in weight 400 for section h2; navigation links and primary CTAs sit at weight 600. There is no separate display family. Feed this DESIGN.md to an AI coding tool and it reproduces LinkedIn's specific moves: corporate-blue voltage reserved for brand + primary CTA + inline link, system sans across every tier, 24px pill chrome everywhere, and content panels as the dominant marketing block rather than feature screenshots.

What makes it distinct

Single corporate-blue voltagethe LinkedIn blue carries every primary CTA, the wordmark, and the inline 'See more' links; every other interactive element is neutral pill or text
System-sans-onlythe typography stack is pure system fonts (San Francisco, Segoe UI, Roboto) with zero custom webfont; LinkedIn deliberately renders in whatever the OS ships
24px pill radius everywhereevery chip, every button, every pill container rounds to 24px; the system has essentially one rounding value
Content-as-marketingthe hero is followed by eight chip-grid panels listing real content discovery (top software, jobs by region, articles), not feature screenshots
Weight-400 displaythe 48px hero h1 sits at weight 400 in a system sans, paired with weight-600 navigation links as the only emphasis tier

Live at linkedin.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

linkedin.com

Explore LinkedIn

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

LinkedIn design system FAQ

Common questions about LinkedIn's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

LinkedIn — official site

LinkedIn's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.