# LinkedIn: brand book and build spec

LinkedIn's public brand guidelines are a trademark rulebook: two logos, clear space, 21px minimum, three colors, and exact rules for writing the name. Everything else here (color, type, layout, voice) is observed on the guest homepage.

From unfairly.ai/brand-guidelines/linkedin, checked 2026-10-31. Unofficial study; not affiliated with LinkedIn.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** One blue for everything you should do, set in calm warm neutrals with real people in circles. Based on: The page reads as a utility for your career rather than an ad; the blue pill is the only loud thing on it.

## Purpose

Mission: Connect the world's professionals to make them more productive and successful. (published; https://about.linkedin.com/)

Story: LinkedIn began in co-founder Reid Hoffman's living room in 2002 and launched on May 5, 2003. It earns from subscriptions, advertising and recruiting, and joined Microsoft in December 2016. Its 2020 redesign aimed to make the product warmer and simpler and to put the community at the center, with new illustrations of people of every ability, background and industry. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Valuable | Solves a real problem members and customers face (paraphrase). | published: https://design.linkedin.com/design-principles |
| Simple | Intuitive, accessible, reliable for every member worldwide (paraphrase). | published: https://design.linkedin.com/design-principles |
| Trustworthy | Equitable outcomes, respects privacy, builds trust (paraphrase). | published: https://design.linkedin.com/design-principles |

## Fixed and flexible

Never changes:
- LinkedIn Blue
- the [in] Logo
- pill controls
- regular-weight headlines

The one thing that varies: Which bands and how many chips; illustration or photo per band.

## Positioning

- **Statement**: The world's largest professional network: where people find jobs, grow their network and learn skills. (published)
- **Category**: Professional network (published)
- **Audience**: Anyone navigating their professional life: job seekers, students, workers, recruiters, marketers and sellers (paraphrase of the homepage and footer). (observed)
- **Problem**: Opportunity depends on who you know and what you can show; the work of finding it is scattered (our reading of the mission and vision). (our reading)
- **Promise**: Economic opportunity: the right job, connection or skill, through your professional community. (published)
- **Differentiators**: Scale: more than 1 billion members in 200+ countries and territories.; Identity: the profile is a professional record people keep up to date, with signals like Open to Work.; One place for jobs, people, learning and expert content.; Trust as a design principle: equitable outcomes and member privacy.
- **Alternatives**: Job boards, personal networks and course sites used separately (our reading).

## Messaging

Boilerplate (published): LinkedIn is the world's largest professional network, with more than 1 billion members in more than 200 countries and territories. Its vision is to create economic opportunity for every member of the global workforce. Founded in 2002 and launched May 5, 2003, it has been part of Microsoft since December 2016.

Taglines:
- Discover new opportunities (Guest homepage H1 (desktop capture); LinkedIn rotates hero lines)
- Explore jobs and grow your network (Guest homepage H1 (phone capture and other visits))
- Welcome to your professional community (A third rotating guest-homepage H1 seen the same day)
- Connect to Opportunity (A listed LinkedIn trademark)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Find work | Jobs and internships by role, and an Open to Work signal for recruiters. | Open to Work frame: members with it received 40% more InMails from recruiters (LinkedIn, Sept 2020). | observed |
| Grow your network | Find the people you know and message them; conversations lead to opportunity. | More than 1 billion members in more than 200 countries and territories. | observed |
| Learn skills | Courses by topic through LinkedIn Learning. |  | observed |
| Stay informed | Expert posts curated by topic, plus daily games to keep in touch. |  | observed |

They never claim:
- Member count is stated as LinkedIn states it on About (more than 1 billion); never round up or date it.
- The 40% InMail figure is a 2020 early result; quote it with its year or not at all.

## Voice

Tone words: Helpful, Plain, Warm, Encouraging.

Traits:
- Valuable, but not Busy (published)
- Simple, but not Clever (published)
- Trustworthy, but not Pushy (published)
- Warm, but not Corporate (published)

- LinkedIn publishes no voice guide. Its published brand rules are about the name and trademarks; its design principles (Valuable, Simple, Trustworthy) and the 2020 redesign note (warmer, simpler, community front and center) set the intent.
- The guest homepage speaks to one person about their working life: second person, short verb-led headlines (Discover, Find, Explore, Join, Keep), one plain sentence of support under each.
- Sentence case everywhere except the product and directory labels, which are title-cased nouns (Top Content, Business Solutions, News Letters).
- No exclamation marks, no superlatives, no numbers as proof on the homepage: the scale claim (1 billion members) lives on About, not in the hero.
- Never possessive or abbreviated: LinkedIn is used as an adjective, with the registered mark in third-party text.

