variables.css: CSS Custom Properties From Any Website's Design System

After scanning a website, DesignDNA produces variables.css — a ready-to-import stylesheet that converts every extracted design token into a CSS custom property. This is the most universally compatible output file: it works in every web stack, framework, and build system without any transformation step.

What variables.css Contains

/* ─── variables.css ─────────────────────────────── */
/* Generated by DesignDNA — designdna.site          */

:root {
  /* Colors */
  --color-primary: #6D3FFF;
  --color-primary-foreground: #FFFFFF;
  --color-secondary: #F4F4F5;
  --color-secondary-foreground: #18181B;
  --color-background: #09090B;
  --color-foreground: #FAFAFA;
  --color-muted: #27272A;
  --color-muted-foreground: #A1A1AA;
  --color-border: #3F3F46;
  --color-destructive: #EF4444;

  /* Typography */
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Spacing */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

Everything in this file is a pure CSS custom property. No build step required. No JavaScript. No framework dependency. Just import it and every token is available everywhere.

Why CSS Custom Properties?

CSS custom properties (the --var: value syntax, also called CSS variables) have become the standard runtime format for design tokens on the web for good reasons:

Runtime mutability — Unlike preprocessor variables (Sass, Less), CSS custom properties are live at runtime. Change --color-primary in JavaScript or a media query, and every element using var(--color-primary) updates instantly. This makes dark mode, theming, and dynamic design changes trivial.

Framework agnostic — Custom properties work in React, Vue, Svelte, Angular, Next.js, Astro, plain HTML, and everything else that outputs HTML. The browser handles them.

DevTools visibility — Custom properties show up in browser DevTools as real values. Debugging design issues becomes inspection rather than guesswork.

Component library friendly — Every major component library (shadcn/ui, Radix, Mantine, Chakra) uses CSS custom properties as their theming interface. Your variables.css slots directly into their theming layer.

How to Use variables.css

In any HTML project

<link rel="stylesheet" href="/variables.css" />

Or import in your global CSS:

@import './variables.css';

/* Now use tokens everywhere */
.button-primary {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
}

In Next.js / React

// app/layout.tsx or _app.tsx
import '@/styles/variables.css';

Then use in any component:

<div style={{ color: 'var(--color-primary)' }}>
  Styled with extracted design tokens
</div>

Or in CSS Modules:

/* Button.module.css */
.button {
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

With shadcn/ui

shadcn/ui uses CSS custom properties for its theming. variables.css is directly compatible — paste your token values into the shadcn theme block and your entire component library adopts the extracted design system.

Dark Mode with variables.css

Because these are runtime custom properties, implementing dark mode is a single override block:

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #09090B;
    --color-foreground: #FAFAFA;
  }
}

[data-theme="dark"] {
  --color-background: #09090B;
  --color-foreground: #FAFAFA;
}

No JavaScript, no class toggling, no build magic.

variables.css for AI Coding Agents

variables.css is also useful as code context for AI coding sessions. When you drop it into your project and reference it:

"All CSS variables are defined in variables.css. Use var(--color-primary) instead of hardcoded hex values. Use var(--space-4) for 16px spacing, not inline pixel values."

Your AI agent now has a complete, concrete reference for every design token in your system. It stops guessing hex codes and starts referencing your actual extracted design decisions. This is one of the most effective ways to eliminate AI slop from vibe coding workflows.

Generating variables.css from Any Website

DesignDNA generates variables.css automatically from any live website. Scan a site you want to reverse-engineer, a competitor whose design you admire, or your own production app — and you get a clean, namespaced CSS variable file in seconds.

Extract your design system's variables.css →

Back to Blog