LinkedIn

Overview

LinkedIn is the world's largest professional network, serving 1 billion members who seek to manage their professional identity, build meaningful networks, and access career opportunities. The design system embodies a philosophy of **Professional Clarity**—a trust-forward aesthetic that prioritizes accessibility, legibility, and purposeful interaction over decoration. The visual language is rooted in clean typography, a restrained color palette anchored by LinkedIn's signature blue (#0a66c2), and generous whitespace that respects the user's cognitive load. Every interface element is designed to feel authoritative yet approachable, reflecting the brand's role as a neutral, professional intermediary.

The brand voice is direct, respectful, and action-oriented. LinkedIn speaks to professionals with clarity and without hyperbole—sentences are concise, vocabulary is precise, and every call-to-action is unambiguous. The tone avoids breathless enthusiasm in favor of quiet confidence. Example: "Continue with Google to join 1 billion professionals managing their careers" rather than "Unlock your potential with LinkedIn!" The design system reinforces this voice through typography choices (generous line-height for readability: 1.5 on body text), color restraint (primary blue used only for actionable elements, not decoration), and interaction patterns that feel responsive and intentional.

Colors

LinkedIn's color system is built on a foundation of trust and professional authority. **Primary (#0a66c2)** is the brand's signature accent, reserved exclusively for call-to-action buttons, key links, and interactive focus states. It appears in the 'Join now' and 'Sign in' buttons, the Google login CTA, and all primary navigation interactions. The primary container (#d4e4f7) provides a subtle background for supporting content, while the inverse primary (#5eb3ff) ensures sufficient contrast in dark-mode contexts (when implemented). **Secondary (#0073b1)** and **Tertiary (#006097)** are darker blue variants used for hover states (secondary at -hover, tertiary at -active) and secondary navigation, creating a visual hierarchy of interaction depth without introducing competing accent colors. Th

Typography

The typography system uses a single font family—the system stack (-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, etc.)—to ensure consistent rendering across devices and eliminate web font loading delays, a critical consideration for a global professional platform. The hierarchy is built on weight and size rather than typeface changes: display (56px, 700 weight) for hero headlines like 'Welcome to your professional community'; headline-lg (48px, 400 weight) for major section breaks; headline-md (32px, 400 weight) for subsections; title-lg (20px, 600 weight) for card titles and form labels; body-lg (18px, 400 weight) for long-form content; body-md (16px, 400 weight) for standard UI text; label-md (14px, 600 weight) for buttons and badges; and label-sm (12px, 500 weight) fo

Layout

LinkedIn's layout uses a 12-column grid system with a max-width of 1280px (container-max), ensuring content remains readable on ultra-wide displays while maintaining focus on desktop and tablet. The gutter is 24px, applied consistently between columns and as the outer margin on smaller viewports. Page rhythm is established through the spacing scale: lg (40px) separates major sections (e.g., hero from 'Explore top LinkedIn content'), md (24px) separates cards and form groups, sm (12px) separates inline elements, and xs (4px) is reserved for micro-interactions (icon-to-text spacing). The hero section uses a two-column layout: the left column (40% width) contains the headline and CTAs, while the right column (60% width) displays the illustration, creating visual balance without symmetry. Card

Elevation & Depth

LinkedIn's elevation system is minimal and purposeful, using soft shadows and subtle background shifts rather than dramatic depth effects. **Level 1 (Base)**: The page background is pure white (#ffffff) with no shadow. **Level 2 (Cards & Containers)**: Cards use a 1px border in outline-variant (#c4c7c8) and a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to separate them from the background. On hover, the shadow increases to 0 4px 12px rgba(0, 0, 0, 0.08) and the background shifts to surface-container-low (#f5f5f5), signaling interactivity without jarring movement. **Level 3 (Modals & Overlays)*

Shapes

LinkedIn's shape philosophy is **Architectural Minimalism**—rounded corners are used sparingly and purposefully to soften hard edges while maintaining a sense of structure and professionalism. **Buttons** use full rounding (border-radius: 9999px, or {rounded.full}) to create a pill shape that feels modern and approachable; this is applied to primary CTAs ('Join now', 'Sign in') and secondary buttons ('Sign in with email'). **Cards and containers** use lg rounding (1rem / 16px) to define distinct content areas without appearing playful or casual. **Input fields** use DEFAULT rounding (0.5rem /

Components

Action Elements **Button-Primary** is the primary call-to-action, used for high-intent actions like 'Join now' and 'Continue with Google'. It uses background-color: #0a66c2, text-color: #ffffff, border-radius: 9999px, padding: 12px 24px, and height: 40px. The label uses label-md typography (14px, 600 weight). On hover, the background shifts to #004182 (button-primary-hover) with no change to text color, maintaining contrast. On active/pressed, the background darkens further to #004b7c (button-primary-active). All state transitions use a 150ms ease-out timing function. **Button-Secondary** is used for alternative actions like 'Sign in with email'; it uses a transparent background, a 2px border in primary (#0a66c2), and primary text color. On hover, the background fills with primary-cont

Do's and Don'ts

**Do**

• Do use primary (#0a66c2) exclusively for call-to-action buttons, key links, and interactive focus states—never for decorative elements or backgrounds.
• Do maintain a minimum line-height of 1.4 on all text to ensure readability across international character sets and small viewports.
• Do apply consistent 24px gutters and 40px section spacing to create visual rhythm and reduce cognitive load.
• Do use soft shadows (0 3px 8px rgba(0, 0, 0, 0.15)) on cards to define depth without creating harsh visual separation.
• Do reserve full rounding (9999px) for buttons and chips; use lg rounding (1rem) for cards and md rounding (0.75rem) for inputs.
• Do test all interactive elements with keyboard navigation; focus states must use a 3px inset shadow in primary color.
• Do use the system font stack (-apple-system, system-ui, etc.) to ensure consistent rendering and fast load times across devices.

**Don't**

• Don't use secondary or tertiary colors as primary accents; reserve them for hover and active states only.
• Don't add decorative gradients, patterns, or textures to the background; whitespace is the primary design element.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) on any element; excessive depth undermines the clean aesthetic.
• Don't use letter-spacing greater than 0.1em on body text; it reduces readability and feels unprofessional.
• Don't mix rounded and sharp corners on related elements (e.g., a rounded button next to a sharp input); maintain consistency within component families.
• Don't apply color to text smaller than 12px without sufficient contrast; use label-sm (12px, 500 weight) as the minimum for colored text.
• Don't animate transitions faster than 150ms or slower than 300ms; the sweet spot is 150-200ms for UI interactions.