The logo
The mark is x + x p: two x’s either side of a red +, which is a t with no tail, followed by a grey p. Read aloud, it’s xtxp.
How it builds
Section titled “How it builds”The logo starts as a lone x and builds the whole mark in five moves, each a small edit to the same drawing:
- x → +. The x turns 45° and becomes the red +.
- + → +++. Two copies branch out to either side.
- +++ → x+x. The outer two turn 45° (left clockwise, right counter-clockwise) and grow into x’s.
- x+x → <+>. The x’s lose their outer legs, leaving chevrons around the +.
- <+> → xtxp. The legs regrow and the p draws on, together.
It rests briefly on each pose and moves quickly between them. The loop holds the full logo, plays the build backwards to the lone x, and starts again. The site title plays it once on hover.
The explainer animation on What is XTXP? uses the same build: four different clients each make one of the moves, through one shared document. The favicon is the <+> pose.
Centring
Section titled “Centring”When the logo is centred, centre the red +, not the whole mark. The + is the mark’s middle, so it sits on the centre line, with the x and the xp either side and the p hanging past it. Anything centred with the logo, such as a title underneath, is centred on the same line.
Use <Logo centre="plus" />, which gives the logo a viewBox (HERO_VIEWBOX in src/brand/logo.mjs) whose horizontal centre is the +. The home page hero and the link-preview card (scripts/social/) both do this.
Palette
Section titled “Palette”Black, white and one red. Greys are neutral, with no blue tint. Red is the only colour that isn’t black, white or grey, apart from status colours that carry meaning.
| Part | Light | Dark | On blue |
|---|---|---|---|
| x’s | #11151f |
#eceff7 |
#ffffff |
| + (the t) | #ff5436 |
#ff5436 |
#ff5436 |
| p | #8a8a90 |
#7d7d83 |
#a3aac4 |
| Background | page | page | #3347ff |
The site uses the same red as its accent colour, for links, buttons and focus rings.
- Don’t recolour the +. It’s always the red.
- Don’t add a second accent colour.
- Don’t pair the logo, or the word muppet, with puppet, felt or frog imagery. See Names and marks.
| File | What it is |
|---|---|
src/brand/logo.mjs |
The source of truth: geometry, timeline and palettes |
scripts/render-logo.mjs |
Generates the CSS and SVGs below. Run npm run logo after changing logo.mjs. |
src/styles/logo.generated.css |
The animation as CSS, for the inline logo on the site |
public/brand/logo{,-light,-dark,-on-blue}.svg |
The still logo. The plain file follows the viewer’s colour scheme. |
public/brand/logo-animated{,-light,-dark,-on-blue}.svg |
The animated logo, standalone |
public/brand/favicon{,-light,-dark}.svg |
The <+> favicon |
src/components/Logo.astro |
The inline logo used by the hero and the site title |