Customization

The New CSS is built on CSS custom properties (design tokens). Override them in your own stylesheet to change colors, spacing, typography, and more -- no build step required.

How to Override Tokens

Add a :root block in your own CSS after the library import. Because The New CSS uses @layer, your unlayered styles always win:

<link rel="stylesheet" href="the-new-css.min.css">
<style>
  :root {
    --color-blue-500: oklch(0.65 0.25 250);
    --font-sans: "Inter", system-ui, sans-serif;
    --spacing-4: 1.25rem;
  }
</style>

Color Tokens

All colors use the oklch() color space for perceptual uniformity. Override any token to rebrand your project.

Gray Scale

Token	Default
`--color-gray-50`	oklch(0.985 0 0)
`--color-gray-100`	oklch(0.97 0.001 260)
`--color-gray-200`	oklch(0.92 0.004 260)
`--color-gray-300`	oklch(0.87 0.006 260)
`--color-gray-400`	oklch(0.71 0.01 260)
`--color-gray-500`	oklch(0.55 0.014 260)
`--color-gray-600`	oklch(0.45 0.014 260)
`--color-gray-700`	oklch(0.37 0.013 260)
`--color-gray-800`	oklch(0.27 0.01 260)
`--color-gray-900`	oklch(0.21 0.008 260)
`--color-gray-950`	oklch(0.13 0.005 260)

Brand Colors

Token	Default
`--color-blue-50`	oklch(0.97 0.014 250)
`--color-blue-100`	oklch(0.93 0.034 250)
`--color-blue-500`	oklch(0.59 0.2 255)
`--color-blue-600`	oklch(0.52 0.2 260)
`--color-blue-700`	oklch(0.45 0.18 260)
`--color-red-50` / `500` / `600`	Red tones (hue 20-25)
`--color-green-50` / `500` / `600`	Green tones (hue 150-155)
`--color-yellow-50` / `500` / `600`	Yellow tones (hue 65-95)
`--color-purple-50` / `500` / `600`	Purple tones (hue 295-300)
`--color-pink-500`	oklch(0.59 0.2 345)
`--color-orange-500`	oklch(0.7 0.19 40)
`--color-teal-500`	oklch(0.59 0.14 180)
`--color-white`	oklch(1 0 0)
`--color-black`	oklch(0 0 0)

Adding a Custom Brand Color

Override the blue tokens to rebrand the primary color across all utilities:

:root {
  /* Rebrand to indigo */
  --color-blue-50: oklch(0.97 0.02 280);
  --color-blue-100: oklch(0.93 0.04 280);
  --color-blue-500: oklch(0.55 0.25 280);
  --color-blue-600: oklch(0.48 0.25 280);
  --color-blue-700: oklch(0.40 0.22 280);
}

Spacing Tokens

Spacing tokens control padding, margin, and gap utilities. Values follow a 4px base scale.

Token	Default	Pixels
`--spacing-0`	0px	0
`--spacing-px`	1px	1
`--spacing-0-5`	0.125rem	2
`--spacing-1`	0.25rem	4
`--spacing-2`	0.5rem	8
`--spacing-3`	0.75rem	12
`--spacing-4`	1rem	16
`--spacing-5`	1.25rem	20
`--spacing-6`	1.5rem	24
`--spacing-8`	2rem	32
`--spacing-10`	2.5rem	40
`--spacing-12`	3rem	48
`--spacing-16`	4rem	64
`--spacing-20`	5rem	80
`--spacing-24`	6rem	96

Typography Tokens

Font Families

Token	Default
`--font-sans`	system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
`--font-serif`	Georgia, Cambria, "Times New Roman", Times, serif
`--font-mono`	ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace

Font Sizes

Token	Default	Pixels
`--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-3xl`	1.875rem	30px
`--text-4xl`	2.25rem	36px

Font Weights, Line Heights & Letter Spacing

Token	Default
`--font-light`	300
`--font-normal`	400
`--font-medium`	500
`--font-semibold`	600
`--font-bold`	700
`--font-extrabold`	800
`--leading-none` ... `--leading-loose`	1 / 1.25 / 1.375 / 1.5 / 1.625 / 2
`--tracking-tight` / `normal` / `wide`	-0.025em / 0em / 0.025em

Examples

Changing the Font

Load a Google Font and assign it to the sans-serif token:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --font-sans: "Inter", system-ui, sans-serif;
  }
</style>

Tighter Spacing Scale

Reduce the larger spacing values for a more compact layout:

:root {
  --spacing-8: 1.75rem;   /* was 2rem */
  --spacing-12: 2.5rem;   /* was 3rem */
  --spacing-16: 3.5rem;   /* was 4rem */
  --spacing-20: 4.25rem;  /* was 5rem */
  --spacing-24: 5rem;     /* was 6rem */
}

Live: Custom Brand Color Override

The card below uses a scoped custom property override to change the blue accent to purple within a single container:

Purple-branded card

The button below uses the standard bg-blue-600 class, but the token has been overridden to purple on this container.

Purple Action

<div style="--color-blue-500: oklch(0.59 0.2 295); --color-blue-600: oklch(0.52 0.2 295);"
     class="p-6 bg-gray-50 border border-gray-200 rounded-lg">
  <h4 class="font-semibold">Purple-branded card</h4>
  <p class="text-gray-600 text-sm">Token overridden to purple.</p>
  <a class="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium">
    Purple Action
  </a>
</div>