Theme

1. Where Colors Live

All colors are defined in src/app/globals.css using CSS custom properties. Light mode uses :root and dark mode uses .dark. Both website/ and turmerrific/ share the same palette — always edit both together.

1
/* src/app/globals.css */
2
3
/* Light theme — turmerrific gold primary (hue ~70) */
4
:root {
5
  --primary: oklch(0.7686 0.1647 70.0804);
6
  --primary-foreground: oklch(0 0 0);
7
  --ring: oklch(0.7686 0.1647 70.0804);
8
}
9
10
/* Dark theme — same turmerrific gold primary */
11
.dark {
12
  --primary: oklch(0.7686 0.1647 70.0804);
13
  --primary-foreground: oklch(0 0 0);
14
  --ring: oklch(0.7686 0.1647 70.0804);
15
}

2. Understanding oklch

Colors use the oklch format: oklch(lightness chroma hue). Lightness ranges from 0 (black) to 1 (white). Chroma controls saturation — keep it between 0.12–0.17 for elegance (the gold primary sits at ~0.165). Hue is the color angle.

1
/* Common hues */
2
Red     ~25  | Orange  ~55  | Gold    ~70
3
Amber   ~85  | Yellow  ~95  | Green   ~145
4
Emerald ~160 | Cyan    ~200 | Blue    ~260
5
Purple  ~300 | Pink    ~350

3. Changing the Accent Color

To switch from the turmerrific gold to a different accent, change --primary and --ring in both :root and .dark blocks. Adjust --primary-foreground for contrast.

1
/* Example: blue accent */
2
:root {
3
  --primary: oklch(0.50 0.14 260);
4
  --primary-foreground: oklch(0.98 0 0);
5
  --ring: oklch(0.50 0.14 260);
6
}
7
8
.dark {
9
  --primary: oklch(0.75 0.12 260);
10
  --primary-foreground: oklch(0.15 0.04 260);
11
  --ring: oklch(0.75 0.12 260);
12
}

4. Neutrals

The turmerrific theme uses warm neutrals (hue ~80 in light mode, matching the gold primary — no blue tint). The light background is a soft warm cream, while dark mode uses pure neutral greys (hue 0). Cards are white in light mode and slightly lighter than the background in dark mode.

1
/* Neutral tokens — light (:root), warm hue 80 */
2
--background: oklch(0.985 0.002 80);  /* warm cream */
3
--card: oklch(1 0 0);                 /* white */
4
--muted: oklch(0.955 0.004 80);       /* subtle warm grey */
5
--border: oklch(0.89 0.005 80);       /* light border */
6
--muted-foreground: oklch(0.45 0 0);  /* secondary text */
7
8
/* Neutral tokens — dark (.dark), pure neutral hue 0 */
9
--background: oklch(0.2046 0 0);       /* deep neutral */
10
--card: oklch(0.2686 0 0);             /* lighter than bg */
11
--muted: oklch(0.2393 0 0);            /* subtle grey */
12
--border: oklch(0.3715 0 0);           /* dark border */
13
--muted-foreground: oklch(0.7155 0 0); /* secondary text */

5. Card Gradient (Opt-In)

Surfaces can carry a subtle vertical gradient via the opt-in card-gradient utility. It tints from the bottom using --foreground, so it auto-inverts — lighter from the bottom in dark mode, darker from the bottom in light. Add the class to any element:

1
<Card className="card-gradient">…</Card>
2
<div className="card-gradient rounded-lg border">…</div>

It ships unapplied — opt in per surface, or roll your own. The utility is just a CSS rule in globals.css; copy it and tweak the tint %, direction, or color to make a gradient that's yours:

1
/* The shipped utility */
2
.card-gradient {
3
  background-image: linear-gradient(
4
    to top,
5
    color-mix(in oklch, var(--foreground) 5%, transparent),
6
    transparent 60%
7
  );
8
}
9
10
/* Make your own — e.g. a primary-tinted radial glow */
11
.card-glow {
12
  background-image: radial-gradient(
13
    120% 80% at 50% 100%,
14
    color-mix(in oklch, var(--primary) 12%, transparent),
15
    transparent 70%
16
  );
17
}