CSS Variables

Overview

In addition to utility classes, @purpose includes a wide range of CSS custom properties (variables) in its compiled CSS. These expose commonly used values—such as colors, breakpoints, fluid tokens, and prebuilt fluid effects—for easy and consistent use.

Fluid Sizes

// tokens.scss

--size-auto: auto;
--size-zero: 0px;
--size-3xs: clamp(0.0625rem, 0.1087cqi + 0.038rem, 0.125rem);
--size-2xs: clamp(0.125rem, 0.2174cqi + 0.0761rem, 0.25rem);
--size-xs: clamp(0.1875rem, 0.3261cqi + 0.1141rem, 0.375rem);
--size-sm: clamp(0.25rem, 0.4348cqi + 0.1522rem, 0.5rem);
--size-md: clamp(0.5rem, 0.4348cqi + 0.4022rem, 0.75rem);
--size-ml: clamp(0.625rem, 0.6522cqi + 0.4783rem, 1rem);
--size-lg: clamp(0.875rem, 0.6522cqi + 0.7283rem, 1.25rem);
--size-xl: clamp(1rem, 0.8696cqi + 0.8043rem, 1.5rem);
--size-2xl: clamp(1.25rem, 1.3043cqi + 0.9565rem, 2rem);
--size-3xl: clamp(1.5rem, 1.7391cqi + 1.1087rem, 2.5rem);
--size-4xl: clamp(1.875rem, 1.9565cqi + 1.4348rem, 3rem);
--size-5xl: clamp(2.25rem, 2.1739cqi + 1.7609rem, 3.5rem);
--size-6xl: clamp(2.625rem, 2.3913cqi + 2.087rem, 4rem);
--size-7xl: clamp(3rem, 2.6087cqi + 2.413rem, 4.5rem);
--size-8xl: clamp(3.5rem, 2.6087cqi + 2.913rem, 5rem);
--size-9xl: clamp(4rem, 3.4783cqi + 3.2174rem, 6rem);
--size-10xl: clamp(5rem, 4.3478cqi + 4.0217rem, 7.5rem);
--size-max: 100000px;

Aspect Ratios

// tokens.scss

--ratio-auto: auto;
--ratio-square: 1 / 1;
--ratio-video: 16 / 9;
--ratio-ultrawide: 21 / 9;
--ratio-golden: 1 / 0.618;
--ratio-golden-portrait: 0.618 / 1;
--ratio-1-1: 1 / 1;
--ratio-16-9: 16 / 9;
--ratio-21-9: 21 / 9;
--ratio-1-2: 1 / 2;
--ratio-2-1: 2 / 1;
--ratio-3-2: 3 / 2;
--ratio-2-3: 2 / 3;
--ratio-4-3: 4 / 3;
--ratio-3-4: 3 / 4;

Font Weights

// tokens.scss

--font-weight-thin: 100;
--font-weight-extralight: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
--font-weight-extrablack: 950;

Font Families

// tokens.scss

--font-family-sans: 'IBM Plex Sans', sans-serif;
--font-family-serif: 'Cormorant Infant', serif;
--font-family-mono: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;

Font Sizes

// tokens.scss

--font-size-xs: clamp(0.625rem, 0.2174cqi + 0.5761rem, 0.75rem);
--font-size-sm: clamp(0.75rem, 0.2174cqi + 0.7011rem, 0.875rem);
--font-size-md: clamp(0.875rem, 0.2174cqi + 0.8261rem, 1rem);
--font-size-ml: clamp(1rem, 0.2174cqi + 0.9511rem, 1.125rem);
--font-size-lg: clamp(1.125rem, 0.4348cqi + 1.0272rem, 1.375rem);
--font-size-xl: clamp(1.375rem, 0.4348cqi + 1.2772rem, 1.625rem);
--font-size-2xl: clamp(1.625rem, 0.6522cqi + 1.4783rem, 2rem);
--font-size-3xl: clamp(2rem, 0.8696cqi + 1.8043rem, 2.5rem);
--font-size-4xl: clamp(2.375rem, 1.5217cqi + 2.0326rem, 3.25rem);
--font-size-5xl: clamp(2.75rem, 2.1739cqi + 2.2609rem, 4rem);
--font-size-6xl: clamp(3rem, 3.4783cqi + 2.2174rem, 5rem);
--font-size-7xl: clamp(3.5rem, 4.3478cqi + 2.5217rem, 6rem);

