Tutorial 046Web Design & Development10 steps3 fixes

How to Use CSS Custom Properties for a Design System

A beginner, hands-on guide to use css custom properties for a design system with browser inspection, exact code-level changes and verification.

By the end: You will implement and verify use css custom properties for a design system on a real local/staging page.

TARGET RESULTHow to Use CSS Custom Properties for a Design System
You will implement and verify use **css** custom properties for a design system on a real local/staging page.

Key terms before you start

These definitions make the steps easier to follow and help distinguish controls, files and concepts that can look similar at first.

HTMLHyperText Markup Language; it describes the structure and meaning of web content.

CSSCascading Style Sheets; it controls presentation such as layout, spacing, color and responsive behavior.

Browser Developer ToolsBuilt-in browser tools for inspecting HTML/CSS, network requests, responsive layouts and console errors.

CSS selectorThe part of a CSS rule that chooses the elements to style.

CSS propertyA named presentation setting such as display, gap, color, padding or width.

What you need before starting

A page you are allowed to edit
Access to the HTML/CSS/JS or CMS/template that renders it
A modern browser with Developer Tools

FULL TUTORIAL

Step-by-step tutorial

Every step is shown below. Work through them in order and use each checkpoint to confirm the result before moving on.

STEP 01 / 10

Work on a local or staging copy

Do this

Open the project containing the website source. If this is a production site, use a staging copy or backup before structural changes.

Why

A browser page is rendered from source files/CMS output; DevTools edits do not save back to the server.

Browser Developer ToolsBuilt-in browser tools for inspecting HTML/CSS, network requests, responsive layouts and console errors.

IF THIS GOES WRONGThe fix works only in DevTools

Move it into the actual source and reload.

CHECKPOINTYou know which source file/template controls the page.

STEP 02 / 10

Open the page in a modern browser

Do this

Load the page, then press F12 or Ctrl+Shift+I (Windows/Linux) to open Developer Tools.

Why

DevTools lets you inspect the DOM, applied CSS, computed sizes, requests and console errors.

Browser Developer ToolsBuilt-in browser tools for inspecting HTML/CSS, network requests, responsive layouts and console errors.

IF THIS GOES WRONGThe fix works only in DevTools

Move it into the actual source and reload.

CHECKPOINTDevTools is open beside the page.

STEP 03 / 10

List repeated design decisions

Do this

Collect actual text/accent/surface colors, spacing and radii used repeatedly.

Why

Do not create tokens for values that appear once without a design reason.

CSSCascading Style Sheets; it controls presentation such as layout, spacing, color and responsive behavior.

IF THIS GOES WRONGThe fix works only in DevTools

Move it into the actual source and reload.

CHECKPOINTYou have a small real token list.

STEP 04 / 10

Define variables in :root

Do this

Add --color-text, --color-accent etc. to :root.

Why

Custom property names begin with -- and participate in the cascade.

CSS propertyA named presentation setting such as display, gap, color, padding or width.

CHECKPOINTDevTools shows resolved variables.

STEP 05 / 10

Replace repeated literals gradually

Do this

Change component rules from raw values to var(--...).

Why

Make small replacements and visually test each group.

CHECKPOINTComponents render identically before intentional theme changes.

STEP 06 / 10

Name by role

Do this

Prefer --color-text to --gray-900 when the token means “body text”.

Why

Role names make theme swaps more understandable.

IF THIS GOES WRONGThe public page differs from staging/editor

Check caching, loaded asset URL, theme/template and logged-out view.

CHECKPOINTNames explain why a value exists.

STEP 07 / 10

Override within a component/theme scope

Do this

Redefine a variable on .dark-section or component root where a contextual value differs.

Why

You can inherit values without duplicating all child rules.

IF THIS GOES WRONGThe public page differs from staging/editor

Check caching, loaded asset URL, theme/template and logged-out view.

CHECKPOINTChildren use the scoped variable automatically.

STEP 08 / 10

Change one token as a test

Do this

Modify --color-accent and inspect all consuming components.

Why

This reveals accidental hard-coded values.

CHECKPOINTAll intended accents update consistently.

STEP 09 / 10

Test the public/staging URL logged out

Do this

Open the final URL in a private/incognito window.

Why

CMS/admin sessions can hide caching, permission or styling differences.

IF THIS GOES WRONGThe public page differs from staging/editor

Check caching, loaded asset URL, theme/template and logged-out view.

CHECKPOINTThe visitor view matches the intended result.

STEP 10 / 10

Document the changed file/rule

Do this

Record the file/template/component and purpose of the change in the project notes or version-control commit.

Why

Future maintainers should not have to reverse-engineer why a rule exists.

CSS selectorThe part of a CSS rule that chooses the elements to style.

IF THIS GOES WRONGThe public page differs from staging/editor

Check caching, loaded asset URL, theme/template and logged-out view.

CHECKPOINTThe change has a traceable reason/location.

Concrete examples

Verification ruleReload the real page and reproduce the result after all temporary DevTools edits are gone.

Copyable example

Design tokens

:root {
  --color-text:#17191f;
  --color-accent:#f35120;
  --space-1:.5rem;
  --space-2:1rem;
  --radius-card:1rem;
}
.card { padding:var(--space-2); border-radius:var(--radius-card); }

Troubleshooting

The fix works only in DevTools

Move it into the actual source and reload.

The public page differs from staging/editor

Check caching, loaded asset URL, theme/template and logged-out view.

You cannot tell which rule wins

Use the Styles/Computed panels to trace the final value instead of adding stronger selectors blindly.

FINAL CHECKDocument the changed file/rule
The change has a traceable reason/location.

Documentation and references

Use these primary and supporting sources to verify current controls, browser behavior and product-specific details.

← How to Reduce Unnecessary JavaScript on a Web Page How to Build a Reusable Card Component →

Key terms before you start

What you need before starting

Step-by-step tutorial

Work on a local or staging copy

Open the page in a modern browser

List repeated design decisions

Define variables in :root

Replace repeated literals gradually

Name by role

Override within a component/theme scope

Change one token as a test

Test the public/staging URL logged out

Document the changed file/rule

Concrete examples

Copyable example

Troubleshooting

Continue with these tutorials

Documentation and references