Design System with CSS
Source: Dev.to
Quick Summary
If you have set out on using a design system for your website without the help of any popular framework or library—just pure CSS—you’ve come to the right place.
Essentials
- Colors
- Typography
- Iconography
- Spaces
- Components
- Patterns / images / logos
You can use an open‑source design system for this exercise. Carbon by IBM is one such well‑designed and documented system.
Design Tokens
Design tokens are the foundation of a design system. They act as the source of truth for values such as colors, spacing, and typography. For an overview, see the Material Design Tokens documentation.
It is important to scope everything under the design tokens and keep exceptions and one‑offs to a minimum; otherwise you risk ending up with a “design system‑system”.
Defining Tokens in CSS
In CSS, design tokens are typically defined as custom properties (variables) on the :root pseudo‑class:
:root {
/* Colors */
--color-bg: #FFF;
--text-primary: #161616;
--text-secondary: #525252;
/* Typography */
--font-family-heading: "Helvetica Neue", Arial, sans-serif;
--font-weight-heading: 700;
--font-size-heading-1: 2.5rem;
--line-height-heading-1: 1.2;
--letter-spacing-heading-1: 0.02em;
/* Add other tokens (spacing, borders, etc.) here */
}Once the tokens are defined, they become the only permissible values throughout your styles. Hard‑coding values should be avoided to ensure the design system remains consistent.
Applying Tokens
Reference the custom properties wherever you need them. For example, common heading styles can be written as:
/* Common properties of headings */
h1, h2, h3, h4 {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
}
/* Specific typography for h1 */
h1 {
font-size: var(--font-size-heading-1);
line-height: var(--line-height-heading-1);
letter-spacing: var(--letter-spacing-heading-1);
}Similarly, set default styles for other semantic elements (a, img, p, etc.) using the tokens. This approach styles most of your atomic components according to the design system without needing extra utility classes.
Conclusion
These basics demonstrate how to build and use a design system with plain CSS. Future articles will cover deeper applications and best practices.