Rules a copy check enforces:
- Sentence case headlines
- Address the reader as you; promise help with their professional life, not features
- Start headlines and buttons with a verb: Discover, Find, Explore, Join, Post, Get started
- 
- Write LinkedIn with a capital I; never Linkedin, Linkdin, LI or other abbreviations
- Use LinkedIn as an adjective (LinkedIn Professional Services); never the possessive LinkedIn's in third-party copy
- Third parties write LinkedIn® with the ® symbol, in plain unstylized characters
- LinkedIn is never the first word or the dominant part of a third-party title
- The company is LinkedIn Corporation; the service is LinkedIn
- Never build words or slogans from the [in] Logo (no [in]vesting, Love[in])
- Cite a Top list as: [Company] ranked [position] on the [year] LinkedIn [list name] List in [country]
- Headlines stay under about 12 words; support lines one or two sentences

Their words: opportunity, professional, connect, network, skills.
Never: Linkdin, LinkedIn's (third-party possessive), [in]-wordplay, !.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| LinkedIn Blue | #0A66C2 | accent | Logo, primary action, outline actions, links (observed; no hex is published) |
| White | #FFFFFF | paper | Page ground; preferred logo background (published) |
| Ink | #191919 | ink | Text, rgba(0,0,0,0.9) |
| Muted | #666666 | ink_muted | Labels and footer links |
| Warm grey | #F3F2F0 | surface | Full-bleed bands and footer |
| Sand | #F1ECE5 | extra | Post a job band |
| Rust | #B24020 | accent_secondary | Editorial headlines |
| Black | #000000 | extra | One-color logo variant (published) |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | -apple-system | System fonts, already on the device: no licence or download needed | Roboto | -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif |
| body | -apple-system | System fonts, no licence needed | Roboto | -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 / closing H2 | --text-display-l-* | display | 48px | 32px | 1.25 | 0px | 400 |
| Section H2 | --text-display-m-* | display | 32px | 24px | 1.25 | 0px | 400 |
| Lead / carousel body / link rows | --text-lead-* | body | 20px | 16px | 1.5 | 0px | 400 |
| Buttons, chips | --text-label-* | body | 16px | 14px | 1.5 | 0px | 600 |
| Footer column head | --text-title-s-* | body | 16px | 16px | 1.25 | 0px | 600 |
| Footer link | --text-link-s-* | body | 14px | 14px | 1.25 | 0px | 600 |
| Nav label, legal | --text-caption-* | body | 12px | 12px | 1.25 | 0px | 400 |

## Layout

Measured on https://www.linkedin.com/: Measured with Playwright (headless Chrome) on the guest homepage at 1440 and 390, 2026-10-31; logo, name and trademark rules from brand.linkedin.com..

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 156px | 16px |
| Section padding | 60px | 56px |
| Container max width | 1128px | full |
| Hero text width | max 429px | full |
| Grid columns | 2 | 1 |
| Gutter | 72px | 16px |
| Card gap | 16px | 16px |
| Navigation height | 80px | 80px |

Breakpoints from LinkedIn's CSS: 767px.

Homepage bands, top to bottom (observed):
1. Navigation
   - Desktop: 80px sticky
   - Phone: 2 rows: bug + pills, then 5 icon links
   - Icons 24px #666666 over 12px labels
2. Hero
   - Desktop: y 80-688, text x 156, art x 776 bleeding right
   - Phone: centred stack, art last
   - 48/60 400 H1
3. Topic chips
   - Desktop: y 688-1048
   - Phone: stacked
   - Chips 48px outline pills
4. Job chips
   - Desktop: y 1048-1474
   - Phone: stacked
5. Post a job
   - Desktop: y 1474-1734
   - Phone: centred H2, left button
6. Software chips
   - Desktop: y 1734-2154
   - Phone: stacked
7. Games chips
   - Desktop: y 2154-2450
   - Phone: stacked
8. Open to Work carousel
   - Desktop: y 2450-3032
   - Phone: photo on top
9. Two tiles
   - Desktop: y 3156-3724
   - Phone: stacked centred
10. Who is LinkedIn for
   - Desktop: y 3848-4688
   - Phone: photo hidden
11. Join closing
   - Desktop: y 4688-5528
   - Phone: white, no image
12. Directory footer
   - Desktop: y 5528-5916
   - Phone: one column
13. Legal row
   - Desktop: y 5916-5984
   - Phone: 2 columns

## Page anatomy

How LinkedIn's own landing pages are built, part by part (observed; https://www.linkedin.com/, 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: White sticky bar. Desktop: full wordmark left; five icon-over-label product links, a 1px divider, then Sign in (blue outline pill) and Join now (blue filled pill) right. Phone: [in] bug left with the two pills right, and the five icon links as a second row under them.
- ground: #FFFFFF, no border, no shadow at rest
- height: 80px desktop (y 0-80); phone: 64px top row + a 52px icon row (icons y 78, labels y 103), hero starts about y 128
- border: none
- logo: variant Full LinkedIn wordmark in LinkedIn Blue #0A66C2 (Linked + the [in] box) on desktop; [in] bug only (26x26) on phone; px 102x26 desktop at x 156, y 25; phone bug 26x26 at x 16, y 25; position left, aligned to the 156px content edge; file https://brand.linkedin.com/downloads; phone file https://brand.linkedin.com/downloads
- links: count 5; labels Top Content, People, Learning, Jobs, Games; icons rocket, people, play-screen, briefcase, puzzle piece: 24px solid icons in #666666 (supplied SVGs); size label 12px/15px 400 #666666 under a 24px icon (icon y 18, label y 43); hover text rgba(0,0,0,0.9); weight 400; color #666666; alignment right group: items about 80px apart, first icon centred at x 673, last at x 997; divider 1px x 37px rgba(0,0,0,0.3) at x 1037, y 20
- actions: Sign in: 99x48 at x 1062, y 14, transparent, text #0A66C2 16px/24px 600, 1px inset ring #0A66C2, radius 24, padding 12px 24px. Join now: 115x48 at x 1169, #0A66C2 fill, white text, same type and radius. 8px gap.
- sticky: true
- phone: Row 1: [in] bug x 16; Sign in 99x48 at x 152 and Join now 115x48 at x 259 (y 14). Row 2: the five icon+label links spread evenly across 390px (labels at x 16, 106, 173, 256, 322). No hamburger.

