TaskBuild a Button + Card design system. @layer tokens, base, components. tokens: :root --primary, --bg, --text, --border, --radius. base: :where(body) font-family system-ui sans-serif, padding 24px. base: :where(button) cursor pointer. components: .button with custom-prop API (--bg, --fg, --pad-x, --pad-y) + variants (.primary, .danger). components: .card via @scope with h3 + p + button styling. .card:has(.featured-badge) gets a gold border.
Module capstone: design system primitive (Button + Card)
200 XP14 min
Theory
Putting B8 together
Build a 2-component design system that uses EVERY B8 concept:
- B8-01: @layer with explicit priority.
- B8-02: CSS nesting for component definitions.
- B8-03: :has() for parent-style-based-on-child.
- B8-04: :where() for zero-specificity reset.
- B8-05: Custom properties as component API (--bg, --pad).
- B8-06: @scope for component-local rules.
- B8-10: 3-layer structure (tokens, base, components).
End: a Button + Card system where variants are CSS-var overrides, scoping is via @scope, and the cascade is layered.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.