Roadmap

The plan is 13 weeks from Day 0, Friday 4 September 2026. Every count below is the plan’s own.

188/197

items done

21/27

milestones complete

Week 4

of 13, on 1 Oct 2026

Where we are

1 October 2026 · Phase 3 — 3.7.29 done: no illustration has a shadow

One picture had a shadow and no other did. The design lead found a soft shadow under the MAFO page’s illustration. It belonged to one object, the pedestal, and was never decided. They saw the picture both ways and chose to remove it. The three pictures that stand on pedestals are redrawn, every other picture is unchanged, and the rule is written down: no object casts a shadow. Released as the illustrations package 0.8.0 on every channel.

Every entry before this one is in the log at the end of the page.

The goal in one paragraph

By the end of Week 12, Pepper UI is a versioned system with one token source feeding Figma, the deck tool, the site and a product kit; a published Figma library every design file subscribes to; a CSS package the site and the deck tool consume; a documentation site with foundations, components with status, patterns, templates for managers, a roadmap and a changelog; and a governance loop (requests → decisions → releases) so it keeps growing after the first three months. Managers get templates and a place to look; developers get packages and names that match Figma; designers get one library and the rules with their reasons.

The plan

Counted from Day 0: week 1 is the Monday after it, and week 13 ends on 4 December 2026. The windows are the roadmap’s; the counts are the checklists’.

Stage	Weeks	Dates	Done
Phase 0 · Planning	—	before Day 0	8/8
Sprint 0 · Charter	0	4 Sep	11/11
Phase 1 · Foundations	1–4	7 Sep → 2 Oct	35/37
Phase 2 · Components + MAFO	5–8	5 Oct → 30 Oct	45/47
Phase 3 · Scale & governance	9–12	2 Nov → 27 Nov	97/102
Week 13 · buffer and release	13	30 Nov → 4 Dec	—
Phase 4 · Backlog (not scheduled)	after Week 12	—	—
Total (build work)			188/197

Sprint 0 · Charter

Week 0 · 4 September 2026 · 11 of 11 done

• Decisions D1–D13 answered (via the charter questionnaire — see 06_PROGRESS.md)
• Repo created (pepper-ui), this folder becomes its docs/ root
• Asana project “Pepper UI” with the milestones below as sections
• Naming migration map v0: every token name in all five vocabularies (S1–S5) → its new color/blue/400-style name. One spreadsheet, the contract for everything that follows.

Exit: The design lead signs off the roadmap.

Phase 1 · Foundations

Weeks 1–4 · 7 Sep → 2 Oct 2026 · 35 of 37 done

	Milestone	What it delivers	Done