**Hero**
- summary: Two columns on white: left a 48px headline, the sign-in pair (Google, then email), a 12px legal line and a "New to LinkedIn? Join now" line; right a large flat illustration of a man on a laptop in a chair before a bookcase, bleeding off the right edge.
- desktop: band y 80-688, white, padding-top 48; text column x 156, width 429 (sign-in controls 400 wide); h1 "Discover new opportunities" 48px/60px 400 #191919, one line, y 128, width 572 (wider than the column: let it run); google button 400x40 at y 212: #1A73E8 fill, radius 20, white 14px 500 "Continue with Google" centred, a 32px white circle holding the colored G at the left of the label (Google renders this); email button 400x40 at y 268: transparent, 1px inset ring rgba(0,0,0,0.75), radius 24, 16px/24px 600 #404040 "Sign in with email" centred, padding 8px 24px; legal y 332, 400 wide, 12px/18px 400 #666666 centred, two lines; User Agreement, Privacy Policy, Cookie Policy are 600 #0A66C2 links; join line y 406 (text top; 50px under the legal block): "New to LinkedIn?" 16px/24px #191919 + "Join now" 600 #0A66C2, centred over the 429px column; media illustration 700x560 at x 776, y 128 (ends at x 1476: clipped by the viewport, overflow hidden), no frame, no radius
- phone: order H1, Google button, email button, legal, Join line, illustration; alignment everything centred; h1 "Explore jobs and grow your network" 32px/40px 400, two lines, centred, y about 160; buttons both 358x40 (x 16), Google at about y 272, email y 328; legal 12px/18px centred, y 392, two lines; join line centred, y 460; media illustration in a 374x214 box at x 8, y 500, object-fit contain (draws about 267x214, centred); grey band starts right under it at y 714
- at rest: Static. No animation on the hero.
- media: https://static.licdn.com/aero-v1/sc/h/dxf91zhqd2z6b0bwg85ktm5s4
- type: 48/60 400 desktop, 32/40 phone
- cta: Continue with Google (Google blue) and Sign in with email (outline). The blue Join now lives in the nav and the inline link.
- proof: none in the hero

**Explore top LinkedIn content (topic chips)**
- summary: Full-bleed warm grey band: H2 and one lead line in the left column, outline topic chips wrapping in the right column, ending in a blue Show all chip.
- ground: #F3F2F0 full bleed
- desktop: band y 688-1048 (360), padding 60px 0; left x 156, width 429: H2 "Explore top LinkedIn content" 32px/40px 400 #191919 at y 748; lead "Discover relevant posts and expert insights — curated by topic and in one place." 20px/30px #191919 at y 800, two lines; right chips from x 657, y 748 (column x 657-1284): rows "Career, Productivity, Finance" / "Soft Skills & Emotional Intelligence, Project Management" / "Education, Technology, Leadership, Ecommerce" / "Show all" (blue); chip 16px/24px 600 #404040 (rgba(0,0,0,0.75)), padding 12px 24px, height 48, radius 24, transparent fill, 1px inset ring rgba(0,0,0,0.75) via box-shadow 0 0 0 1px; gap 8px across, 12px down (row step 60px); wrap left-aligned
- phone: band y 714-1175, padding 56px 16px; stack H2 24px/30px at y 770, lead 16px/24px, chips start 24px below; chip 14px/21px 600, padding 7px 16px, height 35, radius 24, same ring; gap 8px across, 12px down (row step 47px)
- anatomy:
  - Show all chip: #0A66C2 text and 1px #0A66C2 ring, same pill
  - Chips are links, not buttons: no fill at rest; hover fill rgba(0,0,0,0.04) and text rgba(0,0,0,0.9)
- components:
  - chip_outline
  - chip_blue

