Brand

Everything needed to put Mobupps in front of a client — the marks, the colours, the faces, and the rules that keep them recognisable. It is all on these pages and all downloadable from them. Nothing here asks for a Figma seat, a design tool or a designer: a file is one click, and the rule beside it says what the file is for.

The first rule — three colours

The brand red

#E42521rgb(228, 37, 33)

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

#2B25D9rgb(43, 37, 217)

color/blue/400

One of the three, and the colour of every link.

The yellow

#F9C426rgb(249, 196, 38)

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. What it looks like in a deck is on Presentation, where the slides wear red, yellow, blue and, now and then, all three at once; the values are on Colour.

The whole pack, in one file. Every mark in every variant, and both faces with their licences.
38 files · SVG, PNG and TTF · nothing to install but the fonts

Download the brand pack

The foundations

Logo5 marks in 17 variants — Mobupps and the four products, each on the ground it is for, with clear space, the smallest size it survives, and what never to do to it.

ColourThe three brand colours and the ink, with the value to paste into whatever is asking — the same values the products and the decks paint from.

TypographyPoppins in four weights — download, double-click, done. Which weight is a heading and which is a sentence.

AccessibilityThe four pairings that are safe to use anywhere, measured — and the three mistakes that make a slide unreadable for one reader in twelve.

The brand in action

WebWhat a page of the site is built from, shown as the real components rather than a screenshot.

SocialNineteen cover, post and story templates at the sizes the platforms ask for, every value on them a token — see each one, and copy its editable frame from Figma to make your own.

PresentationOne route to a client deck, and what it is made of.

SwagA tee, a cap, the totes and a business card — the mark on the things people keep, each shown as a picture of the piece.

Illustrations — the pictures that show how something works, in a slide or on a page — are a section of their own: Illustration. Every picture downloads from All illustrations, as an SVG and as a PNG.

Four rules that hold everywhere

• All three colours, each set where it is used. A slide is red, blue or yellow, set on the slide, and a deck steps through the three 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 the three still meet on a screen — a row of KPI tiles wears them side by side. A page of the site colours a block by what it is — a fact card, a product tab — and the three meet there too; a post or a cover is set to one. What never happens is a fourth colour, or a block that invents its own: the accent is one of the three (or, by hand on a slide, all three at once), chosen by name on the thing that carries it, and everything inside follows.
• A mark is placed from a file, never rebuilt. Not re-drawn, not re-coloured, not replaced by an icon that looks like it, not by an emoji. Every variant anyone needs is on the Logo page; if none of them fits the ground, that is a question for the design lead, not a reason to edit one.
• Sentence case for headings and text. Capitals shout, and the system never shouts — a deck re-cases a shouted heading on its own. The one thing set in capitals is the eyebrow, the small tracked label over a page heading, as the site and the library’s Heading pair both draw it.
• The value comes from here, not from a picker. Every colour and size on these pages is the design system’s live value, so a number copied from here cannot be stale.