Brand books Draft · facts being checked

Brand book

GNOME

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. Our reading

The system

Fixed, everywhere

GNOME logo
Logo
Blue
Signature color
AaInter + Inter
Type pairing
  • 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

How loud each format gets

Silent
Quiet
CalmLanding page
WarmPrint / slidesSocial
Loud
Loudest

Our engine's setting, built from their rules.

Every piece passes two checks

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.

Strategy

An independent computing platform for everyone. Observed

01

Elegant and simple

A calm desktop that gets out of the way: one key for overview, launching and search; workspaces for room to breathe. Observed

02

Batteries included

Simple, consistent apps for everyday computing, so each new one feels familiar. Observed

03

Independent and open

Every part of the project is open; the software has no restrictions on use and respects privacy. Observed

04

Everywhere Linux is

The default experience across major Linux distributions, with a developer platform and app store around it. Observed

An independent computing platform for everyone
homepage H1 · gnome.org
Room to Breathe
homepage H2 · gnome.org
Batteries Included
homepage H2 · gnome.org
Full spec
For Observed
Everyday computer users on Linux, app developers, and contributors and donors (paraphrase of homepage sections).
Problem Observed
Computing controlled by large vendors; old hardware cut off (the homepage points Windows 10 users to endof10.org) (paraphrase).
Promise Observed
An elegant, simple desktop that is free to use, open to all and respects privacy (paraphrase).
Mission Observed
Promote software freedom: open source principles, equality of participation and collaboration (paraphrase).

Proof behind each pillar

Story Observed

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).

Values

Design for People

Inclusive of abilities, cultures and devices; little specialist knowledge needed (paraphrase).

Published
Make it Simple

Do one thing well; avoid overwhelming people (paraphrase).

Published
Reduce User Effort

Automate, cut steps, keep text short (paraphrase).

Published
Be Considerate

Prevent mistakes, allow undo, respect time and attention (paraphrase).

Published

Category. Free and open source desktop environment and application platform for Linux Observed

Why them

  1. Independent: community-built and run by a non-profit foundation Published
  2. One-key overview workflow and workspaces Observed
  3. Consistent core apps plus the GNOME Circle and Flathub ecosystem Observed
  4. A published design system (the HIG) for apps Published

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 Observed

An easy and elegant way to use your computer Observed

A more elegant way to use your computer Observed

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.

Source: gnome.orggnome.org/about

Personality and voice

Simplebut not BarePublished
Inclusivebut not TechnicalPublished
Consideratebut not InterruptingPublished
Openbut not ClosedObserved

Find and Replace

Do Header capitalization for a label.

FIND AND REPLACE

Don’t No all caps.

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.

Full spec
  • 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

PlainInclusiveConsiderateWarmOpen

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.").

  • 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
  • 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).

Never

i.e.e.g.Gnome (mixed case)

  • Don’t write "Gnome"
  • Don’t end UI headings with a period
  • Don’t use "my" for the user's things
HeadingsHeader capitalization
BodySentence case

Source: developer.gnome.org/hig/guidelines/writing-style.htmldeveloper.gnome.org/hig/guidelines/typography.htmlfoundation.gnome.org/trademark-and-logo

Color

GNOME

Do White on Blue, as on the brand book cover.

GNOME

Don’t On Green the brand book uses the dark logo, not white.

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

Full spec
  • 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
PrimaryBlue #3584E4
Dark modeHSL luminance x 0.85

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.

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

Typography

An independent computing platform for everyone

Aa
InterDisplay · open stand-in Inter
Aa
InterText · open stand-in Inter

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

Full spec
Their faceUseLicenseOpen stand-in
InterHeaders Inter Heavy (800-900); website headings 800Open (SIL OFL 1.1)Inter
The real face is open
InterBody Inter Normal 400Open (SIL OFL 1.1)Inter
not publishedhex values in the brand bookn/aSource Code Pro
  • 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
Brand faceInter (OFL)
UI faceAdwaita Sans
Web H132.4px 800

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.

Source: brand.gnome.orgdeveloper.gnome.org/hig/guidelines/typography.htmlGNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.3

Graphic elements

brand.gnome.org

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.

Rounded triangle fragments (tris) · Brand book cover, page corners and back cover; the homepage hero (tris-l.svg, bottom left, 1024px wide)

