Brand
The name
Pluto is small. In 2006, it lost its title of planet. It is smaller than our Moon. People love it anyway.
In 2015, the New Horizons probe flew past Pluto. Pluto was not simple at all:
- It has a heart: a big, pale plain named Tombaugh Regio.
- Its air has more than 20 layers of haze.
- Its red-brown color comes from tholins. Its haze is blue.
The CMS is the same. The core is small. You add layers on top of it, one for each job. It is free to start, and we want it to be friendly. That is the heart.
Use "Pluto" for the product. Use "Pluto CMS" only where a reader needs to know what Pluto is, for example the tooltip of the logo. The packages and the GitHub organization keep the name plutocms.
The logo
The logo is a smiling Pluto with its heart, and the word "pluto".
The core layer ships the logo, so every Pluto site has it:
| File | Use |
|---|---|
/img/pluto.svg | The logo. The word is black. |
/img/pluto.png | The logo for a dark background. The word is white. |
/img/pluto-icon.svg | The planet only. Use it for a favicon. |
/img/pluto-icon.png | The planet only, 96 × 96 px. |
In a Vue component, use PlutoLogo from the core layer. The planet keeps its colors. The word takes the text color, so the logo works in light and dark mode.
<PlutoLogo class="h-8 w-auto text-highlighted" />
<!-- The planet only -->
<PlutoLogo mark class="size-8" />
Do not change the colors of the planet. Do not stretch the logo. Keep some space around it.
The colors
Each color comes from Pluto.
tholin · Primary. Buttons, links, highlights.
haze · Secondary. Accents, rings, info.
heart · The planet and its heart. Soft surfaces.
kuiper · Neutral. Text, borders, dark mode.
Use ::pluto-chip for a short label above a section title.
- tholin is the red-orange of the tholins on the surface. It is the primary color. Use shade 600 on a light background and shade 400 on a dark background. Both pass the 4.5:1 contrast check for text.
- haze is the blue of the layers of haze. Use it for accents.
- heart is the tan of the planet and the cream of its heart. Use it for soft surfaces and for text selection.
- kuiper is the deep neutral of the Kuiper belt, where Pluto is. The dark mode uses shade 950 as the background.
Core defines the colors as Tailwind theme variables in app/assets/css/pluto-tokens.css, for example --color-tholin-600. An app gets them through @plutocms/css. The admin keeps its own palette.
The type
- Fredoka for the page title (
h1) only. It is round, like the logo. Do not use it for other headings. - Public Sans for the text.
The voice
- Write simple English. Use short sentences. See Writing docs.
- Be friendly. A small joke about space is fine. One joke for each page is enough.
- Do not use a joke in an error message that tells the user how to fix a problem.