LinkedIn

# LinkedIn Design System

## Visual Theme & Atmosphere
Professional, trustworthy, content-rich. The warm gray background (#F3F2EF) distinguishes it from pure white sites. LinkedIn Blue (#0A66C2) is reserved for CTAs and active states. Information hierarchy is paramount — every pixel serves professional networking.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #0A66C2 | CTAs, links, brand |
| Background | #F3F2EF | Main canvas (warm gray) |
| Surface | #FFFFFF | Cards, content areas |
| Text | #000000 | Primary text |
| Muted | #666666 | Secondary text |
| Border | #E0E0E0 | Dividers |

## Typography Rules
- **Font**: -apple-system, system-ui
- **Base Size**: 16px
- **H1**: 2rem / weight 700
- **H2**: 1.5rem / weight 600
- **Body**: 1rem / weight 400 / line-height 1.5

## Component Stylings
- **Buttons**: Blue primary #0A66C2, 24px radius, 36px height
- **Cards**: White, 8px radius, 1px border
- **Feed Items**: Card-based, author header + content + actions
- **Profile Card**: Photo + name + headline, compact

## Layout Principles
- Left sidebar + main feed + right sidebar (3-column desktop)
- Single column mobile
- Consistent 16px spacing
- Card-based content organization