Theme variables

Using utility classes as an API for your design tokens.

Overview

Sprig is a framework for building custom designs, and different designs need different typography, colours, shadows, breakpoints and more. These low-level design decisions are often called design tokens, and in Sprig projects you store them in theme variables.

@import "sprigcss";

@theme {
  --color-moss-50: oklch(0.97 0.03 150);
  --color-moss-500: oklch(0.62 0.14 150);
  --font-display: "Satoshi", "sans-serif";
}

Now you can use utility classes like bg-moss-500, text-moss-50 and font-display in your HTML.

Theme variable namespaces