✓	M1.1 Canonical tokens	tokens/*.json in DTCG format: colour ramps (filled neutrals, decided blacks), status colours, semantic roles (text/surface/border/action/status), the accent collection with 4 modes (the deck tool’s system promoted), typography roles with 3 canvas modes (slide / web-desktop / web-mobile), spacing, radius, elevation, motion, layout/breakpoints. Contrast matrix generated.DL-1 · gaps G1–G8	8 / 8
	M1.2 Build pipeline	Style Dictionary v5 → tokens.css, tokens.scss, Tailwind preset, Figma-import JSON, pepper_tokens.py. @pepperui/tokens 1.0.0. CI builds on every commit.DL-2 · gaps G1–G4	7 / 8
	M1.3 Figma library v1	base file chosen; numeric primitives imported; semantic + typography collections with modes; hygiene backlog cleared; deck masters migrated; published as team library; Pepper Deck and Site files re-linked (scripted swap of local → library variables).DL-5 · gaps G9 · G11–G12	7 / 8
✓	M1.4 Foundations docs	Colour (with contrast table and the accent rule), Typography (roles × modes), Spacing & radius, Elevation & motion, Grid & layout, Icons & logos, Writing rules. Brandbook v2 draft.DL-6 · gaps G7–G8 · G12 · G15 · G17 · G19	9 / 9
✓	M1.5 First consumer, zero visual change	The deck tool’s tokens.css + app.css replaced by the generated file plus an alias layer (--persian-blue: var(--color-blue-400)) so every existing rule keeps working; visual_regress must stay at 0 pixel fails. Proves the pipeline on the strictest consumer.DL-17	4 / 4

Exit: one source of truth exists; Figma and the deck tool read from it.

Phase 2 · Components + MAFO

Weeks 5–8 · 5 Oct → 30 Oct 2026 · 45 of 47 done

	Milestone	What it delivers	Done
✓	M2.1 Inventory & canon	one list of every component across S1–S7 with status (Draft/Beta/Ready/Deprecated), duplicates merged, props renamed (Property 1 → real names), Figma name = code name.DL-8 · gaps G11–G12	5 / 5
✓	M2.2 @pepperui/css v1	framework-free CSS for Primitives (button, input, select, checkbox, radio, switch, field, badge/chip, avatar, tooltip, toast, modal, tabs, menu, table, pagination, date picker, loader) ported from the site prototypes + deck-tool chrome, and Content blocks (card family, insight, KPI, lists, logo grid, heading pair) ported from slide.css. Locked rules become tests (bullet gap 8, insight ≤ 1344, pills vs squares, light-tint surfaces, no decorative separators).DL-7 · gaps G10 · G19	4 / 4
	M2.3 Storybook live	every token and component rendered, docs in MDX, Playwright visual snapshots, axe checks; deployed (Vercel).DL-9 · gaps G16–G17 · G19	5 / 6
	M2.4 Consumers adopt	site prototypes’ styles.css and the Blade global-2026.css import @pepperui/css (alias layer again, grandfathered pages untouched); deck-tool chrome imports it. The tech lead briefed with a migration note.DL-17	7 / 8
✓	M2.5 Figma components aligned	library v1.1: primitives with full state sets (default/hover/focus/disabled/error), component↔code map published, Slide layouts page documented as a catalogue (L1–L26, covers, case study, chart layouts) with status and the accent-cycle rule.DL-5 · gaps G9–G10	10 / 10
✓	M2.6 pepper-ui Claude skill v1	one skill holding tokens, rules-with-why and the component map; pepper-deck-presentation, Figma_product_dashboard_designer, web_designer, Figma_web_page_designer, quarter-presentation-builder import it instead of carrying their own copies.DL-16 · gaps G17 · G19	3 / 3
✓	M2.7 MAFO client — wave 1, the first real product	the pilot: CoreUI removed from real MAFO screens and Pepper components in its place, starting the moment tier-1 components exist rather than when the set is complete. client first — current stack, nothing to upgrade; built in a copy, and the deliverable is a working screen and before / after shots, not a deployment. Delivers DL-23 and the first screens of DL-12.DL-23 · DL-12	11 / 11

Exit: a developer or designer can build a screen from Storybook + Figma without asking the design lead.

Phase 3 · Scale & governance

Weeks 9–12 · 2 Nov → 27 Nov 2026 · 97 of 102 done

	Milestone	What it delivers	Done
✓	M3.1 @pepperui/charts	ECharts + Chart.js themes generated from tokens (per-accent palettes, 2-slice donut rule, narrow-band floor, number-format object); pptx_export.py reads pepper_tokens.py; Figma chart recipes reference the same numbers. One palette, four renderers. — COMPLETE 2026-09-09 (4 / 4), G13 closed. Six source parts, three dist outputs; npm test reads every one of the theme’s 32 values back out of tokens.css, and fails if a colour is typed anywhere in the package’s source.DL-10 · gaps G13	4 / 4
✓	M3.2 Product kit	Figma: app shell, KPI tiles, data table, filters, forms, chat pattern (Echo AI), empty/loading/error states, for MAFO + iRTB; the off-brand MAFO DS fork archived. Code: @pepperui/react pilot on shadcn/Radix — sidebar, topbar, nav, KPI tile, table, date range — applied to one Publisher Cabinet screen as proof.DL-11 · gaps G10 · G14	4 / 4
✓	M3.3 Documentation site v1	Getting started (per audience: designer / developer / manager), Foundations, Components with status, Patterns, the manager’s route to an on-brand artefact (PPTX theme, Google Slides theme, doc + email templates, the deck tool is the one route, and a second way to make a deck is a second way to drift), Roadmap (this file, rendered), Changelog. Internal URL first.DL-13 · DL-14 · gaps G15 · G17–G19	14 / 14
	M3.4 Governance	CONTRIBUTING.md (how to request, propose, review), GOVERNANCE.md (who decides), release cadence (monthly minor, semver, migration notes), Asana intake form, monthly release note to managers, adoption metrics on the roadmap page.DL-15	6 / 7
✓	M3.5 Accessibility pass	AA contrast on every semantic pair, focus rings, keyboard behaviour on all primitives; results on each component page.DL-20 · gaps G16	5 / 5
✓	M3.6 The Brand section	the company’s brand for the people who have to use it without a designer: Foundations (logo · colour · typography · accessibility) and Brand in action (web, social, presentation, when the design lead made the pieces), every asset on the page and downloadable from it, no Figma link anywhere in the section. Closes G15 — the brandbook contradicts the system — by replacing the brandbook with the files and the rule beside each one, and carries what DL-14 keeps.DL-19 · DL-14 · gaps G15	16 / 16
	M3.7 Illustrations	added 2026-09-18 at the design lead’s request: a library of isometric 3D objects composed into pictures for slides, PDFs and the site, each picture ONE definition drawn two ways — live on the web and still (SVG and PNG) in slides — every value a token, built and tested outside the repository the same day. Fifteen units: the screen colour picked on pictures, the plan, then the package, the tokens, thick outlines, one colour or three, the checks, the outputs, an Illustrations section on the site, Claude Design, the next batches and one release for every channel; after that, the goal that anyone in the team makes an illustration themselves.DL-26	26 / 30
✓	M3.8 Data visualisation	added 2026-09-21 at the design lead’s request, after their report on the charts the system draws today: an audit of every chart kind in every channel with its defects named in the file that causes each, the house chart standard — the eleven rules that are not colour, decided on rendered before-and-after pairs they picked from, and the standard carried out to every channel inside the design system: both renderers, the Figma chart recipes, the two product screens, the site’s Data visualisation section and the design system’s own -updated skill copies, and the twelfth rule they set on reviewing the built result — two colours in a chart is a comparison, so the second one is the two-slice donut’s grey. The deck tool and its PPTX export are out of scope, at their word: a consumer is read-only and its change is a written request.DL-27	4 / 4
✓	M3.9 The Echo AI chat	added 2026-09-21 at the design lead’s word, and pre-registered since 2026-09-10: the chat the system ships was the basic one, while the Echo AI chat they designed sat on the docs site as a preview whose own note promised that when the chat row lands, this card is deleted and the component takes its place. The chat is re-cut to their master — a shell with a branded strip, a quiet user bubble carrying its own time, a white hairlined Echo bubble holding a suggestions table, a projection row and an actions row, avatars on both sides and a one-line composer with a labelled button — and then carried out to every channel that draws a chat: the Figma library page, the React registry, the component and pattern pages with the preview card deleted, and the Echo AI product screen with the skill copies. It is worked under the rule they gave with it: everything their design depicts is rebuilt to it, and everything it does not depict keeps what the system already ships.DL-28	5 / 5
✓	M3.10 Web sections	added 2026-09-21 at the design lead’s word, and it is a test of two skills as much as a build: “we will start to see what actually our design system and our Pepper UI skill is capable of.” The Web sections page of the Figma file is empty, and an empty tab in a design system is a defect of its own; it is the third Templates set after Slide layouts and Product screens, and it is the want recorded on 2026-09-15 and left unscheduled at their word. A page of the new mobupps.com — a Travel vertical whose content they supplied — is built on that page from library instances by the Figma web-page skill, turned into an HTML prototype by the Figma-to-HTML skill and delivered as a pilot, and what the two tests found about the skills is written down with the corrections each needed. The skills are read from the site project’s own -updated copies, the ones that look every value up in the pepper-ui skill rather than carrying a palette; the design file the site was drawn in is read and never written.DL-29	3 / 3
✓	M3.11 The navigation bar	added 2026-09-22 at the design lead’s word, and it is the gap M3.10 named, opened by them from the other side. They put their earlier navigation bars back into the Figma file beside the new ones: the desktop bar because its drop shadow “looks very good” and the ladder had nothing like it — “too pale or too hard, but not something in the middle” — and the mobile bar because the component has no mobile form at all. So the milestone is two things. A fifth elevation step, taken from their own bar and carried to every channel the system ships through, with the Navigation menu bound to it; and the mobile bar rebuilt from their master on the system’s own tokens and parts. The link labels the component carries are their and are not a unit here — “forget about these links. I will do it manually in one minute.”DL-29	2 / 2
✓	M3.12 The icon library	added 2026-09-23 at the design lead’s word: applying the system to their product mock-ups, they found icons the library does not have. Every page of the two design files the products were drawn in — the site file and the old deck kit, not only their UI Kit packs — is read for every icon, including one placed on a page and never added to a pack, together with the icons the site, MAFO and the system’s own code draw, and all of it is compared with the library and with Lucide; what joins the library is their pick, made on a page of the icons themselves, with my proposals beside them. Then every icon they pick becomes a set of four sizes in the Figma library, and the CSS and React follow, so no channel draws a glyph the library lacks. The two design files are read and never written.DL-29	2 / 2
✓	M3.13 The corporate site’s requests	added 2026-09-25 at the design lead’s word: the corporate site, rebuilt on the published kit in three phases, filed twenty-five requests to the system on the way and brought them in one brief, in their order — the icon package first, because the site’s last phase waits on it; then what was decided on the site; then their own design decisions the system must absorb; then the new components and tokens; then their Figma-first item; then the candidates. One release answers them, then the site takes it. Every request is shipped, deferred with a reason, or on a pick page for their answer, and the site gets a release note it can act on line by line.DL-29	2 / 2
✓	M3.14 The corporate site’s requests 26–43	added 2026-09-28 at the design lead’s word (the site’s step-12 brief): the site moved to a design-system part carries the design system’s classes only, and every rule it still stated on a kit class became a request — eighteen, 26 to 43. One release answers them; the publish is their.DL-29	2 / 2
✓	M3.15 The corporate site’s request 45	added 2026-09-29 at the design lead’s word: the spacing scale ended at 80 and the site wrote the 128 between its sections by hand; the scale runs to 128 and a page’s two section steps are named, their number set by the screen width. One minor of the tokens.DL-29	2 / 2

Exit: the system runs as a product — versioned, documented, with an intake and a release rhythm.

Phase 4 · Backlog (not scheduled)

after Week 12

• Dark theme for products
• motion system
• RU/EN typography rules
• email + help-center templates
• iRTB / MobuppsX / Echo AI identity kits
• Figma → tokens sync bot
• library analytics
• ~~Google Slides add-on for managers
• deck layouts as a Figma Slides template~~ (the deck tool is the one route, a second way to make a deck is a second way to drift)
• web sections, and a site page assembled from the system rather than built by hand (the third Templates set after slide layouts and product screens, and the first want to arrive from outside the plan rather than from the audit)

The gaps, and what closes them

Every milestone is there to close a gap the audit numbered. A row is the audit’s own name for a gap, the milestones the roadmap gives it with how far each has come, and the checklist items that say they close it, ticked or open. Closed is written only where the audit says so.

Gap	Milestones	Closed by
G1 Five vocabularies for one palette	M1.1 8/8 · M1.2 7/8 · Sprint 0 migration map	—
G2 Same name, different value	M1.1 8/8 · M1.2 7/8 · Sprint 0 migration map	—
G3 Four “blacks”	M1.1 8/8 · M1.2 7/8 · Sprint 0 migration map	—
G4 Three mains for red	M1.1 8/8 · M1.2 7/8 · Sprint 0 migration map	—
G5 Two type scales, off by one	M1.1 8/8 (canvas modes, semantic roles)	1.1.5 ✓
G6 Almost no semantic layer	M1.1 8/8 (canvas modes, semantic roles)	—
G7 No elevation / effect tokens	M1.1 8/8 · M1.4 9/9	1.1.6 ✓
G8 Ramp gaps	M1.1 8/8 · M1.4 9/9	1.1.8 ✓ · 1.4.9 ✓
G9 Forked component libraries	M1.3 7/8 · M2.5 10/10	1.3.5 ✓ (for the masters)
G10 Interactive components exist only in S4 and only as Figma masters	M2.2 4/4 · M2.5 10/10 · M3.2 4/4	2.2.1 ✓
G11 Hygiene backlog from the May audit still open	M1.3 7/8 · M2.1 5/5	1.3.4 ✓ (for the library)
G12 Icons	M1.3 7/8 · M2.1 5/5 · M1.4 9/9 — M1.4 added 2026-09-11: its item 1.4.6, the Icons & logos page, is the checklist line that closes G12	1.4.6 ✓
G13 Charts three ways	M3.1 4/4	3.1.4 ✓ · Closed 2026-09-09
G14 The real product is off-system	M3.2 4/4	3.2.2 ✓ · partly closed 2026-09-18
G15 Brandbook contradicts the system	M1.4 9/9 (draft) · M3.3 14/14 (regenerated) · M3.6 (the Brand section)	1.4.8 ✓ (partly) · Closed 2026-09-15
G16 No accessibility baseline	M2.3 5/6 · M3.5 5/5 — 3.5.5 added 2026-09-17: the React parts’ focus ring never followed D65 — the three instruments that closed G16 read the CSS layer, and the React layer’s proof lives in a pilot outside npm test; closed the same day: the ring reaches React through shadcn.css and npm test holds it	3.5.4 ✓ · Closed 2026-09-09
G17 No single documentation	M1.4 9/9 · M2.3 5/6 · M2.6 3/3 · M3.3 14/14	2.6.2 ✓ · partly closed 2026-09-18
G18 Managers have no artefacts	M3.3 14/14 — closed by D86, not by building the five artefacts: the deck tool is the one route, and item 3.3.6 closes with it	3.3.6 ✓ · Closed 2026-09-15
G19 Single point of knowledge	M1.4 9/9 · M2.3 5/6 · M2.6 3/3 · M3.3 14/14 · M2.2 4/4 — M2.2 added 2026-09-11: its item 2.2.3, the locked rules as tests, is the checklist line that closes G19	2.2.3 ✓ · partly closed 2026-09-18

The audit has numbered 9 more since the map was drawn — G20–G28 — and the map gives them no milestone.

The audit score

The Figma library is audited after every session that touches Figma and at every milestone close, on a rubric written down at the baseline, and each run is filed in artifacts/audit/. Every number here is read from those files, and where another file repeats one — a later run’s trail, the plan, the roadmap’s own log, the decisions — the generate compares it.

98/100

run 16, 23 Sep 2026

16

runs filed from 7 Sep 2026

2

points short, in 2 of 5 areas

Where the points are

The rubric is five weighted areas, and the completeness area is the nine-point bar, so an audit finding and a queue item are the same object. The scores are run 16’s; where an area falls short, the run’s own first sentence on it says why.

Area	What it counts	Run 16
Token architecture	three tiers; roles as aliases; scopes; code syntax; modes; a source file; an agent-readable contractUnchanged: 320 variables in 5 collections.	24/25
Token coverage in components	share of fills, strokes, radii, paddings, gaps and text properties bound to a variable, per set	25/25
Component completeness	points 1–6 and 9 of the bar per component: own page, furniture, specimen grid, real properties, five states, all bound, screenshot-verified; and the size of the queue covered	25/25
Documentation & contract	points 7–8 of the bar: a description with Keywords:, and the when-not / relationships / anti-patterns block	15/15
Naming consistency	Property=value casing, ramp+number names, Figma name = code nameEvery set is Icon/<Lucide name>, its variants Size=16 · 24 · 32 · 48, its caption caption <name> — the page’s own forms.	9/10

Every run

Oldest first; the areas in the rubric’s order — token architecture, token coverage in components, component completeness, documentation & contract, naming consistency.

Run	Filed	After	Score	By area
Baseline	7 Sep	—	60	22 · 15 · 5 · 9 · 9
Run 2	7 Sep	after Toggle	9897 as read	24 · 25 · 25 · 15 · 9
Run 3	7 Sep	after Topbar	98	24 · 25 · 25 · 15 · 9
Run 4	7 Sep	after M1.4 and Button - danger	98	24 · 25 · 25 · 15 · 9
Run 5	7 Sep	the queue’s component rows complete	98	24 · 25 · 25 · 15 · 9
Run 6	7 Sep	the whole queue built	98	24 · 25 · 25 · 15 · 9
Run 7	8 Sep	after D45	98	24 · 25 · 25 · 15 · 9
Run 8	8 Sep	after 1.4.8a delta run.	98	24 · 25 · 25 · 15 · 9
Run 9	9 Sep	after the D59 Figma writeone page walked (KPI tile), five descriptions checked; every other page stands as run 8 measured it.	98	24 · 25 · 25 · 15 · 9
Run 10	11 Sep	after 2.5.3four pages walked at every depth, five contracts checked; every other page stands as run 9 measured it.	98	24 · 25 · 25 · 15 · 9
Run 11	14 Sep	after 3.2.1three pages walked at every depth and three contracts checked; every other page stands as run 10 measured it.	98	24 · 25 · 25 · 15 · 9
Run 12	17 Sep	after 2.5.8four pages walked and two contracts checked; every other page stands as run 11 measured it.	98	24 · 25 · 25 · 15 · 9
Run 13	17 Sep	after 2.5.9four pages walked and two contracts checked; every other page stands as runs 11 and 12 measured it.	98	24 · 25 · 25 · 15 · 9
Run 14	21 Sep	after 3.9.2one page walked and eight contracts checked; every other page stands as runs 11–13 measured it.	98	24 · 25 · 25 · 15 · 9
Run 15	21 Sep	after 3.9.4 and 3.9.5three pages walked and five contracts checked; every other page stands as runs 11–14 measured it.	98	24 · 25 · 25 · 15 · 9
Run 16	23 Sep	after 3.12.2three pages walked, the icon page’s structure held set by set; every other page stands as runs 11–15 measured it.	98	24 · 25 · 25 · 15 · 9

Between the baseline and run 2 the library was re-scored 14 times in the same session, as the first components were built — 60 → 76 → 78 → 82 → 84 → 86 → 88 → 90 → 92 → 94 → 95 → 96 → 98 → 98 → 98 — and those scores live only in the baseline’s trail. Run 2 found that trail had let completeness run to 27 of a 25-point area, the total agreeing while the parts did not; from that run on each audit states the five area scores and caps each at its weight.

Adoption

Four numbers — % of consumer colours bound to tokens, number of components at Ready, open requests, time-to-answer — and the first is the curve we watch from the start. Three of the four have a number today; time to answer waits for the first request that is answered.

56.6%

of colour usages bound, 8 Sep 2026

41.0%

on Day 0, 4 Sep 2026

0/88

components at Ready

Colour usages bound to a token

scripts/audit.py reads each consumer’s source and never writes to it. The share is those usages that resolve through a token reference over every place a colour value is applied in a consumer’s source. Each reading is a file in artifacts/audit/.

Reading	Taken	Bound	Share	What moved
First reading	4 Sep	2,347 of 3,900	60.2%	—
Day 0 baseline	4 Sep	2,349 of 5,730	41.0%	MAFO client came into the count: 2 of 1,830
2026‑09‑04.json	4 Sep	2,349 of 4,153	56.6%	MAFO client: 2 of 1,830 → 2 of 253after CR-001, same day
2026‑09‑04‑2.json	4 Sep	2,349 of 4,153	56.6%	nothing
2026‑09‑08.json	8 Sep	2,349 of 4,153	56.6%	nothing

The move on Day 0 was CR-001‘s: it took 1,577 unbound colour usages that were never on a screen out of the MAFO client surface, and the share rose without a single colour being bound to anything. No surface has moved since, and that is the rule rather than a stall — Nothing is connected to a live consumer. Every proof is built on a copy.. The adoptions so far are measured at the pilots’ copies, each beside the reading of the products on its day:

Copy	Taken	Surface	The product	The copy
after 2.7.6	8 Sep	MAFO client	2 of 253 · 0.8%	2 of 227 · 0.9%
after 2.7.3	8 Sep	MAFO client	2 of 253 · 0.8%	2 of 218 · 0.9%

The copies barely move the share, and their READMEs say why: a Pepper component carries its tokens as pui: classes, which N1 does not see, and $pui-* references are not var(--…) and N1 does not count them. And the audit writes down what no count can say: A var() counted as bound does not prove it points at the right token.

By surface, the highest share first:

Surface	Day 0	8 Sep
Site prototypes	67.8%721 of 1,063	67.8%721 of 1,063
Deck-tool chrome	67.1%418 of 623	67.1%418 of 623
Deck-tool slides	66.6%567 of 851	66.6%567 of 851
Site production	57.2%639 of 1,118	57.2%639 of 1,118
Publisher Cabinet	2.1%2 of 97	2.1%2 of 97
MAFO clientat the copy after 2.7.3: 0.9%	0.1%2 of 1,830	0.8%2 of 253
Claude skills	0.0%0 of 148	0.0%0 of 148

Components at Ready

The status words — Not started → Draft → Beta → Ready → Deprecated — and the bar for the fourth: Ready means Figma master + code + doc page (anatomy, props, do/don’t with why, tokens used) + a11y notes + visual test. Of the 88 items on the component board: 88 at Beta, none at Ready.

Requests, and the time to answer one

None yet. The request form opened on 18 Sep 2026 to everyone signed in to the company’s Asana, and as read from the board that day nobody has sent a request through it. From the first one on, this section shows how many are open, how long the first answer took — the median and the longest, in working days — and how often it came within ten working days.

What is counted: Contributing §5 makes a request open from the moment the form creates its task, answered by the first comment an approver leaves on it, and time to answer runs from a task’s creation to its first approver comment, reported as the median and the longest.

Capacity — read this before trusting the dates above

The arithmetic has never been checked against the person doing the work, and it does not hold.

	As written, by 4 Sep 2026	From the scoreboard, 1 Oct 2026
Items remaining	95 of 99	9 of 197
Weeks	13	9.1 to 4 Dec 2026
Required pace	7.3 items per week	1.0 items per week
People	one, part-time — Pepper UI competes with the deck tool, the site, the decks, the videos and the product design that pays for it	—

Seven finished items a week is a full-time pace for a team. At the one-to-two days a week this project realistically gets, thirteen weeks buys roughly 20–25 working days — and items like “Storybook deployed with visual snapshots” or “19 CSS primitives, each documented and tested” are multi-day items on their own.

What is actually credible by 4 December, in order: the token source and build pipeline, the single Figma library, the foundations docs, the deck tool proving the tokens, the tier-1 and tier-2 components, and the MAFO proving ground with one real screen free of CoreUI. That is Phase 1 plus most of Phase 2, and it is a genuinely good quarter.

What will not fit: the documentation site (DL-13), the manager template pack (DL-14), governance (DL-15), the accessibility pass (DL-20) and the remaining products. Those are Q1 2027 work.

The overrun is accepted. Work the plan in order and let the dates fall where they fall.

Beyond week 13 — the adoption programme

Stage two — the first change test. Once the system is finished and proven on the deck tool and the products, the first new thing added to it is gradients — the deck’s blob gradient, Echo AI’s, the product headers’ — as a deliberate test of the pipeline: a new token, a new component, from source to Figma to CSS to the consumers, timed and written up. Until then gradients stay as built and no new gradient is drawn.

So the thirteen weeks build the system. They do not finish the job. What follows is a rolling adoption programme, one application at a time, measured by N1 in 01_AUDIT.md §0.3 rather than by dates. Each wave ends when its app’s bound share is high and its screens render from Pepper components.

Wave	Target	Size on Day 0	Bound on Day 0	Why in this order
1	MAFO client	471 files · 128 898 lines · 16 438 lines CSS · 1 373 raw hexes	0.1%	Current stack (CoreUI 5 · React 18 · Vite 6), the same template as the Cabinet, nothing to upgrade first. Biggest prize, and the concepts already exist.
2	Publisher Cabinet	38 files · 5 859 lines · 656 lines CSS · ~40 raw hexes	2.1%	Small and fast once wave 1’s components exist. Needs the tech lead’s current code first.
3	MAFO advertiser	not measured — separate repo, not held locally	unknown	Ask for it when wave 2 starts.
4	client_agent	CoreUI 2 · React 16 · no Vite	unknown	Blocked on a framework decision, not on us. CoreUI 2 → 5 is a rewrite; our components cannot land until someone funds that upgrade.

The honest scale. Wave 1 alone is months, not weeks. 1 373 hardcoded colours do not become tokens in a sprint, and the 16 438 lines of custom CSS are what will actually resist — filling the empty _variables.scss changes CoreUI’s own components and touches almost none of that custom layer.

What makes it tractable is the order, not the speed. Tokens first, so every later change is a value change. Then tier-1 components, so each screen converted is permanently converted. Then screen by screen, with scripts/audit.py reporting the number after each one. A wave is finished when the number says so.

And the number is the point. 0.1% on the largest surface in the company is not a failure of the developers — nobody asked them to hold a system that did not exist. It is the size of the opportunity, stated once, so that progress against it is visible rather than argued about.

Risks and how the plan handles them

Risk	Mitigation
One maintainer (the design lead + Claude Code)	Every phase ends with something consumed, not just built; the skill and the tests carry the knowledge; nothing depends on a big-bang switch.
The deck tool’s locked rules regress during the token swap	Alias layer + rules_test.py + visual_regress at 0 pixel fails are the gate for M1.5.
Laravel production repo cannot change fast	Prototype-first (already the workflow); Blade only takes the generated CSS, no markup changes in Phase 2.
Figma Professional plan limits (4 modes, no REST variables, no Code Connect)	Token structure designed within 4 modes; sync via Tokens Studio / MCP scripts; component↔code map as a checked table. Re-evaluate Organization plan if the team grows.
Products owned by other developers	Deliver a Tailwind preset + React pilot they can adopt per screen; the Figma product kit does not depend on them.
Scope creep (it is tempting to redesign everything)	Phases close gaps in the audit; a new idea goes to the Phase 4 backlog unless it closes a numbered gap.