Product - Design System

When to use it

Reach for it when building an application shell on Tailwind and shadcn/ui. Pick the brand hue deliberately, take the rest from the contract.

Contract: product

A family is a set of token names plus structural rules. A variant is one set of values poured into them. Every variant below satisfies this contract, so swapping between them is a palette change, not a rewrite.

Required

--background--foreground--card--popover--primary--secondary--muted--accent--destructive--border--input--ring--radius

Optional

--chart-1--chart-2--chart-3--chart-4--chart-5--sidebar--sidebar-primary--sidebar-accent--sidebar-border--sidebar-ring

The shadcn/ui contract on Tailwind 4, values in oklch. Do not hand-author these: they come with the component library. Listed here so a new app picks the same contract instead of a ninth bespoke one, and so the brand hue is a deliberate choice rather than a default.

Variants

Same contract, different values. Click a swatch to copy it.

Geepers

liveread live 2026-09-09

Warm terracotta on a warm off-white. Every neutral carries a little of the brand hue.

source: https://geepers.ai/

Copied

--background

oklch(98.2% .009 76)

Copied

--foreground

oklch(23.5% .018 48)

Copied

--card

oklch(99.7% .003 78)

Copied

--card-foreground

oklch(22% .02 50)

Copied

--popover

oklch(100% 0 0)

Copied

--popover-foreground

oklch(22% .02 50)

Copied

--primary

oklch(58% .176 35)

Copied

--primary-foreground

oklch(99% 0 0)

Copied

--secondary

oklch(95% .02 240)

Copied

--secondary-foreground

oklch(35% .05 240)

Copied

--muted

oklch(95.5% .008 76)

Copied

--muted-foreground

oklch(49% .016 55)

Copied

--accent

oklch(94% .03 60)

Copied

--accent-foreground

oklch(30% .03 50)

Copied

--destructive

oklch(58% .22 25)

Copied

--border

oklch(91% .012 74)

Copied

--input

oklch(91% .012 74)

Copied

--ring

oklch(58% .176 35)

Non-color values

--radius

0.875rem

Chart series

Copied

--chart-1

oklch(65% .18 35)

Copied

--chart-2

oklch(60% .15 240)

Copied

--chart-3

oklch(70% .12 150)

Copied

--chart-4

oklch(75% .1 60)

Copied

--chart-5

oklch(55% .2 300)

The neutrals are hue-shifted toward the brand (76, 74, 55 rather than 0), which is why the greys read warm. Copy that trick, not just the primary.

paste-ready :root

/* Geepers */
:root {
  /* colors */
  --radius: 0.875rem;
  --background: oklch(98.2% .009 76);
  --foreground: oklch(23.5% .018 48);
  --card: oklch(99.7% .003 78);
  --card-foreground: oklch(22% .02 50);
  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(22% .02 50);
  --primary: oklch(58% .176 35);
  --primary-foreground: oklch(99% 0 0);
  --secondary: oklch(95% .02 240);
  --secondary-foreground: oklch(35% .05 240);
  --muted: oklch(95.5% .008 76);
  --muted-foreground: oklch(49% .016 55);
  --accent: oklch(94% .03 60);
  --accent-foreground: oklch(30% .03 50);
  --destructive: oklch(58% .22 25);
  --border: oklch(91% .012 74);
  --input: oklch(91% .012 74);
  --ring: oklch(58% .176 35);
  /* charts */
  --chart-1: oklch(65% .18 35);
  --chart-2: oklch(60% .15 240);
  --chart-3: oklch(70% .12 150);
  --chart-4: oklch(75% .1 60);
  --chart-5: oklch(55% .2 300);
}

Idea Tiles

liveread live 2026-09-09

Amber-gold primary on true neutrals. Brighter and flatter than geepers.

source: https://ideatiles.app/

Copied

--background

oklch(98% 0 0)

Copied

--foreground

oklch(15% .01 0)

Copied

--card

oklch(100% 0 0)

Copied

--popover

oklch(100% 0 0)

Copied

--primary

oklch(85% .15 85)

Copied

--primary-foreground

oklch(15% .02 85)

Copied

--secondary

oklch(96% .005 0)

Copied

--secondary-foreground

oklch(35% .01 0)

Copied

--muted

oklch(95% .005 0)

Copied

--muted-foreground

oklch(50% .01 0)

Copied

--accent

oklch(95% .005 0)

Copied

--destructive

oklch(55% .25 25)

Copied

--border

oklch(90% .005 0)

Copied

--input

oklch(90% .005 0)

Copied

--ring

oklch(85% .15 85)

Non-color values

--radius

0.75rem

Chart series

Copied

--chart-1

oklch(75% .15 200)

Copied

--chart-2

oklch(70% .18 350)

Copied

--chart-3

oklch(65% .15 280)

Copied

--chart-4

oklch(80% .12 85)

Copied

--chart-5

oklch(60% .2 25)

Typography

--app-font-family

Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Structure

--font-size-multiplier

1, user-adjustable

--primary at 85% lightness needs a dark foreground; --primary-foreground is oklch(15% .02 85) for that reason. Do not pair this primary with white text.

paste-ready :root

/* Idea Tiles */
:root {
  /* colors */
  --radius: 0.75rem;
  --background: oklch(98% 0 0);
  --foreground: oklch(15% .01 0);
  --card: oklch(100% 0 0);
  --popover: oklch(100% 0 0);
  --primary: oklch(85% .15 85);
  --primary-foreground: oklch(15% .02 85);
  --secondary: oklch(96% .005 0);
  --secondary-foreground: oklch(35% .01 0);
  --muted: oklch(95% .005 0);
  --muted-foreground: oklch(50% .01 0);
  --accent: oklch(95% .005 0);
  --destructive: oklch(55% .25 25);
  --border: oklch(90% .005 0);
  --input: oklch(90% .005 0);
  --ring: oklch(85% .15 85);
  /* charts */
  --chart-1: oklch(75% .15 200);
  --chart-2: oklch(70% .18 350);
  --chart-3: oklch(65% .15 280);
  --chart-4: oklch(80% .12 85);
  --chart-5: oklch(60% .2 25);
  /* structure */
  --font-size-multiplier: 1, user-adjustable;
  /* typography */
  --app-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Do / Don't

Do

Take the whole contract from the component library and change only the brand hue and radius.
Hue-shift the neutrals toward the brand, the way geepers does at hue 74-76, so the greys feel like they belong.
Check the foreground pairing when the primary is light. Ideatiles pairs an 85% primary with a 15% foreground.

Don't

Do not hand-author these tokens; they arrive with the library.
Do not start a ninth bespoke system for the next app. Take this contract.
Do not put white text on the ideatiles primary.
Do not skip --chart-1..5. An app without chart tokens grows a private palette later.