Do Gradients from HIG palette colors, interpolated in HSL or LAB so the midpoint stays vivid. Homepage: radial-gradient(at left top, #1A5FB4, #9141AC).

Vivid HIG gradients · Brand book Gradients page (orange-yellow to red-purple); homepage Support Us band (radial #1A5FB4 to #9141AC)

Do Full-bleed blue with white type and the white logo or tris.

Solid Blue field · Brand book cover and back cover (#3584E4); homepage Get GNOME band in HIG Blue 5 #1A5FB4

Do Computer imagery with everyday objects, HIG palette fills, geometric shapes, flat color with gradients only on curved surfaces, no people or faces.

Full-color flat illustration · Homepage section art (shell.svg, apps.svg, design.svg, circle and flathub tiles)

Specimens use sample copy, not GNOME’s.

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

Full spec
  • 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
Tris on light#1C71D8 at 0.108
Tris on Bluewhite, low opacity

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

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

Iconography

16px symbolic
128px app

Icons recolored by code stay consistent at every size and theme.

Full spec
  • 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
Symbolic16px, 2px stroke
App icon128px, 2px grid

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

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

Illustration

Illustration explains concepts where a photo is too specific and a diagram too abstract.

Full spec
  • 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
Stylesfull color, blueprint

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

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

Photography

GNOME prefers product renders and illustration over stock photography.

Full spec
  • If a photo is used, keep the logo legible by raising contrast
Stylenot published

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.

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

Motion

button-hover · 200ms
Button fill scales to 1.05 (1.06 for the hero Donate) on hover; --slickease overshoot
tile-hover · 300ms
Ecosystem tiles transition all properties

Small, springy feedback matches the desktop's feel.

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

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

Source: gnome.org

Interface & layout

The page, band by band

Hero
Overview: A more elegant way to use your computer
Workspaces: Room to Breathe
Apps: Batteries Included
Ecosystem
Get Involved
Get GNOME
Supporting Organizations

Buttons

Full spec

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.

Measured from gnome.org's 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.

Spacing

MeasureDesktopPhone
Page margin162px18px
Section padding36px36px
Hero text widthmax 517px, centeredfull width
Card gap18px18px
Navigation62px62px

Type, at size

Hero H1 (#subtitle)

Inter · 32.4px (phone 23.4) · line 1.25 · tracking -0.32px · weight 800

Section H2

Inter · 27px · line 1.25 · tracking -0.27px · weight 800

Tile H4

Inter · 21.6px · line 1.25 · tracking -0.22px · weight 800

Wordmark text

Inter · 25.2px · line 1.25 · tracking -0.18px · weight 900

Body / lead

Inter · 18px · line 1.6 · tracking -0.18px · weight 400

Nav link

Inter · 18px · line 1.6 · tracking -0.18px · weight 600

Button label

Inter · 18px · line 1.6 · tracking -0.18px · weight 600

Banner title

Inter · 18px (phone 16.2) · line 1.5 · tracking -0.18px · weight 700

Banner line

Inter · 16.2px (phone 14.4) · line 1.5 · tracking -0.18px · weight 600

Small button (dark tile)

Inter · 14.4px · line 1.6 · tracking -0.18px · weight 600

Inline button

Inter · 16.2px · line 1.6 · tracking -0.18px · weight 600

Footer link

Inter · 18px (phone 14.4) · line 1.8 · tracking -0.18px · weight 600

Copyright

Inter · 12.6px · line 1.6 · tracking -0.18px · weight 400

Motion
hover only: buttons scale their fill to 1.05 over 200ms with an overshoot ease cubic-bezier(.17,.89,.32,1.28) (observed); no brand motion guidance published
Buttons
pill

Page anatomy

How GNOME’s own landing pages are built, observed on gnome.org, 2026-10-30. The full measurements are in spec.md.

Navigation
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.
Hero
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.
Overview: A more elegant way to use your computer
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.
Workspaces: Room to Breathe
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.
Apps: Batteries Included
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.
Ecosystem
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.
Get Involved
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.
Get GNOME
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.
Supporting Organizations
Centred heading, a wrapped row of full-color partner logos, a centred line, then a second wrapped row of infrastructure partner logos.
Support Us
Full-bleed band with a diagonal blue-to-purple radial gradient, centred white heading, paragraph and a translucent white pill Donate button.
Footer
Dark aubergine footer: 16 links in 4 flowing columns plus a social-icon column, then a tiny centred copyright line.

Source: gnome.org

In use

Full spec

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.

FormatWhat they didSource
brand book / printBlue cover with white logo and tris; white pages with blue Inter Heavy headings and a tris cluster top rightGNOME Brand Book rev 2.2 (https://gitlab.gnome.org/Teams/Design/brand/-/raw/master/brand-book.pdf) p.1
talk slidesA LibreOffice Impress template is published for GNOME talksbrand.gnome.org

Our setting for each format

FormatLoudnessMust appearWhat varies
Landing pageBuild 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 footerwhich feature rows and how many tiles
Print / slidesBlue field or white page, Inter Heavy headings (Header 2 in Blue), tris cluster in a corner, logo black or white with 0.2x clear spacesecondary color and gradient choice
SocialBlue or HIG gradient ground, white logo, short Title Case lineillustration

Rules

Do

  • 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
  • modify the logo
  • imply GNOME endorsement without written permission

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

Steal this kit

Your name and logo, GNOME’s system.

Comes with you

  • Color roles and how much of each
  • Type pairing, with open fonts
  • Voice rules the writing check enforces
  • Icon, photo, illustration and motion recipes
  • The strategy frame, to fill with yours

Stays yours

  • Your name and logo
  • Your proof: numbers, customers, quotes
  • Your purpose and claims. Theirs aren’t yours to make

Use this kit for my brand Use this brand in Claude

Hand it to a developer

Your brand next

Get your brand audit Put your brand in Claude What goes in a brand book

What GNOME doesn’t publish
  • 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.

Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-30. Not affiliated with GNOME.