# GNOME: brand book and build spec

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.

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

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

**Thesis (our reading):** One 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. Based on: Brand colors are steps of the HIG palette; Inter underlies Adwaita Sans; app icons and illustrations use the same palette.

## Purpose

Mission: Promote software freedom: open source principles, equality of participation and collaboration (paraphrase). (observed; https://www.gnome.org/about/)

Story: Founded in 1997 by two students to build a completely free desktop and take on the tech giants of the day. GNOME grew into the user experience for the main Linux distributions, with software used from space-flight control rooms to cars (paraphrase). (observed)

| Value | What it means in the work | Source |
|---|---|---|
| Design for People | Inclusive of abilities, cultures and devices; little specialist knowledge needed (paraphrase). | published: https://developer.gnome.org/hig/principles.html |
| Make it Simple | Do one thing well; avoid overwhelming people (paraphrase). | published: https://developer.gnome.org/hig/principles.html |
| Reduce User Effort | Automate, cut steps, keep text short (paraphrase). | published: https://developer.gnome.org/hig/principles.html |
| Be Considerate | Prevent mistakes, allow undo, respect time and attention (paraphrase). | published: https://developer.gnome.org/hig/principles.html |

## Fixed and flexible

Never changes:
- the foot logo in black or white
- primary Blue #3584E4
- Inter, heavy headings
- colors from the HIG palette
- plain, translatable words

The one thing that varies: which HIG secondaries and gradients a piece uses

## Positioning

- **Statement**: An independent computing platform for everyone. (observed)
- **Category**: Free and open source desktop environment and application platform for Linux (observed)
- **Audience**: Everyday computer users on Linux, app developers, and contributors and donors (paraphrase of homepage sections). (observed)
- **Problem**: Computing controlled by large vendors; old hardware cut off (the homepage points Windows 10 users to endof10.org) (paraphrase). (observed)
- **Promise**: An elegant, simple desktop that is free to use, open to all and respects privacy (paraphrase). (observed)
- **Differentiators**: Independent: community-built and run by a non-profit foundation; One-key overview workflow and workspaces; Consistent core apps plus the GNOME Circle and Flathub ecosystem; A published design system (the HIG) for apps

## Messaging

Boilerplate (observed): GNOME is a free, open source desktop and app platform, founded in 1997 by Miguel de Icaza and Federico Mena. It provides the user experience for the main Linux distributions, produces around 120 software modules, and is built by a global community of volunteers and paid contributors backed by the non-profit GNOME Foundation.

Taglines:
- An independent computing platform for everyone (Homepage H1 and page title)
- An easy and elegant way to use your computer (Homepage meta description)
- A more elegant way to use your computer (First homepage section heading)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Elegant and simple | A calm desktop that gets out of the way: one key for overview, launching and search; workspaces for room to breathe. | Super key opens an overview to switch, launch and search; Spread work across as many workspaces as needed | observed |
| Batteries included | Simple, consistent apps for everyday computing, so each new one feels familiar. | Core apps for everyday needs (apps.gnome.org); GNOME Circle certifies and mentors well-designed third-party apps | observed |
| Independent and open | Every part of the project is open; the software has no restrictions on use and respects privacy. | Software has no restrictions on use and respects privacy; Backed by the non-profit GNOME Foundation, a 501(c)(3) | observed |
| Everywhere Linux is | The default experience across major Linux distributions, with a developer platform and app store around it. | Default in Red Hat Enterprise Linux, Ubuntu, Debian, Fedora Workstation, SUSE Linux Enterprise, Vanilla OS, Endless OS; Flathub, the Linux app store, carries many more third-party apps | observed |

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "An independent computing platform for everyone" | homepage H1 | https://www.gnome.org/ |
| "Room to Breathe" | homepage H2 | https://www.gnome.org/ |
| "Batteries Included" | homepage H2 | https://www.gnome.org/ |

## Voice

Tone words: Plain, Inclusive, Considerate, Warm, Open.

Traits:
- Simple, but not Bare (published)
- Inclusive, but not Technical (published)
- Considerate, but not Interrupting (published)
- Open, but not Closed (observed)

- Two voices. The HIG writing style governs UI text: short, neutral, header capitalization, no trailing periods. The website voice is warmer and plainer marketing English: short headings in title case, one or two sentence paragraphs, an occasional friendly aside (observed on www.gnome.org).
- A landing page follows the website voice: Title Case headings, sentence-case body with periods, second person allowed ("your computer").
- Community and openness carry the brand: get involved, donate, independent, for everyone.
- Never claims GNOME endorses or produces a third-party product without written permission (trademark rule).

Rules a copy check enforces:
- 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"
- Title case headlines
- Sentence capitalization for labels that form sentences and for body, dialog and notification text
- Avoid Latin abbreviations; write "for example"
- End a label with … only when more input is needed before the action runs (Save As…)
- UI headings and descriptions do not end with a period, unless the text runs to several sentences
- Do not capitalize every letter (no all caps)
- Avoid italic and oblique faces
- Use proper Unicode: curly quotes, × for dimensions, … for ellipsis, ’ apostrophe, • bullets, – for ranges, narrow no-break space before units
- Write GNOME and GTK in all capitals; Flatpak and Flathub with only the first letter capitalized
- Use the names as a generic name or adjective, never as a noun or verb, and never compound or modify them
- Third parties mark the GNOME name as registered with ®
- Use standard GNOME terms for UI parts (pointer, window) and the user's own vocabulary over system terms

Never: i.e., e.g., Gnome (mixed case).

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Blue | #3584E4 | accent | Primary. Headings in the brand book, the cover field, the hero Donate button. |
| Orange | #FF7800 | accent_secondary | Secondary. Logo ground variant; warm end of brand gradients. |
| Purple | #9141AC | secondary | Secondary. Logo ground variant; end of the Support Us gradient. |
| Green | #33D17A | secondary | Secondary. Logo ground variant (dark logo on it). |
| Red | #E01B24 | secondary | Secondary. Red end of the brand gradient. |
| White | #FFFFFF | paper | Neutral. Logo ground; logo color on dark and color grounds. |
| Grey | #77767B | ink_muted | Neutral. Logo ground variant (white logo). |
| Quite Black | #241F31 | ink (brand) | Neutral. Dark logo ground (white logo); the dark logo color in the brand book. |
| Page ground | #EEEEEE | surface | Observed: www.gnome.org body ground. |
| HIG Blue 5 | #1A5FB4 | band | Observed: Get GNOME band and links on light. |
| HIG Dark 3 | #3D3846 | card | Observed: Developer Platform tile. |
| Footer | #1A1622 | night | Observed: footer ground. |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Inter | Open (SIL OFL 1.1) | Inter | InterVariable, "Inter Variable", Inter, sans-serif |
| body | Inter | Open (SIL OFL 1.1) | Inter | InterVariable, "Inter Variable", Inter, sans-serif |
| mono | not published | n/a | Source Code Pro | monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 (#subtitle) | --text-display-hero-* | Inter | 32.4px | 23.4px | 1.25 | -0.32px | 800 |
| Section H2 | --text-display-h2-* | Inter | 27px | 27px | 1.25 | -0.27px | 800 |
| Tile H4 | --text-display-h4-* | Inter | 21.6px | 21.6px | 1.25 | -0.22px | 800 |
| Wordmark text | --text-logo-* | Inter | 25.2px | 25.2px | 1.25 | -0.18px | 900 |
| Body / lead | --text-body-* | Inter | 18px | 18px | 1.6 | -0.18px | 400 |
| Nav link | --text-nav-* | Inter | 18px | 18px | 1.6 | -0.18px | 600 |
| Button label | --text-button-* | Inter | 18px | 18px | 1.6 | -0.18px | 600 |
| Banner title | --text-banner-title-* | Inter | 18px | 16.2px | 1.5 | -0.18px | 700 |
| Banner line | --text-banner-line-* | Inter | 16.2px | 14.4px | 1.5 | -0.18px | 600 |
| Small button (dark tile) | --text-button-small-* | Inter | 14.4px | 14.4px | 1.6 | -0.18px | 600 |
| Inline button | --text-button-inline-* | Inter | 16.2px | 16.2px | 1.6 | -0.18px | 600 |
| Footer link | --text-footer-* | Inter | 18px | 14.4px | 1.8 | -0.18px | 600 |
| Copyright | --text-legal-* | Inter | 12.6px | 12.6px | 1.6 | -0.18px | 400 |

## Layout

Measured on https://www.gnome.org/: computed styles and element boxes measured with Playwright at 1440x900 and 390x844 (light color scheme), plus the site stylesheet www.gnome.org/style.css, on 2026-10-30.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 162px | 18px |
| Section padding | 36px | 36px |
| Container max width | 1116px | full |
| Hero text width | max 517px | full |
| Grid columns | 5 | 1 |
| Gutter | 54px | 18px |
| Card gap | 18px | 18px |
| Navigation height | 62px | 62px |

Breakpoints from GNOME's CSS: 500, 600, 700, 750, 800px.

Homepage bands, top to bottom (observed):
1. Hero
   - Desktop: 0-1092
   - Phone: 0-841
   - header inside the hero, no bar
2. Overview: A more elegant way to use your computer
   - Desktop: y 1128-1457 (container margin-top 36px)
   - Phone: art first (354x189 at y 877), H2 2 lines at y 1092, paragraph 4 lines
   - Paragraph includes an inline Super Key chip (super_key_chip: gradient #99C1F1 to #8FF0A4, 12px radius, 12px icon + monospace bold "Super Key")
   - No button
   - Copy: H2 "A more elegant way to use your computer"; paragraph ends "It's magic."
3. Workspaces: Room to Breathe
   - Desktop: y 1457-2120
   - Section is the only full-bleed image band
   - Caption class max-width 30ch
4. Apps: Batteries Included
   - Desktop: y 2156-2565
   - Phone: art first 354x236 at y 1693, H2 y 1956, paragraph 4 lines, button left-aligned y 2150
   - button_default "Core Apps"
5. Ecosystem
   - Desktop: y 2601-3754
   - Tile titles: "GNOME Circle" (circle icon), "Flathub" (Flathub icon), "Developer Platform"
   - Button icons: wrench-like developer icon and a pencil-in-square design icon, 16px white
6. Get Involved
   - Desktop: y 3790-4199
   - Phone: art first, H2 y 4235, paragraph 4 lines, buttons one column 354x50 with 18px gaps, closing line 2 lines
   - button_choice_square x4: Code, Design, Translation, Testing
7. Get GNOME
   - Desktop: y 4235-5066 (831px), padding-top 72px, no bottom padding; margin-bottom 54px
   - Phone: y 4805-5364
   - Text color #F6F5F4 (HIG Light 2); links #FFFFFF 600
   - button_inline_on_blue "Latest Release"
   - Lid is a three.js canvas: animation only; place the still image
8. Supporting Organizations
   - Desktop: y 5156-5847
   - Logos in their own colors (supplied SVGs); hover scale 1.1
9. Support Us
   - Desktop: y 5847-6306, padding 72px top and bottom
   - Phone: y 7019-7535
   - button_on_gradient "Donate"
10. Footer
   - Desktop: 6305-6647
   - Phone: 7535-8066
   - padding 36px top, 72px bottom
   - ul x 108-1332 with 40px left padding; CSS columns 12rem (227px wide, 12px gap) => 5 columns at x 148, 387, 626, 865, 1105
   - links 18px/32.4px 400 #FFFFFF, left-aligned, underline only on hover

## Page anatomy

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

**Navigation**
- summary: No bar: the header sits inside the hero gradient. GNOME logo (foot + wordmark, black) at left; at right a language globe icon and two text links in pill hit areas. Not sticky.
- ground: transparent over the hero gradient (#EEEEEE at the top)
- height: header block y 18-115 (97px); ul.nav min-height 62px; links 40px tall at y 37
- border: none
- logo: variant horizontal lockup, black #000000 (fill currentColor); px 133x53 (svg height 4ex at 25.2px); position x 162, y 36; file https://www.gnome.org/
- links: count 3; labels [globe icon, 22px] , About Us, Get Involved; size 18px/28.8px; weight 600; color #000000; alignment right-aligned ending x 1278: globe 956 (58x40), About Us 1018 (114x40), Get Involved 1135 (141x40); padding 5.4px 18px; pill hover rgba(0,0,0,0.05); files https://www.gnome.org/; weight note CSS says 500 but the a rule's font-variation-settings "wght" 600 wins on InterVariable
- actions: none (no button in the header)
- sticky: false
- phone: Header stacks and centres: logo centred at y 36 (x 129); the three nav items centred on the next row, y 117-157. No hamburger.

**Hero**
- summary: Centred hero on a pale blue wash: a large product render of a laptop running GNOME, a two-line 800-weight headline under it, then two stacked rounded info banners (Donate, Windows 10). Faint blue triangle fragments sit bottom-left behind it.
- ground: Body #EEEEEE under linear-gradient(to top, #CCDEF9 at 67% alpha, transparent), tris-l.svg bottom left at 1024px wide (#1C71D8 shapes at 0.108 opacity), then linear-gradient(to top, #CCDEF9, transparent). Renders #EEEEEE at y 0 fading to #CCDEF9 at the bottom edge y 1092.
- desktop: band y 0-1092, full width, content centred in a 900px column; media laptop render: element box 900x536 at x 270, y 133; the image (2048x1200) is object-fit contain inside it, so it draws 900x527; no frame, no shadow; h1 y 687, 517px wide (max 24ch), 2 lines: "An independent computing / platform for everyone", 32.4px/40.5px 800 #000000, centred; banners container x 270-1170 with 54px side padding: banners 792px wide at x 324; banner 1 y 840 h 97 with the Donate button right (115x50 at x 968); banner 2 y 950 h 87 text only; 12px gap; bottom 54px below the last banner
- phone: order header (logo, then nav row), laptop 390x237 at y 195 (edge to edge), H1 23.4px/29.25px 2 lines at y 450, banners 354 wide at y 580 and 690 (96px each), hero ends y 841; alignment centred; banner text left-aligned
- at rest: Static: the laptop is a still image (no animation). Banners at rest fill #DBE9FA.
- media: file https://www.gnome.org/img/laptop.webp; note transparent PNG 2048x1200 of the laptop with the GNOME overview on screen
- type: H1 Inter 800 32.4px; banner title 18px 700; banner line 16.2px 600 black at 70%
- cta: One button only: Donate, #3584E4 pill, white 700 18px, 115x50, inside banner 1
- proof: none in the hero

**Overview: A more elegant way to use your computer**
- summary: Two-column feature row: heading and paragraph left, a full-color illustration of a hand pressing the Super key right, bleeding off the right edge.
- ground: #EEEEEE
- desktop: band y 1128-1457 (container margin-top 36px); text left-text x 162-810 (648px): H2 27px/33.75 800 at y 1237 (1 line), paragraph 18px/28.8 at y 1289 (2 lines), vertically centred; media shell.svg 600x320 at x 864, y 1128, clipped at the page edge (576px visible)
- phone: order art first (354x189 at y 877), H2 2 lines at y 1092, paragraph 4 lines
- anatomy:
  - Paragraph includes an inline Super Key chip (super_key_chip: gradient #99C1F1 to #8FF0A4, 12px radius, 12px icon + monospace bold "Super Key")
  - No button
  - Copy: H2 "A more elegant way to use your computer"; paragraph ends "It's magic."
- components:
  - super_key_chip

**Workspaces: Room to Breathe**
- summary: Full-width strip of three app-window groups on pale blue panels joined by blue arrows (one wide image), then a centred heading and a two-line caption.
- ground: #EEEEEE
- desktop: band y 1457-2120; media workspaces-l.png 1918x500 at y 1493, centred (x -239), wider than the viewport and clipped; the image itself carries the light-blue rounded panels; text H2 centred y 1993; caption max 30ch (339px) centred at y 2044, 2 lines
- phone: media 702x183 at y 1347 centred and clipped; text H2 y 1530, caption 2 lines
- anatomy:
  - Section is the only full-bleed image band
  - Caption class max-width 30ch

**Apps: Batteries Included**
- summary: Mirror of the first row: a cluster of app icons on the left (bleeding off the left edge), heading, paragraph and a grey pill button on the right.
- ground: #EEEEEE
- desktop: band y 2156-2565; media apps.svg 600x400 at x -24 (left-img, justify end), drop-shadow 0 1.4px 1.8px rgba(0,0,0,.2) + 0 7.2px 12.6px rgba(0,0,0,.1); text right-text x 630-1278: H2 y 2253, paragraph 3 lines y 2304, Core Apps button 143x50 at y 2418
- phone: order art first 354x236 at y 1693, H2 y 1956, paragraph 4 lines, button left-aligned y 2150
- anatomy:
  - button_default "Core Apps"
- components:
  - button_default

**Ecosystem**
- summary: Heading then a 2-column tile grid: two illustrated tiles with a small icon + title + one-line description, and a full-width dark Developer Platform card with a code-editor screenshot and two small dark buttons.
- ground: #EEEEEE
- desktop: band y 2601-3754; h2 "Ecosystem" left at y 2619 (margin 18px top as first child); grid 2 columns 549px, 18px gap, starting y 2679; tiles each: image 549x300 radius 12px (object-fit cover, bottom centre) at y 2679; H4 21.6px 800 with a 16px black symbolic icon before it at y 3006; paragraph 18px 2 lines at y 3042. Tile 1 GNOME Circle (green illustration), tile 2 Flathub (blue screenshot illustration); dev tile spans both columns: 1116x546 at y 3154, #3D3846, radius 24px, overflow hidden; art devs-illu.svg 1116x300 flush top (no radius); body padding 54px: H4 white y 3508, line at 70% white y 3544, buttons y 3596 (Developer Portal 191x45, Design System 179x45, 16px gap)
- phone: grid 1 column 354px; tiles stack (Circle 485 tall, Flathub 456), dev tile 354x572 with 18px padding, buttons stack left-aligned with 6px radius
- anatomy:
  - Tile titles: "GNOME Circle" (circle icon), "Flathub" (Flathub icon), "Developer Platform"
  - Button icons: wrench-like developer icon and a pencil-in-square design icon, 16px white
- components:
  - tile_image
  - dev_tile
  - button_dark_tile

**Get Involved**
- summary: Heading, paragraph and a 2x2 grid of square-cornered grey choice buttons on the left, a blueprint illustration (blue panel, compass, pencil, set square) on the right.
- ground: #EEEEEE
- desktop: band y 3790-4199; text left-text x 162-810: H2 y 3848, paragraph 2 lines y 3900, button grid y 3975 (315x50 x4, 18px gaps, rows y 3975 and 4044), closing line y 4112 with a #1A5FB4 600-weight link "other teams"; media design.svg 600x400 at x 864, y 3790, clipped at right edge
- phone: order art first, H2 y 4235, paragraph 4 lines, buttons one column 354x50 with 18px gaps, closing line 2 lines
- anatomy:
  - button_choice_square x4: Code, Design, Translation, Testing
- components:
  - button_choice_square

**Get GNOME**
- summary: Full-bleed blue band: centred white heading, a three-line paragraph listing distributions in bold white links, a sentence with an inline Latest Release pill, then a laptop lid (3D) rising from the bottom edge.
- ground: #1A5FB4
- desktop: band y 4235-5066 (831px), padding-top 72px, no bottom padding; margin-bottom 54px; text H2 #F6F5F4 centred y 4361; paragraph 670px wide (60% of main) centred y 4431, 3 lines, distro names as white 600-weight links; second line y 4553 "See what's new in the" + inline pill; media laptop lid at rest: 1152x453 at x 144, y 4613, flush to the band bottom (supplied image get-gnome-lid-desk.png: dark screen with a music app and an app-store page, brown keyboard deck at the bottom edge)
- phone: band y 4805-5364; text paragraph 354 wide 5 lines; media lid 312x123 at y 5241 (get-gnome-lid-phone.png)
- anatomy:
  - Text color #F6F5F4 (HIG Light 2); links #FFFFFF 600
  - button_inline_on_blue "Latest Release"
  - Lid is a three.js canvas: animation only; place the still image
- components:
  - button_inline_on_blue

**Supporting Organizations**
- summary: Centred heading, a wrapped row of full-color partner logos, a centred line, then a second wrapped row of infrastructure partner logos.
- ground: #EEEEEE
- desktop: band y 5156-5847; h2 centred y 5174; row1 flex wrap, centred, 54px gap, logos 40px tall, 72px margins above and below: Google, SUSE, Canonical, Codethink, Red Hat on line 1 (y 5298), Endless, Igalia on line 2 (y 5392); line "Infrastructure and services kindly provided by:" centred y 5522; row2 ClouDNS, Abusix, Fastly, CDN77, OSU OSL, Equinix, AWS on line 1 (y 5641); Canonical, Red Hat, MacStadium, miniOrange on line 2
- phone: rows one logo per line, centred, 94px pitch (40px logo + 54px gap); row 1 y 5595-6199, line at y 6289, row 2 from y 6437
- anatomy:
  - Logos in their own colors (supplied SVGs); hover scale 1.1

**Support Us**
- summary: Full-bleed band with a diagonal blue-to-purple radial gradient, centred white heading, paragraph and a translucent white pill Donate button.
- ground: #1A5FB4
- desktop: band y 5847-6306, padding 72px top and bottom; ground radial-gradient(at left top, #1A5FB4, #9141AC); text H2 #F6F5F4 centred y 5973; paragraph 670 wide 3 lines y 6042; Donate 132x50 centred y 6165
- phone: band y 7019-7535; text paragraph 5 lines
- anatomy:
  - button_on_gradient "Donate"
- components:
  - button_on_gradient

**Footer**
- summary: Dark aubergine footer: 16 links in 4 flowing columns plus a social-icon column, then a tiny centred copyright line.
- ground: #1A1622
- anatomy:
  - padding 36px top, 72px bottom
  - ul x 108-1332 with 40px left padding; CSS columns 12rem (227px wide, 12px gap) => 5 columns at x 148, 387, 626, 865, 1105
  - links 18px/32.4px #FFFFFF, rendered weight 600 (CSS font-weight 400 is overridden by font-variation-settings "wght" 600), left-aligned, underline only on hover
  - col 1: Contact Us, About Us, Donate, GNOME Foundation
  - col 2: Code of Conduct, Privacy, Welcome to GNOME, GNOME Handbook
  - col 3: Issue Tracker, Developer Center, Latest Releases, This Week in GNOME
  - col 4: Events, Forum, Planet GNOME, Logo & Brand
  - col 5: three 32px social icons (Mastodon, YouTube, Matrix) at y 6341, 12px apart, fill white at 60%
  - copyright "© 2026 The GNOME Project" 12.6px centred at y 6543
  - No address, no phone number, no logo in the footer
- phone: 2 columns at 14.4px (links x 40 and ~221); socials at the end of column 2 (y 7846); copyright y 7961
- files:
  - https://www.gnome.org/
  - https://www.gnome.org/
  - https://www.gnome.org/

**On dark grounds**
- secondary button: rgba(255,255,255,0.12) fill, white 600 text (#54505C on #3D3846)
- link: #FFFFFF 600 on blue and gradient bands; #1A5FB4 600 on light
- muted text: white at 70% opacity on #3D3846; #F6F5F4 body on #1A5FB4
- hairline: none used
- logo variant: white logo on dark (brand rule); the homepage shows no logo on dark

## Components

- **button default** (observed): face body, fill #D6D6D6, text #000000, radius pill, height 50, padding x 27, font size 18, weight 600, example Core Apps (143x50). Fill is rgba(0,0,0,0.1) on #EEEEEE drawn on an ::after layer; padding 10.8px 27px; margin 5.4px
  - hover (observed): note only the fill layer (::after) scales to 1.05; the label stays put; no underline
- **button suggested hero** (observed): face body, fill #3584E4, text #FFFFFF, radius pill, height 50, padding x 27, font size 18, weight 700, example Donate in the first hero banner (115x50; phone 88x39 at 15.3px)
  - hover (observed): note fill layer scales to 1.06
- **button choice square** (observed): face body, fill #D6D6D6, text #000000, radius 14.4, height 50, padding x 27, font size 18, weight 600, example Code / Design / Translation / Testing, 315x50 in a 2x2 grid, 18px gap; phone one column 354x50
- **button dark tile** (observed): face body, fill #54505C, text #FFFFFF, radius 14.4, height 45, padding x 27, font size 14.4, weight 600, example Developer Portal (191x45) and Design System (179x45) with a 16px white symbolic icon 0.4em before the label; phone radius 6px
- **button on gradient** (observed): face body, fill #FFFFFF, text #FFFFFF, radius pill, height 50, padding x 36, font size 18, weight 600, example Donate in Support Us (132x50), centred, fill alpha 0.12. fill is white at 12% alpha (rgba(255,255,255,0.12)) over the gradient
- **button inline on blue** (observed): face body, fill #1756A2, text #FFFFFF, radius pill, height 33, padding x 16.2, font size 16.2, weight 600, example Latest Release inline in a sentence (143x33)
- **nav link** (observed): face body, fill none, text #000000, radius pill, height 40, padding x 18, font size 18, weight 600. hover fill rgba(0,0,0,0.05); rendered at 600 via font-variation-settings
- **hero banner** (observed): face body, fill #DBE9FA, text #000000, radius 12, padding 18px 27px desktop, 14.4px 18px phone. flex row, space-between: two-line text left (title 18/700, line 16.2/600 at 70%), optional button right; hover fill mixes to 85% white
- **super key chip** (observed): face body, fill linear-gradient(to right, #99C1F1, #8FF0A4), text #000000, radius 12, padding 1.8px 7.2px, font size 12.6, weight 700. inline <kbd> in body copy: 12px four-square symbolic icon + "Super Key" in monospace bold, 98x24
- **tile image** (observed): face body, radius 12, height 300. image 300px tall, object-fit cover, object-position bottom center, full tile width
- **dev tile** (observed): face body, fill #3D3846, text #FFFFFF, radius 24. full-width dark card: art 300px top edge to edge, then 54px padding (18px phone); body copy at 70% opacity

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| button-hover | cubic-bezier(.17,.89,.32,1.28) | 200ms | Button fill scales to 1.05 (1.06 for the hero Donate) on hover; --slickease overshoot | observed |
| tile-hover | cubic-bezier(.17,.89,.32,1.28) | 300ms | Ecosystem tiles transition all properties | observed |
| nav-link | ease-out | 300ms | Nav link pill background on hover (rgba(0,0,0,0.05)) | observed |
| sponsor-hover | ease-out | 300ms | Sponsor logos scale to 1.1 on hover | observed |
| laptop-lid |  |  | Get GNOME band: a three.js laptop lid opens as the band scrolls into view. Animation only; the static resting state is the supplied lid image | observed |

## Icon tokens

Grid 2px grid (app icons); pixel grid (symbolic), stroke 2px main strokes on symbolics; 1px avoided (published).
| Name | Size | Use |
|---|---|---|
| symbolic | 16px | UI icons; also usable at 32, 64 and 128, no other sizes |
| app | 128px | App icons, viewed at 64 and down to 32 |

## Signature moves

### Rounded triangle fragments (tris)

Where: Brand book cover, page corners and back cover; the homepage hero (tris-l.svg, bottom left, 1024px wide).
Do: Right-angle triangles and half-squares with softly rounded corners, scattered along a diagonal grid, all one hue at low opacity: white about 10-20% on Blue in the brand book; HIG Blue 4 #1C71D8 at 0.108 opacity on the light hero. Never full strength, never behind text that needs contrast. One cluster per surface, anchored to a corner.
Don't: draw them at full opacity or in several colors, or rotate them off the 45° grid.
Example: "brand.gnome.org".

### Vivid HIG gradients

Where: Brand book Gradients page (orange-yellow to red-purple); homepage Support Us band (radial #1A5FB4 to #9141AC).
Do: Gradients from HIG palette colors, interpolated in HSL or LAB so the midpoint stays vivid. Homepage: radial-gradient(at left top, #1A5FB4, #9141AC).
Don't: interpolate in RGB: muddy grey midpoints.

### Solid Blue field

Where: Brand book cover and back cover (#3584E4); homepage Get GNOME band in HIG Blue 5 #1A5FB4.
Do: Full-bleed blue with white type and the white logo or tris.
Don't: tint it with other hues.

### Full-color flat illustration

Where: Homepage section art (shell.svg, apps.svg, design.svg, circle and flathub tiles).
Do: Computer imagery with everyday objects, HIG palette fills, geometric shapes, flat color with gradients only on curved surfaces, no people or faces.
Don't: add people, faces or textures.

## Messaging: rules

The homepage carries four ideas: elegance (one key, room to breathe), batteries included, an open community to join, and GNOME as the default across Linux. Donations close the page.

Why it works: A non-profit desktop sells use and participation at once, so every product claim is followed by a way to join or give.

|  |  |
|---|---|
| H1 | An independent computing platform for everyone |
| Asks | Donate, Get Involved |

- Lead with the experience, then the ecosystem, then participation
- Name real distributions and partners as proof
- Close with a donation ask
- Don't invent user counts or market share: none are published on the homepage

Sources: https://www.gnome.org/, https://www.gnome.org/about/

## Voice: rules

UI writing is neutral, short and strictly capitalized (header vs sentence capitalization). The website is warmer: Title Case headings, short friendly paragraphs ("It's magic.").

Why it works: Text written to be translated into many languages has to be short, literal and free of idioms; the warmth lives in the web copy, not the UI.

|  |  |
|---|---|
| Headings | Header capitalization |
| Body | Sentence case |

- Header capitalization for headings and button labels
- Sentence capitalization for body and labels that form sentences
- No Latin abbreviations
- Ellipsis only when more input follows
- No all caps, no italics
- GNOME and GTK in capitals; never a noun or verb
- Don't write "Gnome"
- Don't end UI headings with a period
- Don't use "my" for the user's things

Do and don't:
- Do: "Find and Replace". Header capitalization for a label.
- Don't: "FIND AND REPLACE". No all caps.

Sources: https://developer.gnome.org/hig/guidelines/writing-style.html, https://developer.gnome.org/hig/guidelines/typography.html, https://foundation.gnome.org/trademark-and-logo/

## Logo: rules

The GNOME foot beside a bold humanist wordmark, in a horizontal or a vertical lockup, only ever black or white. The foot can stand alone, but the lockup is preferred.

Why it works: A single-color mark that is never restyled stays recognizable across a huge volunteer community making their own materials.

|  |  |
|---|---|
| Lockups | horizontal, vertical |
| Colors | black or white |
| Clear space | 0.2x foot width (brand book); 1/10 (Foundation diagram) |
| Minimum size | not published (keep the letters legible) |

- Use the logo as provided, horizontal or vertical; keep the aspect ratio
- Black or white only, chosen for the ground
- Clear space: the brand book asks 0.2 x the foot width on all sides (p.5); the Foundation page diagram shows 1/10
- Nothing placed closer than 20% of the logo graphic width
- On busy or photo grounds, raise the contrast so it stays legible
- Third parties need written permission from the GNOME Foundation to use the logo
- Don't stretch or rotate it
- Don't add elements such as a URL under it
- Don't add a drop shadow or recolor it
- Don't retype the wordmark (e.g. "Gnome")
- Don't turn the foot into a pattern
- Don't embed it in other images

Real examples, to look at on GNOME's own pages (not for reuse):
- Horizontal and vertical lockups with clear space: GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.5
- Incorrect logo usage: GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.6
- Color variations on brand grounds and photos: GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.7

Sources: https://foundation.gnome.org/trademark-and-logo/, GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.5, GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.6, GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.7

## Color: rules

One primary blue, four bright secondaries, three neutrals, all drawn from the larger HIG palette of nine five-step ramps. The site adds pale blue washes, HIG Blue 5 bands and a blue-to-purple gradient.

Why it works: Sharing one palette between brand, app icons and illustrations makes everything GNOME ships look like one family.

|  |  |
|---|---|
| Primary | Blue #3584E4 |
| Dark mode | HSL luminance x 0.85 |

- 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
- Logo ground pairs: dark logo on White and Green; white logo on Grey, Quite Black, Blue, Purple, Orange
- Don't interpolate gradients in RGB (muddy grey midpoints)
- Don't use UI elements from GNOME apps as brand graphics

Do and don't:
- Do: "GNOME". White on Blue, as on the brand book cover.
- Don't: "GNOME". On Green the brand book uses the dark logo, not white.

Real examples, to look at on GNOME's own pages (not for reuse):
- Primary, secondary and neutral colors: GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.4
- A brand gradient: GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.10

Sources: https://brand.gnome.org/, https://developer.gnome.org/hig/reference/palette.html, GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.4, GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.10

## Typography: rules

Inter everywhere outside the UI: Heavy for headers, Bold for small headers, Normal for body. GNOME's UI face Adwaita Sans is built on Inter, so print, web and software feel related.

Why it works: One open typeface with a heavy weight gives volunteers a free, consistent voice in any medium.

|  |  |
|---|---|
| Brand face | Inter (OFL) |
| UI face | Adwaita Sans |
| Web H1 | 32.4px 800 |

- 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
- No italics, no all caps
- Don't use Adwaita Sans or Cantarell for brand materials: they are UI faces

Real examples, to look at on GNOME's own pages (not for reuse):
- Type scale: GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.3

Sources: https://brand.gnome.org/, https://developer.gnome.org/hig/guidelines/typography.html, GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.3

## Graphic elements: rules

Rounded triangle fragments scattered on a 45° grid at low opacity, solid Blue fields, and vivid HIG gradients.

Why it works: The fragments read as GNOME without the foot, and stay quiet enough to sit behind type.

|  |  |
|---|---|
| Tris on light | #1C71D8 at 0.108 |
| Tris on Blue | white, low opacity |

- Use tris in one corner cluster at 10-20% opacity
- One hue per surface for the tris
- Solid Blue field with white type for covers
- Don't full-opacity tris
- Don't multicolored tris

Real examples, to look at on GNOME's own pages (not for reuse):
- Cover: Blue field, white logo and tris: GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.1
- Back cover tris cluster: GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.11

Sources: GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.1, GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.11, https://www.gnome.org/

## Iconography: rules

Symbolic icons: monochrome, 16px, 2px strokes, orthogonal. App icons: simple geometric objects with a darker front profile, from the HIG palette.

Why it works: Icons recolored by code stay consistent at every size and theme.

|  |  |
|---|---|
| Symbolic | 16px, 2px stroke |
| App icon | 128px, 2px grid |

- Symbolic 16px, usable at 32, 64, 128 only
- 2px strokes, align to the pixel grid
- No perspective in symbolics
- App icons 128px on a 2px grid, light from straight above
- Larger than 12pt text, use a lighter icon color
- Don't use mascots or characters as app icons
- Don't draw shadows outside the silhouette

Real examples, to look at on GNOME's own pages (not for reuse):
- Symbolic icons: GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.9

Sources: https://developer.gnome.org/hig/guidelines/ui-icons.html, https://developer.gnome.org/hig/guidelines/app-icons.html, GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.9

## Illustration: rules

Two styles: full color (computer imagery with everyday objects, flat fills, geometric) and blueprint (low-fidelity blue and white UI sketches).

Why it works: Illustration explains concepts where a photo is too specific and a diagram too abstract.

|  |  |
|---|---|
| Styles | full color, blueprint |

- Full color: HIG palette, flat fills, gradients only on curved surfaces, geometric shapes
- No people or faces
- Blueprint: toned-down blue and white, UI as blocks, isometric allowed
- Don't textures
- Don't people and faces

Real examples, to look at on GNOME's own pages (not for reuse):
- Illustration example: GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.8

Sources: https://gitlab.gnome.org/Teams/Design/app-illustrations/-/blob/master/README.md, GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.8

## Photography: rules

Not published as a style. The brand book shows the logo on two photos (a desk scene, hands on a backlit keyboard); the homepage uses renders and illustrations, no photos.

Why it works: GNOME prefers product renders and illustration over stock photography.

|  |  |
|---|---|
| Style | not published |

- If a photo is used, keep the logo legible by raising contrast

Real examples, to look at on GNOME's own pages (not for reuse):
- Logo on photographs: GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.7

Sources: GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.7

## Motion: rules

No brand motion guidance. The site uses one overshoot ease for button hovers and a scroll-driven 3D laptop lid.

Why it works: Small, springy feedback matches the desktop's feel.

|  |  |
|---|---|
| Ease | cubic-bezier(.17,.89,.32,1.28) |

- Hover: scale fills to 1.05 in 200ms with cubic-bezier(.17,.89,.32,1.28) (observed)

Sources: https://www.gnome.org/

## Interface and layout: rules

A centred 1116px main column on a 5-column grid with 54px gaps; text half-columns paired with art that bleeds to the page edge; colored full-bleed bands for calls to action.

Why it works: Alternating text and edge-bleeding art keeps a long page calm and open.

|  |  |
|---|---|
| Main column | 1116px |
| Gap | 54px |

- 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

Sources: https://www.gnome.org/

## Rules: rules

The brand book is short and practical: logo as provided, palette first, Inter only, gradients done in HSL.

Why it works: Written for volunteers making leaflets, posters and sites.

|  |  |
|---|---|

- Brand book is for project materials, not app UI
- Logo black or white only
- Clear space 0.2x foot width
- Colors from the brand palette
- Inter for print and web
- HIG gradients in HSL or LAB
- GNOME in capitals, ® for third parties
- Don't reuse GNOME UI elements as brand graphics
- Don't modify the logo
- Don't imply GNOME endorsement without written permission

Real examples, to look at on GNOME's own pages (not for reuse):
- Introduction: scope of the brand book: GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.2

Sources: https://brand.gnome.org/, GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.2, https://foundation.gnome.org/trademark-and-logo/

## Applications

| Format | What | Source |
|---|---|---|
| brand book / print | Blue cover with white logo and tris; white pages with blue Inter Heavy headings and a tris cluster top right | GNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.1 |
| talk slides | A LibreOffice Impress template is published for GNOME talks | https://brand.gnome.org/ |

## By format

How our engine applies GNOME's system to each format. Our recipe from their rules, not something GNOME publishes. Level = how much color and pattern a format carries. 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 www.gnome.org is built (kit.spec.page, website voice): #EEEEEE page, hero fading to #CCDEF9 with faint blue tris bottom-left, black logo top left and two text nav links right, product render, 32px Inter 800 centred H1, #DBE9FA rounded banners; alternating text/art rows with art bleeding off the edge; translucent grey pill buttons; HIG Blue 5 band and a blue-to-purple gradient band; #1A1622 footer | which feature rows and how many tiles |
| Print / slides | 3 | Blue field or white page, Inter Heavy headings (Header 2 in Blue), tris cluster in a corner, logo black or white with 0.2x clear space | secondary color and gradient choice |
| Social | 3 | Blue or HIG gradient ground, white logo, short Title Case line | illustration |

## Checks before anything ships

- **Logo hidden**: Cover the foot. Blue plus soft rounded triangles, Inter Heavy and a flat HIG-palette illustration should still say GNOME.
- **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.

## 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 GNOME'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 (only "keep the letters legible").
- Clear space disagrees: brand book p.5 says 0.2x the foot width; the Foundation diagram shows 1/10.
- CMYK and Pantone values: not published.
- Color proportions: not published.
- Pixel type scale for web: not published (sizes on the homepage are observed).
- Layout grid, spacing, button and card styles: not published (observed from www.gnome.org).
- Photography style: not published.
- Motion principles: not published.
- A mono face for brand use: not published.
- The brand book (rev 2.2) is a PDF with outlined text; values were read from its rendered pages.

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