Logo
Five marks, and one rule that covers almost every question about them: place the file. Each one below is shown on the ground it is drawn for — a white mark on a white page is an empty box, which is why the previews are not all the same colour.
Mobupps
Section titled “Mobupps”The red disc with the chevron, and the mobupps wordmark. This is the company: it goes on the site, on a deck cover, on a contract, on a business card. A product’s own mark never stands in for it.
The whole Mobupps set — every variant above, SVG and PNG together: mobupps-logos.zip (9 files).
mafo in navy, the o a roundel with a red centre. MAFO’s product accent is red and the mark agrees with it.
The whole MAFO set — every variant above, SVG and PNG together: mafo-logos.zip (6 files).
A red i, a red slash and RTB in a navy serif. The only mark in the company set that is not a sans.
The whole i/RTB set — every variant above, SVG and PNG together: i-rtb-logos.zip (6 files).
MobuppsX
Section titled “MobuppsX”MobUppsX drawn in a blue-to-magenta gradient — nine linear gradients across the letterforms, which is why this one has no single “brand colour” to quote and why it must never be redrawn in a flat colour by hand.
The whole MobuppsX set — every variant above, SVG and PNG together: mobuppsx-logos.zip (6 files).
Echo AI
Section titled “Echo AI”Two lockups, because the identity has a ground of its own: the pill carries its own gradient, so it needs no help from the page behind it; the white wordmark is for when the page already has a colour.
The whole Echo AI set — every variant above, SVG and PNG together: echo-ai-logos.zip (6 files).
Which mark, when
Section titled “Which mark, when”| The document | The mark |
|---|---|
| The company — a deck cover, a contract, a proposal, a business card, the site | Mobupps. A product’s mark never stands in for the company |
| A page, a screen or a slide about one product | that product’s. A cover carries Mobupps unless the deck is the product’s own — then the cover’s wordmark is swapped to it, from the logo library the deck tool offers |
| A profile picture, an app tile, a favicon, a square slot | mobupps-icon.png — the disc alone |
| A chat message or a row where Echo AI speaks | echo-ai-avatar.svg |
Clear space
Section titled “Clear space”Clear space = a quarter of the lockup’s height, on every side. The unit is one the artwork already contains: the chevron inside the Mobupps disc measures 80 of the lockup’s 322 units — 24.8 %, and MAFO’s red roundel centre is 123 of 411, 29.9 %, the same order. A quarter of the height is therefore a distance the mark itself states. It applies to all five marks, so there is one rule to remember rather than five.
The smallest it goes
Section titled “The smallest it goes”Smallest size = 120 px wide on screen. Measured, not chosen: the mobupps wordmark has four counters (the holes in o, b, p, p), and rendering the SVG at descending widths and counting the enclosed regions gives —
| Rendered width | Counters still open | Smallest counter |
|---|---|---|
| 1274 px (the artwork) | 4 of 4 | 5,361 px² |
| 200 px | 4 of 4 | 127 px² |
| 160 px | 4 of 4 | 79 px² |
| 140 px | 4 of 4 | 59 px² |
| 120 px | 4 of 4 | 44 px² |
| 100 px | 1 of 4 | 29 px² |
| 64 px | 2 of 4 | 10 px² |
In print, 15 mm wide. The same 120 px floor is 10 mm at 300 dpi; the rule rounds up because ink spreads on uncoated stock and a counter is the first thing it closes.
What never to do to a mark
Section titled “What never to do to a mark”Each of the six below is the real file, put wrong — not a description of a mistake, and not a picture of one.
✓ The file, on a light ground
The whole mark, unaltered, with room around it.
✓ The right variant for the ground
A dark ground takes the red-and-white file, not the black one.
✗ Never straight onto a picture
A photograph or a gradient has every value in it, so no mark is legible on one. Put it on a panel.
✗ Never recoloured
The red is the brand red. A mark tinted to match a slide is no longer the mark.
✗ Never stretched
Squeezed to half its width to fill a box. Scale both sides together, or scale neither.
Book a call✗ Never crowded
Hard against the panel’s edge on one side and a headline on the other. Clear space is a quarter of the mark’s own height, on every side, and nothing enters it.
The colours inside the artwork
Section titled “The colours inside the artwork”A mark carries its own colours, and they are not the palette:
| Mark | Its colours | Against the system |
|---|---|---|
| Mobupps | #E42521 · #0B0C0C · #F0F0F0 |
the red is color/red/400, the brand red exactly. The ink and the chevron are near-neighbours of color/neutral/900 and color/neutral/100, not the tokens themselves |
| MAFO | #E82525 · #100D42 |
neither is a token. The red is 26 away from color/red/400, the navy 1 step off color/blue/700 |
| i/RTB | #E7402F · #070528 |
neither is a token. Nearest are color/status/danger and color/blue/700 |
| MobuppsX | #3315FF → #FF00FF, nine gradients |
neither stop is a token. Nearest are color/blue/400 and color/gradient-stop/magenta |
| Echo AI | #6A66E4 · #E42521 · #F9C426 · #EF54D2 |
three of the four are tokens — color/blue/300, color/red/400, color/yellow/400 — and the fourth, the pink, is not |
Nothing here is a defect to be fixed by recolouring a mark. A logo has its own history; the palette governs what a page, a slide or a screen is made of. What does follow: never rebuild a mark out of the palette — the result is a shade away from the real one, and then nobody can say which file is right. Place the file.
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.