Skip to lesson
Exit
Front-End Craft Deep Dive1 / 3

1 min lesson

Component & design-system architecture

Explain the practical point behind "The job calls out contributing reusable, maintainable components to the design system."

Step 1 of 3

The job calls out contributing reusable, maintainable components to the design system. That is systems thinking and it shows in API design long before it shows in pixels.

This is the concept layer, so slow down before the drill. Name the mechanism first, then tie it to the role's daily decisions: what changes, what can fail and what proof would make a teammate trust the answer.

Learn more

Full explanation

The Design-System Surface You Own

THE DESIGN-SYSTEM SURFACE YOU OWN

Interactive diagram. Tab through its regions; each focused region shows its detail in the panel below.

diagram: stack

Each layer rests on the one below - top is what the user sees, bottom is what everything derives from.

Here's the styled-primitive layer in TypeScript. Most of the API pressure lands on this one type.

A variant API that stays flat as the system grows.ts
type ButtonProps = {
  variant?: "solid" | "ghost" | "outline";
  size?: "sm" | "md" | "lg";
  tone?: "neutral" | "accent" | "danger";
};
// classes derive from the enums - adding a tone never forks the render path
const cls = clsx(base, byVariant[variant], bySize[size], byTone[tone]);
Learn more

Optional practice

Practice: Component & design-system architecture

QAn interviewer asks you to add a fourth visual style to a Button that currently uses an enum-driven variant API. What's the clean way and what would be the smell?