YUNOVA · Bootstrap & Tailwind
Module 11: Design systems with frameworks
Design tokens for CSS
Key points
- Design tokens store decisions such as colours, spacing and type as named values.
- CSS custom properties are a common way to ship tokens to the browser.
- Changing a token updates every component that uses it.
Accessible components with ARIA
Key points
- Use native HTML elements first; add ARIA only when they are not enough.
- ARIA attributes like aria-expanded describe state to screen readers.
- Interactive components must work with the keyboard and show focus.
Building a reusable component library
Key points
- Components should have clear variants and props rather than one-off styles.
- Documenting each component with examples helps teams reuse it.
- Shared tokens keep components visually consistent.
Removing unused CSS for performance
Key points
- Unused CSS adds download and parse time to every page.
- Tailwind scans your source files and only generates classes you use.
- Tools such as PurgeCSS remove unused selectors from other frameworks.