A single source of truth — from Figma tokens to production-ready HTML. This is how we built DS 1.5 and shipped it across every student-facing screen.
Figma file TLVKe3bgJTdVvuPAzgDq2f · Published as
a Team Library · Light / Dark · Student / Teacher /
Parent
Four phases, May 4 – June 10 2026. Every milestone below is traceable to real commits in the repo.
Cleaned up the Figma source (9 fixes), locked the 3-tier token architecture, and published the Team Library. First components landed same day — Navbar 1.5, Class Cards, the streak & success modals.
Built the Home screen end-to-end: Carousel 1.5, Quiz Card, Static Card, status pills. A long DS-alignment pass on the Navbar, and the first responsive breakpoints (tablet / mobile).
The busiest stretch (199 commits the week of May 11). Badges, full button state machines, dropdowns, profile & notification menus, the reusable page template — the component library matured here.
Composed the catalogue onto the system: Rewards (×5), Achievement cards + data tables (×3), Class (×2), Learn (×4), Practice, Battle — plus cross-page nav wiring.
The foundation is set and documented. Next: new home layouts and the Avatar Customizer — the gamification layer.
All figures derived from the repository’s git history. Hands-on time is a session-based estimate — commits grouped into work sessions, a new session counted when the gap exceeds ~90 minutes.
Every value resolves through a 3-tier chain. Components reference Semantic tokens; Semantic aliases Product (per user role); Product points at raw Primitives. Change a primitive once — it cascades everywhere.
Raw, mode-less values. The atomic palette and scale.
Role-aware aliases. Same token, different palette per user.
What components actually consume. Theme-aware.
Semantic color tokens, named by role not by hue — the
same green is Surface/primary on a fill and
Border/primary on a stroke. Click any swatch to copy
its hex.
Each subject carries its own brand color and DS icon — together they drive subject badges and quiz-card borders across the product. Click a card to copy its hex.
Poppins, 21 styles across Header, Title, Body and Caption. Heading & Title sizes step down across Desktop / Tablet / Mobile via the Responsives collection; Body and Caption never change.
An 8-point-based semantic scale. Layout padding is consistently
space-m (16px); the gap between every page section is
also 16px. No hardcoded pixels — every gap resolves through a
token.
One source — the DS Iconography page. Every icon ships
as an SVG <symbol> referenced via
<use>, drawn at native 24×24 with
stroke=currentColor so a single
color: rule drives every state. Hover to read the
token, click to copy.
A fluid page shell driven by a handful of CSS variables. One value
(--page-max-width) flips the product between fluid and
capped. Three breakpoints map to the DS Responsives frames.
Pandai green is the spine of the system. The Product tier lets one component re-skin itself per audience — Student is OG-Green, Teacher is Pink, Parent is Yellow — without changing a line of component code.
DS-faithful, every screen. These are the non-negotiable rules that turn Figma tokens into pixel-accurate, maintainable HTML.
Zero hardcoded hex or px. Every value resolves through a Semantic CSS variable mirroring the Figma path 1:1.
No drop shadows on cards. Depth comes from a
1px border; elevation styles are reference only.
Flat DS colors only. Every fill is a single token — no
linear-gradient in the system.
Figma INSIDE → box-shadow:inset;
OUTSIDE → box-shadow; only
CENTER → border.
Default / Hover / Pressed / Active / Disabled are distinct Figma variants, each pulled separately.
Every icon is a <symbol> from the Iconography
page at native 24×24, colored by inheritance.
Every block is a semantic <section>,
separated by a constant 16px (space-m) gap.
Responsive layouts use CSS order +
flex-direction; the HTML source order never
changes.
18 student-facing screens, composed entirely from DS 1.5. Drive the live build — pick a screen, then flip between the Figma design and the live HTML render.
All 16 designed screens as Figma snapshots. Filter by feature, or click any to load it into the live build.
DS 1.5 ships as a real engineering source of truth — a published library, in-file documentation, 1:1 token naming and reference builds. A few pipeline pieces are still in flight.
Published library: 938 variables, 195 component sets, 255 paint styles, 21 text styles, 6 effect styles.
DeliveredIn-file specimens — Colors (255 swatches), Typography (21 styles), Spacing & Radius.
Delivered255 paint styles, every one linked to a Semantic variable — no detached colors.
Delivered
Figma paths mirror CSS vars exactly —
Surface/primary/default →
--surface-primary-default.
18 production-faithful HTML builds engineers can read line-for-line.
DeliveredDev Mode inspection and redline annotations for spacing and specs.
In progressW3C Design Tokens export to feed the codebase token pipeline.
PlannedA CLAUDE.md guardrail file so new UI stays DS-faithful by default.
PlannedDS 1.5 is one connected system — tokens, components and 18 shipped screens, all traceable to a single Figma source of truth.
Built with the system it documents · Poppins #00cc85
The system is proven across 18 screens. Part 2 builds on it — the roadmap reuses the same DS components, with targeted redesigns and a few net-new builds across the product.
Reworking core learning features — Quiz, Experiments, Flashcards and more — on top of DS 1.5.
RedesignA full UI + UX overhaul of Quiz Battle and the end-to-end battle flow.
UI + UXRefreshing the AskPbot assistant modal — clearer, smoother conversational UX.
UXUI + UX revival plus a new customizable character component — the gamification layer.
New buildA first-run onboarding flow to guide new students in — UX, likely net-new development.
UX + BuildHome-screen widgets for quick access and streaks — OS-dependent (iOS / Android).
OS-dependentDynamic, context-aware app launcher icons that respond to events and milestones.
ExploringRich motion throughout — driving the user’s custom avatar into quiz sessions.
MotionA UI + UX refresh with richer interactivity and animation.
UI + UXPandai App — Revolutionized · Gamified · Interactive.
A ground-up rethink of the student experience — built on everything DS 1.5 proved.
Play, streaks, rewards and a living avatar woven through every learning moment.
Motion, feedback and delight on every screen — the product comes alive.
The building blocks of the next chapter — motion, sound, play and a living companion, all layered on the system we’ve proven.
A library of animated illustrations and micro-interactions, reusable across the app.
MotionAudio feedback woven into key actions, rewards and transitions.
AudioA premium retention & conversion lever — 3 random games on a bi-weekly rotation to earn coins and unlock new badge releases. Free users get a taste, nudging them to convert and join in.
Premium · retentionA new interactive PBot companion — feed it, study with it, customize it. Part of the custom avatar development.
New buildCustom profile banners for personalization and status expression.
Custom profileCelebratory gain moments — Badge, Streak, Avatar and Coins pop-ups.
FeedbackA bimester-by-bimester view of the road to Pandai App 2.0 — from pitch to the phase-1 hand-off.
Pushing our level best to ship 2.0 by Bimester 1, 2027 — hoping to tease it at the Pandai Awards Ceremony. 🤞
Let’s strive for better product.
Made with in Malaysia