**Find the right job or internship for you (job chips)**
- summary: White band, same two-column layout as above, no lead line; ten job-role chips and a smaller Show more toggle with a chevron.
- ground: #FFFFFF
- desktop: band y 1048-1474, padding 60px 0; left H2 two lines "Find the right job or internship / for you" 32px/40px at y 1108, width 429; right chips from y 1108: "Engineering, Business Development, Finance" / "Administrative Assistant, Retail Associate, Customer Service" / "Operations, Information Technology, Marketing" / "Human Resources"; then Show more at y 1356; chip 16px/24px 600 #404040 (rgba(0,0,0,0.75)), padding 12px 24px, height 48, radius 24, transparent fill, 1px inset ring rgba(0,0,0,0.75) via box-shadow 0 0 0 1px; gap 8px across, 12px down (row step 60px); wrap left-aligned; show more 133x35, 14px 600 #404040, padding 6px 16px, 1px ring rgba(0,0,0,0.75), radius 24, 16px chevron-down after the label
- phone: band H2 at y 1231 (two lines), chips from y 1315; chip 14px/21px 600, padding 7px 16px, height 35, radius 24, same ring; gap 8px across, 12px down (row step 47px)
- anatomy:
  - No lead paragraph in this band
  - Show more is a button (not a link) and smaller than the chips
- components:
  - chip_outline
  - show_more

**Post your job for millions of people to see**
- summary: Short full-bleed sand band with one centred rust headline and a blue outline Post a job pill under it.
- ground: #F1ECE5 full bleed
- desktop: band y 1474-1734 (260), padding 64px 0; h2 "Post your job for millions of people to see" 32px/40px 400 #B24020, centred, one line, y 1538; button Post a job 122x48 centred at y 1610: transparent, #0A66C2 text and 1px ring, radius 24
- phone: band y 1672-1919, padding 48px 32px; h2 24px/30px #B24020 centred, two lines; button 98x35 (14px), LEFT-aligned at x 32, its top 24px under the headline bottom
- anatomy:
  - The only centred band on desktop: every other band is left column / right column
- components:
  - button_outline_blue

**Discover the best software tools**
- summary: White band, two columns: H2 plus lead left, ten software-category chips plus a blue Show all right.
- ground: #FFFFFF
- desktop: band y 1734-2154, padding 60px 0; left H2 two lines "Discover the best software / tools" at y 1794; lead "Connect with buyers who have first-hand experience to find the best products for you." 20px/30px at y 1886; right chips: "E-Commerce Platforms, CRM Software" / "Human Resources Management Systems, Recruiting Software" / "Sales Intelligence Software, Project Management Software" / "Help Desk Software, Social Networking Software" / "Desktop Publishing Software, Show all (blue)"; chip 16px/24px 600 #404040 (rgba(0,0,0,0.75)), padding 12px 24px, height 48, radius 24, transparent fill, 1px inset ring rgba(0,0,0,0.75) via box-shadow 0 0 0 1px; gap 8px across, 12px down (row step 60px); wrap left-aligned
- phone: band H2 one line 24px at y 1975, lead two lines, chips from y 2089, mostly one per row; chip 14px/21px 600, padding 7px 16px, height 35, radius 24, same ring; gap 8px across, 12px down (row step 47px)
- anatomy:
  - Show all shares the last row with the last grey chip
- components:
  - chip_outline
  - chip_blue

**Keep your mind sharp with games**
- summary: White band, two columns: H2 plus lead left, seven game-name chips right.
- ground: #FFFFFF
- desktop: band y 2154-2450, padding 60px 0; left H2 two lines "Keep your mind sharp with / games" at y 2214; lead "Take a break and reconnect with your network through quick daily games." at y 2306; right chips: "Patches, Zip, Mini Sudoku, Queens, Tango" / "Pinpoint, Crossclimb"; chip 16px/24px 600 #404040 (rgba(0,0,0,0.75)), padding 12px 24px, height 48, radius 24, transparent fill, 1px inset ring rgba(0,0,0,0.75) via box-shadow 0 0 0 1px; gap 8px across, 12px down (row step 60px); wrap left-aligned
- phone: band H2 one line at y 2577, chips from y 2691 in three rows; chip 14px/21px 600, padding 7px 16px, height 35, radius 24, same ring; gap 8px across, 12px down (row step 47px)
- anatomy:
  - No Show all here
- components:
  - chip_outline

**Open to Work carousel**
- summary: Full-bleed grey band holding a one-slide-at-a-time horizontal carousel: rust H2 and a body paragraph left, a 450px circular photo right, a round dark next arrow at the right edge of the content.
- ground: #F3F2F0 full bleed
- desktop: band y 2450-3032 (582), padding 60px 0; slide text column x 156, width 564: H2 "Let the right people know you’re open to work" 32px/40px #B24020, two lines, y 2646 (vertically centred against the photo); body "With the Open To Work feature, you can privately tell recruiters or publicly share with the LinkedIn community that you are looking for new job opportunities." 20px/30px #191919 at y 2742, three lines; photo 450x450 circle (border-radius 50%) at x 784, y 2522: a hand holding a phone showing a LinkedIn profile with the green #OPENTOWORK frame; arrow next button 42x42 circle at x 1262, y 2720: fill rgba(0,0,0,0.75), white chevron-right; no previous arrow, no dots, at rest; track slides sit 1174px apart horizontally, overflow hidden; slide 2 is "Conversations today could lead to opportunity tomorrow", slide 3 "Stay up to date on your industry"
- phone: band about 588 tall; slide photo 300x300 circle at x 16 on top, the next slide peeks in at x 332; arrow 42px at the right edge over the photo; rust H2 24px/30px two lines below the photo, width 300; body 16px/24px
- anatomy:
  - Rest state = slide 1 only
  - Rust headline + black body is the editorial pattern of the grey and sand bands
