If you make decks and documents
Four questions — which logo, which font, which blue, how do we sound — answered with the files themselves, so nothing here needs a designer and nothing waits on a person.
Which logo
Section titled “Which logo”Mobupps for the company; the product’s own mark for a page or a slide about that product. Both are below, and every variant — on the ground it is for, with its clear space and the smallest size it survives — is Brand · Logo.
| File | Use on | ||
|---|---|---|---|
mobupps-logo.svg |
white and light grounds | SVG · PNG | |
mafo-logo.svg |
white and light grounds | SVG · PNG |
Each comes as SVG — which scales to any size without blurring, and is the one to use wherever a tool takes it — and as PNG, for the tools that do not. Nothing re-draws a mark and nothing substitutes an emoji for it: every variant anyone needs already exists as a file.
Which font
Section titled “Which font”Poppins, in four weights — download each, double-click to install, and it appears in every application on the machine. SemiBold 600 is a display weight, not a reading weight: headings may take it, a sentence at body size is Regular 400, and Medium 500 is a title, a label or a button.
| Weight | File | |
|---|---|---|
| 400 Regular | Poppins-Regular.ttf |
download |
| 500 Medium | Poppins-Medium.ttf |
download |
| 600 SemiBold | Poppins-SemiBold.ttf |
download |
| 700 Bold | Poppins-Bold.ttf |
download |
Which blue — the colours
Section titled “Which blue — the colours”Four values answer nearly every which colour question. They are the same numbers the products, the site and the decks paint with.
| Name | Value | ||
|---|---|---|---|
color-red-400 |
#e42521 |
the brand red | |
color-blue-400 |
#2b25d9 |
the blue | |
color-yellow-400 |
#f9c426 |
the yellow | |
text-default |
#0b0202 |
the ink — every body text |
An accent per slide, and a deck cycles them. A slide is blue, red or yellow, set on the slide, and a deck steps through the three so no two neighbours match — “The closing accent cycle STEPS OFF THE SLIDE ABOVE: _cycle_accents takes the accent FOLLOWING whatever the previous slide wears (_accent_after) instead of an absolute index — a red cover is followed by yellow, yellow by blue, blue by red, and cover/case_study/solved-replay slides keep their accent but still set the step, so no two neighbours ever repeat” Everything on the slide follows its accent from that one setting. Yellow’s text on yellow flips to ink by itself, because white on the brand yellow does not read. MAFO’s product colour is red.
How we sound
Section titled “How we sound”The tone of voice and the writing rules are two pages of Foundations — Tone of voice and Writing rules. Imagery — what a picture is for and what it is not — is the page beside them.
Making a deck
Section titled “Making a deck”- A deck is built from the design system — on the tokens, its charts on the chart package, its PowerPoint export on the same tokens — so a deck is on-brand by construction, and so is the
.pptxexported from it. There is one route to a deck, not several. - A deck uses all three colours. The brand is three colours — red, yellow and blue. Not one, and not two. A deck steps red, yellow, blue from slide to slide, so no two neighbours match — shown slide by slide on Presentation.
- The slide layouts in the Figma library (the Slide layouts page and the Case study family) are the masters — the reference every layout is checked against, not a second way to make a deck; the Pepper Deck UI Kit is frozen.
- A quarterly report is built for you by the design lead with the quarter builder, on the same chart theme — ask for one; it is not a route a manager takes.
- What a deck is made of — its layouts, and the rule each one follows — is Brand · Presentation.
Your first task
Section titled “Your first task”-
Download the brand pack and install the fonts. One file, two minutes, once — it is the first thing on Brand.
-
Open the last deck you sent and replace its logo with
mobupps-logo.svg, or the PNG beside it if your tool will not take an SVG. -
Set its text to Poppins: headings at SemiBold 600, everything you read at Regular 400. Then colour it from the three accents — one per slide, and no two neighbours the same.
-
Before you press send, check three things — the mark, the one face, the three accents in their turn. That is the whole does it look like ours test, and it needs nobody else in the room.
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.