UX10: Capstone: three design projects for SehatSlot
Project 3: a system developers can build from
🎯You'll be able to
Complete the design system so all ten system tests pass, and write a handover a developer can use.
🏠The everyday picture
A recipe card for a restaurant chain lists exact quantities, steps and what to avoid, so every branch makes the same dish.
📘What it really is
-
Tokens: fix
tokens.json(contrast pairs at 4.5 to 1, focus at 3 to 1, spacing in steps of 4), runnpm run tokens, and remove raw colours fromstyles.css. -
Components: show button, text field, time slot and alert in every required state on
components.html. - Documentation:
design-system/README.mdwith When to use, Don't and Accessibility for each component. - Consistency: every
<button>in the prototype usesbtnorslot. - Version: choose the new version number, update
tokens.jsonand writeCHANGELOG.md.
📝A worked example
Input: test 2 failing on the starter.
Expected output from npm run test:system: "text-muted on surface is 2.85 to 1". Darken text-muted (the reference uses #4a5561,
7.60 to 1), run npm run tokens, and re-run. Work through each pair until the test passes, then check test 3 (the starter's focus colour is
1.43 to 1 against the background; the reference's #b34700 is 5.12 to 1).
🌍Where it's used
- Design system teams releasing new versions.
- Accessibility fixes applied once in tokens and reaching every screen.
- Handover to development teams.
📝Case scenario
A learner passed every system test but used #0b5d7a directly in a new rule in styles.css. Test 5 caught it. Using
var(--color-primary) kept the prototype tied to the tokens, so a later colour change reached every screen.
🖱️Try it
Write the changelog entry for your version, listing each change in plain words. Success: the version matches tokens.json, and every
change can be traced to a finding or a test.
⚠️Common mistakes
- Editing
tokens.cssby hand. Sign: test 5 says it's out of date. Fix: changetokens.jsonand rebuild. -
States missing on the component page. Sign: test 6 names a missing state. Fix: add an example with
data-componentanddata-state. -
Version and changelog out of step. Sign: test 10 fails. Fix: update both together.
🛠️For your project
The project page's safety item: every text pair meets 4.5 to 1, and no state relies on colour alone.
✅Quick check
What must you do after changing tokens.json?
Show the answer
Run npm run tokens to rebuild prototype/tokens.css.
What does test 9 check?
Show the answer
That every button in the prototype uses the system's btn or slot component.