Contact

Talmind Design System: from 72 base tokens to a full product

A design system built to extend

Talmind Design System & Handoff: colours, typography and components

Design System

Role
Product Designer · Solo
Type
Design system → product
Foundation
72 base tokens
Tools
Figma · Variables
Foundations

Colors

Colors were built as Figma Variables, not plain styles. This lets a semantic layer (--color-brand-default) reference a primitive (brand-500) instead of hardcoding it. Change the primitive once, and every screen using that semantic token updates automatically.

Talmind colour primitives: Brand, Neutral, UI Accent and Functional scales from 50 to 950

Semantic tokens

A semantic token is a name that describes a color's role rather than its value, like --color-brand-default instead of a raw hex code. Each one maps to exactly one primitive: --color-brand-default is always brand-500, everywhere it's used.

Semantic tokens: Brand and accents, Surfaces and text, Status, and Game category boxes, each mapped to a primitive and hex

Typography

Talmind type scale: Display Large, Display, H1, H2, Subtitle, Label, Body, Caption and Tiny with weights, sizes, usage and samples

Icons & illustration

Talmind icon and illustration set: line icons plus 3D illustrations (play, backpack, game controller, mascot, trophy, AI robot)
System · Components

How a single atom becomes a whole system

Components build in layers: primitive → component → screen template. The DailyPrepCard's three lesson-prep tiles, for example, share a single primitive with defined states (done, in-progress, locked). Change the primitive once, and it updates everywhere.

When the flow needed a new state, I added it as a variant instead of a new component. It inherited the existing typography, spacing, and color tokens automatically, with zero changes to screens already built.

Primitives. Atoms and small building blocks: badges, text styles, nav items, the InsightItem, and the three ActivityCard states (Video / Quiz / Game) with their progress, done and locked variants.

Primitive components: atoms, content blocks, navigation, leaderboard, lesson topic card and activity cards, each shown with its variants

Composed components. The primitives assembled into screen-level pieces used across the product.

Composed components: Sidebar, TopBar, DailyPrepCard, QuestionCard with all four AnswerOption variants, ScoreCard, TargetZone and more
Handoff

Handed off to developers, not just to myself

I built a separate Handoff page that documents the system in the language a developer needs: exact tokens, states and edge cases, rather than a picture of how it looks. It includes a component inventory with variants and states per component, and a motion table that gives the real duration and easing values instead of a note saying "there's an animation."

Component inventory 15 components · where each is used, its variants, and the implementation note that travels with it

ComponentUsed inVariants / statesImplementation notes
SidebarAll screens
DefaultActive item
Fixed rail; icon + active pill; avatar with presence dot pinned to the bottom.
TopBarHome
Default
Greeting + points badge + week-day selector + notifications bell.
HeaderQuiz · Lesson
Default
Back button + title + subtitle; reused on every drill-down screen.
DailyPrepCardHome
Default
Wraps three ActivityCards (Video → Quiz → Game) as the 3-step prep flow.
WeeklyQuizCardHome
Default
Trophy + progress "6 / 30" + Continue link.
KeepGrowingCardHome
Default
Skill pie (Questioning / Solve / Creativity) with legend.
LeaderboardCardHome
Default
Top-3 avatars + score pills.
LessonTopicCardHome · Lesson
In progressComplete
Title + progress bar + illustration + arrow; percentage drives the bar.
WhatToRememberCardLesson
Default
InsightItem list (Ownership / Empathy) beside the AI-helper panel.
SkillCardLesson
QuestioningSolveCreativity
Metric "104 / 120" + tinted blob; one variant per tracked skill.
QuestionCardQuiz
Default
Prompt + step dots (3 / 8); composes four AnswerOptions.
AnswerOptionQuiz
DefaultCorrectCorrectRevealWrong
One primitive with four states drives every piece of quiz feedback.
ScoreCardQuiz
Default
Current balance + "+10 pts" chip + monster mascot.
DraggableCardGame
IdleDraggingPlaced
Concept chip dragged into a TargetZone; shadow lifts while dragging.
TargetZoneGame
Torah SourceItem StatusRulingSigns
Dashed category box; accepts DraggableCards; colour bound to its category token.

Motion & animation every motion documented with its trigger, duration and easing, instead of a note saying "there's an animation"

ElementTriggerDurationAnimation & easing
Page: app frameOn load600 msFade + scale-in 0.98 → 1 · cubic-bezier(.2,.7,.2,1)
Page: content blocksOn load (stagger)500 ms · 60 ms stepFade + rise 16 px → 0 · ease-out
Page: exitOn route change300 msFade + rise 0 → −12 px · ease-in
Sidebar nav itemOn select250 msActive pill slides + icon tint crossfade · ease-out
Back buttonOn press200 msTap scale 0.94 + arrow nudge −3 px · ease-out
Points badgeOn points earned600 msCount-up + pop 1 → 1.12 → 1 · cubic-bezier(.34,1.56,.64,1)
"+N" fly chipOn correct answer900 msChip flies AnswerOption → points badge · cubic-bezier(.2,.72,.2,1)
Monster: idleAmbient loop7 s · infiniteGentle float translateY ±13 px + scale · ease-in-out
Monster: happyOn quiz complete1600 msWave rotate ±12° (keyframed) · ease-in-out
SparklesOn quiz complete1200 msTwinkle scale + opacity, staggered · ease-in-out
Next project Talmind A tablet learning app for Korean classrooms

Liked this project?
Let's talk.

Let's work together
Back to all work