FSM Full Stack Masterclass
Platform under construction
CSS course badge

CSS Architecture

Production

Design Tokens

Design tokens are named design decisions. They turn repeated colors, spacing, fonts and motion values into a system.

:root {
  --color-action: #8cffc1;
  --radius-card: 28px;
}

Architecture mental model

Tokens make design decisions reusable and changeable.

A token is a named value that represents a design decision: a brand color, text color, spacing step, radius, shadow, font size or motion duration.

Tokens become powerful when they describe meaning instead of only raw values. --color-danger is easier to maintain than remembering every red hex value.

CSS custom properties are a practical way to implement tokens directly in the browser.

Global tokens

Raw scales such as color, spacing, radius and font sizes.

Semantic tokens

Meaningful aliases such as text-muted or surface-raised.

Component tokens

Local values for a specific component when needed.

Theme tokens

Values that can change between light, dark or brand themes.

Visual model

See the system before adding more selectors.

Raw

--green-500

The base design scale stores raw values.

Semantic

--color-action

Meaning maps the raw value to a role.

Component

--button-bg

A component can consume the semantic value.

Theme

[data-theme]

Themes swap values without rewriting components.

Good CSS versus fragile CSS

Semantic token layer

:root {
  --green-500: #8cffc1;
  --color-action: var(--green-500);
  --button-bg: var(--color-action);
}

.button { background: var(--button-bg); }

Hard-coded everywhere

.button { background: #8cffc1; }
.badge { color: #8cffc1; }
.link { border-color: #8cffc1; }

Rules of thumb

Architecture should make the next CSS decision easier.

Token repeated decisions

If a value repeats and has meaning, give it a name.

Prefer semantic names in components

Components should use --color-action more often than --green-500.

Keep scales controlled

Do not create 47 almost-identical spacing values.

Use fallback thoughtfully

Custom property fallbacks help when values are optional or theme-driven.

Do not token everything

A one-off art direction detail may not need a global token.

Document token purpose

Future developers should know when to use each token.

Production thinking

Scalable CSS is boring, searchable and hard to break.

Why does this matter?

Tokens let a design system move as one piece. A redesign becomes a set of value changes instead of a scavenger hunt.

Accessibility

Contrast-sensitive tokens should be checked as pairs, such as text on surface or action text on action background.

Production note

Token naming is architecture. Once templates and components depend on names, changes should be deliberate.

SEO note

Tokens do not affect ranking directly, but consistent visual systems improve usability and trust.

Live code lab

Change the CSS and watch the interface respond.

The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.

Mini assignment

Try this now.

  • Change --green-500 and watch the semantic action color follow.
  • Add --radius-card and use it on .notice.
  • Explain why --color-action is more flexible than --green-500 inside components.

Practice assignment

Do this before moving to the next lesson.

  1. Create raw color and spacing tokens.
  2. Create at least two semantic tokens.
  3. Use semantic tokens inside one component.

Try it yourself

Create semantic CSS tokens

Live preview

Self-check

Before you continue, prove that you understand Design Tokens.

Production

Answer these questions before moving on. If you cannot find, name or move a rule safely, the architecture still needs work.

  1. Can you explain raw versus semantic tokens?
  2. Can you avoid hard-coding repeated values?
  3. Can you keep token scales small enough to use?
  4. Can you test contrast between token pairs?
  5. Can you explain when not to create a token?

Senior audit upgrade

Separate primitive, semantic and component tokens.

A token system becomes much easier to maintain when raw values, meanings and component roles are not mixed together.

Primitive

--color-blue-500 or --space-4 stores a raw scale value.

Semantic

--color-action or --color-danger carries product meaning.

Component

--button-bg or --card-padding tunes a specific component role.