WEBVTT

00:00:00.000 --> 00:00:06.000
Why give a colour or spacing value a name?

00:00:06.000 --> 00:00:13.000
A design token lets styles refer to a shared decision.

00:00:13.000 --> 00:00:18.000
Give repeated design choices a useful source.
6 design-token basics.

00:00:18.000 --> 00:00:30.000
Name a repeated choice
A token can represent a colour, spacing or typography decision.
Colour value · Spacing value · Type style

00:00:30.000 --> 00:00:42.000
Describe the intended role
A role-based name can explain where a value belongs.
Primary text · Page background · Control border

00:00:42.000 --> 00:00:54.000
Reference the shared value
Components use the token instead of repeating an unrelated local value.
Shared reference · Reusable component · Consistent style

00:00:54.000 --> 00:01:06.000
Support different themes
A role can stay consistent while its value changes between themes.
Same purpose · Light theme value · Dark theme value

00:01:06.000 --> 00:01:18.000
Review the wider effect
Changing a shared token can affect many places at once.
Affected components · Visual differences · Readable contrast

00:01:18.000 --> 00:01:30.000
Document the decision
Explain the token purpose and review new values before release.
Clear naming · Usage guidance · Reviewed update

00:01:30.000 --> 00:01:39.000
Your checklist
Name a repeated choice · Describe the intended role · Reference the shared value · Support different themes · Review the wider effect · Document the decision

00:01:39.000 --> 00:01:47.000
Review the affected components whenever a shared value changes.
jerseyweb.je