🖼️ See the drawing + lab 🏠 Course home 🌿 Branch on GitHub ✏️ View source

🖼️ आकृती आणि labThe drawing + lab पूर्ण पानावर उघडा ↗Open full page ↗

🎽 धडा 08 — Design systems आणि tokens: शाळेचा गणवेश

📍 तुम्ही इथे आहात: 12 पैकी धडा 08 · मागील: lesson-07-frameworks · पुढील: lesson-09-performance

📦 या ब्रँचमध्ये काय आहे

धडे 01–07, आणि त्यासोबत अनेक लोक बदल करत असतानाही फलक एकसारखा कसा राहतो: design tokens (नाव दिलेले निर्णय), अंतर आणि अक्षरांसाठी scales, आणि token swap म्हणून dark mode.

🧒 5 वर्षांच्या मुलाला समजावल्यासारखे

पाच लोकांना एक फलक द्या आणि कोणतेही नियम देऊ नका, तर तुम्हाला पाच निळे रंग, राखाडीच्या चार छटा, 7px, 13px आणि 18px चे अंतर, आणि बटणांच्या तीन शैली मिळतात. काहीच चूक नाही; फक्त फलक पाच फलकांसारखा दिसतो.

गणवेश हे दुरुस्त करतो 🎽. "सगळे एकच कपडे घालतात" असे नाही, तर "प्रत्येक निर्णय एकदाच घेतला जातो आणि त्याला नाव दिले जाते":

:root {
  --bg: #f8fafc;  --ink: #0f172a;  --accent: #db2777;
  --space-1: 6px; --space-2: 12px; --space-3: 20px;
  --radius: 12px;
}

आता stylesheet मध्ये कुठेही #db2777 लिहिलेले नाही — तिथे var(--accent) लिहिलेले आहे. Token एकदा बदला आणि संपूर्ण फलक बदलतो. या नाव दिलेल्या निर्णयांना design tokens म्हणतात, आणि ती सगळ्यात छोटी उपयोगी design system आहे.

सगळ्यात छान भाग म्हणजे dark mode 🌙: प्रत्येक component रंग न मागता var(--bg) आणि var(--ink) मागतो, म्हणून theme बदलणे म्हणजे सहा tokens पुन्हा ठरवणे. दुसरी stylesheet नाही. Elements बदलणारी JavaScript नाही. सहा ओळी.

आणि फलक वाचकाचा दोनदा आदर करतो: तो system setting (prefers-color-scheme) पाळतो आणि toggle ने (<html> वरचा data-theme) ती बदलू देतो, जी निवड localStorage मध्ये लक्षात ठेवली जाते.

🗺️ आकृती

flowchart TB
    tok[":root tokens — --bg --ink --accent --space-2 --radius --font"]
    comp["components only use var(--token) — never a raw colour"]
    sys["@media (prefers-color-scheme: dark) → redefine 6 tokens"]
    user[':root[data-theme="dark"] → the toggle wins, saved in localStorage']
    tok --> comp
    tok --> sys --> comp
    tok --> user --> comp
    note["change --accent once → the whole board changes"]

❓ काय

Token = नाव दिलेला design निर्णय: रंग, अंतराची पायरी, radius, font, shadow, motion चा कालावधी. CSS custom properties (--name) ही मूळ पद्धत आहे; design tools आणि multi-platform systems तीच नावे Figma, iOS आणि Android कडे export करतात.
आकडे नाही, scales: अंतर 6/12/20, अक्षरे 0.85/1/1.15/1.5rem. Scale मधून निवडल्याने शंभर छोटे निर्णय टळतात.
Theming: light palette :root वर ठरवा; फक्त रंगांचे tokens @media (prefers-color-scheme: dark) खाली आणि [data-theme="dark"] attribute खाली पुन्हा ठरवा, म्हणजे स्पष्ट निवड दोन्ही दिशांनी जिंकते.
Contrast हा token चाच भाग आहे: प्रत्येक जोडी (bg वर ink, card वर muted) एकदा 4.5:1 साठी तपासा — मग प्रत्येक component ला पास होणारी निवड वारशाने मिळते (धडा 06).
Design system = tokens + components + वापराचे नियम + एक मालक. Tokens ही पहिली पायरी आहे आणि छोट्या फलकासाठी बहुतेक फायदा तेच देतात.
Utility CSS (Tailwind) हीच विस्कळीत होण्याची अडचण वेगळ्या प्रकारे सोडवते: token config मधून बनवलेले classes. कल्पना तीच, पृष्ठभाग वेगळा.

