Presentation
A slide is built from the design system — the same tokens and the same components as a product screen or a page of the site, at the slide canvas’s own sizes. Below is the deck’s working set — 19 layouts in four groups: every core layout, and the three case studies a deck can carry — each drawn here in HTML from the system’s tokens and components with its own sample copy, its own artwork and a photograph only where the layout has an image slot. Nothing on this page is a picture of a slide.
Every rule below is the design system’s own sentence, word for word.
Three colours in every deck
Section titled “Three colours in every deck”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.
A presentation is where the rule shows most, so the slides on this page do not share one colour — and neither does a deck. A deck steps through the three, every slide taking the colour after the one above it — “so a 6-slide deck reads red, yellow, blue, red, yellow, blue.” A cover and a case study keep the colour they were designed in and still set the step for the slide under them, so no two neighbours ever match.
Reading down this page is reading down a deck. Each slide below wears the colour that rule gives it here — the badge under it says which: 5 red, 6 yellow, 6 blue, 2 multicolour. The colour is the slide’s, not the layout’s: any layout below can be any of the three, and the same layout comes out red in one deck and blue in the next.
And now and then, all three at once. Feature cards (L4) and Cards + wide chart (L1HC) are set to multicolour, which no build chooses on its own — a person sets it on a slide, by hand. There the repeating cards take red, yellow, blue and then grey one after another, a chart’s bars do the same, the subtitle goes grey, the one-off highlights stay red and the wash behind the slide is left out. The slide after it starts the cycle again at red. Each of those is the deck’s own rule, under Colour below.
Covers — three layouts, all core
Section titled “Covers — three layouts, all core”Three covers, one design: the cover’s colour is chosen by choosing the cover, and the wash, the highlight and the date badge follow it; the slide after it takes the next accent in the cycle. Over the wash sit the wordmark — dark on the light red and yellow washes, white on the violet one — then the title, an optional subtitle and the badge row.
Primary layouts — seven layouts, all core
Section titled “Primary layouts — seven layouts, all core”What a build picks from on its own. L1, L2 and L3 put cards, an icon list or bullets beside a tall photograph; L4 is feature cards over the wash with no media; L1C, L2C and L3C swap the photograph for the chart card. A chart layout is its photo twin with one slot replaced, so the two say the same words.
Secondary layouts — six layouts, all secondary
Section titled “Secondary layouts — six layouts, all secondary”The same components in one full-width row over a full-width photograph or chart band. Hand-pickable, and reached automatically in one place only — when two neighbouring slides would otherwise wear the same look.
What MAFO prevents
MAFO removes waste before budget is spent
What MAFO prevents
MAFO removes waste before budget is spent
What MAFO prevents
MAFO removes waste before budget is spent
Case studies — three layouts, all beta
Section titled “Case studies — three layouts, all beta”A client’s header over cards: the photograph under a dark wash, the logo box, the eyebrow and the name, the facts along the foot; then the story in cards on the 576 grid. A case study keeps the accent it was designed in — blue, and yellow for CS4 — and still sets the step for the slide after it.
The canvas
Section titled “The canvas”- 1920 × 1080, one set of margins. “1920×1080, white. Padding: top 42px, sides/bottom 64px → content width 1792px.”
- The gaps. “Heading pair → content gap 64px; between sections 32px; inside cards 20px pad, 12px item gap.”
- Where the heading sits and where the content stops. “the heading is anchored at y 42 and the band’s bottom edge is the 1016 safe line, like every other layout”
- The body block is centred in the free space. “Center-in-free-space: the body block (cards / icon rows / bullets + insight) vertically centers between the heading and the 1016px bottom safe line”
- The PDF is the slide. “
@page { size: 1920px 1080px; margin: 0 },print-color-adjust: exact, one slide per page. Text and ECharts SVG stay vector through Chromium’spage.pdf(); the only rasters are photos and blob PNGs.”
Colour
Section titled “Colour”- Three accents, one per slide, set on the slide. “Accent system: each slide sets
data-accent="blue|red|yellow"; components usevar(--accent)/--accent-light/--accent-lighter/--accent-bg/--accent-grad.” - The deck cycles, and no two neighbours match. “The closing accent cycle STEPS OFF THE SLIDE ABOVE:
_cycle_accentstakes 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” “Slides that keep their own accent still SET the step for the next one: covers (the cover IS the accent), case-study slides (fixed blue, matcher rule), accent_fixed layouts and solved-replay slides (the solution’s accent ships verbatim).” - After a slide that is off the cycle, the cycle starts again. “Falls back to the head of the cycle when there is no previous slide, or when it wears an off-cycle accent”
- The accent is the slide’s, not the layout’s. “The accent belongs to the SLIDE, not the layout”
- On yellow the subheading goes grey. “on yellow slides the H2 uses neutral (yellow is too light for text)” “Every GRAY subheading is
--neutral-400#858080.” - The icon list’s glyph is the light tint. “Icon list — the glyph is the accent’s LIGHT tint.” “Yellow is the one accent that keeps its MAIN hue:
--yellow-lightis too pale for a line glyph, which is exactly why the rule is a dedicated token and not simply--accent-light.” - Yellow flips the ink on a filled head.
[data-accent="yellow"] .card--filled-header > .card__head { color: var(--ink); } - Multicolour exists, and only by hand. “A fourth, manual-only accent
multicolorexists (AI never auto-assigns it): charts cycle red→yellow→blue→gray, single-accent elements read red, the subtitle goes neutral gray and the blob is hidden” - On a multicolour slide the cards and rows step through the sequence. “repeating cards/icon-rows step through the brand sequence (red→yellow→blue→gray→red-light→blue-light)” “single highlights like the insight bar keep the slide’s main accent (red)”
- A multicolour chart cycles per bar. “Multicolor + ONE series: the red→yellow→blue→gray cycle happens PER BAR”
- A multicolour slide has no wash. “Multicolor accent has no blob art — hide every decorative blob variant”
“## Typography (Poppins, local TTFs)” — the deck’s type table as written, and beside each row the Typography role the slide canvas binds it to here, with that role’s size (the weight is each component’s own, and matches). Two rows differ by one pixel — the subtitle at 45 for the stylesheet’s 46, and the insight’s statement at 40 for 41 — and the page draws the token, not the number.
| The deck’s spec, as written | Style | The role on the slide canvas, and its size |
|---|---|---|
66px / 600 (--fs-h1, tracking −0.66, lh 1.2) |
H1 slide title | type/headline/large — 66px |
46px / 500, --h2-color (accent-light; neutral on yellow slides) |
H2 subtitle | type/headline/medium — 46px |
| 36px / 600 | H3 / card section | type/title/large — 36px |
26px / 500 (--fs-card-title; filled/color card variants 600) |
Card title | type/body/large — 26px |
26px / 400 (--fs-body) — small 20px / 400, secondary 18px / 500 |
Body | type/body/large — 26px |
15px minimum (--fs-caption), always --ink |
Chart text | type/label/medium — 15px |
64px / 600 (--fs-kpi) |
KPI value | type/display/small — 64px |
- Sentence case, enforced on headings. “No ALL CAPS anywhere. Sentence case. Enforced for slide headings: a draft title/subtitle typed in CAPSLOCK is re-cased to sentence case at parse time” “Exceptions keep their caps: abbreviations/acronyms (KYC, DSP, TL;DR), brand-style names (MAFO, IRTB, logo-library brands), tokens the deck itself writes in caps inside normal sentences, and digit tokens (B2B)” “Body/list/KPI/table text keeps the manager’s casing (headings-only scope).”
The components’ own rules
Section titled “The components’ own rules”- The bullet gap is 8 px, everywhere. “Bullet list gap is fixed at 8px.” “L3 bullets hold up to 10 rows (registry max 10; >6 rows switch the template to
.l17-bullets--dense, row pitch 71→59px — text stays 26px/39px, check icons stay black” - The insight is never wider than three quarters of the canvas. “The insight NEVER measures wider than 3/4 of the working canvas.” “0.75 x 1792 = 1344px, and it is a COMPONENT rule — no layout and no mode may widen past it” Its anatomy: “
.l17-insight= a 12px accent pill (border-radius: 62px, stretched over the text) + a 12px gap + the body: the takeaway at 41px / 62px line / #141414, and under it — 8px gap — the supporting line at 26px / 1.4 / #141414, the SAME ink one step down in size.” - A card’s title bar is exactly 64.
.card--mini .card__titlebar { height: 64px; } /* exactly 64px */ - A card with no body hugs. “a card with NO body hugs its icon+title — no empty gray field below; cards WITH bodies keep the equal-height stretch”
- Feature cards fill one row. “
.l4-rowWRAPS: 1-3 cards ride the flex row and hit its 540px cap, 4 fill one row at 397px, 5 use the.l4-row--5grid (487px columns, x 64/619, plus a card spanning both rows at x 1272), 6 use.l4-row--6(553px, three per row at x 64/684/1303).” - The chart card is the photo card’s twin. “L1C–L3C: the L17 photo-card slot as the signature gray CHART card (Card/Basic/ Body r32 p32 + XXL shadow — same look as the editor’s Chart card component).” “chart caption — INSIDE the card, deliberately SMALLER than .l17-insight (26/39 text vs 41/62) so an insight and a chart caption read as two different components”
- The logo grid. “Standalone
.comp-logogrid: flex-wrap of 182×73 chips (--card-bg#F2F2F7, r8, p20), logo<img>capped 142×33 contain-fit” - The table. “Header ROW = dark accent (--accent-dark) + white text, rounded outer ends. Header COLUMN = accent tint (--accent-lighter; yellow → --accent-light) rounded pills, bold black. Body cells are TRANSPARENT (the gray card shows through) with a #c9c9c9 horizontal divider only — NO vertical grid lines.”
The horizontal band — the spacing model is the layout
Section titled “The horizontal band — the spacing model is the layout”- “1. 80px between the blocks, and never less than 40.”
- “2. The content block is CENTERED in whatever is left.”
- “3. The BAND absorbs the slack, down to a 372px floor.”
- “4. What does not fit means the layout is not usable for that slide.”
Inside the content block: “The minimum spacing between object is twenty four pixels, and the maximum is forty eight pixels.” “Cells therefore SHARE the full 1792 measure — 2 → 872, 3 → 565.3, 4 → 412 — always flush to the 64px safe margins, and a lone cell caps at half the band (872) instead of spanning the slide.”
Charts
Section titled “Charts”- The chart module’s own header. “- all chart text #0B0202, 15px minimum, Poppins - monochromatic series palette per slide accent - bars: 4px top radius, no bottom baseline, light h-grid - legend top-right, circular markers”
- The palettes. “blue
[#2B25D9, #6A66E4, #D4D3F7, #B5B3B3, #DAD9D9], red[#E42521, #EC6663, #F9D3D2, #B5B3B3, #DAD9D9], yellow[#F9C426, #858080, #DAD9D9, #FAD567, #B5B3B3](2nd series gray — a yellow tint on a gray card is unreadable), multicolor[#E42521, #F9C426, #2B25D9, #B5B3B3, …]” “every accent’s 2nd series is a readable MID tint — pale tints vanish on the gray card” - Bars. “bars: 4px top radius, no bottom axis line, light horizontal grid
rgba(0,0,0,0.07); donut cutout ≈58–85%” - Donuts, never pies. “2-slice donuts: a donut with exactly TWO slices reads as share-vs-rest — slice 1 keeps the accent’s main color, slice 2 is always Neutral Lighter
#DAD9D9(--neutral-200)” - Numbers carry their own unit. “number format = an OBJECT, currency-neutral.”
- A narrow band lifts the floor. “narrow-band axis floor: when all values sit in a narrow high band (spread <5% of max, e.g. 99.92–99.99% uptime) the value-axis floor lifts just below the band so variation is visible”
- Static. “
animation:false→ identical static render = clean vector PDF”
The charts on this page follow those rules in HTML and CSS — the bars are boxes with a height, the grid lines and ticks are positioned by percentage, every colour is an accent/chart/* or chart/* token — because the site ships no chart library and a screenshot of a chart is the thing this page exists not to be.
Every glyph is a Lucide icon, the one set the whole system draws from (Icons and logos), painted as each component paints it — the icon list’s glyph in the accent’s light tint, a card’s chip white on ink or on the accent, a bullet’s check in ink. And one rule of the slide’s own: “Icon diversity rule: within one slide, icons must not repeat.”
Covers
Section titled “Covers”- One design, three colours — and the cover picks its own accent; the cycle steps from it. “The active covers are
cover_red/cover_violet/cover_yellow— one accent-driven design (_cover_base.html, included by three id-named wrappers so the renderer’s<layout_id>.htmllookup resolves). The blob, small highlight and date badge follow the slide accent, which is fixed per descriptor (accent_default); the editor disables the accent picker on covers, so a cover’s colour is chosen by picking the cover.” - What a cover holds. “Slots:
title(required),subtitle(optional — autolayout collapses the gap when empty),date” and up to fivetags. “Highlight phrases with[[...]]inside the title → rendered in the accent color.” - The wordmark follows the wash — and can be swapped. “logo: dark wordmark on the light red/yellow blobs, white wordmark on the darker violet blob (red icon either way)” Another mark may stand there: “a Brand row — “Mobupps (default)” (restores the accent-driven wordmark:
set_data logo ''), Mobupps, Mobupps — white, iRTB, Echo AI, in manifest order — then the Library (every/api/logosentry, name-filtered by the search box), then “Upload from computer…”” - The badge is the cover’s own, not the library’s Badge.
.cover-badge { display: inline-flex; gap: 8px; align-items: center; padding: 8px; border-radius: 8px; font-weight: 700; line-height: 1; font-family: var(--font); }.cover-badge--auto { background: var(--accent-bg); color: var(--accent-light); }— the accent’s palest tint under its light ink, at 20 px Bold with a 24 px glyph. On yellow the ink is a gold, because[data-accent="yellow"] .cover-badge--auto { color: #C79C1E; } /* yellow-light is too pale on cream */ - The badges are the manager’s — to delete, to add, and to change the icon of.
- No art, no white type. “No art behind the type = no white type.”
Core, secondary and beta
Section titled “Core, secondary and beta”- A deck opens on a cover, always. “First slide is always a cover; the beta gate is ABSOLUTE (no code exceptions ever — promote = the design lead flips the tier).”
- The six secondary layouts are the primary ones’ twins, reached one way. “They are now CORE tier and reach production through ONE deliberate route, the build’s variety pass” The pairing:
- Beta layouts stay in the library and out of automation — never chosen by a build, pickable by hand where the deck tool grants it or pinned by a brief. The three case studies above are beta.
| Primary | Secondary — image band | Secondary — chart band |
|---|---|---|
| L1 Cards + media | L1H Cards + wide image | L1HC Cards + wide chart |
| L2 Icon list + media | L2H Icon list + wide image | L2HC Icon list + wide chart |
| L3 Bullets + media | L3H Bullets + wide image | L3HC Bullets + wide chart |
Photographs
Section titled “Photographs”A photograph sits only in an image slot and is cropped by it — the rule, its six slots and the one library the deck draws from are on Imagery. One rule of the build’s own: “never ship an empty photo placeholder: aspect-aware library pick, keyword-scored, per-deck rotation, no repeats”.
The 6 photographs in the slots above are from that library. Measured, their channel means sit within 0.75 of 255 of each other — they are black and white in fact, because the library’s own generation prompts ask for monochrome; the deck states no rule about it, so this page states none.
Where a deck is made
Section titled “Where a deck is made”In one place, from these layouts, and nowhere else — a decision, not a preference: a second way to make a deck is a second way to drift. A layout that does not exist, a chart that is not in the set, a slide that has to break a rule for a good reason — that is the request path, and the answer comes back inside ten working days.
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.