Colour
Three colours carry the brand, a fourth carries everything quiet, and eight more sit behind them. Every value on this page is the one the products, the site and the decks paint from — so a number copied from here is the live one.
Click any value to copy it.
The three
Section titled “The three”The brand red
color/red/400
One of the three: the mark's own colour, the cover a new deck opens on, and MAFO's product colour.
The blue
color/blue/400
One of the three, and the colour of every link.
The yellow
color/yellow/400
One of the three. Text on it goes to ink, never white — the system flips it.
The brand is three colours — red, yellow and blue. Not one, and not two. It is the basic rule of the design system: the team locked it when the system was started, and everything since is built on it. It is not a preference to be argued slide by slide or page by page. A deck, a page or a dashboard uses all three.
An accent is set where it is used, and the three meet. A slide takes one of the three, set on the slide, and a deck steps through them so no two neighbours match (the deck’s own rule, on the Presentation page); a product’s shell sets one accent for its screens and a row of KPI tiles still wears all three; a page of the site colours a block by what it is, and the three meet there too; a post or a cover is set to one. The system carries the accent as a setting rather than a habit: every component reads the accent it is under, so one line on a slide, a shell or a frame switches everything in it. MAFO’s is red.
Yellow is the one that flips. White text on the brand yellow does not read, so text on yellow goes to ink — the system does this by itself, and a hand override is what breaks it.
And the neutral
Section titled “And the neutral”It belongs with the three rather than under them. Most of any real document — the captions, the labels, the rules between things — is this grey.
The neutral
color/neutral/400
The grey the quiet half of every document is built from — a grey subheading, an eyebrow, a strong rule, a separator glyph. It is the fourth colour of the brand, not an absence of one.
The whole grey ramp, from the near-white a card sits on to the ink, is on Foundations · Colour. The four roles further down this page are the ones a document actually reaches for.
The secondary colours
Section titled “The secondary colours”Behind the three: each accent’s own light tint, the three gradient stops the cover blobs are drawn from, and the two status colours. A secondary never becomes the accent of a document — it supports the one that is.
Red, light
color/red/300
the accent's own light tint — a subtitle, a chart's second series
Blue, light
color/blue/300
the same one step up the blue ramp; also the focus ring
Yellow, light
color/yellow/300
the yellow's light tint
Gradient pink
color/gradient-stop/pink
the far stop of the blue cover wash
Gradient magenta
color/gradient-stop/magenta
the far stop of the red cover wash
Gradient orchid
color/gradient-stop/orchid
the near stop of the yellow cover wash — the palest of the three
Status green
color/green/400
success, and nothing else — green is never an accent
Status red
color/status/danger
an error or a failure, and nothing else. NOT the brand red: a document that uses the mark's red for a warning has spent the brand on bad news
The ink and the grounds
Section titled “The ink and the grounds”Four values answer nearly every remaining question. They are roles, not colours: text/default is whatever the ink is, which is why a document built on them follows the system when it moves.
The ink
text/default
Every sentence, every heading. Not black — black on white is harsh at size.
Quiet text
text/muted
A caption, a description, a helper line under a field.
The page
surface/page
The ground almost everything sits on.
A card
surface/card
A panel lifted off the page. Two near-identical greys are two jobs, not one.
When something asks for RGB
Section titled “When something asks for RGB”A hex is three pairs of digits: RR, GG, BB, each 0–255 in base 16. Any tool that asks for RGB wants those three numbers in base 10, and every card above carries both — click either to copy it.
The full colour system
Section titled “The full colour system”The full colour system — the ramps, the roles, what each one is for and when not to use it — is Foundations · Colour. This page is the part a manager needs; that one is the part a designer or a developer needs, and both show the same values.
Pepper UI v1.5.0
The Mobupps design system. 386 tokens, 88 components, 65 pages in the workshop — every page of this site generated from the repository, so nothing here is typed twice.