🤔 का

कारण एकसारखेपणा हे असे वैशिष्ट्य आहे जे users ना "हे चांगले बनवले आहे" असे जाणवते, आणि token पत्रक redesign ला "300 ठिकाणी बदल करा" वरून "सहा किमती बदला" वर आणते. Dark mode, brand बदल आणि accessibility दुरुस्त्या सगळ्या एका ओळीची कामे बनतात.

🔧 कसे (या repo मध्ये)

ui/styles.css चा वरचा भाग: tokens चा एक :root block, मग prefers-color-scheme खालचा dark-mode override, मग स्पष्ट [data-theme="dark"] block. खालचा प्रत्येक नियम var(--…) वापरतो. ui/app.js च्या section 5 मधला toggle data-theme लावतो, aria-pressed उलटवतो, आणि निवड save करतो.

🧪 करून पाहा

python3 ui/mock_api.py
# 1) one-line rebrand: change --accent to #0d9488 in styles.css, reload — buttons, links, focus rings, grades, all of it
# 2) dark mode three ways: the 🌙 toggle · your OS setting (system → dark, with the toggle unset) · DevTools → Rendering → Emulate prefers-color-scheme
# 3) break the uniform on purpose: set .card .grade { color: #ff00aa } and see how a raw colour survives the theme switch badly
# 4) add a token: --shadow: 0 1px 3px rgb(0 0 0 / .08); use it on .card, and add a darker one under the dark blocks
# 5) check contrast: DevTools → inspect .status → colour swatch shows the ratio (aim ≥ 4.5:1)

✅ तपासा — तुम्हाला काय दिसायला हवे

एका token बदलाने संपूर्ण फलकाचा accent पुन्हा रंगतो. Dark mode toggle ने आणि OS setting ने चालतो, आणि toggle लावलेला असेल तर तो जिंकतो — आणि प्रत्येक component चा code तसाच राहतो. तुमचा थेट गुलाबी .grade dark mode मध्येही गुलाबीच राहतो: tokens नेमके हेच विस्कळीत होणे थांबवतात.

🏁 तुम्ही आत्ताच काय सिद्ध केले

दिसण्याचा प्रत्येक निर्णय एकाच ठिकाणी राहतो, themes म्हणजे token swap, आणि कोणती theme चालू आहे हे component ला कधीच माहीत असण्याची गरज नसते.

⚠️ नेहमीच्या चुका

components मध्ये जागोजागी शिंपडलेले थेट रंग आणि magic numbers
light stylesheet पासून दूर जाणारी वेगळी dark stylesheet
theming साठी inline रंग लावणारी JavaScript
भूमिकांऐवजी (--accent, --muted) निरर्थक नावांचे tokens (--blue-2)
dark palette साठी contrast पुन्हा तपासायला विसरणे

🏭 प्रत्यक्ष वापरात हे का महत्त्वाचे: design systems अस्तित्वात आहेत कारण माणसे वाढली की एकसारखेपणा टिकत नाही. Tokens हे सगळ्यात स्वस्त 80% आहेत — एक file, कोणतेही tooling नाही, प्रत्येक framework मध्ये आणि साध्या CSS मध्ये चालतात.

⏭️ पुढे

ते बरोबर दिसते — आता ते पटकन पोहोचवा: performance — bytes, images, caching आणि Core Web Vitals.

git checkout lesson-09-performance

🎽 Lesson 08 — Design systems & tokens: the school uniform

📍 You are here: Lesson 08 of 12 · Previous: lesson-07-frameworks · Next: lesson-09-performance

📦 What's in this branch

Lessons 01–07, plus how a board stays consistent while many people edit it: design tokens (named decisions), scales for spacing and type, and dark mode as a token swap.

🧒 Explain like I'm 5

Give five people a board and no rules and you get five blues, four shades of grey, spacing of 7px, 13px and 18px, and three button styles. Nothing is wrong; the board just looks like five boards.

A uniform fixes it 🎽. Not "everyone wears the same thing", but "every decision is made once and given a name":

