A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
6type steps
3radius steps
8pxspacing base
Linkedin, in one page
LinkedIn's iOS app is a content-first professional newsroom. The canvas is a soft, desaturated cream (#F3F2EF) — intentionally not white, because a pure-white feed on a phone would feel like a word processor. That muted off-white is the most important single color decision in the app: it lets the stack of white (#FFFFFF) post cards float gently above the page, and it keeps the visual temperature warm and paper-like rather than clinical. The reader is looking at a feed of articles, job listings, profile updates — dense information — and the cream ground reduces the eye-strain of hours of scrolling.
The accent is LinkedIn Blue (#0A66C2), which the app applies with monastic restraint. Blue is for verbs and links only — "Connect", "Follow", "Apply", "Message", "See more", hyperlinked hashtags, the underline under @mentions, and the active tab indicator on the bottom nav. Everything else is grayscale. There is no secondary blue for accents, no orange for highlights, no purple for Premium (gold stands in for Premium). The restraint is what makes the blue read as authoritative: when a button is blue, you *act* on it. Green is reserved exclusively for the "Open to Work" ring around an avatar (#057642), and gold (#915907) for the Premium badge and the gold frame around a Premium user's profile photo.
Typography is SF Pro — LinkedIn dropped the older Source Sans Pro webfont in favor of Apple's native system face on iOS, which is faster to render and feels native. Hierarchy is dense and text-first. Feed post names sit at 14pt weight 600, headlines (job title, company) at 12pt weight 400 in gray, post body at 14pt weight 400 with 1.5 line height. There are no hero headlines, no display-size type — LinkedIn is a reading app, and reading needs calm, consistent rhythm. The most expressive type moment is the profile name at 24pt weight 700 above the headline tagline; everywhere else the hierarchy sits in the 12-16pt range with weight variation (400 / 600 / 700) doing the work.
Key Characteristics:
- Desaturated cream canvas (
#F3F2EF) — NOT white — with white post cards floating on top - LinkedIn Blue (
#0A66C2) reserved strictly for links, Connect/Follow buttons, and active states - Professional tone: dense, text-first, information-rich — no decorative illustration
- Feed cards as the core unit — 12pt corner radius, 0pt shadow, just a hairline border
- Avatar rings carry status: green for "Open to Work", gold frame for Premium members
- Six colored custom reaction icons (Like / Celebrate / Support / Love / Insightful / Funny)
- SF Pro at 12-24pt with weight 400 / 600 / 700 — no display type, no flourish
- Dense top nav: profile avatar left, search bar center, messaging top-right
- Bottom tab bar: Home, My Network, Post (+), Notifications, Jobs
- Underline-on-hyperlinks — the old-web convention kept alive as a professional signal
Do's and don'ts
Do
- Use
#F3F2EFcream as the canvas — NOT pure white, the desaturation is signature - Reserve LinkedIn Blue (
#0A66C2) for links, Connect/Follow, active states — it's the verb - Use 90% black (
#000000E6) for body text — softer than pure black - Float white post cards on cream with 8pt gap between — no shadow, canvas separates them
- Underline hyperlinks (@mentions, #hashtags, inline URLs) at 1pt in LinkedIn Blue
- Show connection degree ("• 1st", "• 2nd", "• 3rd+") inline after every name in the feed
- Use the 6-reaction picker for Like long-press — don't collapse to just thumbs-up/heart
- Use SF Pro with weights 400/600/700 — native iOS rendering
- Layer the green Open-to-Work ring or gold Premium frame around avatars as status indicators
- Keep reactions as colored custom icons — not system emoji
Don't
- Don't use pure white
#FFFFFFas the main canvas — it flattens the card structure - Don't add accent colors beyond LinkedIn Blue — the app's restraint is professional signaling
- Don't use decorative illustrations — text + photos + media is the content language
- Don't show a single generic "Like" — always offer the 6 reactions on long-press
- Don't use display-size headlines — 24pt profile name is the upper bound
- Don't round feed cards on iPhone — full-bleed 0pt radius is the phone layout
- Don't use shadows for feed cards — the cream canvas separates them
- Don't show green anywhere except the Open-to-Work ring and "Active now" dot
- Don't mix Premium gold with regular blue CTAs — Premium gets its own gold-accent surface
- Don't animate heavily — LinkedIn's motion language is minimal and functional
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Linkedin design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- The accent is LinkedIn Blue: #0a66c2
- LinkedIn Blue: #0a66c2
- LinkedIn Blue Pressed: #004182
- LinkedIn Blue Subtle: #e7f3ff
- Deep Navy: #00396b
- Canvas Cream: #f3f2ef
- Card Surface: #ffffff
- Elevated Surface: #f9f9f9
- Divider: #e0dfdc
- Divider Subtle: #ededed
Type:
- families: SF Pro, Fallback Stack, SF Mono, SF Pro Display
- scale: 11, 12, 14, 16, 20, 24
- weights: 400, 500, 600, 700
Shape:
- radius: 0, 20, 32
Spacing: 8, 16
Rules:
- Use `#F3F2EF` cream as the canvas — NOT pure white, the desaturation is signature
- Reserve LinkedIn Blue (`#0A66C2`) for links, Connect/Follow, active states — it's the verb
- Use 90% black (`#000000E6`) for body text — softer than pure black
- Float white post cards on cream with 8pt gap between — no shadow, canvas separates them
- Underline hyperlinks (@mentions, #hashtags, inline URLs) at 1pt in LinkedIn Blue
- Show connection degree ("• 1st", "• 2nd", "• 3rd+") inline after every name in the feed
Avoid:
- Don't use pure white `#FFFFFF` as the main canvas — it flattens the card structure
- Don't add accent colors beyond LinkedIn Blue — the app's restraint is professional signaling
- Don't use decorative illustrations — text + photos + media is the content language
- Don't show a single generic "Like" — always offer the 6 reactions on long-press
- Don't use display-size headlines — 24pt profile name is the upper bound
- Don't round feed cards on iPhone — full-bleed 0pt radius is the phone layout
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- LinkedIn Blue (
#0A66C2): Primary CTA, hyperlinks, Connect/Follow buttons, active tab indicator, @mentions. - LinkedIn Blue Pressed (
#004182): Pressed / hovered state for blue buttons and links. - LinkedIn Blue Subtle (
#E7F3FF): Selected background for tabs, hover rows on iPad/desktop parity. - Deep Navy (
#00396B): Section headers on Premium surfaces, Learning subject cards.
Canvas & Surfaces
- Canvas Cream (
#F3F2EF): Primary canvas — the desaturated off-white page background. - Card Surface (
#FFFFFF): Feed post cards, profile cards, message rows — white on cream. - Elevated Surface (
#F9F9F9): Hover rows, nested cards, comment threads. - Divider (
#E0DFDC): Hairline dividers between feed cards, within cards between sections. - Divider Subtle (
#EDEDED): Divider within a card (e.g., between a post and its reactions footer).
Text
- Text Primary (
#000000E6): Primary body text — 90% black, softer than pure#000. - Text Secondary (
#00000099): Headlines, timestamps, metadata — 60% black. - Text Tertiary (
#00000066): Very low-emphasis — dot separators, helper microcopy — 40% black. - Text on Blue (
#FFFFFF): White text on blue CTAs.
Status & Role Accents
- Open to Work Green (
#057642): Ring around avatar when user is #OpenToWork; badge chip fill. - Open to Work Green Dark (
#0B5B4C): Pressed state and darker accent. - Premium Gold (
#915907): Badge color for Premium (the small square "in-" gold icon next to names); 2pt gold frame around Premium users' avatars. - Premium Gold Highlight (
#C37D16): Gold gradient top for the gold avatar frame. - Hiring Purple (
#6A3DAA): "#Hiring" badge ring around recruiters' avatars (rare).
Semantic
- Like Blue (
#0A66C2): Default thumbs-up reaction color. - Celebrate Yellow (
#F5BB00): Celebrate reaction (clapping hands). - Support Lavender (
#B24020): Support reaction (heart + hug) — a warm brownish-red. - Love Red (
#DF704D): Love reaction (heart) — coral, not crimson. - Insightful Yellow (
#E7A33E): Insightful reaction (lightbulb) — amber-yellow. - Funny Cyan (
#00A0DC): Funny reaction (laughing face). - Error Red (
#CC1016): Form errors, failed send. - Success Green (
#0B5B4C): Send-confirmed toast.
Dark Mode
- Dark Canvas (
#1B1F23): Primary dark background — a charcoal not pure black. - Dark Card Surface (
#1D2226): Feed post cards on dark. - Dark Elevated (
#282E32): Hover rows, nested surfaces. - Dark Divider (
#38434F): Hairline dividers. - Dark Text Primary (
#FFFFFFE6): 90% white. - Dark Text Secondary (
#FFFFFF99): 60% white. - Dark Blue Accent (
#70B5F9): Links and CTAs shift to lighter blue for contrast on dark.
Type scaleRead the full spec
Font Family
- Primary (2020+):
SF Pro(Apple system) — San Francisco Text below 20pt, San Francisco Display above 20pt, applied automatically by iOS. - Legacy (web parity):
Source Sans 3(Adobe) — used on linkedin.com and older app surfaces. Fallback only. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Monospace (code snippets in articles):
SF Mono
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Profile Name (Hero) | SF Pro Display | 24pt | 700 | 1.15 | -0.2pt | User profile screen hero name |
| Screen Title | SF Pro Display | 20pt | 700 | 1.2 | -0.2pt | "Messaging", "My Network", "Jobs" |
| Section Header | SF Pro Text | 16pt | 700 | 1.25 | -0.1pt | "People you may know", "Activity" |
| Post Author | SF Pro Text | 14pt | 600 | 1.3 | 0pt | Name at top of feed post |
| Post Headline | SF Pro Text | 12pt | 400 | 1.3 | 0pt | Job title + company, 2-line clamp |
| Post Body | SF Pro Text | 14pt | 400 | 1.5 | 0pt | Main post content |
| Connection Degree | SF Pro Text | 12pt | 400 | 1.2 | 0pt | "1st", "2nd", "3rd+" after name |
| Meta / Timestamp | SF Pro Text | 12pt | 400 | 1.2 | 0pt | "3d •", "1w •", "Edited • Promoted" |
| Button (Primary) | SF Pro Text | 16pt | 600 | 1.0 | 0pt | Blue pill buttons ("Connect", "Follow") |
| Button (Secondary) | SF Pro Text | 14pt | 600 | 1.0 | 0pt | Outline buttons ("Message", "Save") |
| Reaction Count | SF Pro Text | 12pt | 400 | 1.2 | 0pt | "127 reactions" under post |
| Comment Body | SF Pro Text | 14pt | 400 | 1.4 | 0pt | Comment text |
| Tab Label | SF Pro Text | 11pt | 500 | 1.0 | 0.1pt | Bottom tab bar |
| Label (Badge) | SF Pro Text | 11pt | 700 | 1.0 | 0.4pt | "PROMOTED", "FEATURED" small caps |
| Input Placeholder | SF Pro Text | 14pt | 400 | 1.3 | 0pt | Search bar, comment box |
Principles
- SF Pro Dynamic Type is first-class: Body, post titles, and comments respect system sizing; badge labels and timestamps stay fixed.
- Weight concentrated at 400 / 600 / 700: Regular for body, semibold for names/buttons, bold for section headers. No light, no ultra, no black.
- Text-first hierarchy: No display type. The information itself is the hero.
- Hyperlinks underlined: Blue
#0A66C2with a 1pt underline on @mentions, #hashtags, and inline links — an old-web signal of professional tone. - Two-line clamp on headlines: The job-title headline below names caps at two lines with an ellipsis — keeps feed rhythm consistent.
Components and layoutRead the full spec
Buttons
Primary Pill (Connect / Follow / Apply)
- Background:
#0A66C2 - Text:
#FFFFFF - Padding: 8pt vertical, 16pt horizontal
- Corner radius: 500pt (full pill)
- Font: SF Pro Text, 16pt, weight 600
- Pressed: background
#004182, scale 0.98 - Leading SF Symbol:
person.badge.plus(Connect),plus(Follow),paperplane.fill(Apply) — 18pt - Used for: "Connect", "Follow", "Apply", "Accept"
Outline Pill (Message / Pending / Following)
- Background: transparent
- Border: 1pt solid
#0A66C2 - Text:
#0A66C2 - Padding: 8pt vertical, 16pt horizontal
- Corner radius: 500pt
- Font: SF Pro Text, 14pt, weight 600
- Pressed: background
#E7F3FF - Used for: "Message", "Pending", "Following", "Save"
Icon Reaction Button ("Like")
- 44pt hit area
- Default:
thumbsup20pt + label "Like" in 13pt w600#00000099 - Active (liked):
thumbsup.fill+ "Like" text shifts to#0A66C2 - Long-press: expands into the 6-reaction picker menu (see Distinctive Components)
Text Button ("See more", "Show translation")
- Font: SF Pro Text, 14pt, weight 600
- Color:
#00000099 - No underline for UI actions; underline only for hyperlinked content
Send Button (Message composer)
- Circular, 32pt diameter
- Background:
#0A66C2(enabled) /#0000001A(disabled) - Icon:
paperplane.fill16pt white - Pressed: scale 0.94 + soft haptic
Cards & Containers
Feed Post Card The core unit of LinkedIn. A white card floating on the cream canvas.
- Background:
#FFFFFF - Corner radius: 0pt on iPhone (edge-to-edge width with 8pt vertical gap between cards) — OR 8pt radius on iPad/larger widths
- Horizontal margin: 0pt on iPhone (full-width card), 16pt on iPad
- Vertical gap between cards: 8pt (fills with
#F3F2EFcanvas showing through) - Internal padding: 16pt horizontal, 12pt vertical top, 12pt bottom
- Structure (top to bottom): 1. Author row: 56pt circular avatar + name/headline column + ellipsis menu + Follow/Connect button 2. Post body text (14pt w400, "see more" link at clamp) 3. Media (image/video/PDF/article link — full-width, 0pt radius inside card) 4. Reaction count row + comment count (12pt w400
#00000099, leading reaction stack of 3 overlapping icons) 5. 1pt#EDEDEDdivider 6. Action bar: Like | Comment | Repost | Send (equal 4-column split, 44pt tall)
Author Row
- Avatar: 56pt circular, 2pt ring if Open-to-Work (green) or Premium (gold)
- Name: 14pt w600 Text Primary
- Connection degree: "• 1st", "• 2nd" after name at 12pt w400
#00000099 - Headline: 12pt w400
#00000099, 2-line clamp (job title + company) - Timestamp: "3d • 🌐" at 12pt w400 with globe icon for "public"
- Ellipsis menu: top-right, 20pt glyph, 44pt hit
Profile Card
- Top 100pt cover banner image
- Avatar: 128pt circular,
-48ptoffset (overlapping banner), 4pt white ring - Premium: replace 4pt white ring with 4pt gold (
#915907→#C37D16gradient) frame - Open to Work: add 4pt green (
#057642) ring overlaid - Name: 24pt w700 below
- Headline: 16pt w400
#000000E6, unlimited lines - Location + connection count: 14pt w400
#00000099 - Actions row: Connect / Message / More — blue primary + outline secondary
Job Card
- Background:
#FFFFFF, 8pt corner radius, 1pt border#E0DFDC - Logo: 56pt square (company logo), 4pt corner radius
- Title: 16pt w700
#0A66C2(hyperlinked blue) - Company: 14pt w400 Text Primary
- Location: 12pt w400
#00000099 - Salary (when public): 12pt w400
#00000099 - "Easy Apply" badge: 11pt w700
#0A66C2with briefcase icon, or "Apply" outline button
Message Row
- Height: 72pt
- Avatar: 56pt circular leading
- Name + preview: name 14pt w600, preview 13pt w400
#00000099, 2-line clamp - Timestamp trailing: 12pt w400
#00000099 - Unread: bold name + 8pt blue dot leading the row
- Pressed: background
#F9F9F9
Navigation
Bottom Tab Bar
- Height: 56pt + safe area
- Background:
#FFFFFFwith 1pt top border#E0DFDC - Tabs (5): Home, My Network, Post (+), Notifications, Jobs
- Icon size: 24pt
- Active color:
#000000E6with 2pt underline bar#000000E6just below icon - Inactive:
#00000099 - Active "Post" tab is a solid black
+in a circle — distinctive - Labels: SF Pro Text 11pt w500, shown always
- Active tab: filled SF Symbol; inactive: outlined
Top Nav (Home)
- Height: 52pt + safe area
- Profile avatar (28pt circular) top-left — tapping opens drawer
- Search field (centered, full remaining width, 40pt tall pill,
#EDEDEDfill, magnifying glass icon leading, "Search" placeholder) - Messaging icon top-right (24pt) — tapping opens Messaging
Top Nav (Profile / Detail)
- Height: 44pt + safe area
- Back chevron left (24pt)
- Screen title center (16pt w700)
- Trailing action (share / more icon, 24pt)
Input Fields
Search Bar
- Height: 40pt
- Background:
#EDEDED(light mode) /#282E32(dark mode) - Corner radius: 500pt (pill)
- Leading SF Symbol
magnifyingglass18pt#00000099 - Placeholder: "Search", 14pt w400
#00000099 - Focus: background
#FFFFFF+ 1pt#0A66C2border
Comment Composer
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Avatars drop to 48pt in feed; search bar shrinks |
| iPhone 13/14/15 | 390pt | Standard 56pt feed avatars |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav |
| iPhone 15/16 Pro Max | 430pt | Feed media images at 16:9 utilize extra width |
| iPad | 768pt+ | 3-column layout: left sidebar (profile+nav), center feed, right sidebar (news/ads). Feed cards get 8pt radius and 16pt margin |
Dynamic Type
- Post body, comments, body copy: full scale with Dynamic Type
- Post author, headlines: scale to XL
- Timestamps, connection degree, badge labels: FIXED (layout-sensitive)
- Buttons, tab labels: FIXED
Orientation
- iPhone: portrait-locked for Home, Notifications, Messaging
- Profile, articles, job details: rotate to landscape
- Video posts: full rotation
- iPad: free rotation throughout
Touch Targets
- Feed avatar: 56pt — full-row tap for profile
- Reaction icons: 40pt in picker, 44pt hit areas on action bar
- Post ellipsis menu: 44pt hit
- Tab bar icons: 24pt glyph, 44pt effective hit
- Comment send arrow: 32pt circular, 44pt hit
Safe Area Handling
- Top: top nav honors safe area and Dynamic Island
- Bottom: tab bar + home indicator respected; post composer sheet rises above keyboard with safe-area padding
- Sides: 16pt insets on non-feed screens (iPhone feed is full-bleed)
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-linkedin {--page-bg: #f3f2ef;
--page-bg-gradient: none;
--text-color: #000000;
--heading-color: #000000;
--link-color: #004182;
--link-hover-color: #00274f;
--border-color: #c7c6c4;
--card-bg: #f3f2ef;
--card-shadow: 0 1px 2px rgba(0,0,0,0.06);
--card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
--header-bg: #000000;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #f3f2ef;
--footer-text-color: #555554;
--button-bg: #004182;
--button-text-color: #ffffff;
--button-hover-bg: #00274f;
--button-border: none;
--button-border-radius: 20px;
--button-secondary-bg: #e4e3e1;
--button-secondary-text-color: #000000;
--button-secondary-hover-bg: #d6d5d2;
--button-secondary-border: 1px solid #c7c6c4;
--prompt-bg: #e7e6e3;
--prompt-text-color: #000000;
--base-font: var(--font-helvetica);
--heading-font: var(--font-mono);
--card-border-radius: 20px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- plenty of fish 76.2%
- reddit 75.3%
- happn 75.2%
- grammarly 74.6%
- nikoand 74.4%
Where this came from
- Source document
ios/design-md/social/linkedin/DESIGN.md· 26.9 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.