Blurs

// tokens.scss

--blur-xs: blur(clamp(0.0625rem, 0.1087cqi + 0.038rem, 0.125rem));
--blur-sm: blur(clamp(0.125rem, 0.2174cqi + 0.0761rem, 0.25rem));
--blur-md: blur(clamp(0.25rem, 0.2174cqi + 0.2011rem, 0.375rem));
--blur-ml: blur(clamp(0.3125rem, 0.3261cqi + 0.2391rem, 0.5rem));
--blur-lg: blur(clamp(0.5rem, 0.4348cqi + 0.4022rem, 0.75rem));
--blur-xl: blur(clamp(0.625rem, 0.6522cqi + 0.4783rem, 1rem));

Border Radii

// tokens.scss

--radius-zero: 0;
--radius-xs: clamp(0.125rem, 0.2174cqi + 0.0761rem, 0.25rem);
--radius-sm: clamp(0.25rem, 0.4348cqi + 0.1522rem, 0.5rem);
--radius-md: clamp(0.5rem, 0.4348cqi + 0.4022rem, 0.75rem);
--radius-ml: clamp(0.625rem, 0.6522cqi + 0.4783rem, 1rem);
--radius-lg: clamp(1rem, 0.8696cqi + 0.8043rem, 1.5rem);
--radius-xl: clamp(1.25rem, 1.3043cqi + 0.9565rem, 2rem);
--radius-max: 100000px;

Shadows

// tokens.scss

--shadow-xs: var(--shadow-inset) var(--shadow-offset-x, var(--shadow-offset, 0px)) var(--shadow-offset-y, var(--shadow-offset, 0px)) var(--size-2xs) var(--shadow-spread, 0px) var(--shadow-color, rgba(0, 0, 0, 0.2));
--shadow-sm: var(--shadow-inset) var(--shadow-offset-x, var(--shadow-offset, 0px)) var(--shadow-offset-y, var(--shadow-offset, 0px)) var(--size-sm) var(--shadow-spread, 0px) var(--shadow-color, rgba(0, 0, 0, 0.2));
--shadow-md: var(--shadow-inset) var(--shadow-offset-x, var(--shadow-offset, 0px)) var(--shadow-offset-y, var(--shadow-offset, 0px)) var(--size-md) var(--shadow-spread, 0px) var(--shadow-color, rgba(0, 0, 0, 0.2));
--shadow-ml: var(--shadow-inset) var(--shadow-offset-x, var(--shadow-offset, 0px)) var(--shadow-offset-y, var(--shadow-offset, 0px)) var(--size-ml) var(--shadow-spread, 0px) var(--shadow-color, rgba(0, 0, 0, 0.2));
--shadow-lg: var(--shadow-inset) var(--shadow-offset-x, var(--shadow-offset, 0px)) var(--shadow-offset-y, var(--shadow-offset, 0px)) var(--size-xl) var(--shadow-spread, 0px) var(--shadow-color, rgba(0, 0, 0, 0.2));
--shadow-xl: var(--shadow-inset) var(--shadow-offset-x, var(--shadow-offset, 0px)) var(--shadow-offset-y, var(--shadow-offset, 0px)) var(--size-2xl) var(--shadow-spread, 0px) var(--shadow-color, rgba(0, 0, 0, 0.2));

Colors & Themes

// tokens.scss

--color-white: #fff;
--color-black: #000;

// Color themes
--color-violet-100: #7928ca;
--color-violet-200: #4c1d95;
--color-violet-300: #b794f4;
--color-orange-100: #f97316;
--color-orange-200: #ea580c;
--color-orange-300: #fdba74;