- components:
  - carousel_arrow

**Two tiles: Connect with people / Learn the skills**
- summary: White band with two equal tiles side by side, each a 256px square illustration, a 32px two-line H2 and one control.
- ground: #FFFFFF
- desktop: band y 3156-3724 (white gap of 124px above), padding 60px 0; tiles two columns at x 156 and x 744, each 448 wide; illustration 256x256 at y 3216 (left-aligned); H2 at y 3488 32px/40px two lines ("Connect with people who can / help", "Learn the skills you need to / succeed"); control at y 3600; controls left: Find people you know outline pill 212x48 (#404040 ring and text); right: a select box 360x64, white, 1px solid rgba(0,0,0,0.08) border, radius 8, padding 16px 12px 16px 16px, "Choose a topic to learn about" 20px/30px #191919 and a 16px solid caret-down at the right
- phone: tiles stacked and centred: illustration 256 centred, H2 24px/30px centred two lines, the pill (14px, 35 tall) centred; the select box about 270x56 centred
- anatomy:
  - Illustrations are supplied flat-color SVGs; no frame
- components:
  - chip_outline
  - select_box

**Who is LinkedIn for?**
- summary: A 720px-wide grey block from the left page edge holds a rust H2, one line and three sand link rows with chevrons; a huge 840px circle photo of two colleagues at a laptop overlaps from the right and is cut by the viewport edge.
- ground: #F3F2F0 block x 0-720 only (not full bleed), rest white
- desktop: band y 3848-4688; grey block x 0-720, y 3908-4628 (720x720); text H2 "Who is LinkedIn for?" 32px/40px #B24020 at x 156, y 4093; line "Anyone looking to navigate their professional life." 20px/30px at y 4141; rows three link rows 429x64 at y 4203, 4283, 4363 (16px gap): fill #EAE6DF, radius 0, padding 16px, 20px/30px 400 #191919 ("Find a coworker or classmate", "Find a new job", "Find a course or training"), a thin chevron-right drawn as an SVG (about 8x16, 1.5px stroke, #191919), 16px in from the right; never a text glyph; hover fill #E1DAD0; photo 840x840 at x 816, y 3848 (60px above the grey block top); the JPG is already a circle on white; it runs past x 1440 and is clipped
- phone: band grey full width; photo hidden; text H2 24px/30px rust, line 16px/24px; rows 358x64 rows, 16px/24px text, chevron right
- anatomy:
  - The photo is set above the grey block and overflows to the right: page needs overflow-x hidden
- components:
  - link_row

**Join your colleagues (closing)**
- summary: Tall closing band: 48px two-line headline and a blue Get started pill at top-left over a full-bleed illustrated city street (sky fading to pale blue, offices and cafés along the bottom).
- ground: photo-light: the supplied city illustration as background-size cover, centred bottom, over white
- desktop: band y 4688-5528 (840), padding 60px 0; h2 "Join your colleagues, classmates, and friends on LinkedIn" 48px/60px 400 #191919 at x 156, y 4796, wraps after "on": line 1 "Join your colleagues, classmates, and friends on" (about 980px), line 2 "LinkedIn"; text box up to 1128 wide, no narrower cap; button Get started 134x48 #0A66C2 filled pill at y 4932; media background image 2000x861 scaled to cover 1440x840 (drawn about 1951 wide, cropped 255px each side); its sky is white at top fading to #DFEFFF, so the headline sits on near-white
- phone: band white, NO city image; h2 24px/30px two lines left; button Get started 108x35 (14px) left
- anatomy:
  - Primary button reappears only here and in the nav
- components:
  - button_primary

**Footer**
- summary: Two parts: a warm grey directory (blue wordmark left, four link columns) and a white legal row with a small black wordmark, © 2026 and 11 links.
- ground: #F3F2F0 directory; #FFFFFF legal row
- anatomy:
  - Directory desktop y 5528-5916, padding 24px 0: wordmark 84x21 #0A66C2 at x 156, y 5552 (smaller than the nav mark); columns at x 420, 636, 852, 1068 (192 wide, 24px gap)
  - Column heads 16px/20px 600 #191919; links 14px/17.5px 600 #666666, 24px row step starting 32px under the head; hover #0A66C2 underlined
  - General: Sign Up, Help Center, About, Press, Blog, Careers, Developers
  - Browse LinkedIn: Learning, Jobs, Games, Mobile, Services, Products, Top Companies, Top Startups, Top Colleges
  - Business Solutions: Talent, Marketing, Sales, Learning
  - Directories: Members, Jobs, Companies, Featured, Learning, Posts, Articles, Schools, News, News Letters, Services, Products, People Search
  - Legal row y 5916-5984 white, two lines at x 164: black wordmark 56x14, "© 2026" 12px/18px 400 #666666, then 12px 600 #666666 links 16px apart: About, Accessibility, User Agreement, Privacy Policy, Your California Privacy Choices, Cookie Policy, Copyright Policy, Brand Policy, Guest Controls; line 2 (y 5958): Community Guidelines, Language + 16px chevron-down. Hover #004182 underlined
- phone: Directory as one column at x 16: wordmark 84x21, then each head 16px with its links 14px 600 on a 32px row step. Legal row: two columns (x 24 and x 203), 12px 600 links on a 34px step, first row "wordmark © 2026 | About".

**On dark grounds**
- note: The guest homepage has no dark band.
- secondary button: not used
- link: not used
- muted text: not used
- hairline: not used
- logo variant: white [in] Logo is a published variation (brand.linkedin.com/in-logo)

## Components

- **button primary** (observed): fill #0A66C2, text #FFFFFF, border none, radius 24, padding 12px 24px, height 48, example Join now (115x48), Get started (134x48), text style 16px/24px 600, padding x 24, font size 16, weight 600, face body
  - hover (observed): fill #004182
- **button outline blue** (observed): fill none, text #0A66C2, border none; 1px inset ring #0A66C2 (box-shadow 0 0 0 1px), radius 24, padding 12px 24px, height 48, example Sign in, Post a job, Show all, text style 16px/24px 600, ring px 1, ring #0A66C2, padding x 24, font size 16, weight 600, face body
  - hover (observed): fill rgba(112,181,249,0.1), text #004182
- **chip outline** (observed): fill none, text #404040, border none; 1px inset ring rgba(0,0,0,0.75), radius 24, padding 12px 24px desktop, 7px 16px phone, height 48 desktop, 35 phone, example Career, Engineering, Find people you know, text style 16px/24px 600 (14px/21px phone), ring px 1, ring #404040, padding x 24, font size 16, weight 600, face body
  - hover (observed): fill rgba(0,0,0,0.04), text #191919
- **chip blue** (observed): . Show all: chip_outline geometry with button_outline_blue colors
- **button signin email** (observed): fill none, text #404040, border 1px inset ring rgba(0,0,0,0.75), radius 24, padding 8px 24px, height 40, example Sign in with email (400x40), text style 16px/24px 600, ring px 1, ring #404040, padding x 24, font size 16, weight 600, face body
  - hover (observed): fill rgba(0,0,0,0.04), text #191919
- **show more** (observed): fill none, text #404040, border 1px inset ring rgba(0,0,0,0.75), radius 24, padding 6px 16px, height 35, example Show more + chevron (133x35), text style 14px 600
- **carousel arrow** (observed): fill rgba(0,0,0,0.75), text #FFFFFF, radius 21, height 42, example 42x42 next arrow, white chevron
- **link row** (observed): fill #EAE6DF, text #191919, radius 0, padding 16px, height 64, example Find a new job + chevron right, text style 20px/30px 400 (16px/24px phone)
  - hover (observed): fill #E1DAD0
- **select box** (observed): fill #FFFFFF, text #191919, border 1px solid rgba(0,0,0,0.08), radius 8, padding 16px 12px 16px 16px, height 64, example Choose a topic to learn about + caret, text style 20px/30px 400, indicator appearance: none; the supplied solid 16px caret-down (#191919) sits 16px in from the right edge, vertically centred; never the browser arrow
- **nav icon link** (observed): text #666666, example 24px icon over a 12px/15px label
  - hover (observed): text rgba(0,0,0,0.9)
- **footer link** (observed): text #666666, text style 14px/17.5px 600
  - hover (observed): text #0A66C2, underline true

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| carousel | not published |  | Open to Work carousel slides one 1174px step horizontally on the next arrow; rest state is slide 1 | observed |

## Icon tokens

Grid 24px (16px small), stroke solid filled glyphs, no strokes (observed).

## Signature moves

### One blue pill

Where: nav Join now and the closing Get started.
Do: Only the primary action is filled LinkedIn Blue #0A66C2; every other control is a transparent 24px-radius pill with a 1px inset ring.
Don't: fill secondary actions or use square buttons.

### Chip wall

Where: topic, job, software and game bands.
Do: A wrapping field of outline pills in the right column beside a short H2, ending in a blue Show all.
Don't: turn chips into cards or tags with fills.

### Circle-cropped photo

Where: carousel and Who is LinkedIn for.
Do: Real people photographed at work, cropped to a circle, sometimes huge and cut by the page edge.
Don't: rectangular stock photos or rounded-rectangle frames.

### Warm flat illustration

Where: hero, tiles, closing city.
Do: Flat, warm, muted palette (sand, terracotta, sage, teal, pale blue), diverse people working; no outlines, soft shapes.
Don't: glossy 3D, gradients-as-style or icon tiles in illustration slots.

### Rust editorial headlines

Where: grey and sand bands.
Do: H2s on the editorial bands go #B24020, the body stays black.
Don't: use rust for body or buttons.

## Messaging: rules

The guest homepage sells four jobs to be done, each as a band: find content, find a job, hire, choose software, play, signal Open to Work, connect, learn. Each is one verb-first H2 and a field of chips or one control.

Why it works: A visitor finds their own reason to join in one scroll without reading a pitch.

- One job per band
- Verb-first H2, one support line
- The ask is always Join now / Get started

Sources: https://www.linkedin.com/, https://about.linkedin.com/

## Voice: rules

No voice guide is published. The homepage voice is plain, second person and encouraging; the published brand rules govern how the LinkedIn name is written.

Why it works: Professional but human: the 2020 redesign aimed for warmer and simpler.

- Sentence case, no exclamation marks
- Write LinkedIn with a capital I, never abbreviated
- Use LinkedIn as an adjective; third parties add ®
- Never make the [in] Logo part of a word
- Don't Linkdin
- Don't [in]vesting
- Don't LinkedIn as first word of a third-party title

Sources: https://brand.linkedin.com/business-books-and-media-usage, https://brand.linkedin.com/in-logo, https://www.linkedin.com/blog/member/product/a-new-look-for-linkedin-from-the-inside-out, https://www.linkedin.com/ (2026-10-31)

## Logo: rules

Two marks: the LinkedIn Logo (Linked + [in] box) and the [in] Logo alone. The full logo is licence-only; members may use the [in] Logo to link to their profile, on business cards, in email signatures, with their QR code or in a row of social icons.

Why it works: A single blue box is recognizable at icon size, so the brand controls the full wordmark tightly and lets members carry the bug.

|  |  |
|---|---|
| Clear space | one [in] Logo height/width |
| Minimum | [in] portion 21px screen; 0.25 in / 6.35mm print |
| Colors | blue preferred; white or black |
| Ground | solid white preferred; solid light ground allowed |
| Format | transparent PNG, other formats on request |

- Clear space around the LinkedIn Logo = the height/width of one [in] Logo
- Minimum size: the [in] part 21px tall on screen, 0.25 in (6.35mm) in print
- Preferred: blue on solid white; on a solid light ground if white is impractical
- Color online; solid white or black only when color is impractical in print
- [in] Logo: blue, black or white only
- Never enlarge beyond the native file size
- The LinkedIn Logo stands alone, never combined with another logo
- Don't modify the color or shape of the [in] Logo
- Don't combine it with other symbols, words, images or designs
- Don't incorporate it into a word or slogan
- Don't imply affiliation or endorsement
- Don't use logos found elsewhere on the web

Real examples, to look at on LinkedIn's own pages (not for reuse):
- Clear space: one [in] Logo on every side: https://brand.linkedin.com/linkedin-logo
- 21px minimum on screen: https://brand.linkedin.com/linkedin-logo
- Do not recolor, combine or build words from the [in] Logo: https://brand.linkedin.com/in-logo

Sources: https://brand.linkedin.com/linkedin-logo, https://brand.linkedin.com/in-logo

## Color: rules

The guidelines name no hex values; they set blue as the preferred logo color on white and allow blue, black or white for the [in] Logo. On the site, LinkedIn Blue #0A66C2 is the only saturated UI color; grounds are white, a warm grey #F3F2F0 and sand #F1ECE5/#EAE6DF; text is 90/75/60% black; rust #B24020 marks editorial headlines.

Why it works: A single blue owns every action and the logo, so the warm neutrals around it read calm and the blue reads as "do this".

- Blue only for the logo, the primary action, outline actions and links
- Neutrals are warm, never cool greys
- Text as black at 90/75/60% opacity
- Rust for editorial headlines only

Not published: any hex, CMYK or Pantone value; color ratios.

Do and don't:
- Do: "Join now". One filled blue pill for the primary action.
- Don't: "Join now". Rust is for editorial headlines, never actions.

Sources: https://brand.linkedin.com/linkedin-logo, https://brand.linkedin.com/in-logo, https://www.linkedin.com/ (2026-10-31)

## Typography: rules

No typeface is published. linkedin.com uses the system UI stack (SF Pro, Segoe UI, Roboto...). Headlines are regular 400, never bold; every control is 600.

Why it works: The platform feels native on every device and loads nothing.

- For a page build set every font-family to the system stack (tokens.css --font-body-original / --font-display-original: -apple-system, system-ui, Segoe UI, Roboto ...). It is what LinkedIn renders, needs no licence, and loads nothing. Do not load Roboto or any Google font for the page; Roboto is only the kit stand-in for engines that need a named web font
- Headlines 400 at 48/32/24, never bold
- Controls and footer links 600
- Line heights 1.25 for heads, 1.5 for body
- Tracking normal everywhere

Not published: a brand typeface or scale.

Sources: https://www.linkedin.com/ (2026-10-31)

## Graphic elements: rules

Outline pills, circle-cropped photos, flat warm illustrations and full-bleed warm grounds. No gradients, shadows or borders on the page; rings are 1px inset shadows.

Why it works: Few, soft devices keep the attention on people and actions.

- 24px pills for every control
- Circles for photos
- Square, borderless color blocks for bands and rows

Sources: https://www.linkedin.com/ (2026-10-31)

## Iconography: rules

Solid 24px glyphs (rocket, people, play screen, briefcase, puzzle) in 60% black over 12px labels.

Why it works: Icon + label reads instantly at a glance.

- Solid, single color
- Always labelled in the nav

Not published: an icon grid or stroke rules.

Sources: https://www.linkedin.com/ (2026-10-31)

## Illustration: rules

Flat, warm vector scenes of diverse people at work and at home: muted sand, terracotta, sage, teal and pale blue, no outlines.

Why it works: LinkedIn says its illustrations show people of different abilities, backgrounds and industries so everyone can see themselves, and each has a dark-mode version.

- Show a range of people, abilities and jobs beyond tech
- Flat color, no outlines or 3D
- Provide a dark-mode variant

Sources: https://www.linkedin.com/blog/member/product/a-new-look-for-linkedin-from-the-inside-out, https://www.linkedin.com/pulse/introducing-dark-mode-linkedina-night-day-difference-george-penston/, https://www.linkedin.com/ (2026-10-31)

## Photography: rules

Real people working together in natural light, warm tones, cropped to circles on the homepage; rectangular with a diagonal color wedge on the brand site.

Why it works: Shows the community, not the product chrome.

- Candid, people-first
- Circle crop on product marketing

Not published: a photography guide.

Sources: https://www.linkedin.com/ (2026-10-31), https://brand.linkedin.com/linkedin-logo

## Motion: rules

Not published. The homepage has one carousel and color-only hovers.

- Keep motion functional

Not published: durations, easing.

Sources: https://www.linkedin.com/ (2026-10-31)

## Interface and layout: rules

A 1128px column with 156px margins at 1440; most bands are a 429px text column beside a right column of chips or media.

- Left text, right content
- Full-bleed warm grounds alternate with white

Not published: a grid or spacing scale.

Sources: https://www.linkedin.com/ (2026-10-31)

## Rules: rules

Brand law is trademark law: logos only as licensed or for the listed member uses, the name written exactly, nothing that implies endorsement.

- Don't copy LinkedIn's website design, typeface, colors, graphics or imagery for a LinkedIn-related business (the guide's rule for third parties)
- Don't register domains containing LinkedIn
- Badges only as provided; don't make your own

Sources: https://brand.linkedin.com/business-books-and-media-usage, https://brand.linkedin.com/badges-and-programs, https://brand.linkedin.com/en-us

## Campaigns

### A new look for LinkedIn (2020 redesign) (2020)

September 2020: the first major redesign in about five years, warmer and simpler, with new inclusive illustrations, Stories and the Open to Work frame; dark mode followed.

How the system shows: The warm flat illustrations and the Open to Work green frame still carry the guest homepage.
Why it works: It makes a utility feel like a community.
Channels: product, web. Source: https://www.linkedin.com/blog/member/product/a-new-look-for-linkedin-from-the-inside-out

## Applications

| Format | What | Source |
|---|---|---|
| social icon row | Members may place the [in] Logo in a row of social icons in blue, black or white on any background color. | https://brand.linkedin.com/in-logo |

## By format

How our engine applies LinkedIn's look to each format. This is our recipe from the observed site, not something LinkedIn publishes. Level = how much color the format carries (0 plain, 5 full). Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 1 | Build it the way linkedin.com is built (kit.spec.page): white sticky nav with icon links and blue pills; 48px regular sentence-case H1 left with an illustration bleeding right; alternating white and warm grey (#F3F2F0) full-bleed bands of H2-left / chips-right; rust (#B24020) editorial headlines on grey and sand bands; circle-cropped people photos; a closing 48px headline with one blue Get started; grey directory footer and white legal row. System UI font, 400 heads, 600 controls. | which bands, chips or tiles; illustration or photo per band |
| Deck | 1 | White slides, regular-weight headlines, one blue accent per slide, people in circles | warm grey section dividers |
| Proposal page | 1 | White ground, plain second-person copy, one blue pill CTA | a grey band for the plan |
| Social post | 2 | One warm flat illustration or circle photo, short verb-first line | sand or grey ground |

## Checks before anything ships

- **Logo hidden**: Cover the logo. A single blue for actions, warm greys, regular-weight system type, outline pills and people in circles should still read as LinkedIn.
- **One blue**: Count filled blue elements: more than one per screen and it no longer looks like LinkedIn.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is LinkedIn's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Color hex, CMYK or Pantone values: not published (all hex here observed on linkedin.com 2026-10-31).
- A brand typeface and type scale: not published (the site uses the system UI stack).
- Voice and tone guidance: not published (voice here is observed; design principles are published).
- Photography, illustration, iconography and motion guides: not published.
- A layout grid or spacing scale: not published.
- Hero headline rotates between visits; three variants observed the same day.

Logos and reference images belong to LinkedIn. Look at them on LinkedIn's own pages; don't reuse them.