Get Started
10-minute guide

Get started with CSS Vars Framework

From a blank HTML file to a themed, responsive page — four steps, no build tooling.

Link the stylesheet
Write your markup
3
Set your theme tokens
4
Ship it
1
Link the stylesheet

Add one line to your <head>. That's the entire install — no npm, no CLI, no config file.

<link rel="stylesheet" href="https://cdn.cssvars.com/cssvars.css">
2
Write your markup

Compose layout and typography utilities directly in HTML.

<section class="container p-v-4">
  <h1 class="black bold">Hello, world</h1>
  <p class="dark">Built with zero JavaScript.</p>
  <a href="#" class="button">Get Started</a>
</section>
3
Set your theme tokens

Override --color-1 and a handful of other tokens in your own stylesheet, loaded after the CDN link, to rebrand every component at once.

:root {
  --color-1: #7c3aed;
  --default-border-radius: 1rem;
}
Ship it

That's the whole workflow. No bundler, no purge step, no CSS to write by hand.

Next

Understand the token system →

Also useful

Browse the component reference →