Design Tokens with CSS
Define colors, spacing and type once as CSS custom properties and reuse them across a site.
What you'll learn
- Define tokens with CSS custom properties
- Organize base and semantic tokens
- Switch themes by changing token values
- Document tokens for a team
About this course
You turn a site with hard-coded values into one driven by design tokens. You set up color, spacing, type and radius tokens, add a dark theme and document the set.
Course curriculum
4 modules and 12 lessons over 3 weeks. Plan for about 9 learning hours.
01Custom propertiesWeek 1 · 3 lessons
- Syntax and scope
- Fallbacks
- Inheritance
02Token setsWeek 1 · 3 lessons
- Color
- Spacing and radius
- Type
03ThemesWeek 2 · 3 lessons
- Semantic tokens
- Dark theme
- prefers-color-scheme
04RefactorWeek 3 · 3 lessons
- Replacing hard-coded values
- Token reference page
- Exercise review
Project
Token refactor. A supplied site refactored to use design tokens, with a dark theme and a token reference page.
Who this course is for
Developers who keep copying the same hex codes and pixel values.
Prerequisites
You write CSS for full pages.
What's included
- 120-day course access
- Step-by-step lessons
- Practice files
- Reusable code templates
- A graded final exercise
- A digital completion certificate
Learning format
Self-paced practical course, part of our self-paced courses. Graded final exercise with written feedback.
Access and delivery
- Enrollment is activated within 15 minutes after payment.
- Final exercise feedback is delivered within 2 business days of submission, and the completion certificate is issued within 2 business days after passing the final exercise.
Certificate
You receive a digital completion certificate. Final exercise feedback is delivered within 2 business days of submission, and the completion certificate is issued within 2 business days after passing the final exercise.
Frequently asked questions
When does access start?
Enrollment is activated within 15 minutes after payment.
Is payment taken on this website?
No. After you submit your enrollment request, we reply by email with payment details and enrollment confirmation.
Does this course guarantee a job or income?
No. It is an education and training service and does not include employment, income or placement guarantees.
Can I cancel?
Our Refund and Cancellation Policy lists the terms for self-paced course programs.