:root {
  --bg: #f8fafc;  --ink: #0f172a;  --accent: #db2777;
  --space-1: 6px; --space-2: 12px; --space-3: 20px;
  --radius: 12px;
}

Now nothing in the stylesheet says #db2777 — it says var(--accent). Change the token once and the whole board changes. These named decisions are design tokens, and they are the smallest useful design system.

The best part is dark mode 🌙: because every component asks for var(--bg) and var(--ink) rather than for a colour, switching themes is redefining six tokens. Not a second stylesheet. Not JavaScript editing elements. Six lines.

And the board respects the reader twice: it follows the system setting (prefers-color-scheme) and lets the person override it with the toggle (data-theme on <html>), remembered in localStorage.

🗺️ Diagram

flowchart TB
    tok[":root tokens — --bg --ink --accent --space-2 --radius --font"]
    comp["components only use var(--token) — never a raw colour"]
    sys["@media (prefers-color-scheme: dark) → redefine 6 tokens"]
    user[':root[data-theme="dark"] → the toggle wins, saved in localStorage']
    tok --> comp
    tok --> sys --> comp
    tok --> user --> comp
    note["change --accent once → the whole board changes"]

❓ What

Token = a named design decision: colour, spacing step, radius, font, shadow, motion duration. CSS custom properties (--name) are the native way; design tools and multi-platform systems export the same names to Figma, iOS and Android.
Scales, not numbers: spacing 6/12/20, type 0.85/1/1.15/1.5rem. Picking from a scale removes a hundred small decisions.
Theming: define the light palette on :root; redefine only the colour tokens under @media (prefers-color-scheme: dark) and under a [data-theme="dark"] attribute so an explicit choice wins both ways.
Contrast is part of the token: check each pair (ink on bg, muted on card) once at 4.5:1 — then every component inherits a passing choice (lesson 06).
A design system = tokens + components + usage rules + an owner. Tokens are step one and give most of the benefit for a small board.
Utility CSS (Tailwind) solves the same drift problem differently: classes generated from a token config. Same idea, different surface.

🤔 Why

Because consistency is a feature users feel as "this is well made", and because a token sheet turns a redesign from "edit 300 places" into "edit six values". Dark mode, brand changes and accessibility fixes all become one-line operations.

🔧 How (in this repo)

The top of ui/styles.css: a :root block of tokens, then the dark-mode override under prefers-color-scheme, then the explicit [data-theme="dark"] block. Every rule below uses var(--…). The toggle in ui/app.js section 5 sets data-theme, flips aria-pressed, and saves the choice.

🧪 Try it

python3 ui/mock_api.py
# 1) one-line rebrand: change --accent to #0d9488 in styles.css, reload — buttons, links, focus rings, grades, all of it
# 2) dark mode three ways: the 🌙 toggle · your OS setting (system → dark, with the toggle unset) · DevTools → Rendering → Emulate prefers-color-scheme
# 3) break the uniform on purpose: set .card .grade { color: #ff00aa } and see how a raw colour survives the theme switch badly
# 4) add a token: --shadow: 0 1px 3px rgb(0 0 0 / .08); use it on .card, and add a darker one under the dark blocks
# 5) check contrast: DevTools → inspect .status → colour swatch shows the ratio (aim ≥ 4.5:1)

✅ Verify — what you should see

One token change repaints the whole board's accent. Dark mode works from the toggle and from the OS setting, and the toggle wins when set — while every component's code is untouched. Your raw pink .grade stays pink in dark mode: that is exactly the drift tokens prevent.

🏁 What you just proved

Every look decision lives in one place, themes are a token swap, and a component never needs to know which theme is active.

⚠️ Common mistakes

raw colours and magic numbers sprinkled through components
a separate dark stylesheet that drifts from the light one
JavaScript setting inline colours for theming
tokens with meaningless names (--blue-2) instead of roles (--accent, --muted)
forgetting to re-check contrast for the dark palette

🏭 Why this matters in production: design systems exist because consistency does not survive headcount. Tokens are the cheapest 80% — one file, no tooling, works in every framework and in plain CSS.

⏭️ Next

It looks right — now make it arrive quickly: performance — bytes, images, caching and Core Web Vitals.

git checkout lesson-09-performance

← Previousframeworks Next →performance

This page is the lesson's README from the lesson-08-design-tokens branch, shown here so the whole School stays on one site. Code files open on GitHub at the same branch.