Design Systems, Components and Modern CSS

As sites grow, ad-hoc CSS becomes inconsistent. A design system is a small set of reusable decisions (tokens) and components that every page uses.

Design tokens

:root {
  /* colour */
  --color-primary: #7c3aed;
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  --color-text: #0f172a;
  --color-muted: #64748b;
  /* spacing scale */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  /* shape and type */
  --radius: 12px;
  --font-body: "Inter", system-ui, sans-serif;
}

Use only these values in components. Changing the brand colour or spacing then changes the whole site consistently.

Components with clear naming

A prefix or BEM-style naming avoids collisions:

.ui-btn { display: inline-flex; align-items: center; gap: 8px;
          padding: 10px 18px; border-radius: 999px; font-weight: 600; }
.ui-btn-primary { background: var(--color-primary); color: #fff; }
.ui-btn-ghost { background: transparent; color: var(--color-text); }

.ui-card { background: var(--color-surface); border: 1px solid var(--color-border);
           border-radius: var(--radius); padding: var(--space-6); }

PandaDev's own ui.css follows this pattern: every class starts with ui- and every colour comes from theme variables.

Transitions and animation

.ui-card { transition: transform .2s ease, box-shadow .2s ease; }
.ui-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgb(0 0 0 / .12); }

@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reveal { animation: fade-up .4s ease-out both; }

Animate transform and opacity; they are cheap for the browser. Animating width, top or box-shadow heavily can stutter.

Modern CSS worth knowing

.card:has(img) { padding-top: 0; }            /* parent selector */
.sidebar { container-type: inline-size; }
@container (min-width: 400px) { .widget { display: grid; grid-template-columns: 1fr 1fr; } }
.title { text-wrap: balance; }                 /* even heading lines */
.nav { backdrop-filter: blur(12px); }          /* frosted glass */
color-mix(in srgb, var(--color-primary) 20%, transparent)   /* tints from tokens */

Note: an element with backdrop-filter (or transform) becomes the containing block for position: fixed children, which can clip menus inside it.

Utility frameworks

Tailwind CSS applies small utility classes directly in HTML (class="flex items-center gap-2 rounded-xl p-4"). It is fast to build with and keeps CSS small. Many teams mix approaches: Tailwind utilities for layout, plus a few component classes.

Final project

Create a mini design system and a landing page built only from it:

1. Tokens for colour (light and dark), spacing, radius and type.
2. Components: buttons (3 variants), cards, badges, form fields with error states, navbar, footer.
3. A component showcase page listing every component.
4. A responsive landing page (hero, features grid, pricing cards, FAQ with <details>, contact form).
5. Lighthouse: accessibility ≥ 95, no horizontal scroll at 360px, visible focus everywhere.

Check yourself

• What problem do design tokens solve?
• Which properties are cheapest to animate?
• What side effect does backdrop-filter have on fixed children?