Concepts in CSS & Design Systems, page 9
Semantic vs. Primitive Design Tokens
Semantic tokens give meaning to raw values so components bind to intent, not hex codes. They let you rebrand or theme by changing aliases, not component code.
Design Token Naming Conventions
Design token names encode meaning through a consistent, layered structure so values stay portable across themes and platforms. A clear convention like category-type-item-state turns scattered constants into a self-documenting, predictable system that…
Categories of Design Tokens
Design tokens fall into tiers: primitive tokens hold raw values, semantic tokens assign meaning by aliasing primitives, and component tokens scope decisions to specific UI parts.
Tiered Token Architecture in CSS
Tiered tokens layer CSS variables as raw values, semantic aliases, and component bindings. Use them when one rebrand must update hundreds of elements. The footgun is skipping aliases and binding hex codes directly to components, locking you into manual…
Auto-Generated Changelogs for Design Systems
Automated changelog generation turns structured commits into release notes without hand editing. It rescues teams when design systems ship frequent token or component updates. The footgun is that sloppy commits produce useless logs so discipline beats tooling.
Cross-Browser Testing Automation
Rendering engines disagree, so your CSS may break in Safari while Chrome looks fine. Automation runs your UI across real browsers in CI to catch visual drift early. The footgun is testing every pixel, which breeds brittle suites that teams eventually ignore.
Private NPM Registry for Internal Packages
A private registry hosts packages so teams npm install internal design systems like public dependencies. It matters when you split a monolith into shared libraries. The footgun is skipping scoped names and auth, which risks leaking code to the public registry.
Design System Guild: Cross-Team Governance
A design system guild lets squads co-own the system, not a central team alone. It scales when one team cannot cover every surface. The footgun is voluntary membership without decision rights; it devolves into a committee that ships nothing.
Design System Roadmap: Sequence Adoption Over Completeness
A design system roadmap sequences components by business impact, not visual completeness, to stop teams rebuilding the same UI. Use it when multiple squads duplicate buttons and forms. The footgun is a perfect Figma library engineers never adopt.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles