LinkedIn

Overview

LinkedIn is the world's professional network, built on a foundation of trust, clarity, and accessibility. The design system reflects a 'Professional Minimalism' aesthetic—clean, purposeful, and optimized for serious work. The interface prioritizes legibility and directness: every element serves a function, every color choice signals intent. The brand personality is confident yet approachable, authoritative without being cold. Voice: direct, respectful, solution-focused. Example: 'Your next opportunity is waiting—explore roles that match your skills and ambitions.'

Colors

LinkedIn's color palette centers on a professional blue (#0a66c2) as the primary accent, used exclusively for calls-to-action, navigation highlights, and interactive states. This blue conveys trust, professionalism, and forward momentum—the emotional core of career advancement. Secondary blues (#0073b1, #006097, #004b7c) form a tonal hierarchy for hover, active, and visited link states, creating a clear interaction ladder without introducing competing hues. The surface stack uses near-white (#ffffff, #f3f2ef, #ececea) to maintain maximum contrast with body text (rgba(0, 0, 0, 0.9)), ensuring WCAG AAA compliance across all text sizes. Supporting neutrals (#56687a for secondary text, #8a8a8a for outlines) provide visual hierarchy without distraction. Error red (#d11124) is reserved for destr

Typography

The typography system uses a single sans-serif family (system stack: -apple-system, Segoe UI, Roboto) across all scales, prioritizing consistency and performance. Display (60px, fontWeight 400) anchors hero sections with generous line-height (68px) for breathing room. Headline-lg (48px) and headline-md (32px) establish section hierarchy with progressively tighter line-heights (56px, 40px). Body text (16px, fontWeight 400, lineHeight 24px) is the workhorse, optimized for readability at arm's length on desktop and mobile. Labels (14px, fontWeight 600, letterSpacing 0.01em) and small labels (12px, fontWeight 600, letterSpacing 0.02em) provide compact, scannable metadata. All interactive text (buttons, links) uses fontWeight 600 to signal clickability. Apply text-shadow: 0 1px 2px rgba(0, 0, 0

Layout

The layout uses a 12-column grid with a max-width of 1280px, maintaining a fluid-to-fixed breakpoint strategy. On desktop, content spans 8–10 columns with 1–2 columns of margin on each side; on tablet (976px), content expands to 10 columns; on mobile, full-width with 24px gutter (md spacing) on left and right. Section separation uses lg spacing (40px) vertically to create breathing room between content blocks. The hero section uses 64px top padding (xl spacing) and 40px bottom padding (lg spacing) to frame the primary CTA and headline. Cards and containers use md spacing (24px) for internal padding, sm spacing (12px) for compact lists. Container max-width is enforced at 1280px to prevent line-length bloat on ultra-wide screens. Horizontal rhythm is maintained with 24px gutters between grid

Elevation & Depth

Depth in LinkedIn's design is achieved through subtle shadows and border treatments rather than dramatic layering. Level 1 (Base): no shadow, 1px solid border at rgba(0, 0, 0, 0.1) for card boundaries. Level 2 (Elevated): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used on hover states and modals. Level 3 (Floating/Overlay): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), reserved for dropdowns, tooltips, and high-priority modals. All shadows use a 15–20% black opacity to maintain contrast against white surfaces. Borders are preferred over shadows for lightweight cards (1px solid #c5c5c5) to keep t

Shapes

LinkedIn employs a 'Functional Geometry' philosophy: rounded corners are used strategically to signal interactivity and reduce visual harshness. Buttons use full-rounded (border-radius: 9999px) to create a pill shape, making them instantly recognizable as clickable. Cards and containers use lg radius (1rem / 16px) for a modern, approachable feel without excessive softness. Input fields use DEFAULT radius (0.5rem / 8px) for a compact, business-like appearance. Badges and small components use full-rounded (9999px) to emphasize their secondary role. Dividers and structural elements (hr, borders)

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use backgroundColor: #0a66c2, textColor: #ffffff, padding: 12px 24px, height: 44px, border-radius: 9999px, fontWeight: 600. Hover state transitions to #004182 with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) over 150ms (cubic-bezier(0.4, 0, 0.2, 1)). Active state uses #004b7c. Secondary buttons mirror primary but use transparent backgroundColor, 2px solid border in primary blue, and textColor: #0a66c2. On hover, the background fills with primary-container (#d6e4f5) while maintaining the border. Tertiary buttons use a 1px outline-variant border, transparent background, and on-surface-variant text; hover fills with surface-container-high. All buttons support disabled state: opacity 0.5, cursor: not-allowed, no h

Do's and Don'ts

**Do**

• Do use primary blue (#0a66c2) exclusively for CTAs, links, and focus states—it's the brand's signal for 'click here' and must remain unambiguous.
• Do maintain 24px gutters (md spacing) on mobile and tablet to ensure comfortable touch targets (minimum 44px height) and readable line lengths.
• Do apply fontWeight: 600 to all interactive text (buttons, links, labels) to create visual distinction from body text (fontWeight: 400).
• Do use full-rounded buttons (border-radius: 9999px) for primary actions and pill-shaped badges to signal affordance instantly.
• Do test all text at 12px and below with subtle text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) to prevent anti-aliasing blur on light backgrounds.

**Don't**

• Don't introduce new accent colors—LinkedIn's visual identity depends on the blue family (#0a66c2, #0073b1, #006097, #004b7c) remaining the sole interactive signal.
• Don't use shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12)—excessive depth dilutes the clean, professional aesthetic.
• Don't set line-height below 1.4 for body text (16px); LinkedIn's audience reads on screens for extended periods and needs breathing room.
• Don't mix serif and sans-serif typefaces—the system uses a single sans-serif stack (-apple-system, Segoe UI, Roboto) for consistency and performance.
• Don't use color alone to communicate state (e.g., red for error)—always pair with an icon, border, or text label for accessibility and clarity.