Awesome DESIGN.md

DESIGN.md173 lines · version alpha

---
version: alpha
name: "Adobe"
description: "The creative, document and customer-experience tools for everyone, from students to global brands."
colors:
  primary: "#eb1000"
  secondary: "#3b63fb"
  surface: "#ffffff"
  on-surface: "#000000"
  gray-75: "#F3F3F3"
  muted-ink: "#5C5C5C"
  gray-800: "#292929"
  photoshop-cyan: "#31A8FF"
  photoshop-dark: "#001E36"
  illustrator-orange: "#FF9A00"
  illustrator-dark: "#330000"
  after-effects-indigo: "#9999FF"
typography:
  headline-display:
    fontFamily: "Rethink Sans"
    fontSize: 80px
    fontWeight: 800
    lineHeight: 0.95
    letterSpacing: -1.6px
  body-md:
    fontFamily: "Source Sans 3"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
  display-l:
    fontFamily: "Rethink Sans"
    fontSize: 56px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -1.12px
  title:
    fontFamily: "Rethink Sans"
    fontSize: 24px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.96px
  lead:
    fontFamily: "Source Sans 3"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
  body-strong:
    fontFamily: "Source Sans 3"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.2px
  label:
    fontFamily: "Source Sans 3"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.286
  legal:
    fontFamily: "Source Sans 3"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.333
rounded:
  sm: 8px
  md: 16px
  lg: 26px
  full: 9999px
spacing:
  margin: 120px
  margin-phone: 24px
  gutter: 8px
  gutter-phone: 8px
  section: 128px
  section-phone: 40px
  card-gap: 8px
  container-max: 1200px
  columns: 3
components:
  button-primary-on-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    height: 40px
  button-signin:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    height: 40px
---
# Adobe design system

## Overview

Generated on 2026-11-03 from the Adobe brand study (unfairly.ai/brand-guidelines/adobe/, checked 2026-10-30). An independent study of what Adobe publishes and ships, not official Adobe guidelines.

Adobe runs two systems that meet on adobe.com: Spectrum, its public product design system (colour, type, icons, motion, voice), and a marketing homepage built as a dark cinematic stage with a white sheet riding over it. The constants are black and white, Adobe Clean in a heavy Black display cut, and the product app tiles as the only colour. Adobe lets the work be the colour. The chrome is black, white and one heavy typeface; colour arrives through customer photos, product screenshots and the app tiles, each in its own published pair.

- Logo: The Adobe wordmark (custom lettering) and the "A" logomark; on adobe.com the wordmark alone in the nav, white over the hero, and a giant white A + wordmark lockup in the footer. The red square "A" tile is the corporate app tile (from the Adobe brand study). Link your approved master files.
- Headline on the site: "Create at the highest level."
- Category: Creative software, document software (PDF) and digital-experience software
- Audience: Students, social influencers, creative professionals, performance marketers and global brands (the homepage names all five)
- Promise: Everything you need to make anything, faster with AI
- Voice: rational, human, focused.
- Use title case only for official names and titles
- Never use all caps for emphasis; all caps only for acronyms and file extensions
- Use common contractions (you're, we'll, can't) to sound natural
- Address the user as you; first person only for the user's own answers, consent or privacy

## Colors

- Primary: #eb1000 (from the Adobe brand study)
- Secondary: #3b63fb (from the Adobe brand study)
- Surface: #ffffff (from the Adobe brand study)
- On surface: #000000 (from the Adobe brand study)
- Adobe red (#EB1000): The A tile and the red product tiles; Spectrum names it a primary brand colour (hex observed in Adobe's SVGs)
- Black (#000000): Homepage text, black product band and footer
- White (#FFFFFF): Page sheet; text and pills on dark
- Gray 75 (#F3F3F3): Carousel cards
- Muted ink (#5C5C5C): Eyebrows and card lines (64% black)
- Gray 800 (#292929): Spectrum icons and linear illustrations
- Primary palette: red, black, grey, white
- Each product keeps its own colours; tiles never change on dark
- Gradients are placed intentionally and tied to product palettes
- Don't make your own colours or gradients: request them

## Typography

- Display: Rethink Sans (from the Adobe brand study)
- Body: Source Sans 3 (from the Adobe brand study)
- Adobe Clean Display Black, Homepage headlines, quotes and card titles at 900. Proprietary to Adobe; not available for others
- Adobe Clean (Adobe Clean Spectrum VF in product), Body, labels, nav and buttons at 400 and 700. Proprietary; Adobe's corporate typeface, a family of 10+ faces
- not published on the public page, Code type style in Spectrum. not published
- headline-display: Hero H1, Rethink Sans 80px/0.95 at 800
- body-md: Body, card line, footer link, Source Sans 3 16px/1.25 at 400
- display-l: Section H2, testimonial quote, Rethink Sans 56px/1 at 800
- title: Card and promo title, Rethink Sans 24px/1 at 800
- lead: Lead, Source Sans 3 20px/1.2 at 400
- body-strong: Eyebrow, card title (carousel), footer heading, attribution name, Source Sans 3 16px/1.25 at 700
- label: Nav link, button label, text link, category card label, Source Sans 3 14px/1.286 at 700
- legal: Legal row, Source Sans 3 12px/1.333 at 700
- Major Second scale, base 14px
- ExtraBold for headings in product UI; Black only for branded headings at 18px+
- Bold for titles, file names and button labels

## Layout

- margin 120px, margin-phone 24px, gutter 8px, gutter-phone 8px, section 128px, section-phone 40px, card-gap 8px, container-max 1200px, columns 3
- Spacing tokens 2, 4, 8, 16... (geometric)
- Rounding: small 4px, medium 8px, large 10px, extra-large 16px, full for buttons
- Nested corners: outer radius - gap = inner radius

## Elevation & Depth

- Icons are outlined with a 1.5px stroke; linear illustrations in gray 800

## Shapes

- Spectrum: no sharp corners; small 4px, medium 8px (default), large 10px, extra-large 16px, full for buttons. Homepage: 8px small cards, 16px media and cards, 32px on the white sheet where it meets a dark band
- pill

## Components

- button-primary-on-dark: #FFFFFF fill, #000000 text, corners {rounded.full}, 40px tall. Free trial 118x40; See all plans 133x40
- button-signin: #FFFFFF fill, #000000 text, corners {rounded.full}, 40px tall. Sign in 77x40

## Do's and Don'ts

- Don't recolour a product tile
- Don't make your own logos, colours or gradients
- Don't use colour for decoration in the chrome
- Don't invent a gradient
- Don't underline for emphasis
- Don't black below 18px

DESIGN.md230 lines · version alpha

---
version: alpha
name: "Airbnb"
description: "A community marketplace where hosts offer homes, experiences and services to guests in almost every country (paraphrase of the newsroom boilerplate)."
colors:
  primary: "#ff385c"
  secondary: "#da1249"
  surface: "#ffffff"
  on-surface: "#222222"
  rausch-gradient: "#E31C5F"
  plus: "#92174D"
  foggy-grey: "#6C6C6C"
  deco: "#DDDDDD"
  bebe: "#EBEBEB"
  circle-grey: "#F2F2F2"
  faint: "#F7F7F7"
typography:
  headline-display:
    fontFamily: "Public Sans"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.18
    letterSpacing: -0.44px
  body-md:
    fontFamily: "Public Sans"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.18px
  nav-tab-label:
    fontFamily: "Public Sans"
    fontSize: 14px
    fontWeight: 550
    lineHeight: 1.29
  become-a-host-footer-column-head-inspira:
    fontFamily: "Public Sans"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.29
  search-field-label-where-when-who:
    fontFamily: "Public Sans"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
  search-placeholder:
    fontFamily: "Public Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.29
  card-title:
    fontFamily: "Public Sans"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.23
  card-price-line:
    fontFamily: "Public Sans"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
  experience-tile-label:
    fontFamily: "Public Sans"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.43
  badge-guest-favorite:
    fontFamily: "Public Sans"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.18
  footer-link-legal:
    fontFamily: "Public Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.29
  inspiration-subtitle:
    fontFamily: "Public Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.29
rounded:
  sm: 12px
  md: 14px
  lg: 16px
  xl: 20px
  2xl: 40px
  full: 9999px
spacing:
  margin: 48px
  margin-phone: 24px
  gutter: 12px
  gutter-phone: 12px
  section: 42px
  section-phone: 42px
  container-max: 1344px
  columns: 6
components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 48px
  search-button:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 48px
    width: 48px
  chip-phone:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    height: 40px
  icon-circle:
    backgroundColor: "{colors.circle-grey}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    height: 40px
    width: 40px
  section-arrow:
    backgroundColor: "{colors.circle-grey}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    height: 28px
    width: 28px
  carousel-arrows:
    backgroundColor: "{colors.circle-grey}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    height: 28px
    width: 28px
  toast:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    height: 58px
    width: 218px
---
# Airbnb design system

## Overview

Generated on 2026-11-03 from the Airbnb brand study (unfairly.ai/brand-guidelines/airbnb/, checked 2026-10-29). An independent study of what Airbnb publishes and ships, not official Airbnb guidelines. Lines marked GAP were not found in the study.

White page, one red dot: the Rausch Bélo and a search circle are the only color, and everything else is real photos in 16px-radius frames with plain #222222 facts underneath, set in Airbnb’s own Cereal. Airbnb gets out of the way of the places. The homepage has no headline and no hero image: a search bar, then rows of real listings. The brand shows up as restraint: a small Bélo, a rare Rausch, one owned typeface, and hosts’ photos doing the selling.

- Logo: Bélo alone is the default on objects
- Headline on the site: "Belong anywhere"
- Category: Travel marketplace: Homes, Experiences (labelled Activities in the desktop tabs) and Services.
- Audience: Guests planning a trip and, secondarily, prospective hosts ("Become a host").
- Promise: Belonging: Cereal’s launch story ties the brand to the mission that anyone can belong anywhere.
- Voice: Warm, Plain, Humble.
- Row titles name a place and a reason: Stay in / Places to stay in / Available next month in + city
- Listing copy is a type + place ("Cabin in Gatlinburg"), the all-in price for the nights, and the rating
- The brand is humble and understated; branding stays small
- No internal language that could confuse the public

## Colors

- Primary: #ff385c (from the Airbnb brand study)
- Secondary: #da1249 (from the Airbnb brand study)
- Surface: #ffffff (from the Airbnb brand study)
- On surface: #222222 (from the Airbnb brand study)
- Rausch (#FF385C): Published core color (Pantone 1787 C, CMYK 0,83,57,0); the Bélo and logo. Hex from the site token.
- Hof (#222222): Published core color (Pantone 2336 C); all primary text on airbnb.com.
- White (#FFFFFF): Published as the third Bélo color; the page ground.
- Search red (#DA1249): The search circle and active phone tab (observed token text-brand).
- Rausch gradient (#E31C5F): Gradient #E61E4D to #E31C5F to #D70466 behind the white Bélo on brand assets (observed).
- Plus (#92174D): Airbnb Plus / Luxe accent (observed token, not on the homepage).
- Rausch for the Bélo and one action (search)
- Hof for text
- White grounds; #F7F7F7 for the footer zone
- The gradient sits behind the white Bélo on brand assets only

## Typography

- Display: Public Sans (from the Airbnb brand study)
- Body: Public Sans (from the Airbnb brand study)
- Airbnb Cereal, Titles, wordmarks, campaign type. Proprietary to Airbnb (custom typeface made with Dalton Maag, 2018); not an open font
- Airbnb Cereal (Book / Medium), All UI text, served as "Airbnb Cereal VF". Proprietary to Airbnb
- headline-display: Band title (Inspiration for future getaways), Public Sans 22px/1.18 at 600
- body-md: Section title (row heading), Public Sans 20px/1.2 at 700
- nav-tab-label: Nav tab label, Public Sans 14px/1.29 at 550
- become-a-host-footer-column-head-inspira: Become a host / footer column head / inspiration city, Public Sans 14px/1.29 at 600
- search-field-label-where-when-who: Search field label (Where / When / Who), Public Sans 12px/1.33 at 600
- search-placeholder: Search placeholder, Public Sans 14px/1.29 at 400
- card-title: Card title, Public Sans 13px/1.23 at 600
- card-price-line: Card price line, Public Sans 12px/1.33 at 400
- experience-tile-label: Experience tile label, Public Sans 13px/1.43 at 600
- badge-guest-favorite: Badge (Guest favorite), Public Sans 11px/1.18 at 700
- footer-link-legal: Footer link / legal, Public Sans 14px/1.29 at 400
- inspiration-subtitle: Inspiration subtitle, Public Sans 14px/1.29 at 400
- One family for everything
- Sentence case, normal or slightly tight tracking (-0.18px at 20px, -0.44px at 22px)
- Weights 400 / 500 / 600 in UI

## Layout

- margin 48px, margin-phone 24px, gutter 12px, gutter-phone 12px, section 42px, section-phone 42px, container-max 1344px, columns 6
- 48px margins desktop, 24px phone
- 12px gaps between cards
- One row per section, no wrapping

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- circles and pills (search circle, round icon buttons, pill search bar); 16-20px photo corners

## Components

- button-primary: #DA1249 fill, #FFFFFF text, corners {rounded.full}, 48px tall. The one filled action on the homepage: the search button. At rest it is a 48px circle (10px inner padding around a 16px white magnifier); no labelled filled but
- search-button: #DA1249 fill, #FFFFFF text, corners {rounded.full}, 48px tall. 48px circle at x 1087, y 111 (8px inside the pill right end); white 16px magnifier (search.svg, stroke 4)
- chip-phone: #FFFFFF fill, #222222 text, corners {rounded.full}, 40px tall. Category chips under the phone search: icon 28px + 6px + label. Unselected: white, 1px rgba(0,0,0,0.08) border, 0 2px 4px rgba(0,0,0,0.12) drop shadow. Selected
- icon-circle: #F2F2F2 fill, #222222 text, corners {rounded.full}, 40px tall. Profile (profile.svg 20px) at x 1300 and menu (menu.svg 16px, three 3px-stroke lines) at x 1352, y 28; 12px apart
- section-arrow: #F2F2F2 fill, #222222 text, corners {rounded.full}, 28px tall. Desktop: a 28px circle with arrow-right.svg 12px, 4px after the end of the section title text, vertically centered on it (x 314 for Explore experiences nearby).
- carousel-arrows: #F2F2F2 fill, #222222 text, corners {rounded.full}, 28px tall. Desktop only, right end of each row heading: Previous at x 1332 (disabled at rest: chevron #C1C1C1 on a paler #F8F8F8 fill), Next at x 1364 (chevron #222222). 1
- toast: #FFFFFF fill, #222222 text, corners {rounded.sm}, 58px tall. "Prices include all fees": a crisp 1px #DDDDDD outline with only a faint soft shadow. price-tag.svg (pink tag) 28px, its left edge at x+14, vertically centered;

## Do's and Don'ts

- Don't anthropomorphize or characterize the Bélo
- Don't supersize the Bélo
- Don't rausch section grounds or headings in product
- Don't third parties: do not feature Rausch prominently (trademark guidelines)
- Don't second typeface
- Don't all-caps headlines
- Do check: Logo hidden. Cover the logo. It should still read as Airbnb: a pill search with a red circle, rows of rounded real photos, small grey prices, Cereal-like type.
- Do check: Swap test. Put another name on it. If nothing else changed, the search-first header, 3D category icons and Guest favorite badges are missing.

DESIGN.md241 lines · version alpha

---
version: alpha
name: "Asana"
description: "The operating system for human-agent teams."
colors:
  primary: "#ff584a"
  secondary: "#fd3ffd"
  surface: "#ffffff"
  on-surface: "#0b0505"
  light-fuchsia-asana-pink: "#FFC9FF"
  neutral-grey-asana-grey: "#F3F3F3"
  blue: "#0071FF"
  green: "#0FA042"
  yellow: "#C6CD00"
  grey-asana-dark-grey: "#808080"
  magenta: "#F20D83"
  turquoise: "#009271"
typography:
  headline-display:
    fontFamily: "Figtree"
    fontSize: 102px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: -2.55px
  body-md:
    fontFamily: "Figtree"
    fontSize: 20px
    fontWeight: 350
    lineHeight: 1.5
    letterSpacing: 0.4px
  display-l:
    fontFamily: "Figtree"
    fontSize: 54px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -1.08px
  quote:
    fontFamily: "Figtree"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.36px
  subhead:
    fontFamily: "Figtree"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.2
  hero-lead:
    fontFamily: "Figtree"
    fontSize: 26px
    fontWeight: 350
    lineHeight: 1.3
    letterSpacing: 0.52px
  title:
    fontFamily: "Figtree"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.2
  body:
    fontFamily: "Figtree"
    fontSize: 16px
    fontWeight: 350
    lineHeight: 1.5
    letterSpacing: 0.32px
  small:
    fontFamily: "Figtree"
    fontSize: 13px
    fontWeight: 350
    lineHeight: 1.5
    letterSpacing: 0.26px
  eyebrow:
    fontFamily: "Figtree"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.64px
  chip:
    fontFamily: "Figtree"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.44px
  button:
    fontFamily: "Figtree"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
  lg: 10px
  xl: 20px
  2xl: 64px
  3xl: 100px
spacing:
  margin: 76px
  margin-phone: 24px
  gutter: 32px
  gutter-phone: 16px
  section: 120px
  section-phone: 48px
  card-gap: 22px
  container-max: 1288px
  columns: 2
components:
  button-primary:
    backgroundColor: "#0D0D0D"
    textColor: "{colors.surface}"
    rounded: "{rounded.3xl}"
    height: 50px
  button-secondary-nav:
    backgroundColor: "{colors.surface}"
    textColor: "#0D0D0D"
    rounded: "{rounded.3xl}"
    height: 44px
  button-outline:
    backgroundColor: "#FAFAFA"
    textColor: "#0D0D0D"
    rounded: "{rounded.3xl}"
    height: 58px
  button-sso:
    backgroundColor: "#FAFAFA"
    textColor: "#0D0D0D"
    rounded: "{rounded.3xl}"
    height: 69px
  button-primary-on-dark:
    backgroundColor: "{colors.surface}"
    textColor: "#0D0D0D"
    rounded: "{rounded.3xl}"
    height: 64px
  button-secondary:
    backgroundColor: "#FAFAFA"
    textColor: "#0D0D0D"
    rounded: "{rounded.3xl}"
    height: 58px
  product-tab:
    backgroundColor: "#3D3D3D"
    textColor: "{colors.surface}"
    rounded: "{rounded.2xl}"
    height: 56px
  skill-chip:
    backgroundColor: "{colors.neutral-grey-asana-grey}"
    textColor: "#0D0D0D"
    rounded: "{rounded.sm}"
---
# Asana design system

## Overview

Generated on 2026-11-03 from the Asana brand study (unfairly.ai/brand-guidelines/asana/, checked 2026-10-31). An independent study of what Asana publishes and ships, not official Asana guidelines.

White pages and black panels, a coral three-dot mark, very large Light Swiss headlines with one coral-to-fuchsia gradient phrase, and product UI turned into graphics: workflow lines, nodes, pills and Workling characters on a faded dot grid. Fisheye photos keep people at the centre. People and agents in one flow, drawn literally. Asana turns its own interface into the brand: workflow lines connect human avatars to Workling agents and task pills, while the type stays quiet and black-and-white so a single coral-to-fuchsia phrase carries the energy.

- Logo: Combination logo: coral three-dot logomark beside the asana wordmark, horizontal (from the Asana brand study). Link your approved master files.
- Headline on the site: "The OS for human-agent teams"
- Category: Work management, reframed as the OS for teams of people and AI agents
- Audience: Organizations and their cross-functional teams: operations, marketing, client delivery, IT, PMO and R&D (the homepage department tabs)
- Promise: People and agents run critical workflows from one shared plan, with shared memory and governance
- Voice: Clear, Human, Energetic, Productive.
- Third parties writing about Asana: use the name as an adjective before a noun, not as a verb or plural (trademark guidelines; Asana's own pages use the possessive)
- Write Asana Work Graph with the registered mark on first use
- Name humans and agents together when describing who does the work
- Card and product summaries lead with the outcome for the team, not the mechanism

## Colors

- Primary: #ff584a (from the Asana brand study)
- Secondary: #fd3ffd (from the Asana brand study)
- Surface: #ffffff (from the Asana brand study)
- On surface: #0b0505 (from the Asana brand study)
- Asana White (#FFFFFF): Primary. Page and module ground; wordmark color on dark and color grounds
- Asana Black (#0B0505): Primary. Type, buttons, dark grounds, workflow nodes; the wordmark color on white. Pantone Black C
- Asana Coral (#FF584A): Primary. The logomark (always coral); start of every brand gradient. Pantone 171 C
- Fuchsia (#FD3FFD): Primary. End of the headline gradient on light grounds; eyebrow tag fill in the type hierarchy sample. Pantone 807 C. Called "Asana Fucsia" on the pairings page
- Light Fuchsia (Asana Pink) (#FFC9FF): Primary. End of the headline gradient on dark grounds; secondary CTA fill; the pill drop shadow; active tab fill. Pantone 7436 C
- Neutral Grey (Asana Grey) (#F3F3F3): Primary. Light module ground; node outline on workflows. 5% Black C
- Primary pairings: White/Black, Grey/Black, Fuchsia/Black, Pink/Black, Pink/Fuchsia, White/Fuchsia, Grey/Fuchsia, White/Coral, Pink/Coral, White/Dark Grey
- Secondary pairings: light tints with Asana Black; Blue, Green and Yellow with Asana White
- Content modules: white or black grounds; black buttons with a Light Fuchsia secondary
- Gradients: coral to fuchsia on light, coral to light fuchsia on dark, on headline type only

## Typography

- Display: Figtree (from the Asana brand study)
- Body: Figtree (from the Asana brand study)
- TWK Lausanne, Titles 300, CTAs 600, eyebrows and subtitles 900 (guide); site 300-500. Commercial typeface (TWK prefix: the Weltkern foundry); Asana's licence does not transfer
- TWK Lausanne, Copy in 300. Commercial
- headline-display: Hero H1, Figtree 102px/0.9 at 400
- body-md: Body large, Figtree 20px/1.5 at 350
- display-l: Section H2, Figtree 54px/1 at 400
- quote: Quote, Figtree 36px/1.3 at 400
- subhead: Subhead (logo stat, link-card and problem titles), Figtree 30px/1.2 at 500
- hero-lead: Hero lead, Figtree 26px/1.3 at 350
- title: Card and accordion title, Figtree 24px/1.2 at 500
- body: Body, Figtree 16px/1.5 at 350
- small: Small / legal / meta, Figtree 13px/1.5 at 350
- eyebrow: Eyebrow (uppercase), Figtree 16px/1.5 at 500
- chip: Skill chip (uppercase), Figtree 11px/1.5 at 500
- button: Button, Figtree 16px/1.5 at 500
- Titles and copy in 300; CTAs in 600; eyebrows and subtitles in 900 (guide)
- Line height shrinks as size grows: 130% at 12-16px, 120% at 20-24, 115% at 32-36, 110% at 40-64, 100% at 96-128 (300 weight)
- Tracking 0 at 12-20px, -2% at 24-64px, -3% at 96-128px (300); -2.5% at 96+ for 600 and 900, -1.5% for 900 at 24-64

## Layout

- margin 76px, margin-phone 24px, gutter 32px, gutter-phone 16px, section 120px, section-phone 48px, card-gap 22px, container-max 1288px, columns 2
- Lots of white; type leads
- Rounded inset panels (radius 20px) for dark and off-white bands
- Pill buttons only

## Elevation & Depth

- thin single-weight workflow lines with rounded 90-degree turns and small dot nodes

## Shapes

- cards 8-10px, media and panels 16-20px, chips 4px, inputs 4px
- pill

## Components

- button-primary: #0D0D0D fill, #FFFFFF text, corners {rounded.3xl}, 50px tall. Continue 134x50; nav Get started 105x44 (14px, padding 0 16px)
- button-secondary-nav: #FFFFFF fill, #0D0D0D text, corners {rounded.3xl}, 44px tall. Contact sales 120x44
- button-outline: #FAFAFA fill, #0D0D0D text, corners {rounded.3xl}, 58px tall. Learn more 149x58 (padding 16px 32px)
- button-sso: #FAFAFA fill, #0D0D0D text, corners {rounded.3xl}, 69px tall. Google / Microsoft 265x69: 35px white disc with the provider icon, 8px gap, label
- button-primary-on-dark: #FFFFFF fill, #0D0D0D text, corners {rounded.3xl}, 64px tall. Get started 168x64 (20px 400)
- button-secondary: #FAFAFA fill, #0D0D0D text, corners {rounded.3xl}, 58px tall. Learn more 149x58: the outline pill beside or after a black primary
- product-tab: #3D3D3D fill, #FFFFFF text, corners {rounded.2xl}, 56px tall.
- skill-chip: #F3F3F3 fill, #0D0D0D text, corners {rounded.sm}.

## Do's and Don'ts

- Don't fill the logo with unapproved colors
- Don't rotate, reflect or angle the logo
- Don't fill a content module with Coral or Light Fuchsia behind body copy (the guide's usage page marks these wrong)
- Don't set fuchsia copy on a pink ground
- Don't use other typefaces in brand layouts
- Don't use Asana as a verb or plural
- Do check: Logo hidden. Cover the logo. It should still read as Asana: Light Swiss headline with one coral-to-fuchsia phrase, black pill buttons, and workflow lines connecting avatars, Worklings and task pills.
- Do check: Swap test. Put another work-management logo on it. If the workflow-and-Workling graphics and the gradient phrase don't feel borrowed, it is generic.
- Do check: Legibility. Every gradient sits on headline type only, never on a colored content ground.

DESIGN.md185 lines · version alpha

---
version: alpha
name: "Astro"
description: "The web framework for content-driven websites."
colors:
  primary: "#3245ff"
  secondary: "#f041ff"
  surface: "#060913"
  on-surface: "#f2f6fa"
  black: "#0D0F14"
  astro-dark-800: "#0C0F19"
  astro-gray-600: "#23262D"
  astro-gray-200: "#BFC1C9"
  white: "#FFFFFF"
typography:
  headline-display:
    fontFamily: "Hubot Sans"
  body-md:
    fontFamily: "Inter"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.5
  display-xl:
    fontFamily: "Obviously"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
  display-l:
    fontFamily: "Obviously"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.111
  statement:
    fontFamily: "Obviously light wide"
    fontSize: 36px
    fontWeight: 290
    lineHeight: 1.111
  display-m:
    fontFamily: "Obviously"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.2
  title-s:
    fontFamily: "Obviously"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
  eyebrow:
    fontFamily: "system ui-sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
  title-xs:
    fontFamily: "system ui-sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
  body:
    fontFamily: "system ui-sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.5
  button:
    fontFamily: "system ui-sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  nav:
    fontFamily: "system ui-sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.5
  score:
    fontFamily: "system ui-sans-serif"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.2
rounded:
  sm: 8px
  md: 12px
  lg: 16px
  full: 9999px
spacing:
  margin: 112px
  margin-phone: 16px
  gutter: 16px
  gutter-phone: 8px
  section: 144px
  section-phone: 80px
  card-gap: 16px
  container-max: 1280px
  columns: 3
omitted:
  - section: components
    reason: "No component with a measured fill and text color in the Astro brand study"
---
# Astro design system

## Overview

Generated on 2026-11-03 from the Astro brand study (unfairly.ai/brand-guidelines/astro/, checked 2026-10-31). An independent study of what Astro publishes and ships, not official Astro guidelines. Lines marked GAP were not found in the study.

A dark-first web framework brand: a rocket-flame 'A' and a wide, heavy lowercase wordmark; a navy-black night sky lit by four two-stop 'gem' gradients; Obviously for display, Inter Light for reading, MDIO for code; pill buttons; Houston, a square, whimsical mascot reserved for Astro's own use; and plain developer copy with sourced numbers. The early web, launched into space. Astro wraps a plain-HTML idealism in a night-sky look: dark grounds, gem gradients that glow like nebulae, and a rocket in the logo, so a framework about shipping less feels like a mission rather than a tool.

- Logo: The 2023 logo: the rocket-flame 'A' logomark beside a heavy, wide lowercase 'astro' wordmark, horizontal. The gradient version fills the flame with a red-to-pink gradient (from the Astro brand study). Link your approved master files.
- Headline on the site: "The web framework for content-driven websites"
- Category: JavaScript web framework (homepage); web framework for content-rich sites (press).
- Audience: Developers and teams building content-rich sites where performance matters: marketing sites, blogs, e-commerce, docs, portfolios (paraphrase).
- Promise: Faster sites: lightweight server-rendered HTML with zero unnecessary JavaScript, content from anywhere, deploy everywhere (paraphrase).
- Voice: Whimsical, Approachable, Friendly.
- Whimsical, approachable and friendly: Houston's personality, chosen to reflect Astro itself
- Hero and big statements in sentence case (The web framework for content-driven websites)
- Section titles, eyebrows and feature names in Title Case (Zero Lock-in, Fully Featured, Best-In-Class Performance)
- Every performance number carries its dataset and a link to it

## Colors

- Primary: #3245ff (from the Astro brand study)
- Secondary: #f041ff (from the Astro brand study)
- Surface: #060913 (from the Astro brand study)
- On surface: #f2f6fa (from the Astro brand study)
- astro-dark-900 (#060913): Homepage ground; the night sky
- black (#0D0F14): Press and blog ground, nav backing
- astro-dark-800 (#0C0F19): Panels and cards
- astro-gray-600 (#23262D): Panel and input fill (.panel)
- astro-gray-100 (#F2F6FA): Headings and primary text on dark
- astro-gray-200 (#BFC1C9): Body copy, nav, descriptions
- Ground: navy-black (#060913) or black (#0D0F14); panels #0C0F19 or #23262D with a 1px low-opacity border
- Text: #F2F6FA headings, #BFC1C9 body, #858B98 captions
- Gradients only as the four published pairs, each at its own angle
- Eyebrow labels in red-pink gradient text; primary button label in blue-purple gradient text

## Typography

- Display: Hubot Sans (from the Astro brand study)
- Body: Inter (from the Astro brand study)
- Obviously, Headlines and titles; variable weight 290-475, width 490 on the site. Proprietary (OH no Type Company); licensed by Astro, not supplied
- Inter, All reading text, light (200-300), buttons 400, small titles 600. Open (SIL OFL 1.1); variable woff2 in the fonts folder
- MDIO, Code and the install command, light. Proprietary (Mass-Driver); not supplied
- body-md: Lead, Inter 18px/1.5 at 300
- display-xl: Hero H1, Obviously 48px/1.1 at 700
- display-l: Final CTA H2, Obviously 36px/1.111 at 700
- statement: Intro statement, Obviously light wide 36px/1.111 at 290
- display-m: Section title, Obviously 30px/1.2 at 700
- title-s: Chart label, Obviously 20px/1.4 at 700
- eyebrow: Eyebrow, system ui-sans-serif 16px/1.5 at 600
- title-xs: Card / point title, system ui-sans-serif 16px/1.5 at 600
- body: Body / description, system ui-sans-serif 16px/1.5 at 300
- button: Button / tab label, system ui-sans-serif 16px/1.5 at 400
- nav: Nav link, system ui-sans-serif 16px/1.5 at 300
- score: Chart score, system ui-sans-serif 30px/1.2 at 600
- Display: Obviously, width 490, weights 290 light / 380 normal / 475 bold (repo), 700 for the hero
- Hero 48px desktop, 30px phone, line-height 1.1 (observed)
- Section titles 30px desktop, 24px phone (observed)

## Layout

- margin 112px, margin-phone 16px, gutter 16px, gutter-phone 8px, section 144px, section-phone 80px, card-gap 16px, container-max 1280px, columns 3
- Container 1280px, 16/32px side padding (repo .container)
- Hero centered; sections left-aligned with eyebrow, title, half-width description
- Header height 80px (repo h-header 5rem)

## Elevation & Depth

- 1px hairline borders at low opacity (astro-dark-100/20, white/20); horizontal rules under tab rows

## Shapes

- rounded-xl / 2xl (12-16px) on panels, cards and the final CTA; rounded-lg (8px) on agency tiles and inputs; full circles on gem icons
- pill

## Components

- GAP: buttons, cards, charts and tables.

## Do's and Don'ts

- Don't use the Astro logo as your app or website icon
- Don't include the Astro logo in your own logo
- Don't set body copy in a gradient or a saturated color
- Don't build a light-mode page as the default
- Don't set long text in Obviously
- Don't use heavy Inter for body copy
- Do check: Logo hidden. Cover the logo. It should still read as Astro: a navy-black sky, gem-gradient glows and rings, wide Obviously headlines over light Inter, and a pill plus install command.
- Do check: Swap test. Put another framework's logo on it. If the night sky, the four gems and the cited speed number don't feel out of place, it's generic, and it goes back.

DESIGN.md210 lines · version alpha

---
version: alpha
name: "Atlassian"
description: "The teamwork platform for the AI era: apps, agents and the Teamwork Graph give teams and AI the shared context to decide and ship (paraphrase)."
colors:
  primary: "#1868db"
  secondary: "#964ac0"
  surface: "#ffffff"
  on-surface: "#292a2e"
  neutral100: "#F8F8F8"
  neutral800: "#505258"
  neutral1100: "#1E1F21"
typography:
  headline-display:
    fontFamily: "Rethink Sans"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.04
    letterSpacing: -2.44px
  body-md:
    fontFamily: "Wix Madefor Text"
    fontSize: 20px
    fontWeight: 450
    lineHeight: 1.56
    letterSpacing: -0.04px
  section:
    fontFamily: "Rethink Sans"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.16
    letterSpacing: -1.67px
  subsection:
    fontFamily: "Rethink Sans"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -1.23px
  pillar:
    fontFamily: "Rethink Sans"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.24
    letterSpacing: -0.78px
  card-title:
    fontFamily: "Rethink Sans"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.24
    letterSpacing: -0.46px
  story:
    fontFamily: "Rethink Sans"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.36
    letterSpacing: -1.06px
  body:
    fontFamily: "Wix Madefor Text"
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.56
    letterSpacing: -0.1px
  button:
    fontFamily: "Wix Madefor Text"
    fontSize: 20px
    fontWeight: 450
    lineHeight: 1.2
    letterSpacing: 0.06px
  tab:
    fontFamily: "Wix Madefor Text"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.44
    letterSpacing: -0.02px
  nav:
    fontFamily: "Wix Madefor Text"
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1
    letterSpacing: 0.06px
  footer-link:
    fontFamily: "Rethink Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.06px
rounded:
  sm: 3px
  md: 20px
  lg: 40px
  full: 9999px
spacing:
  margin: 136px
  margin-phone: 32px
  gutter: 32px
  gutter-phone: 24px
  section: 80px
  section-phone: 48px
  card-gap: 32px
  container-max: 1168px
  columns: 4
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 48px
  carousel-arrow:
    backgroundColor: "#101214"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 60px
  pause-button:
    backgroundColor: "#DDDEE1"
    textColor: "#101214"
    rounded: "{rounded.full}"
    height: 40px
---
# Atlassian design system

## Overview

Generated on 2026-11-03 from the Atlassian brand study (unfairly.ai/brand-guidelines/atlassian/, checked 2026-10-29). An independent study of what Atlassian publishes and ships, not official Atlassian guidelines.

A white, calm page with one blue (#1868DB) pill, near-black Charlie type, and the product itself as the picture. Behind it sits one of the most complete public design systems anywhere: tokens for every color role, an 8px space scale, and a voice that is bold, optimistic and practical, with a wink saved for wins. Context is the brand. Atlassian shows the work itself (boards, pages, named teammates and agents) instead of metaphors, and runs everything on tokens, so 30+ apps and a marketing site read as one connected system, which is exactly what it sells.

- Logo: Minimum clearance around the Atlassian logo: the height of the capital 'A' in the wordmark
- Headline on the site: "Discover the power of knowing"
- Category: Teamwork and work-management software platform with AI agents (Rovo), sold as apps and collections.
- Audience: Teams from hyper-growth startups to the Fortune 500: software, IT/service, product, strategy and business teams, plus their leaders (CIOs, CTOs, CMOs, CHROs in the Leading with Context reports).
- Promise: Give teams and agents the context they need to make smarter decisions, coordinate and ship with confidence (paraphrase of the hero subline).
- Voice: Bold, Optimistic, Practical, with a wink.
- No periods, bold or italics in new UI headings; rephrase questions as statements. Atlassian's own marketing lines keep their periods verbatim ('Stop searching. Start shipping.', 'Deliver high quality software. Fast.')
- Phrase UI headings with an action verb; avoid gerunds
- No articles in buttons and labels: 'Create password', not 'Create a password'
- Use contractions and curly apostrophes

## Colors

- Primary: #1868db (from the Atlassian brand study)
- Secondary: #964ac0 (from the Atlassian brand study)
- Surface: #ffffff (from the Atlassian brand study)
- On surface: #292a2e (from the Atlassian brand study)
- Blue700 (#1868DB): The brand blue: primary buttons, links, brand text, the Atlassian logo (brand version), the homepage CTA.
- Neutral0 (white) (#FFFFFF): Default surface; the homepage ground.
- Neutral100 (#F8F8F8): Sunken surface (Kanban columns); homepage collection cards.
- Neutral1000 (#292A2E): Default text (color.text). atlassian.com headings run a little darker, #101214 (observed).
- Neutral800 (#505258): Secondary text: navigation, labels, all-caps subheads.
- Neutral1100 (#1E1F21): Dark bands on atlassian.com (observed); the shadow base color in tokens.
- Pick a token by role; don't choose a hex
- Accent colors (gray, red, green, blue, yellow, orange, teal, purple, magenta, lime) only where color has no meaning
- Inverse tokens on bold backgrounds; warning.inverse on yellow
- Contrast: 4.5:1 for text under 24px; 3:1 for text 24px and up and essential UI

## Typography

- Display: Rethink Sans (from the Atlassian brand study)
- Body: Wix Madefor Text (from the Atlassian brand study)
- Charlie Display (Charlie Sans family), atlassian.com headings, weight 500 (observed). Proprietary Atlassian brand font; 'only authenticated users can download' it (atlassian.design typography). Served to atlassian.com fr
- Charlie Text (Charlie Sans family), atlassian.com body, nav and buttons (observed). Proprietary Atlassian brand font; same terms as Charlie Display.
- Atlassian Mono, code (font.code 12/20). Atlassian app font; downloadable in Atlassian Mosaic (TTF) per the guide; no open licence published. The ADS licence limits design-system assets to building add-ons for Atlassian p
- headline-display: Hero headline (Charlie Display 500 -1.28px; stand-in Rethink Sans 600, phone tracking -1.68px), Rethink Sans 64px/1.04 at 600
- body-md: Lead / subline (Charlie Text 400 -0.2px; stand-in Wix Madefor Text 450), Wix Madefor Text 20px/1.56 at 450
- section: Section headline (Charlie 500 -0.96px; stand-in 600, phone tracking -1.11px), Rethink Sans 48px/1.16 at 600
- subsection: Sub-section headline: context, collection h3 (Charlie 500 -0.4px; stand-in 600, phone tracking -0.74px), Rethink Sans 40px/1.2 at 600
- pillar: Pillar title (Charlie 500 0px; stand-in 600, phone tracking -0.49px), Rethink Sans 32px/1.24 at 600
- card-title: Card title, Teamwork Lab (Charlie 500 0px; stand-in 600, phone tracking -0.35px), Rethink Sans 24px/1.24 at 600
- story: Story description / CTA sub (Charlie Display 400 -0.24px; stand-in Rethink Sans 400, phone tracking -0.79px), Rethink Sans 24px/1.36 at 400
- body: Body (Charlie Text 400 -0.16px; stand-in Wix 450), Wix Madefor Text 16px/1.56 at 450
- button: Button (Charlie Text 400; stand-in Wix 450), Wix Madefor Text 20px/1.2 at 450
- tab: Tab (Charlie Text 500; stand-in Wix 600), Wix Madefor Text 18px/1.44 at 600
- nav: Nav link (Charlie Text 400; stand-in Wix 450), Wix Madefor Text 16px/1 at 450
- footer-link: Footer link (Charlie Display 400 +0.42px; stand-in Rethink Sans 400), Rethink Sans 14px/1 at 400
- Headings XXL and XL are for brand and marketing content
- One h1 per page; don't skip heading levels; use heading styles, not bold body
- Body L (16/24) for long-form, Body M (14/20) default in components, Body S (12/16) sparingly

## Layout

- margin 136px, margin-phone 32px, gutter 32px, gutter-phone 24px, section 80px, section-phone 48px, card-gap 32px, container-max 1168px, columns 4
- Group by similarity and proximity; use scale and whitespace for hierarchy
- Only top-level containers align to the grid; small elements use space tokens
- Fixed-wide for dashboards, fixed-narrow for long-form reading, fluid for boards

## Elevation & Depth

- Shadow raised: 0px 1px 1px rgba(30, 31, 33, 0.25), 0px 0px 1px rgba(30, 31, 33, 0.31)
- Shadow overlay: 0px 8px 12px rgba(30, 31, 33, 0.15), 0px 0px 1px rgba(30, 31, 33, 0.31)
- Shadow prov: published

## Shapes

- pill

## Components

- button-primary: #1868DB fill, #FFFFFF text, corners {rounded.full}, 48px tall.
- carousel-arrow: #101214 fill, #FFFFFF text, corners {rounded.full}, 60px tall.
- pause-button: #DDDEE1 fill, #101214 text, corners {rounded.full}, 40px tall.

## Do's and Don'ts

- Don't compose your own attribution logos or deconstruct official assets
- Don't change the tile radius or nest a logomark in another container
- Don't use an accent when the color has semantic meaning
- Don't use link, brand or focused tokens to show selection
- Don't use all caps for headlines
- Don't use Charlie in product UI or Atlassian Sans as the marketing display face
- Do check: Logo hidden. Cover the logo. It should still read as Atlassian: white page, near-black sentence-case headline, one blue pill, real product UI, named teammates or agents, a number with a source.
- Do check: Swap test. Put another SaaS logo on it. If the product UI, the collection tiles and the context argument don't feel out of place, it's generic, and it goes back.
- Do check: Token test. Every color on the page maps to a published token role (brand, neutral, discovery, success, warning, danger). A color with no role is a mistake.

DESIGN.md180 lines · version alpha

---
version: alpha
name: "BBC"
description: "The UK's public service broadcaster: impartial, publicly funded, serving everyone at home and around the world."
colors:
  primary: "#0071f1"
  secondary: "#000000"
  surface: "#ffffff"
  on-surface: "#202224"
  meta-grey: "#545658"
  hairline: "#E6E8EA"
  section-rule: "#3A3C3E"
  night: "#141618"
  muted-on-night: "#AFB1B4"
  live-red: "#EB0000"
  ad-grey: "#F6F6F6"
  save-ring: "#D2D4D6"
typography:
  headline-display:
    fontFamily: "Literata"
    fontSize: 28px
    fontWeight: 550
    lineHeight: 1.143
  body-md:
    fontFamily: "Literata"
    fontSize: 18px
    fontWeight: 550
    lineHeight: 1.222
  summary:
    fontFamily: "Literata"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.286
    letterSpacing: 0.14px
  tile-title:
    fontFamily: "Literata"
    fontSize: 14px
    fontWeight: 550
    lineHeight: 1.286
    letterSpacing: -0.28px
  label:
    fontFamily: "Public Sans"
    fontSize: 15px
    fontWeight: 800
    lineHeight: 1.333
    letterSpacing: 0.75px
  nav:
    fontFamily: "Public Sans"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.286
  button:
    fontFamily: "Public Sans"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.125
  meta:
    fontFamily: "Public Sans"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.167
  live:
    fontFamily: "Public Sans"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.143
rounded:
  none: 0px
  full: 9999px
spacing:
  margin: 96px
  margin-phone: 16px
  gutter: 16px
  gutter-phone: 16px
  section: 48px
  section-phone: 32px
  card-gap: 16px
  container-max: 1248px
  columns: 4
components:
  button-subscribe:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.none}"
    height: 34px
  button-languages:
    backgroundColor: "{colors.hairline}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    height: 44px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.none}"
    height: 34px
---
# BBC design system

## Overview

Generated on 2026-11-03 from the BBC brand study (unfairly.ai/brand-guidelines/bbc/, checked 2026-10-31). An independent study of what BBC publishes and ships, not official BBC guidelines.

The BBC's design system (GEL) publishes its foundations openly: the BBC Reith type family and named type scale, a 1248px grid with 16px gutters, 8px spacing units, a 400-icon set and three motion principles. The front page applies them as a quiet white news grid: serif headlines, small uppercase section labels under thin rules, square photos, one blue button and red only for live. The BBC looks trustworthy by looking the same everywhere: one owned typeface, one grid, one promo pattern, and furniture so quiet that the news and the photographs do all the talking.

- Logo: BBC blocks (three black squares, white letters) (from the BBC brand study). Link your approved master files.
- Headline on the site: "Inform, educate and entertain"
- Category: Public service broadcaster and global news publisher
- Audience: All audiences: every UK household that pays the licence fee, and international audiences of BBC.com and World Service
- Promise: Inform, educate and entertain
- Voice: impartial, clear, precise, curious, plain.
- Single quotation marks in headlines, promo text and quotes within quotes
- Words for one to nine, digits from 10, except in headlines, with units (3kg) and percentages (4%)
- Never start a sentence or headline with digits
- Spell out million and billion except with currencies or in headlines (£5m)

## Colors

- Primary: #0071f1 (from the BBC brand study)
- Secondary: #000000 (from the BBC brand study)
- Surface: #ffffff (from the BBC brand study)
- On surface: #202224 (from the BBC brand study)
- Page white (#FFFFFF): the page ground under every light band
- Reith ink (#202224): headlines, summaries, section labels and the section rule text
- Black (#000000): masthead blocks, nav labels, Sign In, See more outline button, Watch panel, footer links
- Meta grey (#545658): timestamps, topic tags, audio durations, show names; the 1px meta separator bar
- Hairline (#E6E8EA): 1px masthead and nav bottom borders, 1px rule under stacked promos, Follow row border; text colour on the dark ground; fill of the BBC in other languages button
- Section rule (#3A3C3E): 2px rule over every section label on white; 1px footer divider
- All text and background pairs must meet WCAG 2.0 AA: 4.5:1 for normal text, 3:1 for large text (GEL typography)
- Red means live, nowhere else
- One filled colour button per page (Subscribe)

## Typography

- Display: Literata (from the BBC brand study)
- Body: Literata (from the BBC brand study)
- BBC Reith Serif (Medium on headlines), Every promo headline in Medium (28/32 lead and features, 18/22 promos, 14/18 audio titles); GEL names the sizes Canon to Minion. Bespoke BBC face by Dalton Maag; usable only with a 
- BBC Reith Serif (Regular on summaries), Promo summaries 14/18 Regular. Bespoke BBC face; usable only with a BBC agreement
- BBC Reith Sans (UI sans: nav, labels, meta, buttons), Navigation 14 Medium, section labels 15 ExtraBold uppercase, meta 12 Regular, buttons 16 Medium, footer. Bespoke BBC face; usable only with a BBC agreement
- headline-display: Lead / feature / live headline, Literata 28px/1.143 at 550
- body-md: Promo headline, Literata 18px/1.222 at 550
- summary: Summary, Literata 14px/1.286 at 400
- tile-title: Audio tile title, Literata 14px/1.286 at 550
- label: Section label, Public Sans 15px/1.333 at 800
- nav: Nav item, Public Sans 14px/1.286 at 600
- button: Button, Public Sans 16px/1.125 at 600
- meta: Meta (time, tag, duration, show), Public Sans 12px/1.167 at 400
- live: LIVE label, Public Sans 28px/1.143 at 700
- Use BBC Reith everywhere (BBC staff); outside the BBC it needs an agreement, so the kit uses open stand-ins Literata and Public Sans
- Do not adjust Reith's tracking
- Heavier weights for headlines, titles and links: anything interactive or that needs to shout

## Layout

- margin 96px, margin-phone 16px, gutter 16px, gutter-phone 16px, section 48px, section-phone 32px, card-gap 16px, container-max 1248px, columns 4
- Design for the smallest screen first, then add columns
- Columns work to ratios: halves, thirds, quarters
- Spacing between components at least 8px

## Elevation & Depth

- 2px section rules, 1px hairlines (observed)

## Shapes

- 0 on images, buttons and panels (observed)
- square

## Components

- button-subscribe: #0071F1 fill, #FFFFFF text, corners {rounded.none}, 34px tall. Subscribe (101x34, masthead)
- button-languages: #E6E8EA fill, #202224 text, corners {rounded.none}, 44px tall. BBC in other languages + 14px down-caret (206x44), footer
- button-primary: #0071F1 fill, #FFFFFF text, corners {rounded.none}, 34px tall. Subscribe (101x34, masthead)

## Do's and Don'ts

- Don't use Americanisms such as "meet with"
- Don't use double quotes in a headline
- Do check: Contrast. Every text pair meets WCAG 2.0 AA (4.5:1 normal, 3:1 large).
- Do check: Grid. Content column 1248 max, 16px gutters, spacing from the unit scale.
- Do check: Type. Headline sizes from the named scale; no tracking changes on Reith.

DESIGN.md185 lines · version alpha

---
version: alpha
name: "Blender"
description: "The Free and Open Source 3D Creation Suite."
colors:
  primary: "#e87d0d"
  secondary: "#265787"
  surface: "#f2f2f3"
  on-surface: "#4c4d52"
  background-primary: "#FAFAFA"
  text-secondary: "#8D8E96"
  background-tertiary: "#E2E3E4"
  body-dark-ground: "#292D32"
  white: "#FFFFFF"
typography:
  headline-display:
    fontFamily: "Inter"
    fontSize: 72px
    fontWeight: 800
    lineHeight: 1
  body-md:
    fontFamily: "Inter"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.556
  loading:
    fontFamily: "Inter"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.556
  massive:
    fontFamily: "Inter"
    fontSize: 72px
    fontWeight: 800
    lineHeight: 1.3
  display:
    fontFamily: "Inter"
    fontSize: 72px
    fontWeight: 800
    lineHeight: 1.556
  h1:
    fontFamily: "Inter"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.556
  h2:
    fontFamily: "Inter"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.143
  lead-hero:
    fontFamily: "Inter"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.167
  lead:
    fontFamily: "Inter"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.556
  title:
    fontFamily: "Inter"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.167
  body:
    fontFamily: "Inter"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.556
  button:
    fontFamily: "Inter"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.778
rounded:
  sm: 6px
  md: 12px
spacing:
  margin: 151px
  margin-phone: 16px
  gutter: 16px
  gutter-phone: 16px
  section: 48px
  section-phone: 48px
  card-gap: 16px
  container-max: 1170px
  columns: 4
components:
  button-accent:
    backgroundColor: "#47AAF5"
    textColor: "{colors.white}"
    rounded: "{rounded.sm}"
    height: 40px
---
# Blender design system

## Overview

Generated on 2026-11-03 from the Blender brand study (unfairly.ai/brand-guidelines/blender/, checked 2026-10-30). An independent study of what Blender publishes and ships, not official Blender guidelines.

A free-software brand in two layers: a fixed orange-and-blue logo (PMS 716 #E87D0D, PMS 647 #265787) protected by clear trademark rules, and a quiet slate-grey web system (Inter, #4C4D52 on #F2F2F3, #0099FF links) whose color comes from credited art made in Blender. The voice is warm, plain and about freedom. The art is the brand. blender.org is a neutral, rounded, Inter-set frame so that what people make in Blender, credited by name, carries the color and the emotion; the orange-blue logo is the one fixed mark.

- Logo: The Blender logo: the orange-and-blue logomark (an orbit around an eye) plus the lowercase 'blender' wordmark, horizontal, always complete (from the Blender brand study). Link your approved master files.
- Headline on the site: "The Freedom to Create"
- Category: Free and open source 3D creation software (page title: 'The Free and Open Source 3D Creation Software')
- Audience: Artists first, plus studios making animation and VFX, game artists, scientists, students and educators; individual artists and small teams get a complete pipeline (paraphrase).
- Promise: The freedom to create: the whole 3D pipeline, free forever, and the work belongs to you.
- Voice: Free, Community-minded, Enthusiastic, Plainspoken.
- Product copy names the actual tool, technique or standard (path tracer, N-Gons, B-spline bones, planar tracking, OpenGL viewport, Python API). Never replace a feature with a benefit abstraction ('one file from start to finish', 'ready for anything'). Short noun-phrase list items,
- News and Studio excerpts name the real thing (a person, a technique such as NPR or Gaussian splatting, a phase such as fundraising) and may open with a lively verb phrase ('Buckle up', 'Let's take a stroll'). Never generic invitations ('Watch', 'Meet', 'Discover', 'The team share
- Exclamation marks are part of the voice in moderation: one in a line of enthusiasm, never in rules or legal copy
- Write the name as Blender: never abbreviated, modified or combined with other words or symbols into a new mark

## Colors

- Primary: #e87d0d (from the Blender brand study)
- Secondary: #265787 (from the Blender brand study)
- Surface: #f2f2f3 (from the Blender brand study)
- On surface: #4c4d52 (from the Blender brand study)
- Background (#F2F2F3): Web Assets -color-bg: the page ground everywhere.
- Background primary (#FAFAFA): Box and card fill (-box-bg-color).
- Text (#4C4D52): Headings and body on light grounds.
- Text secondary (#8D8E96): Muted text and navbar labels.
- Blender Orange (PMS 716) (#E87D0D): Logo color (published). Used here as the brand accent: our reading; blender.org itself keeps it in the logo and orange badge only.
- Blender Blue (PMS 647) (#265787): Logo wordmark and eye (published).
- Logo colors only in the logo and the community badge
- Page ground #F2F2F3, boxes #FAFAFA, text #4C4D52; dark bands #292D32 with white text
- Links and interactive states in #0099FF; primary accent button is the blue gradient
- Status colors from Web Assets (info #13BDE7, success #6BB125, warning #E4A511, danger #EE5353) with their light backgrounds

## Typography

- Display: Inter (from the Blender brand study)
- Body: Inter (from the Blender brand study)
- Inter, Hero and massive titles at 800, headings at 600. Open (SIL OFL 1.1), copyright The Inter Project Authors; shipped in Blender Web Assets
- Inter, Body 400, buttons 500, light 300. Open (SIL OFL 1.1)
- ui-monospace system stack, Code. System fonts; no brand mono shipped
- headline-display: Hero H1, Inter 72px/1 at 800
- body-md: Box paragraph, Inter 20px/1.556 at 400
- loading: Font loading (read first), Inter 18px/1.556 at 400
- massive: Massive title (boxes), Inter 72px/1.3 at 800
- display: Features heading, Inter 72px/1.556 at 800
- h1: Feature title, Inter 32px/1.556 at 600
- h2: Section label H2, Inter 28px/1.143 at 600
- lead-hero: Hero subtitle, Inter 24px/1.167 at 400
- lead: Feature description, Inter 24px/1.556 at 400
- title: Card title, Inter 21px/1.167 at 400
- body: Body / excerpt, Inter 18px/1.556 at 400
- button: Button label, Inter 18px/1.778 at 500
- FONT LOADING (build-critical): Load Inter exactly as blender.org does: ONE @font-face for the variable file registered at font-weight: 400 only (src Inter-Variable.ttf format('truetype'), font-weight: 400, font-style: normal), and set every weight with font-variation-settings: "w
- All card titles (news, Development, Studio, people cards) use text-wrap: balance, so 2-line titles split into even halves (e.g. 'Connecting / Blender Community', 'Showcasing Blender / at industry events', 'BCON26: Blender / Studio talks'). The hero subtitle also uses balance. Bod
- Inter for all text; weights 300, 400, 500 (buttons), 600 (headings), 800 (hero/massive titles)

## Layout

- margin 151px, margin-phone 16px, gutter 16px, gutter-phone 16px, section 48px, section-phone 48px, card-gap 16px, container-max 1170px, columns 4
- Container 820 / 940 / 1170 / 1320 / 1600px at sm / md / lg / xl / xxl
- Breakpoints 900, 980, 1220, 1380, 1680px
- Spacer 16px: 4, 8, 16, 24, 48, 96, 192

## Elevation & Depth

- 2px borders (-border-width .2rem); soft low-alpha shadows on boxes

## Shapes

- 6px (-border-radius) on buttons and inputs; 12px (-border-radius-lg) on boxes, cards, images and covers
- rounded

## Components

- button-accent: #47AAF5 fill, #FFFFFF text, corners {rounded.sm}, 40px tall. Download Blender (253x40), Donate (nav 104x32, footer 260x40)

## Do's and Don'ts

- Don't use the Blender logo as your own logo
- Don't modify, enhance, recolor or show the logo incomplete
- Don't recolor the logo
- Don't set UI elements in the logo orange (not done anywhere on blender.org)
- Don't add letter-spacing
- Don't use a second display face
- Do check: Logo hidden. Cover the logo. It should still read as blender.org: Inter on slate grey, rounded 12px boxes, a credited render made in Blender, freedom-first copy.
- Do check: Swap test. Put another 3D tool's logo on it. If the art credits, the free-and-open-source message and the community voice don't feel out of place, it's generic.
- Do check: Trademark. The logo is complete and unaltered, and nothing implies a third party is official Blender.

DESIGN.md198 lines · version alpha

---
version: alpha
name: "Canada.ca"
description: "The federal digital presence that connects people to authoritative government information and services."
colors:
  primary: "#26374a"
  secondary: "#284162"
  surface: "#ffffff"
  on-surface: "#333333"
  selected-link: "#0535D2"
  visited-link: "#7834BC"
  form-error: "#D3080C"
  title-rule-red: "#A62A1E"
  fip-red: "#EB2D37"
  black: "#000000"
typography:
  headline-display:
    fontFamily: "Lato"
    fontSize: 41px
    fontWeight: 700
    lineHeight: 1.17
  body-md:
    fontFamily: "Noto Sans"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
  h2:
    fontFamily: "Lato"
    fontSize: 39px
    fontWeight: 700
    lineHeight: 1.23
  h3:
    fontFamily: "Lato"
    fontSize: 29px
    fontWeight: 700
    lineHeight: 1.37
  h4:
    fontFamily: "Lato"
    fontSize: 27px
    fontWeight: 700
    lineHeight: 1.33
  h5:
    fontFamily: "Lato"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.33
  h6:
    fontFamily: "Lato"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.45
  small:
    fontFamily: "Noto Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.44
  home-h1:
    fontFamily: "Lato"
    fontSize: 41px
    fontWeight: 500
    lineHeight: 1.17
  home-h2:
    fontFamily: "Lato"
    fontSize: 29px
    fontWeight: 700
    lineHeight: 1.23
  home-alert:
    fontFamily: "Lato"
    fontSize: 29px
    fontWeight: 700
    lineHeight: 1.37
  home-service:
    fontFamily: "Lato"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.37
rounded:
  none: 0px
  sm: 4px
spacing:
  margin: 150px
  margin-phone: 15px
  gutter: 30px
  gutter-phone: 30px
  card-gap: 20px
  container-max: 1140px
  columns: 3
components:
  all-services-button:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    height: 58.17px
    width: 148.03px
  search-submit:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.none}"
    height: 45px
    width: 45px
  sign-in:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.none}"
    height: 45px
    width: 75.73px
---
# Canada.ca design system

## Overview

Generated on 2026-11-03 from the Canada.ca brand study (unfairly.ai/brand-guidelines/canada/, checked 2026-10-30). An independent study of what Canada.ca publishes and ships, not official Canada.ca guidelines. Lines marked GAP were not found in the study.

A public-service identity built from recognizable federal symbols, mostly white pages, dark readable text, bold Lato headings and Noto Sans body copy. The public task leads; shared navigation and plain language make the government easier to use. Recognition creates trust; clarity turns that trust into task completion.

- Logo: Bilingual Government of Canada flag signature in the header; Canada wordmark in the footer (from the Canada.ca brand study). Link your approved master files.
- GAP: headline not detected.
- Category: Government information and service website.
- Audience: People seeking Government of Canada services and information, including people using mobile devices and assistive technologies.
- Promise: Consistent navigation and clear content help people find answers and complete their tasks.
- Voice: direct, informative, conversational, professional.
- Use sentence case for titles, headings, captions and table headers; retain proper nouns and omit final punctuation. Campaign slogans may retain punctuation.
- Address readers with you and your. Do not narrate their task as I or my except in proper names.
- Use we and our for government as a whole. Name a department when its specific role or contact matters.
- Choose familiar terms, explain necessary technical terms and remove internal government jargon.

## Colors

- Primary: #26374a (from the Canada.ca brand study)
- Secondary: #284162 (from the Canada.ca brand study)
- Surface: #ffffff (from the Canada.ca brand study)
- On surface: #333333 (from the Canada.ca brand study)
- White (#FFFFFF): Default page background; the majority of a page stays white
- Dark grey (#333333): Primary text; selected elements in service initiation templates
- Default link (#284162): Resting link colour in mandatory Canada.ca colour guidance
- Selected link (#0535D2): Hover or focus link colour in mandatory Canada.ca guidance
- Visited link (#7834BC): Visited link colour in mandatory Canada.ca guidance
- Main accent (#26374A): Accent only in Canada.ca styles
- Keep a majority white page; alternative section backgrounds must meet the specified enhanced text contrast criterion. (Source: https://design.canada.ca/styles/colours.html)
- Use #284162 default links, #0535D2 hover/focus and #7834BC visited. (Source: https://design.canada.ca/styles/colours.html)
- Use #26374A as accent, #D3080C for error or required indicators and #333333 for selected initiation elements. (Source: https://design.canada.ca/styles/colours.html)
- Prefer semantic GC tokens; use base shades only when existing globals cannot serve the need. Check combinations rather than treating every shade as an approved text pairing. (Source: https://design-system.canada.ca/en/foundations/colour/)

## Typography

- Display: Lato (from the Canada.ca brand study)
- Body: Noto Sans (from the Canada.ca brand study)
- Lato. SIL Open Font License 1.1
- Noto Sans. SIL Open Font License 1.1
- Noto Sans Mono. SIL Open Font License 1.1
- headline-display: H1 core content heading, Lato 41px/1.17 at 700
- body-md: General body, Noto Sans 20px/1.6 at 400
- h2: H2 core content heading, Lato 39px/1.23 at 700
- h3: H3 core content heading, Lato 29px/1.37 at 700
- h4: H4 core content heading, Lato 27px/1.33 at 700
- h5: H5 core content heading, Lato 24px/1.33 at 700
- h6: H6 core content heading, Lato 22px/1.45 at 700
- small: Small pattern text, Noto Sans 16px/1.44 at 400
- home-h1: Homepage H1, Lato 41px/1.17 at 500
- home-h2: Section H2, Lato 29px/1.23 at 700
- home-alert: Warning H3, Lato 29px/1.37 at 700
- home-service: Service title, Lato 20px/1.37 at 700
- Use the published H1 to H6 scale and body sizes; pattern-specific navigation typography can differ. (Source: https://design.canada.ca/styles/typography.html)
- Keep text lines to 65 characters; full layouts may be wider. Underline links with descender-skipping decoration. (Source: https://design.canada.ca/styles/typography.html)
- Use one H1 for main content and progress through heading levels without skipping. Maintain heading semantics even when applying a smaller visual style. (Source: https://design-system.canada.ca/en/foundations/typography/)

## Layout

- margin 150px, margin-phone 15px, gutter 30px, gutter-phone 30px, card-gap 20px, container-max 1140px, columns 3
- Use the default 1140px content maximum; rare large data tables may require horizontal scrolling. Small-screen layouts typically become one column. (Source: https://design.canada.ca/styles/layouts.html)
- Keep text lines within 65 characters even if the grid is wider. (Source: https://design.canada.ca/styles/typography.html)
- Preserve mandatory shared header/footer elements and determine optional items by standard, transactional or campaign page type. (Source: https://design.canada.ca/common-design-patterns/global-header.html)

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- GAP: corner radii and shape language.

## Components

- all-services-button: #FFFFFF fill, #26374A text, corners {rounded.sm}, 58.17px tall. All services
- search-submit: #26374A fill, #FFFFFF text, corners {rounded.none}, 45px tall.
- sign-in: #26374A fill, #FFFFFF text, corners {rounded.none}, 45px tall.

## Do's and Don'ts

- Don't alter, stretch, skew, rotate, crop, shadow or pattern the symbols; put them into a sentence or URL; translate them beyond English and French. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/size-position-design
- Don't redraw the Canada wordmark in Baskerville or recreate a signature in web fonts. (Source: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/design-standard/official-symbols-design-standard-fip.html)
- Don't treat FIP red, the H1 rule red and the form-error red as interchangeable. (Source: https://design.canada.ca/common-design-patterns/signature.html)
- Don't use colour or texture alone to communicate table information. (Source: https://design.canada.ca/style-guide/index.html)
- Don't use small text below the recommended 16px merely to fit more content. (Source: https://design.canada.ca/styles/typography.html)
- Don't use all capitals or decorative italics in general writing. (Source: https://design.canada.ca/style-guide/index.html)
- Do check: Recognizable source. Verify official assets, the red flag on white and separate header/footer identifiers before evaluating decorative fidelity. (Source: https://design.canada.ca/common-design-patterns/signature.html)
- Do check: Task completion. Can a person find the needed information, understand it and take the next action? Assess with users, not only visual conformity. (Source: https://design.canada.ca/specifications/design-content.html)
- Do check: Source boundary. Check which colour and typography layer applies. Mandatory Canada.ca values and GC foundation tokens should not be silently interchanged. (Source: https://design.canada.ca/styles/colours.html)

DESIGN.md189 lines · version alpha

---
version: alpha
name: "City of Boston"
description: "The City of Boston, speaking with boldness and warmth: official when it must be, human by default."
colors:
  primary: "#1871bd"
  secondary: "#fb4d42"
  surface: "#ffffff"
  on-surface: "#091f2f"
  freedom-red-dark: "#D22D23"
  supporting-blue-near-black: "#061622"
  supporting-blue-footer: "#0C2639"
  supporting-blue-desaturated: "#45789C"
  supporting-blue-bright: "#51ACFF"
  optimistic-blue-light-screen-reader: "#28A7DF"
  optimistic-blue-hover: "#175182"
  hero-alt-blue: "#2D82CF"
typography:
  headline-display:
    fontFamily: "Montserrat"
    fontSize: 90px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -1px
  body-md:
    fontFamily: "Lora"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 2.17
  display-l:
    fontFamily: "Montserrat"
    fontSize: 45px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -1px
  kicker:
    fontFamily: "Lora"
    fontSize: 35px
    fontWeight: 400
    lineHeight: 1.32
  lead:
    fontFamily: "Lora"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.5
  title-xl:
    fontFamily: "Montserrat"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1
  title-l:
    fontFamily: "Montserrat"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: 1px
  title-m:
    fontFamily: "Montserrat"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1
  card-title:
    fontFamily: "Lora"
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.32
  news-title:
    fontFamily: "Lora"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.27
    letterSpacing: 0.4px
  body-s:
    fontFamily: "Lora"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
  caption:
    fontFamily: "Lora"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  none: 0px
spacing:
  margin: 120px
  margin-phone: 39px
  gutter: 28px
  gutter-phone: 0px
  section: 56px
  section-phone: 35px
  card-gap: 28px
  container-max: 1200px
  columns: 4
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.none}"
    height: 62px
---
# City of Boston design system

## Overview

Generated on 2026-11-03 from the City of Boston brand study (unfairly.ai/brand-guidelines/boston/, checked 2026-10-30). An independent study of what City of Boston publishes and ships, not official City of Boston guidelines.

The City of Boston brands Boston.gov with a bold underlined B, a red-white-and-blue palette grounded in white and gray, Montserrat caps with Lora italics, candid photography and a plain-language voice. The open Fleet pattern library turns it into code. Bold but human: the City underlines what matters, speaks plainly, and keeps the seal for when it must look official.

- Logo: The City of Boston logo: CITY of BOSTON wordmark in Charles Blue, a small italic serif "of", BOSTON underlined in Freedom Trail Red. The short form is the bold B underlined in red (from the City of Boston brand study). Link your approved master files.
- Headline on the site: "We are Boston."
- Category: Municipal government: the official website and communications of the City of Boston, Massachusetts
- Audience: Residents, City employees, businesses and visitors of every background and language
- Promise: Make things easier and simpler for the people of Boston
- Voice: Confident, Helpful, Optimistic, Humble, Personal.
- Never use if, maybe, but, may or could; state it
- Make statements, not questions
- Prefer a full stop to a comma; short sentences, few adjectives
- Headlines at most 11 words

## Colors

- Primary: #1871bd (from the City of Boston brand study)
- Secondary: #fb4d42 (from the City of Boston brand study)
- Surface: #ffffff (from the City of Boston brand study)
- On surface: #091f2f (from the City of Boston brand study)
- White (#FFFFFF): Primary color of the site: dominant page ground and the white space that grounds content
- Charles Blue (#091F2F): Every heading, section-header rule, date strikethrough rule, site banner, footer ground, guide tiles 2 and 4, input borders
- Optimistic Blue (#1871BD): All buttons, every card title link, hero photo overlay at 60%, guide tile 1, card hover fill
- Freedom Trail Red (#FB4D42): Guide tile 3 ground, numbered circles and Guide: kicker on dark tiles, B and wordmark underlines, button hover
- Freedom Red Dark (#D22D23): Menu button ground, search icon, Contact: links, CANCELED: prefix
- Supporting blue: near black (#061622): Darkest supporting blue, used very rarely when something must resemble black
- Keep white dominant; use light gray liberally with it
- Use the blues strongly and purposefully
- Use red sparingly: it can alarm
- Charles Blue for headers and anything that must look official

## Typography

- Display: Montserrat (from the City of Boston brand study)
- Body: Lora (from the City of Boston brand study)
- Montserrat, Navigation, buttons, primary headers, uppercase bold. Open (SIL OFL 1.1), Google Web Fonts; site serves a 2016-era build
- Lora, Body text; large italic for quotes and secondary text. Open (SIL OFL 1.1), Google Web Fonts
- headline-display: Hero H1, Montserrat 90px/1 at 700
- body-md: Body, Lora 18px/2.17 at 400
- display-l: Section header, Montserrat 45px/1 at 700
- kicker: Hero kicker, Lora 35px/1.32 at 400
- lead: Lead (stay connected), Lora 30px/1.5 at 400
- title-xl: Guide tile title, Montserrat 30px/1 at 700
- title-l: Mayor subhead, Montserrat 30px/1.08 at 600
- title-m: Date strikethrough, Montserrat 28px/1 at 700
- card-title: Card title link, Lora 25px/1.32 at 400
- news-title: News headline, Lora 22px/1.27 at 400
- body-s: Card description, Lora 18px/1.5 at 400
- caption: Status note / councilor title, Lora 16px/1.5 at 400
- Montserrat for navigation, buttons and primary headers, uppercase
- Lora for body text; large italic for quotes and secondary text
- Pair the two whenever possible

## Layout

- margin 120px, margin-phone 39px, gutter 28px, gutter-phone 0px, section 56px, section-phone 35px, card-gap 28px, container-max 1200px, columns 4
- White dominant, light gray bands between
- Every section starts with an uppercase header on a rule
- Square cards in even grids

## Elevation & Depth

- 3px strokes: icon outlines, small circular icons, input borders, numbered guide circles

## Shapes

- square (0px) on every card, tile, input and image; circles only for headshots and icon frames
- square

## Components

- button-primary: #1871BD fill, #FFFFFF text, corners {rounded.none}, 62px tall. MORE CITY NEWS (205x62)

## Do's and Don'ts

- Don't use the official seal on screens
- Don't redraw or recolor the underline
- Don't put Optimistic Blue on Freedom Trail Red, or red on Optimistic Blue: they vibrate
- Don't use the near-black blue except when you need something like black
- Don't set Montserrat headers in sentence case
- Don't use a third face
- Do check: Logo hidden. Cover the B. It should still read as Boston: Montserrat caps on heavy Charles Blue rules, Lora italic blue links, white with gray bands, a red accent used once.
- Do check: Swap test. Put another city's seal on it. If the underlines, the red-white-blue and the plain we/you copy still feel at home, it is not specific enough.

DESIGN.md187 lines · version alpha

---
version: alpha
name: "Discord"
description: "The communications platform for building connections around playing games, through voice, video and text (paraphrase)."
colors:
  primary: "#5865f2"
  secondary: "#e0e3ff"
  surface: "#ffffff"
  on-surface: "#23272a"
  black: "#000000"
  green: "#57F287"
  yellow: "#FEE75C"
  fuchsia: "#EB459E"
  red: "#ED4245"
  deep-space: "#1A2081"
  space-top: "#080925"
  space-glow: "#353AAA"
typography:
  headline-display:
    fontFamily: "Archivo"
    fontSize: 61px
    fontWeight: 900
    lineHeight: 0.41
  body-md:
    fontFamily: "DM Sans"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.32px
  display-xl:
    fontFamily: "Archivo"
    fontSize: 56px
    fontWeight: 900
    lineHeight: 0.857
    letterSpacing: -0.56px
  display-lg:
    fontFamily: "Archivo"
    fontSize: 48px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: -0.48px
  display-md:
    fontFamily: "Archivo"
    fontSize: 36px
    fontWeight: 900
    lineHeight: 0.93
    letterSpacing: -0.36px
  button-lg:
    fontFamily: "DM Sans"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.25px
  nav:
    fontFamily: "DM Sans"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
  footer-link:
    fontFamily: "DM Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  footer-label:
    fontFamily: "DM Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
rounded:
  sm: 12px
  md: 14px
  lg: 16px
  xl: 104px
  2xl: 120px
spacing:
  margin: 100px
  margin-phone: 24px
  gutter: 48px
  gutter-phone: 0px
  section: 140px
  section-phone: 110px
  card-gap: 206px
  container-max: 1240px
  columns: 2
components:
  button-white-large:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    height: 65px
  button-blurple-large:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 65px
  button-login:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.black}"
    rounded: "{rounded.lg}"
    height: 39px
---
# Discord design system

## Overview

Generated on 2026-11-03 from the Discord brand study (unfairly.ai/brand-guidelines/discord/, checked 2026-10-31). An independent study of what Discord publishes and ships, not official Discord guidelines.

Discord's brand is Blurple, Clyde and a wide custom Ginto wordmark. Its homepage turns that into a night-sky page of glossy 3D toys, huge-radius glass cards and shouty uppercase headlines that talk like friends in a group chat. Discord sells hanging out, not software: everything on the page is a toy (3D props, cartoon cast, a smiling logo), and the only serious things are the type weight and the Blurple.

- Logo: Horizontal logo: Clyde symbol plus Discord wordmark, in Blurple, black or white (from the Discord brand study). Link your approved master files.
- Headline on the site: "Group chat that's all fun & games"
- Category: Group voice, video and text chat for gamers
- Audience: Players and their friends, plus communities built around games
- Promise: A place to talk, play and hang out with friends on any device
- Voice: playful, casual, welcoming, bold.
- Talk about friends, games and hanging out, not features or productivity
- Casual slang is allowed in body copy (idk, chill, spam memes); never in legal copy
- No stats, customer logos or testimonials on the homepage
- Use "Discord" as a proper noun or an adjective (a Discord server); never turn it into a verb or put it in another name

## Colors

- Primary: #5865f2 (from the Discord brand study)
- Secondary: #e0e3ff (from the Discord brand study)
- Surface: #ffffff (from the Discord brand study)
- On surface: #23272a (from the Discord brand study)
- Blurple (#5865F2): Primary brand color: logo color option, the brand button fill (Open Discord in your browser), every blurple ground
- Light Blurple (#E0E3FF): Published second brand color: light grounds; on the homepage it is the giant footer wordmark fill
- Black (#000000): Published third brand color on the branding page: logo-on-black ground, guide page ground
- Not quite black (#23272A): The 2021 palette's Black (HEX 23272A, RGB 35,39,42); text on white buttons (Download for Mac)
- Green (#57F287): 2021 palette: status-inspired accent (Online); PMS 3385 C
- Yellow (#FEE75C): 2021 palette: status-inspired accent (Away)
- Blurple is the brand color and the primary button fill
- Type is white on the homepage
- Status colors (green, yellow, red) come from app states; fuchsia is a playful extra
- Light Blurple for the giant footer wordmark and light grounds

## Typography

- Display: Archivo (from the Discord brand study)
- Body: DM Sans (from the Discord brand study)
- ABC Ginto Discord Nord (Bold), Every headline, the wordmark lettering, the marquee words; always uppercase on the homepage. Proprietary: a custom version of ABC Ginto Nord from Dinamo, licensed by Discord. Not for reuse.
- ABC Ginto Discord (Regular, Medium), Body copy, buttons, nav, footer on the marketing site. Proprietary: Discord's custom cut of Dinamo's ABC Ginto Normal. Not for reuse.
- gg sans, The Discord app itself; on the homepage only inside product videos. Proprietary Discord UI face (shown inside product screenshots and the app). Not for reuse.
- headline-display: Marquee word, Archivo 61px/0.41 at 900
- body-md: Body large (hero and cards), DM Sans 20px/1.3 at 400
- display-xl: Hero H1, Archivo 56px/0.857 at 900
- display-lg: Closing banner H2, Archivo 48px/1.2 at 900
- display-md: Feature card H2, Archivo 36px/0.93 at 900
- button-lg: Hero button label, DM Sans 20px/1.3 at 400
- nav: Nav link / Log In, DM Sans 16px/1.2 at 500
- footer-link: Footer link, DM Sans 16px/1.5 at 400
- footer-label: Footer label, DM Sans 16px/1.25 at 400
- Headlines uppercase, Nord Bold, line-height under 1
- Body 20px/26px on desktop, 16px/20.8px on phone
- Nav and buttons in the body face, 500 for nav

## Layout

- margin 100px, margin-phone 24px, gutter 48px, gutter-phone 0px, section 140px, section-phone 110px, card-gap 206px, container-max 1240px, columns 2
- Alternate the media side card by card
- Keep text columns about 384px wide
- Phone: everything stacks, text first, 24px margins

## Elevation & Depth

- none: depth comes from 3D renders and gradients

## Shapes

- very large radii: 120px glass cards, 104px media, 56px/48px on phone; the branding page uses about 48px on logo tiles
- rounded

## Components

- button-white-large: #FFFFFF fill, #23272A text, corners {rounded.sm}, 65px tall. Download for Mac (hero, 262x65, with a 24px download icon before the label)
- button-blurple-large: #5865F2 fill, #FFFFFF text, corners {rounded.sm}, 65px tall. Open Discord in your browser (hero, 326x65)
- button-login: #FFFFFF fill, #000000 text, corners {rounded.lg}, 39px tall. Log In (nav, 80x39)

## Do's and Don'ts

- Don't edit, change, distort, recolor or reconfigure the logo
- Don't use the marks in your server, product, bot or company name
- Don't use corporate claims like "best-in-class"
- Don't write the name in all caps as a word
- Do check: Logo hidden. Cover Clyde. Blurple, wide heavy uppercase, glossy 3D toys and huge rounded glass cards should still say Discord.
- Do check: Swap test. Put another chat app's logo on it. If it still reads as a party about friends and games, not a productivity tool, it is Discord-like enough.

DESIGN.md203 lines · version alpha

---
version: alpha
name: "Django"
description: "A high-level Python web framework that encourages rapid development and clean, pragmatic design (paraphrase)."
colors:
  primary: "#44b78b"
  secondary: "#20aa76"
  surface: "#ffffff"
  on-surface: "#0c3c26"
  logo-green: "#092E20"
  dark-green: "#0C4B33"
  white: "#F1FFF7"
  text-light: "#798780"
  gray-line: "#CFE3DC"
  off-white: "#F8F8F8"
  black: "#0E1117"
typography:
  headline-display:
    fontFamily: "Roboto"
    fontSize: 36px
    fontWeight: 300
    lineHeight: 1.3
    letterSpacing: -1px
  body-md:
    fontFamily: "Roboto"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  banner:
    fontFamily: "Roboto"
    fontSize: 32px
    fontWeight: 300
    lineHeight: 1.3
    letterSpacing: -1px
  h1:
    fontFamily: "Roboto"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -1px
  h2:
    fontFamily: "Roboto"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.6
  feature-title:
    fontFamily: "Roboto"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  card-title:
    fontFamily: "Roboto"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
  side-heading:
    fontFamily: "Roboto"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
  news-title:
    fontFamily: "Roboto"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.2
  small:
    fontFamily: "Roboto"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
  meta:
    fontFamily: "Roboto"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.3
  readmore:
    fontFamily: "Roboto"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.6
rounded:
  sm: 4px
  md: 5px
  lg: 20px
  xl: 40px
spacing:
  margin: 60px
  margin-phone: 10px
  gutter: 106px
  gutter-phone: 10px
  section: 40px
  section-phone: 40px
  card-gap: 60px
  container-max: 1320px
  columns: 2
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    height: 61px
  button-sidebar:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    height: 58px
  search-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
---
# Django design system

## Overview

Generated on 2026-11-03 from the Django brand study (unfairly.ai/brand-guidelines/django/, checked 2026-10-31). An independent study of what Django publishes and ships, not official Django guidelines.

A one-color lowercase wordmark in deep Logo Green, a site built from greens (Dark Green header, Medium Green CTAs and banners, Green links) on white with pale Gray Line hairlines, set entirely in open Roboto with Fira Mono for code. A docs-first voice: an expert talking to a fellow developer, plain about difficulty, wary of superlatives. A developers' institution that looks like a well-kept manual: one family of greens, one open sans in a few weights, thin rules and generous reading width. Nothing shouts; the documentation is the brand.

- Logo: The lowercase 'django' wordmark set in DTL Prokyon, one color: green #092E20 on white, or white on a #092E20 ground (from the Django brand study). Link your approved master files.
- Headline on the site: "The web framework for perfectionists with deadlines."
- Category: Python web framework, free and open source
- Audience: Web developers on deadlines who want it right: 'perfectionists with deadlines'; experienced web developers.
- Promise: Build better web apps more quickly and with less code (paraphrase of the homepage hero).
- Voice: Human, Expert, Plainspoken.
- Don't reach for grandiose, empty superlatives (clear, robust, structured)
- Capitalize Django; lowercase only in Python code and in the logo
- Capitalize Python when referring to the language
- model, template, view lowercase; URLconf; subclass as one word; 'an HTTP', 'an SQL'

## Colors

- Primary: #44b78b (from the Django brand study)
- Secondary: #20aa76 (from the Django brand study)
- Surface: #ffffff (from the Django brand study)
- On surface: #0c3c26 (from the Django brand study)
- Logo Green (#092E20): The logo's only color. Published on the logos page; not used as a UI color in the site's SCSS.
- Text (#0C3C26): Primary. Main text, headings.
- Dark Green (#0C4B33): Primary. Header, title bar, bottom footer strip.
- Green (#20AA76): Primary. Links and icons.
- White (#F1FFF7): Primary. Faint green-white: nav text on Dark Green, light ground.
- Medium Green (#44B78B): Secondary. CTA fill, green copy banner, footer.
- Primary colors for main text, links and backgrounds; secondary for hover, alternate text and borders
- Text in Text #0C3C26, never pure black
- Header, title bar and footer strip in Dark Green #0C4B33
- CTA buttons and the copy banner in Medium Green #44B78B

## Typography

- Display: Roboto (from the Django brand study)
- Body: Roboto (from the Django brand study)
- Roboto, Copy banner in Light 300; headings in Normal 400 and Bold 700. Open source (Google Fonts; Apache 2.0 originally, SIL OFL 1.1 in current releases); self-hosted by djangoproject.com
- Roboto, Body 18px/1.6, sidebars, nav, footer; five styles only (300, 400, 400 italic, 700, 700 italic). Open source (Google Fonts)
- Fira Mono, Documentation and code examples only; 400 and 700. SIL OFL 1.1 (Mozilla)
- headline-display: Hero line (homepage copy banner), Roboto 36px/1.3 at 300
- body-md: Body / intro / feature text, Roboto 18px/1.6 at 400
- banner: Copy banner (section pages, guide), Roboto 32px/1.3 at 300
- h1: Main H1 (Meet Django), Roboto 32px/1.1 at 400
- h2: Main H2 (Join the Community), Roboto 24px/1.6 at 400
- feature-title: Feature title (24px on phone), Roboto 18px/1.6 at 400
- card-title: Community card title, Roboto 20px/1.2 at 700
- side-heading: Sidebar heading, Roboto 20px/1.2 at 400
- news-title: News title, Roboto 16px/1.2 at 700
- small: Sidebar text, links, descriptions, Roboto 14px/1.6 at 400
- meta: News byline (meta), Roboto 14px/1.3 at 400
- readmore: Read-more link, sidebar (uppercase + ›), Roboto 12px/1.6 at 700
- Roboto Light 300, Normal 400, Normal Italic, Bold 700, Bold Italic only
- Copy banner 32px Roboto Light, tracking -1px
- H1 32 Normal, H2 24 Normal, H3 20 Bold, H4 16 Bold, H5 16 Normal (main content)

## Layout

- margin 60px, margin-phone 10px, gutter 106px, gutter-phone 10px, section 40px, section-phone 40px, card-gap 60px, container-max 1320px, columns 2
- Default: sidebar left (main 63% floated right, sidebar 30%) for navigation
- Sidebar right for secondary content
- Single column max 740px for marketing, landing and single-purpose pages

## Elevation & Depth

- 1px Gray Line #CFE3DC hairlines divide sections, sidebar headings and lists

## Shapes

- small: 5px on CTAs, 4px on framed images, example boxes and blockquotes
- rounded

## Components

- button-primary: #44B78B fill, #FFFFFF text, corners {rounded.md}, 61px tall. Get started with Django (267x61)
- button-sidebar: #44B78B fill, #FFFFFF text, corners {rounded.md}, 58px tall. Download latest release: 6.1.2 (full sidebar width, 396x58); the em part is #C9F0DD, roman
- search-field: #FFFFFF fill, #0C3C26 text, corners {rounded.sm}.

## Do's and Don'ts

- Don't recolor it outside the official color
- Don't stretch or distort it
- Don't add a non-green accent color
- Don't use the logo green #092E20 as a UI fill in place of Dark Green #0C4B33
- Don't use weights or italics that are not loaded
- Don't set prose in Fira Mono
- Do check: Logo hidden. Cover the wordmark. It should still read as Django: a Dark Green header, Medium Green buttons and banner, Roboto Light with tight tracking, thin pale-green rules and a calm reading column.
- Do check: Swap test. Put another framework's logo on it. If the all-green system, the docs-like layout and the plain, expert copy don't feel out of place, it's generic; send it back.
- Do check: Banned words. Search the copy for easily, simply, just, merely and straightforward.

DESIGN.md180 lines · version alpha

---
version: alpha
name: "Dropbox"
description: "For teams drowning in scattered files and tools, Dropbox is one place to store, share and find work, so less time goes to busywork and more to finished work."
colors:
  primary: "#0061fe"
  secondary: "#f7f5f2"
  surface: "#ffffff"
  on-surface: "#1e1919"
  grey-600: "#736C64"
typography:
  headline-display:
    fontFamily: "Archivo"
    fontSize: 40px
    fontWeight: 650
    lineHeight: 1.2
    letterSpacing: -0.8px
  body-md:
    fontFamily: "Public Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.16px
  section-headline-wide-cut:
    fontFamily: "Archivo"
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.13
    letterSpacing: 0.3px
  feature-headline:
    fontFamily: "Archivo"
    fontSize: 26px
    fontWeight: 650
    lineHeight: 1.3
    letterSpacing: -0.52px
  card-title:
    fontFamily: "Archivo"
    fontSize: 18px
    fontWeight: 650
    lineHeight: 1.2
    letterSpacing: -0.36px
  small-heading:
    fontFamily: "Public Sans"
    fontSize: 20px
    fontWeight: 650
    lineHeight: 1.2
    letterSpacing: 0.2px
  lead:
    fontFamily: "Public Sans"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.2px
  eyebrow-and-button-label:
    fontFamily: "Public Sans"
    fontSize: 16px
    fontWeight: 650
    lineHeight: 1.2
    letterSpacing: 0.16px
  nav-link:
    fontFamily: "Public Sans"
    fontSize: 14px
    fontWeight: 650
    lineHeight: 1.43
    letterSpacing: 0.14px
  pill-label:
    fontFamily: "Public Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.14px
  overline:
    fontFamily: "Public Sans"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.12px
  footer-link:
    fontFamily: "Public Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.57
    letterSpacing: 0.14px
rounded:
  sm: 12px
  md: 16px
  lg: 20px
  xl: 28px
  full: 9999px
spacing:
  margin: 48px
  margin-phone: 24px
  gutter: 24px
  section: 72px
  section-phone: 72px
  container-max: 1344px
  columns: 24
components:
  announcement-bar:
    backgroundColor: "#DEEBFF"
    textColor: "#0044AF"
    height: 56px
---
# Dropbox design system

## Overview

Generated on 2026-11-03 from the Dropbox brand study (unfairly.ai/brand-guidelines/dropbox/, checked 2026-10-28). An independent study of what Dropbox publishes and ships, not official Dropbox guidelines. Lines marked GAP were not found in the study.

Warm off-white and a warm near-black carry the page, with Dropbox Blue on the buttons. A custom grotesk at medium weight, square full-bleed planes, and a wide accent palette where every light color brings its own dark. Structure is the personality. Dropbox gives every piece the same calm Coconut and Graphite frame, then lets one accent and the Tab carry the feeling. Change the accent and it is still Dropbox; break the frame and it is not.

- Logo: Full logo for partnerships and video; the Tab for compositions. The dropbox.com nav uses the Tab with the word mark beside it (desktop) and the bare glyph (phone), observed 2026-10-29
- Headline on the site: "For All Things Worth Saving"
- Category: Dropbox is one place to keep life organized and keep work moving.
- Audience: individuals and teams; the homepage names construction, media, technology, professional services, manufacturing and education. Dash campaign work targets creative and marketing teams.
- Promise: Dropbox is designed to simplify the frenzy of modern work.
- Voice: Simple, Helpful, Human, Magic.
- No jargon: write the way you talk
- Every message says what happens next and how to get there
- Trim words; prefer strong, concrete nouns

## Colors

- Primary: #0061fe (from the Dropbox brand study)
- Secondary: #f7f5f2 (from the Dropbox brand study)
- Surface: #ffffff (from the Dropbox brand study)
- On surface: #1e1919 (from the Dropbox brand study)
- Dropbox Blue (#0061FE): Core. Buttons, nav CTA, the Tab. Not used as a band ground on the homepage (observed on the dropbox.com homepage, 2026-10-28).
- Coconut (#F7F5F2): Core. Hero and alternate grounds, cards on white, text on blue and Graphite
- Graphite (#1E1919): Core. All headings and body, dark bands (#1E1919). Muted text on it is #A09D9B
- White (#FFFFFF): Feature bands (observed on dropbox.com)
- Grey 600 (#736C64): Muted text on light grounds. The site computes it as rgba(82,74,62,0.82), which renders about #706961 on Coconut; #736C64 is the brand site token (observed 2026-10-29)
- On the homepage, blue fills buttons; grounds are Coconut, white and Graphite (observed on the dropbox.com homepage, 2026-10-28)
- Text on a light accent is that accent's dark partner (shown on brand.dropbox.com/color)
- The guide shows photos matched to an accent (Canopy, Zen, Crimson) as examples, without a rule

## Typography

- Display: Archivo (from the Dropbox brand study)
- Body: Public Sans (from the Dropbox brand study)
- DB Sharp Grotesk (Sharp Grotesk Variable for headlines), Headlines. Two cuts on dropbox.com: Sharp Grotesk width 20 Medium (500) for hero, feature and card titles, and Sharp Grotesk 23 Book (400), a wider, lighter cut, f
- Atlas Grotesk, Body, leads, buttons, labels on dropbox.com (observed in computed styles; not named in the guidelines). Proprietary (Commercial Type)
- headline-display: Hero headline, Archivo 40px/1.2 at 650
- body-md: Body, Public Sans 16px/1.5 at 400
- section-headline-wide-cut: Section headline (wide cut), Archivo 34px/1.13 at 400
- feature-headline: Feature headline, Archivo 26px/1.3 at 650
- card-title: Card title, Archivo 18px/1.2 at 650
- small-heading: Small heading, Public Sans 20px/1.2 at 650
- lead: Lead, Public Sans 20px/1.5 at 400
- eyebrow-and-button-label: Eyebrow and button label, Public Sans 16px/1.2 at 650
- nav-link: Nav link, Public Sans 14px/1.43 at 650
- pill-label: Pill label, Public Sans 14px/1.2 at 400
- overline: Overline, Public Sans 12px/1.2 at 700
- footer-link: Footer link, Public Sans 14px/1.57 at 400
- Sentence case; never above weight 500 on the live site
- Ease the weight down a notch on dark grounds (the guide; dropbox.com keeps 500 on Graphite)
- Body in a neutral grotesk at 16px, line height 1.5

## Layout

- margin 48px, margin-phone 24px, gutter 24px, section 72px, section-phone 72px, container-max 1344px, columns 24

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- GAP: corner radii and shape language.

## Components

- announcement-bar: #DEEBFF fill, #0044AF text, 56px tall.

## Do's and Don'ts

- Don't edit, distort, recolor, rotate, stretch or rebuild the logo
- Don't put the logo in your own logo, product or domain name
- Do check: Logo hidden. Cover the logo. It should still read as Dropbox: Coconut and Graphite planes, blue on the action in product and web pieces (campaigns may run full blue grounds), a medium-weight grotesk, an accent with its own dark.
- Do check: Swap test. Put a competitor's logo on it. If a blue-on-white SaaS page could wear it just as well, it's generic, and it goes back.

DESIGN.md191 lines · version alpha

---
version: alpha
name: "Duolingo"
description: "The world's most popular, most enjoyable way to learn a language (guide, \"The Duolingo Difference\")"
colors:
  primary: "#58cc02"
  secondary: "#1cb0f6"
  surface: "#ffffff"
  on-surface: "#4b4b4b"
  mask-green: "#89E219"
  cardinal: "#FF4B4B"
  bee: "#FFC800"
  fox: "#FF9600"
  beetle: "#CE82FF"
  humpback: "#2B70C9"
  wolf: "#777777"
  hare: "#AFAFAF"
typography:
  headline-display:
    fontFamily: "Mochiy Pop P One"
    fontSize: 56.5px
    fontWeight: 400
    lineHeight: 1.416
    letterSpacing: -1.13px
  body-md:
    fontFamily: "Baloo 2"
    fontSize: 17px
    fontWeight: 475
    lineHeight: 1.41
    letterSpacing: -0.25px
  display-l:
    fontFamily: "Mochiy Pop P One"
    fontSize: 42.5px
    fontWeight: 400
    lineHeight: 1.412
  hero:
    fontFamily: "Baloo 2"
    fontSize: 32px
    fontWeight: 650
    lineHeight: 1.375
    letterSpacing: -0.4px
  button:
    fontFamily: "Baloo 2"
    fontSize: 15px
    fontWeight: 650
    lineHeight: 1.33
    letterSpacing: 0.5px
  badge:
    fontFamily: "Baloo 2"
    fontSize: 17px
    fontWeight: 650
    lineHeight: 1.18
    letterSpacing: -0.34px
  footer-head:
    fontFamily: "Baloo 2"
    fontSize: 19px
    fontWeight: 650
    lineHeight: 1.4
    letterSpacing: -0.38px
  footer-link:
    fontFamily: "Baloo 2"
    fontSize: 15px
    fontWeight: 650
    lineHeight: 1.47
    letterSpacing: -0.3px
  footer-lang:
    fontFamily: "Baloo 2"
    fontSize: 13px
    fontWeight: 650
    lineHeight: 1.23
    letterSpacing: -0.26px
rounded:
  sm: 12px
spacing:
  margin: 226px
  margin-phone: 15px
  gutter: 101px
  gutter-phone: 0px
  section: 96px
  section-phone: 96px
  card-gap: 12px
  container-max: 988px
  columns: 2
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 50px
    width: 330px
  button-outline:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    height: 50px
    width: 330px
  app-badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    height: 63px
---
# Duolingo design system

## Overview

Generated on 2026-11-03 from the Duolingo brand study (unfairly.ai/brand-guidelines/duolingo/, checked 2026-10-29). An independent study of what Duolingo publishes and ships, not official Duolingo guidelines.

Duolingo runs on a green owl and a bright cartoon world. Feather Green #58CC02 leads on white; headlines are short and lowercase in the bespoke Feather Bold, everything else in DIN Next Rounded (the site serves its own duolingo-sans). Illustration, not photography, carries the brand: Duo and a diverse cast built from rounded shapes. On the web every action is a chunky ALL CAPS button with a solid lip. A game you want to open: one loud green, rounded cartoon shapes and tactile buttons make learning look like play.

- Logo: Colors: Feather Green, white or gray only
- Headline on the site: "Everyone can Duolingo."
- Category: Language learning app (homepage now also offers chess and math courses, observed)
- Audience: Everyone: consumers in developed and developing markets, institutions, prospective employees, volunteer community (messages by audience)
- Promise: Everyone can Duolingo.
- Voice: expressive, playful, embracing, worldly.
- Button copy in ALL CAPS, no punctuation in buttons ("NO THANKS", not "NO, THANKS")
- Sentence case for headers, subheads, page and blog titles; Feather Bold headlines fully lowercase
- No period at the end of headlines or subheads; an exclamation point is allowed
- Avoid em dashes and semicolons: prefer two short sentences; if an em dash is unavoidable, space both sides

## Colors

- Primary: #58cc02 (from the Duolingo brand study)
- Secondary: #1cb0f6 (from the Duolingo brand study)
- Surface: #ffffff (from the Duolingo brand study)
- On surface: #4b4b4b (from the Duolingo brand study)
- Feather Green (#58CC02): Headlines, primary buttons, footer ground. "When in doubt, lean in to green." White labels on it for 15px bold caps buttons only (2.1:1 by the WCAG formula).
- Mask Green (#89E219): Ground on which Duo can be placed.
- Eel (#4B4B4B): Text color; never for Feather headlines unless printing one-color.
- Snow (#FFFFFF): Primary background of every app and page.
- Macaw (#1CB0F6): Links, outline-button labels, full-bleed grounds, illustration.
- Cardinal (#FF4B4B): Splashes, full-bleed grounds, errors in the app.
- Hierarchy: 1 Feather Green (the core), 2 Mask Green (ground for Duo), 3 Eel (type), 4 Snow (background)
- Secondaries add splashes to UI and illustration and may be bold full-bleed backgrounds
- Neutrals give utility and hierarchy without competing
- Use Duo's palette exactly for each body part

## Typography

- Display: Mochiy Pop P One (from the Duolingo brand study)
- Body: Baloo 2 (from the Duolingo brand study)
- Feather Bold (served on www.duolingo.com as "feather", weight 700), Large, brief headlines: lowercase, left-aligned, about 10 words at most, 30px minimum, in Feather Green or white on color. Proprietary and bespoke to Du
- DIN Next Rounded (brand law); www.duolingo.com serves its own "duolingo-sans" (variable, 100-900), Headlines of 10+ words, subheads, all body copy, ALL CAPS buttons; 14px minimum, leading 140%. DIN Next Rounded: commerci
- headline-display: Band headline, centred, #042C60 (anytime) or #58CC02 (closing). BUILD: Mochiy Pop P One 400 56.5px, line-height 80px, letter-spacing -1.13px (-0.02em); phone 32px, line-height 45px, -0.64px. Site: feather 700 64/80 -1.28px, Mochiy Pop P One 56.5px/1.416 at 400
- body-md: Feature paragraph, #777777; inline link #1CB0F6 Baloo 2 650 -0.34px, no underline. BUILD: Baloo 2 475 17/24, letter-spacing -0.25px (-0.015em). Site: duolingo-sans 400, 0px, Baloo 2 17px/1.41 at 475
- display-l: Feature and DET headline, lowercase, #58CC02. BUILD: Mochiy Pop P One 400 42.5px, line-height 60px, letter-spacing 0; phone 32px, line-height 45px, 0. Site: feather 700 48/60 and 36/45, Mochiy Pop P One 42.5px/1.412 at 400
- hero: Hero sentence, #4B4B4B, centred. BUILD: Baloo 2 650 32/44, letter-spacing -0.4px (-0.0125em). Site: duolingo-sans 700, 0px, Baloo 2 32px/1.375 at 650
- button: Button label, course-strip label, SITE LANGUAGE control: ALL CAPS. BUILD: Baloo 2 650 15px, line-height 20px, letter-spacing +0.5px (0.033em), text-transform uppercase. Site: duolingo-sans 700 +0.8px, Baloo 2 15px/1.33 at 650
- badge: App-store badge text, #4B4B4B, mixed case. BUILD: Baloo 2 650, small line 14/17 -0.28px over big line 17/20 -0.34px (-0.02em), Baloo 2 17px/1.18 at 650
- footer-head: Footer column heading, #D7FFB8. BUILD: Baloo 2 650 19/26.6, letter-spacing -0.38px (-0.02em), Baloo 2 19px/1.4 at 650
- footer-link: Footer link #A5ED6E; "Site language:" label same style in #D7FFB8. BUILD: Baloo 2 650 15/22, letter-spacing -0.3px (-0.02em), Baloo 2 15px/1.47 at 650
- footer-lang: Site-language link, #A5ED6E. BUILD: Baloo 2 650 13/16, letter-spacing -0.26px (-0.02em), Baloo 2 13px/1.23 at 650
- Feather Bold: large brief headlines, left-aligned lists, sentences ending with "Duolingo"
- Feather Bold: leading 100-110% (tighter above 80px), tracking -20, kerning optical, min 30px, lowercase always, left-aligned, never justified or hyphenated, about 10 words max
- DIN Next Rounded: headlines of 10+ words, subheads, all body; leading 140% (tighter above 40px), tracking 0, min 14px, left or centred

## Layout

- margin 226px, margin-phone 15px, gutter 101px, gutter-phone 0px, section 96px, section-phone 96px, card-gap 12px, container-max 988px, columns 2
- See kit.spec.page and kit.spec.layout for every measured value
- Logo in a corner or centred (guide); the site puts it top-left of the column

## Elevation & Depth

- none; flat color only. No gradients in the logo (published)
- 2px hairlines: #E5E5E5 on white (course strip, sticky nav), #A5ED6E on the green footer (observed)
- Shadow illustration: pill-shaped flat shadows under characters, darker than the base (published). UI: no blur shadows; the 3D button "lip" is a solid 4px (primary) or 2px (outline) offset box-shadow (observed)

## Shapes

- rounded everywhere: "pointy shapes are off-brand" (shape language); UI radius 12px on every button and badge (observed); course flags are rounded rectangles
- rounded

## Components

- button-primary: #58CC02 fill, #FFFFFF text, corners {rounded.sm}, 50px tall.
- button-outline: #FFFFFF fill, #1CB0F6 text, corners {rounded.sm}, 50px tall.
- app-badge: #FFFFFF fill, #4B4B4B text, corners {rounded.sm}, 63px tall.

## Do's and Don'ts

- Don't change the color
- Don't squash it
- Don't set Feather Bold in several secondary colors
- Don't use gray as an illustration base
- Don't combine DIN Next Rounded and Feather Bold in one sentence
- Don't set Feather Bold in multiple secondary colors
- Do check: Logo hidden. Cover the logo. It should still read as Duolingo: a white page, one loud Feather Green, short lowercase rounded headlines, chunky caps buttons with a solid lip, and a rounded cartoon character somewhere.
- Do check: Swap test. Put another app's logo on it. If the lip buttons, the green Feather headlines and the rounded cast don't feel out of place, it's generic, and it goes back.
- Do check: Copy check. Buttons ALL CAPS with no punctuation; Feather lines lowercase and under about 10 words; "learners", never "users"; no period at the end of a headline.

DESIGN.md191 lines · version alpha

---
version: alpha
name: "Fedora"
description: "An innovative platform for hardware, clouds, and containers, built with love by you."
colors:
  primary: "#51a2da"
  secondary: "#3c6eb4"
  surface: "#ffffff"
  on-surface: "#294172"
  freedom-purple: "#A07CBC"
  friends-magenta: "#DB3279"
  features-orange: "#E59728"
  first-green: "#79DB32"
  black: "#000000"
  dark-fedora-blue-4: "#6F81A6"
  fedora-blue-5: "#E8EFF8"
typography:
  headline-display:
    fontFamily: "Montserrat"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1
  body-md:
    fontFamily: "Open Sans"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.556
  lead:
    fontFamily: "Open Sans"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
  display-m:
    fontFamily: "Montserrat"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.111
  title-gradient:
    fontFamily: "Montserrat"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.2
  title-l:
    fontFamily: "Montserrat"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.2
  label-display:
    fontFamily: "Montserrat"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.333
  statement:
    fontFamily: "Montserrat"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
  label-ui:
    fontFamily: "Open Sans"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.333
  eyebrow:
    fontFamily: "Open Sans"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.556
  numeral:
    fontFamily: "Open Sans"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1
  caption:
    fontFamily: "Open Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.429
rounded:
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  margin: 80px
  margin-phone: 16px
  gutter: 64px
  gutter-phone: 16px
  section: 48px
  section-phone: 48px
  container-max: 1280px
  columns: 2
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 48px
  release-circle:
    backgroundColor: "#60A5FA"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
---
# Fedora design system

## Overview

Generated on 2026-11-03 from the Fedora brand study (unfairly.ai/brand-guidelines/fedora/, checked 2026-10-31). An independent study of what Fedora publishes and ships, not official Fedora guidelines.

A blue-led community brand: the Infinity f in its one-square-cornered bubble, a seven-hue palette that runs from Dark Fedora Blue through purple, magenta and orange to green, one hue per Foundation, Montserrat headlines over Open Sans copy, tinted 3D renders of the logo as backgrounds, and four hand-drawn mascots. A voice that says it plainly, invites everyone in and holds a hard line on free software. Four values, one shape. Fedora's whole system is the Four Foundations made visible: the logo's bubble becomes the badge for each value, each value gets its own hue, and the spectrum of those hues is the palette. Blue anchors it, the other colors say which part of the community is speaking.

- Logo: The Infinity design logo: a lowercase 'f' drawn as one continuous infinity stroke, knocked out of a speech-bubble shape (a circle with one square corner), set left of the rounded lowercase 'fedora' wordmark. Default is the horizontal lockup in New Fedora Blue #51A2DA (from the Fedora brand study). Link your approved master files.
- Headline on the site: "It's Your Operating System"
- Category: Free and open source Linux operating system and its community; a platform, not just a distribution (paraphrase).
- Audience: Software developers and community members building solutions for their users, and everyone from home desktop users to enterprise customers (paraphrase of the Mission and First foundation).
- Promise: It's your operating system: the latest free software, stable and robust, with no ads and your data your own (paraphrase).
- Voice: Plain-spoken, Welcoming, Principled, Playful.
- Use active voice and the imperative for instructions; watch -ing words, which usually signal passive voice
- Present tense unless describing actual future plans ('your program starts', not 'will start')
- Write clearly and use shorter sentences; cut weak forms of 'to be'. Clarity beats brevity when a longer sentence reads easier
- Italics for commands, package names and UI labels inside a sentence; never mix monospace into a proportional sentence; bold only for an extremely important phrase

## Colors

- Primary: #51a2da (from the Fedora brand study)
- Secondary: #3c6eb4 (from the Fedora brand study)
- Surface: #ffffff (from the Fedora brand study)
- On surface: #294172 (from the Fedora brand study)
- White (#FFFFFF): Content page ground throughout the guide; one-color white logo; text on tinted renders. Published p.16.
- Dark Fedora Blue (#294172): Headings and body text on white in the guide; dark ground. RGB 41/65/144, CMYK 100/57/0/38, Pantone 541. Published p.15.
- New Fedora Blue (#51A2DA): The logo color. RGB 81/162/218, CMYK 88/20/0/0, Pantone 299. Published p.15.
- Fedora Blue (#3C6EB4): Freedom badge fill; deeper blue. RGB 60/110/180, CMYK 100/46/0/0, Pantone 2935. Published p.15.
- Freedom Purple (#A07CBC): Named for Freedom; spectrum midpoint. RGB 160/124/188, CMYK 46/53/0/0, Pantone 2087. Published p.15.
- Friends Magenta (#DB3279): Friends badge; Colors chapter tint; the guide's 'don't' strike-throughs. RGB 219/50/121, CMYK 0/100/0/0, Pantone 226. Published p.15.
- Use only the palette: main colors, their published ramps, or the color-blind safe set (p.12, p.15-17)
- Use the CMYK values for professionally printed collateral and objects: banners, T-shirts, hats, stickers (p.14)
- Pantone references for spot color: 541, 2935, 299, 2087, 226, 130, 7488 (p.15)
- Text on white in Dark Fedora Blue; on tinted renders and dark blue, white (observed in the guide)

## Typography

- Display: Montserrat (from the Fedora brand study)
- Body: Open Sans (from the Fedora brand study)
- Montserrat, Titling and headlines; also the Fedora Editions logos and the sub-logo templates (p.8-9, p.18). The booklet sets its chapter titles in Montserrat SemiBold and its running text in Montserrat Light/Regular. Ope
- Open Sans, Body text and copy, 'a wide range of weights' (Light to Ultra-Bold with italics, p.19). Open (SIL OFL 1.1, Google Fonts); the guide: openly licensed and freely distributable
- headline-display: Hero H1, Montserrat 60px/1 at 600
- body-md: Body, Open Sans 18px/1.556 at 400
- lead: Hero lead, Open Sans 30px/1.2 at 400
- display-m: Section H2, Montserrat 36px/1.111 at 600
- title-gradient: Edition card title, Montserrat 30px/1.2 at 700
- title-l: Block and support H3, Montserrat 30px/1.2 at 600
- label-display: Hero side labels (EVENTS:), Montserrat 24px/1.333 at 600
- statement: DPG statement, Montserrat 20px/1.4 at 400
- label-ui: CHANNELS: label / footer heads, Open Sans 24px/1.333 at 600
- eyebrow: Tagline, Open Sans 18px/1.556 at 400
- numeral: Release number, Open Sans 60px/1 at 700
- caption: Release label, Open Sans 14px/1.429 at 400
- Montserrat for titles and headlines (p.18)
- Open Sans for body text and copy (p.18)
- Edition, app and team names in uppercase Montserrat beside the logo (p.8-9)

## Layout

- margin 80px, margin-phone 16px, gutter 64px, gutter-phone 16px, section 48px, section-phone 48px, container-max 1280px, columns 2
- Header band plus white body for content; full-bleed render for openers (observed)
- Left-aligned titles (observed)

## Elevation & Depth

- Flat white glyphs inside bubbles (Four Foundations, p.5); no stroke spec

## Shapes

- Fully round shapes with a single square corner; pill-shaped hex labels (p.16-17). No radius values published
- The Fedora bubble: a circle with one square corner (the logo's container shape), reused as badge, swatch chip and marker

## Components

- button-primary: #51A2DA fill, #FFFFFF text, corners {rounded.sm}, 48px tall. Learn More on edition cards (146.6x48 desktop, 119.7x38 phone)
- release-circle: #60A5FA fill, #FFFFFF text, corners {rounded.full}.

## Do's and Don'ts

- Don't adjust any of the logos (p.11)
- Don't switch the colors, e.g. purple bubble with orange wordmark (p.11)
- Don't stray from the palette (p.12)
- Don't print from RGB or hex: blue comes out purple (p.14)
- Don't swap in other fonts on Magazine featured images (Magazine guidelines)
- Don't set the wordmark in Montserrat: the 'fedora' wordmark is its own drawing (p.7, our reading)
- Do check: Logo hidden. Cover the infinity-f. It should still read as Fedora: a blue gradient field with a diagonal cut, white Montserrat Title Case headline, Open Sans copy, and the blue release circle.
- Do check: Swap test. Put another Linux distribution's logo on it. If the Fedora blues, the edition cards with their own marks and the plain, community-first copy don't feel out of place, it's generic, and it goes back.

DESIGN.md241 lines · version alpha

---
version: alpha
name: "Figma"
description: "Figma presents itself as the full-stack creative canvas: one place where teammates and AI agents design, build and ship together."
colors:
  primary: "#000000"
  secondary: "#757575"
  surface: "#ffffff"
  on-surface: "#000000"
  hairline: "#D6D6D6"
  wash: "#F5F5F5"
  red: "#FF3737"
  purple: "#874FFF"
  green: "#24CB71"
  orange: "#FF7237"
  blue: "#00B6FF"
typography:
  headline-display:
    fontFamily: "Inter"
    fontSize: 88px
    fontWeight: 350
    lineHeight: 1
    letterSpacing: -2.7px
  body-md:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: -0.12px
  hero-headline-h1:
    fontFamily: "Inter"
    fontSize: 56px
    fontWeight: 350
    lineHeight: 1
    letterSpacing: -1.7px
  outro-bar-label:
    fontFamily: "Inter"
    fontSize: 56px
    fontWeight: 350
    lineHeight: 1
    letterSpacing: -1.7px
  section-headline-large-h2:
    fontFamily: "Inter"
    fontSize: 44px
    fontWeight: 340
    lineHeight: 1.1
    letterSpacing: -0.66px
  section-headline-h2-two-tone:
    fontFamily: "Inter"
    fontSize: 30px
    fontWeight: 330
    lineHeight: 1.2
    letterSpacing: -0.45px
  hero-button-label:
    fontFamily: "Inter"
    fontSize: 30px
    fontWeight: 330
    lineHeight: 1.2
    letterSpacing: -0.45px
  dropdown-big-link:
    fontFamily: "Inter"
    fontSize: 24px
    fontWeight: 320
    lineHeight: 1.3
    letterSpacing: -0.3px
  small:
    fontFamily: "Inter"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.45
  footer-link:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.45
    letterSpacing: -0.5px
  mono-label:
    fontFamily: "IBM Plex Mono"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.48px
  badge:
    fontFamily: "IBM Plex Mono"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.6px
rounded:
  none: 0px
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  2xl: 24px
  full: 9999px
spacing:
  margin: 40px
  margin-phone: 16px
  gutter: 16px
  gutter-phone: 16px
  section: 80px
  section-phone: 40px
  container-max: 1360px
  columns: 12
components:
  nav-cta:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    height: 46px
    width: 193px
  hero-button:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    height: 84px
    width: 224px
  outro-bar:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.2xl}"
    height: 136px
    width: 1360px
  media-pause:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 36px
    width: 36px
  marquee-pause:
    backgroundColor: "{colors.wash}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 36px
    width: 36px
  footer-social:
    backgroundColor: "#3D3D3D"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 36px
    width: 36px
  footer-badge:
    backgroundColor: "#292929"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    height: 21px
---
# Figma design system

## Overview

Generated on 2026-11-03 from the Figma brand study (unfairly.ai/brand-guidelines/figma/, checked 2026-10-29). An independent study of what Figma publishes and ships, not official Figma guidelines. Lines marked GAP were not found in the study.

A black-and-white product page where the color comes from the work. One light weight of Figma Sans, square media and a giant black Get started button. Behind it sits a jumbo language of primitives and an expanded palette for campaigns. The canvas is the brand. Figma keeps its own chrome black, white and quiet so the things people make in Figma supply all the color, and saves its jumbo primitives for campaigns.

- Logo: Wordmark in black or white only, chosen for APCA Lc 60 or better
- Headline on the site: "The full-stack creative canvas"
- Category: Collaborative design and product-development platform: Figma Design, Make, Weave, Dev Mode, Motion, Specs, FigJam, Slides, Draw, Sites, Buzz (footer Product column).
- Audience: Whole product teams, not only designers: Figma says only about a third of its users identify as designers.
- Promise: Go from idea to shipped product in one shared space, with your team and your agents.
- Voice: Plain, Declarative, Calm.
- Use a Figma mark as an adjective (the Figma platform), never as a noun, verb or possessive
- Say "for Figma" (Tom's plugin for Figma design), never "Tom's Figma plugin"
- Never put Figma or "Fig" in your own company, product, domain or handle
- Section heads: a black claim sentence, then a grey (#757575) explanation at the same size

## Colors

- Primary: #000000 (from the Figma brand study)
- Secondary: #757575 (from the Figma brand study)
- Surface: #ffffff (from the Figma brand study)
- On surface: #000000 (from the Figma brand study)
- Black (#000000): Published: the wordmark is black or white only. On figma.com, all type, every filled button, and the footer ground.
- White (#FFFFFF): Published wordmark color on dark. The ground of every homepage band except the footer.
- Grey 54% (#757575): Observed: the second sentence of every two-tone heading, dropdown labels, captions.
- Hairline (#D6D6D6): Observed: 1px rules beside the quote and stat, and the inset ring of outlined buttons.
- Wash (#F5F5F5): Observed: the 36px media-control circles and light pills.
- Red (#FF3737): Published icon shape (PMS 032 U).
- Homepage and landing pages: white grounds, black type and buttons, #757575 for secondary text
- Brand color comes from imagery and primitives, not UI chrome
- Campaign pieces pick one scheme: a primary plus four secondaries

## Typography

- Display: Inter (from the Figma brand study)
- Body: Inter (from the Figma brand study)
- Figma Sans, Every heading on figma.com at CSS weight 400 (renders light), wdth 96 at 56px and up. Proprietary: commissioned from Grilli Type for the 2024 refresh; not licensed to third parties
- Figma Sans, Body, nav, buttons, links: 16px weight 400, wdth 98. Proprietary (Grilli Type for Figma)
- Figma Mono, Uppercase footer column heads, dropdown group labels, NEW/BETA badges. Proprietary (part of the 2024 type family, with Figma Condensed and Figma Hand by OH no Type)
- headline-display: Stat numeral, Inter 88px/1 at 350
- body-md: Body / feature title / link, Inter 16px/1.4 at 300
- hero-headline-h1: Hero headline (h1), Inter 56px/1 at 350
- outro-bar-label: Outro bar label, Inter 56px/1 at 350
- section-headline-large-h2: Section headline large (h2), Inter 44px/1.1 at 340
- section-headline-h2-two-tone: Section headline (h2, two-tone), Inter 30px/1.2 at 330
- hero-button-label: Hero button label, Inter 30px/1.2 at 330
- dropdown-big-link: Dropdown big link, Inter 24px/1.3 at 320
- small: Small, Inter 14px/1.45 at 300
- footer-link: Footer link, Inter 16px/1.45 at 300
- mono-label: Mono label, IBM Plex Mono 16px/1.3 at 400
- badge: Badge, IBM Plex Mono 12px/1 at 400
- One weight; size does the work
- Tight negative tracking at display sizes
- Mono only for uppercase labels and badges

## Layout

- margin 40px, margin-phone 16px, gutter 16px, gutter-phone 16px, section 80px, section-phone 40px, container-max 1360px, columns 12
- 40px margins, 1360px content at 1440; 16px on phones
- 80px band padding (40px phones)
- One full-bleed media grid per page

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- rounded rectangles on square media: 8px (46px nav buttons), 16px (84px hero Get started), 24px (136px outro bar), full circles for 36px media controls

## Components

- nav-cta: #000000 fill, #FFFFFF text, corners {rounded.lg}, 46px tall. "Get started for free" at the right end of the nav (x 1208-1401); on phones 193x46 at x 140
- hero-button: #000000 fill, #FFFFFF text, corners {rounded.xl}, 84px tall. hero "Get started", centered in columns 10-12 (x 1124-1348), vertically centered on the hero (y 466-550). Phone: 195x77 centered under the media, label 24px
- outro-bar: #000000 fill, #FFFFFF text, corners {rounded.2xl}, 136px tall. "Get started" full-width bar under "Ideas no longer have to wait their turn"; label centered, 56px -1.25px. Phone: 358x117, label 36px
- media-pause: #000000 fill, #FFFFFF text, corners {rounded.full}, 36px tall. every autoplaying video (hero, AI canvas, One workspace, six grid tiles, Make): a black 36px circle with a white 24px two-bar pause glyph, 14px in from the medi
- marquee-pause: #F5F5F5 fill, #000000 text, corners {rounded.full}, 36px tall. pause control at the right end of the customer logo marquee (x 1364)
- footer-social: #3D3D3D fill, #FFFFFF text, corners {rounded.full}, 36px tall. X, YouTube, Instagram, Facebook: 24px white glyphs, 8px apart, 83px below the top of the wordmark
- footer-badge: #292929 fill, #FFFFFF text, corners {rounded.md}, 21px tall. NEW (Figma Weave, Figma Motion), BETA (Figma Specs, Figma Sites, Figma Buzz)

## Do's and Don'ts

- Don't color applied to the wordmark
- Don't wordmark on a low-contrast color
- Don't colored buttons or colored text on the homepage
- Don't recoloring the icon shapes
- Don't bold or semibold headings
- Don't italic
- Do check: Logo hidden. Cover the logo. It should still read as Figma: white page, one light grotesque weight, square product media, a giant black Get started, two-tone heads.
- Do check: Swap test. Put another SaaS logo on it. If the oversized black button, grey continuation sentences and full-bleed product grid don't feel out of place, it's generic.

DESIGN.md211 lines · version alpha

---
version: alpha
name: "Ghost"
description: "A powerful app for professional publishers to create, share and grow a business around their content (paraphrase of the homepage lead)."
colors:
  primary: "#30cf43"
  secondary: "#7c8b9a"
  surface: "#ffffff"
  on-surface: "#15171a"
  light-grey: "#CED4D9"
  gray-100-ui: "#F4F5F6"
typography:
  headline-display:
    fontFamily: "Inter"
    fontSize: 96px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -2.4px
  body-md:
    fontFamily: "Inter"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.35
    letterSpacing: -1.2px
  display-l:
    fontFamily: "Inter"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1
  h2:
    fontFamily: "Inter"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -1.2px
  launch:
    fontFamily: "Inter"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.15
  cta-xl:
    fontFamily: "Inter"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.9px
  h3:
    fontFamily: "Inter"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.9px
  h2-center:
    fontFamily: "Inter"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 0.9
    letterSpacing: -0.9px
  h2-dark:
    fontFamily: "Inter"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1
  lead:
    fontFamily: "Inter"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.5
  tagline:
    fontFamily: "Inter"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
  cta-l:
    fontFamily: "Inter"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 6px
  lg: 8px
  xl: 16px
  2xl: 24px
  full: 9999px
spacing:
  margin: 24px
  margin-phone: 16px
  gutter: 72px
  gutter-phone: 16px
  section: 72px
  section-phone: 31.2px
  card-gap: 32px
  container-max: 1392px
  columns: 12
components:
  button-primary-on-light:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    height: 39px
  launch-pill:
    backgroundColor: "#FEC137"
    textColor: "#000000"
    rounded: "{rounded.full}"
    height: 39px
  button-primary-lime-on-dark:
    backgroundColor: "#D1FF19"
    textColor: "#000000"
    rounded: "{rounded.lg}"
    height: 62px
  learn-more-on-dark:
    backgroundColor: "#1A2E05"
    textColor: "#BEF264"
    rounded: "{rounded.lg}"
    height: 39px
  status-badge:
    backgroundColor: "#334155"
    textColor: "#CBD5E1"
    rounded: "{rounded.sm}"
---
# Ghost design system

## Overview

Generated on 2026-11-03 from the Ghost brand study (unfairly.ai/brand-guidelines/ghost/, checked 2026-10-30). An independent study of what Ghost publishes and ships, not official Ghost guidelines.

A near-colourless system: white and blue-tinted greys, one Ghost Green accent, the tinted Dark Grey #15171A in place of black, a ribbon-ring orb beside a lowercase wordmark, and open Inter throughout. A plain, candid, ownership-first voice, and a strict trademark policy. Ghost gets out of the way. The brand is nearly greyscale so each publisher's own brand leads; Ghost signs it with one green and the orb, and proves itself with open numbers instead of adjectives.

- Logo: Orb plus lowercase 'ghost' wordmark, horizontal; dark (on light), light (on Dark Grey), and the orb alone (from the Ghost brand study). Link your approved master files.
- Headline on the site: "Turn your audience into a business."
- Category: Open source publishing platform; 'the platform for independent publishers'
- Audience: Creators (YouTubers, bloggers, podcasters, musicians, artists), publishers (writers, journalists, local news, new media) and businesses doing content marketing; developers for the source code.
- Promise: Own your audience, brand and revenue: website, newsletters and paid memberships in one place with 0% payment fees.
- Voice: Plain, Independent, Candid, Warm.
- Write the mark exactly 'Ghost': never GHOST, GHost, Ghost-CMS, Ghost-platform or Ghost®Platform
- First or most prominent mention carries ® (Ghost®); the logo is Ghost Logo™
- Third-party pages using the mark carry the footer notice 'Ghost is a trademark of Ghost Foundation - https://ghost.org'
- Never translate 'Ghost' as a trademark; use the English mark in non-English content

## Colors

- Primary: #30cf43 (from the Ghost brand study)
- Secondary: #7c8b9a (from the Ghost brand study)
- Surface: #ffffff (from the Ghost brand study)
- On surface: #15171a (from the Ghost brand study)
- White (#FFFFFF): Published. Light background, the default ground.
- Dark Grey (#15171A): Published ($darkgrey). Text, primary buttons (observed), dark panels (night).
- Ghost Green (#30CF43): Published ($green). The one accent. Dark Grey text on it (our reading).
- Mid Grey (#7C8B9A): Published ($midgrey). Secondary text; Shade -text-secondary.
- Light Grey (#CED4D9): Published ($lightgrey). Tinted grey for rules and light grounds.
- Gray 100 (UI) (#F4F5F6): Shade product UI -muted. Our reading for surface; the guide names none.
- White and light tinted greys as grounds
- Ghost Green as the accent, not a ground
- Dark Grey #15171A for text and dark panels, never pure black
- Mid Grey for secondary text (Shade -text-secondary)

## Typography

- Display: Inter (from the Ghost brand study)
- Body: Inter (from the Ghost brand study)
- InterVariable at opsz 32 (Inter Display), Headlines, statement, leads, eyebrows: 700/600/500/400 with "opsz" 32. Open (SIL OFL 1.1), Rasmus Andersson; self-hosted by ghost.org
- InterVariable (Inter, text optical size), Nav 15/500, buttons 14/600, footer 15/400, legal 14/400. Open (SIL OFL 1.1), Rasmus Andersson; self-hosted by ghost.org
- headline-display: Hero H1, Inter 96px/1 at 700
- body-md: Statement paragraph, Inter 48px/1.35 at 700
- display-l: Revenue figure, Inter 72px/1 at 700
- h2: Section H2, Inter 48px/1.15 at 700
- launch: Launch line, Inter 48px/1.15 at 600
- cta-xl: Try CTA link, Inter 36px/1.5 at 600
- h3: Feature H3, Inter 36px/1 at 700
- h2-center: Works with everything, Inter 36px/0.9 at 700
- h2-dark: Showcase H2 / Built to last statement, Inter 36px/1 at 700
- lead: Lead / feature body, Inter 24px/1.5 at 400
- tagline: Showcase tagline, Inter 24px/1.25 at 500
- cta-l: Lime/slate link CTA, Inter 24px/1.5 at 600
- Homepage rebuilds: the reference capture renders in the system sans fallback (Helvetica), because ghost.org serves InterVariable with font-display: optional. Use Helvetica, "Helvetica Neue", Arial, sans-serif with the spec's sizes and tracking; never load InterVariable for a firs
- Inter Display for display sizes, Inter for text (real faces, open licence)
- Bold (700) headings, Regular (400) body, SemiBold (600) links and buttons (observed)

## Layout

- margin 24px, margin-phone 16px, gutter 72px, gutter-phone 16px, section 72px, section-phone 31.2px, card-gap 32px, container-max 1392px, columns 12
- Treat Shade tokens as product UI scope: interface-like elements only
- Marketing page anatomy comes from the homepage measurement step

## Elevation & Depth

- Shadow Shade product UI: -shadow 0 0 1px rgba(0,0,0,.05), 0 5px 18px rgba(0,0,0,.08); layered soft shadows up to xl

## Shapes

- rounded

## Components

- button-primary-on-light: #15171A fill, #FFFFFF text, corners {rounded.md}, 39px tall. Get Started — free (nav, 155x39; phone menu full width)
- launch-pill: #FEC137 fill, #000000 text, corners {rounded.full}, 39px tall. Just launched: Ghost 6.0 → (230x39)
- button-primary-lime-on-dark: #D1FF19 fill, #000000 text, corners {rounded.lg}, 62px tall. Start publishing now → (271x62)
- learn-more-on-dark: #1A2E05 fill, #BEF264 text, corners {rounded.lg}, 39px tall. Learn more → (133x39)
- status-badge: #334155 fill, #CBD5E1 text, corners {rounded.sm}. 99.9%

## Do's and Don'ts

- Don't add decorative elements
- Don't change the colors
- Don't add saturated hues as brand colours
- Don't use pure #000000 as Ghost's black
- Don't write GHOST, Ghost-CMS or other altered forms of the mark
- Don't translate the mark
- Do check: Logo hidden. Cover the orb. It should still read as Ghost: white and tinted greys, one green, Dark Grey not black, Inter Bold sentence case with full stops, real numbers.
- Do check: Mark check. Search the copy for every 'Ghost': exact form, no prefix naming, no translated mark.

DESIGN.md212 lines · version alpha

---
version: alpha
name: "GitHub"
description: "A developer platform bringing collaboration, AI-assisted coding, automation and security into the work of building software."
colors:
  primary: "#08872b"
  secondary: "#0fbf3e"
  surface: "#ffffff"
  on-surface: "#000000"
  gray-1: "#F2F5F3"
  gray-2: "#E4EBE6"
  gray-3: "#B6BFB8"
  gray-4: "#909692"
  gray-5: "#232925"
  gray-6: "#101411"
  green-1: "#BFFFD1"
  green-2: "#8CF2A6"
typography:
  headline-display:
    fontFamily: "Mona Sans"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
  body-md:
    fontFamily: "Mona Sans"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.18px
  title-xl:
    fontFamily: "Mona Sans"
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.3
  quote:
    fontFamily: "Mona Sans"
    fontSize: 32px
    fontWeight: 480
    lineHeight: 1.35
  title-l:
    fontFamily: "Mona Sans"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.35
  title-m:
    fontFamily: "Mona Sans"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.4
  title-s:
    fontFamily: "Mona Sans"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
  body:
    fontFamily: "Mona Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.24px
  button-l:
    fontFamily: "Mona Sans"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.16px
  button-s:
    fontFamily: "Mona Sans"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.21px
  nav:
    fontFamily: "Mona Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.24px
  tab:
    fontFamily: "Mona Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  none: 0px
  sm: 6px
  md: 8px
  full: 9999px
spacing:
  margin: 128px
  margin-phone: 24px
  gutter: 0px
  gutter-phone: 0px
  section: 88px
  section-phone: 22px
  card-gap: 0px
  container-max: 1184px
  columns: 2
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 43px
  button-secondary:
    backgroundColor: "#F0F0F0"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    height: 53px
  button-nav-signup:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 32px
  quote-mark-tile:
    backgroundColor: "#EBF9F4"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    height: 56px
---
# GitHub design system

## Overview

Generated on 2026-11-03 from the GitHub brand study (unfairly.ai/brand-guidelines/github/, checked 2026-10-31). An independent study of what GitHub publishes and ships, not official GitHub guidelines.

GitHub grounds expressive developer creativity in a disciplined technical structure: neutral text panels, green accents, Mona Sans and Mono, visible grid fragments, contribution cells and dither. Detailed daylight 3D worlds and selective mascots supply the imaginative layer. Developer infrastructure made expressive: a strict grid makes the product feel dependable, while contribution cells expand into playful worlds that show what developers can build together.

- Logo: Invertocat with GitHub wordmark; standalone Invertocat in established GitHub contexts (from the GitHub brand study). Link your approved master files.
- Headline on the site: "Software still starts with you"
- Category: Developer platform with repository hosting and AI coding agents.
- Audience: Individual developers, open source contributors, development teams and enterprise organizations.
- Promise: Help people build software together with AI assistance and supporting development infrastructure.
- Voice: nerdy, confident, authentic, imaginative, empathetic.
- Write GitHub with capital G and H as a single word.
- Use exact technical language and correct punctuation; explain technical concepts accessibly.
- Use short, conversational, plainspoken sentences; remove unnecessary jargon and marketing filler.
- Address the reader with you more often than referring to the company with we.

## Colors

- Primary: #08872b (from the GitHub brand study)
- Secondary: #0fbf3e (from the GitHub brand study)
- Surface: #ffffff (from the GitHub brand study)
- On surface: #000000 (from the GitHub brand study)
- GitHub Green (#0FBF3E): Core recognition hero; restrained green accents, contribution graphics and visual emphasis
- Gray 1 (#F2F5F3): Core neutral: grounds, hierarchy, borders and readable copy
- Gray 2 (#E4EBE6): Core neutral: grounds, hierarchy, borders and readable copy
- Gray 3 (#B6BFB8): Core neutral: grounds, hierarchy, borders and readable copy
- Gray 4 (#909692): Core neutral: grounds, hierarchy, borders and readable copy
- Gray 5 (#232925): Core neutral: grounds, hierarchy, borders and readable copy
- Neutrals dominate; GitHub Green connects core applications. Secondary colors appear sparingly, primarily in illustrations.
- Copilot theme composition: 80% neutral, 5% gray, 5% green, 10% purple.
- Security theme composition: 80% neutral, 5% gray, 5% green, 10% blue.
- Separate copy from expressive imagery; use White, Gray or Black text panels and ensure AA for normal text.

## Typography

- Display: Mona Sans (from the GitHub brand study)
- Body: Mona Sans (from the GitHub brand study)
- Mona Sans, Display headlines and titles; specimen H0 110/110 Display. Keep normal width except special events.. SIL OFL 1.1; real supplied open-source face
- Mona Sans, Medium headline and body examples; H2 38/44 and Body Large 17/26. Prioritize hierarchy and readability.. SIL OFL 1.1; real supplied open-source face
- Mona Sans Mono, Short technical eyebrows, captions and terminal-like motion. No uppercase multiline treatments.. SIL OFL 1.1; real supplied open-source face
- headline-display: Section H2 (GitHub Platform, More ways to use GitHub), Mona Sans 40px/1.2 at 400
- body-md: Body / product description, Mona Sans 18px/1.5 at 400
- title-xl: Enterprise intro H2 / community H2, Mona Sans 34px/1.3 at 400
- quote: Testimonial quote, Mona Sans 32px/1.35 at 480
- title-l: Platform product title (GitHub, Copilot), Mona Sans 28px/1.35 at 400
- title-m: Customer story title, Mona Sans 22px/1.4 at 400
- title-s: Ways product title (Actions, Code Quality...), Mona Sans 20px/1.3 at 400
- body: Footer body / testimonial name, Mona Sans 16px/1.5 at 400
- button-l: Button large, Mona Sans 16px/1.5 at 500
- button-s: Button small, nav actions, footer links, Mona Sans 14px/1.5 at 500
- nav: Nav link, Mona Sans 14px/1.5 at 400
- tab: Hero tab label, Mona Sans 16px/1.5 at 400
- Load the real supplied open-source faces; no substitute is necessary.
- Use default width styles; other widths are reserved for special events such as Universe.
- Keep headline and body ligatures off.

## Layout

- margin 128px, margin-phone 24px, gutter 0px, gutter-phone 0px, section 88px, section-phone 22px, card-gap 0px, container-max 1184px, columns 2
- Choose primary page divisions and internal margins before other design decisions; use them consistently.
- Allocate key art 1/3, 1/2 or 2/3 of the layout to maintain geometric relationships.
- Use one accent border, usually between copy and visual, at twice the normal border weight; example is 4px against 2px.

## Elevation & Depth

- Strict grid with selectively visible neutral borders; one green accent border per composition at twice the default weight. Published example: 2px default and 4px accent.

## Shapes

- Rounded squares in contribution graph; rounded corners on UI frames. Numeric radius not published.

## Components

- button-primary: #08872B fill, #FFFFFF text, corners {rounded.sm}, 43px tall. Sign up for GitHub 185x43 (hero form, inset 5px from the form edge); Learn more 64-ish x32; Subscribe 95x32
- button-secondary: #F0F0F0 fill, #000000 text, corners {rounded.sm}, 53px tall. Download GitHub Copilot app 272x53; Start Enterprise free trial 231x43; Explore Code Security 32px tall
- button-nav-signup: #000000 fill, #FFFFFF text, corners {rounded.sm}, 32px tall. Sign up at x1267 y18, 77x32; Sign in is a plain 14px/500 black text link at x1199
- quote-mark-tile: #EBF9F4 fill, #08872B text, corners {rounded.md}, 56px tall. 56x56 tile holding a bold green open-quote glyph, above the testimonial

## Do's and Don'ts

- Don't rearrange, distort, skew, stretch or alter logo elements
- Don't mix mark and wordmark colors
- Don't make secondary accents the general core brand identity
- Don't apply product color behind paragraphs where it harms readability
- Don't use condensed or expanded widths as everyday core typography
- Don't all-caps multiline monospace
- Do check: Logo hidden. Does the composition still carry GitHub through Mona Sans/Mono, green, contribution-derived geometry and neutral/expressive separation?
- Do check: Functional or expressive. Can the chosen intensity be explained by audience, task and context? Technical demos stay precise; community and launch moments can carry more delight.
- Do check: Readable without color. Can a reader understand the hierarchy, labels and data without relying on color alone?

DESIGN.md210 lines · version alpha

---
version: alpha
name: "GitLab"
description: "The intelligent orchestration platform where teams and their AI agents ship secure software faster."
colors:
  primary: "#7759c2"
  secondary: "#fc6d26"
  surface: "#ffffff"
  on-surface: "#171321"
  orange-01s: "#FDF1DD"
  gray-03: "#74717A"
typography:
  headline-display:
    fontFamily: "Inter"
  body-md:
    fontFamily: "Inter"
  display-xl:
    fontFamily: "GitLab Sans"
    fontSize: 96px
    fontWeight: 660
    lineHeight: 1.04
    letterSpacing: -2.88px
  display-l:
    fontFamily: "GitLab Sans"
    fontSize: 64px
    fontWeight: 660
    lineHeight: 1.063
    letterSpacing: -1.92px
  title-l:
    fontFamily: "GitLab Sans"
    fontSize: 32px
    fontWeight: 580
    lineHeight: 1.125
    letterSpacing: -0.64px
  title-m:
    fontFamily: "GitLab Sans"
    fontSize: 24px
    fontWeight: 580
    lineHeight: 1.167
    letterSpacing: -0.48px
  lead:
    fontFamily: "GitLab Sans"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: -0.48px
  body-l:
    fontFamily: "GitLab Sans"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.44
  body-bold:
    fontFamily: "GitLab Sans"
    fontSize: 18px
    fontWeight: 660
    lineHeight: 1.556
  button:
    fontFamily: "GitLab Sans"
    fontSize: 18px
    fontWeight: 660
    lineHeight: 1.25
  body:
    fontFamily: "GitLab Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-s:
    fontFamily: "GitLab Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.571
  stat:
    fontFamily: "GitLab Mono"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -1.92px
  ordinal:
    fontFamily: "GitLab Mono"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
rounded:
  none: 0px
  sm: 4px
  md: 20px
spacing:
  margin: 165px
  margin-phone: 16px
  gutter: 24px
  gutter-phone: 16px
  section: 96px
  section-phone: 64px
  card-gap: 24px
  container-max: 1110px
  columns: 3
components:
  button-primary-on-light:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 47px
  button-primary-on-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    height: 47px
  button-secondary-on-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    height: 45px
  button-flex-on-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    height: 46px
---
# GitLab design system

## Overview

Generated on 2026-11-03 from the GitLab brand study (unfairly.ai/brand-guidelines/gitlab/, checked 2026-10-29). An independent study of what GitLab publishes and ships, not official GitLab guidelines.

A warm tanuki of three oranges, a signature purple, and copy kept strictly white or Charcoal; one tight, heavy sans derived from Inter; soft orange-purple-pink gradients; and flat linework built from code lines, pills and one curved corner. A voice that's visionary but provable. Ship-speed made visible. GitLab draws motion everywhere (gradients that blur, graphics running left to right, lines borrowed from code and pipelines) but keeps every word in white or Charcoal, so the brand feels fast without ever being hard to read.

- Logo: Core logo: the full-color tanuki logomark plus the GitLab wordmark, horizontal (from the GitLab brand study). Link your approved master files.
- Headline on the site: "Software. Faster."
- Category: The most comprehensive AI-driven DevSecOps platform (guide); intelligent orchestration platform (homepage)
- Audience: Development, security and operations teams across the software lifecycle, from startups to enterprises and the public sector (paraphrase of messaging and solution navigation).
- Promise: Speed and control together: teams ship faster without trading away security (paraphrase of the tagline rationale and mission).
- Voice: Visionary, Empathetic, Intentional.
- Always capitalize the first word after a colon in a title
- Use contractions
- Active voice where possible
- Serial (Oxford) comma by default

## Colors

- Primary: #7759c2 (from the GitLab brand study)
- Secondary: #fc6d26 (from the GitLab brand study)
- Surface: #ffffff (from the GitLab brand study)
- On surface: #171321 (from the GitLab brand study)
- White (#FFFFFF): Primary. The default page and asset ground; headline, body and CTA color on dark grounds; light-mode base fill under the brand gradient.
- Charcoal (#171321): Primary. Headlines, body copy, CTAs and buttons on light grounds; solid dark background (night). The wordmark color. Never inside a background gradient. PMS 433 C.
- Purple 02p (#7759C2): Primary. Hyperlinks on light grounds; partner lockup base fill on white; allowed one-color tanuki. White text on it passes.
- Orange 02p (#FC6D26): Primary, from the tanuki. Graphical elements, the default background gradient, the orange favicon tanuki. Charcoal text only; never colored copy.
- Orange 01s (#FDF1DD): Secondary warm tint, Charcoal text. Used here as the light surface role: our reading, the guide names no surface color.
- Gray 03 (#74717A): Cool gray for hierarchy; the co-branding divider. Used here as muted text: our reading, the guide publishes no muted text color.
- Backgrounds: gradients, or solid white, Charcoal or purple
- Headlines, body, CTAs and buttons in white or Charcoal only
- Links: Purple 01p on dark, Purple 02p on light
- Teals mean positive; pink is reserved for gradients; grays set hierarchy

## Typography

- Display: Inter (from the GitLab brand study)
- Body: Inter (from the GitLab brand study)
- GitLab Sans, Everything: headlines Bold (105% leading, -4.5% tracking), subheads Regular (110%, -2%), body Regular (135%, 0), CTAs SemiBold. Open (SIL OFL 1.1). GitLab's own face derived from Inter (copyright The Inter P
- GitLab Sans, Body Regular 400, 135% leading, 0 tracking; Bold and Regular are the main weights. Open (SIL OFL 1.1), npm @gitlab/fonts 1.3.1
- GitLab Mono, Sparingly, Regular only: labels, code snippets, callouts, select taglines, numerical stats; never inside a GitLab Sans paragraph. Open (SIL OFL 1.1). Derived from JetBrains Mono; npm @gitlab/fonts 1.3.1
- display-xl: Hero H1 / closing H2, GitLab Sans 96px/1.04 at 660
- display-l: Section H2 / quote headline, GitLab Sans 64px/1.063 at 660
- title-l: Feature card title, GitLab Sans 32px/1.125 at 580
- title-m: Card title / resource title, GitLab Sans 24px/1.167 at 580
- lead: Lead paragraph, GitLab Sans 24px/1.33 at 400
- body-l: Body large / Flex body, GitLab Sans 18px/1.44 at 400
- body-bold: Hero card title / footer heading, GitLab Sans 18px/1.556 at 660
- button: Button label, GitLab Sans 18px/1.25 at 660
- body: Body, GitLab Sans 16px/1.5 at 400
- body-s: Small body / card text, GitLab Sans 14px/1.571 at 400
- stat: Stat number, GitLab Mono 64px/1.2 at 500
- ordinal: Ordinal, GitLab Mono 32px/1.2 at 400
- Headlines: Sans Bold, 105% leading, -45 tracking (-4.5%)
- Subheads and intro/outro paragraphs: Sans Regular, 110% leading, -20 tracking (-2%), optical kerning
- Body: Sans Regular, 135% leading, 0 tracking, auto kerning

## Layout

- margin 165px, margin-phone 16px, gutter 24px, gutter-phone 16px, section 96px, section-phone 64px, card-gap 24px, container-max 1110px, columns 3
- Keep plenty of negative space; don't clutter
- Logo left-aligned at a top or bottom corner; copy is the focus
- Max one tagline lockup per asset

## Elevation & Depth

- single stroke weight per asset, capped ends, front-facing, no 3D or shadows

## Shapes

- one curved corner at bottom right (25-30% of width) on containers; 5-10% when all corners curve
- rounded

## Components

- button-primary-on-light: #171321 fill, #FFFFFF text, corners {rounded.sm}, 47px tall. Get your free trial (184x47)
- button-primary-on-dark: #FFFFFF fill, #171321 text, corners {rounded.sm}, 47px tall. Get free trial (nav, 141x47)
- button-secondary-on-dark: #FFFFFF fill, #171321 text, corners {rounded.sm}, 45px tall. Talk to sales (139x45)
- button-flex-on-dark: #FFFFFF fill, #171321 text, corners {rounded.sm}, 46px tall. Discover GitLab Flex (208x46 desktop, 310x46 phone full width of the banner copy)

## Do's and Don'ts

- Don't apply a stroke, outline or keyline
- Don't recolor any part
- Don't set sentences or large copy in any color but white or Charcoal
- Don't put Charcoal or gray in a background gradient
- Don't justify, center or right-align copy
- Don't set all caps
- Do check: Logo hidden. Cover the tanuki. It should still read as GitLab: white or Charcoal type in a tight Bold sans, a soft orange-purple gradient or purple field, and flat linework with one curved corner.
- Do check: Swap test. Put another DevOps vendor's logo on it. If the orange-purple warmth, the code-line graphics and the plain, provable copy don't feel out of place, it's generic, and it goes back.

DESIGN.md235 lines · version alpha

---
version: alpha
name: "GNOME"
description: "An independent computing platform for everyone."
colors:
  primary: "#3584e4"
  secondary: "#ff7800"
  surface: "#ffffff"
  on-surface: "#000000"
  purple: "#9141AC"
  green: "#33D17A"
  red: "#E01B24"
  grey: "#77767B"
  quite-black: "#241F31"
  page-ground: "#EEEEEE"
  hig-blue-5: "#1A5FB4"
  hig-dark-3: "#3D3846"
typography:
  headline-display:
    fontFamily: "Inter"
    fontSize: 32.4px
    fontWeight: 800
    lineHeight: 1.25
    letterSpacing: -0.32px
  body-md:
    fontFamily: "Inter"
    fontSize: 25.2px
    fontWeight: 900
    lineHeight: 1.25
    letterSpacing: -0.18px
  display-h2:
    fontFamily: "Inter"
    fontSize: 27px
    fontWeight: 800
    lineHeight: 1.25
    letterSpacing: -0.27px
  display-h4:
    fontFamily: "Inter"
    fontSize: 21.6px
    fontWeight: 800
    lineHeight: 1.25
    letterSpacing: -0.22px
  body:
    fontFamily: "Inter"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.18px
  nav:
    fontFamily: "Inter"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: -0.18px
  button:
    fontFamily: "Inter"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: -0.18px
  banner-title:
    fontFamily: "Inter"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: -0.18px
  banner-line:
    fontFamily: "Inter"
    fontSize: 16.2px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.18px
  button-small:
    fontFamily: "Inter"
    fontSize: 14.4px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: -0.18px
  button-inline:
    fontFamily: "Inter"
    fontSize: 16.2px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: -0.18px
  footer:
    fontFamily: "Inter"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.8
    letterSpacing: -0.18px
rounded:
  sm: 12px
  md: 14.4px
  lg: 24px
  full: 9999px
spacing:
  margin: 162px
  margin-phone: 18px
  gutter: 54px
  gutter-phone: 18px
  section: 36px
  section-phone: 36px
  card-gap: 18px
  container-max: 1116px
  columns: 5
components:
  button-default:
    backgroundColor: "#D6D6D6"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    height: 50px
  button-suggested-hero:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 50px
  button-choice-square:
    backgroundColor: "#D6D6D6"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    height: 50px
  button-dark-tile:
    backgroundColor: "#54505C"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    height: 45px
  button-inline-on-blue:
    backgroundColor: "#1756A2"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 33px
  hero-banner:
    backgroundColor: "#DBE9FA"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
  dev-tile:
    backgroundColor: "{colors.hig-dark-3}"
    textColor: "{colors.surface}"
    rounded: "{rounded.lg}"
---
# GNOME design system

## Overview

Generated on 2026-11-03 from the GNOME brand study (unfairly.ai/brand-guidelines/gnome/, checked 2026-10-30). An independent study of what GNOME publishes and ships, not official GNOME guidelines.

A friendly blue foot, one primary Blue with bright HIG secondaries, Inter Heavy headlines, soft rounded triangle fragments and flat full-color illustration. Plain, translatable words from a community project. One shared palette and one open typeface across desktop, apps and brand: GNOME looks like its software because the brand is built from the same parts.

- Logo: GNOME logo: the foot (brandmark) beside the GNOME wordmark, horizontal or vertical lockup, black or white only (from the GNOME brand study). Link your approved master files.
- Headline on the site: "An independent computing platform for everyone"
- Category: Free and open source desktop environment and application platform for Linux
- Audience: Everyday computer users on Linux, app developers, and contributors and donors (paraphrase of homepage sections).
- Promise: An elegant, simple desktop that is free to use, open to all and respects privacy (paraphrase).
- Voice: Plain, Inclusive, Considerate, Warm, Open.
- UI text short and to the point: the fewest words that keep the meaning
- Neutral perspective; avoid "you" and "my" in UI; prefer "your" over "my"
- Header capitalization for headings, button labels, menu items and tooltips: capitalize words of four or more letters, verbs, nouns, first and last word
- Sentence capitalization for labels that form sentences and for body, dialog and notification text

## Colors

- Primary: #3584e4 (from the GNOME brand study)
- Secondary: #ff7800 (from the GNOME brand study)
- Surface: #ffffff (from the GNOME brand study)
- On surface: #000000 (from the GNOME brand study)
- Blue (#3584E4): Primary. Headings in the brand book, the cover field, the hero Donate button.
- Orange (#FF7800): Secondary. Logo ground variant; warm end of brand gradients.
- Purple (#9141AC): Secondary. Logo ground variant; end of the Support Us gradient.
- Green (#33D17A): Secondary. Logo ground variant (dark logo on it).
- Red (#E01B24): Secondary. Red end of the brand gradient.
- White (#FFFFFF): Neutral. Logo ground; logo color on dark and color grounds.
- Emphasize the primary Blue
- Take colors from the brand palette wherever possible
- For dark preference, multiply HSL luminance by 0.85
- Build gradients from HIG colors, interpolated in HSL or LAB

## Typography

- Display: Inter (from the GNOME brand study)
- Body: Inter (from the GNOME brand study)
- Inter, Headers Inter Heavy (800-900); website headings 800. Open (SIL OFL 1.1)
- Inter, Body Inter Normal 400. Open (SIL OFL 1.1)
- not published, hex values in the brand book. n/a
- headline-display: Hero H1 (#subtitle), Inter 32.4px/1.25 at 800
- body-md: Wordmark text, Inter 25.2px/1.25 at 900
- display-h2: Section H2, Inter 27px/1.25 at 800
- display-h4: Tile H4, Inter 21.6px/1.25 at 800
- body: Body / lead, Inter 18px/1.6 at 400
- nav: Nav link, Inter 18px/1.6 at 600
- button: Button label, Inter 18px/1.6 at 600
- banner-title: Banner title, Inter 18px/1.5 at 700
- banner-line: Banner line, Inter 16.2px/1.5 at 600
- button-small: Small button (dark tile), Inter 14.4px/1.6 at 600
- button-inline: Inline button, Inter 16.2px/1.6 at 600
- footer: Footer link, Inter 18px/1.8 at 600
- Header 1 Inter Heavy 24pt; Header 2 Heavy 22pt (blue in the book); Header 3 Heavy 18pt; Header 4 Bold 16pt; Body Inter 12pt
- Web uses Inter Variable with cv05, liga, calt
- Few sizes and weights

## Layout

- margin 162px, margin-phone 18px, gutter 54px, gutter-phone 18px, section 36px, section-phone 36px, card-gap 18px, container-max 1116px, columns 5
- Text blocks 648px wide; art 600px bleeding off the edge
- Pill buttons, 12px radius cards, 24px radius dark tile
- Full-bleed bands for Get GNOME and Support Us

## Elevation & Depth

- rounded triangle fragments (tris) at about 11% opacity; flat geometric illustration; symbolic icons with 2px strokes

## Shapes

- 12px (-rounded-corner) on banners, tile images and chips; 24px on the Developer Platform tile; 0 on full-bleed bands
- pill

## Components

- button-default: #D6D6D6 fill, #000000 text, corners {rounded.full}, 50px tall. Core Apps (143x50)
- button-suggested-hero: #3584E4 fill, #FFFFFF text, corners {rounded.full}, 50px tall. Donate in the first hero banner (115x50; phone 88x39 at 15.3px)
- button-choice-square: #D6D6D6 fill, #000000 text, corners {rounded.md}, 50px tall. Code / Design / Translation / Testing, 315x50 in a 2x2 grid, 18px gap; phone one column 354x50
- button-dark-tile: #54505C fill, #FFFFFF text, corners {rounded.md}, 45px tall. Developer Portal (191x45) and Design System (179x45) with a 16px white symbolic icon 0.4em before the label; phone radius 6px
- button-inline-on-blue: #1756A2 fill, #FFFFFF text, corners {rounded.full}, 33px tall. Latest Release inline in a sentence (143x33)
- hero-banner: #DBE9FA fill, #000000 text, corners {rounded.sm}.
- dev-tile: #3D3846 fill, #FFFFFF text, corners {rounded.lg}.

## Do's and Don'ts

- Don't stretch or rotate it
- Don't add elements such as a URL under it
- Don't interpolate gradients in RGB (muddy grey midpoints)
- Don't use UI elements from GNOME apps as brand graphics
- Don't use Adwaita Sans or Cantarell for brand materials: they are UI faces
- Don't write "Gnome"
- Do check: Logo hidden. Cover the foot. Blue plus soft rounded triangles, Inter Heavy and a flat HIG-palette illustration should still say GNOME.
- Do check: Swap test. Put another Linux desktop's logo on it. If the Blue, the tris and the plain voice feel generic, push the signature back in.

DESIGN.md154 lines · version alpha

---
version: alpha
name: "GOV.UK"
description: "The single, trusted place for UK government services and information, written in plain English for everyone."
colors:
  primary: "#1d70b8"
  secondary: "#00ffe0"
  surface: "#ffffff"
  on-surface: "#0b0c0c"
  blue-tint-95: "#F4F8FB"
  link: "#1A65A6"
  border: "#CECECE"
  blue-tint-80: "#D2E2F1"
  focus-yellow: "#FFDD00"
  success-green: "#0F7A52"
typography:
  headline-display:
    fontFamily: "Roboto"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.07
  body-md:
    fontFamily: "Roboto"
    fontSize: 19px
    fontWeight: 360
    lineHeight: 1.316
    letterSpacing: -0.19px
  heading-l:
    fontFamily: "Roboto"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.111
  heading-m:
    fontFamily: "Roboto"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
  heading-s:
    fontFamily: "Roboto"
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.316
  body-s:
    fontFamily: "Roboto"
    fontSize: 16px
    fontWeight: 360
    lineHeight: 1.25
    letterSpacing: -0.16px
  label-s:
    fontFamily: "Roboto"
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.316
rounded:
  none: 0px
spacing:
  margin: 240px
  margin-phone: 24px
  gutter: 30px
  gutter-phone: 15px
  section: 60px
  section-phone: 28px
  card-gap: 30px
  container-max: 960px
components:
  button-primary:
    backgroundColor: "{colors.success-green}"
    textColor: "{colors.surface}"
    rounded: "{rounded.none}"
---
# GOV.UK design system

## Overview

Generated on 2026-11-03 from the GOV.UK brand study (unfairly.ai/brand-guidelines/govuk/, checked 2026-10-31). An independent study of what GOV.UK publishes and ships, not official GOV.UK guidelines.

Primary blue, one teal dot, GDS Transport and plain English. GOV.UK is a public utility whose style is restraint: underlined blue links, square corners, no imagery, every word earning its place. The brand is the task list. GOV.UK earns trust by looking the same everywhere and getting out of the way; the 2025 refresh added exactly one expressive element, the dot, and kept it off the working web pages.

- Logo: The GOV.UK logo system: the GOV.UK wordmark (the dot raised to the middle, Accent teal on blue) and the crown, locked up side by side on the web (from the GOV.UK brand study). Link your approved master files.
- Headline on the site: "The best place to find government services and information"
- Category: Government services and information platform (web, app, wallet)
- Audience: Anyone living in the UK, British citizens abroad, and people abroad who want to do business in or travel to the UK
- Promise: The best place to find government services and information.
- Voice: Specific, Informative, Clear and concise, Brisk, not terse, Serious, not pompous.
- No more than 5 sentences per paragraph; split sentences over 25 words
- Active voice: "You need an electronic travel authorisation", not "...is needed"
- "must" for legal requirements, "need" for process steps, "can" for options
- No block capitals for large amounts of text; it reads as shouting

## Colors

- Primary: #1d70b8 (from the GOV.UK brand study)
- Secondary: #00ffe0 (from the GOV.UK brand study)
- Surface: #ffffff (from the GOV.UK brand study)
- On surface: #0b0c0c (from the GOV.UK brand study)
- Primary blue (#1D70B8): Header, hero, rules, footer border; the brand colour
- Accent teal (#00FFE0): The dot; brand moments on blue
- White (#FFFFFF): Page ground
- Blue tint 95% (#F4F8FB): Footer and feedback ground
- Black (#0B0C0C): Text
- Link (#1A65A6): Every link
- Lead with Primary blue and Accent teal
- Use functional colour names, not hex, in code
- WCAG 2.2 AA contrast for every combination
- Never convey meaning by colour alone

## Typography

- Display: Roboto (from the GOV.UK brand study)
- Body: Roboto (from the GOV.UK brand study)
- GDS Transport Bold, Headings, links, labels. Crown; for GOV.UK and service.gov.uk only
- GDS Transport Light (weight 400 on the site), Body copy. Crown; GOV.UK only
- None published, Code only. n/a
- headline-display: Hero headline, Roboto 64px/1.07 at 700
- body-md: Body, Roboto 19px/1.316 at 360
- heading-l: Section H2, Roboto 36px/1.111 at 700
- heading-m: Footer heading, Roboto 24px/1.25 at 700
- heading-s: Link heading / bold link, Roboto 19px/1.316 at 700
- body-s: Small (feedback bar, Menu), Roboto 16px/1.25 at 360
- label-s: Search label, Roboto 19px/1.316 at 700
- GDS Transport only on service.gov.uk / GOV.UK
- Two weights: light and bold
- Body 19px on all screens

## Layout

- margin 240px, margin-phone 24px, gutter 30px, gutter-phone 15px, section 60px, section-phone 28px, card-gap 30px, container-max 960px
- Design for small screens first
- Grid columns: full, three-quarters, two-thirds, one-half, one-third, one-quarter
- Spacing scale: 0, 5, 10, 15, 20, 25, 30, 40, 50, 60px on large screens

## Elevation & Depth

- 1px #CECECE dividers; 4px #1D70B8 section rules; 10px #1D70B8 footer top border; 1px #8EB8DC footer rules

## Shapes

- 0 on the web (inputs, buttons, cards); the app icon is the only rounded shape on the homepage
- square

## Components

- button-primary: #0F7A52 fill, #FFFFFF text, corners {rounded.none}.

## Do's and Don'ts

- Don't alter the colour balance
- Don't distort, stretch, skew, flip or rotate
- Don't create new colours
- Don't use too many colours in one application
- Don't use GDS Transport off GOV.UK domains
- Don't add weights or a second family
- Do check: Logo hidden. Cover the logo. It should still read as GOV.UK: a solid #1D70B8 block, bold sentence-case white headline, underlined blue links on white, square corners.
- Do check: Plain English. No sentence over 25 words, no "please", no buzzwords, no negative contractions.

DESIGN.md238 lines · version alpha

---
version: alpha
name: "Headspace"
description: "The leading everyday mental health companion, helping people care for their minds anytime, anywhere (about-page boilerplate, abridged)."
colors:
  primary: "#0061ef"
  secondary: "#ff7300"
  surface: "#ffffff"
  on-surface: "#2d2c2b"
  warm-card: "#F9F4F2"
  sunshine-yellow: "#FFCE00"
  sky-blue: "#00A4FF"
  pink: "#FFA1CC"
  night-purple: "#3B197F"
  green: "#02873E"
  ink-soft: "#44423F"
typography:
  headline-display:
    fontFamily: "Hanken Grotesk"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -2.16px
  body-md:
    fontFamily: "Hanken Grotesk"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.2px
  display-l:
    fontFamily: "Hanken Grotesk"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -1.92px
  display-hero:
    fontFamily: "Hanken Grotesk"
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -1.56px
  display-m:
    fontFamily: "Hanken Grotesk"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -1.44px
  heading-l:
    fontFamily: "Hanken Grotesk"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -1.2px
  heading-m:
    fontFamily: "Hanken Grotesk"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.96px
  stat:
    fontFamily: "Hanken Grotesk"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -1.68px
  quote:
    fontFamily: "Hanken Grotesk"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
  body-l:
    fontFamily: "Hanken Grotesk"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.2
  body:
    fontFamily: "Hanken Grotesk"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  button:
    fontFamily: "Hanken Grotesk"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.1
rounded:
  none: 0px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 30px
  2xl: 112px
  full: 9999px
spacing:
  margin: 48px
  margin-phone: 24px
  gutter: 24px
  gutter-phone: 16px
  section: 64px
  section-phone: 32px
  card-gap: 24px
  container-max: 1344px
  columns: 3
components:
  button-primary-blue:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 48px
  button-primary-ink:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 48px
  button-light:
    backgroundColor: "{colors.warm-card}"
    textColor: "{colors.ink-soft}"
    rounded: "{rounded.full}"
    height: 48px
  button-outline-white:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 48px
  button-cta-giant:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.2xl}"
    height: 188px
  tab-pill:
    backgroundColor: "{colors.warm-card}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    height: 48px
  need-state-tile:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
  warm-card:
    backgroundColor: "{colors.warm-card}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
---
# Headspace design system

## Overview

Generated on 2026-11-03 from the Headspace brand study (unfairly.ai/brand-guidelines/headspace/, checked 2026-10-29). An independent study of what Headspace publishes and ships, not official Headspace guidelines. Lines marked GAP were not found in the study.

A white page, flat sunshine-yellow and blue bands, ink-colored bold type in a custom Aperçu, and an orange dot that becomes a smiling character. Pills for every action; feelings first, clinical care second. Headspace makes mental health feel approachable: the orange smile and a cast of emotional faces carry the feelings, while plain bold type, pills and a white page keep the clinical offers clear.

- Logo: Primary on white and light grounds
- Headline on the site: "Get your headspace"
- Category: Mental health: a meditation and sleep app plus Ebb (AI companion), coaching, online therapy that accepts insurance, and EAP, psychiatry and work-life services for employers and health plans.
- Audience: Individuals (app subscribers, therapy patients, families, students) and organizations (employers, small businesses, health plans, consultants): the nav splits For You, For Business and For Providers.
- Promise: Mental health support that feels approachable, from a two-minute meditation to insured therapy, all in one place.
- Voice: Warm, Approachable, Plain.
- Lead with the feeling or outcome the reader wants (Feel less anxious, Sleep soundly), not the feature
- Make talking about mental health feel approachable and normal, never alarming
- When Ebb is mentioned, say it is an AI companion that does not replace human care
- CTAs are two to four words: Try for free, Try for $0, Check your coverage, Request a demo

## Colors

- Primary: #0061ef (from the Headspace brand study)
- Secondary: #ff7300 (from the Headspace brand study)
- Surface: #ffffff (from the Headspace brand study)
- On surface: #2d2c2b (from the Headspace brand study)
- Headspace orange (#FF7300): Published in the logo files. The logo dot and the main smiling character; never type or buttons.
- Ink (#2D2C2B): Published wordmark color. All type and the dark pill buttons.
- White (#FFFFFF): Page ground, inverted wordmark, type on blue bands.
- Warm card (#F9F4F2): Hero cards, unselected pills, footer newsletter strip (observed).
- CTA blue (#0061EF): Primary CTA pills and the business band (observed).
- Sunshine yellow (#FFCE00): Carousel, ticker and closing bands (observed).
- Orange belongs to the logo and characters
- Blue #0061EF is the action color
- Ink, not black, for type
- Bands are flat and full width

## Typography

- Display: Hanken Grotesk (from the Headspace brand study)
- Body: Hanken Grotesk (from the Headspace brand study)
- Headspace Apercu (custom Aperçu by Colophon Foundry), Every heading, 700 weight. Proprietary to Headspace; not sold
- Headspace Apercu (custom Aperçu by Colophon Foundry), Body 400, labels and buttons 500-700. Proprietary to Headspace; not sold
- headline-display: Closing pill label "Get your headspace", Hanken Grotesk 72px/1 at 700
- body-md: Business band subline, FAQ answers, Hanken Grotesk 20px/1.5 at 400
- display-l: Big section H2s: Members are enjoying happier and healthier lives, Explore our library, Join the millions who use Headspace every day, Hanken Grotesk 64px/1 at 700
- display-hero: Hero H1, two lines: rotating word line + "all with Headspace", Hanken Grotesk 52px/1.1 at 700
- display-m: Carousel section H2 "The mental health app for every moment", Hanken Grotesk 48px/1 at 700
- heading-l: Slide H3s, business band H2, FAQ H2, Hanken Grotesk 40px/1.15 at 700
- heading-m: Hero card titles, need-state H2, library card titles, Hanken Grotesk 32px/1.2 at 700
- stat: Stat numbers 8M+ and 34M+ in the sky band, Hanken Grotesk 56px/1.1 at 700
- quote: Member quotes and need-state tile labels, Hanken Grotesk 24px/1.3 at 400
- body-l: Hero check-list, tab labels, announcement bar, stat labels, Hanken Grotesk 18px/1.2 at 400
- body: Slide copy, quote attribution, library descriptions, newsletter copy, Hanken Grotesk 16px/1.5 at 400
- button: Pill button labels, Hanken Grotesk 16px/1.1 at 700
- Bold sentence-case headings, tracked -0.03em
- Regular body, generous 1.5 leading
- One family; weight does the hierarchy

## Layout

- margin 48px, margin-phone 24px, gutter 24px, gutter-phone 16px, section 64px, section-phone 32px, card-gap 24px, container-max 1344px, columns 3
- Centre headings
- Alternate white and one bright band
- End on one big CTA

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- pill (32px radius on 48px buttons; 24px radius on 44-48px tab pills; 112px radius on the 188px closing CTA)

## Components

- button-primary-blue: #0061EF fill, #FFFFFF text, corners {rounded.full}, 48px tall.
- button-primary-ink: #2D2C2B fill, #FFFFFF text, corners {rounded.full}, 48px tall.
- button-light: #F9F4F2 fill, #44423F text, corners {rounded.full}, 48px tall.
- button-outline-white: #0061EF fill, #FFFFFF text, corners {rounded.full}, 48px tall.
- button-cta-giant: #0061EF fill, #FFFFFF text, corners {rounded.2xl}, 188px tall.
- tab-pill: #F9F4F2 fill, #2D2C2B text, corners {rounded.lg}, 48px tall.
- need-state-tile: #FFFFFF fill, #2D2C2B text, corners {rounded.sm}.
- warm-card: #F9F4F2 fill, #2D2C2B text, corners {rounded.lg}.

## Do's and Don'ts

- Don't recolor the dot
- Don't retype the wordmark
- Don't set text in orange
- Don't use gradients as grounds
- Don't add a second display face
- Don't set headings light or italic
- Do check: Logo hidden. Cover the logo. It should still read as Headspace: flat bright bands, a round smiling character, ink bold type, pills.
- Do check: Swap test. Put another name on it. If nothing else changed, the faces, the yellow/blue bands and the warm voice are missing.
- Do check: Care check. Nothing implies Ebb or the app replaces a clinician.

DESIGN.md190 lines · version alpha

---
version: alpha
name: "HubSpot"
description: "The agentic customer platform that helps scaling businesses grow better."
colors:
  primary: "#ff4800"
  secondary: "#042729"
  surface: "#ffffff"
  on-surface: "#1f1f1f"
  cream-01: "#FCFCFA"
  cream-03: "#F8F5EE"
typography:
  headline-display:
    fontFamily: "Literata"
  body-md:
    fontFamily: "Onest"
  display-xl:
    fontFamily: "HubSpot Serif"
    fontSize: 65px
    fontWeight: 320
    lineHeight: 1.2
  display-l:
    fontFamily: "HubSpot Serif"
    fontSize: 48px
    fontWeight: 320
    lineHeight: 1.154
  h2:
    fontFamily: "HubSpot Serif"
    fontSize: 40px
    fontWeight: 320
    lineHeight: 1.1
  stat:
    fontFamily: "HubSpot Serif"
    fontSize: 40px
    fontWeight: 480
    lineHeight: 1.1
  caption-serif:
    fontFamily: "HubSpot Serif"
    fontSize: 28px
    fontWeight: 320
    lineHeight: 1.1
  h3:
    fontFamily: "HubSpot Sans"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.417
  h4:
    fontFamily: "HubSpot Sans"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.15
  h5:
    fontFamily: "HubSpot Sans"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.556
  p-large:
    fontFamily: "HubSpot Sans"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.778
  p-medium:
    fontFamily: "HubSpot Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.75
  label-m:
    fontFamily: "HubSpot Sans"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.75
  p-small:
    fontFamily: "HubSpot Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.571
    letterSpacing: -0.1px
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 9999px
spacing:
  margin: 110px
  margin-phone: 16px
  gutter: 24px
  gutter-phone: 16px
  section: 64px
  section-phone: 32px
  card-gap: 24px
  container-max: 1220px
  columns: 12
components:
  button-primary-on-light:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    height: 56px
  button-secondary-on-light:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    height: 56px
---
# HubSpot design system

## Overview

Generated on 2026-11-03 from the HubSpot brand study (unfairly.ai/brand-guidelines/hubspot/, checked 2026-10-31). An independent study of what HubSpot publishes and ships, not official HubSpot guidelines.

HubSpot's 2025 identity pairs one hot orange (#FF4800) with warm neutrals and a light serif headline face, so a busy CRM suite reads calm and friendly. The published rules are legal and naming law (trademark and partner pages); the visual system here is measured from the live site. Calm, warm neutrals and a light serif do the talking; orange is reserved for what you can click.

- Logo: HubSpot wordmark whose "o" is the sprocket mark; primary orange #FF4800 and a cream #F8F5EE version (2025 logo files) (from the HubSpot brand study). Link your approved master files.
- Headline on the site: "Grow better"
- Category: Agentic customer platform (CRM plus marketing, sales and service software)
- Audience: Scaling organizations, from startups and small businesses to enterprises, and their customer-facing teams
- Promise: Everything and everyone connected in one place, so growing a business is easier
- Voice: plain, warm, confident, helpful, human.
- Headlines and card captions end with a full stop; the hero and closing headlines set that stop in HubSpot orange #FF4800
- Always write HubSpot with a capital S
- Never abbreviate or blend the name: no HubConnector, SyncSpot, HubSync, HubTheme or ThemeSpot style names
- Partner copy avoids unverifiable superlatives such as "#1 agency" or "leading agency"; HubSpot statistics must be verifiable by HubSpot

## Colors

- Primary: #ff4800 (from the HubSpot brand study)
- Secondary: #042729 (from the HubSpot brand study)
- Surface: #ffffff (from the HubSpot brand study)
- On surface: #1f1f1f (from the HubSpot brand study)
- HubSpot orange (#FF4800): logo, buttons, links, checks
- Ink (#1F1F1F): all text on light, footer ground
- White (#FFFFFF): top bands, cards
- Cream 01 (#FCFCFA): lower page ground
- Cream 03 (#F8F5EE): text and logo on dark
- Teal 13 (#042729): closing CTA band
- Orange for buttons, links, checks and the logo; never a section ground
- Body text #1F1F1F, never pure black
- Dark grounds: teal #042729 for CTAs, #1F1F1F for the footer; text on dark is cream #F8F5EE

## Typography

- Display: Literata (from the HubSpot brand study)
- Body: Onest (from the HubSpot brand study)
- HubSpot Serif. Proprietary (HubSpot). Stand-in: Literata (SIL OFL 1.1)
- HubSpot Sans. Proprietary (HubSpot). Stand-in: Onest (SIL OFL 1.1)
- display-xl: Hero H1, HubSpot Serif 65px/1.2 at 320
- display-l: Closing CTA H2, HubSpot Serif 48px/1.154 at 320
- h2: Section H2, HubSpot Serif 40px/1.1 at 320
- stat: Statistic numeral, HubSpot Serif 40px/1.1 at 480
- caption-serif: Hero tile caption, HubSpot Serif 28px/1.1 at 320
- h3: Agent card title / integrations heading / G2 line, HubSpot Sans 24px/1.417 at 600
- h4: Footer heading (visible text), HubSpot Sans 14px/1.15 at 600
- h5: Product card title / caps label, HubSpot Sans 18px/1.556 at 600
- p-large: Hero lead, HubSpot Sans 18px/1.778 at 400
- p-medium: Body, HubSpot Sans 16px/1.75 at 400
- label-m: Nav link / button medium, HubSpot Sans 16px/1.75 at 600
- p-small: Card list / small text / eyebrow (caps), HubSpot Sans 14px/1.571 at 400
- Headlines in the serif at weight 300, sentence case
- Sans for body, buttons, nav, labels
- Caps only for the small eyebrow and logo-row label

## Layout

- margin 110px, margin-phone 16px, gutter 24px, gutter-phone 16px, section 64px, section-phone 32px, card-gap 24px, container-max 1220px, columns 12
- Section padding 64px
- Two-column header pattern for every section

## Elevation & Depth

- 1px rgba(0,0,0,0.11) solid card borders; 1px dashed rgba(0,0,0,0.11) dividers inside cards; a dotted 1px rule runs from a tagline chip to the section edge

## Shapes

- 16px on cards, panels, the testimonial card and agent cards and their images; 8px on buttons; 4px on tagline chips; 0 on the hero photo tiles; 50% on round carousel controls
- rounded

## Components

- button-primary-on-light: #FF4800 fill, #FFFFFF text, corners {rounded.md}, 56px tall. Get a demo (140x56)
- button-secondary-on-light: #FFFFFF fill, #FF4800 text, corners {rounded.md}, 56px tall. Get started free (173x56)

## Do's and Don'ts

- Don't change the logo color
- Don't photoshop or modify the logo
- Don't recolor the logo (published)
- Don't bold serif headlines
- Don't serif body text
- Don't unverifiable superlatives in partner copy (published)
- Do check: Logo hidden. Cover the logo. A light serif headline ending in an orange full stop over orange 8px buttons on warm white still reads as HubSpot.

DESIGN.md180 lines · version alpha

---
version: alpha
name: "IBM"
description: "IBM has always been a medium between people and machines, science, service and society, working in partnership toward progress (paraphrase of the guide's point of view)."
colors:
  primary: "#0f62fe"
  secondary: "#0043ce"
  surface: "#ffffff"
  on-surface: "#161616"
  gray-10: "#F4F4F4"
  gray-70: "#525252"
typography:
  headline-display:
    fontFamily: "IBM Plex Sans"
    fontSize: 53.65px
    fontWeight: 300
    lineHeight: 1.17
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  section-headline-h2:
    fontFamily: "IBM Plex Sans"
    fontSize: 53.65px
    fontWeight: 300
    lineHeight: 1.17
  section-intro:
    fontFamily: "IBM Plex Sans"
    fontSize: 21.88px
    fontWeight: 400
    lineHeight: 1.4
  hero-lead:
    fontFamily: "IBM Plex Sans"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
  announcement-line:
    fontFamily: "IBM Plex Sans"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
  case-study-headline:
    fontFamily: "IBM Plex Sans"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.29
  form-section-heading:
    fontFamily: "IBM Plex Sans"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.25
  band-label-heading:
    fontFamily: "IBM Plex Sans"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
  small-heading:
    fontFamily: "IBM Plex Sans"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
  card-title:
    fontFamily: "IBM Plex Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
  nav-link:
    fontFamily: "IBM Plex Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.375
rounded:
  none: 0px
  sm: 4px
  md: 16px
spacing:
  margin: 32px
  margin-phone: 16px
  gutter: 32px
  gutter-phone: 32px
  card-gap: 16px
  container-max: 1440px
  columns: 16
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 48px
---
# IBM design system

## Overview

Generated on 2026-11-03 from the IBM brand study (unfairly.ai/brand-guidelines/ibm/, checked 2026-10-29). An independent study of what IBM publishes and ships, not official IBM guidelines. Lines marked GAP were not found in the study.

Blue at the core of a gray world, one open typeface, and everything divided by two. IBM's system is engineered to be recognizable with the logo covered: Plex set light and flush left on the 2x Grid, Blue 60 for every action, and Paul Rand's 8-bar signing off. Engineered restraint. IBM fixes the parts that carry identity (Plex, the 2x Grid, Blue 60, the 8-bar) and lets teams flex only along one published axis, productive to expressive, so a data table and a keynote film still read as the same company.

- Logo: Clear space around the 8-bar equals the logo's height; around the rebus, the M height
- Headline on the site: "Let's create"
- Category: Global provider of hybrid cloud, AI and consulting services, working with clients in more than 175 countries (paraphrase of the About IBM boilerplate).
- Audience: Enterprise and government technology leaders and practitioners: the homepage speaks to teams running existing systems, IT operations, developers, and people building skills (observed).
- Promise: Put technology to work where it makes the biggest impact by connecting intelligent data, workload action, automated operations and hybrid control across the systems a client already relies on (paraphrase).
- Voice: Essential, Confident, Plain.
- Avoid all caps, especially in paragraphs; title case only for proper titles and product names
- Button labels in sentence case: first word and proper nouns capitalized
- Use curly quotes and apostrophes, never straight quotes
- Em dash for a strong break, en dash for number ranges (1945–1975), hyphen for compounds (check-in)

## Colors

- Primary: #0f62fe (from the IBM brand study)
- Secondary: #0043ce (from the IBM brand study)
- Surface: #ffffff (from the IBM brand study)
- On surface: #161616 (from the IBM brand study)
- Blue 60 (#0F62FE): The core blue: primary action color across every IBM product and experience (buttons, links, focus, selected, brand background).
- White (#FFFFFF): Page ground (Carbon White theme); the ibm.com page ground (observed 2026-10-29).
- Gray 10 (#F4F4F4): First layer on White: containers, fields, tiles.
- Gray 100 (#161616): Primary text and icons on light grounds; dark-theme page ground; the ibm.com footer (observed).
- Gray 70 (#525252): Secondary text and labels; the stat figures on ibm.com case-study cards (observed).
- Blue 70 (#0043CE): Link hover, information status.
- Count steps for contrast: 4.5:1 text generally needs 4-6 steps apart, 3:1 needs 3-5 (see the guide's table)
- Combine colors only inside the published 4-, 3-, 2- or 1-color families, each containing core blue
- Gradients: two colors from an approved 2-color family, values 30-60 for vibrancy, no more than two steps apart
- Light themes layer White and Gray 10 alternately; dark themes step one value lighter per layer

## Typography

- Display: IBM Plex Sans (from the IBM brand study)
- Body: IBM Plex Sans (from the IBM brand study)
- IBM Plex Sans, Headlines (Light 300 at display sizes), subheads, body, labels. Open (SIL Open Font License); design patented by IBM. On Google Fonts and Adobe Fonts; the GitHub release is the most current
- IBM Plex Sans, Body (Regular 400), labels and small headings (SemiBold 600). Open (SIL OFL)
- IBM Plex Mono, Code and code snippets in communications and specs (every glyph in a 600-unit width). Open (SIL OFL)
- headline-display: Leadspace headline (h1), IBM Plex Sans 53.65px/1.17 at 300
- body-md: Body, IBM Plex Sans 16px/1.5 at 400
- section-headline-h2: Section headline (h2), IBM Plex Sans 53.65px/1.17 at 300
- section-intro: Section intro, IBM Plex Sans 21.88px/1.4 at 400
- hero-lead: Hero lead, IBM Plex Sans 20px/1.4 at 400
- announcement-line: Announcement line, IBM Plex Sans 20px/1.4 at 400
- case-study-headline: Case-study headline, IBM Plex Sans 28px/1.29 at 400
- form-section-heading: Form section heading, IBM Plex Sans 32px/1.25 at 400
- band-label-heading: Band label heading, IBM Plex Sans 20px/1.4 at 600
- small-heading: Small heading, IBM Plex Sans 16px/1.5 at 600
- card-title: Card title, IBM Plex Sans 16px/1.4 at 400
- nav-link: Nav link, IBM Plex Sans 16px/1.375 at 400
- Flush left is the standard for all IBM typography
- Don't track Plex tightly; it is lighter and needs room
- Stack long headlines into two or three lines

## Layout

- margin 32px, margin-phone 16px, gutter 32px, gutter-phone 32px, card-gap 16px, container-max 1440px, columns 16
- Pick 1, 2, 4, 8 or 16 divisions and keep them through the design
- Divide the live area, not the canvas, when using margins
- Align type to the box padding, never inside it

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- square

## Components

- button-primary: #0F62FE fill, #FFFFFF text, corners {rounded.sm}, 48px tall.

## Do's and Don'ts

- Don't put the logo in a shape
- Don't change bar direction or weight, outline the bars or make a dot matrix
- Don't mix greens with reds, magentas or purples, or teals with reds or magentas
- Don't blend colors more than two steps apart (Blue 60 to Teal 20)
- Don't center paragraphs
- Don't use all caps for text
- Do check: Logo hidden. Cover the 8-bar. IBM's own test: it should still read as IBM through Plex, the grid, grays and one blue.
- Do check: Grid check. Every edge, gap and image size should land on the 8px mini unit and the column grid; anything off-grid goes back.
- Do check: Fact check. Every number has a named source beside it, and no line could pass for hype.

DESIGN.md175 lines · version alpha

---
version: alpha
name: "Kubernetes"
description: "A portable, extensible, open source platform for managing containerized workloads and services, with declarative configuration and automation (paraphrase)."
colors:
  primary: "#326ce5"
  secondary: "#6f6f6f"
  surface: "#ffffff"
  on-surface: "#212529"
  light-grey: "#F9F9F9"
  dark-grey: "#303030"
typography:
  headline-display:
    fontFamily: "Open Sans"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
  body-md:
    fontFamily: "Open Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  h2-bold:
    fontFamily: "Open Sans"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.2
  h1-phone:
    fontFamily: "Open Sans"
    fontSize: 27.85px
    fontWeight: 400
    lineHeight: 1.2
  h4:
    fontFamily: "Open Sans"
    fontSize: 21.6px
    fontWeight: 400
    lineHeight: 1.2
  card-title:
    fontFamily: "Open Sans"
    fontSize: 20.8px
    fontWeight: 400
    lineHeight: 1.346
  lead:
    fontFamily: "Open Sans"
    fontSize: 19.2px
    fontWeight: 400
    lineHeight: 1.5
  event:
    fontFamily: "Open Sans"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.5
  small:
    fontFamily: "Open Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  nav:
    fontFamily: "Open Sans"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
rounded:
  sm: 6px
  md: 8px
spacing:
  margin: 120px
  margin-phone: 20px
  gutter: 20px
  gutter-phone: 20px
  section: 60px
  section-phone: 60px
  card-gap: 20px
  container-max: 1200px
  columns: 2
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 33px
  button-video:
    backgroundColor: "{colors.surface}"
    textColor: "#495057"
    rounded: "{rounded.md}"
    height: 134px
---
# Kubernetes design system

## Overview

Generated on 2026-11-03 from the Kubernetes brand study (unfairly.ai/brand-guidelines/kubernetes/, checked 2026-10-30). An independent study of what Kubernetes publishes and ships, not official Kubernetes guidelines.

One blue (#326CE5), a ship's wheel in a heptagon, and a deep documentation style guide. Kubernetes publishes logo files and naming rules, not a visual system; its site runs on Open Sans, Bootstrap greys and flat blue-teal illustrations. A helm, not a brand campaign. Kubernetes steers by one mark, one blue and a strict, plain writing style, and lets a whole ecosystem build around it.

- Logo: Horizontal lockup: the helm in a blue heptagon beside the lowercase kubernetes wordmark (from the Kubernetes brand study). Link your approved master files.
- Headline on the site: "Production-Grade Container Orchestration"
- Category: Container orchestration
- Audience: Teams running containerized applications in production, from local testing to global enterprises, and the platform builders who extend it (paraphrase of homepage and overview).
- Promise: A framework to run distributed systems resiliently: scaling, failover and deployment patterns handled for you (paraphrase).
- Voice: Direct, Precise, Neutral, Inclusive.
- Address the reader as "you"; avoid "we" (the reader can't tell if they're included)
- Present tense ("This command starts a proxy"), unless the meaning needs another
- Active voice, unless it makes the sentence awkward
- Simple, direct language: "To create", not "In order to create"; no "please"

## Colors

- Primary: #326ce5 (from the Kubernetes brand study)
- Secondary: #6f6f6f (from the Kubernetes brand study)
- Surface: #ffffff (from the Kubernetes brand study)
- On surface: #212529 (from the Kubernetes brand study)
- Kubernetes Blue (#326CE5): The only official color. Logo heptagon, links, buttons. Pantone 285 C in print.
- White (#FFFFFF): Page ground; the helm and heptagon outline; text on blue and dark.
- Body ink (#212529): Site text on white (observed).
- Medium-light grey (#6F6F6F): Site muted text (observed SCSS); our reading as muted ink.
- Light grey (#F9F9F9): Feature-section ground (observed).
- Dark grey (#303030): Site dark grey and dark-mode ground (observed SCSS).
- Use #326CE5 for the logo whenever possible
- Use Pantone 285 C for print
- On the site, blue marks links and actions; text stays near-black or white

## Typography

- Display: Open Sans (from the Kubernetes brand study)
- Body: Open Sans (from the Kubernetes brand study)
- Open Sans, Headings 500-700 on kubernetes.io (observed; no type is published). Open (SIL OFL 1.1), Google Fonts
- Open Sans, Body 400. Open (SIL OFL 1.1), Google Fonts
- System monospace (SFMono-Regular, Menlo, Consolas), Code. System fonts, not distributed
- headline-display: Features heading (H2 in blue), Open Sans 32px/1.2 at 400
- body-md: Feature card body, Open Sans 16px/1.5 at 400
- h2-bold: Events band H2 (white, bold), Open Sans 32px/1.2 at 700
- h1-phone: Phone hero H1 (phone only), Open Sans 27.85px/1.2 at 400
- h4: Announcement title / section H4, Open Sans 21.6px/1.2 at 400
- card-title: Feature card title, Open Sans 20.8px/1.346 at 400
- lead: CNCF line, Open Sans 19.2px/1.5 at 400
- event: Event lines, Open Sans 24px/1.5 at 400
- small: Overview body / announcement body / footer legal, Open Sans 14px/1.5 at 400
- nav: Nav link, Open Sans 14px/1.5 at 700
- Open Sans is the real face on the site, open (SIL OFL), no stand-in needed
- Body 400; headings 500 to 700 as rendered
- Code in a monospace stack; there is no brand mono

## Layout

- margin 120px, margin-phone 20px, gutter 20px, gutter-phone 20px, section 60px, section-phone 60px, card-gap 20px, container-max 1200px, columns 2
- Docs headings ordered, no h4-h6 unless necessary (published)
- Use alert shortcodes for Note, Caution, Warning (published)
- Homepage pattern belongs to the next step (page anatomy)

## Elevation & Depth

- flat fills, no strokes, in illustrations; observed

## Shapes

- 6-8px on buttons, rounded feature cards; observed
- rounded

## Components

- button-primary: #326CE5 fill, #FFFFFF text, corners {rounded.sm}, 33px tall. Hide this notice (156x33) in the announcement band
- button-video: #FFFFFF fill, #495057 text, corners {rounded.md}, 134px tall. Watch Video, 224x134, text wraps to two lines, '▶ ' glyph before it; desktop only

## Do's and Don'ts

- Don't change its colors
- Don't change its design elements
- Don't recolor the logo
- Don't add a second brand hue for type
- Don't treat the site's Bootstrap scale as a published type system
- Don't say just, simply, easy, easily or simple
- Do check: Logo hidden. Cover the helm. If the page is just white, blue links and Open Sans, it reads as any docs site; the illustrations and the plain, exact copy are what's left of Kubernetes.
- Do check: Copy lint. For NEW copy: search for just, simply, easy, please, currently, new, e.g., i.e., K8S, cloud-native and open-source, and cut each. A rebuild of the existing homepage keeps its own lines verbatim.
- Do check: Endorsement. Does anything imply the Linux Foundation, CNCF or Kubernetes endorses a product? Rewrite as ' product for Kubernetes'.

DESIGN.md175 lines · version alpha

---
version: alpha
name: "Linear"
description: "A purpose-built system for product development, where teams and agents work in one shared, structured environment (paraphrase)."
colors:
  primary: "#5e6ad2"
  surface: "#f4f5f8"
  on-surface: "#222326"
typography:
  headline-display:
    fontFamily: "Inter"
    fontSize: 72px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.58px
  body-md:
    fontFamily: "Inter"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.16px
  display-xl:
    fontFamily: "Inter"
    fontSize: 64px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.41px
  display-l:
    fontFamily: "Inter"
    fontSize: 48px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.06px
  quote:
    fontFamily: "Inter"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.125
    letterSpacing: -0.7px
  lead:
    fontFamily: "Inter"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: -0.29px
  button-l:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 510
    lineHeight: 2.75
  caption:
    fontFamily: "Inter"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.18px
  ui:
    fontFamily: "Inter"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  mono-label:
    fontFamily: "IBM Plex Mono"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 8px
  md: 12px
  full: 9999px
spacing:
  margin: 80px
  margin-phone: 24px
  gutter: 32px
  gutter-phone: 16px
  section: 128px
  section-phone: 40px
  card-gap: 8px
  container-max: 1344px
  columns: 2
components:
  button-primary-pill:
    backgroundColor: "#E5E5E6"
    textColor: "#08090A"
    rounded: "{rounded.full}"
    height: 44px
  button-ghost-pill:
    backgroundColor: "#141516"
    textColor: "#F7F8F8"
    rounded: "{rounded.full}"
    height: 44px
---
# Linear design system

## Overview

Generated on 2026-11-03 from the Linear brand study (unfairly.ai/brand-guidelines/linear/, checked 2026-10-30). An independent study of what Linear publishes and ships, not official Linear guidelines.

A near-monochrome brand: a striped-disc mark in white or Nordic Gray, Inter with Inter Display headings, generated neutral themes, and interfaces where chrome recedes so the work leads. A plain, brief voice drawn from the Linear Method. Quality you feel, not see. Linear removes everything competing for attention (color, borders, icons, coined words) so that density reads as calm and the product itself is the brand.

- Logo: Linear wordmark: the logomark (a disc cut by diagonal stripes) beside 'Linear', monochrome (from the Linear brand study). Link your approved master files.
- Headline on the site: "The product development system for teams and agents"
- Category: Product development system (formerly issue tracking); the 2024 redesign framed the move from issue tracker to a system for product development.
- Audience: Product and engineering teams, from startups to larger, complex organizations including executives and managers (paraphrase).
- Promise: A fast, calm tool that surfaces what you need when you need it and keeps momentum (paraphrase).
- Voice: Plain, Direct, Calm, Craft-minded.
- "Linear" is one word with a capital L, never "Linear app"
- Capitalize dedicated releases as proper nouns (Linear Method)
- Plain language; titles that directly state the thing
- Don't invent terms; use the common word

## Colors

- Primary: #5e6ad2 (from the Linear brand study)
- Surface: #f4f5f8 (from the Linear brand study)
- On surface: #222326 (from the Linear brand study)
- Mercury White (#F4F5F8): Published light accent for the monochrome wordmark (on dark grounds). Used as paper and on_night: our reading.
- Nordic Gray (#222326): Published dark accent for the monochrome wordmark (on light grounds). Used as ink and night: our reading.
- Wordmark in Mercury White on dark, Nordic Gray on light
- Keep grounds neutral; the brand blue is for backgrounds only
- Light and dark both supported
- Neutrals with little blue chroma; warm but crisp, never muddy

## Typography

- Display: Inter (from the Linear brand study)
- Body: Inter (from the Linear brand study)
- Inter Display, Headings, for expression with readability. Open (SIL OFL 1.1)
- Inter, All other text. Open (SIL OFL 1.1)
- Berkeley Mono, 12px uppercase eyebrows, figure labels, dates and code in product mock-ups. Proprietary (US Graphics Company); stand-in IBM Plex Mono, SIL OFL 1.1
- headline-display: Prefooter H2, Inter 72px/1 at 510
- body-md: Body / small title, Inter 15px/1.6 at 400
- display-xl: Hero H1, Inter 64px/1 at 510
- display-l: Section H2 / statement, Inter 48px/1 at 510
- quote: Quote, Inter 32px/1.125 at 400
- lead: Section lead, Inter 24px/1.33 at 400
- button-l: Prefooter button, Inter 16px/2.75 at 510
- caption: Attribution, Inter 14px/1.5 at 400
- ui: Nav / footer link, Inter 13px/1.5 at 400
- mono-label: Mono eyebrow / date, IBM Plex Mono 12px/1.4 at 400
- Headings: Inter Display
- Everything else: Inter
- Sentence-case headings (observed)

## Layout

- margin 80px, margin-phone 24px, gutter 32px, gutter-phone 16px, section 128px, section-phone 40px, card-gap 8px, container-max 1344px, columns 2
- Put actions in predictable places
- Align labels, icons and buttons on shared lines
- Keep density, reduce noise

## Elevation & Depth

- Few, low-contrast borders and separators: structure felt, not seen

## Shapes

- Rounded: the refresh rounds the edges of borders and tabs (no radius published); the icon is used as a 'chip' with an appropriate corner radius

## Components

- button-primary-pill: #E5E5E6 fill, #08090A text, corners {rounded.full}, 44px tall. Get started (127x44); nav Sign up is the 32px size: 13px/510, padding 0 12px, 73x32
- button-ghost-pill: #141516 fill, #F7F8F8 text, corners {rounded.full}, 44px tall. Contact sales (144x44)

## Do's and Don'ts

- Don't alter the files in any way
- Don't imply a relationship, affiliation or endorsement by Linear
- Don't color the wordmark
- Don't use saturated color for chrome
- Don't mix in other sans families
- Don't set long text in the display cut
- Do check: Logo hidden. Cover the mark. It should still read as Linear: near-monochrome neutral ground, Inter Display headline, dim chrome around one focused content area, and a few plain words.
- Do check: Swap test. Put another project tool's logo on it. If the calm, the restraint and the plain copy don't feel out of place, it's generic, and it goes back.
- Do check: Noise check. Remove one border, icon or color. If nothing is lost, leave it out.

DESIGN.md161 lines · version alpha

---
version: alpha
name: "LinkedIn"
description: "The world's largest professional network: where people find jobs, grow their network and learn skills."
colors:
  primary: "#0a66c2"
  secondary: "#b24020"
  surface: "#ffffff"
  on-surface: "#191919"
  muted: "#666666"
  warm-grey: "#F3F2F0"
typography:
  headline-display:
    fontFamily: "Roboto"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.25
  body-md:
    fontFamily: "Roboto"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
  display-m:
    fontFamily: "Roboto"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.25
  label:
    fontFamily: "Roboto"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
  title-s:
    fontFamily: "Roboto"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
  link-s:
    fontFamily: "Roboto"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.25
  caption:
    fontFamily: "Roboto"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.25
rounded:
  none: 0px
  sm: 8px
  md: 21px
  lg: 24px
spacing:
  margin: 156px
  margin-phone: 16px
  gutter: 72px
  gutter-phone: 16px
  section: 60px
  section-phone: 56px
  card-gap: 16px
  container-max: 1128px
  columns: 2
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    height: 48px
  link-row:
    backgroundColor: "#EAE6DF"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    height: 64px
  select-box:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    height: 64px
---
# LinkedIn design system

## Overview

Generated on 2026-11-03 from the LinkedIn brand study (unfairly.ai/brand-guidelines/linkedin/, checked 2026-10-31). An independent study of what LinkedIn publishes and ships, not official LinkedIn guidelines.

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. One blue for everything you should do, set in calm warm neutrals with real people in circles.

- Logo: LinkedIn Logo: the word Linked followed by the [in] box, blue on white; the [in] Logo alone for members and developers (from the LinkedIn brand study). Link your approved master files.
- Headline on the site: "Discover new opportunities"
- Category: Professional network
- Audience: Anyone navigating their professional life: job seekers, students, workers, recruiters, marketers and sellers (paraphrase of the homepage and footer).
- Promise: Economic opportunity: the right job, connection or skill, through your professional community.
- Voice: Helpful, Plain, Warm, Encouraging.
- 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

## Colors

- Primary: #0a66c2 (from the LinkedIn brand study)
- Secondary: #b24020 (from the LinkedIn brand study)
- Surface: #ffffff (from the LinkedIn brand study)
- On surface: #191919 (from the LinkedIn brand study)
- LinkedIn Blue (#0A66C2): Logo, primary action, outline actions, links (observed; no hex is published)
- White (#FFFFFF): Page ground; preferred logo background (published)
- Ink (#191919): Text, rgba(0,0,0,0.9)
- Muted (#666666): Labels and footer links
- Warm grey (#F3F2F0): Full-bleed bands and footer
- Rust (#B24020): Editorial headlines
- 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

## Typography

- Display: Roboto (from the LinkedIn brand study)
- Body: Roboto (from the LinkedIn brand study)
- System UI font (SF Pro / Segoe UI / Roboto), Headlines 400. System fonts, already on the device: no licence or download needed
- System UI font, Body 400, controls 600. System fonts, no licence needed
- headline-display: Hero H1 / closing H2, Roboto 48px/1.25 at 400
- body-md: Lead / carousel body / link rows, Roboto 20px/1.5 at 400
- display-m: Section H2, Roboto 32px/1.25 at 400
- label: Buttons, chips, Roboto 16px/1.5 at 600
- title-s: Footer column head, Roboto 16px/1.25 at 600
- link-s: Footer link, Roboto 14px/1.25 at 600
- caption: Nav label, legal, Roboto 12px/1.25 at 400
- 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 pa
- Headlines 400 at 48/32/24, never bold
- Controls and footer links 600

## Layout

- margin 156px, margin-phone 16px, gutter 72px, gutter-phone 16px, section 60px, section-phone 56px, card-gap 16px, container-max 1128px, columns 2
- Left text, right content
- Full-bleed warm grounds alternate with white

## Elevation & Depth

- 1px rings drawn as inset box-shadow, never borders; one 1px 30% black divider in the nav

## Shapes

- Square cards and rows (0 radius); pills only on controls; photos cropped to circles; the learning select box is 8px
- pill

## Components

- button-primary: #0A66C2 fill, #FFFFFF text, corners {rounded.lg}, 48px tall. Join now (115x48), Get started (134x48)
- link-row: #EAE6DF fill, #191919 text, corners {rounded.none}, 64px tall. Find a new job + chevron right
- select-box: #FFFFFF fill, #191919 text, corners {rounded.sm}, 64px tall. Choose a topic to learn about + caret

## Do's and Don'ts

- Don't modify the color or shape of the [in] Logo
- Don't combine it with other symbols, words, images or designs
- Don't linkdin
- Don't [in]vesting
- Do check: 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.
- Do check: One blue. Count filled blue elements: more than one per screen and it no longer looks like LinkedIn.

DESIGN.md183 lines · version alpha

---
version: alpha
name: "Mailchimp"
description: "For small and mid-sized businesses and advanced marketers, Mailchimp is the email and marketing automation platform that takes the guesswork out of growth with data-backed recommendations, in a brand "
colors:
  primary: "#ffe01b"
  secondary: "#c5dbf2"
  surface: "#ffffff"
  on-surface: "#231e15"
  off-white: "#F5F5F5"
typography:
  headline-display:
    fontFamily: "Literata"
    fontSize: 62px
    fontWeight: 450
    lineHeight: 1.239
    letterSpacing: -0.62px
  body-md:
    fontFamily: "Hanken Grotesk"
    fontSize: 16px
    fontWeight: 330
    lineHeight: 1.75
    letterSpacing: -0.16px
  section-headline:
    fontFamily: "Literata"
    fontSize: 38.75px
    fontWeight: 450
    lineHeight: 1.033
    letterSpacing: -0.39px
  result-headline:
    fontFamily: "Literata"
    fontSize: 38.75px
    fontWeight: 450
    lineHeight: 1.166
    letterSpacing: -0.39px
  plan-headline:
    fontFamily: "Literata"
    fontSize: 46.5px
    fontWeight: 450
    lineHeight: 1.033
    letterSpacing: -0.47px
  stat-number:
    fontFamily: "Literata"
    fontSize: 46.5px
    fontWeight: 450
    lineHeight: 1.033
    letterSpacing: -0.47px
  quote:
    fontFamily: "Literata"
    fontSize: 31px
    fontWeight: 450
    lineHeight: 1.29
    letterSpacing: -0.31px
  lead:
    fontFamily: "Hanken Grotesk"
    fontSize: 20px
    fontWeight: 330
    lineHeight: 1.6
    letterSpacing: -0.2px
  card-title:
    fontFamily: "Hanken Grotesk"
    fontSize: 23px
    fontWeight: 330
    lineHeight: 1.3
    letterSpacing: -0.23px
  card-body:
    fontFamily: "Hanken Grotesk"
    fontSize: 14px
    fontWeight: 330
    lineHeight: 1.5
    letterSpacing: -0.14px
  card-bullet:
    fontFamily: "Hanken Grotesk"
    fontSize: 16px
    fontWeight: 330
    lineHeight: 1.35
    letterSpacing: -0.16px
  arrow-link:
    fontFamily: "Hanken Grotesk"
    fontSize: 16px
    fontWeight: 330
    lineHeight: 2
    letterSpacing: -0.16px
rounded:
  none: 0px
  sm: 16px
  md: 24px
  lg: 30px
  full: 9999px
spacing:
  margin: 80px
  margin-phone: 29px
  gutter: 16px
  gutter-phone: 16px
  section: 80px
  section-phone: 48px
  card-gap: 16px
  container-max: 1280px
  columns: 2
omitted:
  - section: components
    reason: "No component with a measured fill and text color in the Mailchimp brand study"
---
# Mailchimp design system

## Overview

Generated on 2026-11-03 from the Mailchimp brand study (unfairly.ai/brand-guidelines/mailchimp/, checked 2026-10-29). An independent study of what Mailchimp publishes and ships, not official Mailchimp guidelines. Lines marked GAP were not found in the study.

One loud color, warm near-black ink, a serif headline at regular weight, and a voice that explains before it entertains. A small-business brand that never shouts except with its yellow. Plain on purpose, so the weird lands. Mailchimp is mostly white, off-white and Peppercorn, closing on ochre; yellow is about half a percent of the desktop page. That restraint is what makes one hand-drawn scribble or a flash of Cavendish read instantly as Mailchimp.

- Logo: Freddie always winks
- Headline on the site: "Turn ideas into emails & SMS that connect"
- Category: "an email and marketing automations platform" (boilerplate wording)
- Audience: "small and mid-sized businesses and advanced marketers" (boilerplate wording)
- Promise: data-backed recommendations at the heart of your marketing, so you find and engage customers across email, social, landing pages and ads, automatically and with AI.
- Voice: Plainspoken, Genuine, Translator, Dry humor.
- Active voice, positive phrasing
- No slang or jargon
- Buttons start with a verb and stay short
- No humor or exclamation points in failure messages and alerts; if unsure, keep a straight face

## Colors

- Primary: #ffe01b (from the Mailchimp brand study)
- Secondary: #c5dbf2 (from the Mailchimp brand study)
- Surface: #ffffff (from the Mailchimp brand study)
- On surface: #231e15 (from the Mailchimp brand study)
- Cavendish Yellow (#FFE01B): Action and emphasis, in small doses: every primary button, the arrow-link circles, check icons, the one boxed number per headline, the hero's italic phrase, the active page
- Peppercorn (#231E15): Build with #231E15: mailchimp.com renders all text, button rings, ledges and ink bands in it (observed 2026-10-29). Mailchimp's brand-assets page publishes Peppercorn as #241C15,
- White (#FFFFFF): Default ground: nav, logo strip, case studies, integrations, all cards
- Off-white (#F5F5F5): Feature-card band, pricing band and disclaimer strip
- Tint blue (#C5DBF2): Occasional section ground on inner pages; not on the homepage
- Text on the yellow is ink, never white
- Yellow is never body text, and never a full-width band on the homepage
- Ochre #E7B75F is the footer ground; nowhere else on the page
- Tints are grounds on inner pages, never text

## Typography

- Display: Literata (from the Mailchimp brand study)
- Body: Hanken Grotesk (from the Mailchimp brand study)
- Means Web, Headlines h1–h3, regular weight, tight tracking. Proprietary
- Tally, Body, buttons, labels (the live CSS lists Graphik Web as its fallback). Proprietary
- Source Code Pro, Code. Open (OFL)
- headline-display: Hero headline (phone tracking 0) [Means 64px], Literata 62px/1.239 at 450
- body-md: Body [Tally 400], Hanken Grotesk 16px/1.75 at 330
- section-headline: Section headline [Means 40px], Literata 38.75px/1.033 at 450
- result-headline: Result-band headline [Means 40px; phone 28px], Literata 38.75px/1.166 at 450
- plan-headline: Pricing headline [Means 48px], Literata 46.5px/1.033 at 450
- stat-number: Stat number (case studies) [Means 48px], Literata 46.5px/1.033 at 450
- quote: Pull quote on photo [Means 32px], Literata 31px/1.29 at 450
- lead: Lead (phone line height 20px = 1.25) [Tally 400], Hanken Grotesk 20px/1.6 at 330
- card-title: Card title (sans, never serif) [Tally 400], Hanken Grotesk 23px/1.3 at 330
- card-body: Card description [Tally 400], Hanken Grotesk 14px/1.5 at 330
- card-bullet: Card bullet [Tally 400], Hanken Grotesk 16px/1.35 at 330
- arrow-link: Arrow-link label [Tally 400], Hanken Grotesk 16px/2 at 330
- Hero headline 64px desktop, 36px phone; section headline 40px, 29px phone
- Line height 1.2 for the hero, 1.0 for section headlines
- Display face at regular weight (400), never bold

## Layout

- margin 80px, margin-phone 29px, gutter 16px, gutter-phone 16px, section 80px, section-phone 48px, card-gap 16px, container-max 1280px, columns 2

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- GAP: corner radii and shape language.

## Components

- GAP: buttons, cards, charts and tables.

## Do's and Don'ts

- Don't alter the files
- Don't imply an endorsement
- Do check: Logo hidden. Cover the logo. It should still read as Mailchimp: the yellow, the ink, the serif, the hand-drawn strangeness.
- Do check: Swap test. Put a competitor's logo on it. If it still fits, it's generic, and it goes back.

DESIGN.md197 lines · version alpha

---
version: alpha
name: "Mastercard"
description: "A global technology company in the payments industry."
colors:
  primary: "#f37338"
  secondary: "#ff5f00"
  surface: "#f3f0ee"
  on-surface: "#141413"
  mastercard-red: "#EB001B"
  mastercard-yellow: "#F79E1B"
  panel: "#FCFBFA"
typography:
  headline-display:
    fontFamily: "Kumbh Sans"
    fontSize: 120px
    fontWeight: 500
    lineHeight: 1
  body-md:
    fontFamily: "Kumbh Sans"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.4px
  display-l:
    fontFamily: "Kumbh Sans"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1
  title:
    fontFamily: "Kumbh Sans"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.2
  pill-title:
    fontFamily: "Kumbh Sans"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 2
  body:
    fontFamily: "Kumbh Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.32px
  button:
    fontFamily: "Kumbh Sans"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1
  nav:
    fontFamily: "Kumbh Sans"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1
  eyebrow:
    fontFamily: "Kumbh Sans"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.84px
  chip:
    fontFamily: "Kumbh Sans"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1
  footer-lead:
    fontFamily: "Kumbh Sans"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
  footer-link:
    fontFamily: "Kumbh Sans"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1
rounded:
  sm: 20px
  md: 40px
  lg: 99px
  full: 9999px
spacing:
  margin: 100px
  margin-phone: 20px
  gutter: 234px
  gutter-phone: 20px
  section: 120px
  section-phone: 64px
  card-gap: 80px
  container-max: 1240px
  columns: 2
components:
  button-primary:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 40px
  photo-arrow:
    backgroundColor: "#FFFFFF"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
  label-pill:
    backgroundColor: "#FFFFFF"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
---
# Mastercard design system

## Overview

Generated on 2026-11-03 from the Mastercard brand study (unfairly.ai/brand-guidelines/mastercard/, checked 2026-10-31). An independent study of what Mastercard publishes and ships, not official Mastercard guidelines.

Mastercard's brand is a symbol famous enough to work without its name: two interlocking circles in red and yellow. The public Brand Center publishes the logo law (colors, clear space, minimum sizes, misuse, naming in text); the homepage shows how the circles become a whole interface: round photos, pill controls, thin orange orbits and a warm, quiet canvas with giant headlines. Everything on the page is a circle or part of one, so the brand is recognizable even where the logo isn't.

- Logo: The Mastercard Symbol: two interlocking circles, red (left) and yellow (right) with an orange overlap, used without the word mark since 2019 (from the Mastercard brand study). Link your approved master files.
- Headline on the site: "Priceless"
- Category: Payments network and technology
- Audience: People, businesses and governments (the homepage hero lead names all three)
- Promise: Payments that are secure, simple, smart and accessible, so everyone can take part in the digital economy
- Voice: optimistic, human, assured.
- Set the word Mastercard in the same typeface as the text around it; never swap in the Symbol for the word
- Never translate the Mastercard name; it appears in English except a few authorized versions
- Write contactless with a lowercase c as a descriptor; write tap & go in sentence case
- Each section opens with an uppercase eyebrow that names the audience or offer (BUSINESS AND GOVERNMENT SOLUTIONS, CARDS AND BENEFITS)

## Colors

- Primary: #f37338 (from the Mastercard brand study)
- Secondary: #ff5f00 (from the Mastercard brand study)
- Surface: #f3f0ee (from the Mastercard brand study)
- On surface: #141413 (from the Mastercard brand study)
- Mastercard Red (#EB001B): Left circle of the Symbol. Logo color only: RGB 235/0/27, CMYK 0/100/98/3, PANTONE 2035 C
- Mastercard Orange (#FF5F00): The overlap where the circles meet. Logo color only: RGB 255/95/0, CMYK 0/75/100/0, PANTONE 165 C
- Mastercard Yellow (#F79E1B): Right circle of the Symbol. Logo color only: RGB 247/158/27, CMYK 0/44/100/0, PANTONE 1375 C
- Warm canvas (#F3F0EE): Page ground of the whole homepage; also the fill of round arrow buttons and the text color on the black filled button
- Ink (#141413): All text on light grounds, filled button, 1px button rings, inactive carousel dots, footer ground
- Panel (#FCFBFA): The one raised panel (Cards and benefits): a lighter warm white card with 80px corners on the canvas
- Logo colors: Red #EB001B, Orange #FF5F00, Yellow #F79E1B, only in the Symbol, never altered
- Page ground #F3F0EE, text #141413
- One UI accent: #F37338, in dots, 1px lines and active states
- Dark only at the footer (#141413)

## Typography

- Display: Kumbh Sans (from the Mastercard brand study)
- Body: Kumbh Sans (from the Mastercard brand study)
- FF Mark (served as mccom on mastercard.com), Headlines and titles at weight 500 (Medium): 120, 64 and 36px, sentence case. Commercial (FontFont, now Monotype); not open, not ours to ship
- FF Mark Book (mccom 450), Lead and body at 450 (Book), buttons and nav at 500, eyebrows at 700 Bold uppercase. Commercial (FontFont, now Monotype); not open
- headline-display: Section headline (Together the possibilities..., Benefits and services...); phone line-height 1.1, Kumbh Sans 120px/1 at 500
- body-md: Lead paragraph, Kumbh Sans 20px/1.3 at 400
- display-l: Hero H1 and Priceless headline; phone line-height 1.1, Kumbh Sans 64px/1 at 500
- title: Card and row titles, Kumbh Sans 36px/1.2 at 500
- pill-title: Carousel title pill, Kumbh Sans 36px/2 at 500
- body: Small copy (row descriptions), Kumbh Sans 16px/1.4 at 400
- button: Button label, Kumbh Sans 16px/1 at 500
- nav: Nav label, Kumbh Sans 16px/1 at 500
- eyebrow: Eyebrow (uppercase), Kumbh Sans 14px/1 at 700
- chip: Carousel category pill, Kumbh Sans 16px/1 at 500
- footer-lead: Footer help line and phone accordion heads, Kumbh Sans 20px/1.2 at 500
- footer-link: Footer links and legal, Kumbh Sans 14px/1 at 500
- One family, three weights
- Sentence case headlines at weight 500, never bold
- Uppercase only for small eyebrows and footer headings

## Layout

- margin 100px, margin-phone 20px, gutter 234px, gutter-phone 20px, section 120px, section-phone 64px, card-gap 80px, container-max 1240px, columns 2
- 120px between blocks
- Two columns: headline left, lead right
- Zigzag stagger for card grids

## Elevation & Depth

- 1px Signal orange #F37338 outlines (stadium pills, orbit circles) and 1px ink rings on buttons

## Shapes

- Everything round: 80px corners on the hero frame and the panel, stadium (radius 999px) and full circles for photos, 40px on the video, pills for labels and buttons. No square corners anywhere on the page
- pill

## Components

- button-primary: #141413 fill, #F3F0EE text, corners {rounded.sm}, 40px tall. Learn more (137x40)
- photo-arrow: #FFFFFF fill, #141413 text, corners {rounded.full}.
- label-pill: #FFFFFF fill, #141413 text, corners {rounded.md}.

## Do's and Don'ts

- Don't recolor the Symbol
- Don't outline the Symbol
- Don't use the logo red or yellow as UI color
- Don't set text in orange
- Don't write MasterCard or Master Card
- Don't use the Symbol as a word inside a headline (read-through)
- Do check: Name. Every Mastercard is spelled Mastercard
- Do check: Symbol. full color, clear space 1/4 circle, at least 24px
- Do check: Shapes. no rectangular photos

DESIGN.md174 lines · version alpha

---
version: alpha
name: "Medium"
description: "For people who want to read and write with depth, Medium is the member-supported home for human writing, where anyone can find readers without ads or a following."
colors:
  primary: "#34aa45"
  secondary: "#000000"
  surface: "#f7f4ed"
  on-surface: "#242424"
  button-black: "#191919"
  button-black-hover: "#080808"
  muted-grey: "#6B6B6B"
  white: "#FFFFFF"
  dark-ground: "#171717"
  dark-nav: "#121212"
  dark-text: "#E5E5E5"
  dark-hairline: "#D2D2D2"
typography:
  headline-display:
    fontFamily: "Newsreader"
    fontSize: 120px
    fontWeight: 400
    lineHeight: 100px
    letterSpacing: -6.6px
  body-md:
    fontFamily: "Geist"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
  subline:
    fontFamily: "Geist"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 28px
  nav:
    fontFamily: "Geist"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  footer:
    fontFamily: "Geist"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 20px
  story-title:
    fontFamily: "Geist"
    fontSize: 42px
    fontWeight: 700
    lineHeight: 52px
    letterSpacing: -0.46px
  story-subtitle:
    fontFamily: "Geist"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 28px
  story-heading:
    fontFamily: "Geist"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 24px
  story-body:
    fontFamily: "Newsreader"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: -0.06px
  story-meta:
    fontFamily: "Geist"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
rounded:
  full: 9999px
spacing:
  margin: 64px
  margin-phone: 24px
  container-max: 1192px
  columns: 1
components:
  button-primary-large:
    backgroundColor: "{colors.button-black}"
    textColor: "{colors.white}"
    rounded: "{rounded.full}"
    height: 46px
  button-primary-nav:
    backgroundColor: "{colors.button-black}"
    textColor: "{colors.white}"
    rounded: "{rounded.full}"
    height: 38px
---
# Medium design system

## Overview

Generated on 2026-11-03 from the Medium brand study (unfairly.ai/brand-guidelines/medium/, checked 2026-10-30). An independent study of what Medium publishes and ships, not official Medium guidelines.

Medium publishes logo guidelines and two brand posts (2020 identity by COLLINS, 2024 wordmark-only refresh), plus about and membership pages. Everything else here is measured on the logged-out homepage on 2026-10-30: a one-screen cream page with one GT Super sentence, one black pill and a two-color collage. Medium earns recognition by getting out of the way: a cream page, one GT Super sentence, one black pill, and a wordmark in black or white. Color lives only in illustration, so the words always come first.

- Logo: The wordmark is the first choice wherever the space is not a 1:1 container: press images, banners, responsive sites, video thumbnails (published)
- Headline on the site: "Human stories & ideas"
- Category: open platform for reading and publishing human writing
- Audience: readers and writers of every kind: developers, novelists, designers, CEOs, anyone with a story
- Promise: deepen your understanding
- Voice: plain, warm, thoughtful, candid.
- No exclamation marks on the homepage, about or membership pages (observed; the dark-mode post uses them, so this is a marketing-page rule only)
- Buttons are a verb plus one word: Start reading, Get started, Sign in (observed)

## Colors

- Primary: #34aa45 (from the Medium brand study)
- Secondary: #000000 (from the Medium brand study)
- Surface: #f7f4ed (from the Medium brand study)
- On surface: #242424 (from the Medium brand study)
- Cream (#F7F4ED): page ground of the logged-out homepage: nav bar, hero field and footer band (one continuous ground)
- Ink (#242424): text color of nav links and the subline; wordmark SVG fill; 1px hairline under the nav and above the footer; story body text
- Black (#000000): the hero headline only (GT Super)
- Button black (#191919): fill and 1px border of both pill buttons (Get started, Start reading)
- Button black hover (#080808): pill button fill on hover
- Muted grey (#6B6B6B): footer links; story subtitles and meta (read time, date)
- Core: black and white (published); on the site, near-black #242424 text on cream #F7F4ED (observed)
- Secondary colors only on marketing surfaces about the Medium brand (published, 2020; hexes not published)
- Buttons are near-black #191919, never a hue (observed)
- Green #34AA45 appears only inside illustration (observed)

## Typography

- Display: Newsreader (from the Medium brand study)
- Body: Geist (from the Medium brand study)
- GT Super (Grilli Type). Commercial (Grilli Type); not supplied. Stand-in Newsreader 380 opsz 72 (OFL), -0.042em, same px sizes
- Söhne (Klim Type Foundry). Commercial (Klim); not supplied. Stand-in Geist 400 (OFL), -0.012em
- headline-display: Hero headline (h2), "Human / stories & ideas", Newsreader 120px/100px at 400
- body-md: Hero CTA label (Start reading), Geist 20px/28px at 400
- subline: Hero subline (h3), Geist 22px/28px at 400
- nav: Nav links and the Get started label, Geist 14px/20px at 400
- footer: Footer links, Geist 13px/20px at 400
- story-title: Story title (reading page, not on the homepage), Geist 42px/52px at 700
- story-subtitle: Story subtitle, Geist 22px/28px at 400
- story-heading: Section heading inside a story, Geist 20px/24px at 600
- story-body: Story body text (reading serif), Newsreader 20px/32px at 400
- story-meta: Byline and meta (read time, date), Geist 14px/20px at 400
- GT Super for display lines only, regular weight, tight tracking, sentence case (observed)
- Söhne 400 for nav, buttons, sublines and footer; 700 only for story titles (observed)
- Long-form reading in a serif: Source Serif 20/32 at a 680px measure (observed)

## Layout

- margin 64px, margin-phone 24px, container-max 1192px, columns 1
- Container 1192px max; margins 64 / 48 / 24 at =904 / 728-903 / 728 (observed)
- Headline wrapper max 720px; 48px gaps between headline, subline and button (32 after the headline on phone) (observed)
- Page height = viewport height; nothing below the fold (observed)

## Elevation & Depth

- only inside the illustration: grainy, printed edges on the green shapes
- 1px solid #242424 full-bleed hairlines under the nav and above the footer
- Shadow none anywhere on the homepage

## Shapes

- buttons are full pills (radius 999); nothing else on the homepage has a corner (no cards, no image radius)

## Components

- button-primary-large: #191919 fill, #FFFFFF text, corners {rounded.full}, 46px tall.
- button-primary-nav: #191919 fill, #FFFFFF text, corners {rounded.full}, 38px tall.

## Do's and Don'ts

- Don't color the wordmark, apply a gradient or fill it with an image
- Don't squeeze the full wordmark into a square
- Don't use green or any hue for text, links or buttons
- Don't use pure white as the homepage ground (the site uses cream #F7F4ED)
- Don't set headlines in bold or in a sans
- Don't use all caps

DESIGN.md195 lines · version alpha

---
version: alpha
name: "Meta"
description: "A social technology company building the future of human connection and the technology that makes it possible."
colors:
  primary: "#0457cb"
  secondary: "#0082fb"
  surface: "#ffffff"
  on-surface: "#0a1317"
  symbol-deep-blue: "#0064E0"
  wordmark-slate: "#1C2B33"
  muted-ink: "#5D6C7B"
  surface-2: "#F1F4F7"
typography:
  headline-display:
    fontFamily: "Archivo"
    fontSize: 130px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -6.5px
  body-md:
    fontFamily: "Figtree"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.3px
  card-title:
    fontFamily: "Figtree"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.167
    letterSpacing: 1.7px
  store-title:
    fontFamily: "Figtree"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.278
    letterSpacing: 1px
  feature-title:
    fontFamily: "Figtree"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.214
    letterSpacing: 1px
  hero-lead:
    fontFamily: "Figtree"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0.85px
  news-title:
    fontFamily: "Figtree"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0.85px
  eyebrow:
    fontFamily: "Figtree"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.444
    letterSpacing: 0.6px
  link:
    fontFamily: "Figtree"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.429
    letterSpacing: 0.35px
  button:
    fontFamily: "Figtree"
    fontSize: 14px
    fontWeight: 800
    lineHeight: 1.429
    letterSpacing: 0.4px
  legal:
    fontFamily: "Figtree"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.333
    letterSpacing: 0.35px
rounded:
  sm: 12px
  md: 24px
  full: 9999px
spacing:
  margin: 32px
  margin-phone: 16px
  gutter: 32px
  gutter-phone: 16px
  section: 80px
  section-phone: 48px
  card-gap: 32px
  container-max: 1376px
  columns: 4
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 44px
  button-primary-hero:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 52px
---
# Meta design system

## Overview

Generated on 2026-11-03 from the Meta brand study (unfairly.ai/brand-guidelines/meta/, checked 2026-10-31). An independent study of what Meta publishes and ships, not official Meta guidelines.

An infinity-loop symbol in a blue gradient, one variable typeface (Optimistic) and a single action blue. On meta.com the brand gets out of the way of photography: pill buttons, 24px-rounded photo cards and a giant condensed headline over video. Meta keeps its own surface nearly colorless so people and products carry the page; the brand lives in one loop, one blue, one typeface and very strict partner rules.

- Logo: The Meta logo: the infinity-loop symbol in a blue gradient beside the Meta wordmark, horizontal (from the Meta brand study). Link your approved master files.
- Headline on the site: "We're building the future of human connection"
- Category: Social technology: apps, AI, AI glasses and mixed reality
- Audience: Billions of people who use its apps, plus creators, developers, businesses and partners
- Promise: Go beyond what digital connection makes possible today.
- Voice: Optimistic, Plain, Confident, Warm.
- Credit lines are written in sentence case
- Never add "our", "by" or extra descriptors to a Meta product name
- Name integrations "[Meta technology] for [partner]" or "[Partner] for/with [Meta technology]"
- Never use the Meta logo or name to represent Facebook

## Colors

- Primary: #0457cb (from the Meta brand study)
- Secondary: #0082fb (from the Meta brand study)
- Surface: #ffffff (from the Meta brand study)
- On surface: #0a1317 (from the Meta brand study)
- Meta Blue (CTA) (#0457CB): every primary pill, text links (observed)
- Symbol blue (#0082FB): light end of the symbol gradient (logo file)
- Symbol deep blue (#0064E0): deep end of the symbol gradient (logo file)
- Ink (#0A1317): text on light grounds (observed)
- Wordmark slate (#1C2B33): wordmark on light; dark logo ground in the guide
- Muted ink (#5D6C7B): footer links, legal (observed)
- One action color: #0457CB for every primary pill and text link (observed)
- Symbol stays in its blue gradient or the mono variations (published: four variations)
- Text on photos is white; text on white and #F1F4F7 is #0A1317 (observed)
- Gray #F1F4F7 for tiles and the one tinted band (observed)

## Typography

- Display: Archivo (from the Meta brand study)
- Body: Figtree (from the Meta brand study)
- Optimistic VF (condensed, wdth 82), Hero headline only. Meta's proprietary company typeface; no public licence or download (not published)
- Optimistic VF, Everything else: headlines 500, titles 300, body 400, buttons 700. Meta's proprietary company typeface (not published)
- Optimistic Mono VF, loaded by meta.com, not used on the homepage. proprietary (not published)
- headline-display: Hero headline (condensed), Archivo 130px/1 at 700
- body-md: Body / tile label, Figtree 16px/1.5 at 500
- card-title: Product card title / section title, Figtree 48px/1.167 at 600
- store-title: Store intro H1, Figtree 36px/1.278 at 600
- feature-title: Why-buy card title, Figtree 28px/1.214 at 400
- hero-lead: Hero lead, Figtree 24px/1.25 at 600
- news-title: News card title, Figtree 24px/1.25 at 400
- eyebrow: Card eyebrow / newsletter label, Figtree 18px/1.444 at 500
- link: Nav and footer link, Figtree 14px/1.429 at 500
- button: Button label, Figtree 14px/1.429 at 800
- legal: Legal and consent text, Figtree 12px/1.333 at 500
- Headlines weight 500 in Optimistic (Figtree 600 in the stand-in), sentence case; Optimistic sets them at normal tracking, the Figtree stand-in at +0.035em (spec.type tracking_px already includes it)
- Large feature and news titles are Light 300 in Optimistic (Figtree 400)
- Buttons 14px Bold 700 in Optimistic (Figtree 800)

## Layout

- margin 32px, margin-phone 16px, gutter 32px, gutter-phone 16px, section 80px, section-phone 48px, card-gap 32px, container-max 1376px, columns 4
- 32px page margin and gaps on desktop, 16px on phone
- Section titles centred, 48px
- Phone: tiles and feature cards scroll sideways in one row

## Elevation & Depth

- none: no borders or shadows on cards

## Shapes

- 24px on cards, tiles and images; 12px on inputs; pills on buttons
- pill

## Components

- button-primary: #0457CB fill, #FFFFFF text, corners {rounded.full}, 44px tall. Shop (83x44), Learn more when it is the only button (125x44)
- button-primary-hero: #0457CB fill, #FFFFFF text, corners {rounded.full}, 52px tall. Shop in the hero (99x52)

## Do's and Don'ts

- Don't use the Meta logo to represent Facebook
- Don't use the symbol alone in brand inclusion
- Don't introduce a second accent color
- Don't put text on a flat brand-color block
- Don't say "Powered by"
- Don't add "our" or "by" to a product name
- Do check: Logo hidden. Cover the logo. It should still read as Meta: people-first photos in 24px-rounded cards, a blue pill beside a frosted pill, white sentence-case lines, gray-white surfaces.
- Do check: Swap test. Put another consumer-tech logo on it. If nothing about the loop, the single blue or the partner discipline feels out of place, it is generic.

DESIGN.md216 lines · version alpha

---
version: alpha
name: "Microsoft"
description: "One Microsoft across every device: products, AI and stories presented in one calm, familiar system (our reading of the Fluent principles and the homepage)."
colors:
  primary: "#0078d4"
  secondary: "#004275"
  surface: "#ffffff"
  on-surface: "#0e1726"
  body-navy: "#17253D"
  ice: "#F4FAFD"
  black: "#000000"
  logo-red: "#F25022"
  logo-green: "#7FBA00"
  logo-blue: "#00A4EF"
  logo-yellow: "#FFB900"
  logotype-gray: "#737373"
typography:
  headline-display:
    fontFamily: "Hanken Grotesk"
    fontSize: 62px
    fontWeight: 500
    lineHeight: 1.16
    letterSpacing: -1.55px
  body-md:
    fontFamily: "Hanken Grotesk"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.48px
  section-headline-h2:
    fontFamily: "Hanken Grotesk"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.17
    letterSpacing: -1.2px
  card-and-banner-headline:
    fontFamily: "Hanken Grotesk"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.8px
  feature-card-title-h3:
    fontFamily: "Hanken Grotesk"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.3px
  italic-prompt:
    fontFamily: "Hanken Grotesk"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.48px
  button-label:
    fontFamily: "Hanken Grotesk"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.47
    letterSpacing: -0.3px
  suggestion-pill:
    fontFamily: "Hanken Grotesk"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.47
  tag:
    fontFamily: "Hanken Grotesk"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: -0.48px
  header-link:
    fontFamily: "Hanken Grotesk"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.2
  footer-heading:
    fontFamily: "Hanken Grotesk"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: -0.37px
  footer-link:
    fontFamily: "Hanken Grotesk"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: -0.48px
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 18px
  2xl: 24px
  3xl: 200px
spacing:
  margin: 72px
  margin-phone: 16px
  gutter: 24px
  gutter-phone: 12px
  card-gap: 24px
  container-max: 1296px
  columns: 12
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    height: 40px
  button-on-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    height: 40px
  suggestion-pill:
    backgroundColor: "#E6EFFD"
    textColor: "#2A446F"
    rounded: "{rounded.lg}"
    height: 32px
  tag:
    backgroundColor: "#882A8B"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 30px
---
# Microsoft design system

## Overview

Generated on 2026-11-03 from the Microsoft brand study (unfairly.ai/brand-guidelines/microsoft/, checked 2026-10-29). An independent study of what Microsoft publishes and ships, not official Microsoft guidelines. Lines marked GAP were not found in the study.

Neutral grounds, navy Segoe type, one action blue and soft rounded cards, signed with four colored squares. Fluent 2 sets the rules; microsoft.com applies them softly. Calm by default, unmistakable in the details. Microsoft keeps the page quiet (white and ice grounds, plain sentence-case Segoe, one blue) so the four-square logo, product photos and rounded Fluent shapes carry the recognition.

- Logo: Symbol and logotype together
- Headline on the site: "Empower every person and every organization on the planet to achieve more"
- Category: Software, cloud, devices and AI for people and organizations (paraphrase of the homepage nav: Microsoft 365, Azure, Copilot, Windows, Surface, Xbox).
- Audience: Consumers first (the Personal tab is selected at rest), with a Business tab and a 'Shop for your business' link for small businesses (observed).
- Promise: Find what you need faster with AI-powered suggestions (the hero line).
- Voice: Plain, Friendly, Helpful.
- Keep it simple: plain language, short sentences and fragments
- Get to the point fast; prune every excess word
- Talk like a person: informal and conversational, one-on-one
- Second person (you, your); avoid first person unless writing as the reader

## Colors

- Primary: #0078d4 (from the Microsoft brand study)
- Secondary: #004275 (from the Microsoft brand study)
- Surface: #ffffff (from the Microsoft brand study)
- On surface: #0e1726 (from the Microsoft brand study)
- Communication blue (#0078D4): Filled buttons on white cards, the chat badge, the start of the AI field underline (observed 2026-10-29). Microsoft's own blue for actions.
- Ink navy (#0E1726): Every headline on microsoft.com and the label on white buttons.
- Body navy (#17253D): Body copy and quick-link labels.
- White (#FFFFFF): Cards, the header and the card-banner band.
- Ice (#F4FAFD): The AI story band ground; text on dark cards.
- Selected navy (#004275): The selected Personal pill.
- Neutrals ground the interface; lighter surfaces mark the area of focus
- Brand color for actions and selected states, never large surfaces
- Semantic colors only for status, never decoration
- Controls darken from rest to hover to pressed; focus adds a thicker stroke

## Typography

- Display: Hanken Grotesk (from the Microsoft brand study)
- Body: Hanken Grotesk (from the Microsoft brand study)
- Segoe UI Variable Display, Headlines at 500, card titles at 600. Proprietary (Microsoft); ships with Windows, not licensed for third-party web embedding
- Segoe UI Variable Text / Segoe UI, Body 16/24, buttons 15/22 600, header 13px, footer 11px. Proprietary (Microsoft)
- headline-display: Hero greeting (h1), Hanken Grotesk 62px/1.16 at 500
- body-md: Body, Hanken Grotesk 16px/1.5 at 400
- section-headline-h2: Section headline (h2), Hanken Grotesk 48px/1.17 at 500
- card-and-banner-headline: Card and banner headline, Hanken Grotesk 32px/1.25 at 500
- feature-card-title-h3: Feature card title (h3), Hanken Grotesk 20px/1.4 at 600
- italic-prompt: Italic prompt, Hanken Grotesk 16px/1.5 at 400
- button-label: Button label, Hanken Grotesk 15px/1.47 at 600
- suggestion-pill: Suggestion pill, Hanken Grotesk 15px/1.47 at 400
- tag: Tag, Hanken Grotesk 14px/1.43 at 600
- header-link: Header link, Hanken Grotesk 13px/1.2 at 400
- footer-heading: Footer heading, Hanken Grotesk 15px/1.33 at 600
- footer-link: Footer link, Hanken Grotesk 11px/1.45 at 400
- Sentence case; avoid all caps
- Left-align text by default; center only short copy that supports something else
- Baseline alignment for vertical rhythm

## Layout

- margin 72px, margin-phone 16px, gutter 24px, gutter-phone 12px, card-gap 24px, container-max 1296px, columns 12
- Space in 4px steps; more space around what matters
- 12-column grid; halves, thirds, quarters
- Round corners except at screen edges and inside split controls

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- rounded

## Components

- button-primary: #0078D4 fill, #FFFFFF text, corners {rounded.md}, 40px tall.
- button-on-dark: #FFFFFF fill, #0E1726 text, corners {rounded.md}, 40px tall.
- suggestion-pill: #E6EFFD fill, #2A446F text, corners {rounded.lg}, 32px tall.
- tag: #882A8B fill, #FFFFFF text, corners {rounded.sm}, 30px tall.

## Do's and Don'ts

- Don't make it a single color, or use a one-color white or black logo in full-color work
- Don't place it on busy grounds, photos or low-contrast grounds
- Don't flood a band with brand blue
- Don't use red, yellow or green as decoration
- Don't all-caps headlines
- Don't right-aligned long text in left-to-right languages
- Do check: Logo hidden. Cover the logo. Segoe-like type in sentence case, soft white cards, navy text and one blue should still read as Microsoft.
- Do check: Contrast check. Every text pairing meets 4.5:1 (3:1 for large text), and color never carries meaning alone.
- Do check: Trademark check. No Microsoft name used as a verb, noun or pun, and nothing implies endorsement.

DESIGN.md196 lines · version alpha

---
version: alpha
name: "Monzo"
description: "Monzo is building a new kind of bank, one built for your smartphone and designed for the way we live today."
colors:
  primary: "#ff4f40"
  secondary: "#fe6b1b"
  surface: "#f2f8f3"
  on-surface: "#091723"
  deep-navy: "#112231"
  pale-pink: "#FFD7F0"
  neon-yellow: "#C3FF34"
  mid-teal: "#016B83"
  pale-blue: "#BBF6E2"
  deep-khaki: "#3A4920"
  action-blue: "#218FB7"
  grey-1: "#75817E"
typography:
  headline-display:
    fontFamily: "Raleway"
    fontSize: 61.04px
    fontWeight: 900
    lineHeight: 1.2
  body-md:
    fontFamily: "Onest"
    fontSize: 20px
    fontWeight: 350
    lineHeight: 1.4
  hero-headline:
    fontFamily: "Raleway"
    fontSize: 48.83px
    fontWeight: 900
    lineHeight: 1.2
  section-headline-h2:
    fontFamily: "Raleway"
    fontSize: 39.06px
    fontWeight: 900
    lineHeight: 1.2
  regulatory-headline:
    fontFamily: "Raleway"
    fontSize: 44px
    fontWeight: 900
    lineHeight: 1.2
  slide-title:
    fontFamily: "Raleway"
    fontSize: 31.25px
    fontWeight: 750
    lineHeight: 1.2
    letterSpacing: -0.63px
  carousel-card-title:
    fontFamily: "Raleway"
    fontSize: 25px
    fontWeight: 750
    lineHeight: 1.4
    letterSpacing: -0.5px
  account-footer-title:
    fontFamily: "Raleway"
    fontSize: 25px
    fontWeight: 750
    lineHeight: 1.2
    letterSpacing: -0.5px
  spotlight-item-title:
    fontFamily: "Raleway"
    fontSize: 20px
    fontWeight: 675
    lineHeight: 1.4
    letterSpacing: -0.4px
  body:
    fontFamily: "Onest"
    fontSize: 16px
    fontWeight: 350
    lineHeight: 1.4
  emphasis-body:
    fontFamily: "Onest"
    fontSize: 16px
    fontWeight: 550
    lineHeight: 1.4
    letterSpacing: 0.16px
  button-label:
    fontFamily: "Onest"
    fontSize: 16px
    fontWeight: 550
    lineHeight: 1.4
    letterSpacing: 0.16px
rounded:
  full: 9999px
spacing:
  margin: 64px
  margin-phone: 16px
  section: 64px
  section-phone: 32px
  card-gap: 24px
  container-max: 1440px
components:
  button-primary:
    backgroundColor: "{colors.on-surface}"
    textColor: "#FFFFFF"
    rounded: "{rounded.full}"
    height: 48px
  button-white:
    backgroundColor: "#FFFFFF"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    height: 48px
---
# Monzo design system

## Overview

Generated on 2026-11-03 from the Monzo brand study (unfairly.ai/brand-guidelines/monzo/, checked 2026-10-29). An independent study of what Monzo publishes and ships, not official Monzo guidelines. Lines marked GAP were not found in the study.

Hot coral on soft white and deep navy, a puffy extra-bold grotesk for short staggered headlines over a friendly house sans, sun-drenched photography and flat app screens with a midday shadow; words that are kind first and witty by channel. One hot colour, always present, never forced: Monzo makes the first impression in hot coral, soft white and deep navy, then rewards people with more colour, more wit and more magic the deeper they go.

- Logo: Clear space inside a holding shape: at least the width of a "z" around the wordmark (p.8).
- Headline on the site: "Banking made easy"
- Category: UK app-based bank (regulated since August 2016) for personal and business customers.
- Audience: Everyday people from a diverse range of backgrounds; personal, joint, under-16s and business customers.
- Promise: Banking made easy, brighter and more human.
- Voice: Straightforward kindness, Everyday magic, Warm wit.
- Never set Monzo Sans in all caps
- Headlines short and punchy: short phrase, big impact
- Say what it means for the reader before why we did it
- Swap formal, Latin-rooted business words for the ones you would say out loud

## Colors

- Primary: #ff4f40 (from the Monzo brand study)
- Secondary: #fe6b1b (from the Monzo brand study)
- Surface: #f2f8f3 (from the Monzo brand study)
- On surface: #091723 (from the Monzo brand study)
- Hot coral (#FF4F40): The brand colour: card, wordmark, first impressions; always present somewhere, but need not dominate (pp.15, 17).
- Soft white (#F2F8F3): Light ground: panels, account cards, nav track. On coral and navy the live homepage sets white #FFFFFF text, not soft white; the guide (2022, p.19) uses soft white type there.
- Deep navy (#112231): Dark ground (footer, navy slides and panels). Text on the live homepage is #091723, not #112231; the guide (2022, p.18) also uses deep navy as text.
- Mid orange (#FE6B1B): Secondary palette, expressive and deeper touchpoints (pp.20-21).
- Pale pink (#FFD7F0): Secondary palette; panels behind product visuals (pp.20, 61).
- Neon yellow (#C3FF34): Secondary palette; art direction openers and highlight panels (pp.20, 43).
- Show hot coral in all brand communications; it need not dominate (p.17).
- Three moods: all-out hot coral, light and breezy with a touch of coral, dark and slick with a punch of coral (p.18).
- Adverts may go all-out coral; websites need more deep navy for readability (p.18).
- Key pairings: hot coral + soft white, deep navy + soft white, AA at 18pt and above, in either proportion (p.19).

## Typography

- Display: Raleway (from the Monzo brand study)
- Body: Onest (from the Monzo brand study)
- MonzoSansDisplay, Every homepage headline: 800 for H1/H2, 700 for card titles, 600 for small heads (observed 2026-10-29). proprietary Monzo face, self-hosted woff2 from static-assets.monzo.com; not licensed to us
- Monzo Sans (served as MonzoSansText), Functional typeface in four weights (Regular, Medium, Semi-bold, Bold): body, lead copy, sub-headers, UI, data; always sentence case (pp.35-38). proprietary Monzo face, not licensed 
- Oldschool Grotesk Compact Extra Bold, Hero typeface: big, short headlines, staggered for rhythm; expressive end of the tonal flex (pp.33-34, 39). Proprietary commercial typeface; not in the press kit, not on Google Fonts
- headline-display: Step numeral, desktop only (real MonzoSansDisplay 800; set Raleway 900), Raleway 61.04px/1.2 at 900
- body-md: Lead / intro (real MonzoSansText 400; set Onest 350), Onest 20px/1.4 at 350
- hero-headline: Hero headline h1 (real MonzoSansDisplay 800; set Raleway 900), Raleway 48.83px/1.2 at 900
- section-headline-h2: Section headline h2 (real MonzoSansDisplay 800; set Raleway 900), Raleway 39.06px/1.2 at 900
- regulatory-headline: Regulatory headline h2 (real MonzoSansDisplay 800; set Raleway 900), Raleway 44px/1.2 at 900
- slide-title: Slide title h3 (real MonzoSansDisplay 700; set Raleway 750, letter-spacing -0.02em), Raleway 31.25px/1.2 at 750
- carousel-card-title: Carousel card and step title h3 (real MonzoSansDisplay 700; set Raleway 750, -0.02em), Raleway 25px/1.4 at 750
- account-footer-title: Account card title, footer heading h3 (real MonzoSansDisplay 700; set Raleway 750, -0.02em), Raleway 25px/1.2 at 750
- spotlight-item-title: Spotlight item title (real MonzoSansDisplay 600; set Raleway 675, -0.02em), Raleway 20px/1.4 at 675
- body: Body (real MonzoSansText 400; set Onest 350), Onest 16px/1.4 at 350
- emphasis-body: Emphasis: tile text, footer links, prices, tags, nav labels (real MonzoSansText 600; set Onest 550), Onest 16px/1.4 at 550
- button-label: Button label (real MonzoSansText 600; set Onest 550, letter-spacing 0.01em), Onest 16px/1.4 at 550
- Lead with Oldschool Grotesk for larger type; Monzo Sans for focused information (p.38).
- Headlines bold, big, short; stagger lines for rhythm (p.34).
- Monzo Sans is always sentence case (p.36).

## Layout

- margin 64px, margin-phone 16px, section 64px, section-phone 32px, card-gap 24px, container-max 1440px
- Website first impression in core colours; more colours further in (pp.22-23).
- Wordmark in a corner or centred (p.9).
- Stagger headlines in a considered rhythm (p.34).

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- rounded panels and cards (p.66); radius not published
- pill

## Components

- button-primary: #091723 fill, #FFFFFF text, corners {rounded.full}, 48px tall.
- button-white: #FFFFFF fill, #091723 text, corners {rounded.full}, 48px tall.

## Do's and Don'ts

- Don't break the clear-space rules
- Don't overlay the logo on text
- Don't use multiple colours in typography
- Don't make the logo a different colour from the type
- Don't use the hero typeface in signposting, UI elements, body copy or infographics
- Don't use the functional typeface in headlines
- Do check: Logo hidden. Cover the wordmark. It should still read as Monzo: hot coral somewhere, a puffy extra-bold headline, warm sunlight, a flat app screen or the coral card.
- Do check: First impression. Is the first screen or panel only hot coral, soft white and deep navy? Secondary colours belong further in.
- Do check: Hero face audit. Is the hero face only in big headlines, and never in UI, body, signposting, charts or exaggerated UI elements?

DESIGN.md177 lines · version alpha

---
version: alpha
name: "Mozilla"
description: "Mozilla is the people’s platform, where everyone can control their internet."
colors:
  primary: "#00d230"
  secondary: "#ff97e2"
  surface: "#fafafa"
  on-surface: "#000000"
  black: "#161616"
  strong-white: "#FFFFFF"
  pink-1: "#FFF1F8"
  dark-gray-grey-2: "#414141"
typography:
  headline-display:
    fontFamily: "Mozilla Headline"
    fontSize: 128px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -1.28px
  body-md:
    fontFamily: "Mozilla Text"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.25
  section-headline:
    fontFamily: "Mozilla Headline"
    fontSize: 80px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Mozilla Headline"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.32px
  year-label:
    fontFamily: "Mozilla Headline"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.25
  call-to-action-link:
    fontFamily: "Mozilla Headline"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.1
  lead:
    fontFamily: "Mozilla Text"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
  section-intro:
    fontFamily: "Mozilla Text"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
  product-name:
    fontFamily: "Mozilla Text"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1
  nav-link:
    fontFamily: "Mozilla Text"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.25
  muted-description:
    fontFamily: "Mozilla Text"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.25
  tile-description:
    fontFamily: "Mozilla Text"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
rounded:
  none: 0px
spacing:
  margin: 32px
  margin-phone: 16px
  gutter: 16px
  gutter-phone: 8px
  section: 64px
  section-phone: 32px
  card-gap: 16px
  container-max: 1440px
  columns: 12
omitted:
  - section: components
    reason: "No component with a measured fill and text color in the Mozilla brand study"
---
# Mozilla design system

## Overview

Generated on 2026-11-03 from the Mozilla brand study (unfairly.ai/brand-guidelines/mozilla/, checked 2026-10-29). An independent study of what Mozilla publishes and ships, not official Mozilla guidelines. Lines marked GAP were not found in the study.

Black and white with a small, loud green; a uniwidth slab-rooted headline face Mozilla gives away; and everything, from band edges to illustrations to photo frames, cut on a pixel grid. An activist voice that tells it straight. One system, one dial. Mozilla runs the same black, white, pixel flag and green from Governments-quiet to Grassroots-loud, so a public-interest voice can speak to a regulator and a festival without becoming two brands.

- Logo: Clear space: x, the height of the lowercase z in Mozilla; the symbol takes 2x the width of the flag's pole
- Headline on the site: "Reclaim the internet with us"
- Category: Nonprofit-led family of organizations: an activist organization that builds products, funds and advocates for a better internet (paraphrase of the brand promise).
- Audience: Four key audiences: Developers, Users, Policymakers, Communities.
- Promise: Put control of the internet back in the hands of the people using it, and invite them to reclaim it together, keeping it easy, safe and free (paraphrase).
- Voice: Passionate, Welcoming, No bullsh*t.
- Plain language; avoid jargon
- Spell out acronyms and initialisms at first use
- Start and end with real, tangible impact, not intellectual grandstanding
- Cut to the chase; say what needs saying without fluff

## Colors

- Primary: #00d230 (from the Mozilla brand study)
- Secondary: #ff97e2 (from the Mozilla brand study)
- Surface: #fafafa (from the Mozilla brand study)
- On surface: #000000 (from the Mozilla brand study)
- Green (#00D230): Buttons and calls to action (limited use), illustration highlights. The guide's ratio is about 10% of a piece. On the mozilla.org homepage green is the animated hero flag (216x253px) 
- Black (#161616): Dark grounds. About 45%.
- White (#FAFAFA): The guide's White: about 45% of print and deck pieces. On mozilla.org it is the tag fill, the product-row rules and the row hover fill, not the page ground.
- Strong black (#000000): Type only, never a background
- Strong white (#FFFFFF): Type on dark grounds. Also the mozilla.org page ground (observed 2026-10-29), though the guide reserves it for type: use #FFFFFF for web page grounds, #FAFAFA for print and dec
- Pink (#FF97E2): Grassroots pop
- Type is strong black or strong white; colored text is out (the website's exception: #414141 product descriptions)
- Strong black on Green scores 10.26:1; Green on Black 8.84:1
- Multi-pop: put strong black or strong white fields between colors
- The tertiary palette (Aqua, Seed, Grey, Clay) is for charts only

## Typography

- Display: Mozilla Headline (from the Mozilla brand study)
- Body: Mozilla Text (from the Mozilla brand study)
- Mozilla Headline, Headlines 24pt and up, Standard width; Condensed ExtraLight for large numbers. Open (SIL OFL); on Google Fonts since 2025-07-28 as variable fonts (Headline: wght 200-700, wdth 75-125; Text: wght 200-700
- Mozilla Text, Body, subheads, buttons, labels. Open (SIL OFL); on Google Fonts since 2025-07-28 as variable fonts (Headline: wght 200-700, wdth 75-125; Text: wght 200-700)
- headline-display: Hero headline, Mozilla Headline 128px/1 at 600
- body-md: Body, Mozilla Text 18px/1.25 at 400
- section-headline: Section headline, Mozilla Headline 80px/1 at 600
- card-title: Card title, Mozilla Headline 32px/1.1 at 600
- year-label: Year label, Mozilla Headline 48px/1.25 at 600
- call-to-action-link: Call-to-action link, Mozilla Headline 32px/1.1 at 600
- lead: Hero subline, Mozilla Text 24px/1.25 at 400
- section-intro: Section intro, Mozilla Text 24px/1.25 at 400
- product-name: Product name, Mozilla Text 24px/1 at 600
- nav-link: Nav link, Mozilla Text 18px/1.25 at 600
- muted-description: Muted description, Mozilla Text 18px/1.25 at 400
- tile-description: Tile description, Mozilla Text 16px/1.25 at 400
- XL headlines 61pt and up, headlines 24pt and up in Mozilla Headline; subheads 19–23pt, body 13–18pt, small 10–12pt in Mozilla Text
- Line spacing: headlines 90%, subheads 110%, body 125%, small 140%
- Letter spacing 0; XL headlines may go to -20 at most

## Layout

- margin 32px, margin-phone 16px, gutter 16px, gutter-phone 8px, section 64px, section-phone 32px, card-gap 16px, container-max 1440px, columns 12
- Every headline and intro uses text-wrap: balance (report intro excepted); headlines break before a name and never split it
- Green may appear in imagery only as: the hero flag, one editorial cover (the report tile), and the small news markers. Nothing else on the page is green: no green photos, no green-dominant story cards, no green illustration beside the green cover

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- square

## Components

- GAP: buttons, cards, charts and tables.

## Do's and Don'ts

- Don't angle, distort, outline, crop or modify the logo
- Don't typeset the logo
- Don't use Mozilla Headline below 24pt
- Don't set primary headlines in Mozilla Text
- Do check: Logo hidden. Cover the logo. It should still read as Mozilla: mostly black and white, one green pop, a huge left-aligned Headline, and a pixel edge somewhere.
- Do check: Swap test. Put another nonprofit's logo on it. If the pixel grid, the giveaway type and the no-bullsh*t line don't feel out of place, it's generic, and it goes back.

DESIGN.md188 lines · version alpha

---
version: alpha
name: "NASA"
description: "The United States civil space and aeronautics agency, showing the public what it is exploring right now."
colors:
  primary: "#d83933"
  secondary: "#0032a0"
  surface: "#ffffff"
  on-surface: "#1b1b1b"
  nasa-red: "#E4002B"
  arrow-red: "#F64137"
  black: "#000000"
  carbon-90: "#17171B"
  spacesuit-white: "#F6F6F6"
typography:
  headline-display:
    fontFamily: "Inter"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.05
  body-md:
    fontFamily: "Public Sans"
  display-l:
    fontFamily: "Inter"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.1
  display-m:
    fontFamily: "Inter"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 0.95
  display-iotd:
    fontFamily: "Inter"
    fontSize: 41px
    fontWeight: 700
    lineHeight: 0.95
  heading-l:
    fontFamily: "Inter"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1
  heading-m:
    fontFamily: "Inter"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.05
  card-title:
    fontFamily: "Inter"
    fontSize: 29px
    fontWeight: 700
    lineHeight: 1.05
  link-l:
    fontFamily: "Inter"
    fontSize: 22.4px
    fontWeight: 700
    lineHeight: 1
  nav:
    fontFamily: "Inter"
    fontSize: 17.6px
    fontWeight: 600
    lineHeight: 1
  link:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1
  footer-link:
    fontFamily: "Inter"
    fontSize: 14.4px
    fontWeight: 400
    lineHeight: 1.2
  news-title:
    fontFamily: "Public Sans"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.05
rounded:
  none: 0px
  sm: 4px
  full: 9999px
spacing:
  margin: 72px
  margin-phone: 24px
  gutter: 20px
  gutter-phone: 16px
  section: 72px
  section-phone: 72px
  card-gap: 16px
  container-max: 1296px
  columns: 4
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 46px
---
# NASA design system

## Overview

Generated on 2026-11-03 from the NASA brand study (unfairly.ai/brand-guidelines/nasa/, checked 2026-10-30). An independent study of what NASA publishes and ships, not official NASA guidelines.

NASA's published standards guard one protected mark (the Insignia) and two colors; its website runs on the open Horizon Design System (Inter, Public Sans, DM Mono) and lets mission photography carry all the color, framed by black and white bands, a red arrow on every link and tracked mono metadata. The picture is the brand. NASA keeps its interface almost colorless and square so that the most striking photographs anyone publishes do the work; the marks are protected by law, so the system is recognisable from the photographs, the bold sans and the red arrows alone.

- Logo: The NASA Insignia ("meatball"): a blue sphere with white stars, a white orbit, a red vector and the word NASA. Described only; this kit carries no NASA mark (protected under 14 CFR 1221). A borrowed kit uses the org's own logo. (from the NASA brand study). Link your approved master files.
- Headline on the site: "Explore the Universe from your Inbox"
- Category: U.S. government agency for aeronautics and space (the agency name itself).
- Audience: The general public, students and educators, media, and partners (Brand Center addresses partners, brands and vendors).
- Promise: Discovery, shared openly: imagery and data that are generally free to use for education and information.
- Voice: Plain, Curious, Factual, Invitational.
- Institutional copy names NASA in the third person; only hero calls to action address "you".
- Never set the organisation name in decorative or novelty fonts, or in lettering that resembles the Insignia typeface or the Worm logotype (NASA rule).
- Metadata labels (type, read time, date, count) in DM Mono 500 uppercase, 3.5px tracking; never sentences in mono.
- Every text link ends with the round red arrow badge; link labels are 1-4 words (Learn More, Discover More, Sign Up).

## Colors

- Primary: #d83933 (from the NASA brand study)
- Secondary: #0032a0 (from the NASA brand study)
- Surface: #ffffff (from the NASA brand study)
- On surface: #1b1b1b (from the NASA brand study)
- NASA Blue (#0032A0): Published Insignia blue (PMS 286). Not a web UI color on the homepage.
- NASA Red (#E4002B): Published Insignia vector and Worm red (PMS 185).
- CTA Red (#D83933): Solid button fill (observed).
- Arrow Red (#F64137): Round arrow badge after every link (observed).
- Black (#000000): Nav, hero, video band, footer.
- Carbon 90 (#17171B): Missions band.
- NASA Blue and NASA Red are the Insignia's colors; reproduce them exactly in PANTONE, CMYK or RGB
- Full-color Insignia on white, black, grey or silver (PMS 877); other grounds only with enough contrast and no clashing saturation
- Worm only in NASA Red, white or black (published)
- On the web: black and white bands, color from photos, red only for actions (observed)

## Typography

- Display: Inter (from the NASA brand study)
- Body: Public Sans (from the NASA brand study)
- Inter, Display and headings (Horizon Design System). SIL Open Font License 1.1 (Google Fonts)
- Public Sans, Body copy. SIL Open Font License 1.1 (Google Fonts)
- DM Mono, Numbers and small labels. SIL Open Font License 1.1 (Google Fonts)
- headline-display: Hero H1, Inter 72px/1.05 at 700
- display-l: Subscription H2, Inter 56px/1.1 at 700
- display-m: Featured News H2 / feature story H2, Inter 48px/0.95 at 700
- display-iotd: Image Of The Day H2, Inter 41px/0.95 at 700
- heading-l: Section H2 (NASA Missions, More NASA Images, More Topics), Inter 40px/1 at 700
- heading-m: Featured video H2, Inter 36px/1.05 at 700
- card-title: Topic card title, Inter 29px/1.05 at 700
- link-l: Header link (Recently Published, Discover More, Sign Up), Inter 22.4px/1 at 700
- nav: Nav item, Inter 17.6px/1 at 600
- link: Text link (Mission Overview, Learn More), Inter 16px/1 at 600
- footer-link: Footer link, Inter 14.4px/1.2 at 400
- news-title: News card title, Public Sans 22px/1.05 at 700
- Inter for display and headings; Public Sans for body; DM Mono for numbers and small labels (published)
- The agency name and acronym always in a clean sans-serif (published)
- NASA rule: no text in fonts or styles resembling the Insignia typeface or the Worm (published)

## Layout

- margin 72px, margin-phone 24px, gutter 20px, gutter-phone 16px, section 72px, section-phone 72px, card-gap 16px, container-max 1296px, columns 4
- 72px band padding top and bottom
- Cards 310x465 portrait in rows of four
- Section H2 at left, its arrow link right-aligned on the same line

## Elevation & Depth

- 1px hairlines: rgba(255,255,255,0.2) column rules in the hero, #58585B footer rule, #565C65 search border

## Shapes

- square: cards, photos, figure frames and bands all have 0 radius; only buttons (4px) and the round badges/controls (50%) are curved
- rounded

## Components

- button-primary: #D83933 fill, #FFFFFF text, corners {rounded.sm}, 46px tall. Join the Mission (216x46); phone full width 342x43 at 18.9px

## Do's and Don'ts

- Don't delete, add or distort elements
- Don't add a glow, shadow or effect
- Don't fill bands with NASA Blue or NASA Red on the web (observed: never done)
- Don't use the Worm in NASA Blue (published)
- Don't imitate the Worm's letterforms or the Insignia's serif NASA
- Don't use a decorative or novelty face for the name
- Do check: Logo hidden. Cover the logo. It should still read as this system: photography in square cards under a black skrim, white Inter Bold, red arrow badges, caps mono labels.
- Do check: No borrowed marks. No meatball, worm, seal, orbit, vector or star motif, and no lettering that resembles the Insignia typeface or the Worm.
- Do check: No endorsement. No wording that implies NASA approval ("official NASA", "NASA approved").

DESIGN.md192 lines · version alpha

---
version: alpha
name: "Netflix"
description: "Unlimited movies, TV shows, and more"
colors:
  primary: "#e50914"
  secondary: "#b20710"
  surface: "#000000"
  on-surface: "#ffffff"
  faq-grey: "#2D2D2D"
  poster-well: "#232323"
  white-70: "#B3B3B3"
  red-hover: "#C11119"
  night-navy: "#192247"
  plum: "#210E17"
  promo-violet: "#261733"
  promo-navy: "#151A3F"
typography:
  headline-display:
    fontFamily: "Geist"
    fontSize: 100px
    fontWeight: 700
    lineHeight: 1
  body-md:
    fontFamily: "Geist"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
  hero-headline:
    fontFamily: "Geist"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.56px
  hero-subline:
    fontFamily: "Geist"
    fontSize: 20px
    fontWeight: 560
    lineHeight: 1.25
  form-prompt:
    fontFamily: "Geist"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  section-headline:
    fontFamily: "Geist"
    fontSize: 24px
    fontWeight: 560
    lineHeight: 1.25
  promo-title:
    fontFamily: "Geist"
    fontSize: 20px
    fontWeight: 560
    lineHeight: 1.25
  card-title:
    fontFamily: "Geist"
    fontSize: 24px
    fontWeight: 560
    lineHeight: 1.25
  faq-question:
    fontFamily: "Geist"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
  faq-answer:
    fontFamily: "Geist"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
  button-large:
    fontFamily: "Geist"
    fontSize: 24px
    fontWeight: 560
    lineHeight: 1
  button-small:
    fontFamily: "Geist"
    fontSize: 14px
    fontWeight: 560
    lineHeight: 1
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
spacing:
  margin: 148px
  margin-phone: 24px
  gutter: 32px
  gutter-phone: 8px
  section: 64px
  section-phone: 48px
  card-gap: 16px
  container-max: 1144px
  columns: 4
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    height: 56px
  button-small:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    height: 32px
---
# Netflix design system

## Overview

Generated on 2026-11-03 from the Netflix brand study (unfairly.ai/brand-guidelines/netflix/, checked 2026-10-29). An independent study of what Netflix publishes and ships, not official Netflix guidelines. Lines marked GAP were not found in the study.

A black page where the content is the brand: a tilted wall of title art, Netflix Red only on the wordmark and the buttons, Netflix Sans at three quiet weights, and one glowing red arc. Plain second-person copy that sells one membership. Netflix lets the catalogue be the decoration. The system is almost nothing (black, one red, one typeface, one curve) so that thousands of titles, each with its own art, can sit in it and still read as Netflix.

- Logo: Lead with the N Symbol where Netflix is well known; use the Wordmark where it is not
- Headline on the site: "Unlimited movies, TV shows, and more"
- Category: Subscription streaming entertainment: series, films and games
- Audience: Anyone with an internet-connected screen; kids through profiles
- Promise: Watch anywhere, anytime, and cancel when you like
- Voice: plain, confident, inviting, brief.
- Section headings are two to four plain words in Title Case on netflix.com (Trending Now, More Reasons to Join); everything else is sentence case
- Lead with what you get, then the price and the out: "Starts at $8.99. Cancel anytime." pattern
- Never write the word Netflix in the style of the logo, and never use the logo inside a sentence (published)

## Colors

- Primary: #e50914 (from the Netflix brand study)
- Secondary: #b20710 (from the Netflix brand study)
- Surface: #000000 (from the Netflix brand study)
- On surface: #ffffff (from the Netflix brand study)
- Netflix Red (#E50914): The Wordmark, the N Symbol and primary buttons (Sign In, Get Started). RGB 229 9 20, CMYK 0 96 93 2, PMS 1795 C (published).
- Symbol Dark Red (#B20710): The folded leg of the N Symbol only. RGB 178 7 16, CMYK 18 100 100 10, PMS 7627 C (published).
- Black (#000000): The page ground under every band of netflix.com (observed).
- White (#FFFFFF): All headline and body type (observed).
- FAQ grey (#2D2D2D): FAQ rows and panels (observed).
- Poster well (#232323): Behind poster cards; phone carousel arrows (observed).
- Netflix Red is the brand's signature colour: logo and primary actions
- Symbol Dark Red only inside the N Symbol
- Grounds are black; secondary text is white at 70%, legal at 50%
- Cards and promos use the deep gradients (149deg #192247 to #210E17; 91deg #261733 to #151A3F)

## Typography

- Display: Geist (from the Netflix brand study)
- Body: Geist (from the Netflix brand study)
- Netflix Sans, Headlines (Bold 700) and section heads (Medium 500). Proprietary (Netflix, made with Dalton Maag, 2018); not licensed for third parties
- Netflix Sans, Body, FAQ, buttons, footer (Regular 400, Medium 500). Proprietary (Netflix, made with Dalton Maag, 2018); not licensed for third parties
- headline-display: Rank numeral, Geist 100px/1 at 700
- body-md: Card body, Geist 16px/1.25 at 400
- hero-headline: Hero headline, Geist 56px/1.25 at 700
- hero-subline: Hero subline, Geist 20px/1.25 at 560
- form-prompt: Form prompt, Geist 16px/1.5 at 400
- section-headline: Section headline, Geist 24px/1.25 at 560
- promo-title: Promo title, Geist 20px/1.25 at 560
- card-title: Card title, Geist 24px/1.25 at 560
- faq-question: FAQ question, Geist 24px/1.25 at 400
- faq-answer: FAQ answer, Geist 24px/1.25 at 400
- button-large: Button large, Geist 24px/1 at 560
- button-small: Button small, Geist 14px/1 at 560
- Font smoothing: leave it at the browser default (-webkit-font-smoothing: auto). netflix.com does not set antialiased; antialiased renders every weight visibly thinner than the reference
- Stand-in calibration: Geist 400 = Netflix Sans Regular; Geist 560 = Netflix Sans Medium (Geist 500 is too light: 89-91% of the ink); Geist 700 with -0.01em tracking = Netflix Sans Bold. Load Geist as a variable font (wght 100..900)
- Bold only for the hero headline (56px desktop, 32px phones)

## Layout

- margin 148px, margin-phone 24px, gutter 32px, gutter-phone 8px, section 64px, section-phone 48px, card-gap 16px, container-max 1144px, columns 4
- Black page, one 1144px container
- Each band: left-aligned 24px heading, 24px gap, content
- Rounded corners scale with size: 4px controls, 8px posters, 16px cards and banner, 0 on FAQ rows

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- rounded

## Components

- button-primary: #E50914 fill, #FFFFFF text, corners {rounded.md}, 56px tall.
- button-small: #E50914 fill, #FFFFFF text, corners {rounded.md}, 32px tall.

## Do's and Don'ts

- Don't change the gradient, stretch, add effects, rotate or recolour either mark
- Don't place a logo over busy backgrounds or inside a shape or container
- Don't set the wordmark lettering as a font or imitate it in headlines
- Don't use all caps for headings
- Do check: Logo hidden. Cover the wordmark. It should still read as Netflix: black page, a wall of posters, one red button, a thin red arc.
- Do check: Red count. Count the red things. More than the logo, the buttons and the arc means red has turned into decoration; take it back out.
- Do check: Logo rules. Symbol and Wordmark never together, N never on red, clear space at least one N leg or one T width.

DESIGN.md154 lines · version alpha

---
version: alpha
name: "NHS"
description: "The national health service for England, recognised instantly by its blue and white identity and trusted as an official source of care and information."
colors:
  primary: "#005eb8"
  secondary: "#007f3b"
  surface: "#f0f4f5"
  on-surface: "#212b32"
  white: "#FFFFFF"
  grey-1: "#4C6272"
  nhs-dark-blue: "#003087"
  yellow-focus: "#FFEB3B"
  grey-4: "#D8DDE0"
typography:
  headline-display:
    fontFamily: "Istok Web"
    fontSize: 43.2px
    fontWeight: 700
    lineHeight: 1.125
  body-md:
    fontFamily: "Istok Web"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.474
    letterSpacing: 0.29px
  hero-caption:
    fontFamily: "Istok Web"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.125
  heading-l:
    fontFamily: "Istok Web"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.167
  heading-m:
    fontFamily: "Istok Web"
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.231
  action-link:
    fontFamily: "Istok Web"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.636
  body-s:
    fontFamily: "Istok Web"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.24px
rounded:
  none: 0px
  sm: 4px
spacing:
  margin: 240px
  margin-phone: 16px
  gutter: 32px
  gutter-phone: 16px
  section: 64px
  section-phone: 48px
  card-gap: 32px
  container-max: 960px
components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.white}"
    rounded: "{rounded.sm}"
---
# NHS design system

## Overview

Generated on 2026-11-03 from the NHS brand study (unfairly.ai/brand-guidelines/nhs/, checked 2026-10-31). An independent study of what NHS publishes and ships, not official NHS guidelines.

NHS Blue and white, one lozenge, one typeface (Frutiger) and plain English. The identity is a public trust mark governed by law and policy: restraint is the style. Recognition is the brand. The NHS doesn't try to be distinctive in each piece; it tries to be the same everywhere, so blue, white and a plain Frutiger sentence instantly say "this is the NHS, you can rely on it".

- Logo: The NHS logo ("the lozenge"): the white letters NHS in a solid NHS Blue rectangle. Use original artwork only; never recreate it (from the NHS brand study). Link your approved master files.
- Headline on the site: "NHS website for England"
- Category: Public national health service (England)
- Audience: Patients and the public in England, plus NHS staff and organisations who apply the identity
- Promise: If it carries the NHS Identity, you can rely on it.
- Voice: Clear, Reassuring, Personal, Factual, Empowering.
- Short paragraphs of up to 3 sentences; use subheadings and bulleted lists
- Active voice: "find a pharmacy", not "a pharmacy can be found"
- Factual, neutral, unambiguous; no metaphors; say what you mean
- Use "good", "bad" or "easy" with care; give the evidence or the number instead

## Colors

- Primary: #005eb8 (from the NHS brand study)
- Secondary: #007f3b (from the NHS brand study)
- Surface: #f0f4f5 (from the NHS brand study)
- On surface: #212b32 (from the NHS brand study)
- NHS Blue (#005EB8): Dominant brand colour; header, hero panel, links; the only ground the logo reverses out of
- White (#FFFFFF): Dominant with blue; cards and alternating bands
- Grey 5 (#F0F4F5): Page ground online
- Black (digital) (#212B32): All text online
- Grey 1 (#4C6272): Secondary text
- Green (digital) (#007F3B): Buttons, action-link arrows
- NHS Blue and white always dominant
- Supporting colours in decreasing emphasis: blues, neutrals, greens, highlights
- Highlights minimal; never large blocks
- Tints allowed if clear and accessible; type and logos always 100% solid

## Typography

- Display: Istok Web (from the NHS brand study)
- Body: Istok Web (from the NHS brand study)
- Frutiger 65 Bold (web: Frutiger W01 600), Titles and headings. Proprietary (Monotype). NHS England sub-licenses three weights to NHS organisations in England only
- Frutiger 55 Roman (web: Frutiger W01 400), Body copy and lists. Proprietary (Monotype); NHS England sub-licence
- None (system monospace for code), Code samples only. n/a
- headline-display: Hero headline, Istok Web 43.2px/1.125 at 700
- body-md: Body, Istok Web 19px/1.474 at 400
- hero-caption: Hero caption, Istok Web 32px/1.125 at 700
- heading-l: Section H2, Istok Web 36px/1.167 at 700
- heading-m: Card heading (link), Istok Web 26px/1.231 at 700
- action-link: Action link, Istok Web 22px/1.636 at 700
- body-s: Nav / footer / small, Istok Web 16px/1.5 at 400
- Frutiger only (Arial as fallback); no other faces
- Bold for titles, Roman for body
- Body 19px on large screens, 16px on small

## Layout

- margin 240px, margin-phone 16px, gutter 32px, gutter-phone 16px, section 64px, section-phone 48px, card-gap 32px, container-max 960px
- Design mobile first
- Max page width 960px
- Grid columns: full, three-quarters, two-thirds, one-half, one-third, one-quarter

## Elevation & Depth

- 4px border width; 4px yellow focus ring; 1px hero border

## Shapes

- 4px radius on buttons and search; cards are square-cornered
- rounded

## Components

- button-primary: #007F3B fill, #FFFFFF text, corners {rounded.sm}.

## Do's and Don'ts

- Don't place it on support or highlight colours, black or dark grey
- Don't put an outline around it
- Don't use black or dark grey as backgrounds
- Don't reverse the logo out of anything but NHS Blue
- Don't use decorative or child-friendly fonts
- Don't use italics online
- Do check: Logo hidden. Cover the logo. It should still read as NHS: blue and white dominant, Frutiger-like sans, plain sentence-case words.
- Do check: Plain English. Read it aloud to one person. Sentences under 20 words, no "should", no jargon.

DESIGN.md208 lines · version alpha

---
version: alpha
name: "Pinterest"
description: "The visual search and shopping platform where people discover ideas and turn inspiration into action."
colors:
  primary: "#e60023"
  secondary: "#e5e5e0"
  surface: "#ffffff"
  on-surface: "#000000"
  ink: "#211922"
  muted: "#62625B"
  wash: "#F6F6F3"
  cosmicore-900: "#111111"
  skycicle-500: "#0074E8"
  roboflow-500: "#767676"
  roboflow-200: "#E9E9E9"
  flaminglow-450: "#EE376A"
typography:
  headline-display:
    fontFamily: "Figtree"
    fontSize: 70px
    fontWeight: 600
    lineHeight: 1.2
  body-md:
    fontFamily: "Figtree"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
  display-l:
    fontFamily: "Figtree"
    fontSize: 48px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -2px
  heading-xl:
    fontFamily: "Figtree"
    fontSize: 50px
    fontWeight: 700
    lineHeight: 1.2
  heading-l:
    fontFamily: "Figtree"
    fontSize: 38px
    fontWeight: 700
    lineHeight: 1.18
  heading-m:
    fontFamily: "Figtree"
    fontSize: 36px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -1.5px
  title-l:
    fontFamily: "Figtree"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.06
  title-m:
    fontFamily: "Figtree"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.5px
  body-l:
    fontFamily: "Figtree"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px
  body-strong:
    fontFamily: "Figtree"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.4
  label:
    fontFamily: "Figtree"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.15px
  caption:
    fontFamily: "Figtree"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 12px
  md: 16px
  lg: 20px
  xl: 32px
  2xl: 40px
  full: 9999px
spacing:
  margin: 150px
  margin-phone: 8px
  gutter: 16px
  gutter-phone: 16px
  section: 100px
  section-phone: 100px
  card-gap: 16px
  container-max: 1140px
  columns: 2
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    height: 48px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    height: 48px
  button-google:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    height: 48px
---
# Pinterest design system

## Overview

Generated on 2026-11-03 from the Pinterest brand study (unfairly.ai/brand-guidelines/pinterest/, checked 2026-10-31). An independent study of what Pinterest publishes and ships, not official Pinterest guidelines.

One red, a white page and a wall of real photos in rounded tiles. Pinterest keeps the frame quiet (black and warm-gray type, 16px-radius buttons, a heavy friendly grotesk) so Pinners' pictures carry all the color, and talks in short, warm, slightly playful lines. The content is the brand. Pinterest designs a neutral frame of white, black and warm gray with a single red action, and lets a grid of rounded photo tiles do the expressing.

- Logo: Badge: a script white "P" in a red circle (primary). The homepage also uses the red wordmark with the P mark (nav) and a white script wordmark (footer) (from the Pinterest brand study). Link your approved master files.
- Headline on the site: "Create the life you love"
- Category: Visual search and shopping platform (newsroom); visual discovery for ideas, plans and shopping
- Audience: People looking for ideas for their home, style, food, beauty and plans; and, on the business side, advertisers who want to reach them while they plan and shop.
- Promise: Find ideas that fit your taste, save them, and bring them to life.
- Voice: Simple, Conversational, Clever.
- Primary partner call to action is "Follow on Pinterest"; approved alternates: Follow us, Popular, Find us, Visit us on Pinterest; Find more ideas / Get inspired on Pinterest
- Say "Popular on Pinterest" only when Pinterest Analytics shows high impressions, clicks or saves, and put your Pinterest URL after it
- Whenever you reference Pinterest, also reference your Pinterest account
- Never use "Pin", "Pinterest" or a variation in a product name or domain

## Colors

- Primary: #e60023 (from the Pinterest brand study)
- Secondary: #e5e5e0 (from the Pinterest brand study)
- Surface: #ffffff (from the Pinterest brand study)
- On surface: #000000 (from the Pinterest brand study)
- Pushpin 450 (#E60023): Hero product color and the logo. Primary buttons. The only red.
- Mochimalist 0 (#FFFFFF): Page ground; text on 500+ colors.
- Black (#000000): Homepage headlines and body (observed). Gestalt publishes Cosmicore 900 #111111 for product text.
- Ink (#211922): Warm near-black on section and feature headings (observed).
- Muted (#62625B): Counts, placeholders, helper and legal text (observed).
- Secondary (#E5E5E0): Secondary buttons and the search field (observed).
- Pushpin 450 #E60023 is the hero color; other 450s only when absolutely necessary
- Text on colors 400 and below: dark gray; on 500 and above: white
- Meet WCAG 2.1 AA contrast
- Brand color fills only for brand moments (onboarding, celebrations, announcements), never on core UI, text components or form controls

## Typography

- Display: Figtree (from the Pinterest brand study)
- Body: Figtree (from the Pinterest brand study)
- Pin Sans (Pinterest Sans), Brand and marketing type; on pinterest.com loaded in 400, 500, 700 and 800. Proprietary, Pinterest's own; not licensed for others
- Pin Sans, All homepage text. Proprietary
- headline-display: Signup headline, Figtree 70px/1.2 at 600
- body-md: Body / footer link, Figtree 16px/1.4 at 400
- display-l: Hero H1 / seasonal H2, Figtree 48px/1.1 at 800
- heading-xl: Section H2 (Bring...), Figtree 50px/1.2 at 700
- heading-l: Feature H3, Figtree 38px/1.18 at 700
- heading-m: Carousel heading, Figtree 36px/1.1 at 800
- title-l: Banner card title, Figtree 32px/1.06 at 700
- title-m: Signup card title, Figtree 28px/1.1 at 700
- body-l: Lead, Figtree 20px/1.4 at 400
- body-strong: Board title / footer heading, Figtree 16px/1.4 at 700
- label: Nav link / button label, Figtree 16px/1.2 at 500
- caption: Meta / legal, Figtree 12px/1.5 at 400
- Product UI: system fonts; Pinterest Sans never for UI
- Few sizes: 12, 14, 16, 20, 28, 36 (Gestalt scale)
- Headings semibold in product; body regular

## Layout

- margin 150px, margin-phone 8px, gutter 16px, gutter-phone 16px, section 100px, section-phone 100px, card-gap 16px, container-max 1140px, columns 2
- 16px margins for text content, 8px for image content
- 32px between content blocks; 24px between Pin reps with metadata, 8px without
- Phone banners and toasts: full width minus 8px margins

## Elevation & Depth

- none: no hairlines or dividers on the homepage; separation is by ground and space

## Shapes

- 16px on buttons and carousel tiles; 32px on the big media (seasonal banner, feature panels); 20px on the signup card; 40px on the floating board card; 12px on inputs and the search field
- rounded

## Components

- button-primary: #E60023 fill, #FFFFFF text, corners {rounded.md}, 48px tall. Log in (76x48), Join Pinterest for free (192x48), Join Pinterest (134x48), Continue (402x48)
- button-secondary: #E5E5E0 fill, #000000 text, corners {rounded.md}, 48px tall. Sign up (88x48), I already have an account (219x48), See more (103x48, label #211922)
- button-google: #FFFFFF fill, #000000 text, corners {rounded.md}, 48px tall. Continue with Google (402x48), 20px G icon left

## Do's and Don'ts

- Don't outline the logo
- Don't add filters or effects
- Don't recolor components or text with alternative colors
- Don't put text over photography
- Don't set body or controls below 14px except brief secondary text
- Don't skip heading levels
- Do check: Logo hidden. Cover the logo. A page of rounded photo tiles, one red 16px-radius button and short heavy sentence-case headlines should still read as Pinterest.
- Do check: Photo first. If type or color is louder than the pictures, cut it back.
- Do check: Verb check. Search the copy for "pin" used as a verb and for "trending" claims.

DESIGN.md203 lines · version alpha

---
version: alpha
name: "PostHog"
description: "PostHog is the context layer for your product: it ingests and stores your analytics, errors, replays and business data so you and your agents can query it and make changes (paraphrase of the frame)."
colors:
  primary: "#f54e00"
  secondary: "#1d4aff"
  surface: "#eeefe9"
  on-surface: "#151515"
  accent: "#E5E7E0"
  text-secondary: "#65675E"
  yellow: "#DC9300"
  dashed-divider: "#D0D1C9"
typography:
  headline-display:
    fontFamily: "Figtree"
  body-md:
    fontFamily: "Figtree"
  display-l:
    fontFamily: "RoundHog"
    fontSize: 36px
    fontWeight: 800
    lineHeight: 40px
    letterSpacing: -0.9px
  h2:
    fontFamily: "RoundHog"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 40px
    letterSpacing: -0.75px
  h2-panel:
    fontFamily: "RoundHog"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 32px
    letterSpacing: -0.6px
  lead:
    fontFamily: "RoundHog"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 25.5px
  body:
    fontFamily: "RoundHog"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 27px
  body-muted:
    fontFamily: "RoundHog"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 27px
  title-s:
    fontFamily: "RoundHog"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 28px
  ui-14:
    fontFamily: "RoundHog"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
  toast-title:
    fontFamily: "RoundHog"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 18.75px
  toast-body:
    fontFamily: "RoundHog"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  os-13:
    fontFamily: "RoundHog"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 13px
  button:
    fontFamily: "RoundHog"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 26.67px
rounded:
  sm: 4px
  md: 5.65px
  lg: 6px
  xl: 8px
  2xl: 20px
spacing:
  margin: 8px
  margin-phone: 0px
  gutter: 32px
  gutter-phone: 16px
  container-max: 979px
  columns: 2
components:
  button-3d-primary:
    backgroundColor: "#EB9D2A"
    textColor: "#000000"
    rounded: "{rounded.xl}"
    height: 47px
  button-3d-secondary:
    backgroundColor: "#FFFFFF"
    textColor: "#111111"
    rounded: "{rounded.xl}"
    height: 47px
  button-3d-small:
    backgroundColor: "#EB9D2A"
    textColor: "#000000"
    rounded: "{rounded.lg}"
    height: 32px
---
# PostHog design system

## Overview

Generated on 2026-11-03 from the PostHog brand study (unfairly.ai/brand-guidelines/posthog/, checked 2026-10-30). An independent study of what PostHog publishes and ships, not official PostHog guidelines.

A warm off-white page, near-black text and Red links; a rounded house sans (RoundHog) with Squeak caps for loud moments; hand-drawn hedgehogs that carry all the color; a website built like an operating system with chunky press-down buttons; and a voice that's direct, honest and slightly weird. Handmade on purpose. PostHog spends its color, humor and craft on things AI and stock can't fake (hand-drawn hogs, custom faces, a desktop-OS website, odd synthetic data) and keeps the layout plain and solid so the craft reads as taste, not polish.

- Logo: Standard logo: the gradient logomark (three slanted bars in blue, orange and yellow, plus the black hedgehog-face shape) beside the rounded PostHog wordmark, landscape (from the PostHog brand study). Link your approved master files.
- Headline on the site: "Make your product self-driving"
- Category: Your product's context layer; a platform that makes your product self-driving
- Audience: AI-pilled software teams: mostly engineers and technical founders, plus people who want to do technical work without code (paraphrase).
- Promise: Make your product self-driving: ship, measure and iterate from your product's own context (paraphrase).
- Voice: Opinionated, Human, Direct, Honest, Slightly weird.
- Docs use second person (you)
- No emojis: they read as try-hard. Use plain English
- Active voice: 'PostHog tracks your events', not 'Events are tracked by PostHog'
- Use the Oxford comma

## Colors

- Primary: #f54e00 (from the PostHog brand study)
- Secondary: #1d4aff (from the PostHog brand study)
- Surface: #eeefe9 (from the PostHog brand study)
- On surface: #151515 (from the PostHog brand study)
- Background (#EEEFE9): Published light-mode background; PostHog primarily uses light mode.
- Text (#151515): Published text color, at 90% opacity for paragraphs.
- Accent (#E5E7E0): Published light-mode accent fill.
- Text secondary (#65675E): Our reading: the site's -text-secondary (code). The guide prefers opacity and publishes no muted color.
- Red (#F54E00): Brand red, same in both modes; links. Never a warning or error color.
- Blue (#1D4AFF): Brand blue, same in both modes.
- Light mode first; swap only a couple of hues for dark mode
- Backgrounds solid, not gradients
- Illustrations more saturated than the layout around them
- Modify with opacity: paragraphs 90%, links 95% semibold, hover 100%

## Typography

- Display: Figtree (from the PostHog brand study)
- Body: Figtree (from the PostHog brand study)
- RoundHog, Titles Bold (800), links and paragraphs under large headers SemiBold (700), body Regular (400); Medium 500 exists. Proprietary: PostHog's own face. The woff2 files are public at brand.posthog.com and in @postho
- RoundHog, Regular and Regular Italic for body. Proprietary (PolyForm Strict 1.0.0)
- Source Code Pro, Code on posthog.com (observed in tailwind.config.js); the guide names no mono face. Open (SIL OFL 1.1)
- display-l: Hero H1, RoundHog 36px/40px at 800
- h2: Section H2, RoundHog 30px/40px at 700
- h2-panel: Panel H2 (Ask PostHog anything), RoundHog 24px/32px at 700
- lead: Lead / hero paragraph, RoundHog 17px/25.5px at 500
- body: Body / prose, RoundHog 18px/27px at 500
- body-muted: Secondary body (join line, panel paragraph), RoundHog 18px/27px at 500
- title-s: Card title, RoundHog 18px/28px at 700
- ui-14: Small UI text (checks, tabs, ticker, card bullets), RoundHog 14px/20px at 500
- toast-title: Cookie title, RoundHog 15px/18.75px at 600
- toast-body: Cookie body, RoundHog 14px/20px at 400
- os-13: Menu bar + desktop icon labels, RoundHog 13px/13px at 500
- button: Button label (large / small), RoundHog 15px/26.67px at 700
- RoundHog for all text on posthog.com and most contexts
- Sentence case headings; left-align body; center only short marketing lines
- Squeak: always uppercase, Bold, tracking -2%, line height 100%, only with hog art or informal contexts

## Layout

- margin 8px, margin-phone 0px, gutter 32px, gutter-phone 16px, container-max 979px, columns 2
- Content first; art accentuates
- Typography hierarchy deliberate and readable at every viewport
- Short paragraphs, subheads, illustrations and white space break up text

## Elevation & Depth

- Shadow Smooth drop shadows on web cards and contained elements; hard drop shadows on graphic elements for merch, stickers and thumbnails

## Shapes

- Rounded, not sharp: the 2021 logo update rounded the edges and the font. No corner radius published
- rounded

## Components

- button-3d-primary: #EB9D2A fill, #000000 text, corners {rounded.xl}, 47px tall. Get started (hero card, 203x47); Get started (Shameless CTA, 260x53, 24px/32px)
- button-3d-secondary: #FFFFFF fill, #111111 text, corners {rounded.xl}, 47px tall. Install with AI (203x47)
- button-3d-small: #EB9D2A fill, #000000 text, corners {rounded.lg}, 32px tall. Get started – free (menu bar, 125x32); Get started - free (panel, 124x35); Open Customers (white face, 124x35)

## Do's and Don'ts

- Don't recolor the logomark (no white hedgehog face on dark)
- Don't stretch, skew, rotate or add effects
- Don't use Red #F54E00 for warnings or errors (use separate status colors in product UI)
- Don't use rainbow palettes or many accents at once
- Don't use Squeak for body, subtitles or descriptions
- Don't use Squeak in product UI
- Do check: Logo hidden. Remove the logo. Does it still feel like PostHog? (the guide's own test): RoundHog, warm off-white, a hog, a press-down button, honest copy.
- Do check: Hacker News test. How would this be received on Hacker News? If it would get roasted as spin, vague or try-hard, change it.
- Do check: Swap test. Put another SaaS logo on it. If it still fits, it's generic: blobs, stock art and template layouts go back.

DESIGN.md214 lines · version alpha

---
version: alpha
name: "Python"
description: "A programming language that lets you work quickly and integrate systems more effectively."
colors:
  primary: "#3776ab"
  secondary: "#ffd343"
  surface: "#f9f9f9"
  on-surface: "#444444"
  blue-medium: "#2B5B84"
  blue-dark: "#1E415E"
  darker-blue: "#1E2933"
  grey: "#666666"
  grey-lighter: "#CACCCE"
  grey-lightest: "#E6E8EA"
  network-psf-pypi-jobs-community: "#82B043"
  logo-blue-yellow: "#306998"
typography:
  headline-display:
    fontFamily: "Abel"
    fontSize: 24.15px
    fontWeight: 400
    lineHeight: 1.25
  body-md:
    fontFamily: "Source Sans 3"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.625
  lead:
    fontFamily: "Source Sans 3"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.4
  slide-heading:
    fontFamily: "Source Sans 3"
    fontSize: 21px
    fontWeight: 700
    lineHeight: 1
  nav:
    fontFamily: "Source Sans 3"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.625
    letterSpacing: 0.18px
  footer-base:
    fontFamily: "Abel"
    fontSize: 18.11px
    fontWeight: 400
    lineHeight: 1.625
  sitemap-heading:
    fontFamily: "Abel"
    fontSize: 17.5px
    fontWeight: 400
    lineHeight: 1.625
  quote:
    fontFamily: "Source Sans 3"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.75
  widget:
    fontFamily: "Source Sans 3"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.625
  small:
    fontFamily: "Source Sans 3"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.625
  tag:
    fontFamily: "Source Sans 3"
    fontSize: 13.13px
    fontWeight: 400
    lineHeight: 1.625
  legal:
    fontFamily: "Source Sans 3"
    fontSize: 11.9px
    fontWeight: 400
    lineHeight: 1.625
rounded:
  none: 0px
  sm: 6px
  md: 16px
spacing:
  margin: 144px
  margin-phone: 4px
  gutter: 24px
  gutter-phone: 0px
  section: 40px
  section-phone: 4px
  card-gap: 24px
  container-max: 1200px
  columns: 4
components:
  button-yellow:
    backgroundColor: "{colors.secondary}"
    textColor: "#4D4D4D"
    rounded: "{rounded.sm}"
  button-blue:
    backgroundColor: "{colors.blue-medium}"
    textColor: "{colors.grey-lightest}"
    rounded: "{rounded.sm}"
  button-grey:
    backgroundColor: "#CCCCCC"
    textColor: "#4D4D4D"
    rounded: "{rounded.sm}"
  button-launch-shell:
    backgroundColor: "{colors.secondary}"
    textColor: "#4D4D4D"
    rounded: "{rounded.sm}"
  tag-chip:
    backgroundColor: "{colors.grey-lightest}"
    textColor: "{colors.grey}"
    rounded: "{rounded.none}"
  notice-bar:
    backgroundColor: "#FFDF76"
    textColor: "#664E04"
    rounded: "{rounded.md}"
---
# Python design system

## Overview

Generated on 2026-11-03 from the Python brand study (unfairly.ai/brand-guidelines/python/, checked 2026-10-31). An independent study of what Python publishes and ships, not official Python guidelines.

Two interlocked snakes in blue and yellow, a blue frame with yellow actions, Source Sans Pro text with narrow Flux labels, and interpreter prompts (" ") as the brand's arrows. The rules that are published are about protecting one shape; the rest is the python.org system, open-sourced. Python's brand is the interpreter. The site leads with runnable code, marks every link with " ", and lets the logo's two colours do the rest, so the brand feels like using Python rather than being sold it.

- Logo: Combined logo: the two-snakes device beside the "python" wordmark (Flux Regular) with TM (from the Python brand study). Link your approved master files.
- Headline on the site: "lets you work quickly and integrate systems more effectively"
- Category: General-purpose, interpreted, high-level open source programming language
- Audience: Newcomers to programming and experienced developers alike, plus the community that builds and funds Python (Get Started widget; PSF band).
- Promise: Work quickly and integrate systems effectively, with a language that is easy to learn and to read.
- Voice: Plain, Welcoming, Confident, Precise.
- In documentation, sentence case section titles are preferred; consistency within a unit matters more
- Use simple language; avoid esoteric phrasing for a world-wide audience
- Spell out an acronym at first use, full term first with the acronym in parentheses; HTML and UTF-8 need no expansion
- Hyphenate open-source as an adjective (open-source software); no hyphen as a noun (open source is a collaboration model)

## Colors

- Primary: #3776ab (from the Python brand study)
- Secondary: #ffd343 (from the Python brand study)
- Surface: #f9f9f9 (from the Python brand study)
- On surface: #444444 (from the Python brand study)
- Python blue (#3776AB): Links, icons, sitemap headings, nav gradient start, the Python tab rule. Published as -color-blue ("Python blue" in the Sass).
- Python yellow (#FFD343): Every action and highlight on blue: Donate, PSF buttons, slide headings, read-more links. Published as -color-yellow ("Python yellow").
- Blue medium (#2B5B84): Header, PSF band and footer base, always as a gradient from #1E415E. Published -color-blue-medium.
- Blue dark (#1E415E): Top of the blue gradients. Published -color-blue-dark.
- Darker blue (#1E2933): Network bar, options bar, code panel; link hover. Sass $darkerblue.
- Default text (#444444): Body and widget titles. Published -color-default.
- Blue grounds are always the #1E415E to #2B5B84 vertical gradient (10% to 90%)
- Yellow #FFD343 marks actions, headings and links on blue only
- Light pages: #444444 text on #F9F9F9 with #3776AB links
- Network colours appear only as 3px tab rules

## Typography

- Display: Abel (from the Python brand study)
- Body: Source Sans 3 (from the Python brand study)
- Flux (Flux Regular / Flux Bold), The logo wordmark; on python.org widget and band titles, marks, footer headings and links. Commercial; the PSF owns a copy but cannot distribute it except for PSF work
- Source Sans Pro, All text: Regular, Bold and Italic as separate families. Open (SIL OFL 1.1), Adobe; webfont files ship in the open-source site repo with the OFL text
- Consolas (system stack), Hero code sample only. System fonts (Consolas is Microsoft's; the stack ends in Courier New and generic monospace)
- headline-display: Widget / band title (Flux-Regular), Abel 24.15px/1.25 at 400
- body-md: Body, Source Sans 3 16px/1.625 at 400
- lead: Intro line, Source Sans 3 24px/1.4 at 400
- slide-heading: Slide heading, Source Sans 3 21px/1 at 700
- nav: Main nav item, Source Sans 3 18px/1.625 at 400
- footer-base: Footer base link (Flux-Bold), Abel 18.11px/1.625 at 400
- sitemap-heading: Sitemap heading (Flux-Bold), Abel 17.5px/1.625 at 400
- quote: Quote, Source Sans 3 18px/1.75 at 400
- widget: Widget text, Source Sans 3 15px/1.625 at 400
- small: Sitemap link / attribution, Source Sans 3 14px/1.625 at 400
- tag: Tag, Source Sans 3 13.13px/1.625 at 400
- legal: Copyright, Source Sans 3 11.9px/1.625 at 400
- Source Sans Pro for all text; bold and italic are separate files
- Flux, or the Abel stand-in at 97% size, for labels of a few words only
- Code in the monospace stack

## Layout

- margin 144px, margin-phone 4px, gutter 24px, gutter-phone 0px, section 40px, section-phone 4px, card-gap 24px, container-max 1200px, columns 4
- 1200px container, content 1152px
- Widgets 4-up or 2-up with ~24px gaps, 20px padding, 4px top rule
- Blue header, light content, grey sitemap, blue base

## Elevation & Depth

- Hairlines 1px #CACCCE between list rows; 4px #75A8D3 rule on top of every widget; bevel borders (light top, dark bottom) on nav bars and tabs

## Shapes

- 6px on buttons, quotes, options bar; 8px on the main-nav bar; 16px on the notice bar; 0 on widgets and bands
- rounded

## Components

- button-yellow: #FFD343 fill, #4D4D4D text, corners {rounded.sm}. Donate (75x32, header); Become a Member / Donate to the PSF (15px, 38px tall, PSF band)
- button-blue: #2B5B84 fill, #E6E8EA text, corners {rounded.sm}. GO (46x40), slide numbers (34x30, opacity 0.7 until active)
- button-grey: #CCCCCC fill, #4D4D4D text, corners {rounded.sm}. See more (89x40) in the notice bar
- button-launch-shell: #FFD343 fill, #4D4D4D text, corners {rounded.sm}. " _" 45x45, Flux-Regular, tracking -1.2px, top-right of the code panel
- tag-chip: #E6E8EA fill, #666666 text, corners {rounded.none}.
- notice-bar: #FFDF76 fill, #664E04 text, corners {rounded.md}.

## Do's and Don'ts

- Don't mirror the logo horizontally or vertically
- Don't move the snakes apart or remove one
- Don't set body text in yellow on light grounds
- Don't fill large areas with the tab colours
- Don't set paragraphs in Flux or its stand-in
- Don't synthesise bold from Regular
- Do check: Logo hidden. Cover the snakes. It should still read as python.org: blue gradient frame, yellow actions, " " read-more links, a code panel, Source Sans text.
- Do check: Monochrome test. Flatten any logo use to one colour: the outline, gaps, chins and eyes must match the original exactly (the FAQ's own test).
- Do check: Trademark check. TM on the logo, Python as an adjective, no implied endorsement, non-affiliation notice when needed.

DESIGN.md212 lines · version alpha

---
version: alpha
name: "Red Hat"
description: "Red Hat is the leading provider of enterprise open source software solutions."
colors:
  primary: "#ee0000"
  secondary: "#000000"
  surface: "#ffffff"
  on-surface: "#151515"
  gray-10: "#F2F2F2"
  gray-60: "#4D4D4D"
  gray-80: "#292929"
  red-10: "#FCE3E3"
  red-05: "#FEF0F0"
  red-30: "#F9A8A8"
  red-40: "#F56E6E"
  purple-80: "#1B0D33"
typography:
  headline-display:
    fontFamily: "Red Hat Display"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.1
  body-md:
    fontFamily: "Red Hat Text"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
  display-statement:
    fontFamily: "Red Hat Display"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.3
  heading-l:
    fontFamily: "Red Hat Display"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.3
  heading-m:
    fontFamily: "Red Hat Display"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
  heading-s:
    fontFamily: "Red Hat Display"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
  heading-xs:
    fontFamily: "Red Hat Display"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.3
  lead:
    fontFamily: "Red Hat Text"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
  body:
    fontFamily: "Red Hat Text"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  cta:
    fontFamily: "Red Hat Display"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
  small:
    fontFamily: "Red Hat Text"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  caption:
    fontFamily: "Red Hat Text"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 3px
  md: 6px
  lg: 16px
  xl: 64px
spacing:
  margin: 32px
  margin-phone: 16px
  gutter: 32px
  gutter-phone: 16px
  section: 96px
  section-phone: 64px
  card-gap: 32px
  container-max: 1440px
  columns: 12
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    height: 59px
  tag-outline-purple:
    backgroundColor: "{colors.on-surface}"
    textColor: "#B6A6E9"
    rounded: "{rounded.xl}"
  tag-filled-gray:
    backgroundColor: "#E0E0E0"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.xl}"
  card-dark:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  language-select:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
---
# Red Hat design system

## Overview

Generated on 2026-11-03 from the Red Hat brand study (unfairly.ai/brand-guidelines/redhat/, checked 2026-10-30). An independent study of what Red Hat publishes and ships, not official Red Hat guidelines.

Pure red, used as pops on open white, gray or black layouts; one open source type family set plainly in sentence case; a hat that is never redrawn; and, when the story needs it, hybrid collages of real people, 3D objects and hat-shaped base shapes. A voice that is experienced, compassionate and progressive: specific, honest and never hype. Open, with one red signal. Red Hat keeps everything around the red quiet (roomy layouts, plain sentence-case type, real people in soft light) so a single pop of pure red, and the hat, carries the brand.

- Logo: Logo A: the red fedora with black band (the hat) left of the bold "Red Hat" wordmark in Red Hat Display, horizontal. Black wordmark on light grounds, white on dark (from the Red Hat brand study). Link your approved master files.
- Headline on the site: "Keep your options open"
- Category: Open hybrid cloud technology leader; enterprise open source software
- Audience: IT professionals and the enterprises that run on them, from developers and operations teams to IT decision makers, plus partners and open source contributors (paraphrase).
- Promise: We unlock opportunities for innovation, everywhere.
- Voice: Experienced, Compassionate, Progressive.
- Never set text in all caps, not even small labels (acronyms excepted)
- Title case only for proper nouns such as product names or book titles
- No spaces before or after em or en dashes; hyphens join words, en dashes separate numbers, em dashes mark a break
- Write "and" when there is room; in tight UI labels or headlines use an ampersand, never a plus sign

## Colors

- Primary: #ee0000 (from the Red Hat brand study)
- Secondary: #000000 (from the Red Hat brand study)
- Surface: #ffffff (from the Red Hat brand study)
- On surface: #151515 (from the Red Hat brand study)
- Red Hat red (red-50) (#EE0000): The brand color, pure red. Pops only: the hat, red headlines and key words, CTA fills. In everything; never floods; never negative. Pantone 1788 C.
- White (#FFFFFF): Default ground; text on dark and red; white logo on red.
- Black (#000000): Text and wordmark on light grounds; core and expressive dark background. Pantone Black C.
- gray-95 (ux black) (#151515): Primary text on light in digital; dark interface and logo-tile background.
- gray-10 (#F2F2F2): Light alternate background (core light, interface light).
- gray-60 (#4D4D4D): Secondary text on light (RHDS); product tech-icon outline.
- Start every project from a collection: core light (white or gray-10 ground; black or red-50 text), core dark (black or gray-80; white or red-50 text), core red (red-10 or white; black or red-50 text), expressive light (gray-10, red-10 or white; black, purple-80 or red-50 text), e
- Include red-50 in everything, as pops, never as a flood
- Fill large areas with the lightest tints, darkest shades or subtle gradients; save saturated values for callouts and navigation
- Use one or two secondary families per piece; hybrid style allows at most two accent colors per layout

## Typography

- Display: Red Hat Display (from the Red Hat brand study)
- Body: Red Hat Text (from the Red Hat brand study)
- Red Hat Display, Headlines and the wordmark; the default face. Big, bold or both; sentence case; never tracked. Open (SIL OFL 1.1). Red Hat's own face, by Jeremy Mickel with Red Hat, 2019; free on Google Fonts and GitHub
- Red Hat Text, Paragraphs and small text: taller x-height contrast, more space between narrow letters. 1.5 line height on the web. Open (SIL OFL 1.1)
- Red Hat Mono, Real code snippets only, or stylized headlines on developer and technical designs. Open (SIL OFL 1.1)
- headline-display: Hero headline, Red Hat Display 64px/1.1 at 400
- body-md: Body large, Red Hat Text 18px/1.5 at 400
- display-statement: Statement H1, Red Hat Display 36px/1.3 at 500
- heading-l: Section H2 / featured card title, Red Hat Display 28px/1.3 at 500
- heading-m: Small section H2 / card title, Red Hat Display 24px/1.3 at 500
- heading-s: Stat / H4, Red Hat Display 20px/1.3 at 500
- heading-xs: Footer column heading, Red Hat Display 18px/1.3 at 500
- lead: Hero lead, Red Hat Text 20px/1.5 at 400
- body: Body / nav menu / eyebrow, Red Hat Text 16px/1.5 at 400
- cta: CTA and link label, Red Hat Display 16px/1.5 at 700
- small: Small: tags, utility nav, footer links, Red Hat Text 14px/1.5 at 400
- caption: Caption: source line, 'Available on', Red Hat Text 12px/1.5 at 400
- Display for headings, Text for body, Mono only for code or technical headlines (never Text for web headings or Display for web body)
- Sentence case everywhere, even headlines; never all caps
- Flush left by default; center only short headers or captions in narrow centered layouts; right only for narrow sidebars or RTL; never justify

## Layout

- margin 32px, margin-phone 16px, gutter 32px, gutter-phone 16px, section 96px, section-phone 64px, card-gap 32px, container-max 1440px, columns 12
- Grid: xs 576 2 cols, 16px margins/gutters; sm 576 max 544; md 768 max 704, 12 cols, 32px; lg 992 max 928; xl 1200 max 1136; 2xl 1440 max 1376
- Spacers (-rh-space): xs 4, sm 6 (form fields only), md 8, lg 16, xl 24, 2xl 32, 3xl 48, 4xl 64, 5xl 80, 6xl 96, 7xl 128
- Section top/bottom padding 64px by default; content blocks 80px (5xl), subsections 64px (4xl)

## Elevation & Depth

- Icons: one stroke weight, rounded corners and ends, front-on flattened geometry, angles of 0/45/90 degrees or those plus or minus 12 degrees (the font's ascender angle). Hybrid: thin gradient strokes weaving in front of and behind elements
- none
- Shadow Soft, subtle drop shadows matching the scene's single light source (upper left by default) under 3D objects and portraits; RHDS box shadows sm 0 2px 4px 0 rgba(21,21,21,.2), md 0 4px 6px 1px rgba(21,21,21,.25), lg 0 6px 8px 2px rgba(21,21,21,.3), xl 0 8px 24px 3px rgba(21,

## Shapes

- Sharp (0) or 3px on interface containers; hybrid base shapes have hat-inspired curves (rectangle and diamond: two opposite corners rounded 3x more than the other two)
- rounded

## Components

- button-primary: #EE0000 fill, #FFFFFF text, corners {rounded.xl}, 59px tall. Register for the virtual event (278x59), See all products (185x59)
- tag-outline-purple: #151515 fill, #B6A6E9 text, corners {rounded.xl}.
- tag-filled-gray: #E0E0E0 fill, #151515 text, corners {rounded.xl}.
- card-dark: #151515 fill, #FFFFFF text, corners {rounded.lg}.
- language-select: #151515 fill, #FFFFFF text, corners {rounded.sm}.

## Do's and Don'ts

- Don't change the band color or remove it from the full-color logo
- Don't add gradients or shadows
- Don't use colors outside the palette
- Don't flood everything with red
- Don't use other fonts
- Don't fill a whole space with text
- Do check: Logo hidden. Cover the hat. It should still read as Red Hat: pure red as a pop on a quiet ground, Red Hat Display in sentence case, real people or hat-shaped collages.
- Do check: Red check. Is red-50 present, and is it a pop rather than a flood? Is any red used to mean something bad? Fix both.
- Do check: Swap test. Put another enterprise vendor's logo on it. If the plain sentence-case type, the single red signal and the specific, sourced copy still fit, it is generic: go back.

DESIGN.md171 lines · version alpha

---
version: alpha
name: "Reddit"
description: "Where we discover and participate through real conversation"
colors:
  primary: "#ff4500"
  secondary: "#ff5fc2"
  surface: "#ffffff"
  on-surface: "#000000"
  bananayellow: "#FFBF0B"
  limegreen: "#AEEF0F"
  juniperblue: "#00E2B7"
  orangered-highlight: "#FF8864"
  guavapink-highlight: "#FF9FDF"
  bananayellow-highlight: "#FFDE55"
  limegreen-highlight: "#E4FF45"
  juniperblue-highlight: "#92FFEA"
typography:
  headline-display:
    fontFamily: "Reddit Sans"
    fontSize: 70px
    fontWeight: 800
    lineHeight: 1
  body-md:
    fontFamily: "Reddit Sans"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.44
  heading:
    fontFamily: "Reddit Sans"
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.25
  section:
    fontFamily: "Reddit Sans"
    fontSize: 48px
    fontWeight: 800
    lineHeight: 1.042
  stat:
    fontFamily: "Reddit Sans"
    fontSize: 48px
    fontWeight: 800
    lineHeight: 1.042
  card:
    fontFamily: "Reddit Sans"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.44
  nav:
    fontFamily: "Reddit Sans"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.44
  footer:
    fontFamily: "Reddit Sans"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.44
  footer-link:
    fontFamily: "Reddit Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.44
  legal:
    fontFamily: "Reddit Sans"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.44
spacing:
  margin: 234px
  margin-phone: 20px
  gutter: 24px
  gutter-phone: 0px
  section: 100px
  section-phone: 48px
  card-gap: 32px
  container-max: 972px
  columns: 2
omitted:
  - section: rounded
    reason: "No corner radius measured in the Reddit brand study"
  - section: components
    reason: "No component with a measured fill and text color in the Reddit brand study"
---
# Reddit design system

## Overview

Generated on 2026-11-03 from the Reddit brand study (unfairly.ai/brand-guidelines/reddit/, checked 2026-10-31). An independent study of what Reddit publishes and ships, not official Reddit guidelines. Lines marked GAP were not found in the study.

A conversation-led identity: OrangeRed, dimensional Snoo, warm readable type and a modular Conversation Bubble connect the corporate brand with a wide variety of communities. Make conversation the shape of the brand.

- Logo: Front-facing dimensional Snoo head in an OrangeRed Conversation Bubble, paired with the lowercase Reddit wordmark (from the Reddit brand study). Link your approved master files.
- Headline on the site: "Reddit is the heart of the internet"
- Category: A community platform organized around people, conversations and interests.
- Audience: People exploring shared interests, communities, and business audiences engaging with those communities.
- Promise: Discover knowledge and participate through real conversation.
- Voice: Inviting and helpful, Original and authentic, Clever and playful, Honest and familiar.
- Use brief everyday phrasing that helps the reader quickly; avoid formality and technical language that would sound unnatural aloud.
- Assume good intent and frame guidance positively; avoid hostile or transactional language.
- Keep playful language away from sensitive posts, comments and communities.
- Use humor and meta references only when they add useful context rather than confusion.

## Colors

- Primary: #ff4500 (from the Reddit brand study)
- Secondary: #ff5fc2 (from the Reddit brand study)
- Surface: #ffffff (from the Reddit brand study)
- On surface: #000000 (from the Reddit brand study)
- OrangeRed (#FF4500): Primary; evergreen brand voice; always visible in primary compositions
- Dark (#000000): Primary; black text and dark grounds
- Light (#FFFFFF): Primary; white grounds and reversed type
- GuavaPink (#FF5FC2): Secondary; community identity and content, rather than evergreen corporate voice
- BananaYellow (#FFBF0B): Secondary; community identity and content, rather than evergreen corporate voice
- LimeGreen (#AEEF0F): Secondary; community identity and content, rather than evergreen corporate voice
- Keep OrangeRed visible in primary brand compositions.
- Represent communities with a secondary family and its highlights/tints.
- Separate adjacent content using tonal contrast; avoid similar secondary colors that vibrate on screens.
- Use only black or white type on colored backgrounds, respecting typography-specific approved examples.

## Typography

- Display: Reddit Sans (from the Reddit brand study)
- Body: Reddit Sans (from the Reddit brand study)
- Reddit Sans. SIL Open Font License 1.1
- Reddit Sans Condensed. SIL Open Font License 1.1
- Reddit Mono. SIL Open Font License 1.1
- headline-display: Hero H1, Reddit Sans 70px/1 at 800
- body-md: Body, Reddit Sans 20px/1.44 at 400
- heading: Explainer and feature H2, Reddit Sans 40px/1.25 at 800
- section: Stats and news H2, Reddit Sans 48px/1.042 at 800
- stat: Statistic, Reddit Sans 48px/1.042 at 800
- card: News card title, Reddit Sans 20px/1.44 at 700
- nav: Navigation, Reddit Sans 16px/1.44 at 600
- footer: Footer heading, Reddit Sans 24px/1.44 at 700
- footer-link: Footer link, Reddit Sans 16px/1.44 at 400
- legal: Copyright, Reddit Sans 12px/1.44 at 400
- Use Reddit Sans for approximately 90% of typesetting, especially captions, attribution and long copy.
- Use Reddit Display for headlines and large titles; bubble headline examples use ExtraBold.
- Use Chocolate for subheaders, bylines, marketing and webpages, rather than large headlines.

## Layout

- margin 234px, margin-phone 20px, gutter 24px, gutter-phone 0px, section 100px, section-phone 48px, card-gap 32px, container-max 972px, columns 2
- Begin with a 12×12 foundation and choose appropriate 12×12, 6×6, 4×4, 3×3, 2×2 or 1×1 subdivisions.
- Use grid cells to scale and extend content blocks.
- Align negative space as deliberately as type, images and logos.

## Elevation & Depth

- Flat bubble frames without drop shadows; 3D shading belongs to approved illustrations and Snoo

## Shapes

- Conversation Bubble: circle-derived corners with a rounded tail; consistent radius within a composition
- pill

## Components

- GAP: buttons, cards, charts and tables.

## Do's and Don'ts

- Don't alterations, replacement parts, arbitrary angles, recoloring, effects, warping, image fills, changed spacing and substitute typefaces.
- Don't low contrast, secondary tints on white, drop shadows, or an undifferentiated community tag and caption in one color.
- Don't justification, colored body text, drop shadows, tracked-out lowercase, excessive sizes, centered text blocks, or colored display copy other than OrangeRed.
- Don't corporate jargon, clichés, unhelpful technical explanations, negative assumptions, confusing meta jokes or insensitive playfulness.
- Don't arbitrary off-grid placement, inconsistent scaling, crowded negative space or distortion of the bubble geometry.
- Do check: Logo hidden. Without the logo, the circle-derived bottom-tail bubble, OrangeRed, heavy warm headline, dimensional Snoo or topic object, and candid community content should still identify Reddit.
- Do check: Speaker check. Is Reddit speaking, or are redditors speaking? Choose primary brand colors for the former and a secondary tonal family for the latter.
- Do check: Bubble check. Are radii consistent, tails at the bottom, layers connected and padding tied to radius?

DESIGN.md212 lines · version alpha

---
version: alpha
name: "Salesforce"
description: "The #1 AI CRM: one open, trusted platform bringing people, AI agents, apps and data together (paraphrase)."
colors:
  primary: "#022ac0"
  secondary: "#04e1cb"
  surface: "#ffffff"
  on-surface: "#032d60"
  bright-blue: "#066AFE"
  cloud-blue-95: "#EAF5FE"
  cloud-blue-80: "#90D0FE"
  deep-navy: "#001E5B"
  blue-50: "#0176D3"
  green-50: "#2E844A"
  yellow-80: "#FCC003"
  neutral-10: "#181818"
typography:
  headline-display:
    fontFamily: "Poppins"
  body-md:
    fontFamily: "Open Sans"
  display-xxl:
    fontFamily: "ITC Avant Garde"
    fontSize: 80px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -3px
  display-xl:
    fontFamily: "ITC Avant Garde"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.9px
  display-l:
    fontFamily: "ITC Avant Garde"
    fontSize: 42px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.5px
  display-m:
    fontFamily: "ITC Avant Garde"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.6px
  display-s:
    fontFamily: "ITC Avant Garde"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.375
    letterSpacing: -0.3px
  display-lead:
    fontFamily: "ITC Avant Garde"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.24px
  display-xs:
    fontFamily: "ITC Avant Garde"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.2px
  label:
    fontFamily: "ITC Avant Garde"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.4px
  body-lead:
    fontFamily: "Salesforce Sans"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
  body-l:
    fontFamily: "Salesforce Sans"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
  body-m:
    fontFamily: "Salesforce Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.625
  nav:
    fontFamily: "Salesforce Sans Bold"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.75
rounded:
  sm: 16px
  md: 24px
  lg: 27px
  xl: 30px
  2xl: 32px
  full: 9999px
spacing:
  margin: 144px
  margin-phone: 16px
  gutter: 24px
  gutter-phone: 16px
  section: 96px
  section-phone: 64px
  card-gap: 64px
  container-max: 1152px
  columns: 2
components:
  button-white-on-blue:
    backgroundColor: "{colors.surface}"
    textColor: "#023248"
    rounded: "{rounded.full}"
    height: 56px
  button-bright:
    backgroundColor: "{colors.bright-blue}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 48px
  button-nav-green:
    backgroundColor: "{colors.green-50}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 44px
---
# Salesforce design system

## Overview

Generated on 2026-11-03 from the Salesforce brand study (unfairly.ai/brand-guidelines/salesforce/, checked 2026-10-31). An independent study of what Salesforce publishes and ships, not official Salesforce guidelines.

Salesforce's homepage runs on deep blue and light sky blue, navy two-tone headlines in a round geometric face, white pill buttons, big rounded gradient cards and glossy 3D characters, all joined by one dome-shaped divider. Friendly enterprise. Salesforce wraps a serious platform story in round shapes (the cloud, pills, domes, 30px cards), a round geometric display face and playful 3D characters, so a CRM for the largest companies feels approachable.

- Logo: Cloud logo (primary): the "salesforce" wordmark inside the cloud; horizontal logo for tight layouts (from the Salesforce brand study). Link your approved master files.
- Headline on the site: "The #1 AI CRM"
- Category: AI CRM (customer relationship management)
- Audience: Businesses of every size and industry: SMB, mid-market and enterprise (paraphrase of the G2 copy).
- Promise: Agents take the repetitive work inside guardrails you control, so people focus on decisions (paraphrase of the section lead).
- Voice: Confident, Optimistic, Plain-spoken, Customer-first.
- Address the reader as "you/your"; Salesforce speaks as "we" only in values copy
- Use a spaced em dash ("your data — working together", "work — all within")
- Use contractions (you're, don't, we're)
- Buttons start with a verb: Explore, Start, Watch, See, Read, Take, Learn

## Colors

- Primary: #022ac0 (from the Salesforce brand study)
- Secondary: #04e1cb (from the Salesforce brand study)
- Surface: #ffffff (from the Salesforce brand study)
- On surface: #032d60 (from the Salesforce brand study)
- Blue 20 (#032D60): Headlines and body on light grounds
- Hero blue (#022AC0): Hero ground; accent phrase in headlines (observed, not in SLDS 1)
- Bright blue (#066AFE): Gradient highlight, bright buttons (observed)
- Teal 80 (#04E1CB): Accent line on blue, eyebrows
- Cloud Blue 95 (#EAF5FE): Light sections
- Cloud Blue 80 (#90D0FE): Sky-blue sections
- Text: Neutral 10 and Neutral 30; placeholder Neutral 50
- Primary background white (Neutral 100); Neutral 95 sparingly
- Messaging: green success, orange warning, red error, light gray info, dark gray offline
- Hover: one color step (10 points) darker on light UI, lighter on dark UI; never a different hue

## Typography

- Display: Poppins (from the Salesforce brand study)
- Body: Open Sans (from the Salesforce brand study)
- ITC Avant Garde Gothic, Headlines, leads in the hero, buttons, eyebrows, chips. Commercial (ITC / Monotype); not open
- Salesforce Sans, Body copy, nav, footer. Proprietary Salesforce face
- display-xxl: Hero H1 / closing H2, ITC Avant Garde 80px/1.1 at 500
- display-xl: Section H2 on light / resources, ITC Avant Garde 72px/1 at 500
- display-l: Card / panel H2, logo-band H2, ITC Avant Garde 42px/1.25 at 500
- display-m: Narrow bento title / demo H2, ITC Avant Garde 32px/1.25 at 500
- display-s: Story H3 / quote / sub-H3, ITC Avant Garde 24px/1.375 at 500
- display-lead: Hero lead, ITC Avant Garde 20px/1.5 at 500
- display-xs: Column H3 / product label, ITC Avant Garde 18px/1.25 at 500
- label: Buttons, eyebrows, chips, ITC Avant Garde 16px/1.5 at 500
- body-lead: Light-section lead, Salesforce Sans 20px/1.5 at 400
- body-l: Card / panel body, Salesforce Sans 18px/1.5 at 400
- body-m: Column body, Salesforce Sans 16px/1.625 at 400
- nav: Nav links, Salesforce Sans Bold 16px/1.75 at 700
- One display weight
- Headlines 72-80px on desktop, tight leading (1.0-1.1)
- Body 16-20px at 1.5

## Layout

- margin 144px, margin-phone 16px, gutter 24px, gutter-phone 16px, section 96px, section-phone 64px, card-gap 64px, container-max 1152px, columns 2
- Container 1152
- Centre section H2s
- Cards hold a two-column split

## Elevation & Depth

- almost none: 1px translucent white borders on glass and outlined pills

## Shapes

- large: 30px product cards, 32px panels, 24px glass frames and quote cards, 27px story cards, 16px bento cards
- pill

## Components

- button-white-on-blue: #FFFFFF fill, #023248 text, corners {rounded.full}, 56px tall. Start for free (151x56), Explore Headless Toolkit (215x56)
- button-bright: #066AFE fill, #FFFFFF text, corners {rounded.full}, 48px tall. Watch all demos (165x48)
- button-nav-green: #2E844A fill, #FFFFFF text, corners {rounded.full}, 44px tall. Get started (138x44)

## Do's and Don'ts

- Don't alter the logo
- Don't go below the minimum sizes with the wordmark
- Don't use different hues for hover
- Don't rely on color alone for an interaction
- Do check: Logo hidden. Cover the cloud: it should still read as Salesforce from the round geometric headlines, navy-and-blue two-tone, pills and dome dividers.
- Do check: Swap test. Put another CRM's logo on it. If the domes, Cloud Blue grounds and 3D characters still say Salesforce, the system is carrying it.

DESIGN.md202 lines · version alpha

---
version: alpha
name: "Shopify"
description: "The world's best commerce platform."
colors:
  primary: "#ffffff"
  secondary: "#36f4a4"
  surface: "#02090a"
  on-surface: "#ffffff"
  shopify-green: "#95BF47"
  shopify-dark-green: "#5E8E3E"
  teal-card: "#061A1C"
  navy: "#000A1E"
  sidekick-violet: "#2C007F"
  deep-green: "#041E18"
  muted: "#9797A2"
  footer-black: "#000000"
typography:
  headline-display:
    fontFamily: "Inter"
    fontSize: 96px
    fontWeight: 300
    lineHeight: 1.08
    letterSpacing: -1.92px
  body-md:
    fontFamily: "Inter"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
  statement-headline:
    fontFamily: "Inter"
    fontSize: 56px
    fontWeight: 330
    lineHeight: 1
    letterSpacing: -1.68px
  section-headline-h2-h3:
    fontFamily: "Inter"
    fontSize: 56px
    fontWeight: 330
    lineHeight: 1.08
    letterSpacing: -1.68px
  closing-headline-centered-h2:
    fontFamily: "Inter"
    fontSize: 64px
    fontWeight: 330
    lineHeight: 1.08
    letterSpacing: -1.28px
  feature-headline-h3:
    fontFamily: "Inter"
    fontSize: 44px
    fontWeight: 330
    lineHeight: 1.1
    letterSpacing: -0.44px
  stat-number:
    fontFamily: "Inter"
    fontSize: 96px
    fontWeight: 300
    lineHeight: 0.96
  pull-quote:
    fontFamily: "Inter"
    fontSize: 34px
    fontWeight: 330
    lineHeight: 1.14
  hero-lead:
    fontFamily: "Inter"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.48px
  card-title-h4:
    fontFamily: "Inter"
    fontSize: 20px
    fontWeight: 450
    lineHeight: 1.3
  body:
    fontFamily: "Inter"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
  body-small:
    fontFamily: "Inter"
    fontSize: 14px
    fontWeight: 420
    lineHeight: 1.37
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  margin: 90px
  margin-phone: 16px
  gutter: 16px
  gutter-phone: 16px
  section: 128px
  section-phone: 64px
  card-gap: 16px
  container-max: 1260px
  columns: 12
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.footer-black}"
    rounded: "{rounded.full}"
    height: 56px
  button-nav:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.footer-black}"
    rounded: "{rounded.full}"
    height: 44px
---
# Shopify design system

## Overview

Generated on 2026-11-03 from the Shopify brand study (unfairly.ai/brand-guidelines/shopify/, checked 2026-10-29). An independent study of what Shopify publishes and ships, not official Shopify guidelines. Lines marked GAP were not found in the study.

A commerce brand that dresses in black: near-black, navy and deep green grounds, giant light Inter headlines, one white pill, and real merchants' stores and faces as the imagery. The green Shopping Bag stays in the logo. Shopify sells a tool, so it lets merchants be the color. The page is a dark, quiet stage of light type and white pills, and every bright thing on it is a merchant: their storefronts, their products, their faces.

- Logo: Clear space X around the logo, X = the wordmark x-height
- Headline on the site: "Be the next household name"
- Category: Commerce platform: online store, point of sale, checkout, payments and apps in one system
- Audience: Anyone from first-time entrepreneurs to enterprise brands
- Promise: Sell everywhere people shop, from one place, as you grow
- Voice: real, proactive, dynamic, guiding.
- Aim for a US grade 7 reading level; short sentences, headings and bullets
- Start calls to action with a strong verb, in active voice
- Use one term for one concept; no synonyms for key actions
- Avoid words that generalize success, such as 'every', 'all' and 'most'

## Colors

- Primary: #ffffff (from the Shopify brand study)
- Secondary: #36f4a4 (from the Shopify brand study)
- Surface: #02090a (from the Shopify brand study)
- On surface: #ffffff (from the Shopify brand study)
- Shopify Green (#95BF47): The Shopping Bag in the full-color logo. Never a UI color on the homepage.
- Shopify Dark Green (#5E8E3E): The bag's shadow side.
- Page black (#02090A): The page ground from hero to stories.
- White (#FFFFFF): All headlines and the one filled pill.
- Teal card (#061A1C): Feature cards on the page black.
- Navy (#000A1E): Apps and developer bands.
- Body text in a muted tint of the ground: #9797A2, #9DABAD, #BDBDCA or #99B3AD
- Mint #36F4A4 for numbers and mono labels only
- In product UI, never use green or red to entice; contrast at least 4.5:1
- Don't use color alone to carry meaning

## Typography

- Display: Inter (from the Shopify brand study)
- Body: Inter (from the Shopify brand study)
- Shopify-Inter, Every headline, weights 300-330. Shopify's own build of Inter, served from cdn.shopify.com; its licence is not published (Inter itself is SIL OFL)
- Shopify-Inter, Body, nav, buttons (weights 400-550). Shopify's own build of Inter; licence not published
- ui-monospace, Stat labels and chips only. the reader's system font
- headline-display: Hero display (h1), Inter 96px/1.08 at 300
- body-md: Body large, Inter 20px/1.4 at 400
- statement-headline: Statement headline, Inter 56px/1 at 330
- section-headline-h2-h3: Section headline (h2/h3), Inter 56px/1.08 at 330
- closing-headline-centered-h2: Closing headline (centered h2), Inter 64px/1.08 at 330
- feature-headline-h3: Feature headline (h3), Inter 44px/1.1 at 330
- stat-number: Stat number, Inter 96px/0.96 at 300
- pull-quote: Pull quote, Inter 34px/1.14 at 330
- hero-lead: Hero lead, Inter 24px/1.3 at 400
- card-title-h4: Card title (h4), Inter 20px/1.3 at 450
- body: Body, Inter 18px/1.4 at 400
- body-small: Body small, Inter 14px/1.37 at 420
- Load Inter WITH its optical-size axis: link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet" and keep font-optical-sizing: auto. Plain "Inter:wght@100..900" loads only the 14pt text cut, w
- Headlines 300-330, never bold
- Tracking -0.02em (hero) to -0.03em (56px heads); 0 for body

## Layout

- margin 90px, margin-phone 16px, gutter 16px, gutter-phone 16px, section 128px, section-phone 64px, card-gap 16px, container-max 1260px, columns 12
- Left-align headlines, except the two 64px closers which center
- Text and media split at x 720 in two-column blocks
- Phone: everything at x 16, pills full width

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- pill (9999px) everywhere; cards 12-16px; band tops 48px

## Components

- button-primary: #FFFFFF fill, #000000 text, corners {rounded.full}, 56px tall. Start for free (hero), Take your shot: the one filled CTA, always white on the dark page
- button-nav: #FFFFFF fill, #000000 text, corners {rounded.full}, 44px tall. Start for free in the nav; every pill on phones is this size (full width 358)

## Do's and Don'ts

- Don't use the old logo
- Don't use the wordmark alone
- Don't set headlines bold
- Don't use all caps for headlines
- Don't oversell or overpromise
- Don't use dramatic words for simple errors
- Do check: Logo hidden. Cover the logo. It should still read as Shopify: a near-black page, a huge light Inter headline, a white pill, and real merchants as the only color.
- Do check: Green check. Is Shopify green anywhere outside the logo? Take it out.
- Do check: Swap test. Swap in another platform's logo. If the merchant stories and two-beat headlines still feel at home, the copy is too generic: name a merchant or a number.

DESIGN.md238 lines · version alpha

---
version: alpha
name: "Slack"
description: "Slack is the productivity platform that empowers everyone with no-code automation, seamless search and knowledge sharing, and connected teams (paraphrase of the short boilerplate)."
colors:
  primary: "#730394"
  secondary: "#9602c7"
  surface: "#ffffff"
  on-surface: "#1d1c1d"
  aubergine: "#4A154B"
  horchata: "#F4EDE4"
  muted-gray-site: "#5C5C5C"
typography:
  headline-display:
    fontFamily: "Poppins"
    fontSize: 80px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.96px
  body-md:
    fontFamily: "Open Sans"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.555
  h1:
    fontFamily: "Poppins"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.063
    letterSpacing: -2.24px
  h2:
    fontFamily: "Poppins"
    fontSize: 50px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -1.75px
  h2-small:
    fontFamily: "Poppins"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -1.12px
  card-title:
    fontFamily: "Poppins"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.84px
  tab:
    fontFamily: "Poppins"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.27
    letterSpacing: -0.77px
  stat-small:
    fontFamily: "Poppins"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.77px
  body:
    fontFamily: "Open Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "Open Sans"
    fontSize: 16px
    fontWeight: 650
    lineHeight: 1.375
    letterSpacing: 0.2px
  button:
    fontFamily: "Open Sans"
    fontSize: 14px
    fontWeight: 650
    lineHeight: 1.29
    letterSpacing: 0.8px
  nav:
    fontFamily: "Open Sans"
    fontSize: 15px
    fontWeight: 650
    lineHeight: 1.55
rounded:
  none: 0px
  sm: 4px
  md: 16px
  lg: 32px
  xl: 48px
  full: 9999px
spacing:
  margin: 105px
  margin-phone: 16px
  gutter: 48px
  gutter-phone: 16px
  section: 96px
  section-phone: 36px
  card-gap: 48px
  container-max: 1230px
  columns: 12
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 57px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    height: 57px
  nav-button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 42px
  nav-button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    height: 42px
  button-on-dark-primary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    height: 57px
  hero-tab-pill:
    backgroundColor: "{colors.surface}"
    textColor: "#481A54"
    rounded: "{rounded.xl}"
    height: 38px
  dark-feature-pill:
    backgroundColor: "#481A54"
    textColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    height: 52px
  badge-new:
    backgroundColor: "#F9F0FF"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 24px
---
# Slack design system

## Overview

Generated on 2026-11-03 from the Slack brand study (unfairly.ai/brand-guidelines/slack/, checked 2026-10-29). An independent study of what Slack publishes and ships, not official Slack guidelines. Lines marked GAP were not found in the study.

Aubergine and horchata with a four-color octothorpe; pills and chat bubbles cut from that mark; real product UI as the hero; and a coworker voice that is clear, concise and human. Since joining Salesforce, the site speaks in Salesforce typefaces and brighter purples. One mark, many parts. Slack's octothorpe breaks into the pills and bubbles that frame its photos, pattern its ads and move in its motion, so even a shape on a webinar banner reads as Slack.

- Logo: Clear space: the logo mark's width on each side (brand center); never less than one pill length (brand terms)
- Headline on the site: "All your people and AI agents working together"
- Category: AI work platform: page title reads 'AI Work Platform & Productivity Tools'.
- Audience: Teams and companies of every size; the homepage names SMB, mid-market and enterprise G2 awards and leads with enterprise logos (GM, OpenAI, Target, Paramount, Stripe, IBM).
- Promise: People and AI agents working together in one place, with Slackbot coordinating work across connected apps (paraphrase of the 2026 homepage hero).
- Voice: Clear, Concise, Human.
- All caps only for buttons, eyebrows and jump links; never all lowercase
- No periods in headlines, eyebrows, links or buttons (the 2026 homepage breaks this on feature-tab headlines; a landing page may follow the homepage)
- No Oxford comma unless critical for clarity. Applies to copy you WRITE. Quotes and printed page lines keep their Oxford commas exactly (the Anthropic quote, the channels copy, the carousel sublines)
- Don't use & or + in place of 'and'. Applies to copy you WRITE. Text the page already prints is reproduced exactly as printed, & included ("Slack CRM: Generate meeting insights & Salesforce tasks", footer "Apps & Integrations", "Auto & Energy", "Health & Life Sciences", "employee 

## Colors

- Primary: #730394 (from the Slack brand study)
- Secondary: #9602c7 (from the Slack brand study)
- Surface: #ffffff (from the Slack brand study)
- On surface: #1d1c1d (from the Slack brand study)
- Aubergine (#4A154B): Lead color for big brand moments; white text on it. PMS 2623 C. slack.com renders its dark bands in #481A54 (observed).
- Horchata (#F4EDE4): Warm neutral ground; black text on it. PMS 7604 C at 80%
- Black (#1D1C1D): Default text color. PMS Black. slack.com sets text in #181818 (observed).
- White (#FFFFFF): Default text color on dark grounds; page ground. Also the slack.com page ground (observed 2026-10-29).
- CTA purple (site) (#730394): slack.com primary button fill and eyebrow text; not in the guide.
- Headline purple (site) (#9602C7): slack.com feature-tab headlines; not in the guide.
- Lead with aubergine for big brand moments; horchata for warmth
- Text only black or white, as paired in the guide
- Tonal pairings 1-2 steps apart on the extended scale
- A few extra colors, not many

## Typography

- Display: Poppins (from the Slack brand study)
- Body: Open Sans (from the Slack brand study)
- Salesforce Avant Garde, slack.com headlines and buttons; slide titles ('Avant Garde Demi SFD'). Proprietary to Salesforce (not an open font)
- Salesforce Sans, slack.com body, labels, the 'from Salesforce' line. Proprietary to Salesforce
- Larsseit, Brand center headlines and pull quotes (Thin Italic). Commercial, not open
- headline-display: Big stat number, Poppins 80px/1.05 at 600
- body-md: Body large, Open Sans 18px/1.555 at 400
- h1: Hero headline (h1), Poppins 64px/1.063 at 600
- h2: Section headline (h2, big), Poppins 50px/1.12 at 600
- h2-small: Section headline (h2, small), Poppins 32px/1.25 at 600
- card-title: Card and item title, Poppins 24px/1.25 at 600
- tab: Hero tab pill, Poppins 22px/1.27 at 600
- stat-small: Proof stat number, Poppins 64px/1 at 600
- body: Body, Open Sans 16px/1.5 at 400
- label: Bold label, Open Sans 16px/1.375 at 650
- button: Button (CAPS), Open Sans 14px/1.29 at 650
- nav: Nav link, Open Sans 15px/1.55 at 650
- Sentence case; never all lowercase
- All caps for eyebrows and buttons only
- Optical kerning for print and embedded collateral

## Layout

- margin 105px, margin-phone 16px, gutter 48px, gutter-phone 16px, section 96px, section-phone 36px, card-gap 48px, container-max 1230px, columns 12
- Brand shapes on a grid, 90-degree rotations only
- Images anchored to the bottom of their shape
- Aubergine bands punctuate a white page

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- rounded: shapes, containers and media come from the octothorpe's pill and chat-bubble geometry
- observed on slack.com: tall solid purple CTA with uppercase label beside an outlined secondary; the brand center itself sets labels in pills

## Components

- button-primary: #730394 fill, #FFFFFF text, corners {rounded.sm}, 57px tall. GET STARTED in the hero and after customer stories: 178x57, padding 19px 40px 20px, Salesforce Sans 700 14/18 caps (Open Sans 650). Phone: full content width (2
- button-secondary: #FFFFFF fill, #730394 text, corners {rounded.sm}, 57px tall. FIND YOUR PLAN: 226x57 in the hero (208 lower down), 8px right of the primary. Border is box-shadow inset 0 0 0 1px #730394 (no CSS border). The hero one ends w
- nav-button-primary: #730394 fill, #FFFFFF text, corners {rounded.sm}, 42px tall. GET STARTED in the nav: 130x42 at x 1205, padding 12px 16px. Phone: 114x34 at x 220, padding 8px, plus inset 0 0 0 1.5px rgba(255,255,255,0.25)
- nav-button-secondary: #FFFFFF fill, #730394 text, corners {rounded.sm}, 42px tall. REQUEST A DEMO in the nav: 166x42 at x 1019, inset 1px #730394 ring, 20px left of GET STARTED. Hidden on phones
- button-on-dark-primary: #FFFFFF fill, #730394 text, corners {rounded.sm}, 57px tall. GET STARTED on the #481A54 CTA band: 178x57
- hero-tab-pill: #FFFFFF fill, #481A54 text, corners {rounded.xl}, 38px tall. Five pills under the hero video in two centered rows (3 then 2), 12px apart both ways. Avant Garde 22px (Poppins 600), 4px 18px padding, 1px rgba(0,0,0,0.04) bo
- dark-feature-pill: #481A54 fill, #FFFFFF text, corners {rounded.lg}, 52px tall. Five stacked 492x52 pills on the dark band, 24px apart (76px pitch): inset 0 0 0 1px rgba(255,255,255,0.25) ring (renders #76537F), 16/22 700 white, +0.2px trac
- badge-new: #F9F0FF fill, #730394 text, corners {rounded.full}, 24px tall. New (46x24) and New Feature (93x24): 12/16 700, padding 4px 10px

## Do's and Don'ts

- Don't alter, crop, skew, outline, distort or recreate
- Don't show the Slack name without the mark
- Don't secondary colors as text
- Don't overly muted combinations
- Don't effects on type
- Don't low-contrast text
- Do check: Logo hidden. Cover the logo. It should still read as Slack: aubergine somewhere, rounded pill or bubble geometry, real Slack UI, sentence-case copy that sounds like a helpful coworker.
- Do check: Swap test. Put Teams' or Google's logo on it. If the aubergine, the octothorpe shapes and the product UI don't feel borrowed, it's generic.
- Do check: Style sheet. No ampersands, no Oxford commas, caps only on buttons and eyebrows, no secondary color used as text.

DESIGN.md233 lines · version alpha

---
version: alpha
name: "Spotify"
description: "Spotify is the world's most popular audio streaming subscription service, with music, podcasts and audiobooks."
colors:
  primary: "#1ed760"
  secondary: "#000000"
  surface: "#121212"
  on-surface: "#ffffff"
  plan-grey: "#242424"
  reserved-periwinkle: "#576DD6"
  dj-blue: "#0D72EA"
  video-orange: "#D64000"
  daylist-violet: "#7358FF"
  jam-magenta: "#CC2FAF"
  blend-green: "#088569"
  content-green: "#035341"
typography:
  headline-display:
    fontFamily: "Unbounded"
    fontSize: 118px
    fontWeight: 900
    lineHeight: 1.297
    letterSpacing: -1.18px
  body-md:
    fontFamily: "Hanken Grotesk"
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.375
  hero-keyword-h1-3rd-line:
    fontFamily: "Unbounded"
    fontSize: 118px
    fontWeight: 900
    lineHeight: 1.297
    letterSpacing: -1.18px
  section-headline-h2:
    fontFamily: "Bricolage Grotesque"
    fontSize: 66px
    fontWeight: 800
    lineHeight: 1.167
    letterSpacing: -1.32px
  section-sub-h3:
    fontFamily: "Bricolage Grotesque"
    fontSize: 24px
    fontWeight: 350
    lineHeight: 1.2
    letterSpacing: -0.24px
  manifesto-headline:
    fontFamily: "Bricolage Grotesque"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.96px
  manifesto-body:
    fontFamily: "Bricolage Grotesque"
    fontSize: 32px
    fontWeight: 350
    lineHeight: 1.15
    letterSpacing: -0.32px
  feature-card-title:
    fontFamily: "Hanken Grotesk"
    fontSize: 32px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.64px
  eyebrow-premium-with-icon:
    fontFamily: "Hanken Grotesk"
    fontSize: 20px
    fontWeight: 750
    lineHeight: 1.2
  feature-grid-card-label:
    fontFamily: "Hanken Grotesk"
    fontSize: 20px
    fontWeight: 750
    lineHeight: 1.2
  button-label:
    fontFamily: "Hanken Grotesk"
    fontSize: 16px
    fontWeight: 750
    lineHeight: 1.375
  plan-name:
    fontFamily: "Hanken Grotesk"
    fontSize: 32px
    fontWeight: 750
    lineHeight: 1.45
rounded:
  sm: 4px
  md: 6px
  lg: 10px
  xl: 24px
  full: 9999px
spacing:
  margin: 160px
  margin-phone: 16px
  gutter: 32px
  gutter-phone: 16px
  section: 256px
  section-phone: 96px
  container-max: 1120px
  columns: 12
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.secondary}"
    rounded: "{rounded.full}"
    height: 48px
  button-nav:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.secondary}"
    rounded: "{rounded.full}"
    height: 38px
  button-outline:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    height: 48px
  button-plan:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.secondary}"
    rounded: "{rounded.full}"
    height: 48px
  button-sage:
    backgroundColor: "#C9E3DB"
    textColor: "{colors.secondary}"
    rounded: "{rounded.full}"
    height: 48px
  plan-card:
    backgroundColor: "{colors.plan-grey}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
  content-card:
    backgroundColor: "{colors.content-green}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.xl}"
    height: 340px
  social-button:
    backgroundColor: "#222326"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
---
# Spotify design system

## Overview

Generated on 2026-11-03 from the Spotify brand study (unfairly.ai/brand-guidelines/spotify/, checked 2026-10-30). An independent study of what Spotify publishes and ships, not official Spotify guidelines. Lines marked GAP were not found in the study.

A black stage for color: #121212 everywhere, one ultra-wide 128px headline seen through the Spotify icon, saturated rounded feature cards, and Spotify Green kept for the button that says try it. Spotify keeps the page dark and lets green mean "press play". Color is loud but contained in cards; the logo itself becomes the hero window.

- Logo: Exclusion zone = half the icon height
- Headline on the site: "The ultimate home for music"
- Category: Audio and video streaming: music, podcasts, audiobooks, live events.
- Audience: Listeners deciding on Premium; the page also speaks to fans of live music and families.
- Promise: Spotify is where fans and artists come together.
- Voice: warm, fan-centred, short, exact about offers.
- Partner link labels: GET SPOTIFY FREE when the app is absent; OPEN SPOTIFY, PLAY ON SPOTIFY or LISTEN ON SPOTIFY when installed.
- Every price CTA is followed by its 12px eligibility line and "Terms apply".

## Colors

- Primary: #1ed760 (from the Spotify brand study)
- Secondary: #000000 (from the Spotify brand study)
- Surface: #121212 (from the Spotify brand study)
- On surface: #ffffff (from the Spotify brand study)
- Spotify Green (#1ED760): Published. The resting color; primary CTA pills on the site.
- Black (#121212): Published. Page ground of every band.
- White (#FFFFFF): Published. Type and logo on dark.
- Pure black (#000000): Nav and footer (observed).
- Plan grey (#242424): Plan cards (observed).
- Reserved periwinkle (#576DD6): Feature card (observed).
- Ground #121212 for every band; #000000 for nav and footer
- Green #1ED760 = primary action
- Get creative with surprising color combinations, with high contrast
- Each feature card owns one flat saturated color

## Typography

- Display: Unbounded (from the Spotify brand study)
- Body: Hanken Grotesk (from the Spotify brand study)
- Spotify Mix Title, Hero (ultra-wide 900, stretch 156.25%) and section heads (800). Proprietary (Spotify)
- Spotify Mix, Body, subheads, card titles, buttons, nav, footer. Proprietary (Spotify)
- headline-display: Hero headline (h1), Unbounded 118px/1.297 at 900
- body-md: Body, Hanken Grotesk 16px/1.375 at 450
- hero-keyword-h1-3rd-line: Hero keyword (h1 3rd line), Unbounded 118px/1.297 at 900
- section-headline-h2: Section headline (h2), Bricolage Grotesque 66px/1.167 at 800
- section-sub-h3: Section sub (h3), Bricolage Grotesque 24px/1.2 at 350
- manifesto-headline: Manifesto headline, Bricolage Grotesque 48px/1.2 at 400
- manifesto-body: Manifesto body, Bricolage Grotesque 32px/1.15 at 350
- feature-card-title: Feature card title, Hanken Grotesk 32px/1.2 at 800
- eyebrow-premium-with-icon: Eyebrow "Premium" (with icon), Hanken Grotesk 20px/1.2 at 750
- feature-grid-card-label: Feature grid / card label, Hanken Grotesk 20px/1.2 at 750
- button-label: Button label, Hanken Grotesk 16px/1.375 at 750
- plan-name: Plan name, Hanken Grotesk 32px/1.45 at 750
- Hero: 128px ultra-wide 900, three lines, italic last line
- Section heads 64px, tight, centered
- Body 16px, buttons 16/700

## Layout

- margin 160px, margin-phone 16px, gutter 32px, gutter-phone 16px, section 256px, section-phone 96px, container-max 1120px, columns 12
- Center section headers; left-align only the manifesto and the moments row
- 1120 column, 32px gutters
- 256px between most bands (see the measured gap list)

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- pill (9999px) everywhere
- Radius: cards 24px, plan cards 10px, photos 16px

## Components

- button-primary: #1ED760 fill, #000000 text, corners {rounded.full}, 48px tall. Every primary CTA ("Try 2 months for $0"). 206x48 at 1440. Hover: scale 1.04 and lighter green; transition background-color, transform 0.15s cubic-bezier(0.3,0,
- button-nav: #1ED760 fill, #000000 text, corners {rounded.full}, 38px tall. Nav CTA, 206x38 at 1440; 156x28 with 14px text and 16px padding at 390.
- button-outline: #121212 fill, #FFFFFF text, corners {rounded.full}, 48px tall. "View all plans" beside the green pill, 16px gap.
- button-plan: #1ED760 fill, #000000 text, corners {rounded.full}, 48px tall.
- button-sage: #C9E3DB fill, #000000 text, corners {rounded.full}, 48px tall. Audiobooks Access "Learn more".
- plan-card: #242424 fill, #FFFFFF text, corners {rounded.lg}. Built as four stacked blocks, all #242424, 353px wide (342px at x 24 on phone): HEAD (radius 10 10 0 0): badge flush top-left (Individual, Student) then 16px, e
- content-card: #035341 fill, #FFFFFF text, corners {rounded.xl}, 340px tall. Top-left eyebrow (icon + "Premium" 16/700, omitted on Podcasts), 88px #10B28E line icon centered, title 20/700, body 16/400 at 70% white. Phone 358x320, radius
- social-button: #222326 fill, #FFFFFF text, corners {rounded.full}. Instagram, X, Facebook glyphs 24px, top-right of the footer.

## Do's and Don'ts

- Don't rotate, stretch or recolor
- Don't fill the waves
- Don't introduce colors outside the brand palette
- Don't use over-saturated colors for CMYK print
- Don't use the wide hero cut anywhere else
- Don't letter-space headlines open: the hero is -0.01em with letters nearly touching, h2 -0.02em
- Do check: Logo hidden. Cover the logo. It should still read as Spotify: a #121212 page, a green pill, a wide black headline and saturated rounded cards.
- Do check: Swap test. Put another company's name on it. If nothing else changed, the icon-window hero, green-only actions and card colors are missing.

DESIGN.md199 lines · version alpha

---
version: alpha
name: "Starbucks"
description: "Starbucks describes itself as \"in the people business serving coffee\", not the other way round."
colors:
  primary: "#006241"
  secondary: "#00754a"
  surface: "#ffffff"
  on-surface: "#000000"
  light-green: "#D4E9E2"
  house-green: "#1E3932"
  warm-neutral: "#F2F0EB"
  cool-neutral: "#F9F9F9"
  spring-yellow: "#EED350"
  spring-light-blue: "#B6CBD5"
  spring-coral: "#D3705A"
  spring-teal: "#005E66"
typography:
  headline-display:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.24px
  body-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: -0.19px
  announcement-line:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 19px
    fontWeight: 600
    lineHeight: 1.75
    letterSpacing: -0.19px
  announcement-button:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: -0.19px
  feature-button:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.16px
  nav-link:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 1.4px
  nav-utility-find-a-caf-and-nav-buttons:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.16px
  footnote:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: -0.14px
  footer-column-heading:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.29
    letterSpacing: -0.16px
  footer-link:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.16px
  copyright:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.16px
rounded:
  sm: 50px
spacing:
  margin: 40px
  margin-phone: 16px
  gutter: 0px
  container-max: 1440px
  columns: 2
components:
  button-announcement:
    backgroundColor: "#006242"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 41px
  button-outline-nav:
    backgroundColor: "{colors.surface}"
    textColor: "#212121"
    rounded: "{rounded.sm}"
    height: 33px
  button-filled-nav:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 33px
---
# Starbucks design system

## Overview

Generated on 2026-11-03 from the Starbucks brand study (unfairly.ai/brand-guidelines/starbucks/, checked 2026-10-29). An independent study of what Starbucks publishes and ships, not official Starbucks guidelines. Lines marked GAP were not found in the study.

A family of greens rooted in the apron, the Siren on her own, three faces (Sodo Sans, Lander, Pike) and one dial from functional to expressive: quiet and green where people order, artful and seasonal where they browse. Hold the greens and the Siren still so everything else can change. Starbucks keeps ordering calm and green and spends its personality on seasonal color, artist-made illustration and playful lines, and it all reads as one brand because a green or the Siren is always there.

- Logo: Prefer the Siren alone, unlocked from the wordmark
- Headline on the site: "That first sip feeling"
- Category: Coffee roaster and coffeehouse company: roasts and sells whole-bean coffee, runs coffeehouses, and sells drinks, food, merchandise and grocery coffee (paraphrase).
- Audience: "Beautifully diverse customers all over the world", met where they are along their journey: ordering, in store, by email, on social.
- Promise: Customer Promise: "Serve the world's finest coffee, with a moment of connection".
- Voice: Functional, Expressive.
- Functional copy organises and anticipates needs, and calls attention to the product, not itself
- Expressive copy goes on focal products: one product truth, fresh, relevant and interesting
- Make every word count and write for where the reader is interacting with the brand
- With space, tell a passionate coffee story (e.g. the Hawaii Ka'u tasting-room note)

## Colors

- Primary: #006241 (from the Starbucks brand study)
- Secondary: #00754a (from the Starbucks brand study)
- Surface: #ffffff (from the Starbucks brand study)
- On surface: #000000 (from the Starbucks brand study)
- Starbucks Green (#006241): The primary green, "ownable and recognizable": brand moments, the Siren and the wordmark. PMS 3425, CMYK 100 0 85 42. Gets the largest tile in the guide's brand-color grid.
- Accent Green (#00754A): Used sparingly, when Starbucks Green doesn't stand out enough from the background. PMS 3415, CMYK 96 0 88 37.
- Light Green (#D4E9E2): Secondary: a green for when the others are too rich, dark or heavy. PMS 9521, CMYK 15 0 14 0. The Siren goes Starbucks Green on it; the wordmark goes Black.
- House Green (#1E3932): Secondary: pairs with Starbucks Green and extends its range; "used like a neutral". PMS 560, CMYK 89 48 73 64. The dark ground of most functional signage, menus and the theory c
- Black (#000000): Core color for type or accents. PMS Black, CMYK 76 76 82 63.
- Warm Neutral (#F2F0EB): Backgrounds alongside warm colors. PMS 9080, CMYK 2 4 5 2. The guide site's own page ground.
- Always a brand green in the composition, or the Siren
- Starbucks Green for brand moments; Accent Green only when Starbucks Green doesn't stand out from the ground
- House Green behaves like a neutral; Light Green when the others are too heavy
- Warm Neutral beside warm colors, Cool Neutral beside cool ones

## Typography

- Display: Plus Jakarta Sans (from the Starbucks brand study)
- Body: Plus Jakarta Sans (from the Starbucks brand study)
- Sodo Sans, Most versatile face; headlines on the web, body copy everywhere. Proprietary to Starbucks; the guide self-hosts it (SoDoSans-*.woff2) and publishes no licence
- Sodo Sans, Body copy, product facts, labels. Proprietary to Starbucks; no licence published
- Lander (Lander Grande, Lander Tall), Accent for expressive moments: Rewards, Reserve, coffee stories. Proprietary to Starbucks; no licence published
- headline-display: Feature headline (h1 in row 1, h2 in rows 2-4), Plus Jakarta Sans 24px/1.4 at 600
- body-md: Feature body, Plus Jakarta Sans 19px/1.75 at 400
- announcement-line: Announcement line, Plus Jakarta Sans 19px/1.75 at 600
- announcement-button: Announcement button, Plus Jakarta Sans 19px/1.75 at 400
- feature-button: Feature button, Plus Jakarta Sans 16px/1.2 at 600
- nav-link: Nav link, Plus Jakarta Sans 14px/1.5 at 700
- nav-utility-find-a-caf-and-nav-buttons: Nav utility (Find a café) and nav buttons, Plus Jakarta Sans 14px/1.2 at 600
- footnote: Footnote, Plus Jakarta Sans 14px/1.8 at 400
- footer-column-heading: Footer column heading, Plus Jakarta Sans 19px/1.29 at 400
- footer-link: Footer link, Plus Jakarta Sans 16px/1.5 at 400
- copyright: Copyright, Plus Jakarta Sans 14px/1.5 at 400
- Sodo Sans for body copy and most text
- Lander as an accent for expressive moments (Rewards, Reserve, coffee stories)
- Pike for functional headlines and wayfinding, in spaced capitals in every example

## Layout

- margin 40px, margin-phone 16px, gutter 0px, container-max 1440px, columns 2
- Homepage: alternating 50/50 photo and #006242 rows, centered white type, white outline pill
- 32px white gap between every band; never butt two greens together
- Content capped at 1440px, centered

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- pill

## Components

- button-announcement: #006242 fill, #FFFFFF text, corners {rounded.sm}, 41px tall.
- button-outline-nav: #FFFFFF fill, #212121 text, corners {rounded.sm}, 33px tall.
- button-filled-nav: #000000 fill, #FFFFFF text, corners {rounded.sm}, 33px tall.

## Do's and Don'ts

- Don't use the 1971, 1987 or 1992 badges: they are shown as history
- Don't put the Siren on a ground the page doesn't show for her
- Don't let a seasonal palette replace the greens
- Don't use Accent Green as a large field
- Don't hand-letter headlines
- Don't add a fourth typeface
- Do check: Logo hidden. Cover the Siren. A brand green should still be in the frame, with honest product photography and Sodo Sans, Lander or Pike; if not, it isn't Starbucks yet.
- Do check: Dial check. Say where the piece sits between functional and expressive and why. Ordering and wayfinding should be the quietest; if the menu is louder than the social post, it's backwards.
- Do check: Swap test. Put another coffee chain's logo on it. If the greens, the Siren-led restraint and the warm, playful line don't feel out of place, it's generic.

DESIGN.md195 lines · version alpha

---
version: alpha
name: "Supabase"
description: "The Postgres development platform: start with a Postgres database and add Auth, Data APIs, Edge Functions, Realtime, Storage and Vector."
colors:
  primary: "#0e7e4e"
  secondary: "#3ecf8e"
  surface: "#fdfdfd"
  on-surface: "#030303"
  dark-gray: "#1C1C1C"
  light-gray: "#F8F8F8"
  muted-ink: "#696969"
  gray-dark-1200: "#EDEDED"
  logo-gradient-stop: "#249361"
  destructive: "#E54D2E"
typography:
  headline-display:
    fontFamily: "Manrope"
    fontSize: 46px
    fontWeight: 500
    lineHeight: 46px
  body-md:
    fontFamily: "Inter"
    fontSize: 15px
    fontWeight: 450
    lineHeight: 22.5px
  heading:
    fontFamily: "Manrope"
    fontSize: 34px
    fontWeight: 600
    lineHeight: 37.78px
  quote:
    fontFamily: "Manrope"
    fontSize: 22px
    fontWeight: 450
    lineHeight: 30.25px
  lead-l:
    fontFamily: "Inter"
    fontSize: 22px
    fontWeight: 450
    lineHeight: 29.33px
    letterSpacing: -0.16px
  title:
    fontFamily: "Manrope"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px
  footer-heading:
    fontFamily: "Manrope"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 22.5px
  title-s:
    fontFamily: "Manrope"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
  lead:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 450
    lineHeight: 24px
  body:
    fontFamily: "Inter"
    fontSize: 14px
    fontWeight: 450
    lineHeight: 20px
  button:
    fontFamily: "Inter"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
  nav:
    fontFamily: "Inter"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 16px
rounded:
  sm: 8px
  md: 9.29px
  lg: 10.67px
  xl: 16px
  full: 9999px
spacing:
  margin: 176px
  margin-phone: 24px
  gutter: 12px
  gutter-phone: 16px
  section: 96px
  section-phone: 64px
  card-gap: 12px
  container-max: 1280px
  columns: 12
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FAFCFB"
    rounded: "{rounded.md}"
    height: 38px
  button-secondary:
    backgroundColor: "#FFFFFF"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    height: 38px
---
# Supabase design system

## Overview

Generated on 2026-11-03 from the Supabase brand study (unfairly.ai/brand-guidelines/supabase/, checked 2026-10-30). An independent study of what Supabase publishes and ships, not official Supabase guidelines.

One green bolt on near-white or near-black grays; Manrope two-tone headlines over Inter, with Source Code Pro as a real third voice; hairline cards, gray line drawings with green dots, and real code as imagery. Copy that is direct and specific, never salesy. A developer tool that shows its work. Supabase keeps everything neutral and technical (hairlines, line drawings, real code) so the single green reads as 'live', and its copy says exactly what happens.

- Logo: Wordmark: the green lightning-bolt symbol plus the lowercase supabase lettering, horizontal. Default whenever there is room for the name (from the Supabase brand study). Link your approved master files.
- Headline on the site: "Build in a weekend, scale to millions"
- Category: Postgres development platform (backend as a service on Postgres); press has called it the open source Firebase alternative
- Audience: Developers and builders from beginners, vibe coders and AI builders to startups, agencies and enterprises in B2B SaaS, finserv and healthcare (paraphrase of the Solutions navigation).
- Promise: Build in a weekend, scale to millions, on open Postgres you can take with you.
- Voice: Direct, Action-oriented, Technical without jargon, Pragmatic.
- Sentence case for all UI text: buttons, labels, section headings
- Title case only for page names in global navigation and document titles (e.g. Database Settings)
- login/logout stay only in code, routes, slugs and CLI where they match implementation
- No exclamation marks unless critical (e.g. destructive actions)

## Colors

- Primary: #0e7e4e (from the Supabase brand study)
- Secondary: #3ecf8e (from the Supabase brand study)
- Surface: #fdfdfd (from the Supabase brand study)
- On surface: #030303 (from the Supabase brand study)
- Supabase green (#3ECF8E): The logo symbol and explicitly branded surfaces; bright green ink on dark grounds.
- Primary green (light) (#0E7E4E): Buttons, links and the green hero line in light mode; AA-safe text green.
- Dark gray (#1C1C1C): Published background behind the logo on dark.
- Light gray (#F8F8F8): Published background behind the logo on light.
- Page ground (#FDFDFD): Light homepage ground (measured).
- Ink (#030303): Headlines and lifted phrases on light (measured).
- Supabase green #3ECF8E is the logo color and the explicitly branded accent (bg-brand-default only when the canonical green is required)
- Readable green text, links and primary buttons use primary (light #0E7E4E), not brand green
- Grays (#1C1C1C, #F8F8F8) sit behind the logo
- Accent text colors (destructive, warning) sparingly

## Typography

- Display: Manrope (from the Supabase brand study)
- Body: Inter (from the Supabase brand study)
- Manrope, Headlines and card titles: 500 hero, 600 sections, sentence case, normal tracking. Open (SIL OFL 1.1), Google Fonts
- Inter, Body, nav, buttons, forms; weight 450 on the variable axis. Open (SIL OFL 1.1)
- Source Code Pro, Code, commands, token values, uppercase meta labels. Open (SIL OFL 1.1), Adobe
- headline-display: Hero H1, Manrope 46px/46px at 500
- body-md: Tweet text, Inter 15px/22.5px at 450
- heading: Section H2/H3 (two-tone), Manrope 34px/37.78px at 600
- quote: Story quote, Manrope 22px/30.25px at 450
- lead-l: Bento closing line, Inter 22px/29.33px at 450
- title: Card title, Manrope 16px/24px at 600
- footer-heading: Footer column heading, Manrope 15px/22.5px at 600
- title-s: Template title, Manrope 14px/20px at 500
- lead: Hero lead / community lead, Inter 16px/24px at 450
- body: Body / card copy / links, Inter 14px/20px at 450
- button: Button label (38px buttons), Inter 14px/20px at 500
- nav: Nav item, Inter 14px/16px at 500
- Manrope for headlines and card titles
- Inter for body, nav, buttons and forms
- Source Code Pro for code, commands, token names and uppercase meta labels

## Layout

- margin 176px, margin-phone 24px, gutter 12px, gutter-phone 16px, section 96px, section-phone 64px, card-gap 12px, container-max 1280px, columns 12
- Sticky nav: wordmark left, primary CTA right
- Sections divided by full-width hairlines
- Close with the tagline band, then the security strip and footer

## Elevation & Depth

- 1px hairline borders (border-default at low alpha) frame cards, grid cells and sections; product illustrations are thin grayscale linework with green dots

## Shapes

- soft, small radii; cards 16px; tokens xs 0.167rem to xl 1rem
- rounded

## Components

- button-primary: #0E7E4E fill, #FAFCFB text, corners {rounded.md}, 38px tall. Start your project (149x38)
- button-secondary: #FFFFFF fill, #030303 text, corners {rounded.md}, 38px tall. Request a demo (140x38)

## Do's and Don'ts

- Don't change the files
- Don't repaint the logo or change its colors
- Don't repaint the logo
- Don't set body text in #3ECF8E on light grounds
- Don't use bold 700+ for headlines (the site uses 500/600)
- Don't set code in the sans
- Do check: Logo hidden. Cover the bolt. It should still read as Supabase: near-white or near-black grays, one green, Manrope two-tone headlines, hairline cards, gray line drawings with green dots, and real code.
- Do check: Swap test. Put another backend vendor's logo on it. If the green-as-live-signal, the code-as-image and the plain, specific copy wouldn't look out of place, it's generic and goes back.

DESIGN.md206 lines · version alpha

---
version: alpha
name: "Twilio"
description: "The customer engagement platform for builders: channels, context and AI in one platform."
colors:
  primary: "#1866ee"
  secondary: "#ef223a"
  surface: "#ffffff"
  on-surface: "#000d25"
  twilio-red-logo: "#F22F46"
  card-navy: "#191F36"
  code-navy: "#081F47"
  gray-30: "#CACDD8"
  paste-gray-60: "#606B85"
  utility-gray: "#F3F4F7"
  paste-blue-60: "#0263E0"
  paste-red-60: "#DB132A"
typography:
  headline-display:
    fontFamily: "Open Sans"
    fontSize: 64px
    fontWeight: 750
    lineHeight: 1.3
    letterSpacing: -1.92px
  body-md:
    fontFamily: "Open Sans"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.2px
  display-xl:
    fontFamily: "Open Sans"
    fontSize: 56px
    fontWeight: 750
    lineHeight: 1.18
    letterSpacing: -1.68px
  display-l:
    fontFamily: "Open Sans"
    fontSize: 40px
    fontWeight: 750
    lineHeight: 1.3
    letterSpacing: -0.8px
  title-xl:
    fontFamily: "Open Sans"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.286
  title:
    fontFamily: "Open Sans"
    fontSize: 20px
    fontWeight: 750
    lineHeight: 1.6
  body-l:
    fontFamily: "Open Sans"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.556
    letterSpacing: 0.18px
  caption-strong:
    fontFamily: "Open Sans"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.556
  button:
    fontFamily: "Open Sans"
    fontSize: 16px
    fontWeight: 550
    lineHeight: 1.5
  body-s:
    fontFamily: "Open Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  label:
    fontFamily: "Open Sans"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
  micro:
    fontFamily: "Open Sans"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
rounded:
  none: 0px
  sm: 10px
  md: 20px
  full: 9999px
spacing:
  margin: 120px
  margin-phone: 32px
  gutter: 48px
  gutter-phone: 32px
  section: 64px
  section-phone: 64px
  card-gap: 48px
  container-max: 1200px
  columns: 3
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 40px
  button-nav-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 36px
  badge-new:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
---
# Twilio design system

## Overview

Generated on 2026-11-03 from the Twilio brand study (unfairly.ai/brand-guidelines/twilio/, checked 2026-10-31). An independent study of what Twilio publishes and ships, not official Twilio guidelines.

Twilio's brand as published in Paste, its design system (color tokens, Twilio Sans super family, illustration types, voice and tone, product style), and as applied on twilio.com: one near-black ink page, blue pill actions, red reserved for numbers and the logo, product UI used as illustration. A developer brand that dresses down. Twilio keeps the page one dark ink color and the type plain, then lets two small things carry the identity: the red logo and red numbers, and blue pills that always mean "build now". The voice adds the personality, so a seasonal theme can sit on top without touching the system.

- Logo: Twilio logo: the red "bug" (a circle with four dots) beside the lowercase twilio wordmark, horizontal (from the Twilio brand study). Link your approved master files.
- Headline on the site: "Build for the AI era. Build with Twilio."
- Category: CPaaS and customer engagement platform (CEP)
- Audience: Developers and the businesses they build for, from startups to global enterprises
- Promise: Continuous customer conversations with humans or AI agents, on one platform.
- Voice: conversational, thoughtful, reliable, quirky.
- Use the serial (Oxford) comma in lists of 3 or more
- Avoid forced capitalization; title case only for proper nouns and products
- Use contractions with pronouns (it's, you'll, we're) to sound conversational
- Write for a 10-13 year old reading level: short sentences, common words, explain technical terms

## Colors

- Primary: #1866ee (from the Twilio brand study)
- Secondary: #ef223a (from the Twilio brand study)
- Surface: #ffffff (from the Twilio brand study)
- On surface: #000d25 (from the Twilio brand study)
- Ink (#000D25): The homepage ground, every band; text on white
- White (#FFFFFF): Nav; all text on ink
- Action blue (#1866EE): Every CTA pill
- Twilio Red (logo) (#F22F46): The Twilio logo
- Red light (#EF223A): Stat numbers, New badge
- Card navy (#191F36): Cards on ink
- Blue for every interactive element; red never for actions
- Twilio Red for logo, illustration accents and key numbers only
- Meet WCAG AA: 4.5:1 text, 3:1 large text and graphics
- Never use color alone to carry meaning

## Typography

- Display: Open Sans (from the Twilio brand study)
- Body: Open Sans (from the Twilio brand study)
- Whitney SSm (twilio.com headlines, 700), Headlines 700: hero 56/66, section 40/52, card titles 20/32. Commercial (Hoefler&Co. / Typography.com web font). Paste names Twilio Sans Display as the brand display face
- Whitney SSm (twilio.com text, 400-600), Body 400, buttons and links 500, captions 600. Commercial (Hoefler&Co.). Paste names Twilio Sans Text for UI text
- Twilio Sans Mono, Code samples (300 on the homepage). Twilio's own face (self-hosted on twilio.com for Paste); not an open licence
- headline-display: Analyst number (4x, 5x), Open Sans 64px/1.3 at 750
- body-md: Lead paragraph, Open Sans 20px/1.6 at 400
- display-xl: Hero H1, Open Sans 56px/1.18 at 750
- display-l: Section H2, Open Sans 40px/1.3 at 750
- title-xl: Analyst claim, Open Sans 28px/1.286 at 400
- title: Card title (product), Open Sans 20px/1.6 at 750
- body-l: Card body (product), Open Sans 18px/1.556 at 400
- caption-strong: Stat caption, Open Sans 18px/1.556 at 600
- button: Button label, Open Sans 16px/1.5 at 550
- body-s: Nav link / footer link, Open Sans 14px/1.43 at 400
- label: Footer column heading, Open Sans 14px/1.43 at 500
- micro: Utility / legal, Open Sans 12px/1.5 at 500
- Display for brand headlines only
- Semibold/bold for headings, regular for body
- Sentence case; avoid all caps

## Layout

- margin 120px, margin-phone 32px, gutter 48px, gutter-phone 32px, section 64px, section-phone 64px, card-gap 48px, container-max 1200px, columns 3
- Spacing in multiples of 8
- Related items 4-16px apart; actions 16-32px from their content
- Max 65 characters per line

## Elevation & Depth

- thin 1px rounded-cap line icons (Paste icon set) in white on dark; outline ring 2px on secondary buttons

## Shapes

- 20px on cards, the hero video and product panels; buttons full pill; the code tabs 4px top corners
- pill

## Components

- button-primary: #1866EE fill, #FFFFFF text, corners {rounded.full}, 40px tall. Start for free (148x40), View all products (184x40), Send messages (168x40)
- button-nav-primary: #1866EE fill, #FFFFFF text, corners {rounded.full}, 36px tall. Start for free in the nav (135x36; phone 14px, 123x36)
- badge-new: #EF223A fill, #FFFFFF text, corners {rounded.sm}.

## Do's and Don'ts

- Don't stylize, recolor or build composite marks with it
- Don't imitate Twilio's trade dress or website layout (trademark guidelines)
- Don't overuse primary blue (several primary buttons side by side in product UI)
- Don't create custom colors outside the tokens
- Don't joke in an error message
- Don't claim the product does something it can't
- Do check: Logo hidden. Cover the logo. It should still read as Twilio: one ink page, blue pills, red numbers and product UI fragments.
- Do check: Red audit. Red appears only on the logo, numbers and badges; never on a button.
- Do check: Voice. Run the word list: no click, leverage, easy, e.g.; sentence case throughout.

DESIGN.md162 lines · version alpha

---
version: alpha
name: "Twitch"
description: "Twitch is building the future of live, interactive entertainment, one community at a time."
colors:
  primary: "#9146ff"
  secondary: "#f0f0ff"
  surface: "#ffffff"
  on-surface: "#000000"
  caption-gray: "#868695"
  jiggle: "#FAB4FF"
  worm: "#FACDCD"
  isabelle: "#FEEE85"
  droid: "#BEFAE1"
  wipe-out: "#00C8AF"
  smoke: "#D2D2E6"
  widow: "#BEAAFF"
typography:
  headline-display:
    fontFamily: "Figtree"
    fontSize: 192px
    fontWeight: 500
    lineHeight: 0.92
    letterSpacing: -7.68px
  body-md:
    fontFamily: "Figtree"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -2.2px
  list-xl:
    fontFamily: "Figtree"
    fontSize: 96px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -3.84px
  footer-link:
    fontFamily: "Figtree"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.5
  nav:
    fontFamily: "Figtree"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.16
  footer-head:
    fontFamily: "Figtree"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.42
  caption:
    fontFamily: "Figtree"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1
  legal:
    fontFamily: "Figtree"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.42
rounded:
  none: 0px
spacing:
  margin: 120px
  margin-phone: 33px
  gutter: 0px
  gutter-phone: 0px
  section: 84px
  section-phone: 33px
  container-max: 1200px
  columns: 12
components:
  lead-panel:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
---
# Twitch design system

## Overview

Generated on 2026-11-03 from the Twitch brand study (unfairly.ai/brand-guidelines/twitch/, checked 2026-10-31). An independent study of what Twitch publishes and ships, not official Twitch guidelines.

One loud purple, one geometric sans set huge, and the community's own emotes and streams as the imagery. Twitch is purple, then white, then black, with creators flush to the edges. Twitch's brand is borrowed from its community on purpose: emotes from chat, stills from real streams, handles as captions, game names for colors. The system (one purple, one face, a strict grid) only frames them.

- Logo: The Twitch wordmark: bold, blocky letterforms with an extrusion inspired by classic video games; the Glitch (a speech-bubble mark) is the short form (from the Twitch brand study). Link your approved master files.
- Headline on the site: "We saved you a seat in chat"
- Category: Live, interactive entertainment: live streaming with chat.
- Audience: Four audiences, one per homepage section: fans who watch, streamers who create, developers who build tools, advertisers who want the audience.
- Promise: A seat in chat: belonging in a live community around what you love.
- Voice: Playful, Community-first, Irreverent, Direct.
- Section headlines are two to four words and set on two or three lines at 192px ("Find your thing", "Reach our crowd")
- No period at the end of a headline
- Use contractions (we've, we'll, it's, you're)
- Emotes are part of the lexicon: set one inline at the end of a headline or a lead sentence, at the text size, never as decoration in a corner

## Colors

- Primary: #9146ff (from the Twitch brand study)
- Secondary: #f0f0ff (from the Twitch brand study)
- Surface: #ffffff (from the Twitch brand study)
- On surface: #000000 (from the Twitch brand study)
- Twitch Purple (#9146FF): Core. RGB 145 70 255, CMYK 65 65 0 0. The brand: grounds, headlines, links.
- Black (#000000): Core. Body copy, dark sections, footer.
- Ice (#F0F0FF): Core. RGB 240 240 255. Light text on black, nav on purple.
- White (#FFFFFF): Observed on the homepage: middle section ground, hero headline, lead panel.
- Caption gray (#868695): Observed: vertical photo captions.
- Jiggle (#FAB4FF): Expanded palette (named after video games)
- Purple, black and ice are the natural state; expanded colors are for expression
- Gradients: Twitch Purple with Wipe-Out #00C8AF, Jiggle #FAB4FF or Pac #FFCA5F
- The homepage runs purple, then white, then black, top to bottom

## Typography

- Display: Figtree (from the Twitch brand study)
- Body: Figtree (from the Twitch brand study)
- Roobert, Display headlines Regular 400. Commercial (Displaay Type Foundry); Twitch serves its own cut, RoobertTW
- Roobert, Lead copy, CTAs, nav and footer SemiBold 600. Commercial (Displaay)
- headline-display: Display headline (every section), Figtree 192px/0.92 at 500
- body-md: Lead copy and text CTA, Figtree 48px/1 at 600
- list-xl: Category list row, Figtree 96px/1 at 600
- footer-link: Footer link, Figtree 24px/1.5 at 600
- nav: Nav link, Figtree 18px/1.16 at 600
- footer-head: Footer heading, Figtree 14px/1.42 at 600
- caption: Photo caption (vertical), Figtree 14px/1 at 600
- legal: Legal and copyright, Figtree 12px/1.42 at 600
- Display Regular 400, huge, tight (-0.04em, 0.92 leading)
- Body and CTAs SemiBold 600
- Sentence case

## Layout

- margin 120px, margin-phone 33px, gutter 0px, gutter-phone 0px, section 84px, section-phone 33px, container-max 1200px, columns 12
- Margin 120px desktop, 33px phone
- Section order purple, white, black
- No cards, no boxes, no radius

## Elevation & Depth

- none; flat color blocks and photography

## Shapes

- square: 0 radius on photos, video and panels
- none

## Components

- lead-panel: #FFFFFF fill, #000000 text, corners {rounded.none}.

## Do's and Don'ts

- Don't modify or recolor the logos (trademark guidelines)
- Don't combine the marks into another product name
- Don't ship a Twitch surface without purple
- Don't swap purple for a lavender tint
- Don't set display type bold
- Don't add a second typeface
- Do check: Logo hidden. Cover the wordmark. Purple ground, giant Roobert-style type and an emote should still say Twitch.
- Do check: Swap test. Swap in another streaming brand's logo. If it still fits, the purple, the emotes or the creator credits are missing.
- Do check: Real creators. Every image is a real stream or streamer, credited "/handle".

DESIGN.md194 lines · version alpha

---
version: alpha
name: "U.S. Web Design System"
description: "The design system for the federal government."
colors:
  primary: "#005ea2"
  secondary: "#d83933"
  surface: "#ffffff"
  on-surface: "#1b1b1b"
  base-lightest-gray-5: "#F0F0F0"
  base-dark-gray-cool-60: "#565C65"
  base-gray-cool-50: "#71767A"
  base-lighter-gray-cool-10: "#DFE1E2"
  primary-vivid-blue-warm-60v: "#0050D8"
  primary-dark-blue-warm-70v: "#1A4480"
  primary-darker-blue-warm-80v: "#162E51"
  primary-lighter-blue-10: "#D9E8F6"
typography:
  headline-display:
    fontFamily: "Public Sans"
    fontSize: 36px
    fontWeight: 200
    lineHeight: 1.3
  body-md:
    fontFamily: "Public Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  hero-lead:
    fontFamily: "Public Sans"
    fontSize: 24px
    fontWeight: 200
    lineHeight: 1.4
  h2-xl:
    fontFamily: "Public Sans"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
  h2-footer:
    fontFamily: "Public Sans"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
  site-title:
    fontFamily: "Public Sans"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.2px
  h2-md:
    fontFamily: "Public Sans"
    fontSize: 16.96px
    fontWeight: 700
    lineHeight: 1.5
  link-lg:
    fontFamily: "Public Sans"
    fontSize: 16.96px
    fontWeight: 700
    lineHeight: 1.6
  body-sm:
    fontFamily: "Public Sans"
    fontSize: 15.04px
    fontWeight: 400
    lineHeight: 1.5
  nav:
    fontFamily: "Public Sans"
    fontSize: 15.04px
    fontWeight: 400
    lineHeight: 1
  identifier-link:
    fontFamily: "Public Sans"
    fontSize: 15.04px
    fontWeight: 400
    lineHeight: 1.4
  body-xs:
    fontFamily: "Public Sans"
    fontSize: 14.08px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 4px
spacing:
  margin: 52px
  margin-phone: 16px
  gutter: 32px
  gutter-phone: 16px
  section: 64px
  section-phone: 32px
  card-gap: 32px
  container-max: 1400px
  columns: 4
components:
  button-hero-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 38px
  button-hero-primary:
    backgroundColor: "{colors.primary-vivid-blue-warm-60v}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 38px
---
# U.S. Web Design System design system

## Overview

Generated on 2026-11-03 from the U.S. Web Design System brand study (unfairly.ai/brand-guidelines/uswds/, checked 2026-10-30). An independent study of what U.S. Web Design System publishes and ships, not official U.S. Web Design System guidelines.

The federal government's own design system: a flag-and-banner frame, a regularized token palette led by primary blue #005ea2 and secondary red #d83933, Public Sans in light and bold, flat 4px-radius buttons, and rules written for accessibility first. Trust through sameness. USWDS makes every government site look and behave alike on purpose (official banner on top, identifier at the bottom, token-only color that passes contrast by arithmetic) so a citizen recognizes an official, accessible site before reading a word.

- Logo: Five-point star of five colored triangles (light blue, indigo, orange, peach, charcoal) beside the wordmark "U.S. Web Design System (USWDS)" in Public Sans Bold (from the U.S. Web Design System brand study). Link your approved master files.
- Headline on the site: "The design system for the federal government."
- Category: A government design system: principles, guidance and code (a toolkit), maintained as open source by GSA.
- Audience: Federal digital service teams: content managers, designers and developers, plus the agencies and contractors who build government sites.
- Promise: Accessible, mobile-friendly, compliant sites from the start, improving as the system improves.
- Voice: reliable, consistent, honest, plain.
- Use sentence case for button labels
- Lead button labels with a verb ("File a complaint", not "Complaint filing")
- Keep button text as short as possible, with action words like Download, View, Sign up
- Write in plain language; label headings, images and links accurately

## Colors

- Primary: #005ea2 (from the U.S. Web Design System brand study)
- Secondary: #d83933 (from the U.S. Web Design System brand study)
- Surface: #ffffff (from the U.S. Web Design System brand study)
- On surface: #1b1b1b (from the U.S. Web Design System brand study)
- White (#FFFFFF): Page ground; text on primary, secondary and dark grounds
- Base lightest (gray-5) (#F0F0F0): Default banner ground; homepage hero and showcase bands
- Ink (gray-90) (#1B1B1B): Body text color (base-darkest / ink)
- Base dark (gray-cool-60) (#565C65): Secondary text (our reading)
- Base (gray-cool-50) (#71767A): Neutral mid gray; grade 50 passes AA on white and black
- Base lighter (gray-cool-10) (#DFE1E2): Borders and dividers
- Use USWDS color tokens; avoid custom colors.
- Proportion non-base color about 60% primary, 30% secondary, 10% accents.
- Magic number 40+ = AA large text; 50+ = AA; 70+ = AAA.
- Grade 50 passes AA against both white and black.

## Typography

- Display: Public Sans (from the U.S. Web Design System brand study)
- Body: Public Sans (from the U.S. Web Design System brand study)
- Public Sans, The docs site's face for headings, nav, prose and footer; hero h1 36px weight 200; section heads bold 700. Open: SIL OFL 1.1 (Libre Franklin) with GSA changes dedicated CC0
- Public Sans, Docs site prose 16px / 1.6. Open: SIL OFL 1.1
- Roboto Mono, Code role (default theme). Open: Apache 2.0
- headline-display: Hero H1, Public Sans 36px/1.3 at 200
- body-md: Body (footer paragraph), Public Sans 16px/1.6 at 400
- hero-lead: Hero lead, Public Sans 24px/1.4 at 200
- h2-xl: Section H2 (showcase), Public Sans 28px/1.2 at 700
- h2-footer: Footer H2, Public Sans 20px/1.2 at 700
- site-title: Site title (header), Public Sans 20px/1.2 at 700
- h2-md: Graphic list head, Public Sans 16.96px/1.5 at 700
- link-lg: Showcase caption link, Public Sans 16.96px/1.6 at 700
- body-sm: Graphic list body / link, Public Sans 15.04px/1.5 at 400
- nav: Primary nav link, Public Sans 15.04px/1 at 400
- identifier-link: Required links (identifier), Public Sans 15.04px/1.4 at 400
- body-xs: Community item head / link, Public Sans 14.08px/1.4 at 400
- Body text at least 16px (font-size 5); most running text 16-20px.
- Line length 45-90 characters; target 66 (measure 2).
- Line height 1-1.35 for headings, at least 1.5 for longer text; 1.62 for most reading.

## Layout

- margin 52px, margin-phone 16px, gutter 32px, gutter-phone 16px, section 64px, section-phone 32px, card-gap 32px, container-max 1400px, columns 4
- Use grid-container (max 1024px) and 12 columns.
- Gutters: grid-gap 16px, 32px at desktop; grid-gap-lg 32px.
- Spacing in 8px units (4, 12, 20px half steps).

## Elevation & Depth

- Icons are Material Icons-based filled glyphs in currentColor
- Shadow shadow 1-5: 0 1px 4px, 0 4px 8px, 0 8px 16px, 0 12px 24px, 0 16px 32px, all rgba(0,0,0,0.1)

## Shapes

- Radius tokens 0, sm 2px, md 4px, lg 8px, pill 99rem; components default to md (4px)
- rounded

## Components

- button-hero-secondary: #d83933 fill, #FFFFFF text, corners {rounded.sm}, 38px tall. Introducing USWDS 3.0 (215x38)
- button-hero-primary: #0050d8 fill, #FFFFFF text, corners {rounded.sm}, 38px tall. Migrating to USWDS 3.0 (221x38)

## Do's and Don'ts

- Don't put a product logo in the identifier
- Don't omit logo alt text
- Don't use color as the only signal
- Don't pure black text on white for long reading (guidance suggests avoiding it)
- Don't indent paragraphs
- Don't set long passages in caps, bold or italic
- Do check: Logo hidden. Cover the star. It should still read as USWDS: the flag banner on top, blue and red flat buttons, Public Sans, and the dark identifier at the foot.
- Do check: Contrast by grade. Every text/ground pair differs by 50+ grades (40+ for large text); no meaning carried by color alone.

DESIGN.md228 lines · version alpha

---
version: alpha
name: "Uber"
description: "Uber is a digital platform connecting people with independent drivers and couriers, not a ride or delivery company (paraphrase)."
colors:
  primary: "#ffffff"
  secondary: "#06c167"
  surface: "#ffffff"
  on-surface: "#000000"
  card-grey: "#292929"
  pill-black: "#111111"
  field-grey: "#F6F6F6"
  selector-grey: "#EFEFEF"
  placeholder-grey: "#4A4A4A"
  legal-grey: "#AFAFAF"
  focus-blue: "#276EF1"
typography:
  headline-display:
    fontFamily: "Outfit"
    fontSize: 52px
    fontWeight: 660
    lineHeight: 1.23
  body-md:
    fontFamily: "Public Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  section-headline-h2:
    fontFamily: "Outfit"
    fontSize: 36px
    fontWeight: 660
    lineHeight: 1.22
  qr-card-title:
    fontFamily: "Outfit"
    fontSize: 24px
    fontWeight: 660
    lineHeight: 1.33
  item-title:
    fontFamily: "Public Sans"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.33
  button-label:
    fontFamily: "Public Sans"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
  location-label:
    fontFamily: "Public Sans"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
  explore-card-title:
    fontFamily: "Public Sans"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
  explore-card-description:
    fontFamily: "Public Sans"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.67
  pill-label:
    fontFamily: "Public Sans"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.14
  footer-link:
    fontFamily: "Public Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  legal:
    fontFamily: "Public Sans"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.67
rounded:
  none: 0px
  sm: 8px
  md: 16px
  full: 9999px
spacing:
  margin: 144px
  margin-phone: 24px
  gutter: 36px
  gutter-phone: 16px
  section: 64px
  section-phone: 40px
  card-gap: 18px
  container-max: 1152px
  columns: 12
components:
  button-primary-on-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    height: 48px
  button-primary-on-light:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    height: 48px
  nav-pill:
    backgroundColor: "{colors.pill-black}"
    textColor: "#FCFCFC"
    rounded: "{rounded.full}"
    height: 36px
  nav-signup:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    height: 36px
  time-pill:
    backgroundColor: "{colors.selector-grey}"
    textColor: "{colors.pill-black}"
    rounded: "{rounded.full}"
    height: 48px
  light-pill:
    backgroundColor: "{colors.field-grey}"
    textColor: "{colors.pill-black}"
    rounded: "{rounded.full}"
    height: 48px
  field:
    backgroundColor: "{colors.field-grey}"
    textColor: "{colors.placeholder-grey}"
    rounded: "{rounded.sm}"
    height: 56px
  details-pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    height: 36px
---
# Uber design system

## Overview

Generated on 2026-11-03 from the Uber brand study (unfairly.ai/brand-guidelines/uber/, checked 2026-10-29). An independent study of what Uber publishes and ships, not official Uber guidelines. Lines marked GAP were not found in the study.

Black and white, nothing else: a black page of dark pills with one white CTA, a custom transit-signage grotesque, and product color that only ever appears inside photos. Uber Eats owns green; Uber owns contrast. Uber makes the interface the brand. A black page, white type and a working request form say more than any color could, so color is left to the products (Eats green) and to real photos of people on the move.

- Logo: Black logo on light grounds, white on dark
- Headline on the site: "On our way"
- Category: Mobility, delivery and travel platform: rides, Uber Eats, Courier, Reserve, Rent, Uber for Business, and since GO-GET 2026 hotels.
- Audience: Riders, eaters, earners (drivers and couriers), businesses: the homepage serves each a band.
- Promise: Go anywhere, get anything: the hero line and the request form are the promise.
- Voice: Plain, Helpful, Brief.
- Uber is never a noun or a verb: say "request a ride", "your Uber ride is here", never "call an Uber" or "Uber to the event"
- Describe Uber as a platform that connects people with independent drivers and couriers
- Approved: Request a ride, Book a ride, Your ride is here, Your driver, Savings with Uber Cash
- Translate the tagline if needed, never the logo

## Colors

- Primary: #ffffff (from the Uber brand study)
- Secondary: #06c167 (from the Uber brand study)
- Surface: #ffffff (from the Uber brand study)
- On surface: #000000 (from the Uber brand study)
- Black (#000000): Published core color (PMS Black 6 C). The homepage ground for every band except Eats and Uber One, and the fill of buttons on white.
- White (#FFFFFF): Published core color. Type on black, the one filled CTA on black, the Eats and Uber One grounds, QR cards.
- Uber Eats green (#06C167): Published for Uber Eats only (PMS 7480 C). On uber.com it appears only inside Eats photos and the journey-line gif.
- Card grey (#292929): Explore cards on black (observed).
- Pill black (#111111): Nav pills, footer buttons (observed).
- Field grey (#F6F6F6): Form fields and light pills (observed).
- Uber work: black and white only
- Eats green only on Eats assets, as a ground for the logo or badge
- Greys are for UI surfaces, not for brand moments
- Blue only for focus rings

## Typography

- Display: Outfit (from the Uber brand study)
- Body: Public Sans (from the Uber brand study)
- Uber Move, Headlines, the wordmark-style text logo, end-card tagline. Proprietary to Uber (drawn with MCKL for the 2018 identity). The brand portal lists font packages (Global, English and Monospace collections); not an 
- Uber Move Text, Body, labels, buttons, nav pills. Proprietary (Uber)
- headline-display: Hero headline (h1), Outfit 52px/1.23 at 660
- body-md: Body, Public Sans 16px/1.5 at 400
- section-headline-h2: Section headline (h2), Outfit 36px/1.22 at 660
- qr-card-title: QR card title, Outfit 24px/1.33 at 660
- item-title: Item title, Public Sans 18px/1.33 at 600
- button-label: Button label, Public Sans 16px/1.25 at 600
- location-label: Location label, Public Sans 16px/1.25 at 600
- explore-card-title: Explore card title, Public Sans 16px/1.25 at 600
- explore-card-description: Explore card description, Public Sans 12px/1.67 at 400
- pill-label: Pill label, Public Sans 14px/1.14 at 600
- footer-link: Footer link, Public Sans 14px/1.43 at 400
- legal: Legal, Public Sans 12px/1.67 at 400
- Headlines bold, sentence case, normal tracking
- Body 16/24 regular; labels 14 and 18 medium
- End-card tagline at one third the logo size, medium weight

## Layout

- margin 144px, margin-phone 24px, gutter 36px, gutter-phone 16px, section 64px, section-phone 40px, card-gap 18px, container-max 1152px, columns 12
- Text column max 459px
- Gutters 36px; explore cards 18px
- Bands 64px padding desktop, 40px phone

## Elevation & Depth

- GAP: shadows, borders and layering.

## Shapes

- rounded (8px buttons, pill nav and selectors)

## Components

- button-primary-on-dark: #FFFFFF fill, #000000 text, corners {rounded.sm}, 48px tall. See prices, Learn more: the one filled CTA on black bands
- button-primary-on-light: #000000 fill, #FFFFFF text, corners {rounded.sm}, 48px tall. Search restaurants, Stock up now, Sign up now on white bands
- nav-pill: #111111 fill, #FCFCFC text, corners {rounded.full}, 36px tall. Every nav link (Ride, Earn, Travel, Business, Uber Eats, About), EN, Help, Log in. Pills sit 4px apart
- nav-signup: #FFFFFF fill, #000000 text, corners {rounded.full}, 36px tall. Sign up, the only white pill in the nav
- time-pill: #EFEFEF fill, #111111 text, corners {rounded.full}, 48px tall. "Pickup now" with a clock icon left and chevron right, 174x48
- light-pill: #F6F6F6 fill, #111111 text, corners {rounded.full}, 48px tall. "Schedule ahead" inside the hero glass bar; the city selector (14px, pin icon + chevron, 162x48)
- field: #F6F6F6 fill, #4A4A4A text, corners {rounded.sm}, 56px tall. Pickup location / Dropoff location: 396x56 at 1440 (342x56 on phones), 16px apart. Icons from assets: pickup-dot.svg (a black ring with a white center, 16px) an
- details-pill: #FFFFFF fill, #000000 text, corners {rounded.full}, 36px tall. "Details" pill bottom-left of each Explore card

## Do's and Don'ts

- Don't uber in a color
- Don't uber leading a partner lockup
- Don't light or thin headline weights
- Don't all caps headlines
- Don't call an Uber
- Don't book an Uber
- Do check: Logo hidden. Cover the wordmark. It should still read as Uber: a black page, dark pills, one white button, bold sentence-case type and candid photos.
- Do check: Swap test. Put another company's name on it. If nothing but the name changed, the pill controls, black-white bands and product-colored photos are missing.

DESIGN.md222 lines · version alpha

---
version: alpha
name: "Vercel"
description: "Vercel is agentic infrastructure for every app and agent."
colors:
  primary: "#171717"
  secondary: "#0072f5"
  surface: "#ffffff"
  on-surface: "#171717"
  background-2: "#FAFAFA"
  gray-900: "#4D4D4D"
  gray-400: "#EBEBEB"
  gray-700: "#8F8F8F"
  red-700: "#E5484D"
  amber-700: "#FFB224"
  green-700: "#45A557"
  black: "#000000"
typography:
  headline-display:
    fontFamily: "Geist"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -3.84px
  body-md:
    fontFamily: "Geist"
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.5
    letterSpacing: -0.32px
  display-l:
    fontFamily: "Geist"
    fontSize: 56px
    fontWeight: 450
    lineHeight: 1
    letterSpacing: -3.36px
  lead:
    fontFamily: "Geist"
    fontSize: 24px
    fontWeight: 450
    lineHeight: 1.333
    letterSpacing: -0.96px
  title-m:
    fontFamily: "Geist"
    fontSize: 24px
    fontWeight: 450
    lineHeight: 1.1
    letterSpacing: -1.2px
  button-16:
    fontFamily: "Geist"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
  body-s:
    fontFamily: "Geist"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.429
  copy-13:
    fontFamily: "Geist"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.385
  label-11:
    fontFamily: "Geist"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.818
  mono-16:
    fontFamily: "Geist Mono"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  mono-12:
    fontFamily: "Geist Mono"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.667
rounded:
  sm: 6px
  md: 20px
  full: 9999px
spacing:
  margin: 24px
  margin-phone: 24px
  gutter: 20px
  gutter-phone: 20px
  section: 208px
  section-phone: 80px
  card-gap: 20px
  container-max: 1392px
  columns: 2
components:
  button-primary-pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 40px
  button-secondary-pill:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 40px
  nav-button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 32px
  nav-button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    height: 32px
  badge:
    backgroundColor: "{colors.gray-400}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 20px
  chat-bubble:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
  onboard-chip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 40px
---
# Vercel design system

## Overview

Generated on 2026-11-03 from the Vercel brand study (unfairly.ai/brand-guidelines/vercel/, checked 2026-10-31). An independent study of what Vercel publishes and ships, not official Vercel guidelines.

A black triangle on a near-white page, one open typeface with tight negative tracking, grays for everything and color only as a signal; voice and motion written as engineering rules. Infrastructure you can see through. Vercel strips the page to gray, one face and one shape so the customer’s product and the number beside it are the only things that stand out.

- Logo: Logotype: the Vercel triangle plus the Vercel wordmark, black (#000000) on light or white on dark (from the Vercel brand study). Link your approved master files.
- Headline on the site: "Agentic Infrastructure"
- Category: Agentic infrastructure (homepage, 2026); previously the Frontend Cloud
- Audience: Developers, platform and design engineers, and the coding agents that work for them; from startups to enterprises (paraphrase of navigation: Platform Engineers, Design Engineers, Enterprise).
- Promise: Deploy instantly and scale from zero to millions, whether you or your agents wrote the code (paraphrase).
- Voice: Precise, Concise, Confident, Developer-native.
- Headings and buttons in the product use Title Case (Chicago); the homepage nav buttons follow it (Get a Demo, Log In, Sign Up)
- Active voice: "Install the CLI", not "The CLI will be installed"
- Write in second person; avoid first person
- Use numerals for counts: "8 deployments", not "eight deployments"

## Colors

- Primary: #171717 (from the Vercel brand study)
- Secondary: #0072f5 (from the Vercel brand study)
- Surface: #ffffff (from the Vercel brand study)
- On surface: #171717 (from the Vercel brand study)
- Background 2 (#FAFAFA): The homepage ground and every band; scrolled nav.
- Background 1 (#FFFFFF): Default element background: secondary buttons, bubbles, inputs.
- Gray 1000 (#171717): Primary text and icons; primary buttons; customer logos.
- Gray 900 (#4D4D4D): Secondary text: nav links, the gray half of leads, footer links.
- Gray 400 (#EBEBEB): Default border, drawn as a 1px ring.
- Gray 700 (#8F8F8F): Tertiary icons and high-contrast fills.
- Use Background 1 by default, especially under color; Background 2 sparingly for subtle differentiation
- Colors 1-3: component default, hover, active backgrounds
- Colors 4-6: default, hover, active borders; solid gray by default, gray-alpha only where the edge must blend
- Colors 7-8: high-contrast backgrounds

## Typography

- Display: Geist (from the Vercel brand study)
- Body: Geist (from the Vercel brand study)
- Geist Sans, Everything: hero 64px 400, section heads 56px 450, leads 24px 450, UI 14-16px. Open (SIL OFL 1.1). Vercel in collaboration with basement.studio; npm geist 1.9.0, Google Fonts, or .zip
- Geist Sans, Copy and labels 13-16px at 400-500. Open (SIL OFL 1.1)
- Geist Mono, Code, status labels, the phone hero subline, tabular numbers. Open (SIL OFL 1.1)
- headline-display: Hero H1, Geist 64px/1 at 400
- body-md: Hero pillar lines, Geist 16px/1.5 at 450
- display-l: Section H2, Geist 56px/1 at 450
- lead: Proof sentence (two-tone lead), Geist 24px/1.333 at 450
- title-m: Card title, Geist 24px/1.1 at 450
- button-16: Button (pill), Geist 16px/1.5 at 500
- body-s: Nav link / list / footer link / card copy, Geist 14px/1.429 at 400
- copy-13: Chat bubble, Geist 13px/1.385 at 400
- label-11: Badge, Geist 11px/1.818 at 500
- mono-16: Phone hero subline, Geist Mono 16px/1.5 at 400
- mono-12: Status label, Geist Mono 12px/1.667 at 500
- Use the preset classes: size, line height, tracking and weight together
- Product heading classes: 72-56 line height equals size, tracking -6% (-4.32px at 72); 48: 48/56; 40: -2.4px; 32: -1.28px. The homepage phone H2 is 32/40 at -1.6px (observed): use the page values for a landing page
- Copy styles for multi-line text (Copy 14 is the most common); Label styles for single lines

## Layout

- margin 24px, margin-phone 24px, gutter 20px, gutter-phone 20px, section 208px, section-phone 80px, card-gap 20px, container-max 1392px, columns 2
- 24px page margin at every width
- One ground for the whole page; sections separated by space, not color
- Alternate media left and right

## Elevation & Depth

- 1px hairlines drawn as box-shadow rings in Gray 400 #EBEBEB; Geist Grid guides on marketing pages

## Shapes

- 6px on cards and nav buttons (Material Base/Small), 12px menus and modals, 16px fullscreen; 9999px on marketing CTAs
- pill

## Components

- button-primary-pill: #171717 fill, #FFFFFF text, corners {rounded.full}, 40px tall. Deploy now (124x40)
- button-secondary-pill: #FFFFFF fill, #171717 text, corners {rounded.full}, 40px tall. Talk to sales (130x40)
- nav-button-primary: #171717 fill, #FFFFFF text, corners {rounded.sm}, 32px tall. Sign Up (75x32)
- nav-button-secondary: #FFFFFF fill, #171717 text, corners {rounded.sm}, 32px tall. Get a Demo (101x32), Log In (64x32)
- badge: #EBEBEB fill, #171717 text, corners {rounded.full}, 20px tall. New
- chat-bubble: #FFFFFF fill, #171717 text, corners {rounded.md}. Agents card
- onboard-chip: #FFFFFF fill, #171717 text, corners {rounded.full}, 40px tall. Onboard your agent (267x40)

## Do's and Don'ts

- Don't modify, recolor or animate the mark into something else
- Don't use Vercel marks in your product, company or domain name
- Don't overlap alpha borders
- Don't use opaque gray shadows (they leave a halo)
- Don't letter-space body copy
- Don't mix in a second sans
- Do check: Logo hidden. Cover the triangle. It should still read as Vercel: #FAFAFA ground, tight Geist headlines, gray two-tone sentences, hairline pills, real product UI.
- Do check: Swap test. Put another cloud vendor’s logo on it. If the grayscale restraint and one-number proof feel generic, add the lit triangle hero and the fading customer screens.

DESIGN.md206 lines · version alpha

---
version: alpha
name: "Wikimedia"
description: "For everyone who reads, writes or relies on Wikipedia, the Wikimedia Foundation is the nonprofit that keeps it free, reliable and independent, because it is funded by readers and built by volunteers r"
colors:
  primary: "#0c57a8"
  secondary: "#404040"
  surface: "#ffffff"
  on-surface: "#000000"
  black-50: "#7F7F7F"
  black-25: "#BFBFBF"
  green: "#339966"
  blue: "#0063BF"
  red: "#990000"
  green-aaa: "#246342"
  red-aaa-creative-red: "#970302"
  pink: "#E679A6"
typography:
  headline-display:
    fontFamily: "Montserrat"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.333
  body-md:
    fontFamily: "Inter"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
  display-stat:
    fontFamily: "Montserrat"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.333
  display-l:
    fontFamily: "Montserrat"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.25
  display-m:
    fontFamily: "Montserrat"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.4
  lead:
    fontFamily: "Montserrat"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.333
  display-s:
    fontFamily: "Montserrat"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.333
  appeal:
    fontFamily: "Montserrat"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
  button:
    fontFamily: "Inter"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.25
  nav:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
  body:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  link-s:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  none: 0px
  sm: 4px
spacing:
  margin: 120px
  margin-phone: 17px
  gutter: 40px
  gutter-phone: 17px
  section: 80px
  section-phone: 43px
  card-gap: 16px
  container-max: 1200px
  columns: 3
components:
  button-donate:
    backgroundColor: "{colors.green-aaa}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 49px
  button-black:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 49px
  button-primary:
    backgroundColor: "{colors.green-aaa}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 49px
  button-secondary:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 49px
---
# Wikimedia design system

## Overview

Generated on 2026-11-03 from the Wikimedia brand study (unfairly.ai/brand-guidelines/wikimedia/, checked 2026-10-31). An independent study of what Wikimedia publishes and ships, not official Wikimedia guidelines.

The Wikimedia brand is built for a movement, not a company: free fonts, one-colour logos and shared palettes that any volunteer group can use, with plain, neutral copy that translates into hundreds of languages. The Foundation's own site applies it as black and white type with flat blocks of movement colour, one highlighted word, hand-drawn illustrations and a credit for every image. Knowledge looks open. Everything a volunteer needs is free (Montserrat, Source Serif, the palettes, the templates), colour comes in flat blocks anyone can reproduce, and even the image credits are part of the page.

- Logo: Horizontal Foundation logo: the brandmark (figure holding an open book) with WIKIMEDIA / FOUNDATION in Montserrat; black on light, white on dark (from the Wikimedia brand study). Link your approved master files.
- Headline on the site: "We support human knowledge"
- Category: Nonprofit that hosts Wikipedia and the Wikimedia projects
- Audience: Readers and donors, volunteer editors, partners and policymakers
- Promise: Reliable information shared with the world, free of ads and paywalls
- Voice: Neutral, Clear, Warm, Trustworthy, Joyful.
- Plain English: short, easy-to-understand words and simple phrases; it also helps translation
- No idioms, slang, jokes, metaphors or pop-culture references (copy must translate)
- Verbs for actions (bare infinitive: Upload, Publish, Share, Donate), nouns for places
- Avoid directional words like below or above; not everyone sees the layout

## Colors

- Primary: #0c57a8 (from the Wikimedia brand study)
- Secondary: #404040 (from the Wikimedia brand study)
- Surface: #ffffff (from the Wikimedia brand study)
- On surface: #000000 (from the Wikimedia brand study)
- White (#FFFFFF): Page ground, white card on the birthday band, text on every colour block (observed https://wikimediafoundation.org/ (2026-10-31))
- Black (#000000): Headlines and body text, Subscribe button fill, map markers (observed https://wikimediafoundation.org/ (2026-10-31))
- Black 75 (#404040): Footer ground (theme preset black-75) (observed https://wikimediafoundation.org/ (2026-10-31))
- Black 50 (#7F7F7F): Disabled carousel-arrow glyph colour (black-50 preset) (observed https://wikimediafoundation.org/ (2026-10-31))
- Black 25 (#BFBFBF): Disabled carousel-arrow fill and ring; input borders (border-base preset) (observed https://wikimediafoundation.org/ (2026-10-31))
- Green (#339966):
- Limit a brand to 4-6 colours: primary, secondary, tertiary, accent
- Black text on most colours
- White text only on red, blue, green, dark green and purple (strong)
- Light tints take black text only and never go in logos

## Typography

- Display: Montserrat (from the Wikimedia brand study)
- Body: Inter (from the Wikimedia brand study)
- Montserrat, Logo wordmark, headlines, stat numbers, post titles. SIL Open Font License 1.1 (Google Fonts)
- Inter, Site body, nav, buttons, meta (observed). The guide names Source Serif 4 for extended body copy. SIL Open Font License 1.1 (Google Fonts)
- Source Serif 4, Long-form body copy in print and documents (not used on the website). SIL Open Font License 1.1 (Google Fonts)
- headline-display: Hero and campaign H2, Montserrat 48px/1.333 at 700
- body-md: Body large (section intros, stats, card copy), Inter 20px/1.4 at 400
- display-stat: Stat number, Montserrat 48px/1.333 at 600
- display-l: Section H2, action-card label, Montserrat 32px/1.25 at 700
- display-m: Post title, Montserrat 24px/1.4 at 600
- lead: Hero lead, Montserrat 24px/1.333 at 400
- display-s: Photo credits heading, Montserrat 24px/1.333 at 600
- appeal: Donation appeal, Montserrat 20px/1.4 at 700
- button: Button, Inter 20px/1.25 at 700
- nav: Nav and footer links, Inter 16px/1.5 at 600
- body: Body (volunteer bio, footer text), Inter 16px/1.5 at 400
- link-s: Credit link, Inter 16px/1.4 at 400
- Montserrat Bold for headlines, set big
- Mainly Regular and Bold weights
- Subheadline at about 50% of the headline size in Montserrat Regular (colour usage examples)

## Layout

- margin 120px, margin-phone 17px, gutter 40px, gutter-phone 17px, section 80px, section-phone 43px, card-gap 16px, container-max 1200px, columns 3
- 1200px container; 80px section padding (43px phone)
- Heading left, intro paragraph right (from x 533)
- Radius 4px on everything rectangular

## Elevation & Depth

- Hairlines 1px #E5E5E5 on white; hand-drawn uniform strokes in illustrations

## Shapes

- 4px on buttons, cards, images and inputs; 0 on chips and full-bleed bands; circles for icon buttons
- rounded

## Components

- button-donate: #246342 fill, #FFFFFF text, corners {rounded.sm}, 49px tall. Donate now (nav, 150x49)
- button-black: #000000 fill, #FFFFFF text, corners {rounded.sm}, 49px tall. Subscribe (134x49)
- button-primary: #246342 fill, #FFFFFF text, corners {rounded.sm}, 49px tall. Donate now (nav, 150x49)
- button-secondary: #000000 fill, #FFFFFF text, corners {rounded.sm}, 49px tall. Subscribe (134x49)

## Do's and Don'ts

- Don't set the wordmark in another font (e.g. a script)
- Don't put the mark after the wordmark
- Don't set grey or coloured text on colour blocks
- Don't combine strong and light Creative colours in text (too little contrast)
- Don't mix in other display faces
- Don't use thin or black weights for body copy
- Do check: Contrast. White text only on strong red, blue, green, dark green or purple; black on everything else
- Do check: Logo. Black or white, Montserrat wordmark, clear space 1x small circle, 36 px minimum
- Do check: Credits. Every image credited with title, author, source and licence

DESIGN.md210 lines · version alpha

---
version: alpha
name: "Wise"
description: "A global money account and transfer service that is faster, cheaper and more transparent than banks"
colors:
  primary: "#9fe870"
  secondary: "#163300"
  surface: "#ffffff"
  on-surface: "#0e0f0c"
  bright-orange: "#FFC091"
  bright-yellow: "#FFEB69"
  bright-blue: "#A0E1E1"
  bright-pink: "#FFD7EF"
  dark-purple: "#260A2F"
  dark-gold: "#3A341C"
  dark-charcoal: "#21231D"
  dark-maroon: "#320707"
typography:
  headline-display:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 79.9px
    fontWeight: 800
    lineHeight: 0.942
    letterSpacing: -7.59px
  body-md:
    fontFamily: "Inter"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.1px
  display-l:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 52.4px
    fontWeight: 800
    lineHeight: 0.941
    letterSpacing: -4.98px
  amount:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 47px
    fontWeight: 800
    lineHeight: 1.66
    letterSpacing: -5.83px
  amount-s:
    fontFamily: "Plus Jakarta Sans"
    fontSize: 36.1px
    fontWeight: 800
    lineHeight: 0.942
    letterSpacing: -3.61px
  h2-inter:
    fontFamily: "Inter"
    fontSize: 44.75px
    fontWeight: 600
    lineHeight: 1.27
    letterSpacing: -1.34px
  hero-sub:
    fontFamily: "Inter"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.1px
  card-title:
    fontFamily: "Inter"
    fontSize: 24.5px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.37px
  item-title:
    fontFamily: "Inter"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.1px
  body-l:
    fontFamily: "Inter"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.44
    letterSpacing: 0.18px
  body:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.08px
  label:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.18px
rounded:
  sm: 16px
  md: 28px
  lg: 38px
  full: 9999px
spacing:
  margin: 100px
  margin-phone: 16px
  gutter: 32px
  gutter-phone: 12px
  section: 56px
  section-phone: 48px
  card-gap: 28px
  container-max: 1240px
  columns: 12
components:
  button-primary-forest:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 48px
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.secondary}"
    rounded: "{rounded.full}"
    height: 48px
  button-nav-signup:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    height: 32px
---
# Wise design system

## Overview

Generated on 2026-11-03 from the Wise brand study (unfairly.ai/brand-guidelines/wise/, checked 2026-10-29). An independent study of what Wise publishes and ships, not official Wise guidelines.

Wise's brand: Bright Green and Forest Green with white and an 8% Forest neutral, Inter for everything plus the proprietary Wise Sans for capital-letter shouts, circular flags, pill controls and photographic tapestries. The guide (wise.design, archived) gives colour, product colour tokens, typography rules, logo, icons, flags, photography, tone of voice, motion principles, grid, spacing and radius tokens. This book adds the measured anatomy of the wise.com homepage (US, 2026-10-29) and a calibrated open stand-in for Wise Sans. Wise looks like its product: one loud green field and one loud typeface up top, then calm white and green-tinted panels where every number is plain and every control is

- Logo: Clear space: one Fast Flag in all directions
- Headline on the site: "Money without borders"
- Category: International money transfer and multi-currency accounts
- Audience: People and businesses living international lives
- Promise: The fast way to send money abroad
- Voice: intrepid, universally authentic, delightfully simple, concise, energetic.
- No west-centred supremacy on GBP, USD and euros (published)
- Inter is never set in all caps (published)
- No stiff sales jargon on landing pages (published)

## Colors

- Primary: #9fe870 (from the Wise brand study)
- Secondary: #163300 (from the Wise brand study)
- Surface: #ffffff (from the Wise brand study)
- On surface: #0e0f0c (from the Wise brand study)
- Bright Green (#9FE870): primary brand colour; hero and nav ground, accent buttons (Interactive Accent), chips, Wise bar in the comparison; RGB 159/232/112, CMYK 47/0/72/0, PANTONE 7487
- Forest Green (#163300): primary brand colour; headline and link colour on green (Content Link, Interactive Primary/Control), primary CTA fill, testimonial card ground; RGB 22/51/0, CMYK 54/0/100/80, P
- Bright Orange (#FFC091): secondary palette, marketing only once green is established; PANTONE 163
- Bright Yellow (#FFEB69): secondary palette; PANTONE 113
- Bright Blue (#A0E1E1): secondary palette; PANTONE 310
- Bright Pink (#FFD7EF): secondary palette; PANTONE 671
- Always start and end with green
- Introduce secondary colours only once green is established, dialling them up further into a piece
- White is the most prominent UI colour; then the neutral; then content greys; then a little Forest for interactivity and a pop of Bright Green (published proportion order, no percentages)
- Body text Content Secondary #454745; emphasis Content Primary #0E0F0C; links Forest #163300

## Typography

- Display: Plus Jakarta Sans (from the Wise brand study)
- Body: Inter (from the Wise brand study)
- Wise Sans (proprietary). Proprietary to Wise; not available. Stand-in Plus Jakarta Sans 800 (OFL), 0.9032x size, letter-spacing -0.095em, word-spacing 0.13em, -webkit-text-stroke 0.03em currentColor (amounts 0.045em)
- Inter. SIL OFL (Google Fonts)
- headline-display: Hero H1, "Excellent everywhere", "Take Wise everywhere you go". Stand-in px shown. Recipe: Plus Jakarta Sans 800, uppercase, letter-spacing -0.095em, word-spacing 0.13em, -webkit-text-stroke 0.03em currentColor, Plus Jakarta Sans 79.9px/0.942 at 800
- body-md: Lead paragraph under section H2s, Inter 20px/1.4 at 400
- display-l: Section H2 (100% transparent pricing, Make your money do more, Safe at every step, Built for business too). Stand-in px shown; Plus Jakarta Sans 800, uppercase, letter-spacing -0.095em, word-spacing 0.13em, -webkit-text-stroke 0.03em currentColor, #0E0F0C, Plus Jakarta
- amount: Calculator amounts. Stand-in px shown: desktop both rows 47px; phone "You send" 30.7px, "Recipient gets" 47px (not 30.7). Plus Jakarta Sans 800, stroke 0.045em currentColor, letter-spacing per number, Plus Jakarta Sans 47px/1.66 at 800
- amount-s: Wise amount in the comparison bar; 3.4% APY tile. Stand-in px shown; Plus Jakarta Sans 800, letter-spacing -0.10em, stroke 0.045em currentColor, Plus Jakarta Sans 36.1px/0.942 at 800
- h2-inter: Coverage H2 "Wise works nearly everywhere" (sentence case, Inter), Inter 44.75px/1.27 at 600
- hero-sub: Hero subtitle, Inter 20px/1.4 at 600
- card-title: Product card title, Inter 24.5px/1.3 at 600
- item-title: Benefit, security-row and quote titles, Inter 20px/1.4 at 600
- body-l: Card body, security body, footer links, Inter 18px/1.44 at 400
- body: Benefit body, disclaimer text, legal lines, Inter 16px/1.5 at 400
- label: Buttons, nav links, chips, link-buttons, Inter 16px/1.5 at 600
- Default to Inter; use Wise Sans only for short headlines that celebrate or shout
- Inter: left- or centre-align (right-align for RTL); never justify; 50-60 characters per line
- Never set Inter in all caps, even for headlines

## Layout

- margin 100px, margin-phone 16px, gutter 32px, gutter-phone 12px, section 56px, section-phone 48px, card-gap 28px, container-max 1240px, columns 12
- Content max 1240 inside 100px margins at 1440; 16px margins at 390
- Section padding 56 desktop / 48 phone
- Centre the H2, lead and single CTA of a section; split sections put the photo left and the text right, vertically centred

## Elevation & Depth

- Tapestries (photographic collages) are the brand's texture; used as full-bleed grounds behind white cards
- Hairlines are Content Primary at 12%: 1px solid rgba(14,15,12,0.12) (never solid #0E0F0C); no rules thicker than 1px
- Shadow Almost none: only the comparison card carries 0 6px 20px rgba(0,0,0,0.08); everything else is flat

## Shapes

- Round everywhere: pills on every control; marketing radius tokens 16/20/30/40/60 desktop and 10/16/24/32/48 mobile (published); measured on the homepage as 28 (cards), 38 (big panels), 19 (tiles), 10 (info bar) desktop and 24/32/16 phone

## Components

- button-primary-forest: #163300 fill, #9FE870 text, corners {rounded.full}, 48px tall.
- button-accent: #9FE870 fill, #163300 text, corners {rounded.full}, 48px tall.
- button-nav-signup: #163300 fill, #9FE870 text, corners {rounded.full}, 32px tall.

## Do's and Don'ts

- Don't change the lock-up or adjust the logo
- Don't place it on an angle
- Don't use Forest #163300 for headings on white or neutral grounds (#0E0F0C there)
- Don't use Content Tertiary #6A6C6A outside placeholders and Optional labels
- Don't set Inter in capitals
- Don't use glyphs on every letter

DESIGN.md200 lines · version alpha

---
version: alpha
name: "WordPress"
description: "The open source publishing platform of choice for millions of websites, from creators and small businesses to enterprises."
colors:
  primary: "#3858e9"
  secondary: "#213fd4"
  surface: "#ffffff"
  on-surface: "#1e1e1e"
  charcoal-2: "#23282D"
  light-grey-2: "#F6F6F6"
  charcoal-4: "#656A71"
  charcoal-5: "#979AA1"
  light-grey: "#D9D9D9"
  base-gray-classic: "#32373C"
  wordpress-blue-classic: "#0073AA"
  pomegranate: "#E26F56"
typography:
  headline-display:
    fontFamily: "EB Garamond"
    fontSize: 70px
    fontWeight: 400
    lineHeight: 1.05
  body-md:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.625
  display-l:
    fontFamily: "EB Garamond"
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.2
  display-m:
    fontFamily: "EB Garamond"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.28
  cta-xl:
    fontFamily: "Inter"
    fontSize: 120px
    fontWeight: 300
    lineHeight: 1
    letterSpacing: -2px
  title-s:
    fontFamily: "Inter"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.88
  title-post:
    fontFamily: "Inter"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.3
  body-link:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.875
  button:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.3
  nav:
    fontFamily: "Inter"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.71
  meta:
    fontFamily: "Inter"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.875
  footer:
    fontFamily: "Inter"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.9
rounded:
  none: 0px
  sm: 2px
spacing:
  margin: 140px
  margin-phone: 20px
  gutter: 40px
  gutter-phone: 20px
  section: 80px
  section-phone: 80px
  card-gap: 40px
  container-max: 1160px
  columns: 3
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 51px
  button-header:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    height: 36px
  form-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
---
# WordPress design system

## Overview

Generated on 2026-11-03 from the WordPress brand study (unfairly.ai/brand-guidelines/wordpress/, checked 2026-10-30). An independent study of what WordPress publishes and ships, not official WordPress guidelines.

A calm, editorial system: EB Garamond headings and Inter text on white, light grey and charcoal, with one vibrant Blueberry blue for every link and button and a single hand-made brush stroke for warmth. The logo is ruled by one unit (the W), and the trademark policy is as much a part of the brand as the palette. Jazz on a quiet page. WordPress.org keeps type, color and layout strict and nearly monochrome, then allows one improvised gesture (a Blueberry brush stroke, a pencil arrow, a 120px Light CTA) so an open source project feels human, not corporate.

- Logo: WordPress logotype, standard: the W mark (W in a double ring) beside the WordPress wordmark in Mrs Eaves small caps; Base Gray or white (from the WordPress brand study). Link your approved master files.
- Headline on the site: "Democratize publishing"
- Category: Open source publishing platform; blog tool, publishing platform and CMS (page title)
- Audience: Creators, small businesses and enterprises; entrepreneurs, professional developers and first-time bloggers (paraphrase).
- Promise: Design, build and extend any site yourself, with a whole community behind you (paraphrase).
- Voice: Welcoming, Plain, Open, Quietly jazzy.
- Always a capital P; core even auto-corrects it
- Others may describe services 'for WordPress' but never name a product, company or domain with WordPress
- Don't use 'WP' in any way that suggests an official WordPress product
- The trademark may not be used in advertising (AdSense/AdWords included)

## Colors

- Primary: #3858e9 (from the WordPress brand study)
- Secondary: #213fd4 (from the WordPress brand study)
- Surface: #ffffff (from the WordPress brand study)
- On surface: #1e1e1e (from the WordPress brand study)
- Blueberry (#3858E9): The brand blue on WordPress.org: links, every primary button, focus rings, the hero brush stroke. Published as a theme token.
- Deep Blueberry (#213FD4): Button hover fill.
- Charcoal (#1E1E1E): Default text; the dark showcase band; button active fill.
- Charcoal 2 (#23282D): Closing 'Get started' band and global footer; the classic Dark Gray kept.
- White (#FFFFFF): Default page ground; text on Blueberry and Charcoal.
- Light Grey 2 (#F6F6F6): Alternating light section ground; search field fill.
- Text Charcoal #1E1E1E on White #FFFFFF by default
- Links and primary buttons Blueberry #3858E9; hover Deep Blueberry #213FD4; active Charcoal
- Alternate sections between White and Light Grey 2 #F6F6F6; go dark with Charcoal #1E1E1E or Charcoal 2 #23282D
- On dark grounds, text is white

## Typography

- Display: EB Garamond (from the WordPress brand study)
- Body: Inter (from the WordPress brand study)
- EB Garamond, All headings H1-H6, Regular 400 only. Open (SIL OFL 1.1)
- Inter, Paragraphs, UI, buttons (Semi Bold), subtitles (uppercase), the 120px Light CTA. Open (SIL OFL 1.1)
- IBM Plex Mono, Code (theme monospace token); the About page uses Courier Prime instead. Open (SIL OFL 1.1)
- headline-display: Hero H1 'Meet WordPress', EB Garamond 70px/1.05 at 400
- body-md: Body short text (ledes, card copy), Inter 16px/1.625 at 400
- display-l: Dark-band H2 (showcase), EB Garamond 50px/1.2 at 400
- display-m: Section H2 (release, community, news, merch), EB Garamond 36px/1.28 at 400
- cta-xl: Closing CTA 'Get started', Inter 120px/1 at 300
- title-s: Card and sub-section title (Design, Build, Extend; Build for yourself), Inter 18px/1.88 at 700
- title-post: News post title, Inter 18px/1.3 at 600
- body-link: Link paragraph (stacked text links), Inter 16px/1.875 at 400
- button: Button label, Inter 16px/1.3 at 600
- nav: Nav link / header button, Inter 14px/1.71 at 400
- meta: News meta (category caps + date), Inter 14px/1.875 at 400
- footer: Footer link, Inter 14px/1.9 at 400
- Headings: EB Garamond Regular 400 only, H1 70/74, H2 50/60, H3 36/46, H4 30/40, H5 26/34, H6 22/28, 0 tracking
- Text: Inter Regular 16/26 for short text, 16/30 for long text such as blog posts
- Inter steps: 12/20, 14/24, 20/34, 24/38, 32/48

## Layout

- margin 140px, margin-phone 20px, gutter 40px, gutter-phone 20px, section 80px, section-phone 80px, card-gap 40px, container-max 1160px, columns 3
- Content 680px; wide 1160px
- Edge spacing 80px desktop
- Spacing steps 10, 20, 30px, then fluid clamp() steps up to 160px

## Elevation & Depth

- Hand-made marks: a dry-brush paint stroke (16px tall as a rule element; large in the homepage hero) and pencil-style arrows and circles on About

## Shapes

- Near-square: 2px on buttons and form fields; cards and media are square-cornered
- rounded

## Components

- button-primary: #3858E9 fill, #FFFFFF text, corners {rounded.sm}, 51px tall. Explore WordPress 7.1 (235x51), Explore the Showcase (237x51)
- button-header: #3858E9 fill, #FFFFFF text, corners {rounded.sm}, 36px tall. Get WordPress (141x36 at x 1279, y 17)
- form-field: #FFFFFF fill, #1E1E1E text, corners {rounded.sm}.

## Do's and Don'ts

- Don't redraw the W short and squat: its serifs must stay tall and graceful (the 'fauxgo')
- Don't set Mrs Eaves or Dalliance anywhere but the logotype
- Don't introduce blues outside the Blueberry ramp on WordPress.org
- Don't use the classic WordPress Blue #0073AA as the WordPress.org accent
- Don't use Mrs Eaves or Dalliance outside the logotype
- Don't bold the Garamond headings
- Do check: Capital P. Every 'WordPress' has a capital P.
- Do check: Logotype faces. No Mrs Eaves or Dalliance outside the logo.
- Do check: One blue. Links and primary buttons are Blueberry #3858E9; no other blue on WordPress.org pages.

DESIGN.md190 lines · version alpha

---
version: alpha
name: "Zendesk"
description: "The AI-first service platform that resolves customer and employee issues faster, with AI agents that improve with every resolution."
colors:
  primary: "#d1f470"
  secondary: "#203524"
  surface: "#ffffff"
  on-surface: "#11110d"
  shamrock: "#2D4C33"
  cactus: "#A1D78F"
  pineapple: "#FEEB7E"
  sesame: "#F5F5F2"
typography:
  headline-display:
    fontFamily: "Figtree"
    fontSize: 72px
    fontWeight: 560
    lineHeight: 1
  body-md:
    fontFamily: "Figtree"
    fontSize: 16px
    fontWeight: 460
    lineHeight: 1.45
  display-xl:
    fontFamily: "Figtree"
    fontSize: 68px
    fontWeight: 560
    lineHeight: 1.05
  display-l:
    fontFamily: "Figtree"
    fontSize: 42px
    fontWeight: 560
    lineHeight: 1.15
  title-m:
    fontFamily: "Figtree"
    fontSize: 26px
    fontWeight: 560
    lineHeight: 1.25
  contact:
    fontFamily: "Figtree"
    fontSize: 42px
    fontWeight: 560
    lineHeight: 1.15
  body-strong:
    fontFamily: "Figtree"
    fontSize: 16px
    fontWeight: 640
    lineHeight: 1.45
  button:
    fontFamily: "Figtree"
    fontSize: 18px
    fontWeight: 640
    lineHeight: 1.556
  nav:
    fontFamily: "Figtree"
    fontSize: 16px
    fontWeight: 640
    lineHeight: 1.44
  eyebrow:
    fontFamily: "Figtree"
    fontSize: 14px
    fontWeight: 780
    lineHeight: 1.3
    letterSpacing: 0.5px
  small:
    fontFamily: "Figtree"
    fontSize: 14px
    fontWeight: 460
    lineHeight: 1.5
  countdown:
    fontFamily: "Figtree"
    fontSize: 32px
    fontWeight: 300
    lineHeight: 1
rounded:
  sm: 4px
  md: 12px
  lg: 16px
  xl: 40px
spacing:
  margin: 169px
  margin-phone: 16px
  gutter: 24px
  gutter-phone: 16px
  section: 88px
  section-phone: 48px
  card-gap: 24px
  container-max: 1102px
  columns: 12
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    height: 48px
  chip:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
---
# Zendesk design system

## Overview

Generated on 2026-11-03 from the Zendesk brand study (unfairly.ai/brand-guidelines/zendesk/, checked 2026-10-31). An independent study of what Zendesk publishes and ships, not official Zendesk guidelines.

Zendesk's 2025 identity is black and white with one bright Matcha green: Licorice type on Coconut, deep Fern bands, soft 40px containers, and warm photos of people with chat cards floating over them. Every element is meant to move a reader from challenge to resolution. Resolution as a colour. Zendesk keeps almost everything black, white and green-black, and saves one bright Matcha for the moment of action, so the eye always lands on the button that resolves something.

- Logo: Primary logo: the Z symbol stacked over the lowercase "zendesk" wordmark, Licorice on light, white on dark (from the Zendesk brand study). Link your approved master files.
- Headline on the site: "Automate up to 80% of interactions with Zendesk AI agents."
- Category: AI-first customer service platform (hero eyebrow: "AI-powered customer service platform")
- Audience: Service leaders and teams, from startups to enterprises, across customer service, employee service (IT/HR) and contact centers.
- Promise: Faster resolutions, stronger loyalty, better outcomes.
- Voice: Confident, Included, Credible.
- Keep it brief, keep it focused, keep it human
- Write for how the reader should feel: confident, included, credible
- Button labels are verbs and name a single action
- Button labels in sentence case

## Colors

- Primary: #d1f470 (from the Zendesk brand study)
- Secondary: #203524 (from the Zendesk brand study)
- Surface: #ffffff (from the Zendesk brand study)
- On surface: #11110d (from the Zendesk brand study)
- Coconut (#FFFFFF): Core. The brand canvas and primary background on every touchpoint
- Licorice (#11110D): Core. Contrast and legibility: all text on light grounds, dark grounds, the logo colour
- Matcha (#D1F470): Accent. Bright green tribute to the original Zendesk green and a symbol of resolution; use intentionally
- Fern (#203524): Secondary. Deep green shift from black for hierarchy
- Shamrock (#2D4C33): Secondary. Mid green, a step lighter than Fern
- Cactus (#A1D78F): Secondary. Soft green
- Coconut is the default canvas
- Licorice for text and contrast
- Matcha as an intentional accent only
- Secondary colours create hierarchy close to the core palette

## Typography

- Display: Figtree (from the Zendesk brand study)
- Body: Figtree (from the Zendesk brand study)
- Vanilla Sans, Headlines 500, sentence case. Proprietary (Zendesk); not published or downloadable
- Vanilla Sans, Body 400, buttons and nav 600, eyebrows 700. Proprietary (Zendesk)
- headline-display: Stat number (Vanilla Sans 500), Figtree 72px/1 at 560
- body-md: Body (Vanilla Sans 400), Figtree 16px/1.45 at 460
- display-xl: Hero H1 (Vanilla Sans 500), Figtree 68px/1.05 at 560
- display-l: Section H2 (Vanilla Sans 500), Figtree 42px/1.15 at 560
- title-m: Card / band title H3 (Vanilla Sans 500), Figtree 26px/1.25 at 560
- contact: Footer contact line (Vanilla Sans 500), Figtree 42px/1.15 at 560
- body-strong: Strong body: quote, card titles, tab labels (Vanilla Sans 600), Figtree 16px/1.45 at 640
- button: Button label (Vanilla Sans 600), Figtree 18px/1.556 at 640
- nav: Nav link (Vanilla Sans 600), Figtree 16px/1.44 at 640
- eyebrow: Eyebrow (Vanilla Sans 700 uppercase, +0.75px), Figtree 14px/1.3 at 780
- small: Small: announcement, utility links, footer links (Vanilla Sans 400), Figtree 14px/1.5 at 460
- countdown: Countdown digits (Vanilla Sans 300), Figtree 32px/1 at 300
- One family for everything
- Headlines 500 weight, never bold
- Eyebrows 700 uppercase with slight positive tracking

## Layout

- margin 169px, margin-phone 16px, gutter 24px, gutter-phone 16px, section 88px, section-phone 48px, card-gap 24px, container-max 1102px, columns 12
- Centre section headlines over full-width content
- Two-column splits at 539px halves
- One primary + one ghost button per group

## Elevation & Depth

- no shadows on marketing cards; 1px hairlines only

## Shapes

- 40px on content cards, 32px hero, 16px small cards and thumbnails, 12px inputs, 8px countdown tiles, 4px chips
- rounded

## Components

- button-primary: #D1F470 fill, #11110D text, corners {rounded.lg}, 48px tall. Try for free 132x48; Explore the platform 212x48
- chip: #D1F470 fill, #11110D text, corners {rounded.sm}.

## Do's and Don'ts

- Don't resize disproportionately or distort
- Don't rearrange, rotate or alter the elements
- Don't flood a layout with Matcha
- Don't use Matcha text on white
- Don't use tight negative tracking
- Don't set headlines in bold
- Do check: Logo hidden. Cover the logo. It should still read as Zendesk: Licorice and white with one Matcha button, soft 40px cards, a warm photo of a person with a chat card.
- Do check: Swap test. Put another service vendor's logo on it. If the Matcha-on-Licorice action, the Fern bands and the resolution story feel out of place, it is Zendesk enough; if not, it is generic.