# WordPress: brand book and build spec

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.

From unfairly.ai/brand-guidelines/wordpress, checked 2026-10-30. Unofficial study; not affiliated with WordPress.

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

**Thesis (our reading):** 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. Based on: The 2021 News redesign says it wanted the playfulness of jazz through strokes, type and color; the 2022 homepage post places each page between jazzy and minimal; the theme tokens keep everything else to Charcoal, greys and Blueberry.

## Purpose

Mission: Democratize publishing (published; https://wordpress.org/about/ (our mission))

Story: Mike Little and Matt Mullenweg forked b2/cafelog in 2003 to make an elegant personal publishing system. It grew into the GPL-licensed platform of choice for millions of sites, built by developers, designers, scientists and bloggers, usable out of the box and deeply customizable. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Freedom 0 | Run the program for any purpose. | published: https://wordpress.org/about/ (the four freedoms) |
| Freedom 1 | Study how it works and change it. | published: https://wordpress.org/about/ (the four freedoms) |
| Freedom 2 | Redistribute it. | published: https://wordpress.org/about/ (the four freedoms) |
| Freedom 3 | Distribute your modified versions. | published: https://wordpress.org/about/ (the four freedoms) |

## Fixed and flexible

Never changes:
- The logotype and its W-based proportions
- Mrs Eaves and Dalliance only inside the logotype
- EB Garamond 400 headings with Inter text
- Blueberry #3858E9 for links and primary buttons
- 'WordPress' with a capital P

The one thing that varies: Where a page sits between jazzy/expressive and minimal/clean: the homepage and About page carry strokes and hand marks; download and documentation pages stay functional (published in the 2022 homepage post).

## Positioning

- **Statement**: The open source publishing platform of choice for millions of websites, from creators and small businesses to enterprises. (observed)
- **Category**: Open source publishing platform; blog tool, publishing platform and CMS (page title) (observed)
- **Audience**: Creators, small businesses and enterprises; entrepreneurs, professional developers and first-time bloggers (paraphrase). (observed)
- **Problem**: Publishing on the web shouldn't need code or a gatekeeper (our reading of 'democratize publishing' and 'no code needed'). (our reading)
- **Promise**: Design, build and extend any site yourself, with a whole community behind you (paraphrase). (observed)
- **Differentiators**: Open source under the GPL: four freedoms nobody can take away.; Blocks and flexible design tools: customize every detail with no code.; An extensive plugin and theme library to extend any site.; A worldwide community and regular events behind the software.
- **Alternatives**: Not published: WordPress.org names no competitors.

## Messaging

Boilerplate (observed): WordPress is the open source publishing platform behind millions of websites, from creators and small businesses to enterprises. It began in 2003, is licensed under the GPL, and is built by a worldwide community of contributors.

Taglines:
- Democratize publishing (The mission line, About page hero)
- the freedom to build. the freedom to change. the freedom to share. (About page hero, beside the mission, lowercase typewriter)
- Meet WordPress (Homepage H1)
- Build for yourself, not by yourself (Homepage learning band)
- Wear the internet you make (Homepage swag band)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Designed for everyone | Great software should work with minimal setup: accessible, fast, secure and easy, simple and predictable at its core (paraphrase). | Licensed GPLv2 or later, giving four freedoms: run, study and change, redistribute, distribute modified copies.; The publishing platform of choice for millions of websites (their wording, no number given). | published |
| Open source | WordPress is GPL software, built and improved by a worldwide community of contributors (paraphrase). | Built on PHP and MariaDB and licensed under the GPLv2.; Started in 2003 when Mike Little and Matt Mullenweg forked b2/cafelog. | published |
| Welcoming and inclusive | Contributors around the globe give their time so anyone has a voice (paraphrase). | Regular WordPress events worldwide to learn, connect and grow. | published |
| Design, build, extend | Flexible design tools and blocks, real-time editing, and a plugin library for whatever a site needs (paraphrase). | Showcase logo wall: Rolling Stone, TIME, NASA, Microsoft, TechCrunch, Harvard. | observed |

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Meet WordPress" | Homepage H1 | https://wordpress.org/ |
| "One platform, a universe of possibilities" | Homepage showcase band | https://wordpress.org/ |
| "Build for yourself, not by yourself" | Homepage learning band | https://wordpress.org/ |
| "Wear the internet you make" | Homepage swag band | https://wordpress.org/ |
| "democratize publishing" | About page hero | https://wordpress.org/about/ |

## Voice

Tone words: Welcoming, Plain, Open, Quietly jazzy.

Traits:
- Welcoming and inclusive, but not exclusive (published)
- Simple and predictable, but not complicated (published)
- Jazzy, but not decorative for its own sake (published)
- Open, but not proprietary (published)
- Friendly and reassuring, but not sharp (published)

- WordPress publishes no voice guide. These notes come from the About page, the trademark policy, core code and the copy on wordpress.org.
- Speak to everyone: the mission frames WordPress as designed for everyone, from first-time bloggers to enterprises.
- Plain and practical: copy says what the software lets you do (design, build, extend) without hype.
- Community first: the project is people collaborating; 'Everyone is welcome' closes the community copy.
- The About page writes its headings in lowercase ('our story', 'our mission'); product pages use sentence case. Keep each page to one convention.
- Em dashes are set closed, with no spaces ('worldwide—from creators').
- Homepage product copy (observed 2026-10-31, https://wordpress.org/) is plain and imperative: a verb, the object, one benefit, as in 'Create any website'. Release blurbs name concrete features; community copy leads with gathering and welcome, not contributor roles. The expressiveness lives in the visuals, never the prose.

Rules a copy check enforces:
- Say "WordPress", not "Wordpress" or "wordpress" or "Word Press"
- Sentence case headlines
- American spelling
- Write as "we", to "you"
- Say "Hosting for WordPress", not "Hosted WordPress" or "Managed WordPress Hosting"
- 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)
- Footer line: the WordPress® trademark is the WordPress Foundation's intellectual property
- Closed em dashes, no spaces
- Button text in Title Case ('Get WordPress', 'Explore the Showcase')
- Subtitles 14px uppercase

Their words: open source, publishing, freedom, community, everyone, blocks, build, share, democratize.
Never: Wordpress, Hosted WordPress, Managed WordPress Hosting.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Blueberry | #3858E9 | accent | The brand blue on WordPress.org: links, every primary button, focus rings, the hero brush stroke. Published as a theme token. |
| Deep Blueberry | #213FD4 | accent hover | Button hover fill. |
| Charcoal | #1E1E1E | ink / night | Default text; the dark showcase band; button active fill. |
| Charcoal 2 | #23282D | deep ground | Closing 'Get started' band and global footer; the classic Dark Gray kept. |
| White | #FFFFFF | paper | Default page ground; text on Blueberry and Charcoal. |
| Light Grey 2 | #F6F6F6 | surface | Alternating light section ground; search field fill. |
| Charcoal 4 | #656A71 | ink muted | Muted labels and meta text. |
| Charcoal 5 | #979AA1 | border / muted on dark | Form borders; secondary footer text. |
| Light Grey | #D9D9D9 | hairline | Dividers. |
| Base Gray (classic) | #32373C | logo | The color of the dark logo files. |
| WordPress Blue (classic) | #0073AA | legacy accent | The historic brand blue; still on the handbook's Colors page under 'Classic colors'. |
| Pomegranate | #E26F56 | accent (warm) | Secondary accent family with two tints. |
| Acid Green | #33F078 | accent (bright) | Release artwork; with two tints. |
| Lemon | #FFF972 | accent (yellow) | With two tints. |
| Purple 2 | #7A00DF | accent (purple) | With Purple 1 and Purple 3. |
| Linen (About) | #F0EDE7 | page ground (About only) | Observed warm ground of the About page; not a theme token. |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | EB Garamond | Open (SIL OFL 1.1) | EB Garamond | "EB Garamond", Garamond, Georgia, serif |
| body | Inter | Open (SIL OFL 1.1) | Inter | Inter, -apple-system, "Helvetica Neue", Arial, sans-serif |
| mono | IBM Plex Mono | Open (SIL OFL 1.1) | IBM Plex Mono | "IBM Plex Mono", Menlo, Consolas, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 'Meet WordPress' | --text-display-xl-* | display | 70px | 70px | 1.05 | 0px | 400 |
| Dark-band H2 (showcase) | --text-display-l-* | display | 50px | 30px | 1.2 | 0px | 400 |
| Section H2 (release, community, news, merch) | --text-display-m-* | display | 36px | 26px | 1.28 | 0px | 400 |
| Closing CTA 'Get started' | --text-cta-xl-* | body | 120px | 52px | 1 | -2px | 300 |
| Card and sub-section title (Design, Build, Extend; Build for yourself) | --text-title-s-* | body | 18px | 18px | 1.88 | 0px | 700 |
| News post title | --text-title-post-* | body | 18px | 18px | 1.3 | 0px | 600 |
| Body short text (ledes, card copy) | --text-body-* | body | 16px | 16px | 1.625 | 0px | 400 |
| Link paragraph (stacked text links) | --text-body-link-* | body | 16px | 16px | 1.875 | 0px | 400 |
| Button label | --text-button-* | body | 16px | 16px | 1.3 | 0px | 600 |
| Nav link / header button | --text-nav-* | body | 14px | 14px | 1.71 | 0px | 400 |
| News meta (category caps + date) | --text-meta-* | body | 14px | 14px | 1.875 | 0px | 400 |
| Footer link | --text-footer-* | body | 14px | 16px | 1.9 | 0px | 400 |
| Phone menu item | --text-menu-* | body | 21px | 21px | 1.95 | 0px | 400 |

## Layout

Measured on https://wordpress.org/: Playwright on the live page at 1440x900 and 390x844 (2026-10-31): computed styles, bounding boxes, hover states and the theme's CSS rules.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 140px | 20px |
| Section padding | 80px | 80px |
| Container max width | 1160px | full |
| Hero text width | max 555px | full |
| Grid columns | 3 | 1 |
| Gutter | 40px | 20px |
| Card gap | 40px | 40px |
| Navigation height | 71px | 71px |

Breakpoints from WordPress's CSS: 480, 600, 700, 782, 890, 960, 1100, 1280px.

Homepage bands, top to bottom (observed):
1. Global header
   - Desktop: 1440x71, 1px rgba(0,0,0,0.15) bottom border, not sticky
   - Phone: 390x61: W mark, search, hamburger
   - Links verbatim: Showcase, Plugins, Themes, Hosting, News, Resources ▾, About ▾, Swag ↗︎
2. Hero: Meet WordPress
   - Desktop: y 71-381, 555/555 split, padding 80
   - Phone: y 61-496, H1 2 lines, brush hidden
   - No button in the hero
3. Design / Build / Extend + release row
   - Desktop: y 381-1465, padding 80; cards 3x360; release 550/550
   - Phone: y 496-2739, all stacked
   - One continuous grey band holding two rows, 79px apart
4. Showcase
   - Desktop: y 1465-2809, padding 80 top, rows full-bleed to the bottom
   - Phone: y 2739-3747, logos 2-up
   - Screenshot rows are static PNGs, 20px apart
5. Dots divider + Community
   - Desktop: y 2809-3829, 530/530 with 100 gap
   - Phone: y 3747-5091, photo after the first link
   - Text #1A1919
6. Latest news
   - Desktop: y 3830-4145, 3 columns
   - Phone: y 5091-5550, 1 column
   - Category caps in Blueberry
7. Merch
   - Desktop: y 4145-4363, 1px #D9D9D9 top rule, no vertical padding, bottom-aligned
   - Phone: y 5550-5838
   - Image sits on the band's bottom edge
8. Get started
   - Desktop: y 4363-4755, padding 80
   - Phone: y 5838-6250, 52px, arrow on its own row
   - Whole heading is the link
9. Global footer
   - Desktop: y 4755-5117, padding 69 80 58
   - Phone: y 6250-7020, 2-up columns
   - Column 1: About, News, Hosting, Privacy
   - Column 2: Showcase, Themes, Plugins, Patterns
   - Column 3: Learn, Documentation, Developers, WordPress.tv ↗
   - Column 4: Get Involved, Events, Donate ↗, Swag ↗
   - Column 5: WordPress.com ↗, Matt ↗, bbPress ↗, BuddyPress ↗
10. Code is Poetry strip
   - Desktop: y 5117-5178, 61px
   - Phone: y 7020-7081, 61px
   - Centred, 188x13

## Page anatomy

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

**Navigation**
- summary: White global header, one row: W mark at far left, eight Inter 14px links straight after it, then a search icon and a Blueberry 'Get WordPress' button at the far right. Not sticky.
- ground: #FFFFFF
- height: 71px desktop (70px items + 1px border); 61px phone
- border: 1px solid rgba(0,0,0,0.15) bottom
- logo: variant WordPress W mark only (no wordmark), #23282D via currentColor; px 30x30 inside a 70x70 link with 20px padding; position x 20, y 20 (phone y 15); file https://wordpress.org/
- links: count 8; labels Showcase, Plugins, Themes, Hosting, News, Resources ▾, About ▾, Swag ↗︎; size 14px/24px; weight 400; color #23282D; alignment left group from x 70; item x 70, 158, 225, 298, 370, 427, 537, 618; padding 23px 10px 22px; no gap; dropdowns Resources: Learn WordPress, Documentation, Education, Forums, Developers, Blocks, Patterns, Photos, Openverse ↗︎, WordPress.tv ↗︎. About: About WordPress, Make WordPress, Events, Five for the Future, Enterprise, Gutenberg ↗︎, Job Board ↗︎. Panels #F6F6F6, 200px wide, 44px rows
- actions:
  - Search: magnifier button 56x70 at x 1203; opens an inline 224x37 field 'Type to search…'
  - Get WordPress: button_header, #3858E9 fill, white 14px Inter 700, padding 10px 19px, radius 2px, 141x36 at x 1279, 20px from the right edge
- sticky: no: position relative, scrolls away
- phone: shows W mark x 20, search icon x 270, hamburger x 326 (64x60); no Get WordPress button in the bar; menu Full-screen #F6F6F6 overlay, close X top right; rows 21px Inter 400 #23282D on a 46px pitch from y 102: Showcase, Plugins, Themes, Hosting, News, Resources (label in #656A71) then Learn WordPress, Documentation, Education, Forums, Developers, Blocks, Patterns, Photos, Openverse ↗︎, WordPress.tv ↗︎ indented 20px, About (label #656A71) then About WordPress, Make WordPress, Events, Five for the Future, Enterprise, Gutenberg ↗︎, Job Board ↗︎ indented, Swag ↗︎; Get WordPress button (14px/700) at the end; cta Get WordPress lives only inside the menu on phone

**Hero**
- summary: Calm white intro band: 70px EB Garamond 'Meet WordPress' and a two-line Inter lede in the left half, one Blueberry dry-brush stroke image in the right half. No button, no photo, no proof.
- desktop: band y 71-381 (310px), padding 80px 140px; column split 2 columns 555 + 555 with a 50px gap; vertical anchors H1 top y 153 (74px tall); lede y 247-299 (2 lines, 20px under the H1); brush image y 151-301; text max width 555px (lede wraps after 'websites'); media brush.png 555x150 at x 745, no frame, no radius, no overlap; cta size none in the hero
- phone: order H1, lede (brush hidden); alignment left, 20px gutter; sizes band y 61-496, padding 80px 20px; H1 70/75.6 in 2 lines (y 141-292); lede 16/26 4 lines (y 312-416)
- at rest: Static. Nothing animates; the brush is a flat PNG with transparent ragged edges on #FFFFFF.
- media: https://wordpress.org/files/2024/04/brush.png (1198x323, transparent PNG, Blueberry)
- type: H1 EB Garamond 400 70px #1E1E1E; lede Inter 400 16/26 #1E1E1E
- cta: none; the first buttons appear in the release row
- proof: none in the hero; the only number on the page is the word 'millions' in the lede (no stat or counter anywhere)

**Design / Build / Extend cards**
- ground: #F6F6F6
- summary: Top of one Light Grey 2 band (y 381-1465) that also holds the release row: three equal feature cards, image on top, Inter 18 title, short copy, optional text link.
- desktop: band band padding 80px; cards y 461-919; grid 3 x 360px, 40px gaps, x 140 / 540 / 940; card image 360x230 at the top; title 18/33.84 Inter 400 at +250; body 16/26 at +303 (4 lines); text link 'Try the Block Editor' under Build only
- phone: grid 1 column 350px; cards at y 576, 1018, 1509 (about 40px between); image 350x224
- anatomy:
  - Card titles are Inter Bold 700 18px (text wrapped in <strong>), not Garamond
  - Inline links (blocks, theme, plugins) are Blueberry and underlined inside the body copy
  - Images are product UI crops on white with a 1px #D9D9D9 outline drawn inside the PNG; no CSS border, radius 0, no shadow
- components:
  - feature_card
  - text_link

**Release row (WordPress 7.1)**
- ground: #F6F6F6
- summary: Same grey band, 79px under the cards: text left (36px Garamond H2, 4-line lede, primary button), release collage image right.
- desktop: row y 998-1385; columns text 550 at x 140, image 550x387 at x 750 (60px gap); anchors H2 y 1038 (2 lines, 46px leading, forced break after 'styling'); lede y 1151; button y 1275 (235x51); band bottom 80px under the image (y 1465)
- phone: order H2 (26/29.9, 2 lines), lede (7 lines), full-width button 350x61, image 350x246 below; y 2031-2659
- anatomy:
  - The image is a 2x2 collage of release visuals in a white frame with a 1px #D9D9D9 outline, all inside the WEBP; radius 0
- components:
  - button_primary

**Showcase: One platform, a universe of possibilities**
- ground: #1E1E1E
- summary: Charcoal band: white 50px Garamond H2, two-line lede, a row of six customer logos in white, a primary button, then three full-bleed rows of site screenshots to the band's bottom edge.
- desktop: band y 1465-2809, padding 80px top, 0 bottom; h2 y 1545, 50/60, one line, 1160 wide; lede y 1635, max 696px, white 16/26; logos y 1737-1833, six logos left to right at x 140, 401, 567, 751, 988, 1140 (justified across 1160): Rolling Stone 173x33, TIME 79x33, NASA 96x96, Microsoft 150x33, TechCrunch 64x32, Harvard 160x40; vertically centred on y 1785; button Explore the Showcase y 1883 (237x51); rows three full-bleed 1440px images at y 2034 (262 tall), 2316 (264), 2600 (209), 20px #1E1E1E gaps; the last row ends at the band edge
- phone: band y 2739-3747, padding 80px 20px top; h2 30/32.1, 2 lines; logos 3 rows of 2 (y 3068-3293); button full width 350x61 y 3347; rows 390px wide, 71/72/57 tall, 20px gaps, flush to the bottom
- anatomy:
  - Logos are supplied as light-grey/white PNGs; no CSS filter
  - Screenshot rows are static images cropped at both screen edges, not a marquee
- components:
  - button_primary

**Dots divider**
- ground: #FFFFFF
- summary: A 1160x60 strip of 5px dots on a 55px pitch in two rows, mostly #D9D9D9 with seven #1E1E1E dots, between the showcase and community.
- desktop: y 2849-2909, margin 40px top and bottom; image dots-banner.svg as background, repeat-x, centred top
- phone: y 3787-3847, 350 wide crop of the same SVG
- anatomy:
  - Decorative only; static
- components:

**Community**
- ground: #FFFFFF
- summary: White band: 36px Garamond H2 with two paragraphs and one text link on the left, a black-and-white crowd photo cut into a brush-stroke shape on the right; under it an Inter 18 sub-heading with four stacked text links.
- desktop: band y 2849-3829 incl. the dots, padding 0 80px 80px; columns 530 text at x 140 + 530 photo at x 770 (100px gap); anchors H2 y 2990; p y 3056 (5 lines) and 3206 (2 lines), 20px between; link 'Find an event near you' y 3288; photo y 2990, 530x258; sub 'Build for yourself, not by yourself' 18px Inter y 3438; p y 3492; links y 3600, 3640, 3680, 3720 (40px pitch)
- phone: order H2, 2 paragraphs, link, photo (350x171), sub-heading, paragraph, 4 links; y H2 3927, photo 4337, sub-heading 4628, links 4841-4961
- anatomy:
  - Links: Find an event near you; Learn how to use WordPress; Test WordPress out in your browser; Search documentation; Dig into the code
  - Text color here is Charcoal 0 #1A1919, not #1E1E1E
  - The photo's ragged brush-stroke silhouette is part of the transparent PNG
- components:
  - text_link

**Latest WordPress news**
- ground: #F6F6F6
- summary: Grey band: 36px Garamond H2 left with a 'More news' text link right on the same line, then three post titles with category and date.
- desktop: band y 3830-4145, padding 80px; header H2 y 3910; More news right-aligned at x 1217; grid 3 x 353px, 50px gaps, posts y 4005-4065
- phone: band y 5091-5550; grid 1 column, posts at y 5232, 5321, 5411 (about 90px pitch); header More news stays on the H2 line, right
- anatomy:
  - Post: title 18/23.4 Inter 600 #1E1E1E; 13px below, CATEGORY uppercase 14px #3858E9, ' · ', date 14px #1E1E1E
  - Live feed: titles, categories and dates change; build 3 slots
- components:
  - news_item
  - text_link

**Merch: Wear the internet you make**
- ground: #F6F6F6
- summary: Same grey continued under a 1px #D9D9D9 top rule: 36px Garamond H2 and an outline button left, a merch product cut-out right that sits on the band's bottom edge.
- desktop: band y 4145-4363 (218px), padding 0 80px (no vertical padding), columns aligned bottom; columns 565 + 30 gap + 565; anchors H2 y 4196; outline button y 4262 (204x51); image 565x187 at x 735, y 4176, bottom flush with y 4363
- phone: order H2 (26px), full-width outline button 350x61, image 350x116 flush to the band bottom; y 5550-5838
- anatomy:
  - The product image is cropped by the next band (the dark CTA starts right at its bottom edge)
- components:
  - button_outline

**Get started**
- ground: #23282D
- summary: Charcoal 2 closing band: one giant Inter Light 'Get started' link with a thin white arrow running to the right edge of the container, and a two-line white lede.
- desktop: band y 4363-4755, padding 80px; cta y 4443, 120/120 Inter 300 -2px white; arrow shaft 1px white 483px from the text's right +0.5em to x 1300, head an 85px chevron; lede y 4623, max 580px, 16/26 white
- phone: cta 52/56.16, -2px; arrow on its own row under the text, full 350px width, head 0.354em; lede y 6066, 4 lines; band y 5838-6250, padding 80px 20px
- anatomy:
  - The whole heading is the link (to /download/); hover underlines the words and slides the arrow 21px right
- components:
  - cta_arrow_heading

**Footer**
- summary: Charcoal 2 global footer: five 4-link columns, then the white WordPress.org logotype with the trademark line at left and ten white social icons at right; a darker strip below holds 'CODE IS POETRY'.
- ground: #23282D
- anatomy:
  - Padding 69px 80px 58px; container x 80-1360. Five columns 240px wide at x 80, 340, 600, 860, 1120; links 14/26.6 Inter 400 #FFFFFF, about 31.5px pitch from y 4828; ↗ marks external links
  - Column 1: About, News, Hosting, Privacy
  - Column 2: Showcase, Themes, Plugins, Patterns
  - Column 3: Learn, Documentation, Developers, WordPress.tv ↗
  - Column 4: Get Involved, Events, Donate ↗, Swag ↗
  - Column 5: WordPress.com ↗, Matt ↗, bbPress ↗, BuddyPress ↗
  - Logo row y 5006: WordPress.org logotype (W mark + small-caps wordmark) white, 171x27 at x 80 (https://wordpress.org/)
  - Trademark line verbatim: 'The WordPress® trademark is the intellectual property of the WordPress Foundation.' 14/21 #979AA1, y 5039
  - Social icons, 24px, white (fill #FFFFFF), 44px pitch, right-aligned x 940-1360, in this order: X (formerly Twitter), Bluesky, Mastodon, Threads, Facebook, Instagram, LinkedIn, TikTok, YouTube, Tumblr
  - Strip: #1C2024, 61px tall, padding 24px 80px; 'CODE IS POETRY' SVG 188x13 centred in #979AA1 (https://wordpress.org/)
  - No address, phone number or copyright line on the page; no newsletter field
- phone: Padding 44px 20px; columns become a 2-up grid (165px, x 20 and 205): rows (1,2), (3,4), then column 5 alone; links 16/30.4; logotype y 6817; trademark 16/24; social icons wrap 8 + 2 at 44px pitch; strip 61px at the bottom

**On dark grounds**
- secondary button: No secondary button on dark grounds: the showcase uses the Blueberry primary (#3858E9, hover #213FD4) on #1E1E1E
- link: #FFFFFF, no underline at rest, underline on hover (footer); the Get started heading-link is white and underlines on hover
- muted text: #979AA1 (trademark line, Code is Poetry)
- hairline: None drawn on the dark bands; the only line is the 1px #FFFFFF arrow. Use #40464D if a divider is unavoidable (palette Charcoal 3)
- logo variant: White WordPress.org logotype in the footer; customer logos as white/light PNGs; nav W mark stays #23282D on white

## Components

- **button primary** (published): height 51, padding x 32, radius 2, fill #3858E9, text #FFFFFF, weight 600, font size 16, face body, border 1px solid #3858E9, line height 1.3, example Explore WordPress 7.1 (235x51), Explore the Showcase (237x51). Measured: 51px tall, padding 15px 33px, no visible border (0px), 16/20.8 Inter 600, radius 2. Phone: full column width (350x61, padding 20px 31px). Hover #213FD4 observed
  - hover (published): background #213FD4
  - active (published): background #1E1E1E
  - focus (published): border-color #3858E9
- **button outline** (published): height 51, padding x 32, radius 2, fill none, text #3858E9, ring #3858E9, ring px 1, weight 600, font size 16, face body, example Shop new arrivals. Measured: 204x51, padding 14px 32px, 1px #3858E9 border, radius 2; hover fills #213FD4 with white text (observed). Phone: full width 350x61
  - hover (published): background #213FD4, color #FFFFFF
  - active (published): background #1E1E1E, color #FFFFFF
- **button header** (observed): height 36, padding x 19, radius 2, fill #3858E9, text #FFFFFF, weight 700, font size 14, face body, padding 10px 19px, line height 1.15, example Get WordPress (141x36 at x 1279, y 17). 'Get WordPress' in the global header
  - hover (observed): fill #213FD4, text #FFFFFF
- **form field** (published): radius 2, border 1px solid #979AA1, fill #FFFFFF, text #1E1E1E, font size 14. Active border Blueberry; search field fills Light Grey 2 #F6F6F6 with no border
- **nav link** (observed): font size 14, weight 400, face body, text #23282D, padding 23px 10px 22px, height 69, radius 0. The whole 69px-tall item fills Light Grey 2 on hover/open; Resources and About carry a 12px chevron-down; Swag carries ↗︎
  - hover (observed): fill #F6F6F6, text-decoration underline
- **nav dropdown** (observed): fill #F6F6F6, radius 0, border none, no shadow, width 200, padding 0 0 10px, item 14px Inter 400 #23282D, 44px tall, padding 10px, motion opacity 0.1s linear. Opens flush under the 69px item at the item's left edge
- **text link** (observed): text #3858E9, font size 16, weight 400, face body, underline 1px, offset 2.4px
  - hover (observed): text-decoration none
- **footer link** (observed): text #FFFFFF, font size 14, weight 400, face body, underline none at rest
  - hover (observed): text-decoration underline
- **feature card** (observed): radius 0, fill none (sits on #F6F6F6), media 360x230 PNG (the white frame and 1px #D9D9D9 outline are inside the image file), title 18px Inter 400 #1E1E1E, 20px under the image, body 16/26, 19px under the title; optional text link 20px below
- **news item** (observed): title 18/23.4 Inter 600 #1E1E1E, no underline, meta 14px: CATEGORY (uppercase, #3858E9) · date (#1E1E1E), gap 13px title to meta, radius 0
  - hover (observed): text-decoration underline
- **cta arrow heading** (observed): text #FFFFFF, font size 120, weight 300, face body, radius 0, anatomy The whole H2 is one link laid out as a grid: text column (auto) + arrow column (1fr), gap 0.1em 0.5em. Arrow shaft = ::after, 1px #FFFFFF line filling column 2 (483px at 1440); head = ::before, an 85px square with 1px white top and right borders rotated 45deg, justified to the right end
  - hover (observed): text-decoration underline, arrow translateX(21px), 0.15s linear
- **search** (observed): trigger 24px magnifier button (56x70 hit area) left of Get WordPress, open inline field 224x37, white, radius 2px 0 0 2px, placeholder 'Type to search…' 14px, close button fills #F6F6F6

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| dropdown-fade | linear | 100ms | Header submenu opacity on open (only when motion is allowed) | observed |
| menu-overlay | ease-out | 100ms | Phone menu overlay fades in (overlay-menu__fade-in-animation) | observed |
| cta-arrow | linear | 150ms | Get started arrow slides 21px right on hover | observed |
| social-icon | ease | 100ms | Footer social icons: transform transition on hover | observed |
| image-reveal | ease | 400ms | Core image show-content-image fade when lazy images arrive; animation only, the resting state is the plain image | observed |
| reduced-motion |  |  | Every transition above sits inside @media not (prefers-reduced-motion); nothing on the page scrolls, counts up or auto-plays | observed |

## Icon tokens

Grid 24x24px, stroke 1.5px, one edge hinted to the whole pixel (published).
| Name | Size | Use |
|---|---|---|
| default | 24px | WordPress Icons (current) |
| dashicon | 20px | Dashicons (classic, deprecated): 2px lines, 1px corners |

## Signature moves

### The Blueberry brush stroke

Where: Homepage hero beside 'Meet WordPress'; as a 16px rule element in content (custom.brush-stroke).
Do: One dry-brush paint stroke in Blueberry #3858E9 on white, painted left to right with ragged ends, as the one expressive gesture on a calm page; the jazz 'paint strokes' of the 2021 redesign.
Don't: add several strokes to one view, recolor it outside the palette, or replace it with a clean vector bar.

### Garamond headings, never bold

Where: Every H1 to H6 on WordPress.org.
Do: EB Garamond Regular 400 at the published scale (70/50/36/30/26/22), sentence case, balanced wrap, with Inter for everything else.
Don't: bold or letter-space the serif, or set body copy in it.

### The huge Light CTA

Where: Closing 'Get started' band on Charcoal 2 #23282D.
Do: Inter Light 300 at 120px, 118px leading, -2px tracking, white, as the page's last word.
Don't: set it bold or use it more than once per page.

### Black-and-white people

Where: Community photography on the homepage and the News redesign.
Do: Documentary black-and-white photos of real WordPress people at events.
Don't: use stock, color-graded or staged photos for community.

### Hand-drawn marks and typewriter text

Where: The About page.
Do: Pencil-style arrows, underlines and circles with a typewriter mono (Courier Prime) on a warm #F0EDE7 ground and huge lowercase Inter headings.
Don't: carry it onto product pages, which stay on white and Garamond.

## Messaging: rules

The mission is 'democratize publishing', backed by the four GPL freedoms. The homepage sells three verbs (Design, Build, Extend), a showcase of famous sites, the community, learning resources and the latest release.

Why it works: The verbs map to what someone does with the software; the freedoms say why it can be trusted.

- Lead with what people can do, then the community behind it
- Proof by showcase sites and openness, not invented numbers

Sources: https://wordpress.org/about/, https://wordpress.org/

## Voice: rules

There is no voice guide. The About page states the stance: WordPress is designed for everyone, open source, welcoming and inclusive, with the mission 'democratize publishing'. Homepage copy is short, plain and benefit-led, in sentence case. The trademark policy and core code supply the only hard rules: always 'WordPress' with a capital P, and specific product names to avoid.

Why it works: Plain words for a project used by first-time bloggers and enterprises alike; freedom and community are the recurring ideas because the GPL is the product's foundation.

- Always 'WordPress', capital P
- Sentence-case headlines on product pages
- Say 'Hosting for WordPress', not 'Managed WordPress Hosting'
- Address the reader as you; the project as we
- Closed em dashes
- Button text in Title Case
- Don't write 'Wordpress'
- Don't use 'WP' to imply an official product
- Don't hype or superlatives about competitors

Not published: tone of voice; word list; grammar and punctuation guide.

Sources: https://wordpress.org/about/, https://wordpress.org/, https://wordpressfoundation.org/trademark-policy/, https://developer.wordpress.org/reference/functions/capital_p_dangit/

## Logo: rules

The logotype is the W mark plus the 'WordPress' wordmark. Jason Santa Maria drew it in 2005 from two Emigre faces (Mrs Eaves Small Caps for the word, Dalliance as the influence for the W); Matt Miklic refined it and Hugo Baeta rebalanced it for the handbook. Five downloads are published (standard, vertical alternative, word mark, W mark, simplified), each in Base Gray or white, and WordPress.org adds a .org suffix on the same metrics.

Why it works: One measure, the height of the W mark, sets every proportion and margin, so each lockup reads as the same mark at any size. The serif W's tall, graceful shape is what fakes get wrong.

|  |  |
|---|---|
| Unit | W = height of the W mark |
| Wordmark height | W/2 |
| Clear space | W/2 all sides |
| Mark-to-word gap | W/20 horizontal; W/5 stacked |
| Colors | Base Gray #32373C; white |
| Minimum size | not published |
| Owner | WordPress Foundation; commercial licence via Automattic |

- W is the height of the W mark; the wordmark is W/2 tall
- Clear space (safety margin) of W/2 on every side
- Horizontal lockup: W/20 gap between the W mark and the wordmark
- Vertical alternative: W mark on top, W/5 gap, then the W/2 wordmark
- WordPress.org logotype: same metrics, with the .org suffix
- Colors: Base Gray #32373C on light, white on dark; the simplified mark comes in Base Gray only
- Use only the official downloads, and only as the trademark policy allows
- Others may use the logo on a page describing their WordPress services, never in their own logo or branding
- 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 use the WordPress name or logo in a domain name
- Don't use the logo or name in advertising
- Don't imply affiliation with or endorsement by the WordPress Foundation

Real examples, to look at on WordPress's own pages (not for reuse):
- Metrics: W, W/2, W/20 and the W/2 safety margin for the standard, W mark and vertical lockups: https://make.wordpress.org/design/handbook/design-guide/foundations/identity/ (Metrics)
- Standard logotype: https://make.wordpress.org/design/handbook/design-guide/foundations/identity/ (Logotype)
- Alternative, vertical logotype: https://make.wordpress.org/design/handbook/design-guide/foundations/identity/ (Logotype)
- WordPress.org logotype on the same metrics: https://make.wordpress.org/design/handbook/design-guide/wordpress-org/wordpress-org-identity/ (Metrics)
- Fight the fauxgo: short and squat vs tall and graceful serifs: https://wordpress.org/about/logos/ (Fight the fake logo)
- All official versions: https://wordpress.org/about/logos/ (Downloads)

Sources: https://make.wordpress.org/design/handbook/design-guide/foundations/identity/, https://make.wordpress.org/design/handbook/design-guide/wordpress-org/wordpress-org-identity/, https://wordpress.org/about/logos/, https://wordpressfoundation.org/trademark-policy/

## Color: rules

Two palettes are published. The handbook's Colors page keeps the classic set (WordPress Blue #0073AA and Medium Blue, six grays from Ultra Dark Gray to Light Silver Gray, six auxiliary accents) and says a new WordPress.org palette is being explored in Figma. That newer palette is published as the WordPress.org theme's tokens: a Charcoal ramp, two light greys, a Blueberry ramp led by #3858E9, and four accent families (Pomegranate, Acid Green, Lemon, Purple) with tints. The live site is almost entirely White, Light Grey 2 and Charcoal, with Blueberry carrying every link and button.

Why it works: A near-monochrome page lets one vibrant blue do all the signalling; the redesign post says that blue echoes the Gutenberg editor, so the marketing site and the product feel like one thing.

|  |  |
|---|---|
| Accent | Blueberry #3858E9 |
| Text | Charcoal #1E1E1E |
| Ground | White #FFFFFF / Light Grey 2 #F6F6F6 |
| Dark | Charcoal #1E1E1E, Charcoal 2 #23282D |
| Alpha tokens | White 15% #FFFFFF26, Black 15% #00000026 |
| Proportions | not published |

- 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
- Accent families (Pomegranate, Acid Green, Lemon, Purple) come with two or three tints each
- Check contrast against the accessibility handbook's color guidance
- Classic colors are for legacy wp-admin contexts
- Don't introduce blues outside the Blueberry ramp on WordPress.org
- Don't use the classic WordPress Blue #0073AA as the WordPress.org accent

Real examples, to look at on WordPress's own pages (not for reuse):
- 2021 News redesign tiles: dark, Blueberry, green brush strokes, black-and-white photo: https://make.wordpress.org/design/2021/06/03/redesign-of-wordpress-org-news/
- Release cover on Blueberry with EB Garamond: https://make.wordpress.org/design/2021/06/03/redesign-of-wordpress-org-news/

Sources: https://make.wordpress.org/design/handbook/design-guide/foundations/colors/, https://github.com/WordPress/wporg-parent-2021/blob/trunk/source/wp-content/themes/wporg-parent-2021/theme.json, https://make.wordpress.org/design/2021/06/03/redesign-of-wordpress-org-news/, https://make.wordpress.org/accessibility/handbook/current-projects/use-of-color/

## Typography: rules

The guide names four faces with strict jobs. Mrs Eaves Small Caps and Dalliance belong to the logotype alone. WordPress.org sets headings in EB Garamond and text in Inter, with a full desktop scale published as a chart. Open Sans (Light, Regular, Semi-Bold and italics) is the classic text face, kept on the page as 'Classic typography'.

Why it works: Garamond's book serif gives headings the elegance of the logotype's small caps without using it; Inter, chosen in the 2021 redesign for screen reading, keeps everything functional. The redesign post says Open Sans's quirks weren't helping readability.

|  |  |
|---|---|
| Display | EB Garamond 400 |
| Text | Inter 300/400/600/700 + italics |
| Mono | IBM Plex Mono (theme token) |
| Logotype | Mrs Eaves Small Caps, Dalliance (Emigre) |
| Classic | Open Sans 300/400/600 + italics |
| H1 | 70/74 desktop and phone (homepage, observed 2026-10-31) |
| Body | 16/30 long, 16/26 short |
| Large CTA | 120/118, 300, -2px |

- 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
- Links 16/30 Inter in Blueberry
- Button text Inter Semi Bold 16, Title Case
- Subtitles Inter 14 uppercase
- Large CTAs Inter Light 300, 120px, 118 leading, -2px tracking
- Phone: theme tokens step H2 to 30px and H3 to 26px; the homepage hero H1 stays 70px at 390 (observed 2026-10-31)
- Don't use Mrs Eaves or Dalliance outside the logotype
- Don't bold the Garamond headings
- Don't set body text in Garamond

Real examples, to look at on WordPress's own pages (not for reuse):
- Typography (Desktop) chart: EB Garamond and Inter scale: https://make.wordpress.org/design/handbook/design-guide/foundations/typography/
- Classic: Open Sans: https://make.wordpress.org/design/handbook/design-guide/foundations/typography/ (Classic typography)
- Classic: Open Sans weights and styles: https://make.wordpress.org/design/handbook/design-guide/foundations/typography/ (Classic typography)

Sources: https://make.wordpress.org/design/handbook/design-guide/foundations/typography/, https://github.com/WordPress/wporg-parent-2021/blob/trunk/source/wp-content/themes/wporg-parent-2021/theme.json, https://make.wordpress.org/design/2021/06/03/redesign-of-wordpress-org-news/

## Graphic elements: rules

The 2021 News redesign set the graphic language: a 'jazzy' look taken from jazz album art, carried by stroke shapes, type, layout and color because imagery on the blog is sparse. On today's site that shows as one Blueberry dry-brush stroke in the homepage hero, a 16px brush-stroke rule token in the theme, square-cornered cards with 1px light grey borders, and on the About page pencil-style arrows and circles.

Why it works: A single hand-made gesture against strict, quiet typography gives warmth and personality without competing with content, the 'jazzy versus minimal' balance the homepage post describes.

|  |  |
|---|---|
| Brush-stroke rule | 16px tall (custom.brush-stroke) |
| Radius | 2px buttons/fields; 0 cards |
| Separator | 150px wide, 30px vertical margin |

- One brush stroke or hand-drawn mark per view, in Blueberry or Charcoal
- Place pages on a spectrum from jazzy/expressive (homepage, About) to minimal/functional (download, docs) by content
- Cards and media square-cornered; buttons and fields 2px
- Brush-stroke rule element 16px tall
- Don't decorate functional pages (download, docs) with strokes
- Don't use glossy gradients or drop shadows

Real examples, to look at on WordPress's own pages (not for reuse):
- The homepage hero brush stroke: https://wordpress.org/
- 2021 concepts: strokes, type and color: https://make.wordpress.org/design/2021/06/03/redesign-of-wordpress-org-news/
- 2021 redesign detail: https://make.wordpress.org/design/2021/06/03/redesign-of-wordpress-org-news/

Sources: https://make.wordpress.org/design/2021/06/03/redesign-of-wordpress-org-news/, https://make.wordpress.org/design/2022/07/27/project-update-wordpress-org-homepage-and-download-page-mockups/, https://github.com/WordPress/wporg-parent-2021/blob/trunk/source/wp-content/themes/wporg-parent-2021/theme.json, https://wordpress.org/, https://wordpress.org/about/

## Iconography: rules

Current WordPress Icons live in Storybook and the WordPress Design Library in Figma. They sit on a 24px grid with 1.5px lines and 1-2px corners, front-facing and flat. Dashicons, the classic admin set, are deprecated but still available: 20px grid, 2px lines, 1px corners, friendly rounded edges, angled to the right.

Why it works: Strict grid and stroke rules keep thousands of contributor-made icons consistent in wp-admin, where they are judged in context.

|  |  |
|---|---|
| Grid | 24px (Dashicons 20px) |
| Stroke | 1.5px (Dashicons 2px) |
| Corners | 1px, 2px where appropriate |
| Style | facing, flat |

- 24x24px grid
- 1.5px lines, one edge hinted to the nearest whole pixel
- Corner radius 1px, 2px where appropriate
- Front-facing and flat, no faux 3D
- Simple: drop details that aren't needed
- Universal: check your demographics aren't shaping the symbol
- Consistent: check the icon in the wp-admin context
- Don't design new Dashicons for core: they are deprecated
- Don't add faux 3D or perspective

Sources: https://make.wordpress.org/design/handbook/design-guide/foundations/iconography/, https://developer.wordpress.org/resource/dashicons/, https://make.wordpress.org/design/2024/11/07/announcing-the-new-wordpress-design-system-figma-library/, https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library

## Illustration: rules

No illustration guidance is published. The redesign posts reference jazz album artwork as the mood, and the site uses brush strokes, hand-drawn arrows and product UI renderings (editor toolbars, block inserter tiles) instead of illustrations.

Why it works: Showing the real editor UI keeps the product honest; the brush and pencil marks supply the human touch.

- Prefer real product UI (blocks, toolbars) on white cards with a 1px border
- Hand-made marks over drawn characters
- Don't invent mascots or character illustrations

Not published: illustration style; illustration palette.

Real examples, to look at on WordPress's own pages (not for reuse):
- 2022 homepage design: editor UI and jazzy color sections: https://make.wordpress.org/design/2022/07/27/project-update-wordpress-org-homepage-and-download-page-mockups/

Sources: https://make.wordpress.org/design/2021/06/03/redesign-of-wordpress-org-news/, https://make.wordpress.org/design/2022/07/27/project-update-wordpress-org-homepage-and-download-page-mockups/, https://wordpress.org/

## Photography: rules

No photography guidance is published. Community photography on the homepage is black and white (its alt text says so), and the 2021 News redesign used black-and-white portraits from WordPress events.

Why it works: Monochrome photos of real contributors sit calmly next to a near-monochrome palette and let Blueberry stay the only color.

- Real WordPress people at real events
- Black and white for community photography
- Square-cornered, full-bleed within the content width
- Don't use staged stock imagery for community

Not published: photo treatment; cropping rules.

Real examples, to look at on WordPress's own pages (not for reuse):
- Homepage community photo, black and white: https://wordpress.org/

Sources: https://wordpress.org/, https://make.wordpress.org/design/2021/06/03/redesign-of-wordpress-org-news/

## Interface and layout: rules

The handbook publishes no grid. The WordPress.org theme does: a 680px content column, a 1160px wide column, 80px edge spacing, a spacing scale from 10px to clamp(80px, 13.33vw, 160px), and 30px base margins. Pages are built in the block editor, so sections are full-width groups that alternate White, Light Grey 2 and Charcoal.

Why it works: Building the site from blocks means the layout system is the product's own, which is the strongest proof of what WordPress can do.

|  |  |
|---|---|
| Content width | 680px |
| Wide width | 1160px |
| Edge spacing | 80px |
| Spacing 10-30 | 10px, 20px, 30px |
| Spacing 40 | clamp(30px, 5vw, 50px) |
| Spacing 50 | clamp(40px, calc(5vw + 10px), 60px) |
| Spacing 60 | clamp(20px, calc(10vw - 40px), 80px) |
| Spacing 70 | 100px |
| Spacing 80 | clamp(80px, calc(6.67vw + 40px), 120px) |
| Spacing 90 | clamp(80px, 13.33vw, 160px) |
| Buttons | 2px radius, 14px 32px padding |

- Content 680px; wide 1160px
- Edge spacing 80px desktop
- Spacing steps 10, 20, 30px, then fluid clamp() steps up to 160px
- Base margin 30px horizontal and vertical
- Sections full-width, alternating White / Light Grey 2, with Charcoal bands for showcase and the closing CTA
- Build pages with blocks in the editor
- Don't hard-code layouts the editor can't edit

Real examples, to look at on WordPress's own pages (not for reuse):
- 2022 homepage design, full length: https://make.wordpress.org/design/2022/07/27/project-update-wordpress-org-homepage-and-download-page-mockups/
- 2022 homepage and download page on mobile: https://make.wordpress.org/design/2022/07/27/project-update-wordpress-org-homepage-and-download-page-mockups/

Sources: https://github.com/WordPress/wporg-parent-2021/blob/trunk/source/wp-content/themes/wporg-parent-2021/theme.json, https://make.wordpress.org/design/2022/07/27/project-update-wordpress-org-homepage-and-download-page-mockups/, https://make.wordpress.org/meta/2022/08/01/developing-the-redesigned-home-and-download-pages/

## Rules: rules

The rules WordPress publishes are about the logo, the reserved logotype faces, icons and the trademark.

Why it works: For an open source project the trademark is the one thing that marks official quality, so the policy guards it.

- Logo proportions and W/2 safety margin as published
- Mrs Eaves and Dalliance in the logotype only
- EB Garamond headings, Inter text on WordPress.org
- Icons on a 24px grid, 1.5px strokes
- WordPress or WordCamp name/logo in a project needs Foundation permission
- Commercial use of the trademark is licensed through Automattic
- Don't put WordPress or WordCamp in a domain name
- Don't use the trademark in advertising
- Don't use the logo in your own logo or branding
- Don't use a fake (fauxgo) W

Real examples, to look at on WordPress's own pages (not for reuse):
- Fauxgo vs the real W: https://wordpress.org/about/logos/

Sources: https://make.wordpress.org/design/handbook/design-guide/foundations/identity/, https://make.wordpress.org/design/handbook/design-guide/foundations/typography/, https://make.wordpress.org/design/handbook/design-guide/foundations/iconography/, https://wordpressfoundation.org/trademark-policy/, https://wordpress.org/about/logos/

## By format

How our engine applies WordPress's system to each format. This is our recipe from their published rules and their own pages, not something WordPress publishes. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | Build it the way wordpress.org is built: white page, global header with the W mark and a Blueberry 'Get WordPress' button, EB Garamond 400 headline left-aligned with an Inter lede, one Blueberry brush stroke in the hero, sections alternating White and Light Grey 2, a Charcoal band, a closing 'Get started' band on Charcoal 2 with the 120px Inter Light CTA, Charcoal 2 footer with the trademark line; 2px-radius Blueberry buttons, square cards | which sections and how many cards; the About-page register (Linen ground, lowercase Inter headings, typewriter text, pencil marks) for mission or story pages |
| Deck | 2 | White or Charcoal slides, EB Garamond titles, Inter text, Blueberry for the one highlight, logo with W/2 clear space | a Blueberry title slide with a brush stroke; black-and-white photos |
| Social post | 3 | Blueberry or Charcoal ground, one Garamond line, white W mark or logotype | brush stroke or release artwork tiles from the accent families |
| Email / newsletter | 1 | White ground, Garamond headline, Inter 16/30 body, Blueberry links underlined, one Blueberry button | a Light Grey 2 news block |
| Blog post (News) | 1 | 680px column, Inter 16/30 long-text setting, Garamond headings, Blueberry underlined links | a brush-stroke rule between sections |
| Event / WordCamp page | 3 | Name and logo only with Foundation permission; never in a domain name | black-and-white community photos and accent tints |

## Checks before anything ships

- **Capital P**: Every 'WordPress' has a capital P.
- **Logotype faces**: No Mrs Eaves or Dalliance outside the logo.
- **One blue**: Links and primary buttons are Blueberry #3858E9; no other blue on WordPress.org pages.
- **Garamond weight**: Headings are EB Garamond 400, never bold.
- **Logo space**: W/2 clear space around the logo, official files only.
- **Trademark**: No WordPress in a product, company or domain name; no trademark in ads.

## Make it your own

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

## Not published

- Logo minimum size: not published.
- Logo misuse list beyond the 'fauxgo' comparison: not published.
- Color proportions or ratios: not published.
- Color roles for the WordPress.org palette in the handbook: not published there (the Colors page points to a Figma file); roles here come from the theme's code tokens.
- A contrast standard (ratio) for the palette: not published; the handbook links to accessibility resources only.
- Muted text and surface roles: not named as such; Charcoal 4 and Light Grey 2 are our reading of the theme tokens.
- Tone of voice, word list and grammar rules: not published.
- Motion (durations, easing): not published.
- Illustration style: not published.
- Photography treatment: not published (black and white is observed, not a rule).
- Layout grid in the handbook: not published (widths and spacing come from the theme code).
- Dark mode: not published.
- A licence for the logotype faces: they are Emigre faces and are not supplied.

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