Harmonic method

Overtone wheel

Hue is frequency. Our palette isn't picked — it's generated: a single primary anchors the wheel, and the families retune toward its overtones (the same series that makes a chord sound consonant). Drag the primary to generate a palette from any hue.

Primary 346°

Rays are overtones of the fundamental: hₙ = (H₀ + 360·log₂n) mod 360.

1 unison 346° → Pink
M2 major 2nd 47° → Orange
M3 major 3rd 102° → Yellow
TT tritone 151° → Emerald
P5 perfect 5th 197° → Cyan
m7 minor 7th 277° → Violet

Harmonic Palette Method

Palette

Full harmonic ramp bound to emitted --color-<family>-<stop> tokens: 24 families, 11 stops, 264 visible swatches per brand.

Fundamental

KBPD-AI / Master (all brand hues)

oklch(54.9% 0.22 345.9) · tuning 0.6

Harmonics surface as overtone annotations on every family row so the proof point reads as wave-derived, not hand-curated.

Semantic anchors

surface

paper-50

semantic.surface

surface contrast 1:1
text

ink-950

semantic.text

surface contrast 16.68:1
brand

rose-600

semantic.brand

surface contrast 5.22:1
highlight

rose-600

derived highlight

surface contrast 5.22:1
success

green-800

derived success

surface contrast 8.24:1
danger

rose-800

derived danger

surface contrast 9.39:1

Primary pairings

Surface vs Text

paper-50 vs ink-950

WCAG 2.2 AA pass · AAA pass · 16.68:1
Surface vs Brand

paper-50 vs rose-600

WCAG 2.2 AA pass · AAA fail · 5.22:1
Surface vs Highlight

paper-50 vs rose-600

WCAG 2.2 AA pass · AAA fail · 5.22:1
Surface vs Success

paper-50 vs green-800

WCAG 2.2 AA pass · AAA pass · 8.24:1
Surface vs Danger

paper-50 vs rose-800

WCAG 2.2 AA pass · AAA pass · 9.39:1

Filter family

24 families visible

Brand anchors mark the three colors the brand directly commits to — paper, ink, and the brand primary. Remaining cells are harmonically derived from those three anchors so the specimen separates committed inputs from generated range.

Paper

Anchor

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(99.1% 0.003 106.4)

★
50
- surface
--color-paper-50

oklch(99.1% 0.003 106.4)
100

--color-paper-100

oklch(93.6% 0.004 106.5)
200

--color-paper-200

oklch(88.1% 0.004 106.5)
300

--color-paper-300

oklch(80.7% 0.004 106.5)
400

--color-paper-400

oklch(71.5% 0.004 106.5)
500

--color-paper-500

oklch(62.2% 0.004 106.5)
600

--color-paper-600

oklch(55.1% 0.003 106.5)
700

--color-paper-700

oklch(48.1% 0.003 106.5)
800

--color-paper-800

oklch(40.5% 0.003 106.5)
900

--color-paper-900

oklch(34.4% 0.003 106.6)
950

--color-paper-950

oklch(29.6% 0.004 106.6)

Red

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.2% 0.217 35.2)

50

--color-red-50

oklch(96.3% 0.02 45.3)
100

--color-red-100

oklch(92.9% 0.039 44.1)
200

--color-red-200

oklch(86.7% 0.075 43.2)
300

--color-red-300

oklch(78.9% 0.127 40.3)
400

--color-red-400

oklch(71.2% 0.186 38.5)
500

--color-red-500

oklch(62.2% 0.217 35.2)
600

--color-red-600

oklch(55.3% 0.198 34.1)
700

--color-red-700

oklch(48.4% 0.17 35)
800

--color-red-800

oklch(40.5% 0.135 37.1)
900

--color-red-900

oklch(34.4% 0.1 37.9)
950

--color-red-950

oklch(29.9% 0.07 38.5)

Orange

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.3% 0.194 40.4)

50

--color-orange-50

oklch(96.4% 0.021 56.1)
100

--color-orange-100

oklch(93.2% 0.041 55.4)
200

--color-orange-200

oklch(87.3% 0.079 54.6)
300

--color-orange-300

oklch(79.8% 0.13 52)
400

--color-orange-400

oklch(71.4% 0.178 50.4)
500

--color-orange-500

oklch(62.3% 0.194 40.4)
600

--color-orange-600

oklch(55.5% 0.178 39)
700

--color-orange-700

oklch(48.5% 0.152 40)
800

--color-orange-800

oklch(40.8% 0.122 42.4)
900

--color-orange-900

oklch(34.6% 0.093 49)
950

--color-orange-950

oklch(29.8% 0.067 51)

Amber

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.8% 0.131 78.3)

50

--color-amber-50

oklch(96.7% 0.023 90.7)
100

--color-amber-100

oklch(93.8% 0.044 91.3)
200

--color-amber-200

oklch(88.3% 0.083 90.8)
300

--color-amber-300

oklch(80.5% 0.129 91.3)
400

--color-amber-400

oklch(71.6% 0.146 87.4)
500

--color-amber-500

oklch(62.8% 0.131 78.3)
600

--color-amber-600

oklch(55.8% 0.117 76.7)
700

--color-amber-700

oklch(48.8% 0.102 77.8)
800

--color-amber-800

oklch(40.9% 0.085 80)
900

--color-amber-900

oklch(34.6% 0.071 85.5)
950

--color-amber-950

oklch(29.7% 0.061 89.4)

Yellow

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.8% 0.128 92.3)

50

--color-yellow-50

oklch(96.8% 0.023 98.6)
100

--color-yellow-100

oklch(93.6% 0.041 99.6)
200

--color-yellow-200

oklch(88.3% 0.078 99)
300

--color-yellow-300

oklch(80.6% 0.122 99.2)
400

--color-yellow-400

oklch(71.6% 0.148 98.1)
500

--color-yellow-500

oklch(62.8% 0.128 92.3)
600

--color-yellow-600

oklch(55.6% 0.114 91.4)
700

--color-yellow-700

oklch(48.7% 0.1 92)
800

--color-yellow-800

oklch(40.7% 0.083 93.4)
900

--color-yellow-900

oklch(34.6% 0.071 97)
950

--color-yellow-950

oklch(29.7% 0.059 98.2)

Lime

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.5% 0.137 110.3)

50

--color-lime-50

oklch(96.7% 0.022 112.3)
100

--color-lime-100

oklch(93.6% 0.041 110.2)
200

--color-lime-200

oklch(88.3% 0.078 111.1)
300

--color-lime-300

oklch(80.6% 0.122 110.9)
400

--color-lime-400

oklch(71.5% 0.157 111)
500

--color-lime-500

oklch(62.5% 0.137 110.3)
600

--color-lime-600

oklch(55.7% 0.122 110.4)
700

--color-lime-700

oklch(48.6% 0.106 110.5)
800

--color-lime-800

oklch(40.9% 0.09 110.6)
900

--color-lime-900

oklch(34.4% 0.075 110.8)
950

--color-lime-950

oklch(29.9% 0.06 110.9)

Green

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(62.9% 0.189 146.5)

50

--color-green-50

oklch(96.7% 0.023 149.4)
100

--color-green-100

oklch(93.7% 0.044 148.3)
200

--color-green-200

oklch(88.2% 0.082 149)
300

--color-green-300

oklch(80.7% 0.129 148.8)
400

--color-green-400

oklch(71.2% 0.168 148.8)
500

--color-green-500

oklch(62.9% 0.189 146.5)
600

--color-green-600

oklch(56% 0.172 145.8)
700

--color-green-700

oklch(48.7% 0.146 146.5)
800
- success
--color-green-800

oklch(40.8% 0.12 147.4)
900

--color-green-900

oklch(34.4% 0.089 148.9)
950

--color-green-950

oklch(29.9% 0.063 148.8)

Emerald

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(63.6% 0.176 149.7)

50

--color-emerald-50

oklch(96.7% 0.023 153.5)
100

--color-emerald-100

oklch(93.6% 0.044 154.6)
200

--color-emerald-200

oklch(88.2% 0.083 154.5)
300

--color-emerald-300

oklch(80.6% 0.129 154.5)
400

--color-emerald-400

oklch(71.3% 0.169 154.7)
500

--color-emerald-500

oklch(63.6% 0.176 149.7)
600

--color-emerald-600

oklch(56.8% 0.159 149.2)
700

--color-emerald-700

oklch(49.4% 0.137 149.7)
800

--color-emerald-800

oklch(41.2% 0.111 151)
900

--color-emerald-900

oklch(34.6% 0.087 153.9)
950

--color-emerald-950

oklch(29.7% 0.062 155.3)

Teal

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(65.5% 0.115 185.8)

50

--color-teal-50

oklch(96.8% 0.023 186.9)
100

--color-teal-100

oklch(93.7% 0.042 187.2)
200

--color-teal-200

oklch(88.3% 0.079 187.9)
300

--color-teal-300

oklch(80.7% 0.122 187.7)
400

--color-teal-400

oklch(73% 0.128 186.9)
500

--color-teal-500

oklch(65.5% 0.115 185.8)
600

--color-teal-600

oklch(58.5% 0.103 186.2)
700

--color-teal-700

oklch(50.9% 0.089 185.6)
800

--color-teal-800

oklch(42.4% 0.074 187)
900

--color-teal-900

oklch(35.5% 0.062 186.7)
950

--color-teal-950

oklch(30.3% 0.053 186.9)

Cyan

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(65.3% 0.111 198.6)

50

--color-cyan-50

oklch(96.7% 0.021 196.8)
100

--color-cyan-100

oklch(93.7% 0.039 194.5)
200

--color-cyan-200

oklch(88.2% 0.074 195.9)
300

--color-cyan-300

oklch(80.5% 0.114 195.8)
400

--color-cyan-400

oklch(72.7% 0.124 196.8)
500

--color-cyan-500

oklch(65.3% 0.111 198.6)
600

--color-cyan-600

oklch(58.1% 0.099 199.2)
700

--color-cyan-700

oklch(50.7% 0.086 197.9)
800

--color-cyan-800

oklch(42.4% 0.072 197.4)
900

--color-cyan-900

oklch(35.4% 0.06 196.4)
950

--color-cyan-950

oklch(30.1% 0.051 194.8)

Sky

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(65.6% 0.116 215.2)

50

--color-sky-50

oklch(96.8% 0.022 207.1)
100

--color-sky-100

oklch(93.7% 0.042 205.7)
200

--color-sky-200

oklch(88.3% 0.078 205.9)
300

--color-sky-300

oklch(80.7% 0.122 205.8)
400

--color-sky-400

oklch(73.1% 0.126 209.5)
500

--color-sky-500

oklch(65.6% 0.116 215.2)
600

--color-sky-600

oklch(58.6% 0.104 215.6)
700

--color-sky-700

oklch(51.1% 0.09 214.4)
800

--color-sky-800

oklch(42.6% 0.075 213)
900

--color-sky-900

oklch(35.5% 0.062 211.2)
950

--color-sky-950

oklch(30.1% 0.052 209)

Blue

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(61.5% 0.208 261.2)

50

--color-blue-50

oklch(96.6% 0.017 248)
100

--color-blue-100

oklch(93.3% 0.033 251)
200

--color-blue-200

oklch(87.3% 0.064 251.4)
300

--color-blue-300

oklch(79.3% 0.106 254.5)
400

--color-blue-400

oklch(70.1% 0.158 258.5)
500

--color-blue-500

oklch(61.5% 0.208 261.2)
600

--color-blue-600

oklch(55.2% 0.203 261.8)
700

--color-blue-700

oklch(48.2% 0.172 262)
800

--color-blue-800

oklch(40.7% 0.137 261.9)
900

--color-blue-900

oklch(34.4% 0.1 262)
950

--color-blue-950

oklch(29.8% 0.07 262)

Indigo

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(61.9% 0.205 271.9)

50

--color-indigo-50

oklch(96.6% 0.016 262.8)
100

--color-indigo-100

oklch(93.3% 0.032 266.2)
200

--color-indigo-200

oklch(87.6% 0.06 266.5)
300

--color-indigo-300

oklch(79.4% 0.103 269.4)
400

--color-indigo-400

oklch(70.3% 0.155 271.4)
500

--color-indigo-500

oklch(61.9% 0.205 271.9)
600

--color-indigo-600

oklch(55.2% 0.192 271.8)
700

--color-indigo-700

oklch(48.2% 0.164 272.2)
800

--color-indigo-800

oklch(40.6% 0.13 271.7)
900

--color-indigo-900

oklch(34.3% 0.094 272.6)
950

--color-indigo-950

oklch(29.8% 0.068 272.5)

Violet

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.197 280)

50

--color-violet-50

oklch(96.6% 0.016 278.5)
100

--color-violet-100

oklch(93.5% 0.031 277.9)
200

--color-violet-200

oklch(87.7% 0.061 279)
300

--color-violet-300

oklch(79.8% 0.104 279.5)
400

--color-violet-400

oklch(70.8% 0.156 280.4)
500

--color-violet-500

oklch(62.2% 0.197 280)
600

--color-violet-600

oklch(55.2% 0.182 280.1)
700

--color-violet-700

oklch(48.2% 0.155 279.8)
800

--color-violet-800

oklch(40.4% 0.123 279.9)
900

--color-violet-900

oklch(34.5% 0.089 279.8)
950

--color-violet-950

oklch(29.8% 0.063 279.4)

Purple

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.187 285.6)

50

--color-purple-50

oklch(96.5% 0.017 286.1)
100

--color-purple-100

oklch(93.5% 0.032 285.8)
200

--color-purple-200

oklch(87.9% 0.062 286.1)
300

--color-purple-300

oklch(80.1% 0.105 286.8)
400

--color-purple-400

oklch(71.3% 0.157 285.8)
500

--color-purple-500

oklch(62.2% 0.187 285.6)
600

--color-purple-600

oklch(55.2% 0.172 286)
700

--color-purple-700

oklch(48.3% 0.145 285.9)
800

--color-purple-800

oklch(40.6% 0.116 286.3)
900

--color-purple-900

oklch(34.4% 0.084 285.8)
950

--color-purple-950

oklch(29.8% 0.061 286.1)

Fuchsia

n=1 · 0° · 1/1 ratio = Unison · oklch(62.2% 0.198 335.5)

50

--color-fuchsia-50

oklch(96.8% 0.023 334.3)
100

--color-fuchsia-100

oklch(93.8% 0.044 335.3)
200

--color-fuchsia-200

oklch(88.2% 0.083 335.4)
300

--color-fuchsia-300

oklch(80.6% 0.129 335.3)
400

--color-fuchsia-400

oklch(71.3% 0.169 335.4)
500

--color-fuchsia-500

oklch(62.2% 0.198 335.5)
600

--color-fuchsia-600

oklch(55.3% 0.182 335.8)
700

--color-fuchsia-700

oklch(48.2% 0.154 335.6)
800

--color-fuchsia-800

oklch(40.4% 0.123 335.5)
900

--color-fuchsia-900

oklch(34.3% 0.09 335)
950

--color-fuchsia-950

oklch(29.7% 0.062 335.7)

Pink

n=1 · 0° · 1/1 ratio = Unison · oklch(62.1% 0.188 343.4)

50

--color-pink-50

oklch(96.7% 0.021 342.5)
100

--color-pink-100

oklch(93.7% 0.041 343.7)
200

--color-pink-200

oklch(88.3% 0.08 343.4)
300

--color-pink-300

oklch(80.6% 0.122 343.9)
400

--color-pink-400

oklch(71.3% 0.159 343.3)
500

--color-pink-500

oklch(62.1% 0.188 343.4)
600

--color-pink-600

oklch(55.1% 0.172 343.5)
700

--color-pink-700

oklch(48.2% 0.146 343.3)
800

--color-pink-800

oklch(40.6% 0.117 343.5)
900

--color-pink-900

oklch(34.5% 0.084 343.6)
950

--color-pink-950

oklch(29.8% 0.061 343.6)

Rose

n=1 · 0° · 1/1 ratio = Unison · oklch(62.1% 0.209 349.5)

50

--color-rose-50

oklch(96.5% 0.022 344.2)
100

--color-rose-100

oklch(93.3% 0.042 345.5)
200

--color-rose-200

oklch(87.6% 0.081 346.6)
300

--color-rose-300

oklch(80.5% 0.134 348.9)
400

--color-rose-400

oklch(71.4% 0.179 349.6)
500

--color-rose-500

oklch(62.1% 0.209 349.5)
★
600
- brand
- highlight
--color-rose-600

oklch(55.2% 0.193 349.3)
700

--color-rose-700

oklch(48.3% 0.163 349.4)
800
- danger
--color-rose-800

oklch(40.6% 0.129 350)
900

--color-rose-900

oklch(34.4% 0.095 349.6)
950

--color-rose-950

oklch(29.8% 0.066 349.8)

Slate

Neutral

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62% 0.015 286)

50

--color-slate-50

oklch(96.7% 0.015 286.1)
100

--color-slate-100

oklch(93.7% 0.015 286.1)
200

--color-slate-200

oklch(88.2% 0.015 286.1)
300

--color-slate-300

oklch(80.5% 0.015 286.1)
400

--color-slate-400

oklch(71.2% 0.016 286)
500

--color-slate-500

oklch(62% 0.015 286)
600

--color-slate-600

oklch(55.2% 0.015 285.9)
700

--color-slate-700

oklch(48.2% 0.016 285.8)
800

--color-slate-800

oklch(40.5% 0.015 285.7)
900

--color-slate-900

oklch(34.4% 0.016 285.6)
950

--color-slate-950

oklch(29.7% 0.016 285.4)

Gray

Neutral

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(62.1% 0.004 197.1)

50

--color-gray-50

oklch(96.8% 0.003 197.1)
100

--color-gray-100

oklch(93.8% 0.003 197.1)
200

--color-gray-200

oklch(88.3% 0.003 197.1)
300

--color-gray-300

oklch(80.5% 0.003 197.1)
400

--color-gray-400

oklch(71.3% 0.003 197.1)
500

--color-gray-500

oklch(62.1% 0.004 197.1)
600

--color-gray-600

oklch(55.3% 0.004 197.1)
700

--color-gray-700

oklch(48.3% 0.004 197)
800

--color-gray-800

oklch(40.6% 0.004 197)
900

--color-gray-900

oklch(34.3% 0.003 197)
950

--color-gray-950

oklch(29.9% 0.003 197)

Zinc

Neutral

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.007 286.2)

50

--color-zinc-50

oklch(96.9% 0.008 286.3)
100

--color-zinc-100

oklch(93.6% 0.008 286.2)
200

--color-zinc-200

oklch(88.4% 0.007 286.3)
300

--color-zinc-300

oklch(80.6% 0.008 286.2)
400

--color-zinc-400

oklch(71.4% 0.007 286.2)
500

--color-zinc-500

oklch(62.2% 0.007 286.2)
600

--color-zinc-600

oklch(55.1% 0.009 286.1)
700

--color-zinc-700

oklch(48.4% 0.008 286.1)
800

--color-zinc-800

oklch(40.7% 0.007 286.1)
900

--color-zinc-900

oklch(34.3% 0.009 285.9)
950

--color-zinc-950

oklch(29.9% 0.007 286)

Neutral

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.2% 0.006 106.6)

50

--color-neutral-50

oklch(96.9% 0.007 106.5)
100

--color-neutral-100

oklch(93.6% 0.005 106.5)
200

--color-neutral-200

oklch(88.4% 0.007 106.5)
300

--color-neutral-300

oklch(80.6% 0.007 106.6)
400

--color-neutral-400

oklch(71.4% 0.006 106.5)
500

--color-neutral-500

oklch(62.2% 0.006 106.6)
600

--color-neutral-600

oklch(55.1% 0.006 106.6)
700

--color-neutral-700

oklch(48.4% 0.006 106.6)
800

--color-neutral-800

oklch(40.4% 0.005 106.6)
900

--color-neutral-900

oklch(34.4% 0.005 106.7)
950

--color-neutral-950

oklch(29.6% 0.005 106.7)

Stone

Neutral

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.1% 0.012 106.7)

50

--color-stone-50

oklch(96.8% 0.012 106.6)
100

--color-stone-100

oklch(93.8% 0.012 106.6)
200

--color-stone-200

oklch(88.3% 0.012 106.6)
300

--color-stone-300

oklch(80.5% 0.012 106.7)
400

--color-stone-400

oklch(71.3% 0.011 106.7)
500

--color-stone-500

oklch(62.1% 0.012 106.7)
600

--color-stone-600

oklch(55.3% 0.012 106.8)
700

--color-stone-700

oklch(48.3% 0.013 106.9)
800

--color-stone-800

oklch(40.6% 0.013 107)
900

--color-stone-900

oklch(34.3% 0.012 100.3)
950

--color-stone-950

oklch(29.9% 0.012 107.1)

Ink

Anchor

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(22.1% 0.04 218.1)

50

--color-ink-50

oklch(96.7% 0.029 210)
100

--color-ink-100

oklch(93.6% 0.03 220.6)
200

--color-ink-200

oklch(88.3% 0.031 217.5)
300

--color-ink-300

oklch(80.7% 0.03 218.3)
400

--color-ink-400

oklch(71.4% 0.031 215.8)
500

--color-ink-500

oklch(62.1% 0.03 220)
600

--color-ink-600

oklch(55.3% 0.03 217.4)
700

--color-ink-700

oklch(48.3% 0.031 217.6)
800

--color-ink-800

oklch(40.5% 0.03 219.5)
900

--color-ink-900

oklch(34.4% 0.03 216.7)
★
950
- text
--color-ink-950

oklch(22.1% 0.04 218.1)

Typography

H1 through caption, shown across every authored weight with the ratio math exposed.

H1

step 7

57.33px

weight 200

KBPD-AI / Master (all brand hues)

weight 250

KBPD-AI / Master (all brand hues)

weight 280

KBPD-AI / Master (all brand hues)

weight 300

KBPD-AI / Master (all brand hues)

weight 320

KBPD-AI / Master (all brand hues)

weight 400

KBPD-AI / Master (all brand hues)

weight 500

KBPD-AI / Master (all brand hues)

weight 700

KBPD-AI / Master (all brand hues)
H2

step 6

47.78px

weight 200

Specimen typography cadence

weight 250

Specimen typography cadence

weight 280

Specimen typography cadence

weight 300

Specimen typography cadence

weight 320

Specimen typography cadence

weight 400

Specimen typography cadence

weight 500

Specimen typography cadence

weight 700

Specimen typography cadence
H3

step 5

39.81px

weight 200

The scale stays visible at every tier.

weight 250

The scale stays visible at every tier.

weight 280

The scale stays visible at every tier.

weight 300

The scale stays visible at every tier.

weight 320

The scale stays visible at every tier.

weight 400

The scale stays visible at every tier.

weight 500

The scale stays visible at every tier.

weight 700

The scale stays visible at every tier.
H4

step 4

33.18px

weight 200

Display transitions into interface heading.

weight 250

Display transitions into interface heading.

weight 280

Display transitions into interface heading.

weight 300

Display transitions into interface heading.

weight 320

Display transitions into interface heading.

weight 400

Display transitions into interface heading.

weight 500

Display transitions into interface heading.

weight 700

Display transitions into interface heading.
H5

step 3

27.65px

weight 200

Section headers keep the same proportional rhythm.

weight 250

Section headers keep the same proportional rhythm.

weight 280

Section headers keep the same proportional rhythm.

weight 300

Section headers keep the same proportional rhythm.

weight 320

Section headers keep the same proportional rhythm.

weight 400

Section headers keep the same proportional rhythm.

weight 500

Section headers keep the same proportional rhythm.

weight 700

Section headers keep the same proportional rhythm.
H6

step 2

23.04px

weight 200

Utility labels stay anchored to the ratio.

weight 250

Utility labels stay anchored to the ratio.

weight 280

Utility labels stay anchored to the ratio.

weight 300

Utility labels stay anchored to the ratio.

weight 320

Utility labels stay anchored to the ratio.

weight 400

Utility labels stay anchored to the ratio.

weight 500

Utility labels stay anchored to the ratio.

weight 700

Utility labels stay anchored to the ratio.
Body

step 0

16px

weight 200

Master palette — all 7 authored brand_hues

weight 250

Master palette — all 7 authored brand_hues

weight 280

Master palette — all 7 authored brand_hues

weight 300

Master palette — all 7 authored brand_hues

weight 320

Master palette — all 7 authored brand_hues

weight 400

Master palette — all 7 authored brand_hues

weight 500

Master palette — all 7 authored brand_hues

weight 700

Master palette — all 7 authored brand_hues
Console

step -1

13.33px

weight 200

kbpd-ai brand canon — complete hue set for design-system reference

weight 250

kbpd-ai brand canon — complete hue set for design-system reference

weight 280

kbpd-ai brand canon — complete hue set for design-system reference

weight 300

kbpd-ai brand canon — complete hue set for design-system reference

weight 320

kbpd-ai brand canon — complete hue set for design-system reference

weight 400

kbpd-ai brand canon — complete hue set for design-system reference

weight 500

kbpd-ai brand canon — complete hue set for design-system reference

weight 700

kbpd-ai brand canon — complete hue set for design-system reference

Generated Formal Composition

Letter-style lorem ipsum composed from the live type tokens. This borrows the attached formal sheets as a system constraint: tidy paper, real ink, normal Hardcover tracking, and mono only as a note layer.

H1: --font-family-serif; --font-size-5; --type-display-weight; --line-height-tight
H2: --font-family-serif; --font-size-4; --type-heading-weight; --line-height-snug
H3: --font-family-serif; --font-size-2; --type-copy-weight; --line-height-relaxed
H4 / Console: --font-family-ui; calc(var(--font-size-base) / var(--type-ratio)); --type-ui-weight; --type-ui-line-height
Body: --font-family-serif; --font-size-base; --type-copy-weight; --line-height-relaxed
Smaller body: --font-family-serif; calc(var(--font-size-base) / var(--type-ratio)); --type-copy-weight; --line-height-snug

Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Components

Product primitives for KBPD-AI / Master (all brand hues), rendered under pointer and touch contexts with source-bound state styling.

Design-source contract: Named tiers, CSS variables, and semantic aliases before component styling.
Component ownership: shadcn-style copy-owned primitives: the site owns the markup and styling rather than fighting a themed library.
Interaction model: Native HTML now; complex menus/dialogs should graduate to Ark/Zag state machines before reuse in client apps.
Specimen discipline: Storybook-style state matrix: every primitive shows rest, hover, focus, active, mobile, and source provenance.

Rest

Hover

Focus

Active

Rest

Hover

Rest

Focus

Default surface

Weekend dues

Editorial warmth stays quiet on standard surfaces so the content keeps the focus.

Elevated surface

Milestone reached

Elevation steps forward for payment confirmations, nudges, and earned celebrations.

Trip name Default text field Contribution note Focused sample Invite code Disabled sample Goal amount Goal must stay above total contributions

Line item	Status	Amount
Palm Springs House	Confirmed	$780
Airport SUV	Pending	$240
Poolside Dinner	Paid	$315
Welcome Bags	Tracked	$180

Lead contributors
Booked items
Pending invites
Goal remaining
Celebration budget

Motion personality

Motion is a brand system, not a footnote.

Timing, easing, choreography, and idle behavior all inherit from the active brand motion rules. The play state can be paused for review and defaults to reduced motion when the environment asks for it.

Signature keyframe continuous with easing --motion-easing-default.

Timing rails

Four kinetic lanes map the brand from touch response up through ambient pacing.

Fast rail

Micro-touch responses for hover, focus, and press.

--motion-duration-fast

Hover or focus to preview this rail.

Base rail

Standard component transitions and disclosure beats.

--motion-duration-base

Hover or focus to preview this rail.

Slow rail

Panel lifts, emphasis shifts, and celebratory follow-through.

--motion-duration-slow

Hover or focus to preview this rail.

Slower rail

Ambient loops and choreography that should never feel twitchy.

calc(--motion-duration-slow + --motion-duration-base)

Hover or focus to preview this rail.

Easing curve

The default easing is visualized directly from the brand fixture and applied to the sample puck.

Default easing

cubic-bezier(0.16, 1, 0.3, 1)

Control handles 16 0 and 30 0.

Hover and focus micro-transitions

Compact responses show how the brand handles touch, hover, and focus without over-speaking.

Card response Leaderboard pulse Focus or hover to feel the card lift and deepen. Contribution amount

Transition primitives

Drawer, toast, and menu reveal are CSS-only primitives bound to the same timing and easing rails.

Drawer slide

Toast enter / exit

Contribution saved Toast inherits the brand's response tempo.

Menu reveal

Signature keyframe

The specimen chooses a signature movement from the brand motion name and falls back to a calm breathe when no explicit signature exists.

Signature: continuous

Stagger and choreography

Five linked beats enter on a shared ratio-derived sequence so the cadence feels authored rather than simultaneous.

Sequence step uses --motion-stagger-step.

Interaction beats

The full loop runs through button press, card response, toast confirmation, and a brief celebration burst.

Idle-state motion

A restrained ambient loop keeps the surface alive without looking busy or distracting from content.

Motion hierarchy

Primary, secondary, and tertiary tones form a readable kinetic scale in the same way typography forms a type scale.

Primary motion --motion-duration-base

Reserved for the main state change that asks for attention.

Secondary motion --motion-duration-fast

Supports the primary beat without competing for emphasis.

Tertiary motion --motion-duration-slow

Ambient reinforcement and idle feedback under the surface.

Harmonic method

Overtone wheel

Primary 27°

Rays are overtones of the fundamental: hₙ = (H₀ + 360·log₂n) mod 360.

1 unison 27° → Red
M2 major 2nd 88° → Yellow
M3 major 3rd 143° → Green
TT tritone 192° → Cyan
P5 perfect 5th 238° → Sky
m7 minor 7th 318° → Fuchsia

Harmonic Palette Method

Palette

Full harmonic ramp bound to emitted --color-<family>-<stop> tokens: 24 families, 11 stops, 264 visible swatches per brand.

Fundamental

KBPD-AI / DAWN / ASK

oklch(61.4% 0.224 26.9) · tuning 0.6

Harmonics surface as overtone annotations on every family row so the proof point reads as wave-derived, not hand-curated.

Semantic anchors

surface

paper-50

semantic.surface

surface contrast 1:1
text

ink-950

semantic.text

surface contrast 16.68:1
brand

red-500

semantic.brand

surface contrast 3.92:1
highlight

red-500

derived highlight

surface contrast 3.92:1
success

green-800

derived success

surface contrast 8.33:1
danger

red-800

derived danger

surface contrast 9.41:1

Primary pairings

Surface vs Text

paper-50 vs ink-950

WCAG 2.2 AA pass · AAA pass · 16.68:1
Surface vs Brand

paper-50 vs red-500

WCAG 2.2 AA fail · AAA fail · 3.92:1
Surface vs Highlight

paper-50 vs red-500

WCAG 2.2 AA fail · AAA fail · 3.92:1
Surface vs Success

paper-50 vs green-800

WCAG 2.2 AA pass · AAA pass · 8.33:1
Surface vs Danger

paper-50 vs red-800

WCAG 2.2 AA pass · AAA pass · 9.41:1

Filter family

24 families visible

Paper

Anchor

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(99.1% 0.003 106.4)

★
50
- surface
--color-paper-50

oklch(99.1% 0.003 106.4)
100

--color-paper-100

oklch(93.6% 0.004 106.5)
200

--color-paper-200

oklch(88.1% 0.004 106.5)
300

--color-paper-300

oklch(80.7% 0.004 106.5)
400

--color-paper-400

oklch(71.5% 0.004 106.5)
500

--color-paper-500

oklch(62.2% 0.004 106.5)
600

--color-paper-600

oklch(55.1% 0.003 106.5)
700

--color-paper-700

oklch(48.1% 0.003 106.5)
800

--color-paper-800

oklch(40.5% 0.003 106.5)
900

--color-paper-900

oklch(34.4% 0.003 106.6)
950

--color-paper-950

oklch(29.6% 0.004 106.6)

Red

n=1 · 0° · 1/1 ratio = Unison · oklch(62.2% 0.224 26.1)

50

--color-red-50

oklch(96.2% 0.019 29.5)
100

--color-red-100

oklch(92.7% 0.037 28)
200

--color-red-200

oklch(86.5% 0.073 28.1)
300

--color-red-300

oklch(78.4% 0.126 26.8)
400

--color-red-400

oklch(70.7% 0.185 26.3)
★
500
- brand
- highlight
--color-red-500

oklch(62.2% 0.224 26.1)
600

--color-red-600

oklch(55.1% 0.206 26.1)
700

--color-red-700

oklch(48.2% 0.174 26.2)
800
- danger
--color-red-800

oklch(40.5% 0.139 26.4)
900

--color-red-900

oklch(34.4% 0.1 26.3)
950

--color-red-950

oklch(29.8% 0.071 27.2)

Orange

n=1 · 0° · 1/1 ratio = Unison · oklch(62.1% 0.211 36.4)

50

--color-orange-50

oklch(96.3% 0.02 45.3)
100

--color-orange-100

oklch(92.9% 0.038 42.4)
200

--color-orange-200

oklch(87% 0.074 42.6)
300

--color-orange-300

oklch(79.1% 0.125 40)
400

--color-orange-400

oklch(71.4% 0.181 38.1)
500

--color-orange-500

oklch(62.1% 0.211 36.4)
600

--color-orange-600

oklch(55.3% 0.193 35.3)
700

--color-orange-700

oklch(48.4% 0.165 36.3)
800

--color-orange-800

oklch(40.6% 0.133 38.1)
900

--color-orange-900

oklch(34.6% 0.096 38.3)
950

--color-orange-950

oklch(29.7% 0.068 37.8)

Amber

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.7% 0.14 65.9)

50

--color-amber-50

oklch(96.7% 0.024 83.4)
100

--color-amber-100

oklch(93.7% 0.045 82.6)
200

--color-amber-200

oklch(88.3% 0.085 82.8)
300

--color-amber-300

oklch(80.6% 0.131 82.6)
400

--color-amber-400

oklch(71.5% 0.149 77.6)
500

--color-amber-500

oklch(62.7% 0.14 65.9)
600

--color-amber-600

oklch(55.7% 0.126 64.5)
700

--color-amber-700

oklch(48.7% 0.108 66.2)
800

--color-amber-800

oklch(40.8% 0.09 68.1)
900

--color-amber-900

oklch(34.6% 0.073 75.4)
950

--color-amber-950

oklch(29.7% 0.062 80.2)

Yellow

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.6% 0.13 79.4)

50

--color-yellow-50

oklch(96.7% 0.023 90.7)
100

--color-yellow-100

oklch(93.7% 0.042 92.2)
200

--color-yellow-200

oklch(88.3% 0.079 90.7)
300

--color-yellow-300

oklch(80.5% 0.124 91)
400

--color-yellow-400

oklch(71.4% 0.146 88.3)
500

--color-yellow-500

oklch(62.6% 0.13 79.4)
600

--color-yellow-600

oklch(55.6% 0.116 77.9)
700

--color-yellow-700

oklch(48.6% 0.101 78.5)
800

--color-yellow-800

oklch(40.8% 0.084 80.9)
900

--color-yellow-900

oklch(34.6% 0.071 85.5)
950

--color-yellow-950

oklch(29.9% 0.061 91.2)

Lime

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.2% 0.186 136.2)

50

--color-lime-50

oklch(96.8% 0.022 134.9)
100

--color-lime-100

oklch(93.7% 0.042 135.5)
200

--color-lime-200

oklch(88.2% 0.081 135.7)
300

--color-lime-300

oklch(80.6% 0.124 135.9)
400

--color-lime-400

oklch(71.2% 0.162 135.6)
500

--color-lime-500

oklch(62.2% 0.186 136.2)
600

--color-lime-600

oklch(55.3% 0.167 136.8)
700

--color-lime-700

oklch(48.2% 0.144 136.4)
800

--color-lime-800

oklch(40.4% 0.118 135.8)
900

--color-lime-900

oklch(34.3% 0.085 135.8)
950

--color-lime-950

oklch(29.8% 0.061 135.4)

Green

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.1% 0.201 143.7)

50

--color-green-50

oklch(96.8% 0.025 143.5)
100

--color-green-100

oklch(93.6% 0.043 144.2)
200

--color-green-200

oklch(88.4% 0.086 143.8)
300

--color-green-300

oklch(80.5% 0.13 143.7)
400

--color-green-400

oklch(71.3% 0.172 143.7)
500

--color-green-500

oklch(62.1% 0.201 143.7)
600

--color-green-600

oklch(55.2% 0.183 143.2)
700

--color-green-700

oklch(48.2% 0.157 143.7)
800
- success
--color-green-800

oklch(40.5% 0.125 143.6)
900

--color-green-900

oklch(34.3% 0.09 143.6)
950

--color-green-950

oklch(29.7% 0.064 143.8)

Emerald

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.9% 0.189 146.7)

50

--color-emerald-50

oklch(96.7% 0.023 149.4)
100

--color-emerald-100

oklch(93.7% 0.044 150.3)
200

--color-emerald-200

oklch(88.3% 0.085 149.8)
300

--color-emerald-300

oklch(80.5% 0.131 149.6)
400

--color-emerald-400

oklch(71.3% 0.171 149.7)
500

--color-emerald-500

oklch(62.9% 0.189 146.7)
600

--color-emerald-600

oklch(56% 0.171 146.1)
700

--color-emerald-700

oklch(49% 0.147 146.7)
800

--color-emerald-800

oklch(41.1% 0.12 147.6)
900

--color-emerald-900

oklch(34.3% 0.09 149.8)
950

--color-emerald-950

oklch(29.8% 0.064 149.7)

Teal

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(65.6% 0.118 181.7)

50

--color-teal-50

oklch(96.8% 0.024 183.8)
100

--color-teal-100

oklch(93.7% 0.042 185.4)
200

--color-teal-200

oklch(88.3% 0.08 185.9)
300

--color-teal-300

oklch(80.5% 0.123 185.8)
400

--color-teal-400

oklch(72.9% 0.129 184.4)
500

--color-teal-500

oklch(65.6% 0.118 181.7)
600

--color-teal-600

oklch(58.6% 0.105 181.4)
700

--color-teal-700

oklch(51.1% 0.092 181.8)
800

--color-teal-800

oklch(42.6% 0.076 182.2)
900

--color-teal-900

oklch(35.4% 0.063 183.6)
950

--color-teal-950

oklch(30.2% 0.054 183.2)

Cyan

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(65.4% 0.112 194.8)

50

--color-cyan-50

oklch(96.7% 0.021 193.2)
100

--color-cyan-100

oklch(93.7% 0.039 192.6)
200

--color-cyan-200

oklch(88.3% 0.076 192.8)
300

--color-cyan-300

oklch(80.6% 0.117 193.7)
400

--color-cyan-400

oklch(72.8% 0.125 193.4)
500

--color-cyan-500

oklch(65.4% 0.112 194.8)
600

--color-cyan-600

oklch(58.3% 0.099 194.8)
700

--color-cyan-700

oklch(50.9% 0.087 193.7)
800

--color-cyan-800

oklch(42.3% 0.072 194.8)
900

--color-cyan-900

oklch(35.3% 0.06 194.8)
950

--color-cyan-950

oklch(30.1% 0.052 192.8)

Sky

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(64.5% 0.153 242.1)

50

--color-sky-50

oklch(96.8% 0.021 223)
100

--color-sky-100

oklch(93.6% 0.04 227)
200

--color-sky-200

oklch(88.1% 0.077 226.3)
300

--color-sky-300

oklch(80.6% 0.123 229.7)
400

--color-sky-400

oklch(72% 0.151 234.2)
500

--color-sky-500

oklch(64.5% 0.153 242.1)
600

--color-sky-600

oklch(57.4% 0.14 243.5)
700

--color-sky-700

oklch(50% 0.12 242.5)
800

--color-sky-800

oklch(41.9% 0.097 240.6)
900

--color-sky-900

oklch(35.2% 0.076 236.3)
950

--color-sky-950

oklch(29.8% 0.06 231.7)

Blue

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(64.7% 0.188 251)

50

--color-blue-50

oklch(96.5% 0.023 224.8)
100

--color-blue-100

oklch(93.5% 0.042 225.6)
200

--color-blue-200

oklch(87.7% 0.08 226.1)
300

--color-blue-300

oklch(79.8% 0.128 229.6)
400

--color-blue-400

oklch(71.9% 0.164 239.8)
500

--color-blue-500

oklch(64.7% 0.188 251)
600

--color-blue-600

oklch(57.6% 0.172 251.9)
700

--color-blue-700

oklch(50.2% 0.147 251.3)
800

--color-blue-800

oklch(42% 0.118 249.6)
900

--color-blue-900

oklch(35.3% 0.091 245.9)
950

--color-blue-950

oklch(29.9% 0.07 241)

Indigo

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(63.1% 0.201 253.9)

50

--color-indigo-50

oklch(96.5% 0.019 235.7)
100

--color-indigo-100

oklch(93.5% 0.037 235.5)
200

--color-indigo-200

oklch(87.6% 0.071 236.5)
300

--color-indigo-300

oklch(79.6% 0.115 240.3)
400

--color-indigo-400

oklch(70.6% 0.165 244.9)
500

--color-indigo-500

oklch(63.1% 0.201 253.9)
600

--color-indigo-600

oklch(56.3% 0.183 254.7)
700

--color-indigo-700

oklch(49% 0.157 254.2)
800

--color-indigo-800

oklch(41.2% 0.125 252.5)
900

--color-indigo-900

oklch(34.5% 0.095 249)
950

--color-indigo-950

oklch(29.7% 0.067 248.4)

Violet

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.201 304.6)

50

--color-violet-50

oklch(96.8% 0.02 308.2)
100

--color-violet-100

oklch(93.5% 0.04 308)
200

--color-violet-200

oklch(88% 0.076 307.5)
300

--color-violet-300

oklch(80.5% 0.124 305.9)
400

--color-violet-400

oklch(71.3% 0.172 304.5)
500

--color-violet-500

oklch(62.2% 0.201 304.6)
600

--color-violet-600

oklch(55.1% 0.185 304.4)
700

--color-violet-700

oklch(48.2% 0.157 304.7)
800

--color-violet-800

oklch(40.6% 0.126 304.5)
900

--color-violet-900

oklch(34.5% 0.09 304.8)
950

--color-violet-950

oklch(29.8% 0.065 305.2)

Purple

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62% 0.19 310.7)

50

--color-purple-50

oklch(96.6% 0.022 312.2)
100

--color-purple-100

oklch(93.7% 0.041 310.9)
200

--color-purple-200

oklch(88.2% 0.079 311.1)
300

--color-purple-300

oklch(80.7% 0.123 310.6)
400

--color-purple-400

oklch(71.3% 0.163 310.4)
500

--color-purple-500

oklch(62% 0.19 310.7)
600

--color-purple-600

oklch(55.2% 0.175 310.6)
700

--color-purple-700

oklch(48.2% 0.148 310.4)
800

--color-purple-800

oklch(40.6% 0.118 310.3)
900

--color-purple-900

oklch(34.3% 0.086 311.1)
950

--color-purple-950

oklch(29.9% 0.061 310.5)

Fuchsia

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62% 0.202 318.5)

50

--color-fuchsia-50

oklch(96.7% 0.025 319.9)
100

--color-fuchsia-100

oklch(93.6% 0.045 318)
200

--color-fuchsia-200

oklch(88.3% 0.085 318.6)
300

--color-fuchsia-300

oklch(80.6% 0.131 318.2)
400

--color-fuchsia-400

oklch(71.4% 0.171 318.7)
500

--color-fuchsia-500

oklch(62% 0.202 318.5)
600

--color-fuchsia-600

oklch(55.2% 0.186 318.6)
700

--color-fuchsia-700

oklch(48.2% 0.158 318.4)
800

--color-fuchsia-800

oklch(40.6% 0.125 319.1)
900

--color-fuchsia-900

oklch(34.3% 0.091 318.1)
950

--color-fuchsia-950

oklch(29.9% 0.065 318.6)

Pink

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.191 326.5)

50

--color-pink-50

oklch(96.7% 0.024 325.8)
100

--color-pink-100

oklch(93.7% 0.042 327.1)
200

--color-pink-200

oklch(88.4% 0.079 326.2)
300

--color-pink-300

oklch(80.7% 0.124 326.7)
400

--color-pink-400

oklch(71.4% 0.162 326.7)
500

--color-pink-500

oklch(62.2% 0.191 326.5)
600

--color-pink-600

oklch(55.2% 0.176 326.4)
700

--color-pink-700

oklch(48.2% 0.149 326.1)
800

--color-pink-800

oklch(40.6% 0.118 326.8)
900

--color-pink-900

oklch(34.4% 0.085 326.3)
950

--color-pink-950

oklch(29.9% 0.06 326.9)

Rose

n=1 · 0° · 1/1 ratio = Unison · oklch(62.2% 0.213 14.2)

50

--color-rose-50

oklch(96.3% 0.018 13.4)
100

--color-rose-100

oklch(92.8% 0.037 13.7)
200

--color-rose-200

oklch(86.8% 0.072 13.3)
300

--color-rose-300

oklch(79% 0.124 12.8)
400

--color-rose-400

oklch(71.3% 0.181 14.3)
500

--color-rose-500

oklch(62.2% 0.213 14.2)
600

--color-rose-600

oklch(55.2% 0.196 14)
700

--color-rose-700

oklch(48.3% 0.166 14)
800

--color-rose-800

oklch(40.6% 0.132 13.9)
900

--color-rose-900

oklch(34.5% 0.096 14.7)
950

--color-rose-950

oklch(29.8% 0.067 13.7)

Slate

Neutral

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62% 0.015 286)

50

--color-slate-50

oklch(96.7% 0.015 286.1)
100

--color-slate-100

oklch(93.7% 0.015 286.1)
200

--color-slate-200

oklch(88.2% 0.015 286.1)
300

--color-slate-300

oklch(80.5% 0.015 286.1)
400

--color-slate-400

oklch(71.2% 0.016 286)
500

--color-slate-500

oklch(62% 0.015 286)
600

--color-slate-600

oklch(55.2% 0.015 285.9)
700

--color-slate-700

oklch(48.2% 0.016 285.8)
800

--color-slate-800

oklch(40.5% 0.015 285.7)
900

--color-slate-900

oklch(34.4% 0.016 285.6)
950

--color-slate-950

oklch(29.7% 0.016 285.4)

Gray

Neutral

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(62.1% 0.004 197.1)

50

--color-gray-50

oklch(96.8% 0.003 197.1)
100

--color-gray-100

oklch(93.8% 0.003 197.1)
200

--color-gray-200

oklch(88.3% 0.003 197.1)
300

--color-gray-300

oklch(80.5% 0.003 197.1)
400

--color-gray-400

oklch(71.3% 0.003 197.1)
500

--color-gray-500

oklch(62.1% 0.004 197.1)
600

--color-gray-600

oklch(55.3% 0.004 197.1)
700

--color-gray-700

oklch(48.3% 0.004 197)
800

--color-gray-800

oklch(40.6% 0.004 197)
900

--color-gray-900

oklch(34.3% 0.003 197)
950

--color-gray-950

oklch(29.9% 0.003 197)

Zinc

Neutral

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.007 286.2)

50

--color-zinc-50

oklch(96.9% 0.008 286.3)
100

--color-zinc-100

oklch(93.6% 0.008 286.2)
200

--color-zinc-200

oklch(88.4% 0.007 286.3)
300

--color-zinc-300

oklch(80.6% 0.008 286.2)
400

--color-zinc-400

oklch(71.4% 0.007 286.2)
500

--color-zinc-500

oklch(62.2% 0.007 286.2)
600

--color-zinc-600

oklch(55.1% 0.009 286.1)
700

--color-zinc-700

oklch(48.4% 0.008 286.1)
800

--color-zinc-800

oklch(40.7% 0.007 286.1)
900

--color-zinc-900

oklch(34.3% 0.009 285.9)
950

--color-zinc-950

oklch(29.9% 0.007 286)

Neutral

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.2% 0.006 106.6)

50

--color-neutral-50

oklch(96.9% 0.007 106.5)
100

--color-neutral-100

oklch(93.6% 0.005 106.5)
200

--color-neutral-200

oklch(88.4% 0.007 106.5)
300

--color-neutral-300

oklch(80.6% 0.007 106.6)
400

--color-neutral-400

oklch(71.4% 0.006 106.5)
500

--color-neutral-500

oklch(62.2% 0.006 106.6)
600

--color-neutral-600

oklch(55.1% 0.006 106.6)
700

--color-neutral-700

oklch(48.4% 0.006 106.6)
800

--color-neutral-800

oklch(40.4% 0.005 106.6)
900

--color-neutral-900

oklch(34.4% 0.005 106.7)
950

--color-neutral-950

oklch(29.6% 0.005 106.7)

Stone

Neutral

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.1% 0.012 106.7)

50

--color-stone-50

oklch(96.8% 0.012 106.6)
100

--color-stone-100

oklch(93.8% 0.012 106.6)
200

--color-stone-200

oklch(88.3% 0.012 106.6)
300

--color-stone-300

oklch(80.5% 0.012 106.7)
400

--color-stone-400

oklch(71.3% 0.011 106.7)
500

--color-stone-500

oklch(62.1% 0.012 106.7)
600

--color-stone-600

oklch(55.3% 0.012 106.8)
700

--color-stone-700

oklch(48.3% 0.013 106.9)
800

--color-stone-800

oklch(40.6% 0.013 107)
900

--color-stone-900

oklch(34.3% 0.012 100.3)
950

--color-stone-950

oklch(29.9% 0.012 107.1)

Ink

Anchor

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(22.1% 0.04 218.1)

50

--color-ink-50

oklch(96.7% 0.029 210)
100

--color-ink-100

oklch(93.6% 0.03 220.6)
200

--color-ink-200

oklch(88.3% 0.031 217.5)
300

--color-ink-300

oklch(80.7% 0.03 218.3)
400

--color-ink-400

oklch(71.4% 0.031 215.8)
500

--color-ink-500

oklch(62.1% 0.03 220)
600

--color-ink-600

oklch(55.3% 0.03 217.4)
700

--color-ink-700

oklch(48.3% 0.031 217.6)
800

--color-ink-800

oklch(40.5% 0.03 219.5)
900

--color-ink-900

oklch(34.4% 0.03 216.7)
★
950
- text
--color-ink-950

oklch(22.1% 0.04 218.1)

Typography

H1 through caption, shown across every authored weight with the ratio math exposed.

H1

step 7

57.33px

weight 200

KBPD-AI / DAWN / ASK

weight 250

KBPD-AI / DAWN / ASK

weight 280

KBPD-AI / DAWN / ASK

weight 300

KBPD-AI / DAWN / ASK

weight 320

KBPD-AI / DAWN / ASK

weight 400

KBPD-AI / DAWN / ASK

weight 500

KBPD-AI / DAWN / ASK

weight 700

KBPD-AI / DAWN / ASK
H2

step 6

47.78px

weight 200

Specimen typography cadence

weight 250

Specimen typography cadence

weight 280

Specimen typography cadence

weight 300

Specimen typography cadence

weight 320

Specimen typography cadence

weight 400

Specimen typography cadence

weight 500

Specimen typography cadence

weight 700

Specimen typography cadence
H3

step 5

39.81px

weight 200

The scale stays visible at every tier.

weight 250

The scale stays visible at every tier.

weight 280

The scale stays visible at every tier.

weight 300

The scale stays visible at every tier.

weight 320

The scale stays visible at every tier.

weight 400

The scale stays visible at every tier.

weight 500

The scale stays visible at every tier.

weight 700

The scale stays visible at every tier.
H4

step 4

33.18px

weight 200

Display transitions into interface heading.

weight 250

Display transitions into interface heading.

weight 280

Display transitions into interface heading.

weight 300

Display transitions into interface heading.

weight 320

Display transitions into interface heading.

weight 400

Display transitions into interface heading.

weight 500

Display transitions into interface heading.

weight 700

Display transitions into interface heading.
H5

step 3

27.65px

weight 200

Section headers keep the same proportional rhythm.

weight 250

Section headers keep the same proportional rhythm.

weight 280

Section headers keep the same proportional rhythm.

weight 300

Section headers keep the same proportional rhythm.

weight 320

Section headers keep the same proportional rhythm.

weight 400

Section headers keep the same proportional rhythm.

weight 500

Section headers keep the same proportional rhythm.

weight 700

Section headers keep the same proportional rhythm.
H6

step 2

23.04px

weight 200

Utility labels stay anchored to the ratio.

weight 250

Utility labels stay anchored to the ratio.

weight 280

Utility labels stay anchored to the ratio.

weight 300

Utility labels stay anchored to the ratio.

weight 320

Utility labels stay anchored to the ratio.

weight 400

Utility labels stay anchored to the ratio.

weight 500

Utility labels stay anchored to the ratio.

weight 700

Utility labels stay anchored to the ratio.
Body

step 0

16px

weight 200

The morning question. Curiosity. Arrival of light.

weight 250

The morning question. Curiosity. Arrival of light.

weight 280

The morning question. Curiosity. Arrival of light.

weight 300

The morning question. Curiosity. Arrival of light.

weight 320

The morning question. Curiosity. Arrival of light.

weight 400

The morning question. Curiosity. Arrival of light.

weight 500

The morning question. Curiosity. Arrival of light.

weight 700

The morning question. Curiosity. Arrival of light.
Console

step -1

13.33px

weight 200

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

weight 250

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

weight 280

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

weight 300

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

weight 320

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

weight 400

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

weight 500

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

weight 700

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

Generated Formal Composition

H1: --font-family-serif; --font-size-5; --type-display-weight; --line-height-tight
H2: --font-family-serif; --font-size-4; --type-heading-weight; --line-height-snug
H3: --font-family-serif; --font-size-2; --type-copy-weight; --line-height-relaxed
H4 / Console: --font-family-ui; calc(var(--font-size-base) / var(--type-ratio)); --type-ui-weight; --type-ui-line-height
Body: --font-family-serif; --font-size-base; --type-copy-weight; --line-height-relaxed
Smaller body: --font-family-serif; calc(var(--font-size-base) / var(--type-ratio)); --type-copy-weight; --line-height-snug

Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Components

Product primitives for KBPD-AI / DAWN / ASK, rendered under pointer and touch contexts with source-bound state styling.

Design-source contract: Named tiers, CSS variables, and semantic aliases before component styling.
Component ownership: shadcn-style copy-owned primitives: the site owns the markup and styling rather than fighting a themed library.
Interaction model: Native HTML now; complex menus/dialogs should graduate to Ark/Zag state machines before reuse in client apps.
Specimen discipline: Storybook-style state matrix: every primitive shows rest, hover, focus, active, mobile, and source provenance.

Rest

Hover

Focus

Active

Rest

Hover

Rest

Focus

Default surface

Weekend dues

Editorial warmth stays quiet on standard surfaces so the content keeps the focus.

Elevated surface

Milestone reached

Elevation steps forward for payment confirmations, nudges, and earned celebrations.

Trip name Default text field Contribution note Focused sample Invite code Disabled sample Goal amount Goal must stay above total contributions

Line item	Status	Amount
Palm Springs House	Confirmed	$780
Airport SUV	Pending	$240
Poolside Dinner	Paid	$315
Welcome Bags	Tracked	$180

Lead contributors
Booked items
Pending invites
Goal remaining
Celebration budget

Motion personality

Motion is a brand system, not a footnote.

Signature keyframe continuous with easing --motion-easing-default.

Timing rails

Four kinetic lanes map the brand from touch response up through ambient pacing.

Fast rail

Micro-touch responses for hover, focus, and press.

--motion-duration-fast

Hover or focus to preview this rail.

Base rail

Standard component transitions and disclosure beats.

--motion-duration-base

Hover or focus to preview this rail.

Slow rail

Panel lifts, emphasis shifts, and celebratory follow-through.

--motion-duration-slow

Hover or focus to preview this rail.

Slower rail

Ambient loops and choreography that should never feel twitchy.

calc(--motion-duration-slow + --motion-duration-base)

Hover or focus to preview this rail.

Easing curve

The default easing is visualized directly from the brand fixture and applied to the sample puck.

Default easing

cubic-bezier(0.16, 1, 0.3, 1)

Control handles 16 0 and 30 0.

Hover and focus micro-transitions

Compact responses show how the brand handles touch, hover, and focus without over-speaking.

Card response Leaderboard pulse Focus or hover to feel the card lift and deepen. Contribution amount

Transition primitives

Drawer, toast, and menu reveal are CSS-only primitives bound to the same timing and easing rails.

Drawer slide

Toast enter / exit

Contribution saved Toast inherits the brand's response tempo.

Menu reveal

Signature keyframe

The specimen chooses a signature movement from the brand motion name and falls back to a calm breathe when no explicit signature exists.

Signature: continuous

Stagger and choreography

Five linked beats enter on a shared ratio-derived sequence so the cadence feels authored rather than simultaneous.

Sequence step uses --motion-stagger-step.

Interaction beats

The full loop runs through button press, card response, toast confirmation, and a brief celebration burst.

Idle-state motion

A restrained ambient loop keeps the surface alive without looking busy or distracting from content.

Motion hierarchy

Primary, secondary, and tertiary tones form a readable kinetic scale in the same way typography forms a type scale.

Primary motion --motion-duration-base

Reserved for the main state change that asks for attention.

Secondary motion --motion-duration-fast

Supports the primary beat without competing for emphasis.

Tertiary motion --motion-duration-slow

Ambient reinforcement and idle feedback under the surface.

Harmonic method

Overtone wheel

Primary 27°

Rays are overtones of the fundamental: hₙ = (H₀ + 360·log₂n) mod 360.

1 unison 27° → Red
M2 major 2nd 88° → Yellow
M3 major 3rd 143° → Green
TT tritone 192° → Cyan
P5 perfect 5th 238° → Sky
m7 minor 7th 318° → Fuchsia

Harmonic Palette Method

Palette

Full harmonic ramp bound to emitted --color-<family>-<stop> tokens: 24 families, 11 stops, 264 visible swatches per brand.

Fundamental

KBPD-AI / DAY / KNOW

oklch(61.4% 0.224 26.9) · tuning 0.6

Harmonics surface as overtone annotations on every family row so the proof point reads as wave-derived, not hand-curated.

Semantic anchors

surface

paper-50

semantic.surface

surface contrast 1:1
text

ink-950

semantic.text

surface contrast 16.68:1
brand

red-500

semantic.brand

surface contrast 3.92:1
highlight

red-500

derived highlight

surface contrast 3.92:1
success

green-800

derived success

surface contrast 8.33:1
danger

red-800

derived danger

surface contrast 9.41:1

Primary pairings

Surface vs Text

paper-50 vs ink-950

WCAG 2.2 AA pass · AAA pass · 16.68:1
Surface vs Brand

paper-50 vs red-500

WCAG 2.2 AA fail · AAA fail · 3.92:1
Surface vs Highlight

paper-50 vs red-500

WCAG 2.2 AA fail · AAA fail · 3.92:1
Surface vs Success

paper-50 vs green-800

WCAG 2.2 AA pass · AAA pass · 8.33:1
Surface vs Danger

paper-50 vs red-800

WCAG 2.2 AA pass · AAA pass · 9.41:1

Filter family

24 families visible

Paper

Anchor

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(99.1% 0.003 106.4)

★
50
- surface
--color-paper-50

oklch(99.1% 0.003 106.4)
100

--color-paper-100

oklch(93.6% 0.004 106.5)
200

--color-paper-200

oklch(88.1% 0.004 106.5)
300

--color-paper-300

oklch(80.7% 0.004 106.5)
400

--color-paper-400

oklch(71.5% 0.004 106.5)
500

--color-paper-500

oklch(62.2% 0.004 106.5)
600

--color-paper-600

oklch(55.1% 0.003 106.5)
700

--color-paper-700

oklch(48.1% 0.003 106.5)
800

--color-paper-800

oklch(40.5% 0.003 106.5)
900

--color-paper-900

oklch(34.4% 0.003 106.6)
950

--color-paper-950

oklch(29.6% 0.004 106.6)

Red

n=1 · 0° · 1/1 ratio = Unison · oklch(62.2% 0.224 26.1)

50

--color-red-50

oklch(96.2% 0.019 29.5)
100

--color-red-100

oklch(92.7% 0.037 28)
200

--color-red-200

oklch(86.5% 0.073 28.1)
300

--color-red-300

oklch(78.4% 0.126 26.8)
400

--color-red-400

oklch(70.7% 0.185 26.3)
★
500
- brand
- highlight
--color-red-500

oklch(62.2% 0.224 26.1)
600

--color-red-600

oklch(55.1% 0.206 26.1)
700

--color-red-700

oklch(48.2% 0.174 26.2)
800
- danger
--color-red-800

oklch(40.5% 0.139 26.4)
900

--color-red-900

oklch(34.4% 0.1 26.3)
950

--color-red-950

oklch(29.8% 0.071 27.2)

Orange

n=1 · 0° · 1/1 ratio = Unison · oklch(62.1% 0.211 36.4)

50

--color-orange-50

oklch(96.3% 0.02 45.3)
100

--color-orange-100

oklch(92.9% 0.038 42.4)
200

--color-orange-200

oklch(87% 0.074 42.6)
300

--color-orange-300

oklch(79.1% 0.125 40)
400

--color-orange-400

oklch(71.4% 0.181 38.1)
500

--color-orange-500

oklch(62.1% 0.211 36.4)
600

--color-orange-600

oklch(55.3% 0.193 35.3)
700

--color-orange-700

oklch(48.4% 0.165 36.3)
800

--color-orange-800

oklch(40.6% 0.133 38.1)
900

--color-orange-900

oklch(34.6% 0.096 38.3)
950

--color-orange-950

oklch(29.7% 0.068 37.8)

Amber

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.7% 0.14 65.9)

50

--color-amber-50

oklch(96.7% 0.024 83.4)
100

--color-amber-100

oklch(93.7% 0.045 82.6)
200

--color-amber-200

oklch(88.3% 0.085 82.8)
300

--color-amber-300

oklch(80.6% 0.131 82.6)
400

--color-amber-400

oklch(71.5% 0.149 77.6)
500

--color-amber-500

oklch(62.7% 0.14 65.9)
600

--color-amber-600

oklch(55.7% 0.126 64.5)
700

--color-amber-700

oklch(48.7% 0.108 66.2)
800

--color-amber-800

oklch(40.8% 0.09 68.1)
900

--color-amber-900

oklch(34.6% 0.073 75.4)
950

--color-amber-950

oklch(29.7% 0.062 80.2)

Yellow

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.6% 0.13 79.4)

50

--color-yellow-50

oklch(96.7% 0.023 90.7)
100

--color-yellow-100

oklch(93.7% 0.042 92.2)
200

--color-yellow-200

oklch(88.3% 0.079 90.7)
300

--color-yellow-300

oklch(80.5% 0.124 91)
400

--color-yellow-400

oklch(71.4% 0.146 88.3)
500

--color-yellow-500

oklch(62.6% 0.13 79.4)
600

--color-yellow-600

oklch(55.6% 0.116 77.9)
700

--color-yellow-700

oklch(48.6% 0.101 78.5)
800

--color-yellow-800

oklch(40.8% 0.084 80.9)
900

--color-yellow-900

oklch(34.6% 0.071 85.5)
950

--color-yellow-950

oklch(29.9% 0.061 91.2)

Lime

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.2% 0.186 136.2)

50

--color-lime-50

oklch(96.8% 0.022 134.9)
100

--color-lime-100

oklch(93.7% 0.042 135.5)
200

--color-lime-200

oklch(88.2% 0.081 135.7)
300

--color-lime-300

oklch(80.6% 0.124 135.9)
400

--color-lime-400

oklch(71.2% 0.162 135.6)
500

--color-lime-500

oklch(62.2% 0.186 136.2)
600

--color-lime-600

oklch(55.3% 0.167 136.8)
700

--color-lime-700

oklch(48.2% 0.144 136.4)
800

--color-lime-800

oklch(40.4% 0.118 135.8)
900

--color-lime-900

oklch(34.3% 0.085 135.8)
950

--color-lime-950

oklch(29.8% 0.061 135.4)

Green

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.1% 0.201 143.7)

50

--color-green-50

oklch(96.8% 0.025 143.5)
100

--color-green-100

oklch(93.6% 0.043 144.2)
200

--color-green-200

oklch(88.4% 0.086 143.8)
300

--color-green-300

oklch(80.5% 0.13 143.7)
400

--color-green-400

oklch(71.3% 0.172 143.7)
500

--color-green-500

oklch(62.1% 0.201 143.7)
600

--color-green-600

oklch(55.2% 0.183 143.2)
700

--color-green-700

oklch(48.2% 0.157 143.7)
800
- success
--color-green-800

oklch(40.5% 0.125 143.6)
900

--color-green-900

oklch(34.3% 0.09 143.6)
950

--color-green-950

oklch(29.7% 0.064 143.8)

Emerald

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.9% 0.189 146.7)

50

--color-emerald-50

oklch(96.7% 0.023 149.4)
100

--color-emerald-100

oklch(93.7% 0.044 150.3)
200

--color-emerald-200

oklch(88.3% 0.085 149.8)
300

--color-emerald-300

oklch(80.5% 0.131 149.6)
400

--color-emerald-400

oklch(71.3% 0.171 149.7)
500

--color-emerald-500

oklch(62.9% 0.189 146.7)
600

--color-emerald-600

oklch(56% 0.171 146.1)
700

--color-emerald-700

oklch(49% 0.147 146.7)
800

--color-emerald-800

oklch(41.1% 0.12 147.6)
900

--color-emerald-900

oklch(34.3% 0.09 149.8)
950

--color-emerald-950

oklch(29.8% 0.064 149.7)

Teal

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(65.6% 0.118 181.7)

50

--color-teal-50

oklch(96.8% 0.024 183.8)
100

--color-teal-100

oklch(93.7% 0.042 185.4)
200

--color-teal-200

oklch(88.3% 0.08 185.9)
300

--color-teal-300

oklch(80.5% 0.123 185.8)
400

--color-teal-400

oklch(72.9% 0.129 184.4)
500

--color-teal-500

oklch(65.6% 0.118 181.7)
600

--color-teal-600

oklch(58.6% 0.105 181.4)
700

--color-teal-700

oklch(51.1% 0.092 181.8)
800

--color-teal-800

oklch(42.6% 0.076 182.2)
900

--color-teal-900

oklch(35.4% 0.063 183.6)
950

--color-teal-950

oklch(30.2% 0.054 183.2)

Cyan

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(65.4% 0.112 194.8)

50

--color-cyan-50

oklch(96.7% 0.021 193.2)
100

--color-cyan-100

oklch(93.7% 0.039 192.6)
200

--color-cyan-200

oklch(88.3% 0.076 192.8)
300

--color-cyan-300

oklch(80.6% 0.117 193.7)
400

--color-cyan-400

oklch(72.8% 0.125 193.4)
500

--color-cyan-500

oklch(65.4% 0.112 194.8)
600

--color-cyan-600

oklch(58.3% 0.099 194.8)
700

--color-cyan-700

oklch(50.9% 0.087 193.7)
800

--color-cyan-800

oklch(42.3% 0.072 194.8)
900

--color-cyan-900

oklch(35.3% 0.06 194.8)
950

--color-cyan-950

oklch(30.1% 0.052 192.8)

Sky

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(64.5% 0.153 242.1)

50

--color-sky-50

oklch(96.8% 0.021 223)
100

--color-sky-100

oklch(93.6% 0.04 227)
200

--color-sky-200

oklch(88.1% 0.077 226.3)
300

--color-sky-300

oklch(80.6% 0.123 229.7)
400

--color-sky-400

oklch(72% 0.151 234.2)
500

--color-sky-500

oklch(64.5% 0.153 242.1)
600

--color-sky-600

oklch(57.4% 0.14 243.5)
700

--color-sky-700

oklch(50% 0.12 242.5)
800

--color-sky-800

oklch(41.9% 0.097 240.6)
900

--color-sky-900

oklch(35.2% 0.076 236.3)
950

--color-sky-950

oklch(29.8% 0.06 231.7)

Blue

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(64.7% 0.188 251)

50

--color-blue-50

oklch(96.5% 0.023 224.8)
100

--color-blue-100

oklch(93.5% 0.042 225.6)
200

--color-blue-200

oklch(87.7% 0.08 226.1)
300

--color-blue-300

oklch(79.8% 0.128 229.6)
400

--color-blue-400

oklch(71.9% 0.164 239.8)
500

--color-blue-500

oklch(64.7% 0.188 251)
600

--color-blue-600

oklch(57.6% 0.172 251.9)
700

--color-blue-700

oklch(50.2% 0.147 251.3)
800

--color-blue-800

oklch(42% 0.118 249.6)
900

--color-blue-900

oklch(35.3% 0.091 245.9)
950

--color-blue-950

oklch(29.9% 0.07 241)

Indigo

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(63.1% 0.201 253.9)

50

--color-indigo-50

oklch(96.5% 0.019 235.7)
100

--color-indigo-100

oklch(93.5% 0.037 235.5)
200

--color-indigo-200

oklch(87.6% 0.071 236.5)
300

--color-indigo-300

oklch(79.6% 0.115 240.3)
400

--color-indigo-400

oklch(70.6% 0.165 244.9)
500

--color-indigo-500

oklch(63.1% 0.201 253.9)
600

--color-indigo-600

oklch(56.3% 0.183 254.7)
700

--color-indigo-700

oklch(49% 0.157 254.2)
800

--color-indigo-800

oklch(41.2% 0.125 252.5)
900

--color-indigo-900

oklch(34.5% 0.095 249)
950

--color-indigo-950

oklch(29.7% 0.067 248.4)

Violet

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.201 304.6)

50

--color-violet-50

oklch(96.8% 0.02 308.2)
100

--color-violet-100

oklch(93.5% 0.04 308)
200

--color-violet-200

oklch(88% 0.076 307.5)
300

--color-violet-300

oklch(80.5% 0.124 305.9)
400

--color-violet-400

oklch(71.3% 0.172 304.5)
500

--color-violet-500

oklch(62.2% 0.201 304.6)
600

--color-violet-600

oklch(55.1% 0.185 304.4)
700

--color-violet-700

oklch(48.2% 0.157 304.7)
800

--color-violet-800

oklch(40.6% 0.126 304.5)
900

--color-violet-900

oklch(34.5% 0.09 304.8)
950

--color-violet-950

oklch(29.8% 0.065 305.2)

Purple

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62% 0.19 310.7)

50

--color-purple-50

oklch(96.6% 0.022 312.2)
100

--color-purple-100

oklch(93.7% 0.041 310.9)
200

--color-purple-200

oklch(88.2% 0.079 311.1)
300

--color-purple-300

oklch(80.7% 0.123 310.6)
400

--color-purple-400

oklch(71.3% 0.163 310.4)
500

--color-purple-500

oklch(62% 0.19 310.7)
600

--color-purple-600

oklch(55.2% 0.175 310.6)
700

--color-purple-700

oklch(48.2% 0.148 310.4)
800

--color-purple-800

oklch(40.6% 0.118 310.3)
900

--color-purple-900

oklch(34.3% 0.086 311.1)
950

--color-purple-950

oklch(29.9% 0.061 310.5)

Fuchsia

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62% 0.202 318.5)

50

--color-fuchsia-50

oklch(96.7% 0.025 319.9)
100

--color-fuchsia-100

oklch(93.6% 0.045 318)
200

--color-fuchsia-200

oklch(88.3% 0.085 318.6)
300

--color-fuchsia-300

oklch(80.6% 0.131 318.2)
400

--color-fuchsia-400

oklch(71.4% 0.171 318.7)
500

--color-fuchsia-500

oklch(62% 0.202 318.5)
600

--color-fuchsia-600

oklch(55.2% 0.186 318.6)
700

--color-fuchsia-700

oklch(48.2% 0.158 318.4)
800

--color-fuchsia-800

oklch(40.6% 0.125 319.1)
900

--color-fuchsia-900

oklch(34.3% 0.091 318.1)
950

--color-fuchsia-950

oklch(29.9% 0.065 318.6)

Pink

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.191 326.5)

50

--color-pink-50

oklch(96.7% 0.024 325.8)
100

--color-pink-100

oklch(93.7% 0.042 327.1)
200

--color-pink-200

oklch(88.4% 0.079 326.2)
300

--color-pink-300

oklch(80.7% 0.124 326.7)
400

--color-pink-400

oklch(71.4% 0.162 326.7)
500

--color-pink-500

oklch(62.2% 0.191 326.5)
600

--color-pink-600

oklch(55.2% 0.176 326.4)
700

--color-pink-700

oklch(48.2% 0.149 326.1)
800

--color-pink-800

oklch(40.6% 0.118 326.8)
900

--color-pink-900

oklch(34.4% 0.085 326.3)
950

--color-pink-950

oklch(29.9% 0.06 326.9)

Rose

n=1 · 0° · 1/1 ratio = Unison · oklch(62.2% 0.213 14.2)

50

--color-rose-50

oklch(96.3% 0.018 13.4)
100

--color-rose-100

oklch(92.8% 0.037 13.7)
200

--color-rose-200

oklch(86.8% 0.072 13.3)
300

--color-rose-300

oklch(79% 0.124 12.8)
400

--color-rose-400

oklch(71.3% 0.181 14.3)
500

--color-rose-500

oklch(62.2% 0.213 14.2)
600

--color-rose-600

oklch(55.2% 0.196 14)
700

--color-rose-700

oklch(48.3% 0.166 14)
800

--color-rose-800

oklch(40.6% 0.132 13.9)
900

--color-rose-900

oklch(34.5% 0.096 14.7)
950

--color-rose-950

oklch(29.8% 0.067 13.7)

Slate

Neutral

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62% 0.015 286)

50

--color-slate-50

oklch(96.7% 0.015 286.1)
100

--color-slate-100

oklch(93.7% 0.015 286.1)
200

--color-slate-200

oklch(88.2% 0.015 286.1)
300

--color-slate-300

oklch(80.5% 0.015 286.1)
400

--color-slate-400

oklch(71.2% 0.016 286)
500

--color-slate-500

oklch(62% 0.015 286)
600

--color-slate-600

oklch(55.2% 0.015 285.9)
700

--color-slate-700

oklch(48.2% 0.016 285.8)
800

--color-slate-800

oklch(40.5% 0.015 285.7)
900

--color-slate-900

oklch(34.4% 0.016 285.6)
950

--color-slate-950

oklch(29.7% 0.016 285.4)

Gray

Neutral

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(62.1% 0.004 197.1)

50

--color-gray-50

oklch(96.8% 0.003 197.1)
100

--color-gray-100

oklch(93.8% 0.003 197.1)
200

--color-gray-200

oklch(88.3% 0.003 197.1)
300

--color-gray-300

oklch(80.5% 0.003 197.1)
400

--color-gray-400

oklch(71.3% 0.003 197.1)
500

--color-gray-500

oklch(62.1% 0.004 197.1)
600

--color-gray-600

oklch(55.3% 0.004 197.1)
700

--color-gray-700

oklch(48.3% 0.004 197)
800

--color-gray-800

oklch(40.6% 0.004 197)
900

--color-gray-900

oklch(34.3% 0.003 197)
950

--color-gray-950

oklch(29.9% 0.003 197)

Zinc

Neutral

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.007 286.2)

50

--color-zinc-50

oklch(96.9% 0.008 286.3)
100

--color-zinc-100

oklch(93.6% 0.008 286.2)
200

--color-zinc-200

oklch(88.4% 0.007 286.3)
300

--color-zinc-300

oklch(80.6% 0.008 286.2)
400

--color-zinc-400

oklch(71.4% 0.007 286.2)
500

--color-zinc-500

oklch(62.2% 0.007 286.2)
600

--color-zinc-600

oklch(55.1% 0.009 286.1)
700

--color-zinc-700

oklch(48.4% 0.008 286.1)
800

--color-zinc-800

oklch(40.7% 0.007 286.1)
900

--color-zinc-900

oklch(34.3% 0.009 285.9)
950

--color-zinc-950

oklch(29.9% 0.007 286)

Neutral

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.2% 0.006 106.6)

50

--color-neutral-50

oklch(96.9% 0.007 106.5)
100

--color-neutral-100

oklch(93.6% 0.005 106.5)
200

--color-neutral-200

oklch(88.4% 0.007 106.5)
300

--color-neutral-300

oklch(80.6% 0.007 106.6)
400

--color-neutral-400

oklch(71.4% 0.006 106.5)
500

--color-neutral-500

oklch(62.2% 0.006 106.6)
600

--color-neutral-600

oklch(55.1% 0.006 106.6)
700

--color-neutral-700

oklch(48.4% 0.006 106.6)
800

--color-neutral-800

oklch(40.4% 0.005 106.6)
900

--color-neutral-900

oklch(34.4% 0.005 106.7)
950

--color-neutral-950

oklch(29.6% 0.005 106.7)

Stone

Neutral

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.1% 0.012 106.7)

50

--color-stone-50

oklch(96.8% 0.012 106.6)
100

--color-stone-100

oklch(93.8% 0.012 106.6)
200

--color-stone-200

oklch(88.3% 0.012 106.6)
300

--color-stone-300

oklch(80.5% 0.012 106.7)
400

--color-stone-400

oklch(71.3% 0.011 106.7)
500

--color-stone-500

oklch(62.1% 0.012 106.7)
600

--color-stone-600

oklch(55.3% 0.012 106.8)
700

--color-stone-700

oklch(48.3% 0.013 106.9)
800

--color-stone-800

oklch(40.6% 0.013 107)
900

--color-stone-900

oklch(34.3% 0.012 100.3)
950

--color-stone-950

oklch(29.9% 0.012 107.1)

Ink

Anchor

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(22.1% 0.04 218.1)

50

--color-ink-50

oklch(96.7% 0.029 210)
100

--color-ink-100

oklch(93.6% 0.03 220.6)
200

--color-ink-200

oklch(88.3% 0.031 217.5)
300

--color-ink-300

oklch(80.7% 0.03 218.3)
400

--color-ink-400

oklch(71.4% 0.031 215.8)
500

--color-ink-500

oklch(62.1% 0.03 220)
600

--color-ink-600

oklch(55.3% 0.03 217.4)
700

--color-ink-700

oklch(48.3% 0.031 217.6)
800

--color-ink-800

oklch(40.5% 0.03 219.5)
900

--color-ink-900

oklch(34.4% 0.03 216.7)
★
950
- text
--color-ink-950

oklch(22.1% 0.04 218.1)

Typography

H1 through caption, shown across every authored weight with the ratio math exposed.

H1

step 7

57.33px

weight 200

KBPD-AI / DAY / KNOW

weight 250

KBPD-AI / DAY / KNOW

weight 280

KBPD-AI / DAY / KNOW

weight 300

KBPD-AI / DAY / KNOW

weight 320

KBPD-AI / DAY / KNOW

weight 400

KBPD-AI / DAY / KNOW

weight 500

KBPD-AI / DAY / KNOW

weight 700

KBPD-AI / DAY / KNOW
H2

step 6

47.78px

weight 200

Specimen typography cadence

weight 250

Specimen typography cadence

weight 280

Specimen typography cadence

weight 300

Specimen typography cadence

weight 320

Specimen typography cadence

weight 400

Specimen typography cadence

weight 500

Specimen typography cadence

weight 700

Specimen typography cadence
H3

step 5

39.81px

weight 200

The scale stays visible at every tier.

weight 250

The scale stays visible at every tier.

weight 280

The scale stays visible at every tier.

weight 300

The scale stays visible at every tier.

weight 320

The scale stays visible at every tier.

weight 400

The scale stays visible at every tier.

weight 500

The scale stays visible at every tier.

weight 700

The scale stays visible at every tier.
H4

step 4

33.18px

weight 200

Display transitions into interface heading.

weight 250

Display transitions into interface heading.

weight 280

Display transitions into interface heading.

weight 300

Display transitions into interface heading.

weight 320

Display transitions into interface heading.

weight 400

Display transitions into interface heading.

weight 500

Display transitions into interface heading.

weight 700

Display transitions into interface heading.
H5

step 3

27.65px

weight 200

Section headers keep the same proportional rhythm.

weight 250

Section headers keep the same proportional rhythm.

weight 280

Section headers keep the same proportional rhythm.

weight 300

Section headers keep the same proportional rhythm.

weight 320

Section headers keep the same proportional rhythm.

weight 400

Section headers keep the same proportional rhythm.

weight 500

Section headers keep the same proportional rhythm.

weight 700

Section headers keep the same proportional rhythm.
H6

step 2

23.04px

weight 200

Utility labels stay anchored to the ratio.

weight 250

Utility labels stay anchored to the ratio.

weight 280

Utility labels stay anchored to the ratio.

weight 300

Utility labels stay anchored to the ratio.

weight 320

Utility labels stay anchored to the ratio.

weight 400

Utility labels stay anchored to the ratio.

weight 500

Utility labels stay anchored to the ratio.

weight 700

Utility labels stay anchored to the ratio.
Body

step 0

16px

weight 200

Full-light certainty. Capability. The work in midday.

weight 250

Full-light certainty. Capability. The work in midday.

weight 280

Full-light certainty. Capability. The work in midday.

weight 300

Full-light certainty. Capability. The work in midday.

weight 320

Full-light certainty. Capability. The work in midday.

weight 400

Full-light certainty. Capability. The work in midday.

weight 500

Full-light certainty. Capability. The work in midday.

weight 700

Full-light certainty. Capability. The work in midday.
Console

step -1

13.33px

weight 200

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

weight 250

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

weight 280

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

weight 300

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

weight 320

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

weight 400

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

weight 500

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

weight 700

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

Generated Formal Composition

H1: --font-family-serif; --font-size-5; --type-display-weight; --line-height-tight
H2: --font-family-serif; --font-size-4; --type-heading-weight; --line-height-snug
H3: --font-family-serif; --font-size-2; --type-copy-weight; --line-height-relaxed
H4 / Console: --font-family-ui; calc(var(--font-size-base) / var(--type-ratio)); --type-ui-weight; --type-ui-line-height
Body: --font-family-serif; --font-size-base; --type-copy-weight; --line-height-relaxed
Smaller body: --font-family-serif; calc(var(--font-size-base) / var(--type-ratio)); --type-copy-weight; --line-height-snug

Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Components

Product primitives for KBPD-AI / DAY / KNOW, rendered under pointer and touch contexts with source-bound state styling.

Design-source contract: Named tiers, CSS variables, and semantic aliases before component styling.
Component ownership: shadcn-style copy-owned primitives: the site owns the markup and styling rather than fighting a themed library.
Interaction model: Native HTML now; complex menus/dialogs should graduate to Ark/Zag state machines before reuse in client apps.
Specimen discipline: Storybook-style state matrix: every primitive shows rest, hover, focus, active, mobile, and source provenance.

Rest

Hover

Focus

Active

Rest

Hover

Rest

Focus

Default surface

Weekend dues

Editorial warmth stays quiet on standard surfaces so the content keeps the focus.

Elevated surface

Milestone reached

Elevation steps forward for payment confirmations, nudges, and earned celebrations.

Trip name Default text field Contribution note Focused sample Invite code Disabled sample Goal amount Goal must stay above total contributions

Line item	Status	Amount
Palm Springs House	Confirmed	$780
Airport SUV	Pending	$240
Poolside Dinner	Paid	$315
Welcome Bags	Tracked	$180

Lead contributors
Booked items
Pending invites
Goal remaining
Celebration budget

Motion personality

Motion is a brand system, not a footnote.

Signature keyframe continuous with easing --motion-easing-default.

Timing rails

Four kinetic lanes map the brand from touch response up through ambient pacing.

Fast rail

Micro-touch responses for hover, focus, and press.

--motion-duration-fast

Hover or focus to preview this rail.

Base rail

Standard component transitions and disclosure beats.

--motion-duration-base

Hover or focus to preview this rail.

Slow rail

Panel lifts, emphasis shifts, and celebratory follow-through.

--motion-duration-slow

Hover or focus to preview this rail.

Slower rail

Ambient loops and choreography that should never feel twitchy.

calc(--motion-duration-slow + --motion-duration-base)

Hover or focus to preview this rail.

Easing curve

The default easing is visualized directly from the brand fixture and applied to the sample puck.

Default easing

cubic-bezier(0.16, 1, 0.3, 1)

Control handles 16 0 and 30 0.

Hover and focus micro-transitions

Compact responses show how the brand handles touch, hover, and focus without over-speaking.

Card response Leaderboard pulse Focus or hover to feel the card lift and deepen. Contribution amount

Transition primitives

Drawer, toast, and menu reveal are CSS-only primitives bound to the same timing and easing rails.

Drawer slide

Toast enter / exit

Contribution saved Toast inherits the brand's response tempo.

Menu reveal

Signature keyframe

The specimen chooses a signature movement from the brand motion name and falls back to a calm breathe when no explicit signature exists.

Signature: continuous

Stagger and choreography

Five linked beats enter on a shared ratio-derived sequence so the cadence feels authored rather than simultaneous.

Sequence step uses --motion-stagger-step.

Interaction beats

The full loop runs through button press, card response, toast confirmation, and a brief celebration burst.

Idle-state motion

A restrained ambient loop keeps the surface alive without looking busy or distracting from content.

Motion hierarchy

Primary, secondary, and tertiary tones form a readable kinetic scale in the same way typography forms a type scale.

Primary motion --motion-duration-base

Reserved for the main state change that asks for attention.

Secondary motion --motion-duration-fast

Supports the primary beat without competing for emphasis.

Tertiary motion --motion-duration-slow

Ambient reinforcement and idle feedback under the surface.

Harmonic method

Overtone wheel

Primary 234°

Rays are overtones of the fundamental: hₙ = (H₀ + 360·log₂n) mod 360.

1 unison 234° → Blue
M2 major 2nd 295° → Purple
M3 major 3rd 350° → Rose
TT tritone 39° → Orange
P5 perfect 5th 85° → Yellow
m7 minor 7th 165° → Teal

Harmonic Palette Method

Palette

Full harmonic ramp bound to emitted --color-<family>-<stop> tokens: 24 families, 11 stops, 264 visible swatches per brand.

Fundamental

KBPD-AI / DUSK / MAKE

oklch(71.1% 0.149 234.2) · tuning 0.6

Harmonics surface as overtone annotations on every family row so the proof point reads as wave-derived, not hand-curated.

Semantic anchors

surface

paper-50

semantic.surface

surface contrast 1:1
text

ink-950

semantic.text

surface contrast 16.68:1
brand

blue-400

semantic.brand

surface contrast 2.42:1
highlight

blue-400

derived highlight

surface contrast 2.42:1
success

teal-800

derived success

surface contrast 8.45:1
danger

rose-800

derived danger

surface contrast 9.2:1

Primary pairings

Surface vs Text

paper-50 vs ink-950

WCAG 2.2 AA pass · AAA pass · 16.68:1
Surface vs Brand

paper-50 vs blue-400

WCAG 2.2 AA fail · AAA fail · 2.42:1
Surface vs Highlight

paper-50 vs blue-400

WCAG 2.2 AA fail · AAA fail · 2.42:1
Surface vs Success

paper-50 vs teal-800

WCAG 2.2 AA pass · AAA pass · 8.45:1
Surface vs Danger

paper-50 vs rose-800

WCAG 2.2 AA pass · AAA pass · 9.2:1

Filter family

24 families visible

Paper

Anchor

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(99.1% 0.003 106.4)

★
50
- surface
--color-paper-50

oklch(99.1% 0.003 106.4)
100

--color-paper-100

oklch(93.6% 0.004 106.5)
200

--color-paper-200

oklch(88.1% 0.004 106.5)
300

--color-paper-300

oklch(80.7% 0.004 106.5)
400

--color-paper-400

oklch(71.5% 0.004 106.5)
500

--color-paper-500

oklch(62.2% 0.004 106.5)
600

--color-paper-600

oklch(55.1% 0.003 106.5)
700

--color-paper-700

oklch(48.1% 0.003 106.5)
800

--color-paper-800

oklch(40.5% 0.003 106.5)
900

--color-paper-900

oklch(34.4% 0.003 106.6)
950

--color-paper-950

oklch(29.6% 0.004 106.6)

Red

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(62% 0.149 33.9)

50

--color-red-50

oklch(96.6% 0.017 35.3)
100

--color-red-100

oklch(93.7% 0.032 34.3)
200

--color-red-200

oklch(88.2% 0.063 33)
300

--color-red-300

oklch(80.6% 0.097 34.3)
400

--color-red-400

oklch(71.3% 0.127 33.5)
500

--color-red-500

oklch(62% 0.149 33.9)
600

--color-red-600

oklch(55.2% 0.138 33.7)
700

--color-red-700

oklch(48.1% 0.116 33.7)
800

--color-red-800

oklch(40.7% 0.092 33.9)
900

--color-red-900

oklch(34.4% 0.066 34.2)
950

--color-red-950

oklch(29.8% 0.048 34)

Orange

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(62.2% 0.142 46.1)

50

--color-orange-50

oklch(96.8% 0.017 44.8)
100

--color-orange-100

oklch(93.6% 0.031 45.3)
200

--color-orange-200

oklch(88.3% 0.06 45.9)
300

--color-orange-300

oklch(80.5% 0.092 45.8)
400

--color-orange-400

oklch(71.3% 0.12 45.5)
500

--color-orange-500

oklch(62.2% 0.142 46.1)
600

--color-orange-600

oklch(55.1% 0.13 45.4)
700

--color-orange-700

oklch(48.3% 0.111 45.8)
800

--color-orange-800

oklch(40.6% 0.088 46)
900

--color-orange-900

oklch(34.3% 0.064 44.8)
950

--color-orange-950

oklch(29.8% 0.045 47)

Amber

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(62.1% 0.129 79.7)

50

--color-amber-50

oklch(96.7% 0.016 79.4)
100

--color-amber-100

oklch(93.7% 0.03 83.6)
200

--color-amber-200

oklch(88.2% 0.056 80.2)
300

--color-amber-300

oklch(80.6% 0.087 80.5)
400

--color-amber-400

oklch(71.4% 0.114 81.2)
500

--color-amber-500

oklch(62.1% 0.129 79.7)
600

--color-amber-600

oklch(55.2% 0.115 77.6)
700

--color-amber-700

oklch(48.4% 0.1 80)
800

--color-amber-800

oklch(40.5% 0.083 80.4)
900

--color-amber-900

oklch(34.3% 0.061 80.6)
950

--color-amber-950

oklch(29.8% 0.043 82.1)

Yellow

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(62% 0.127 88.9)

50

--color-yellow-50

oklch(96.7% 0.015 90.2)
100

--color-yellow-100

oklch(93.8% 0.028 88.8)
200

--color-yellow-200

oklch(88.3% 0.053 87.9)
300

--color-yellow-300

oklch(80.5% 0.083 88.6)
400

--color-yellow-400

oklch(71.4% 0.108 88.8)
500

--color-yellow-500

oklch(62% 0.127 88.9)
600

--color-yellow-600

oklch(55.2% 0.113 87.6)
700

--color-yellow-700

oklch(48.2% 0.098 88.3)
800

--color-yellow-800

oklch(40.4% 0.078 88.8)
900

--color-yellow-900

oklch(34.4% 0.057 88.6)
950

--color-yellow-950

oklch(29.7% 0.04 89.3)

Lime

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.1% 0.127 148.9)

50

--color-lime-50

oklch(96.7% 0.014 148.8)
100

--color-lime-100

oklch(93.7% 0.029 148.6)
200

--color-lime-200

oklch(88.3% 0.053 149.3)
300

--color-lime-300

oklch(80.6% 0.082 148.9)
400

--color-lime-400

oklch(71.2% 0.107 149.1)
500

--color-lime-500

oklch(62.1% 0.127 148.9)
600

--color-lime-600

oklch(55.1% 0.116 148.7)
700

--color-lime-700

oklch(48.1% 0.098 149)
800

--color-lime-800

oklch(40.6% 0.079 149)
900

--color-lime-900

oklch(34.3% 0.057 148.9)
950

--color-lime-950

oklch(29.8% 0.041 149.4)

Green

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.1% 0.134 157)

50

--color-green-50

oklch(96.8% 0.016 156.9)
100

--color-green-100

oklch(93.6% 0.029 156.6)
200

--color-green-200

oklch(88.3% 0.056 157.2)
300

--color-green-300

oklch(80.6% 0.087 156.8)
400

--color-green-400

oklch(71.4% 0.114 157.2)
500

--color-green-500

oklch(62.1% 0.134 157)
600

--color-green-600

oklch(55.2% 0.123 157)
700

--color-green-700

oklch(48.1% 0.103 157.3)
800

--color-green-800

oklch(40.4% 0.083 156.9)
900

--color-green-900

oklch(34.3% 0.06 157)
950

--color-green-950

oklch(29.9% 0.043 157.3)

Emerald

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.134 163.1)

50

--color-emerald-50

oklch(96.8% 0.017 162.8)
100

--color-emerald-100

oklch(93.7% 0.031 162.2)
200

--color-emerald-200

oklch(88.4% 0.056 162.8)
300

--color-emerald-300

oklch(80.6% 0.088 162.5)
400

--color-emerald-400

oklch(71.4% 0.114 162.9)
500

--color-emerald-500

oklch(62.2% 0.134 163.1)
600

--color-emerald-600

oklch(55.4% 0.121 162.4)
700

--color-emerald-700

oklch(48.2% 0.104 163.1)
800

--color-emerald-800

oklch(40.6% 0.083 162.9)
900

--color-emerald-900

oklch(34.5% 0.061 162.8)
950

--color-emerald-950

oklch(29.8% 0.043 162.9)

Teal

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.1% 0.125 168.7)

50

--color-teal-50

oklch(96.8% 0.016 166.7)
100

--color-teal-100

oklch(93.6% 0.027 170.3)
200

--color-teal-200

oklch(88.2% 0.053 168.8)
300

--color-teal-300

oklch(80.5% 0.082 168.6)
400

--color-teal-400

oklch(71.3% 0.107 169.1)
500

--color-teal-500

oklch(62.1% 0.125 168.7)
600

--color-teal-600

oklch(55.4% 0.112 168.1)
700

--color-teal-700

oklch(48.4% 0.098 168)
800
- success
--color-teal-800

oklch(40.4% 0.078 169.6)
900

--color-teal-900

oklch(34.3% 0.056 169.8)
950

--color-teal-950

oklch(29.8% 0.041 169.5)

Cyan

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.116 176.7)

50

--color-cyan-50

oklch(96.8% 0.015 175.7)
100

--color-cyan-100

oklch(93.7% 0.025 178.4)
200

--color-cyan-200

oklch(88.3% 0.05 177.4)
300

--color-cyan-300

oklch(80.5% 0.077 176.7)
400

--color-cyan-400

oklch(71.2% 0.101 177)
500

--color-cyan-500

oklch(62.2% 0.116 176.7)
600

--color-cyan-600

oklch(55.4% 0.103 176.5)
700

--color-cyan-700

oklch(48.4% 0.09 176.3)
800

--color-cyan-800

oklch(40.6% 0.074 176.5)
900

--color-cyan-900

oklch(34.4% 0.054 176.4)
950

--color-cyan-950

oklch(29.9% 0.038 176.4)

Sky

n=1 · 0° · 1/1 ratio = Unison · oklch(62.3% 0.123 229.1)

50

--color-sky-50

oklch(96.8% 0.016 227)
100

--color-sky-100

oklch(93.6% 0.028 229.2)
200

--color-sky-200

oklch(88.3% 0.053 229.1)
300

--color-sky-300

oklch(80.5% 0.083 228.9)
400

--color-sky-400

oklch(71.3% 0.108 228.9)
500

--color-sky-500

oklch(62.3% 0.123 229.1)
600

--color-sky-600

oklch(55.6% 0.112 230.6)
700

--color-sky-700

oklch(48.4% 0.096 229.5)
800

--color-sky-800

oklch(40.7% 0.079 228.5)
900

--color-sky-900

oklch(34.3% 0.057 228.8)
950

--color-sky-950

oklch(29.7% 0.04 228.3)

Blue

n=1 · 0° · 1/1 ratio = Unison · oklch(62.6% 0.142 239.6)

50

--color-blue-50

oklch(96.7% 0.018 240)
100

--color-blue-100

oklch(93.6% 0.033 237)
200

--color-blue-200

oklch(88.4% 0.062 236.1)
300

--color-blue-300

oklch(80.5% 0.097 236.8)
★
400
- brand
- highlight
--color-blue-400

oklch(71.4% 0.127 236.2)
500

--color-blue-500

oklch(62.6% 0.142 239.6)
600

--color-blue-600

oklch(55.9% 0.128 240)
700

--color-blue-700

oklch(48.6% 0.111 239.7)
800

--color-blue-800

oklch(40.6% 0.09 238.1)
900

--color-blue-900

oklch(34.5% 0.067 235.9)
950

--color-blue-950

oklch(29.8% 0.048 235.5)

Indigo

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.2% 0.141 282.9)

50

--color-indigo-50

oklch(96.7% 0.016 282.3)
100

--color-indigo-100

oklch(93.7% 0.031 283.8)
200

--color-indigo-200

oklch(88.2% 0.059 283)
300

--color-indigo-300

oklch(80.5% 0.093 283.4)
400

--color-indigo-400

oklch(71.4% 0.12 283.5)
500

--color-indigo-500

oklch(62.2% 0.141 282.9)
600

--color-indigo-600

oklch(55.1% 0.131 283.3)
700

--color-indigo-700

oklch(48.2% 0.11 283.4)
800

--color-indigo-800

oklch(40.6% 0.088 282.6)
900

--color-indigo-900

oklch(34.4% 0.064 283.7)
950

--color-indigo-950

oklch(29.7% 0.045 283.3)

Violet

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.1% 0.133 291.2)

50

--color-violet-50

oklch(96.8% 0.016 289.9)
100

--color-violet-100

oklch(93.7% 0.03 292.1)
200

--color-violet-200

oklch(88.4% 0.056 290.8)
300

--color-violet-300

oklch(80.5% 0.087 291)
400

--color-violet-400

oklch(71.3% 0.114 291.4)
500

--color-violet-500

oklch(62.1% 0.133 291.2)
600

--color-violet-600

oklch(55.2% 0.123 291.5)
700

--color-violet-700

oklch(48.2% 0.104 291)
800

--color-violet-800

oklch(40.5% 0.083 291.5)
900

--color-violet-900

oklch(34.4% 0.06 290.7)
950

--color-violet-950

oklch(29.7% 0.043 291.2)

Purple

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62% 0.127 297.2)

50

--color-purple-50

oklch(96.7% 0.016 297.5)
100

--color-purple-100

oklch(93.8% 0.027 297.3)
200

--color-purple-200

oklch(88.4% 0.053 297.4)
300

--color-purple-300

oklch(80.6% 0.082 297.2)
400

--color-purple-400

oklch(71.4% 0.108 297.3)
500

--color-purple-500

oklch(62% 0.127 297.2)
600

--color-purple-600

oklch(55.2% 0.116 297.2)
700

--color-purple-700

oklch(48.3% 0.099 297.4)
800

--color-purple-800

oklch(40.5% 0.079 297.5)
900

--color-purple-900

oklch(34.3% 0.058 297.2)
950

--color-purple-950

oklch(29.8% 0.04 296.4)

Fuchsia

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.1% 0.135 305.3)

50

--color-fuchsia-50

oklch(96.8% 0.015 306.4)
100

--color-fuchsia-100

oklch(93.6% 0.03 307.1)
200

--color-fuchsia-200

oklch(88.4% 0.056 305)
300

--color-fuchsia-300

oklch(80.7% 0.087 305.4)
400

--color-fuchsia-400

oklch(71.4% 0.114 304.8)
500

--color-fuchsia-500

oklch(62.1% 0.135 305.3)
600

--color-fuchsia-600

oklch(55.1% 0.123 305.2)
700

--color-fuchsia-700

oklch(48.1% 0.105 305.1)
800

--color-fuchsia-800

oklch(40.5% 0.084 305.5)
900

--color-fuchsia-900

oklch(34.3% 0.061 305)
950

--color-fuchsia-950

oklch(29.9% 0.043 303.9)

Pink

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.2% 0.126 346.5)

50

--color-pink-50

oklch(96.7% 0.016 347.6)
100

--color-pink-100

oklch(93.7% 0.028 345.9)
200

--color-pink-200

oklch(88.3% 0.053 346)
300

--color-pink-300

oklch(80.5% 0.083 345.5)
400

--color-pink-400

oklch(71.2% 0.109 345.6)
500

--color-pink-500

oklch(62.2% 0.126 346.5)
600

--color-pink-600

oklch(55.2% 0.118 346.4)
700

--color-pink-700

oklch(48.1% 0.099 345.8)
800

--color-pink-800

oklch(40.5% 0.079 345.9)
900

--color-pink-900

oklch(34.3% 0.057 345.9)
950

--color-pink-950

oklch(29.8% 0.041 344.9)

Rose

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.1% 0.142 352.2)

50

--color-rose-50

oklch(96.8% 0.016 353.6)
100

--color-rose-100

oklch(93.7% 0.031 352.4)
200

--color-rose-200

oklch(88.3% 0.059 352.7)
300

--color-rose-300

oklch(80.6% 0.093 351.9)
400

--color-rose-400

oklch(71.4% 0.12 352.4)
500

--color-rose-500

oklch(62.1% 0.142 352.2)
600

--color-rose-600

oklch(55.2% 0.129 351.9)
700

--color-rose-700

oklch(48.3% 0.11 352)
800
- danger
--color-rose-800

oklch(40.5% 0.088 352)
900

--color-rose-900

oklch(34.4% 0.064 352.6)
950

--color-rose-950

oklch(29.7% 0.047 351)

Slate

Neutral

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62% 0.015 286)

50

--color-slate-50

oklch(96.7% 0.015 286.1)
100

--color-slate-100

oklch(93.7% 0.015 286.1)
200

--color-slate-200

oklch(88.2% 0.015 286.1)
300

--color-slate-300

oklch(80.5% 0.015 286.1)
400

--color-slate-400

oklch(71.2% 0.016 286)
500

--color-slate-500

oklch(62% 0.015 286)
600

--color-slate-600

oklch(55.2% 0.015 285.9)
700

--color-slate-700

oklch(48.2% 0.016 285.8)
800

--color-slate-800

oklch(40.5% 0.015 285.7)
900

--color-slate-900

oklch(34.4% 0.016 285.6)
950

--color-slate-950

oklch(29.7% 0.016 285.4)

Gray

Neutral

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.1% 0.004 197.1)

50

--color-gray-50

oklch(96.8% 0.003 197.1)
100

--color-gray-100

oklch(93.8% 0.003 197.1)
200

--color-gray-200

oklch(88.3% 0.003 197.1)
300

--color-gray-300

oklch(80.5% 0.003 197.1)
400

--color-gray-400

oklch(71.3% 0.003 197.1)
500

--color-gray-500

oklch(62.1% 0.004 197.1)
600

--color-gray-600

oklch(55.3% 0.004 197.1)
700

--color-gray-700

oklch(48.3% 0.004 197)
800

--color-gray-800

oklch(40.6% 0.004 197)
900

--color-gray-900

oklch(34.3% 0.003 197)
950

--color-gray-950

oklch(29.9% 0.003 197)

Zinc

Neutral

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.2% 0.007 286.2)

50

--color-zinc-50

oklch(96.9% 0.008 286.3)
100

--color-zinc-100

oklch(93.6% 0.008 286.2)
200

--color-zinc-200

oklch(88.4% 0.007 286.3)
300

--color-zinc-300

oklch(80.6% 0.008 286.2)
400

--color-zinc-400

oklch(71.4% 0.007 286.2)
500

--color-zinc-500

oklch(62.2% 0.007 286.2)
600

--color-zinc-600

oklch(55.1% 0.009 286.1)
700

--color-zinc-700

oklch(48.4% 0.008 286.1)
800

--color-zinc-800

oklch(40.7% 0.007 286.1)
900

--color-zinc-900

oklch(34.3% 0.009 285.9)
950

--color-zinc-950

oklch(29.9% 0.007 286)

Neutral

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(62.2% 0.006 106.6)

50

--color-neutral-50

oklch(96.9% 0.007 106.5)
100

--color-neutral-100

oklch(93.6% 0.005 106.5)
200

--color-neutral-200

oklch(88.4% 0.007 106.5)
300

--color-neutral-300

oklch(80.6% 0.007 106.6)
400

--color-neutral-400

oklch(71.4% 0.006 106.5)
500

--color-neutral-500

oklch(62.2% 0.006 106.6)
600

--color-neutral-600

oklch(55.1% 0.006 106.6)
700

--color-neutral-700

oklch(48.4% 0.006 106.6)
800

--color-neutral-800

oklch(40.4% 0.005 106.6)
900

--color-neutral-900

oklch(34.4% 0.005 106.7)
950

--color-neutral-950

oklch(29.6% 0.005 106.7)

Stone

Neutral

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(62.1% 0.012 106.7)

50

--color-stone-50

oklch(96.8% 0.012 106.6)
100

--color-stone-100

oklch(93.8% 0.012 106.6)
200

--color-stone-200

oklch(88.3% 0.012 106.6)
300

--color-stone-300

oklch(80.5% 0.012 106.7)
400

--color-stone-400

oklch(71.3% 0.011 106.7)
500

--color-stone-500

oklch(62.1% 0.012 106.7)
600

--color-stone-600

oklch(55.3% 0.012 106.8)
700

--color-stone-700

oklch(48.3% 0.013 106.9)
800

--color-stone-800

oklch(40.6% 0.013 107)
900

--color-stone-900

oklch(34.3% 0.012 100.3)
950

--color-stone-950

oklch(29.9% 0.012 107.1)

Ink

Anchor

n=1 · 0° · 1/1 ratio = Unison · oklch(22.1% 0.04 218.1)

50

--color-ink-50

oklch(96.7% 0.029 210)
100

--color-ink-100

oklch(93.6% 0.03 220.6)
200

--color-ink-200

oklch(88.3% 0.031 217.5)
300

--color-ink-300

oklch(80.7% 0.03 218.3)
400

--color-ink-400

oklch(71.4% 0.031 215.8)
500

--color-ink-500

oklch(62.1% 0.03 220)
600

--color-ink-600

oklch(55.3% 0.03 217.4)
700

--color-ink-700

oklch(48.3% 0.031 217.6)
800

--color-ink-800

oklch(40.5% 0.03 219.5)
900

--color-ink-900

oklch(34.4% 0.03 216.7)
★
950
- text
--color-ink-950

oklch(22.1% 0.04 218.1)

Typography

H1 through caption, shown across every authored weight with the ratio math exposed.

H1

step 7

57.33px

weight 200

KBPD-AI / DUSK / MAKE

weight 250

KBPD-AI / DUSK / MAKE

weight 280

KBPD-AI / DUSK / MAKE

weight 300

KBPD-AI / DUSK / MAKE

weight 320

KBPD-AI / DUSK / MAKE

weight 400

KBPD-AI / DUSK / MAKE

weight 500

KBPD-AI / DUSK / MAKE

weight 700

KBPD-AI / DUSK / MAKE
H2

step 6

47.78px

weight 200

Specimen typography cadence

weight 250

Specimen typography cadence

weight 280

Specimen typography cadence

weight 300

Specimen typography cadence

weight 320

Specimen typography cadence

weight 400

Specimen typography cadence

weight 500

Specimen typography cadence

weight 700

Specimen typography cadence
H3

step 5

39.81px

weight 200

The scale stays visible at every tier.

weight 250

The scale stays visible at every tier.

weight 280

The scale stays visible at every tier.

weight 300

The scale stays visible at every tier.

weight 320

The scale stays visible at every tier.

weight 400

The scale stays visible at every tier.

weight 500

The scale stays visible at every tier.

weight 700

The scale stays visible at every tier.
H4

step 4

33.18px

weight 200

Display transitions into interface heading.

weight 250

Display transitions into interface heading.

weight 280

Display transitions into interface heading.

weight 300

Display transitions into interface heading.

weight 320

Display transitions into interface heading.

weight 400

Display transitions into interface heading.

weight 500

Display transitions into interface heading.

weight 700

Display transitions into interface heading.
H5

step 3

27.65px

weight 200

Section headers keep the same proportional rhythm.

weight 250

Section headers keep the same proportional rhythm.

weight 280

Section headers keep the same proportional rhythm.

weight 300

Section headers keep the same proportional rhythm.

weight 320

Section headers keep the same proportional rhythm.

weight 400

Section headers keep the same proportional rhythm.

weight 500

Section headers keep the same proportional rhythm.

weight 700

Section headers keep the same proportional rhythm.
H6

step 2

23.04px

weight 200

Utility labels stay anchored to the ratio.

weight 250

Utility labels stay anchored to the ratio.

weight 280

Utility labels stay anchored to the ratio.

weight 300

Utility labels stay anchored to the ratio.

weight 320

Utility labels stay anchored to the ratio.

weight 400

Utility labels stay anchored to the ratio.

weight 500

Utility labels stay anchored to the ratio.

weight 700

Utility labels stay anchored to the ratio.
Body

step 0

16px

weight 200

Completion. The day's harvest. The made thing handed over.

weight 250

Completion. The day's harvest. The made thing handed over.

weight 280

Completion. The day's harvest. The made thing handed over.

weight 300

Completion. The day's harvest. The made thing handed over.

weight 320

Completion. The day's harvest. The made thing handed over.

weight 400

Completion. The day's harvest. The made thing handed over.

weight 500

Completion. The day's harvest. The made thing handed over.

weight 700

Completion. The day's harvest. The made thing handed over.
Console

step -1

13.33px

weight 200

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

weight 250

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

weight 280

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

weight 300

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

weight 320

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

weight 400

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

weight 500

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

weight 700

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

Generated Formal Composition

H1: --font-family-serif; --font-size-5; --type-display-weight; --line-height-tight
H2: --font-family-serif; --font-size-4; --type-heading-weight; --line-height-snug
H3: --font-family-serif; --font-size-2; --type-copy-weight; --line-height-relaxed
H4 / Console: --font-family-ui; calc(var(--font-size-base) / var(--type-ratio)); --type-ui-weight; --type-ui-line-height
Body: --font-family-serif; --font-size-base; --type-copy-weight; --line-height-relaxed
Smaller body: --font-family-serif; calc(var(--font-size-base) / var(--type-ratio)); --type-copy-weight; --line-height-snug

Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Components

Product primitives for KBPD-AI / DUSK / MAKE, rendered under pointer and touch contexts with source-bound state styling.

Design-source contract: Named tiers, CSS variables, and semantic aliases before component styling.
Component ownership: shadcn-style copy-owned primitives: the site owns the markup and styling rather than fighting a themed library.
Interaction model: Native HTML now; complex menus/dialogs should graduate to Ark/Zag state machines before reuse in client apps.
Specimen discipline: Storybook-style state matrix: every primitive shows rest, hover, focus, active, mobile, and source provenance.

Rest

Hover

Focus

Active

Rest

Hover

Rest

Focus

Default surface

Weekend dues

Editorial warmth stays quiet on standard surfaces so the content keeps the focus.

Elevated surface

Milestone reached

Elevation steps forward for payment confirmations, nudges, and earned celebrations.

Trip name Default text field Contribution note Focused sample Invite code Disabled sample Goal amount Goal must stay above total contributions

Line item	Status	Amount
Palm Springs House	Confirmed	$780
Airport SUV	Pending	$240
Poolside Dinner	Paid	$315
Welcome Bags	Tracked	$180

Lead contributors
Booked items
Pending invites
Goal remaining
Celebration budget

Motion personality

Motion is a brand system, not a footnote.

Signature keyframe continuous with easing --motion-easing-default.

Timing rails

Four kinetic lanes map the brand from touch response up through ambient pacing.

Fast rail

Micro-touch responses for hover, focus, and press.

--motion-duration-fast

Hover or focus to preview this rail.

Base rail

Standard component transitions and disclosure beats.

--motion-duration-base

Hover or focus to preview this rail.

Slow rail

Panel lifts, emphasis shifts, and celebratory follow-through.

--motion-duration-slow

Hover or focus to preview this rail.

Slower rail

Ambient loops and choreography that should never feel twitchy.

calc(--motion-duration-slow + --motion-duration-base)

Hover or focus to preview this rail.

Easing curve

The default easing is visualized directly from the brand fixture and applied to the sample puck.

Default easing

cubic-bezier(0.16, 1, 0.3, 1)

Control handles 16 0 and 30 0.

Hover and focus micro-transitions

Compact responses show how the brand handles touch, hover, and focus without over-speaking.

Card response Leaderboard pulse Focus or hover to feel the card lift and deepen. Contribution amount

Transition primitives

Drawer, toast, and menu reveal are CSS-only primitives bound to the same timing and easing rails.

Drawer slide

Toast enter / exit

Contribution saved Toast inherits the brand's response tempo.

Menu reveal

Signature keyframe

The specimen chooses a signature movement from the brand motion name and falls back to a calm breathe when no explicit signature exists.

Signature: continuous

Stagger and choreography

Five linked beats enter on a shared ratio-derived sequence so the cadence feels authored rather than simultaneous.

Sequence step uses --motion-stagger-step.

Interaction beats

The full loop runs through button press, card response, toast confirmation, and a brief celebration burst.

Idle-state motion

A restrained ambient loop keeps the surface alive without looking busy or distracting from content.

Motion hierarchy

Primary, secondary, and tertiary tones form a readable kinetic scale in the same way typography forms a type scale.

Primary motion --motion-duration-base

Reserved for the main state change that asks for attention.

Secondary motion --motion-duration-fast

Supports the primary beat without competing for emphasis.

Tertiary motion --motion-duration-slow

Ambient reinforcement and idle feedback under the surface.

Harmonic Palette Method

Palette

Full harmonic ramp bound to emitted --color-<family>-<stop> tokens: 24 families, 11 stops, 264 visible swatches per brand.

Fundamental

KBPD-AI / Master (all brand hues)

oklch(54.9% 0.22 345.9) · tuning 0.6

Harmonics surface as overtone annotations on every family row so the proof point reads as wave-derived, not hand-curated.

Semantic anchors

surface

paper-50

semantic.surface

surface contrast 1:1
text

ink-950

semantic.text

surface contrast 16.68:1
brand

rose-600

semantic.brand

surface contrast 5.22:1
highlight

rose-600

derived highlight

surface contrast 5.22:1
success

green-800

derived success

surface contrast 8.24:1
danger

rose-800

derived danger

surface contrast 9.39:1

Primary pairings

Surface vs Text

paper-50 vs ink-950

WCAG 2.2 AA pass · AAA pass · 16.68:1
Surface vs Brand

paper-50 vs rose-600

WCAG 2.2 AA pass · AAA fail · 5.22:1
Surface vs Highlight

paper-50 vs rose-600

WCAG 2.2 AA pass · AAA fail · 5.22:1
Surface vs Success

paper-50 vs green-800

WCAG 2.2 AA pass · AAA pass · 8.24:1
Surface vs Danger

paper-50 vs rose-800

WCAG 2.2 AA pass · AAA pass · 9.39:1

Filter family

24 families visible

Paper

Anchor

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(99.1% 0.003 106.4)

★
50
- surface
--color-paper-50

oklch(99.1% 0.003 106.4)
100

--color-paper-100

oklch(93.6% 0.004 106.5)
200

--color-paper-200

oklch(88.1% 0.004 106.5)
300

--color-paper-300

oklch(80.7% 0.004 106.5)
400

--color-paper-400

oklch(71.5% 0.004 106.5)
500

--color-paper-500

oklch(62.2% 0.004 106.5)
600

--color-paper-600

oklch(55.1% 0.003 106.5)
700

--color-paper-700

oklch(48.1% 0.003 106.5)
800

--color-paper-800

oklch(40.5% 0.003 106.5)
900

--color-paper-900

oklch(34.4% 0.003 106.6)
950

--color-paper-950

oklch(29.6% 0.004 106.6)

Red

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.2% 0.217 35.2)

50

--color-red-50

oklch(96.3% 0.02 45.3)
100

--color-red-100

oklch(92.9% 0.039 44.1)
200

--color-red-200

oklch(86.7% 0.075 43.2)
300

--color-red-300

oklch(78.9% 0.127 40.3)
400

--color-red-400

oklch(71.2% 0.186 38.5)
500

--color-red-500

oklch(62.2% 0.217 35.2)
600

--color-red-600

oklch(55.3% 0.198 34.1)
700

--color-red-700

oklch(48.4% 0.17 35)
800

--color-red-800

oklch(40.5% 0.135 37.1)
900

--color-red-900

oklch(34.4% 0.1 37.9)
950

--color-red-950

oklch(29.9% 0.07 38.5)

Orange

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.3% 0.194 40.4)

50

--color-orange-50

oklch(96.4% 0.021 56.1)
100

--color-orange-100

oklch(93.2% 0.041 55.4)
200

--color-orange-200

oklch(87.3% 0.079 54.6)
300

--color-orange-300

oklch(79.8% 0.13 52)
400

--color-orange-400

oklch(71.4% 0.178 50.4)
500

--color-orange-500

oklch(62.3% 0.194 40.4)
600

--color-orange-600

oklch(55.5% 0.178 39)
700

--color-orange-700

oklch(48.5% 0.152 40)
800

--color-orange-800

oklch(40.8% 0.122 42.4)
900

--color-orange-900

oklch(34.6% 0.093 49)
950

--color-orange-950

oklch(29.8% 0.067 51)

Amber

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.8% 0.131 78.3)

50

--color-amber-50

oklch(96.7% 0.023 90.7)
100

--color-amber-100

oklch(93.8% 0.044 91.3)
200

--color-amber-200

oklch(88.3% 0.083 90.8)
300

--color-amber-300

oklch(80.5% 0.129 91.3)
400

--color-amber-400

oklch(71.6% 0.146 87.4)
500

--color-amber-500

oklch(62.8% 0.131 78.3)
600

--color-amber-600

oklch(55.8% 0.117 76.7)
700

--color-amber-700

oklch(48.8% 0.102 77.8)
800

--color-amber-800

oklch(40.9% 0.085 80)
900

--color-amber-900

oklch(34.6% 0.071 85.5)
950

--color-amber-950

oklch(29.7% 0.061 89.4)

Yellow

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.8% 0.128 92.3)

50

--color-yellow-50

oklch(96.8% 0.023 98.6)
100

--color-yellow-100

oklch(93.6% 0.041 99.6)
200

--color-yellow-200

oklch(88.3% 0.078 99)
300

--color-yellow-300

oklch(80.6% 0.122 99.2)
400

--color-yellow-400

oklch(71.6% 0.148 98.1)
500

--color-yellow-500

oklch(62.8% 0.128 92.3)
600

--color-yellow-600

oklch(55.6% 0.114 91.4)
700

--color-yellow-700

oklch(48.7% 0.1 92)
800

--color-yellow-800

oklch(40.7% 0.083 93.4)
900

--color-yellow-900

oklch(34.6% 0.071 97)
950

--color-yellow-950

oklch(29.7% 0.059 98.2)

Lime

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.5% 0.137 110.3)

50

--color-lime-50

oklch(96.7% 0.022 112.3)
100

--color-lime-100

oklch(93.6% 0.041 110.2)
200

--color-lime-200

oklch(88.3% 0.078 111.1)
300

--color-lime-300

oklch(80.6% 0.122 110.9)
400

--color-lime-400

oklch(71.5% 0.157 111)
500

--color-lime-500

oklch(62.5% 0.137 110.3)
600

--color-lime-600

oklch(55.7% 0.122 110.4)
700

--color-lime-700

oklch(48.6% 0.106 110.5)
800

--color-lime-800

oklch(40.9% 0.09 110.6)
900

--color-lime-900

oklch(34.4% 0.075 110.8)
950

--color-lime-950

oklch(29.9% 0.06 110.9)

Green

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(62.9% 0.189 146.5)

50

--color-green-50

oklch(96.7% 0.023 149.4)
100

--color-green-100

oklch(93.7% 0.044 148.3)
200

--color-green-200

oklch(88.2% 0.082 149)
300

--color-green-300

oklch(80.7% 0.129 148.8)
400

--color-green-400

oklch(71.2% 0.168 148.8)
500

--color-green-500

oklch(62.9% 0.189 146.5)
600

--color-green-600

oklch(56% 0.172 145.8)
700

--color-green-700

oklch(48.7% 0.146 146.5)
800
- success
--color-green-800

oklch(40.8% 0.12 147.4)
900

--color-green-900

oklch(34.4% 0.089 148.9)
950

--color-green-950

oklch(29.9% 0.063 148.8)

Emerald

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(63.6% 0.176 149.7)

50

--color-emerald-50

oklch(96.7% 0.023 153.5)
100

--color-emerald-100

oklch(93.6% 0.044 154.6)
200

--color-emerald-200

oklch(88.2% 0.083 154.5)
300

--color-emerald-300

oklch(80.6% 0.129 154.5)
400

--color-emerald-400

oklch(71.3% 0.169 154.7)
500

--color-emerald-500

oklch(63.6% 0.176 149.7)
600

--color-emerald-600

oklch(56.8% 0.159 149.2)
700

--color-emerald-700

oklch(49.4% 0.137 149.7)
800

--color-emerald-800

oklch(41.2% 0.111 151)
900

--color-emerald-900

oklch(34.6% 0.087 153.9)
950

--color-emerald-950

oklch(29.7% 0.062 155.3)

Teal

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(65.5% 0.115 185.8)

50

--color-teal-50

oklch(96.8% 0.023 186.9)
100

--color-teal-100

oklch(93.7% 0.042 187.2)
200

--color-teal-200

oklch(88.3% 0.079 187.9)
300

--color-teal-300

oklch(80.7% 0.122 187.7)
400

--color-teal-400

oklch(73% 0.128 186.9)
500

--color-teal-500

oklch(65.5% 0.115 185.8)
600

--color-teal-600

oklch(58.5% 0.103 186.2)
700

--color-teal-700

oklch(50.9% 0.089 185.6)
800

--color-teal-800

oklch(42.4% 0.074 187)
900

--color-teal-900

oklch(35.5% 0.062 186.7)
950

--color-teal-950

oklch(30.3% 0.053 186.9)

Cyan

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(65.3% 0.111 198.6)

50

--color-cyan-50

oklch(96.7% 0.021 196.8)
100

--color-cyan-100

oklch(93.7% 0.039 194.5)
200

--color-cyan-200

oklch(88.2% 0.074 195.9)
300

--color-cyan-300

oklch(80.5% 0.114 195.8)
400

--color-cyan-400

oklch(72.7% 0.124 196.8)
500

--color-cyan-500

oklch(65.3% 0.111 198.6)
600

--color-cyan-600

oklch(58.1% 0.099 199.2)
700

--color-cyan-700

oklch(50.7% 0.086 197.9)
800

--color-cyan-800

oklch(42.4% 0.072 197.4)
900

--color-cyan-900

oklch(35.4% 0.06 196.4)
950

--color-cyan-950

oklch(30.1% 0.051 194.8)

Sky

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(65.6% 0.116 215.2)

50

--color-sky-50

oklch(96.8% 0.022 207.1)
100

--color-sky-100

oklch(93.7% 0.042 205.7)
200

--color-sky-200

oklch(88.3% 0.078 205.9)
300

--color-sky-300

oklch(80.7% 0.122 205.8)
400

--color-sky-400

oklch(73.1% 0.126 209.5)
500

--color-sky-500

oklch(65.6% 0.116 215.2)
600

--color-sky-600

oklch(58.6% 0.104 215.6)
700

--color-sky-700

oklch(51.1% 0.09 214.4)
800

--color-sky-800

oklch(42.6% 0.075 213)
900

--color-sky-900

oklch(35.5% 0.062 211.2)
950

--color-sky-950

oklch(30.1% 0.052 209)

Blue

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(61.5% 0.208 261.2)

50

--color-blue-50

oklch(96.6% 0.017 248)
100

--color-blue-100

oklch(93.3% 0.033 251)
200

--color-blue-200

oklch(87.3% 0.064 251.4)
300

--color-blue-300

oklch(79.3% 0.106 254.5)
400

--color-blue-400

oklch(70.1% 0.158 258.5)
500

--color-blue-500

oklch(61.5% 0.208 261.2)
600

--color-blue-600

oklch(55.2% 0.203 261.8)
700

--color-blue-700

oklch(48.2% 0.172 262)
800

--color-blue-800

oklch(40.7% 0.137 261.9)
900

--color-blue-900

oklch(34.4% 0.1 262)
950

--color-blue-950

oklch(29.8% 0.07 262)

Indigo

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(61.9% 0.205 271.9)

50

--color-indigo-50

oklch(96.6% 0.016 262.8)
100

--color-indigo-100

oklch(93.3% 0.032 266.2)
200

--color-indigo-200

oklch(87.6% 0.06 266.5)
300

--color-indigo-300

oklch(79.4% 0.103 269.4)
400

--color-indigo-400

oklch(70.3% 0.155 271.4)
500

--color-indigo-500

oklch(61.9% 0.205 271.9)
600

--color-indigo-600

oklch(55.2% 0.192 271.8)
700

--color-indigo-700

oklch(48.2% 0.164 272.2)
800

--color-indigo-800

oklch(40.6% 0.13 271.7)
900

--color-indigo-900

oklch(34.3% 0.094 272.6)
950

--color-indigo-950

oklch(29.8% 0.068 272.5)

Violet

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.197 280)

50

--color-violet-50

oklch(96.6% 0.016 278.5)
100

--color-violet-100

oklch(93.5% 0.031 277.9)
200

--color-violet-200

oklch(87.7% 0.061 279)
300

--color-violet-300

oklch(79.8% 0.104 279.5)
400

--color-violet-400

oklch(70.8% 0.156 280.4)
500

--color-violet-500

oklch(62.2% 0.197 280)
600

--color-violet-600

oklch(55.2% 0.182 280.1)
700

--color-violet-700

oklch(48.2% 0.155 279.8)
800

--color-violet-800

oklch(40.4% 0.123 279.9)
900

--color-violet-900

oklch(34.5% 0.089 279.8)
950

--color-violet-950

oklch(29.8% 0.063 279.4)

Purple

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.187 285.6)

50

--color-purple-50

oklch(96.5% 0.017 286.1)
100

--color-purple-100

oklch(93.5% 0.032 285.8)
200

--color-purple-200

oklch(87.9% 0.062 286.1)
300

--color-purple-300

oklch(80.1% 0.105 286.8)
400

--color-purple-400

oklch(71.3% 0.157 285.8)
500

--color-purple-500

oklch(62.2% 0.187 285.6)
600

--color-purple-600

oklch(55.2% 0.172 286)
700

--color-purple-700

oklch(48.3% 0.145 285.9)
800

--color-purple-800

oklch(40.6% 0.116 286.3)
900

--color-purple-900

oklch(34.4% 0.084 285.8)
950

--color-purple-950

oklch(29.8% 0.061 286.1)

Fuchsia

n=1 · 0° · 1/1 ratio = Unison · oklch(62.2% 0.198 335.5)

50

--color-fuchsia-50

oklch(96.8% 0.023 334.3)
100

--color-fuchsia-100

oklch(93.8% 0.044 335.3)
200

--color-fuchsia-200

oklch(88.2% 0.083 335.4)
300

--color-fuchsia-300

oklch(80.6% 0.129 335.3)
400

--color-fuchsia-400

oklch(71.3% 0.169 335.4)
500

--color-fuchsia-500

oklch(62.2% 0.198 335.5)
600

--color-fuchsia-600

oklch(55.3% 0.182 335.8)
700

--color-fuchsia-700

oklch(48.2% 0.154 335.6)
800

--color-fuchsia-800

oklch(40.4% 0.123 335.5)
900

--color-fuchsia-900

oklch(34.3% 0.09 335)
950

--color-fuchsia-950

oklch(29.7% 0.062 335.7)

Pink

n=1 · 0° · 1/1 ratio = Unison · oklch(62.1% 0.188 343.4)

50

--color-pink-50

oklch(96.7% 0.021 342.5)
100

--color-pink-100

oklch(93.7% 0.041 343.7)
200

--color-pink-200

oklch(88.3% 0.08 343.4)
300

--color-pink-300

oklch(80.6% 0.122 343.9)
400

--color-pink-400

oklch(71.3% 0.159 343.3)
500

--color-pink-500

oklch(62.1% 0.188 343.4)
600

--color-pink-600

oklch(55.1% 0.172 343.5)
700

--color-pink-700

oklch(48.2% 0.146 343.3)
800

--color-pink-800

oklch(40.6% 0.117 343.5)
900

--color-pink-900

oklch(34.5% 0.084 343.6)
950

--color-pink-950

oklch(29.8% 0.061 343.6)

Rose

n=1 · 0° · 1/1 ratio = Unison · oklch(62.1% 0.209 349.5)

50

--color-rose-50

oklch(96.5% 0.022 344.2)
100

--color-rose-100

oklch(93.3% 0.042 345.5)
200

--color-rose-200

oklch(87.6% 0.081 346.6)
300

--color-rose-300

oklch(80.5% 0.134 348.9)
400

--color-rose-400

oklch(71.4% 0.179 349.6)
500

--color-rose-500

oklch(62.1% 0.209 349.5)
★
600
- brand
- highlight
--color-rose-600

oklch(55.2% 0.193 349.3)
700

--color-rose-700

oklch(48.3% 0.163 349.4)
800
- danger
--color-rose-800

oklch(40.6% 0.129 350)
900

--color-rose-900

oklch(34.4% 0.095 349.6)
950

--color-rose-950

oklch(29.8% 0.066 349.8)

Slate

Neutral

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62% 0.015 286)

50

--color-slate-50

oklch(96.7% 0.015 286.1)
100

--color-slate-100

oklch(93.7% 0.015 286.1)
200

--color-slate-200

oklch(88.2% 0.015 286.1)
300

--color-slate-300

oklch(80.5% 0.015 286.1)
400

--color-slate-400

oklch(71.2% 0.016 286)
500

--color-slate-500

oklch(62% 0.015 286)
600

--color-slate-600

oklch(55.2% 0.015 285.9)
700

--color-slate-700

oklch(48.2% 0.016 285.8)
800

--color-slate-800

oklch(40.5% 0.015 285.7)
900

--color-slate-900

oklch(34.4% 0.016 285.6)
950

--color-slate-950

oklch(29.7% 0.016 285.4)

Gray

Neutral

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(62.1% 0.004 197.1)

50

--color-gray-50

oklch(96.8% 0.003 197.1)
100

--color-gray-100

oklch(93.8% 0.003 197.1)
200

--color-gray-200

oklch(88.3% 0.003 197.1)
300

--color-gray-300

oklch(80.5% 0.003 197.1)
400

--color-gray-400

oklch(71.3% 0.003 197.1)
500

--color-gray-500

oklch(62.1% 0.004 197.1)
600

--color-gray-600

oklch(55.3% 0.004 197.1)
700

--color-gray-700

oklch(48.3% 0.004 197)
800

--color-gray-800

oklch(40.6% 0.004 197)
900

--color-gray-900

oklch(34.3% 0.003 197)
950

--color-gray-950

oklch(29.9% 0.003 197)

Zinc

Neutral

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.007 286.2)

50

--color-zinc-50

oklch(96.9% 0.008 286.3)
100

--color-zinc-100

oklch(93.6% 0.008 286.2)
200

--color-zinc-200

oklch(88.4% 0.007 286.3)
300

--color-zinc-300

oklch(80.6% 0.008 286.2)
400

--color-zinc-400

oklch(71.4% 0.007 286.2)
500

--color-zinc-500

oklch(62.2% 0.007 286.2)
600

--color-zinc-600

oklch(55.1% 0.009 286.1)
700

--color-zinc-700

oklch(48.4% 0.008 286.1)
800

--color-zinc-800

oklch(40.7% 0.007 286.1)
900

--color-zinc-900

oklch(34.3% 0.009 285.9)
950

--color-zinc-950

oklch(29.9% 0.007 286)

Neutral

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.2% 0.006 106.6)

50

--color-neutral-50

oklch(96.9% 0.007 106.5)
100

--color-neutral-100

oklch(93.6% 0.005 106.5)
200

--color-neutral-200

oklch(88.4% 0.007 106.5)
300

--color-neutral-300

oklch(80.6% 0.007 106.6)
400

--color-neutral-400

oklch(71.4% 0.006 106.5)
500

--color-neutral-500

oklch(62.2% 0.006 106.6)
600

--color-neutral-600

oklch(55.1% 0.006 106.6)
700

--color-neutral-700

oklch(48.4% 0.006 106.6)
800

--color-neutral-800

oklch(40.4% 0.005 106.6)
900

--color-neutral-900

oklch(34.4% 0.005 106.7)
950

--color-neutral-950

oklch(29.6% 0.005 106.7)

Stone

Neutral

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.1% 0.012 106.7)

50

--color-stone-50

oklch(96.8% 0.012 106.6)
100

--color-stone-100

oklch(93.8% 0.012 106.6)
200

--color-stone-200

oklch(88.3% 0.012 106.6)
300

--color-stone-300

oklch(80.5% 0.012 106.7)
400

--color-stone-400

oklch(71.3% 0.011 106.7)
500

--color-stone-500

oklch(62.1% 0.012 106.7)
600

--color-stone-600

oklch(55.3% 0.012 106.8)
700

--color-stone-700

oklch(48.3% 0.013 106.9)
800

--color-stone-800

oklch(40.6% 0.013 107)
900

--color-stone-900

oklch(34.3% 0.012 100.3)
950

--color-stone-950

oklch(29.9% 0.012 107.1)

Ink

Anchor

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(22.1% 0.04 218.1)

50

--color-ink-50

oklch(96.7% 0.029 210)
100

--color-ink-100

oklch(93.6% 0.03 220.6)
200

--color-ink-200

oklch(88.3% 0.031 217.5)
300

--color-ink-300

oklch(80.7% 0.03 218.3)
400

--color-ink-400

oklch(71.4% 0.031 215.8)
500

--color-ink-500

oklch(62.1% 0.03 220)
600

--color-ink-600

oklch(55.3% 0.03 217.4)
700

--color-ink-700

oklch(48.3% 0.031 217.6)
800

--color-ink-800

oklch(40.5% 0.03 219.5)
900

--color-ink-900

oklch(34.4% 0.03 216.7)
★
950
- text
--color-ink-950

oklch(22.1% 0.04 218.1)

Typography

H1 through caption, shown across every authored weight with the ratio math exposed.

H1

step 7

57.33px

weight 200

KBPD-AI / Master (all brand hues)

weight 250

KBPD-AI / Master (all brand hues)

weight 280

KBPD-AI / Master (all brand hues)

weight 300

KBPD-AI / Master (all brand hues)

weight 320

KBPD-AI / Master (all brand hues)

weight 400

KBPD-AI / Master (all brand hues)

weight 500

KBPD-AI / Master (all brand hues)

weight 700

KBPD-AI / Master (all brand hues)
H2

step 6

47.78px

weight 200

Specimen typography cadence

weight 250

Specimen typography cadence

weight 280

Specimen typography cadence

weight 300

Specimen typography cadence

weight 320

Specimen typography cadence

weight 400

Specimen typography cadence

weight 500

Specimen typography cadence

weight 700

Specimen typography cadence
H3

step 5

39.81px

weight 200

The scale stays visible at every tier.

weight 250

The scale stays visible at every tier.

weight 280

The scale stays visible at every tier.

weight 300

The scale stays visible at every tier.

weight 320

The scale stays visible at every tier.

weight 400

The scale stays visible at every tier.

weight 500

The scale stays visible at every tier.

weight 700

The scale stays visible at every tier.
H4

step 4

33.18px

weight 200

Display transitions into interface heading.

weight 250

Display transitions into interface heading.

weight 280

Display transitions into interface heading.

weight 300

Display transitions into interface heading.

weight 320

Display transitions into interface heading.

weight 400

Display transitions into interface heading.

weight 500

Display transitions into interface heading.

weight 700

Display transitions into interface heading.
H5

step 3

27.65px

weight 200

Section headers keep the same proportional rhythm.

weight 250

Section headers keep the same proportional rhythm.

weight 280

Section headers keep the same proportional rhythm.

weight 300

Section headers keep the same proportional rhythm.

weight 320

Section headers keep the same proportional rhythm.

weight 400

Section headers keep the same proportional rhythm.

weight 500

Section headers keep the same proportional rhythm.

weight 700

Section headers keep the same proportional rhythm.
H6

step 2

23.04px

weight 200

Utility labels stay anchored to the ratio.

weight 250

Utility labels stay anchored to the ratio.

weight 280

Utility labels stay anchored to the ratio.

weight 300

Utility labels stay anchored to the ratio.

weight 320

Utility labels stay anchored to the ratio.

weight 400

Utility labels stay anchored to the ratio.

weight 500

Utility labels stay anchored to the ratio.

weight 700

Utility labels stay anchored to the ratio.
Body

step 0

16px

weight 200

Master palette — all 7 authored brand_hues

weight 250

Master palette — all 7 authored brand_hues

weight 280

Master palette — all 7 authored brand_hues

weight 300

Master palette — all 7 authored brand_hues

weight 320

Master palette — all 7 authored brand_hues

weight 400

Master palette — all 7 authored brand_hues

weight 500

Master palette — all 7 authored brand_hues

weight 700

Master palette — all 7 authored brand_hues
Console

step -1

13.33px

weight 200

kbpd-ai brand canon — complete hue set for design-system reference

weight 250

kbpd-ai brand canon — complete hue set for design-system reference

weight 280

kbpd-ai brand canon — complete hue set for design-system reference

weight 300

kbpd-ai brand canon — complete hue set for design-system reference

weight 320

kbpd-ai brand canon — complete hue set for design-system reference

weight 400

kbpd-ai brand canon — complete hue set for design-system reference

weight 500

kbpd-ai brand canon — complete hue set for design-system reference

weight 700

kbpd-ai brand canon — complete hue set for design-system reference

Generated Formal Composition

H1: --font-family-serif; --font-size-5; --type-display-weight; --line-height-tight
H2: --font-family-serif; --font-size-4; --type-heading-weight; --line-height-snug
H3: --font-family-serif; --font-size-2; --type-copy-weight; --line-height-relaxed
H4 / Console: --font-family-ui; calc(var(--font-size-base) / var(--type-ratio)); --type-ui-weight; --type-ui-line-height
Body: --font-family-serif; --font-size-base; --type-copy-weight; --line-height-relaxed
Smaller body: --font-family-serif; calc(var(--font-size-base) / var(--type-ratio)); --type-copy-weight; --line-height-snug

Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Spacing Rhythm

Spacing

The scale renders as a visual beat map: each bar is sized directly from its emitted --space-* token, and the cadence callout surfaces whether spacing and type share the same proportional ratio.

Spacing ratio: 1.5

Type ratio: 1.5

Shared polyrhythm: spacing and type both run at 1.5.

--space-1 2px x0.25 baseline subdivision x0.25
--space-2 4px x0.5 baseline subdivision x0.5
--space-3 8px x1 baseline baseline pulse
--space-4 12px x1.5 baseline syncopated pulse x1.5
--space-5 16px x2 baseline measure multiple x2
--space-6 24px x3 baseline measure multiple x3
--space-7 32px x4 baseline measure multiple x4
--space-8 48px x6 baseline measure multiple x6
--space-9 64px x8 baseline measure multiple x8
--space-10 96px x12 baseline measure multiple x12

Edge language

Radii

Each sample box applies the emitted radius rule directly so the corner system can be compared as shape vocabulary rather than abstract numbers.

Elevation hierarchy

Shadows

The cards below step upward through the emitted shadow tokens so the elevation ladder reads in context, not as isolated shadow strings.

Motion personality

Motion is a brand system, not a footnote.

Signature keyframe continuous with easing --motion-easing-default.

Timing rails

Four kinetic lanes map the brand from touch response up through ambient pacing.

Fast rail

Micro-touch responses for hover, focus, and press.

--motion-duration-fast

Hover or focus to preview this rail.

Base rail

Standard component transitions and disclosure beats.

--motion-duration-base

Hover or focus to preview this rail.

Slow rail

Panel lifts, emphasis shifts, and celebratory follow-through.

--motion-duration-slow

Hover or focus to preview this rail.

Slower rail

Ambient loops and choreography that should never feel twitchy.

calc(--motion-duration-slow + --motion-duration-base)

Hover or focus to preview this rail.

Easing curve

The default easing is visualized directly from the brand fixture and applied to the sample puck.

Default easing

cubic-bezier(0.16, 1, 0.3, 1)

Control handles 16 0 and 30 0.

Hover and focus micro-transitions

Compact responses show how the brand handles touch, hover, and focus without over-speaking.

Card response Leaderboard pulse Focus or hover to feel the card lift and deepen. Contribution amount

Transition primitives

Drawer, toast, and menu reveal are CSS-only primitives bound to the same timing and easing rails.

Drawer slide

Toast enter / exit

Contribution saved Toast inherits the brand's response tempo.

Menu reveal

Signature keyframe

The specimen chooses a signature movement from the brand motion name and falls back to a calm breathe when no explicit signature exists.

Signature: continuous

Stagger and choreography

Five linked beats enter on a shared ratio-derived sequence so the cadence feels authored rather than simultaneous.

Sequence step uses --motion-stagger-step.

Interaction beats

The full loop runs through button press, card response, toast confirmation, and a brief celebration burst.

Idle-state motion

A restrained ambient loop keeps the surface alive without looking busy or distracting from content.

Motion hierarchy

Primary, secondary, and tertiary tones form a readable kinetic scale in the same way typography forms a type scale.

Primary motion --motion-duration-base

Reserved for the main state change that asks for attention.

Secondary motion --motion-duration-fast

Supports the primary beat without competing for emphasis.

Tertiary motion --motion-duration-slow

Ambient reinforcement and idle feedback under the surface.

Components

Product primitives for KBPD-AI / Master (all brand hues), rendered under pointer and touch contexts with source-bound state styling.

Design-source contract: Named tiers, CSS variables, and semantic aliases before component styling.
Component ownership: shadcn-style copy-owned primitives: the site owns the markup and styling rather than fighting a themed library.
Interaction model: Native HTML now; complex menus/dialogs should graduate to Ark/Zag state machines before reuse in client apps.
Specimen discipline: Storybook-style state matrix: every primitive shows rest, hover, focus, active, mobile, and source provenance.

Rest

Hover

Focus

Active

Rest

Hover

Rest

Focus

Default surface

Weekend dues

Editorial warmth stays quiet on standard surfaces so the content keeps the focus.

Elevated surface

Milestone reached

Elevation steps forward for payment confirmations, nudges, and earned celebrations.

Trip name Default text field Contribution note Focused sample Invite code Disabled sample Goal amount Goal must stay above total contributions

Line item	Status	Amount
Palm Springs House	Confirmed	$780
Airport SUV	Pending	$240
Poolside Dinner	Paid	$315
Welcome Bags	Tracked	$180

Lead contributors
Booked items
Pending invites
Goal remaining
Celebration budget

Sample Surface

A Kitty pool-contribution card and leaderboard fragment, themed for KBPD-AI / Master (all brand hues) and sized for both pointer and touch contexts.

Kitty pool

Kitty Palm Springs House

Master palette — all 7 authored brand_hues

Raised $1,745 Goal $2,400

Pool progress $655 left to close the house fund

Alicia Booked the villa
$640
Maya Covered flights
$585
Jordan Fronted groceries
$520

About

The brand prompt body, rendered from Markdown with the prompt metadata surfaced up front.

Mood: Master palette — all 7 authored brand_hues

Audience: kbpd-ai brand canon — complete hue set for design-system reference

KBPD-AI / Master (all brand hues) — synthesized by orchestrate_ocs.mjs from kbpd-ai primitives

Harmonic Palette Method

Palette

Full harmonic ramp bound to emitted --color-<family>-<stop> tokens: 24 families, 11 stops, 264 visible swatches per brand.

Fundamental

KBPD-AI / DAWN / ASK

oklch(61.4% 0.224 26.9) · tuning 0.6

Harmonics surface as overtone annotations on every family row so the proof point reads as wave-derived, not hand-curated.

Semantic anchors

surface

paper-50

semantic.surface

surface contrast 1:1
text

ink-950

semantic.text

surface contrast 16.68:1
brand

red-500

semantic.brand

surface contrast 3.92:1
highlight

red-500

derived highlight

surface contrast 3.92:1
success

green-800

derived success

surface contrast 8.33:1
danger

red-800

derived danger

surface contrast 9.41:1

Primary pairings

Surface vs Text

paper-50 vs ink-950

WCAG 2.2 AA pass · AAA pass · 16.68:1
Surface vs Brand

paper-50 vs red-500

WCAG 2.2 AA fail · AAA fail · 3.92:1
Surface vs Highlight

paper-50 vs red-500

WCAG 2.2 AA fail · AAA fail · 3.92:1
Surface vs Success

paper-50 vs green-800

WCAG 2.2 AA pass · AAA pass · 8.33:1
Surface vs Danger

paper-50 vs red-800

WCAG 2.2 AA pass · AAA pass · 9.41:1

Filter family

24 families visible

Paper

Anchor

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(99.1% 0.003 106.4)

★
50
- surface
--color-paper-50

oklch(99.1% 0.003 106.4)
100

--color-paper-100

oklch(93.6% 0.004 106.5)
200

--color-paper-200

oklch(88.1% 0.004 106.5)
300

--color-paper-300

oklch(80.7% 0.004 106.5)
400

--color-paper-400

oklch(71.5% 0.004 106.5)
500

--color-paper-500

oklch(62.2% 0.004 106.5)
600

--color-paper-600

oklch(55.1% 0.003 106.5)
700

--color-paper-700

oklch(48.1% 0.003 106.5)
800

--color-paper-800

oklch(40.5% 0.003 106.5)
900

--color-paper-900

oklch(34.4% 0.003 106.6)
950

--color-paper-950

oklch(29.6% 0.004 106.6)

Red

n=1 · 0° · 1/1 ratio = Unison · oklch(62.2% 0.224 26.1)

50

--color-red-50

oklch(96.2% 0.019 29.5)
100

--color-red-100

oklch(92.7% 0.037 28)
200

--color-red-200

oklch(86.5% 0.073 28.1)
300

--color-red-300

oklch(78.4% 0.126 26.8)
400

--color-red-400

oklch(70.7% 0.185 26.3)
★
500
- brand
- highlight
--color-red-500

oklch(62.2% 0.224 26.1)
600

--color-red-600

oklch(55.1% 0.206 26.1)
700

--color-red-700

oklch(48.2% 0.174 26.2)
800
- danger
--color-red-800

oklch(40.5% 0.139 26.4)
900

--color-red-900

oklch(34.4% 0.1 26.3)
950

--color-red-950

oklch(29.8% 0.071 27.2)

Orange

n=1 · 0° · 1/1 ratio = Unison · oklch(62.1% 0.211 36.4)

50

--color-orange-50

oklch(96.3% 0.02 45.3)
100

--color-orange-100

oklch(92.9% 0.038 42.4)
200

--color-orange-200

oklch(87% 0.074 42.6)
300

--color-orange-300

oklch(79.1% 0.125 40)
400

--color-orange-400

oklch(71.4% 0.181 38.1)
500

--color-orange-500

oklch(62.1% 0.211 36.4)
600

--color-orange-600

oklch(55.3% 0.193 35.3)
700

--color-orange-700

oklch(48.4% 0.165 36.3)
800

--color-orange-800

oklch(40.6% 0.133 38.1)
900

--color-orange-900

oklch(34.6% 0.096 38.3)
950

--color-orange-950

oklch(29.7% 0.068 37.8)

Amber

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.7% 0.14 65.9)

50

--color-amber-50

oklch(96.7% 0.024 83.4)
100

--color-amber-100

oklch(93.7% 0.045 82.6)
200

--color-amber-200

oklch(88.3% 0.085 82.8)
300

--color-amber-300

oklch(80.6% 0.131 82.6)
400

--color-amber-400

oklch(71.5% 0.149 77.6)
500

--color-amber-500

oklch(62.7% 0.14 65.9)
600

--color-amber-600

oklch(55.7% 0.126 64.5)
700

--color-amber-700

oklch(48.7% 0.108 66.2)
800

--color-amber-800

oklch(40.8% 0.09 68.1)
900

--color-amber-900

oklch(34.6% 0.073 75.4)
950

--color-amber-950

oklch(29.7% 0.062 80.2)

Yellow

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.6% 0.13 79.4)

50

--color-yellow-50

oklch(96.7% 0.023 90.7)
100

--color-yellow-100

oklch(93.7% 0.042 92.2)
200

--color-yellow-200

oklch(88.3% 0.079 90.7)
300

--color-yellow-300

oklch(80.5% 0.124 91)
400

--color-yellow-400

oklch(71.4% 0.146 88.3)
500

--color-yellow-500

oklch(62.6% 0.13 79.4)
600

--color-yellow-600

oklch(55.6% 0.116 77.9)
700

--color-yellow-700

oklch(48.6% 0.101 78.5)
800

--color-yellow-800

oklch(40.8% 0.084 80.9)
900

--color-yellow-900

oklch(34.6% 0.071 85.5)
950

--color-yellow-950

oklch(29.9% 0.061 91.2)

Lime

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.2% 0.186 136.2)

50

--color-lime-50

oklch(96.8% 0.022 134.9)
100

--color-lime-100

oklch(93.7% 0.042 135.5)
200

--color-lime-200

oklch(88.2% 0.081 135.7)
300

--color-lime-300

oklch(80.6% 0.124 135.9)
400

--color-lime-400

oklch(71.2% 0.162 135.6)
500

--color-lime-500

oklch(62.2% 0.186 136.2)
600

--color-lime-600

oklch(55.3% 0.167 136.8)
700

--color-lime-700

oklch(48.2% 0.144 136.4)
800

--color-lime-800

oklch(40.4% 0.118 135.8)
900

--color-lime-900

oklch(34.3% 0.085 135.8)
950

--color-lime-950

oklch(29.8% 0.061 135.4)

Green

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.1% 0.201 143.7)

50

--color-green-50

oklch(96.8% 0.025 143.5)
100

--color-green-100

oklch(93.6% 0.043 144.2)
200

--color-green-200

oklch(88.4% 0.086 143.8)
300

--color-green-300

oklch(80.5% 0.13 143.7)
400

--color-green-400

oklch(71.3% 0.172 143.7)
500

--color-green-500

oklch(62.1% 0.201 143.7)
600

--color-green-600

oklch(55.2% 0.183 143.2)
700

--color-green-700

oklch(48.2% 0.157 143.7)
800
- success
--color-green-800

oklch(40.5% 0.125 143.6)
900

--color-green-900

oklch(34.3% 0.09 143.6)
950

--color-green-950

oklch(29.7% 0.064 143.8)

Emerald

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.9% 0.189 146.7)

50

--color-emerald-50

oklch(96.7% 0.023 149.4)
100

--color-emerald-100

oklch(93.7% 0.044 150.3)
200

--color-emerald-200

oklch(88.3% 0.085 149.8)
300

--color-emerald-300

oklch(80.5% 0.131 149.6)
400

--color-emerald-400

oklch(71.3% 0.171 149.7)
500

--color-emerald-500

oklch(62.9% 0.189 146.7)
600

--color-emerald-600

oklch(56% 0.171 146.1)
700

--color-emerald-700

oklch(49% 0.147 146.7)
800

--color-emerald-800

oklch(41.1% 0.12 147.6)
900

--color-emerald-900

oklch(34.3% 0.09 149.8)
950

--color-emerald-950

oklch(29.8% 0.064 149.7)

Teal

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(65.6% 0.118 181.7)

50

--color-teal-50

oklch(96.8% 0.024 183.8)
100

--color-teal-100

oklch(93.7% 0.042 185.4)
200

--color-teal-200

oklch(88.3% 0.08 185.9)
300

--color-teal-300

oklch(80.5% 0.123 185.8)
400

--color-teal-400

oklch(72.9% 0.129 184.4)
500

--color-teal-500

oklch(65.6% 0.118 181.7)
600

--color-teal-600

oklch(58.6% 0.105 181.4)
700

--color-teal-700

oklch(51.1% 0.092 181.8)
800

--color-teal-800

oklch(42.6% 0.076 182.2)
900

--color-teal-900

oklch(35.4% 0.063 183.6)
950

--color-teal-950

oklch(30.2% 0.054 183.2)

Cyan

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(65.4% 0.112 194.8)

50

--color-cyan-50

oklch(96.7% 0.021 193.2)
100

--color-cyan-100

oklch(93.7% 0.039 192.6)
200

--color-cyan-200

oklch(88.3% 0.076 192.8)
300

--color-cyan-300

oklch(80.6% 0.117 193.7)
400

--color-cyan-400

oklch(72.8% 0.125 193.4)
500

--color-cyan-500

oklch(65.4% 0.112 194.8)
600

--color-cyan-600

oklch(58.3% 0.099 194.8)
700

--color-cyan-700

oklch(50.9% 0.087 193.7)
800

--color-cyan-800

oklch(42.3% 0.072 194.8)
900

--color-cyan-900

oklch(35.3% 0.06 194.8)
950

--color-cyan-950

oklch(30.1% 0.052 192.8)

Sky

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(64.5% 0.153 242.1)

50

--color-sky-50

oklch(96.8% 0.021 223)
100

--color-sky-100

oklch(93.6% 0.04 227)
200

--color-sky-200

oklch(88.1% 0.077 226.3)
300

--color-sky-300

oklch(80.6% 0.123 229.7)
400

--color-sky-400

oklch(72% 0.151 234.2)
500

--color-sky-500

oklch(64.5% 0.153 242.1)
600

--color-sky-600

oklch(57.4% 0.14 243.5)
700

--color-sky-700

oklch(50% 0.12 242.5)
800

--color-sky-800

oklch(41.9% 0.097 240.6)
900

--color-sky-900

oklch(35.2% 0.076 236.3)
950

--color-sky-950

oklch(29.8% 0.06 231.7)

Blue

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(64.7% 0.188 251)

50

--color-blue-50

oklch(96.5% 0.023 224.8)
100

--color-blue-100

oklch(93.5% 0.042 225.6)
200

--color-blue-200

oklch(87.7% 0.08 226.1)
300

--color-blue-300

oklch(79.8% 0.128 229.6)
400

--color-blue-400

oklch(71.9% 0.164 239.8)
500

--color-blue-500

oklch(64.7% 0.188 251)
600

--color-blue-600

oklch(57.6% 0.172 251.9)
700

--color-blue-700

oklch(50.2% 0.147 251.3)
800

--color-blue-800

oklch(42% 0.118 249.6)
900

--color-blue-900

oklch(35.3% 0.091 245.9)
950

--color-blue-950

oklch(29.9% 0.07 241)

Indigo

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(63.1% 0.201 253.9)

50

--color-indigo-50

oklch(96.5% 0.019 235.7)
100

--color-indigo-100

oklch(93.5% 0.037 235.5)
200

--color-indigo-200

oklch(87.6% 0.071 236.5)
300

--color-indigo-300

oklch(79.6% 0.115 240.3)
400

--color-indigo-400

oklch(70.6% 0.165 244.9)
500

--color-indigo-500

oklch(63.1% 0.201 253.9)
600

--color-indigo-600

oklch(56.3% 0.183 254.7)
700

--color-indigo-700

oklch(49% 0.157 254.2)
800

--color-indigo-800

oklch(41.2% 0.125 252.5)
900

--color-indigo-900

oklch(34.5% 0.095 249)
950

--color-indigo-950

oklch(29.7% 0.067 248.4)

Violet

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.201 304.6)

50

--color-violet-50

oklch(96.8% 0.02 308.2)
100

--color-violet-100

oklch(93.5% 0.04 308)
200

--color-violet-200

oklch(88% 0.076 307.5)
300

--color-violet-300

oklch(80.5% 0.124 305.9)
400

--color-violet-400

oklch(71.3% 0.172 304.5)
500

--color-violet-500

oklch(62.2% 0.201 304.6)
600

--color-violet-600

oklch(55.1% 0.185 304.4)
700

--color-violet-700

oklch(48.2% 0.157 304.7)
800

--color-violet-800

oklch(40.6% 0.126 304.5)
900

--color-violet-900

oklch(34.5% 0.09 304.8)
950

--color-violet-950

oklch(29.8% 0.065 305.2)

Purple

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62% 0.19 310.7)

50

--color-purple-50

oklch(96.6% 0.022 312.2)
100

--color-purple-100

oklch(93.7% 0.041 310.9)
200

--color-purple-200

oklch(88.2% 0.079 311.1)
300

--color-purple-300

oklch(80.7% 0.123 310.6)
400

--color-purple-400

oklch(71.3% 0.163 310.4)
500

--color-purple-500

oklch(62% 0.19 310.7)
600

--color-purple-600

oklch(55.2% 0.175 310.6)
700

--color-purple-700

oklch(48.2% 0.148 310.4)
800

--color-purple-800

oklch(40.6% 0.118 310.3)
900

--color-purple-900

oklch(34.3% 0.086 311.1)
950

--color-purple-950

oklch(29.9% 0.061 310.5)

Fuchsia

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62% 0.202 318.5)

50

--color-fuchsia-50

oklch(96.7% 0.025 319.9)
100

--color-fuchsia-100

oklch(93.6% 0.045 318)
200

--color-fuchsia-200

oklch(88.3% 0.085 318.6)
300

--color-fuchsia-300

oklch(80.6% 0.131 318.2)
400

--color-fuchsia-400

oklch(71.4% 0.171 318.7)
500

--color-fuchsia-500

oklch(62% 0.202 318.5)
600

--color-fuchsia-600

oklch(55.2% 0.186 318.6)
700

--color-fuchsia-700

oklch(48.2% 0.158 318.4)
800

--color-fuchsia-800

oklch(40.6% 0.125 319.1)
900

--color-fuchsia-900

oklch(34.3% 0.091 318.1)
950

--color-fuchsia-950

oklch(29.9% 0.065 318.6)

Pink

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.191 326.5)

50

--color-pink-50

oklch(96.7% 0.024 325.8)
100

--color-pink-100

oklch(93.7% 0.042 327.1)
200

--color-pink-200

oklch(88.4% 0.079 326.2)
300

--color-pink-300

oklch(80.7% 0.124 326.7)
400

--color-pink-400

oklch(71.4% 0.162 326.7)
500

--color-pink-500

oklch(62.2% 0.191 326.5)
600

--color-pink-600

oklch(55.2% 0.176 326.4)
700

--color-pink-700

oklch(48.2% 0.149 326.1)
800

--color-pink-800

oklch(40.6% 0.118 326.8)
900

--color-pink-900

oklch(34.4% 0.085 326.3)
950

--color-pink-950

oklch(29.9% 0.06 326.9)

Rose

n=1 · 0° · 1/1 ratio = Unison · oklch(62.2% 0.213 14.2)

50

--color-rose-50

oklch(96.3% 0.018 13.4)
100

--color-rose-100

oklch(92.8% 0.037 13.7)
200

--color-rose-200

oklch(86.8% 0.072 13.3)
300

--color-rose-300

oklch(79% 0.124 12.8)
400

--color-rose-400

oklch(71.3% 0.181 14.3)
500

--color-rose-500

oklch(62.2% 0.213 14.2)
600

--color-rose-600

oklch(55.2% 0.196 14)
700

--color-rose-700

oklch(48.3% 0.166 14)
800

--color-rose-800

oklch(40.6% 0.132 13.9)
900

--color-rose-900

oklch(34.5% 0.096 14.7)
950

--color-rose-950

oklch(29.8% 0.067 13.7)

Slate

Neutral

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62% 0.015 286)

50

--color-slate-50

oklch(96.7% 0.015 286.1)
100

--color-slate-100

oklch(93.7% 0.015 286.1)
200

--color-slate-200

oklch(88.2% 0.015 286.1)
300

--color-slate-300

oklch(80.5% 0.015 286.1)
400

--color-slate-400

oklch(71.2% 0.016 286)
500

--color-slate-500

oklch(62% 0.015 286)
600

--color-slate-600

oklch(55.2% 0.015 285.9)
700

--color-slate-700

oklch(48.2% 0.016 285.8)
800

--color-slate-800

oklch(40.5% 0.015 285.7)
900

--color-slate-900

oklch(34.4% 0.016 285.6)
950

--color-slate-950

oklch(29.7% 0.016 285.4)

Gray

Neutral

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(62.1% 0.004 197.1)

50

--color-gray-50

oklch(96.8% 0.003 197.1)
100

--color-gray-100

oklch(93.8% 0.003 197.1)
200

--color-gray-200

oklch(88.3% 0.003 197.1)
300

--color-gray-300

oklch(80.5% 0.003 197.1)
400

--color-gray-400

oklch(71.3% 0.003 197.1)
500

--color-gray-500

oklch(62.1% 0.004 197.1)
600

--color-gray-600

oklch(55.3% 0.004 197.1)
700

--color-gray-700

oklch(48.3% 0.004 197)
800

--color-gray-800

oklch(40.6% 0.004 197)
900

--color-gray-900

oklch(34.3% 0.003 197)
950

--color-gray-950

oklch(29.9% 0.003 197)

Zinc

Neutral

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.007 286.2)

50

--color-zinc-50

oklch(96.9% 0.008 286.3)
100

--color-zinc-100

oklch(93.6% 0.008 286.2)
200

--color-zinc-200

oklch(88.4% 0.007 286.3)
300

--color-zinc-300

oklch(80.6% 0.008 286.2)
400

--color-zinc-400

oklch(71.4% 0.007 286.2)
500

--color-zinc-500

oklch(62.2% 0.007 286.2)
600

--color-zinc-600

oklch(55.1% 0.009 286.1)
700

--color-zinc-700

oklch(48.4% 0.008 286.1)
800

--color-zinc-800

oklch(40.7% 0.007 286.1)
900

--color-zinc-900

oklch(34.3% 0.009 285.9)
950

--color-zinc-950

oklch(29.9% 0.007 286)

Neutral

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.2% 0.006 106.6)

50

--color-neutral-50

oklch(96.9% 0.007 106.5)
100

--color-neutral-100

oklch(93.6% 0.005 106.5)
200

--color-neutral-200

oklch(88.4% 0.007 106.5)
300

--color-neutral-300

oklch(80.6% 0.007 106.6)
400

--color-neutral-400

oklch(71.4% 0.006 106.5)
500

--color-neutral-500

oklch(62.2% 0.006 106.6)
600

--color-neutral-600

oklch(55.1% 0.006 106.6)
700

--color-neutral-700

oklch(48.4% 0.006 106.6)
800

--color-neutral-800

oklch(40.4% 0.005 106.6)
900

--color-neutral-900

oklch(34.4% 0.005 106.7)
950

--color-neutral-950

oklch(29.6% 0.005 106.7)

Stone

Neutral

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.1% 0.012 106.7)

50

--color-stone-50

oklch(96.8% 0.012 106.6)
100

--color-stone-100

oklch(93.8% 0.012 106.6)
200

--color-stone-200

oklch(88.3% 0.012 106.6)
300

--color-stone-300

oklch(80.5% 0.012 106.7)
400

--color-stone-400

oklch(71.3% 0.011 106.7)
500

--color-stone-500

oklch(62.1% 0.012 106.7)
600

--color-stone-600

oklch(55.3% 0.012 106.8)
700

--color-stone-700

oklch(48.3% 0.013 106.9)
800

--color-stone-800

oklch(40.6% 0.013 107)
900

--color-stone-900

oklch(34.3% 0.012 100.3)
950

--color-stone-950

oklch(29.9% 0.012 107.1)

Ink

Anchor

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(22.1% 0.04 218.1)

50

--color-ink-50

oklch(96.7% 0.029 210)
100

--color-ink-100

oklch(93.6% 0.03 220.6)
200

--color-ink-200

oklch(88.3% 0.031 217.5)
300

--color-ink-300

oklch(80.7% 0.03 218.3)
400

--color-ink-400

oklch(71.4% 0.031 215.8)
500

--color-ink-500

oklch(62.1% 0.03 220)
600

--color-ink-600

oklch(55.3% 0.03 217.4)
700

--color-ink-700

oklch(48.3% 0.031 217.6)
800

--color-ink-800

oklch(40.5% 0.03 219.5)
900

--color-ink-900

oklch(34.4% 0.03 216.7)
★
950
- text
--color-ink-950

oklch(22.1% 0.04 218.1)

Typography

H1 through caption, shown across every authored weight with the ratio math exposed.

H1

step 7

57.33px

weight 200

KBPD-AI / DAWN / ASK

weight 250

KBPD-AI / DAWN / ASK

weight 280

KBPD-AI / DAWN / ASK

weight 300

KBPD-AI / DAWN / ASK

weight 320

KBPD-AI / DAWN / ASK

weight 400

KBPD-AI / DAWN / ASK

weight 500

KBPD-AI / DAWN / ASK

weight 700

KBPD-AI / DAWN / ASK
H2

step 6

47.78px

weight 200

Specimen typography cadence

weight 250

Specimen typography cadence

weight 280

Specimen typography cadence

weight 300

Specimen typography cadence

weight 320

Specimen typography cadence

weight 400

Specimen typography cadence

weight 500

Specimen typography cadence

weight 700

Specimen typography cadence
H3

step 5

39.81px

weight 200

The scale stays visible at every tier.

weight 250

The scale stays visible at every tier.

weight 280

The scale stays visible at every tier.

weight 300

The scale stays visible at every tier.

weight 320

The scale stays visible at every tier.

weight 400

The scale stays visible at every tier.

weight 500

The scale stays visible at every tier.

weight 700

The scale stays visible at every tier.
H4

step 4

33.18px

weight 200

Display transitions into interface heading.

weight 250

Display transitions into interface heading.

weight 280

Display transitions into interface heading.

weight 300

Display transitions into interface heading.

weight 320

Display transitions into interface heading.

weight 400

Display transitions into interface heading.

weight 500

Display transitions into interface heading.

weight 700

Display transitions into interface heading.
H5

step 3

27.65px

weight 200

Section headers keep the same proportional rhythm.

weight 250

Section headers keep the same proportional rhythm.

weight 280

Section headers keep the same proportional rhythm.

weight 300

Section headers keep the same proportional rhythm.

weight 320

Section headers keep the same proportional rhythm.

weight 400

Section headers keep the same proportional rhythm.

weight 500

Section headers keep the same proportional rhythm.

weight 700

Section headers keep the same proportional rhythm.
H6

step 2

23.04px

weight 200

Utility labels stay anchored to the ratio.

weight 250

Utility labels stay anchored to the ratio.

weight 280

Utility labels stay anchored to the ratio.

weight 300

Utility labels stay anchored to the ratio.

weight 320

Utility labels stay anchored to the ratio.

weight 400

Utility labels stay anchored to the ratio.

weight 500

Utility labels stay anchored to the ratio.

weight 700

Utility labels stay anchored to the ratio.
Body

step 0

16px

weight 200

The morning question. Curiosity. Arrival of light.

weight 250

The morning question. Curiosity. Arrival of light.

weight 280

The morning question. Curiosity. Arrival of light.

weight 300

The morning question. Curiosity. Arrival of light.

weight 320

The morning question. Curiosity. Arrival of light.

weight 400

The morning question. Curiosity. Arrival of light.

weight 500

The morning question. Curiosity. Arrival of light.

weight 700

The morning question. Curiosity. Arrival of light.
Console

step -1

13.33px

weight 200

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

weight 250

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

weight 280

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

weight 300

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

weight 320

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

weight 400

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

weight 500

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

weight 700

kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

Generated Formal Composition

H1: --font-family-serif; --font-size-5; --type-display-weight; --line-height-tight
H2: --font-family-serif; --font-size-4; --type-heading-weight; --line-height-snug
H3: --font-family-serif; --font-size-2; --type-copy-weight; --line-height-relaxed
H4 / Console: --font-family-ui; calc(var(--font-size-base) / var(--type-ratio)); --type-ui-weight; --type-ui-line-height
Body: --font-family-serif; --font-size-base; --type-copy-weight; --line-height-relaxed
Smaller body: --font-family-serif; calc(var(--font-size-base) / var(--type-ratio)); --type-copy-weight; --line-height-snug

Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Spacing Rhythm

Spacing

The scale renders as a visual beat map: each bar is sized directly from its emitted --space-* token, and the cadence callout surfaces whether spacing and type share the same proportional ratio.

Spacing ratio: 1.5

Type ratio: 1.5

Shared polyrhythm: spacing and type both run at 1.5.

--space-1 2px x0.25 baseline subdivision x0.25
--space-2 4px x0.5 baseline subdivision x0.5
--space-3 8px x1 baseline baseline pulse
--space-4 12px x1.5 baseline syncopated pulse x1.5
--space-5 16px x2 baseline measure multiple x2
--space-6 24px x3 baseline measure multiple x3
--space-7 32px x4 baseline measure multiple x4
--space-8 48px x6 baseline measure multiple x6
--space-9 64px x8 baseline measure multiple x8
--space-10 96px x12 baseline measure multiple x12

Edge language

Radii

Each sample box applies the emitted radius rule directly so the corner system can be compared as shape vocabulary rather than abstract numbers.

Elevation hierarchy

Shadows

The cards below step upward through the emitted shadow tokens so the elevation ladder reads in context, not as isolated shadow strings.

Motion personality

Motion is a brand system, not a footnote.

Signature keyframe continuous with easing --motion-easing-default.

Timing rails

Four kinetic lanes map the brand from touch response up through ambient pacing.

Fast rail

Micro-touch responses for hover, focus, and press.

--motion-duration-fast

Hover or focus to preview this rail.

Base rail

Standard component transitions and disclosure beats.

--motion-duration-base

Hover or focus to preview this rail.

Slow rail

Panel lifts, emphasis shifts, and celebratory follow-through.

--motion-duration-slow

Hover or focus to preview this rail.

Slower rail

Ambient loops and choreography that should never feel twitchy.

calc(--motion-duration-slow + --motion-duration-base)

Hover or focus to preview this rail.

Easing curve

The default easing is visualized directly from the brand fixture and applied to the sample puck.

Default easing

cubic-bezier(0.16, 1, 0.3, 1)

Control handles 16 0 and 30 0.

Hover and focus micro-transitions

Compact responses show how the brand handles touch, hover, and focus without over-speaking.

Card response Leaderboard pulse Focus or hover to feel the card lift and deepen. Contribution amount

Transition primitives

Drawer, toast, and menu reveal are CSS-only primitives bound to the same timing and easing rails.

Drawer slide

Toast enter / exit

Contribution saved Toast inherits the brand's response tempo.

Menu reveal

Signature keyframe

The specimen chooses a signature movement from the brand motion name and falls back to a calm breathe when no explicit signature exists.

Signature: continuous

Stagger and choreography

Five linked beats enter on a shared ratio-derived sequence so the cadence feels authored rather than simultaneous.

Sequence step uses --motion-stagger-step.

Interaction beats

The full loop runs through button press, card response, toast confirmation, and a brief celebration burst.

Idle-state motion

A restrained ambient loop keeps the surface alive without looking busy or distracting from content.

Motion hierarchy

Primary, secondary, and tertiary tones form a readable kinetic scale in the same way typography forms a type scale.

Primary motion --motion-duration-base

Reserved for the main state change that asks for attention.

Secondary motion --motion-duration-fast

Supports the primary beat without competing for emphasis.

Tertiary motion --motion-duration-slow

Ambient reinforcement and idle feedback under the surface.

Components

Product primitives for KBPD-AI / DAWN / ASK, rendered under pointer and touch contexts with source-bound state styling.

Design-source contract: Named tiers, CSS variables, and semantic aliases before component styling.
Component ownership: shadcn-style copy-owned primitives: the site owns the markup and styling rather than fighting a themed library.
Interaction model: Native HTML now; complex menus/dialogs should graduate to Ark/Zag state machines before reuse in client apps.
Specimen discipline: Storybook-style state matrix: every primitive shows rest, hover, focus, active, mobile, and source provenance.

Rest

Hover

Focus

Active

Rest

Hover

Rest

Focus

Default surface

Weekend dues

Editorial warmth stays quiet on standard surfaces so the content keeps the focus.

Elevated surface

Milestone reached

Elevation steps forward for payment confirmations, nudges, and earned celebrations.

Trip name Default text field Contribution note Focused sample Invite code Disabled sample Goal amount Goal must stay above total contributions

Line item	Status	Amount
Palm Springs House	Confirmed	$780
Airport SUV	Pending	$240
Poolside Dinner	Paid	$315
Welcome Bags	Tracked	$180

Lead contributors
Booked items
Pending invites
Goal remaining
Celebration budget

Sample Surface

A Kitty pool-contribution card and leaderboard fragment, themed for KBPD-AI / DAWN / ASK and sized for both pointer and touch contexts.

Kitty pool

Kitty Palm Springs House

The morning question. Curiosity. Arrival of light.

Raised $1,745 Goal $2,400

Pool progress $655 left to close the house fund

Alicia Booked the villa
$640
Maya Covered flights
$585
Jordan Fronted groceries
$520

About

The brand prompt body, rendered from Markdown with the prompt metadata surfaced up front.

Mood: The morning question. Curiosity. Arrival of light.

Audience: kbpd-ai warm register — default scope: /, hero, welcome, opening, first-paint

KBPD-AI / DAWN / ASK — synthesized by orchestrate_ocs.mjs from kbpd-ai primitives

Harmonic Palette Method

Palette

Full harmonic ramp bound to emitted --color-<family>-<stop> tokens: 24 families, 11 stops, 264 visible swatches per brand.

Fundamental

KBPD-AI / DAY / KNOW

oklch(61.4% 0.224 26.9) · tuning 0.6

Harmonics surface as overtone annotations on every family row so the proof point reads as wave-derived, not hand-curated.

Semantic anchors

surface

paper-50

semantic.surface

surface contrast 1:1
text

ink-950

semantic.text

surface contrast 16.68:1
brand

red-500

semantic.brand

surface contrast 3.92:1
highlight

red-500

derived highlight

surface contrast 3.92:1
success

green-800

derived success

surface contrast 8.33:1
danger

red-800

derived danger

surface contrast 9.41:1

Primary pairings

Surface vs Text

paper-50 vs ink-950

WCAG 2.2 AA pass · AAA pass · 16.68:1
Surface vs Brand

paper-50 vs red-500

WCAG 2.2 AA fail · AAA fail · 3.92:1
Surface vs Highlight

paper-50 vs red-500

WCAG 2.2 AA fail · AAA fail · 3.92:1
Surface vs Success

paper-50 vs green-800

WCAG 2.2 AA pass · AAA pass · 8.33:1
Surface vs Danger

paper-50 vs red-800

WCAG 2.2 AA pass · AAA pass · 9.41:1

Filter family

24 families visible

Paper

Anchor

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(99.1% 0.003 106.4)

★
50
- surface
--color-paper-50

oklch(99.1% 0.003 106.4)
100

--color-paper-100

oklch(93.6% 0.004 106.5)
200

--color-paper-200

oklch(88.1% 0.004 106.5)
300

--color-paper-300

oklch(80.7% 0.004 106.5)
400

--color-paper-400

oklch(71.5% 0.004 106.5)
500

--color-paper-500

oklch(62.2% 0.004 106.5)
600

--color-paper-600

oklch(55.1% 0.003 106.5)
700

--color-paper-700

oklch(48.1% 0.003 106.5)
800

--color-paper-800

oklch(40.5% 0.003 106.5)
900

--color-paper-900

oklch(34.4% 0.003 106.6)
950

--color-paper-950

oklch(29.6% 0.004 106.6)

Red

n=1 · 0° · 1/1 ratio = Unison · oklch(62.2% 0.224 26.1)

50

--color-red-50

oklch(96.2% 0.019 29.5)
100

--color-red-100

oklch(92.7% 0.037 28)
200

--color-red-200

oklch(86.5% 0.073 28.1)
300

--color-red-300

oklch(78.4% 0.126 26.8)
400

--color-red-400

oklch(70.7% 0.185 26.3)
★
500
- brand
- highlight
--color-red-500

oklch(62.2% 0.224 26.1)
600

--color-red-600

oklch(55.1% 0.206 26.1)
700

--color-red-700

oklch(48.2% 0.174 26.2)
800
- danger
--color-red-800

oklch(40.5% 0.139 26.4)
900

--color-red-900

oklch(34.4% 0.1 26.3)
950

--color-red-950

oklch(29.8% 0.071 27.2)

Orange

n=1 · 0° · 1/1 ratio = Unison · oklch(62.1% 0.211 36.4)

50

--color-orange-50

oklch(96.3% 0.02 45.3)
100

--color-orange-100

oklch(92.9% 0.038 42.4)
200

--color-orange-200

oklch(87% 0.074 42.6)
300

--color-orange-300

oklch(79.1% 0.125 40)
400

--color-orange-400

oklch(71.4% 0.181 38.1)
500

--color-orange-500

oklch(62.1% 0.211 36.4)
600

--color-orange-600

oklch(55.3% 0.193 35.3)
700

--color-orange-700

oklch(48.4% 0.165 36.3)
800

--color-orange-800

oklch(40.6% 0.133 38.1)
900

--color-orange-900

oklch(34.6% 0.096 38.3)
950

--color-orange-950

oklch(29.7% 0.068 37.8)

Amber

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.7% 0.14 65.9)

50

--color-amber-50

oklch(96.7% 0.024 83.4)
100

--color-amber-100

oklch(93.7% 0.045 82.6)
200

--color-amber-200

oklch(88.3% 0.085 82.8)
300

--color-amber-300

oklch(80.6% 0.131 82.6)
400

--color-amber-400

oklch(71.5% 0.149 77.6)
500

--color-amber-500

oklch(62.7% 0.14 65.9)
600

--color-amber-600

oklch(55.7% 0.126 64.5)
700

--color-amber-700

oklch(48.7% 0.108 66.2)
800

--color-amber-800

oklch(40.8% 0.09 68.1)
900

--color-amber-900

oklch(34.6% 0.073 75.4)
950

--color-amber-950

oklch(29.7% 0.062 80.2)

Yellow

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.6% 0.13 79.4)

50

--color-yellow-50

oklch(96.7% 0.023 90.7)
100

--color-yellow-100

oklch(93.7% 0.042 92.2)
200

--color-yellow-200

oklch(88.3% 0.079 90.7)
300

--color-yellow-300

oklch(80.5% 0.124 91)
400

--color-yellow-400

oklch(71.4% 0.146 88.3)
500

--color-yellow-500

oklch(62.6% 0.13 79.4)
600

--color-yellow-600

oklch(55.6% 0.116 77.9)
700

--color-yellow-700

oklch(48.6% 0.101 78.5)
800

--color-yellow-800

oklch(40.8% 0.084 80.9)
900

--color-yellow-900

oklch(34.6% 0.071 85.5)
950

--color-yellow-950

oklch(29.9% 0.061 91.2)

Lime

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.2% 0.186 136.2)

50

--color-lime-50

oklch(96.8% 0.022 134.9)
100

--color-lime-100

oklch(93.7% 0.042 135.5)
200

--color-lime-200

oklch(88.2% 0.081 135.7)
300

--color-lime-300

oklch(80.6% 0.124 135.9)
400

--color-lime-400

oklch(71.2% 0.162 135.6)
500

--color-lime-500

oklch(62.2% 0.186 136.2)
600

--color-lime-600

oklch(55.3% 0.167 136.8)
700

--color-lime-700

oklch(48.2% 0.144 136.4)
800

--color-lime-800

oklch(40.4% 0.118 135.8)
900

--color-lime-900

oklch(34.3% 0.085 135.8)
950

--color-lime-950

oklch(29.8% 0.061 135.4)

Green

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.1% 0.201 143.7)

50

--color-green-50

oklch(96.8% 0.025 143.5)
100

--color-green-100

oklch(93.6% 0.043 144.2)
200

--color-green-200

oklch(88.4% 0.086 143.8)
300

--color-green-300

oklch(80.5% 0.13 143.7)
400

--color-green-400

oklch(71.3% 0.172 143.7)
500

--color-green-500

oklch(62.1% 0.201 143.7)
600

--color-green-600

oklch(55.2% 0.183 143.2)
700

--color-green-700

oklch(48.2% 0.157 143.7)
800
- success
--color-green-800

oklch(40.5% 0.125 143.6)
900

--color-green-900

oklch(34.3% 0.09 143.6)
950

--color-green-950

oklch(29.7% 0.064 143.8)

Emerald

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.9% 0.189 146.7)

50

--color-emerald-50

oklch(96.7% 0.023 149.4)
100

--color-emerald-100

oklch(93.7% 0.044 150.3)
200

--color-emerald-200

oklch(88.3% 0.085 149.8)
300

--color-emerald-300

oklch(80.5% 0.131 149.6)
400

--color-emerald-400

oklch(71.3% 0.171 149.7)
500

--color-emerald-500

oklch(62.9% 0.189 146.7)
600

--color-emerald-600

oklch(56% 0.171 146.1)
700

--color-emerald-700

oklch(49% 0.147 146.7)
800

--color-emerald-800

oklch(41.1% 0.12 147.6)
900

--color-emerald-900

oklch(34.3% 0.09 149.8)
950

--color-emerald-950

oklch(29.8% 0.064 149.7)

Teal

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(65.6% 0.118 181.7)

50

--color-teal-50

oklch(96.8% 0.024 183.8)
100

--color-teal-100

oklch(93.7% 0.042 185.4)
200

--color-teal-200

oklch(88.3% 0.08 185.9)
300

--color-teal-300

oklch(80.5% 0.123 185.8)
400

--color-teal-400

oklch(72.9% 0.129 184.4)
500

--color-teal-500

oklch(65.6% 0.118 181.7)
600

--color-teal-600

oklch(58.6% 0.105 181.4)
700

--color-teal-700

oklch(51.1% 0.092 181.8)
800

--color-teal-800

oklch(42.6% 0.076 182.2)
900

--color-teal-900

oklch(35.4% 0.063 183.6)
950

--color-teal-950

oklch(30.2% 0.054 183.2)

Cyan

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(65.4% 0.112 194.8)

50

--color-cyan-50

oklch(96.7% 0.021 193.2)
100

--color-cyan-100

oklch(93.7% 0.039 192.6)
200

--color-cyan-200

oklch(88.3% 0.076 192.8)
300

--color-cyan-300

oklch(80.6% 0.117 193.7)
400

--color-cyan-400

oklch(72.8% 0.125 193.4)
500

--color-cyan-500

oklch(65.4% 0.112 194.8)
600

--color-cyan-600

oklch(58.3% 0.099 194.8)
700

--color-cyan-700

oklch(50.9% 0.087 193.7)
800

--color-cyan-800

oklch(42.3% 0.072 194.8)
900

--color-cyan-900

oklch(35.3% 0.06 194.8)
950

--color-cyan-950

oklch(30.1% 0.052 192.8)

Sky

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(64.5% 0.153 242.1)

50

--color-sky-50

oklch(96.8% 0.021 223)
100

--color-sky-100

oklch(93.6% 0.04 227)
200

--color-sky-200

oklch(88.1% 0.077 226.3)
300

--color-sky-300

oklch(80.6% 0.123 229.7)
400

--color-sky-400

oklch(72% 0.151 234.2)
500

--color-sky-500

oklch(64.5% 0.153 242.1)
600

--color-sky-600

oklch(57.4% 0.14 243.5)
700

--color-sky-700

oklch(50% 0.12 242.5)
800

--color-sky-800

oklch(41.9% 0.097 240.6)
900

--color-sky-900

oklch(35.2% 0.076 236.3)
950

--color-sky-950

oklch(29.8% 0.06 231.7)

Blue

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(64.7% 0.188 251)

50

--color-blue-50

oklch(96.5% 0.023 224.8)
100

--color-blue-100

oklch(93.5% 0.042 225.6)
200

--color-blue-200

oklch(87.7% 0.08 226.1)
300

--color-blue-300

oklch(79.8% 0.128 229.6)
400

--color-blue-400

oklch(71.9% 0.164 239.8)
500

--color-blue-500

oklch(64.7% 0.188 251)
600

--color-blue-600

oklch(57.6% 0.172 251.9)
700

--color-blue-700

oklch(50.2% 0.147 251.3)
800

--color-blue-800

oklch(42% 0.118 249.6)
900

--color-blue-900

oklch(35.3% 0.091 245.9)
950

--color-blue-950

oklch(29.9% 0.07 241)

Indigo

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(63.1% 0.201 253.9)

50

--color-indigo-50

oklch(96.5% 0.019 235.7)
100

--color-indigo-100

oklch(93.5% 0.037 235.5)
200

--color-indigo-200

oklch(87.6% 0.071 236.5)
300

--color-indigo-300

oklch(79.6% 0.115 240.3)
400

--color-indigo-400

oklch(70.6% 0.165 244.9)
500

--color-indigo-500

oklch(63.1% 0.201 253.9)
600

--color-indigo-600

oklch(56.3% 0.183 254.7)
700

--color-indigo-700

oklch(49% 0.157 254.2)
800

--color-indigo-800

oklch(41.2% 0.125 252.5)
900

--color-indigo-900

oklch(34.5% 0.095 249)
950

--color-indigo-950

oklch(29.7% 0.067 248.4)

Violet

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.201 304.6)

50

--color-violet-50

oklch(96.8% 0.02 308.2)
100

--color-violet-100

oklch(93.5% 0.04 308)
200

--color-violet-200

oklch(88% 0.076 307.5)
300

--color-violet-300

oklch(80.5% 0.124 305.9)
400

--color-violet-400

oklch(71.3% 0.172 304.5)
500

--color-violet-500

oklch(62.2% 0.201 304.6)
600

--color-violet-600

oklch(55.1% 0.185 304.4)
700

--color-violet-700

oklch(48.2% 0.157 304.7)
800

--color-violet-800

oklch(40.6% 0.126 304.5)
900

--color-violet-900

oklch(34.5% 0.09 304.8)
950

--color-violet-950

oklch(29.8% 0.065 305.2)

Purple

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62% 0.19 310.7)

50

--color-purple-50

oklch(96.6% 0.022 312.2)
100

--color-purple-100

oklch(93.7% 0.041 310.9)
200

--color-purple-200

oklch(88.2% 0.079 311.1)
300

--color-purple-300

oklch(80.7% 0.123 310.6)
400

--color-purple-400

oklch(71.3% 0.163 310.4)
500

--color-purple-500

oklch(62% 0.19 310.7)
600

--color-purple-600

oklch(55.2% 0.175 310.6)
700

--color-purple-700

oklch(48.2% 0.148 310.4)
800

--color-purple-800

oklch(40.6% 0.118 310.3)
900

--color-purple-900

oklch(34.3% 0.086 311.1)
950

--color-purple-950

oklch(29.9% 0.061 310.5)

Fuchsia

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62% 0.202 318.5)

50

--color-fuchsia-50

oklch(96.7% 0.025 319.9)
100

--color-fuchsia-100

oklch(93.6% 0.045 318)
200

--color-fuchsia-200

oklch(88.3% 0.085 318.6)
300

--color-fuchsia-300

oklch(80.6% 0.131 318.2)
400

--color-fuchsia-400

oklch(71.4% 0.171 318.7)
500

--color-fuchsia-500

oklch(62% 0.202 318.5)
600

--color-fuchsia-600

oklch(55.2% 0.186 318.6)
700

--color-fuchsia-700

oklch(48.2% 0.158 318.4)
800

--color-fuchsia-800

oklch(40.6% 0.125 319.1)
900

--color-fuchsia-900

oklch(34.3% 0.091 318.1)
950

--color-fuchsia-950

oklch(29.9% 0.065 318.6)

Pink

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.191 326.5)

50

--color-pink-50

oklch(96.7% 0.024 325.8)
100

--color-pink-100

oklch(93.7% 0.042 327.1)
200

--color-pink-200

oklch(88.4% 0.079 326.2)
300

--color-pink-300

oklch(80.7% 0.124 326.7)
400

--color-pink-400

oklch(71.4% 0.162 326.7)
500

--color-pink-500

oklch(62.2% 0.191 326.5)
600

--color-pink-600

oklch(55.2% 0.176 326.4)
700

--color-pink-700

oklch(48.2% 0.149 326.1)
800

--color-pink-800

oklch(40.6% 0.118 326.8)
900

--color-pink-900

oklch(34.4% 0.085 326.3)
950

--color-pink-950

oklch(29.9% 0.06 326.9)

Rose

n=1 · 0° · 1/1 ratio = Unison · oklch(62.2% 0.213 14.2)

50

--color-rose-50

oklch(96.3% 0.018 13.4)
100

--color-rose-100

oklch(92.8% 0.037 13.7)
200

--color-rose-200

oklch(86.8% 0.072 13.3)
300

--color-rose-300

oklch(79% 0.124 12.8)
400

--color-rose-400

oklch(71.3% 0.181 14.3)
500

--color-rose-500

oklch(62.2% 0.213 14.2)
600

--color-rose-600

oklch(55.2% 0.196 14)
700

--color-rose-700

oklch(48.3% 0.166 14)
800

--color-rose-800

oklch(40.6% 0.132 13.9)
900

--color-rose-900

oklch(34.5% 0.096 14.7)
950

--color-rose-950

oklch(29.8% 0.067 13.7)

Slate

Neutral

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62% 0.015 286)

50

--color-slate-50

oklch(96.7% 0.015 286.1)
100

--color-slate-100

oklch(93.7% 0.015 286.1)
200

--color-slate-200

oklch(88.2% 0.015 286.1)
300

--color-slate-300

oklch(80.5% 0.015 286.1)
400

--color-slate-400

oklch(71.2% 0.016 286)
500

--color-slate-500

oklch(62% 0.015 286)
600

--color-slate-600

oklch(55.2% 0.015 285.9)
700

--color-slate-700

oklch(48.2% 0.016 285.8)
800

--color-slate-800

oklch(40.5% 0.015 285.7)
900

--color-slate-900

oklch(34.4% 0.016 285.6)
950

--color-slate-950

oklch(29.7% 0.016 285.4)

Gray

Neutral

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(62.1% 0.004 197.1)

50

--color-gray-50

oklch(96.8% 0.003 197.1)
100

--color-gray-100

oklch(93.8% 0.003 197.1)
200

--color-gray-200

oklch(88.3% 0.003 197.1)
300

--color-gray-300

oklch(80.5% 0.003 197.1)
400

--color-gray-400

oklch(71.3% 0.003 197.1)
500

--color-gray-500

oklch(62.1% 0.004 197.1)
600

--color-gray-600

oklch(55.3% 0.004 197.1)
700

--color-gray-700

oklch(48.3% 0.004 197)
800

--color-gray-800

oklch(40.6% 0.004 197)
900

--color-gray-900

oklch(34.3% 0.003 197)
950

--color-gray-950

oklch(29.9% 0.003 197)

Zinc

Neutral

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.007 286.2)

50

--color-zinc-50

oklch(96.9% 0.008 286.3)
100

--color-zinc-100

oklch(93.6% 0.008 286.2)
200

--color-zinc-200

oklch(88.4% 0.007 286.3)
300

--color-zinc-300

oklch(80.6% 0.008 286.2)
400

--color-zinc-400

oklch(71.4% 0.007 286.2)
500

--color-zinc-500

oklch(62.2% 0.007 286.2)
600

--color-zinc-600

oklch(55.1% 0.009 286.1)
700

--color-zinc-700

oklch(48.4% 0.008 286.1)
800

--color-zinc-800

oklch(40.7% 0.007 286.1)
900

--color-zinc-900

oklch(34.3% 0.009 285.9)
950

--color-zinc-950

oklch(29.9% 0.007 286)

Neutral

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.2% 0.006 106.6)

50

--color-neutral-50

oklch(96.9% 0.007 106.5)
100

--color-neutral-100

oklch(93.6% 0.005 106.5)
200

--color-neutral-200

oklch(88.4% 0.007 106.5)
300

--color-neutral-300

oklch(80.6% 0.007 106.6)
400

--color-neutral-400

oklch(71.4% 0.006 106.5)
500

--color-neutral-500

oklch(62.2% 0.006 106.6)
600

--color-neutral-600

oklch(55.1% 0.006 106.6)
700

--color-neutral-700

oklch(48.4% 0.006 106.6)
800

--color-neutral-800

oklch(40.4% 0.005 106.6)
900

--color-neutral-900

oklch(34.4% 0.005 106.7)
950

--color-neutral-950

oklch(29.6% 0.005 106.7)

Stone

Neutral

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.1% 0.012 106.7)

50

--color-stone-50

oklch(96.8% 0.012 106.6)
100

--color-stone-100

oklch(93.8% 0.012 106.6)
200

--color-stone-200

oklch(88.3% 0.012 106.6)
300

--color-stone-300

oklch(80.5% 0.012 106.7)
400

--color-stone-400

oklch(71.3% 0.011 106.7)
500

--color-stone-500

oklch(62.1% 0.012 106.7)
600

--color-stone-600

oklch(55.3% 0.012 106.8)
700

--color-stone-700

oklch(48.3% 0.013 106.9)
800

--color-stone-800

oklch(40.6% 0.013 107)
900

--color-stone-900

oklch(34.3% 0.012 100.3)
950

--color-stone-950

oklch(29.9% 0.012 107.1)

Ink

Anchor

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(22.1% 0.04 218.1)

50

--color-ink-50

oklch(96.7% 0.029 210)
100

--color-ink-100

oklch(93.6% 0.03 220.6)
200

--color-ink-200

oklch(88.3% 0.031 217.5)
300

--color-ink-300

oklch(80.7% 0.03 218.3)
400

--color-ink-400

oklch(71.4% 0.031 215.8)
500

--color-ink-500

oklch(62.1% 0.03 220)
600

--color-ink-600

oklch(55.3% 0.03 217.4)
700

--color-ink-700

oklch(48.3% 0.031 217.6)
800

--color-ink-800

oklch(40.5% 0.03 219.5)
900

--color-ink-900

oklch(34.4% 0.03 216.7)
★
950
- text
--color-ink-950

oklch(22.1% 0.04 218.1)

Typography

H1 through caption, shown across every authored weight with the ratio math exposed.

H1

step 7

57.33px

weight 200

KBPD-AI / DAY / KNOW

weight 250

KBPD-AI / DAY / KNOW

weight 280

KBPD-AI / DAY / KNOW

weight 300

KBPD-AI / DAY / KNOW

weight 320

KBPD-AI / DAY / KNOW

weight 400

KBPD-AI / DAY / KNOW

weight 500

KBPD-AI / DAY / KNOW

weight 700

KBPD-AI / DAY / KNOW
H2

step 6

47.78px

weight 200

Specimen typography cadence

weight 250

Specimen typography cadence

weight 280

Specimen typography cadence

weight 300

Specimen typography cadence

weight 320

Specimen typography cadence

weight 400

Specimen typography cadence

weight 500

Specimen typography cadence

weight 700

Specimen typography cadence
H3

step 5

39.81px

weight 200

The scale stays visible at every tier.

weight 250

The scale stays visible at every tier.

weight 280

The scale stays visible at every tier.

weight 300

The scale stays visible at every tier.

weight 320

The scale stays visible at every tier.

weight 400

The scale stays visible at every tier.

weight 500

The scale stays visible at every tier.

weight 700

The scale stays visible at every tier.
H4

step 4

33.18px

weight 200

Display transitions into interface heading.

weight 250

Display transitions into interface heading.

weight 280

Display transitions into interface heading.

weight 300

Display transitions into interface heading.

weight 320

Display transitions into interface heading.

weight 400

Display transitions into interface heading.

weight 500

Display transitions into interface heading.

weight 700

Display transitions into interface heading.
H5

step 3

27.65px

weight 200

Section headers keep the same proportional rhythm.

weight 250

Section headers keep the same proportional rhythm.

weight 280

Section headers keep the same proportional rhythm.

weight 300

Section headers keep the same proportional rhythm.

weight 320

Section headers keep the same proportional rhythm.

weight 400

Section headers keep the same proportional rhythm.

weight 500

Section headers keep the same proportional rhythm.

weight 700

Section headers keep the same proportional rhythm.
H6

step 2

23.04px

weight 200

Utility labels stay anchored to the ratio.

weight 250

Utility labels stay anchored to the ratio.

weight 280

Utility labels stay anchored to the ratio.

weight 300

Utility labels stay anchored to the ratio.

weight 320

Utility labels stay anchored to the ratio.

weight 400

Utility labels stay anchored to the ratio.

weight 500

Utility labels stay anchored to the ratio.

weight 700

Utility labels stay anchored to the ratio.
Body

step 0

16px

weight 200

Full-light certainty. Capability. The work in midday.

weight 250

Full-light certainty. Capability. The work in midday.

weight 280

Full-light certainty. Capability. The work in midday.

weight 300

Full-light certainty. Capability. The work in midday.

weight 320

Full-light certainty. Capability. The work in midday.

weight 400

Full-light certainty. Capability. The work in midday.

weight 500

Full-light certainty. Capability. The work in midday.

weight 700

Full-light certainty. Capability. The work in midday.
Console

step -1

13.33px

weight 200

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

weight 250

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

weight 280

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

weight 300

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

weight 320

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

weight 400

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

weight 500

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

weight 700

kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

Generated Formal Composition

H1: --font-family-serif; --font-size-5; --type-display-weight; --line-height-tight
H2: --font-family-serif; --font-size-4; --type-heading-weight; --line-height-snug
H3: --font-family-serif; --font-size-2; --type-copy-weight; --line-height-relaxed
H4 / Console: --font-family-ui; calc(var(--font-size-base) / var(--type-ratio)); --type-ui-weight; --type-ui-line-height
Body: --font-family-serif; --font-size-base; --type-copy-weight; --line-height-relaxed
Smaller body: --font-family-serif; calc(var(--font-size-base) / var(--type-ratio)); --type-copy-weight; --line-height-snug

Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Spacing Rhythm

Spacing

The scale renders as a visual beat map: each bar is sized directly from its emitted --space-* token, and the cadence callout surfaces whether spacing and type share the same proportional ratio.

Spacing ratio: 1.5

Type ratio: 1.5

Shared polyrhythm: spacing and type both run at 1.5.

--space-1 2px x0.25 baseline subdivision x0.25
--space-2 4px x0.5 baseline subdivision x0.5
--space-3 8px x1 baseline baseline pulse
--space-4 12px x1.5 baseline syncopated pulse x1.5
--space-5 16px x2 baseline measure multiple x2
--space-6 24px x3 baseline measure multiple x3
--space-7 32px x4 baseline measure multiple x4
--space-8 48px x6 baseline measure multiple x6
--space-9 64px x8 baseline measure multiple x8
--space-10 96px x12 baseline measure multiple x12

Edge language

Radii

Each sample box applies the emitted radius rule directly so the corner system can be compared as shape vocabulary rather than abstract numbers.

Elevation hierarchy

Shadows

The cards below step upward through the emitted shadow tokens so the elevation ladder reads in context, not as isolated shadow strings.

Motion personality

Motion is a brand system, not a footnote.

Signature keyframe continuous with easing --motion-easing-default.

Timing rails

Four kinetic lanes map the brand from touch response up through ambient pacing.

Fast rail

Micro-touch responses for hover, focus, and press.

--motion-duration-fast

Hover or focus to preview this rail.

Base rail

Standard component transitions and disclosure beats.

--motion-duration-base

Hover or focus to preview this rail.

Slow rail

Panel lifts, emphasis shifts, and celebratory follow-through.

--motion-duration-slow

Hover or focus to preview this rail.

Slower rail

Ambient loops and choreography that should never feel twitchy.

calc(--motion-duration-slow + --motion-duration-base)

Hover or focus to preview this rail.

Easing curve

The default easing is visualized directly from the brand fixture and applied to the sample puck.

Default easing

cubic-bezier(0.16, 1, 0.3, 1)

Control handles 16 0 and 30 0.

Hover and focus micro-transitions

Compact responses show how the brand handles touch, hover, and focus without over-speaking.

Card response Leaderboard pulse Focus or hover to feel the card lift and deepen. Contribution amount

Transition primitives

Drawer, toast, and menu reveal are CSS-only primitives bound to the same timing and easing rails.

Drawer slide

Toast enter / exit

Contribution saved Toast inherits the brand's response tempo.

Menu reveal

Signature keyframe

The specimen chooses a signature movement from the brand motion name and falls back to a calm breathe when no explicit signature exists.

Signature: continuous

Stagger and choreography

Five linked beats enter on a shared ratio-derived sequence so the cadence feels authored rather than simultaneous.

Sequence step uses --motion-stagger-step.

Interaction beats

The full loop runs through button press, card response, toast confirmation, and a brief celebration burst.

Idle-state motion

A restrained ambient loop keeps the surface alive without looking busy or distracting from content.

Motion hierarchy

Primary, secondary, and tertiary tones form a readable kinetic scale in the same way typography forms a type scale.

Primary motion --motion-duration-base

Reserved for the main state change that asks for attention.

Secondary motion --motion-duration-fast

Supports the primary beat without competing for emphasis.

Tertiary motion --motion-duration-slow

Ambient reinforcement and idle feedback under the surface.

Components

Product primitives for KBPD-AI / DAY / KNOW, rendered under pointer and touch contexts with source-bound state styling.

Design-source contract: Named tiers, CSS variables, and semantic aliases before component styling.
Component ownership: shadcn-style copy-owned primitives: the site owns the markup and styling rather than fighting a themed library.
Interaction model: Native HTML now; complex menus/dialogs should graduate to Ark/Zag state machines before reuse in client apps.
Specimen discipline: Storybook-style state matrix: every primitive shows rest, hover, focus, active, mobile, and source provenance.

Rest

Hover

Focus

Active

Rest

Hover

Rest

Focus

Default surface

Weekend dues

Editorial warmth stays quiet on standard surfaces so the content keeps the focus.

Elevated surface

Milestone reached

Elevation steps forward for payment confirmations, nudges, and earned celebrations.

Trip name Default text field Contribution note Focused sample Invite code Disabled sample Goal amount Goal must stay above total contributions

Line item	Status	Amount
Palm Springs House	Confirmed	$780
Airport SUV	Pending	$240
Poolside Dinner	Paid	$315
Welcome Bags	Tracked	$180

Lead contributors
Booked items
Pending invites
Goal remaining
Celebration budget

Sample Surface

A Kitty pool-contribution card and leaderboard fragment, themed for KBPD-AI / DAY / KNOW and sized for both pointer and touch contexts.

Kitty pool

Kitty Palm Springs House

Full-light certainty. Capability. The work in midday.

Raised $1,745 Goal $2,400

Pool progress $655 left to close the house fund

Alicia Booked the villa
$640
Maya Covered flights
$585
Jordan Fronted groceries
$520

About

The brand prompt body, rendered from Markdown with the prompt metadata surfaced up front.

Mood: Full-light certainty. Capability. The work in midday.

Audience: kbpd-ai primary register — default scope: /technology, content, case-study, documentation, ADR-render

KBPD-AI / DAY / KNOW — synthesized by orchestrate_ocs.mjs from kbpd-ai primitives

Harmonic Palette Method

Palette

Full harmonic ramp bound to emitted --color-<family>-<stop> tokens: 24 families, 11 stops, 264 visible swatches per brand.

Fundamental

KBPD-AI / DUSK / MAKE

oklch(71.1% 0.149 234.2) · tuning 0.6

Harmonics surface as overtone annotations on every family row so the proof point reads as wave-derived, not hand-curated.

Semantic anchors

surface

paper-50

semantic.surface

surface contrast 1:1
text

ink-950

semantic.text

surface contrast 16.68:1
brand

blue-400

semantic.brand

surface contrast 2.42:1
highlight

blue-400

derived highlight

surface contrast 2.42:1
success

teal-800

derived success

surface contrast 8.45:1
danger

rose-800

derived danger

surface contrast 9.2:1

Primary pairings

Surface vs Text

paper-50 vs ink-950

WCAG 2.2 AA pass · AAA pass · 16.68:1
Surface vs Brand

paper-50 vs blue-400

WCAG 2.2 AA fail · AAA fail · 2.42:1
Surface vs Highlight

paper-50 vs blue-400

WCAG 2.2 AA fail · AAA fail · 2.42:1
Surface vs Success

paper-50 vs teal-800

WCAG 2.2 AA pass · AAA pass · 8.45:1
Surface vs Danger

paper-50 vs rose-800

WCAG 2.2 AA pass · AAA pass · 9.2:1

Filter family

24 families visible

Paper

Anchor

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(99.1% 0.003 106.4)

★
50
- surface
--color-paper-50

oklch(99.1% 0.003 106.4)
100

--color-paper-100

oklch(93.6% 0.004 106.5)
200

--color-paper-200

oklch(88.1% 0.004 106.5)
300

--color-paper-300

oklch(80.7% 0.004 106.5)
400

--color-paper-400

oklch(71.5% 0.004 106.5)
500

--color-paper-500

oklch(62.2% 0.004 106.5)
600

--color-paper-600

oklch(55.1% 0.003 106.5)
700

--color-paper-700

oklch(48.1% 0.003 106.5)
800

--color-paper-800

oklch(40.5% 0.003 106.5)
900

--color-paper-900

oklch(34.4% 0.003 106.6)
950

--color-paper-950

oklch(29.6% 0.004 106.6)

Red

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(62% 0.149 33.9)

50

--color-red-50

oklch(96.6% 0.017 35.3)
100

--color-red-100

oklch(93.7% 0.032 34.3)
200

--color-red-200

oklch(88.2% 0.063 33)
300

--color-red-300

oklch(80.6% 0.097 34.3)
400

--color-red-400

oklch(71.3% 0.127 33.5)
500

--color-red-500

oklch(62% 0.149 33.9)
600

--color-red-600

oklch(55.2% 0.138 33.7)
700

--color-red-700

oklch(48.1% 0.116 33.7)
800

--color-red-800

oklch(40.7% 0.092 33.9)
900

--color-red-900

oklch(34.4% 0.066 34.2)
950

--color-red-950

oklch(29.8% 0.048 34)

Orange

n=11 · 165.4° · 11/8 ratio = Tritone · oklch(62.2% 0.142 46.1)

50

--color-orange-50

oklch(96.8% 0.017 44.8)
100

--color-orange-100

oklch(93.6% 0.031 45.3)
200

--color-orange-200

oklch(88.3% 0.06 45.9)
300

--color-orange-300

oklch(80.5% 0.092 45.8)
400

--color-orange-400

oklch(71.3% 0.12 45.5)
500

--color-orange-500

oklch(62.2% 0.142 46.1)
600

--color-orange-600

oklch(55.1% 0.13 45.4)
700

--color-orange-700

oklch(48.3% 0.111 45.8)
800

--color-orange-800

oklch(40.6% 0.088 46)
900

--color-orange-900

oklch(34.3% 0.064 44.8)
950

--color-orange-950

oklch(29.8% 0.045 47)

Amber

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(62.1% 0.129 79.7)

50

--color-amber-50

oklch(96.7% 0.016 79.4)
100

--color-amber-100

oklch(93.7% 0.03 83.6)
200

--color-amber-200

oklch(88.2% 0.056 80.2)
300

--color-amber-300

oklch(80.6% 0.087 80.5)
400

--color-amber-400

oklch(71.4% 0.114 81.2)
500

--color-amber-500

oklch(62.1% 0.129 79.7)
600

--color-amber-600

oklch(55.2% 0.115 77.6)
700

--color-amber-700

oklch(48.4% 0.1 80)
800

--color-amber-800

oklch(40.5% 0.083 80.4)
900

--color-amber-900

oklch(34.3% 0.061 80.6)
950

--color-amber-950

oklch(29.8% 0.043 82.1)

Yellow

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(62% 0.127 88.9)

50

--color-yellow-50

oklch(96.7% 0.015 90.2)
100

--color-yellow-100

oklch(93.8% 0.028 88.8)
200

--color-yellow-200

oklch(88.3% 0.053 87.9)
300

--color-yellow-300

oklch(80.5% 0.083 88.6)
400

--color-yellow-400

oklch(71.4% 0.108 88.8)
500

--color-yellow-500

oklch(62% 0.127 88.9)
600

--color-yellow-600

oklch(55.2% 0.113 87.6)
700

--color-yellow-700

oklch(48.2% 0.098 88.3)
800

--color-yellow-800

oklch(40.4% 0.078 88.8)
900

--color-yellow-900

oklch(34.4% 0.057 88.6)
950

--color-yellow-950

oklch(29.7% 0.04 89.3)

Lime

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.1% 0.127 148.9)

50

--color-lime-50

oklch(96.7% 0.014 148.8)
100

--color-lime-100

oklch(93.7% 0.029 148.6)
200

--color-lime-200

oklch(88.3% 0.053 149.3)
300

--color-lime-300

oklch(80.6% 0.082 148.9)
400

--color-lime-400

oklch(71.2% 0.107 149.1)
500

--color-lime-500

oklch(62.1% 0.127 148.9)
600

--color-lime-600

oklch(55.1% 0.116 148.7)
700

--color-lime-700

oklch(48.1% 0.098 149)
800

--color-lime-800

oklch(40.6% 0.079 149)
900

--color-lime-900

oklch(34.3% 0.057 148.9)
950

--color-lime-950

oklch(29.8% 0.041 149.4)

Green

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.1% 0.134 157)

50

--color-green-50

oklch(96.8% 0.016 156.9)
100

--color-green-100

oklch(93.6% 0.029 156.6)
200

--color-green-200

oklch(88.3% 0.056 157.2)
300

--color-green-300

oklch(80.6% 0.087 156.8)
400

--color-green-400

oklch(71.4% 0.114 157.2)
500

--color-green-500

oklch(62.1% 0.134 157)
600

--color-green-600

oklch(55.2% 0.123 157)
700

--color-green-700

oklch(48.1% 0.103 157.3)
800

--color-green-800

oklch(40.4% 0.083 156.9)
900

--color-green-900

oklch(34.3% 0.06 157)
950

--color-green-950

oklch(29.9% 0.043 157.3)

Emerald

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.134 163.1)

50

--color-emerald-50

oklch(96.8% 0.017 162.8)
100

--color-emerald-100

oklch(93.7% 0.031 162.2)
200

--color-emerald-200

oklch(88.4% 0.056 162.8)
300

--color-emerald-300

oklch(80.6% 0.088 162.5)
400

--color-emerald-400

oklch(71.4% 0.114 162.9)
500

--color-emerald-500

oklch(62.2% 0.134 163.1)
600

--color-emerald-600

oklch(55.4% 0.121 162.4)
700

--color-emerald-700

oklch(48.2% 0.104 163.1)
800

--color-emerald-800

oklch(40.6% 0.083 162.9)
900

--color-emerald-900

oklch(34.5% 0.061 162.8)
950

--color-emerald-950

oklch(29.8% 0.043 162.9)

Teal

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.1% 0.125 168.7)

50

--color-teal-50

oklch(96.8% 0.016 166.7)
100

--color-teal-100

oklch(93.6% 0.027 170.3)
200

--color-teal-200

oklch(88.2% 0.053 168.8)
300

--color-teal-300

oklch(80.5% 0.082 168.6)
400

--color-teal-400

oklch(71.3% 0.107 169.1)
500

--color-teal-500

oklch(62.1% 0.125 168.7)
600

--color-teal-600

oklch(55.4% 0.112 168.1)
700

--color-teal-700

oklch(48.4% 0.098 168)
800
- success
--color-teal-800

oklch(40.4% 0.078 169.6)
900

--color-teal-900

oklch(34.3% 0.056 169.8)
950

--color-teal-950

oklch(29.8% 0.041 169.5)

Cyan

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.2% 0.116 176.7)

50

--color-cyan-50

oklch(96.8% 0.015 175.7)
100

--color-cyan-100

oklch(93.7% 0.025 178.4)
200

--color-cyan-200

oklch(88.3% 0.05 177.4)
300

--color-cyan-300

oklch(80.5% 0.077 176.7)
400

--color-cyan-400

oklch(71.2% 0.101 177)
500

--color-cyan-500

oklch(62.2% 0.116 176.7)
600

--color-cyan-600

oklch(55.4% 0.103 176.5)
700

--color-cyan-700

oklch(48.4% 0.09 176.3)
800

--color-cyan-800

oklch(40.6% 0.074 176.5)
900

--color-cyan-900

oklch(34.4% 0.054 176.4)
950

--color-cyan-950

oklch(29.9% 0.038 176.4)

Sky

n=1 · 0° · 1/1 ratio = Unison · oklch(62.3% 0.123 229.1)

50

--color-sky-50

oklch(96.8% 0.016 227)
100

--color-sky-100

oklch(93.6% 0.028 229.2)
200

--color-sky-200

oklch(88.3% 0.053 229.1)
300

--color-sky-300

oklch(80.5% 0.083 228.9)
400

--color-sky-400

oklch(71.3% 0.108 228.9)
500

--color-sky-500

oklch(62.3% 0.123 229.1)
600

--color-sky-600

oklch(55.6% 0.112 230.6)
700

--color-sky-700

oklch(48.4% 0.096 229.5)
800

--color-sky-800

oklch(40.7% 0.079 228.5)
900

--color-sky-900

oklch(34.3% 0.057 228.8)
950

--color-sky-950

oklch(29.7% 0.04 228.3)

Blue

n=1 · 0° · 1/1 ratio = Unison · oklch(62.6% 0.142 239.6)

50

--color-blue-50

oklch(96.7% 0.018 240)
100

--color-blue-100

oklch(93.6% 0.033 237)
200

--color-blue-200

oklch(88.4% 0.062 236.1)
300

--color-blue-300

oklch(80.5% 0.097 236.8)
★
400
- brand
- highlight
--color-blue-400

oklch(71.4% 0.127 236.2)
500

--color-blue-500

oklch(62.6% 0.142 239.6)
600

--color-blue-600

oklch(55.9% 0.128 240)
700

--color-blue-700

oklch(48.6% 0.111 239.7)
800

--color-blue-800

oklch(40.6% 0.09 238.1)
900

--color-blue-900

oklch(34.5% 0.067 235.9)
950

--color-blue-950

oklch(29.8% 0.048 235.5)

Indigo

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.2% 0.141 282.9)

50

--color-indigo-50

oklch(96.7% 0.016 282.3)
100

--color-indigo-100

oklch(93.7% 0.031 283.8)
200

--color-indigo-200

oklch(88.2% 0.059 283)
300

--color-indigo-300

oklch(80.5% 0.093 283.4)
400

--color-indigo-400

oklch(71.4% 0.12 283.5)
500

--color-indigo-500

oklch(62.2% 0.141 282.9)
600

--color-indigo-600

oklch(55.1% 0.131 283.3)
700

--color-indigo-700

oklch(48.2% 0.11 283.4)
800

--color-indigo-800

oklch(40.6% 0.088 282.6)
900

--color-indigo-900

oklch(34.4% 0.064 283.7)
950

--color-indigo-950

oklch(29.7% 0.045 283.3)

Violet

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.1% 0.133 291.2)

50

--color-violet-50

oklch(96.8% 0.016 289.9)
100

--color-violet-100

oklch(93.7% 0.03 292.1)
200

--color-violet-200

oklch(88.4% 0.056 290.8)
300

--color-violet-300

oklch(80.5% 0.087 291)
400

--color-violet-400

oklch(71.3% 0.114 291.4)
500

--color-violet-500

oklch(62.1% 0.133 291.2)
600

--color-violet-600

oklch(55.2% 0.123 291.5)
700

--color-violet-700

oklch(48.2% 0.104 291)
800

--color-violet-800

oklch(40.5% 0.083 291.5)
900

--color-violet-900

oklch(34.4% 0.06 290.7)
950

--color-violet-950

oklch(29.7% 0.043 291.2)

Purple

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62% 0.127 297.2)

50

--color-purple-50

oklch(96.7% 0.016 297.5)
100

--color-purple-100

oklch(93.8% 0.027 297.3)
200

--color-purple-200

oklch(88.4% 0.053 297.4)
300

--color-purple-300

oklch(80.6% 0.082 297.2)
400

--color-purple-400

oklch(71.4% 0.108 297.3)
500

--color-purple-500

oklch(62% 0.127 297.2)
600

--color-purple-600

oklch(55.2% 0.116 297.2)
700

--color-purple-700

oklch(48.3% 0.099 297.4)
800

--color-purple-800

oklch(40.5% 0.079 297.5)
900

--color-purple-900

oklch(34.3% 0.058 297.2)
950

--color-purple-950

oklch(29.8% 0.04 296.4)

Fuchsia

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.1% 0.135 305.3)

50

--color-fuchsia-50

oklch(96.8% 0.015 306.4)
100

--color-fuchsia-100

oklch(93.6% 0.03 307.1)
200

--color-fuchsia-200

oklch(88.4% 0.056 305)
300

--color-fuchsia-300

oklch(80.7% 0.087 305.4)
400

--color-fuchsia-400

oklch(71.4% 0.114 304.8)
500

--color-fuchsia-500

oklch(62.1% 0.135 305.3)
600

--color-fuchsia-600

oklch(55.1% 0.123 305.2)
700

--color-fuchsia-700

oklch(48.1% 0.105 305.1)
800

--color-fuchsia-800

oklch(40.5% 0.084 305.5)
900

--color-fuchsia-900

oklch(34.3% 0.061 305)
950

--color-fuchsia-950

oklch(29.9% 0.043 303.9)

Pink

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.2% 0.126 346.5)

50

--color-pink-50

oklch(96.7% 0.016 347.6)
100

--color-pink-100

oklch(93.7% 0.028 345.9)
200

--color-pink-200

oklch(88.3% 0.053 346)
300

--color-pink-300

oklch(80.5% 0.083 345.5)
400

--color-pink-400

oklch(71.2% 0.109 345.6)
500

--color-pink-500

oklch(62.2% 0.126 346.5)
600

--color-pink-600

oklch(55.2% 0.118 346.4)
700

--color-pink-700

oklch(48.1% 0.099 345.8)
800

--color-pink-800

oklch(40.5% 0.079 345.9)
900

--color-pink-900

oklch(34.3% 0.057 345.9)
950

--color-pink-950

oklch(29.8% 0.041 344.9)

Rose

n=5 · 115.9° · 5/4 ratio = Major 3rd · oklch(62.1% 0.142 352.2)

50

--color-rose-50

oklch(96.8% 0.016 353.6)
100

--color-rose-100

oklch(93.7% 0.031 352.4)
200

--color-rose-200

oklch(88.3% 0.059 352.7)
300

--color-rose-300

oklch(80.6% 0.093 351.9)
400

--color-rose-400

oklch(71.4% 0.12 352.4)
500

--color-rose-500

oklch(62.1% 0.142 352.2)
600

--color-rose-600

oklch(55.2% 0.129 351.9)
700

--color-rose-700

oklch(48.3% 0.11 352)
800
- danger
--color-rose-800

oklch(40.5% 0.088 352)
900

--color-rose-900

oklch(34.4% 0.064 352.6)
950

--color-rose-950

oklch(29.7% 0.047 351)

Slate

Neutral

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62% 0.015 286)

50

--color-slate-50

oklch(96.7% 0.015 286.1)
100

--color-slate-100

oklch(93.7% 0.015 286.1)
200

--color-slate-200

oklch(88.2% 0.015 286.1)
300

--color-slate-300

oklch(80.5% 0.015 286.1)
400

--color-slate-400

oklch(71.2% 0.016 286)
500

--color-slate-500

oklch(62% 0.015 286)
600

--color-slate-600

oklch(55.2% 0.015 285.9)
700

--color-slate-700

oklch(48.2% 0.016 285.8)
800

--color-slate-800

oklch(40.5% 0.015 285.7)
900

--color-slate-900

oklch(34.4% 0.016 285.6)
950

--color-slate-950

oklch(29.7% 0.016 285.4)

Gray

Neutral

n=7 · 290.6° · 7/4 ratio = Minor 7th · oklch(62.1% 0.004 197.1)

50

--color-gray-50

oklch(96.8% 0.003 197.1)
100

--color-gray-100

oklch(93.8% 0.003 197.1)
200

--color-gray-200

oklch(88.3% 0.003 197.1)
300

--color-gray-300

oklch(80.5% 0.003 197.1)
400

--color-gray-400

oklch(71.3% 0.003 197.1)
500

--color-gray-500

oklch(62.1% 0.004 197.1)
600

--color-gray-600

oklch(55.3% 0.004 197.1)
700

--color-gray-700

oklch(48.3% 0.004 197)
800

--color-gray-800

oklch(40.6% 0.004 197)
900

--color-gray-900

oklch(34.3% 0.003 197)
950

--color-gray-950

oklch(29.9% 0.003 197)

Zinc

Neutral

n=9 · 61.2° · 9/8 ratio = Major 2nd · oklch(62.2% 0.007 286.2)

50

--color-zinc-50

oklch(96.9% 0.008 286.3)
100

--color-zinc-100

oklch(93.6% 0.008 286.2)
200

--color-zinc-200

oklch(88.4% 0.007 286.3)
300

--color-zinc-300

oklch(80.6% 0.008 286.2)
400

--color-zinc-400

oklch(71.4% 0.007 286.2)
500

--color-zinc-500

oklch(62.2% 0.007 286.2)
600

--color-zinc-600

oklch(55.1% 0.009 286.1)
700

--color-zinc-700

oklch(48.4% 0.008 286.1)
800

--color-zinc-800

oklch(40.7% 0.007 286.1)
900

--color-zinc-900

oklch(34.3% 0.009 285.9)
950

--color-zinc-950

oklch(29.9% 0.007 286)

Neutral

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(62.2% 0.006 106.6)

50

--color-neutral-50

oklch(96.9% 0.007 106.5)
100

--color-neutral-100

oklch(93.6% 0.005 106.5)
200

--color-neutral-200

oklch(88.4% 0.007 106.5)
300

--color-neutral-300

oklch(80.6% 0.007 106.6)
400

--color-neutral-400

oklch(71.4% 0.006 106.5)
500

--color-neutral-500

oklch(62.2% 0.006 106.6)
600

--color-neutral-600

oklch(55.1% 0.006 106.6)
700

--color-neutral-700

oklch(48.4% 0.006 106.6)
800

--color-neutral-800

oklch(40.4% 0.005 106.6)
900

--color-neutral-900

oklch(34.4% 0.005 106.7)
950

--color-neutral-950

oklch(29.6% 0.005 106.7)

Stone

Neutral

n=3 · 210.6° · 3/2 ratio = Perfect 5th · oklch(62.1% 0.012 106.7)

50

--color-stone-50

oklch(96.8% 0.012 106.6)
100

--color-stone-100

oklch(93.8% 0.012 106.6)
200

--color-stone-200

oklch(88.3% 0.012 106.6)
300

--color-stone-300

oklch(80.5% 0.012 106.7)
400

--color-stone-400

oklch(71.3% 0.011 106.7)
500

--color-stone-500

oklch(62.1% 0.012 106.7)
600

--color-stone-600

oklch(55.3% 0.012 106.8)
700

--color-stone-700

oklch(48.3% 0.013 106.9)
800

--color-stone-800

oklch(40.6% 0.013 107)
900

--color-stone-900

oklch(34.3% 0.012 100.3)
950

--color-stone-950

oklch(29.9% 0.012 107.1)

Ink

Anchor

n=1 · 0° · 1/1 ratio = Unison · oklch(22.1% 0.04 218.1)

50

--color-ink-50

oklch(96.7% 0.029 210)
100

--color-ink-100

oklch(93.6% 0.03 220.6)
200

--color-ink-200

oklch(88.3% 0.031 217.5)
300

--color-ink-300

oklch(80.7% 0.03 218.3)
400

--color-ink-400

oklch(71.4% 0.031 215.8)
500

--color-ink-500

oklch(62.1% 0.03 220)
600

--color-ink-600

oklch(55.3% 0.03 217.4)
700

--color-ink-700

oklch(48.3% 0.031 217.6)
800

--color-ink-800

oklch(40.5% 0.03 219.5)
900

--color-ink-900

oklch(34.4% 0.03 216.7)
★
950
- text
--color-ink-950

oklch(22.1% 0.04 218.1)

Typography

H1 through caption, shown across every authored weight with the ratio math exposed.

H1

step 7

57.33px

weight 200

KBPD-AI / DUSK / MAKE

weight 250

KBPD-AI / DUSK / MAKE

weight 280

KBPD-AI / DUSK / MAKE

weight 300

KBPD-AI / DUSK / MAKE

weight 320

KBPD-AI / DUSK / MAKE

weight 400

KBPD-AI / DUSK / MAKE

weight 500

KBPD-AI / DUSK / MAKE

weight 700

KBPD-AI / DUSK / MAKE
H2

step 6

47.78px

weight 200

Specimen typography cadence

weight 250

Specimen typography cadence

weight 280

Specimen typography cadence

weight 300

Specimen typography cadence

weight 320

Specimen typography cadence

weight 400

Specimen typography cadence

weight 500

Specimen typography cadence

weight 700

Specimen typography cadence
H3

step 5

39.81px

weight 200

The scale stays visible at every tier.

weight 250

The scale stays visible at every tier.

weight 280

The scale stays visible at every tier.

weight 300

The scale stays visible at every tier.

weight 320

The scale stays visible at every tier.

weight 400

The scale stays visible at every tier.

weight 500

The scale stays visible at every tier.

weight 700

The scale stays visible at every tier.
H4

step 4

33.18px

weight 200

Display transitions into interface heading.

weight 250

Display transitions into interface heading.

weight 280

Display transitions into interface heading.

weight 300

Display transitions into interface heading.

weight 320

Display transitions into interface heading.

weight 400

Display transitions into interface heading.

weight 500

Display transitions into interface heading.

weight 700

Display transitions into interface heading.
H5

step 3

27.65px

weight 200

Section headers keep the same proportional rhythm.

weight 250

Section headers keep the same proportional rhythm.

weight 280

Section headers keep the same proportional rhythm.

weight 300

Section headers keep the same proportional rhythm.

weight 320

Section headers keep the same proportional rhythm.

weight 400

Section headers keep the same proportional rhythm.

weight 500

Section headers keep the same proportional rhythm.

weight 700

Section headers keep the same proportional rhythm.
H6

step 2

23.04px

weight 200

Utility labels stay anchored to the ratio.

weight 250

Utility labels stay anchored to the ratio.

weight 280

Utility labels stay anchored to the ratio.

weight 300

Utility labels stay anchored to the ratio.

weight 320

Utility labels stay anchored to the ratio.

weight 400

Utility labels stay anchored to the ratio.

weight 500

Utility labels stay anchored to the ratio.

weight 700

Utility labels stay anchored to the ratio.
Body

step 0

16px

weight 200

Completion. The day's harvest. The made thing handed over.

weight 250

Completion. The day's harvest. The made thing handed over.

weight 280

Completion. The day's harvest. The made thing handed over.

weight 300

Completion. The day's harvest. The made thing handed over.

weight 320

Completion. The day's harvest. The made thing handed over.

weight 400

Completion. The day's harvest. The made thing handed over.

weight 500

Completion. The day's harvest. The made thing handed over.

weight 700

Completion. The day's harvest. The made thing handed over.
Console

step -1

13.33px

weight 200

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

weight 250

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

weight 280

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

weight 300

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

weight 320

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

weight 400

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

weight 500

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

weight 700

kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

Generated Formal Composition

H1: --font-family-serif; --font-size-5; --type-display-weight; --line-height-tight
H2: --font-family-serif; --font-size-4; --type-heading-weight; --line-height-snug
H3: --font-family-serif; --font-size-2; --type-copy-weight; --line-height-relaxed
H4 / Console: --font-family-ui; calc(var(--font-size-base) / var(--type-ratio)); --type-ui-weight; --type-ui-line-height
Body: --font-family-serif; --font-size-base; --type-copy-weight; --line-height-relaxed
Smaller body: --font-family-serif; calc(var(--font-size-base) / var(--type-ratio)); --type-copy-weight; --line-height-snug

Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Spacing Rhythm

Spacing

The scale renders as a visual beat map: each bar is sized directly from its emitted --space-* token, and the cadence callout surfaces whether spacing and type share the same proportional ratio.

Spacing ratio: 1.5

Type ratio: 1.5

Shared polyrhythm: spacing and type both run at 1.5.

--space-1 2px x0.25 baseline subdivision x0.25
--space-2 4px x0.5 baseline subdivision x0.5
--space-3 8px x1 baseline baseline pulse
--space-4 12px x1.5 baseline syncopated pulse x1.5
--space-5 16px x2 baseline measure multiple x2
--space-6 24px x3 baseline measure multiple x3
--space-7 32px x4 baseline measure multiple x4
--space-8 48px x6 baseline measure multiple x6
--space-9 64px x8 baseline measure multiple x8
--space-10 96px x12 baseline measure multiple x12

Edge language

Radii

Each sample box applies the emitted radius rule directly so the corner system can be compared as shape vocabulary rather than abstract numbers.

Elevation hierarchy

Shadows

The cards below step upward through the emitted shadow tokens so the elevation ladder reads in context, not as isolated shadow strings.

Motion personality

Motion is a brand system, not a footnote.

Signature keyframe continuous with easing --motion-easing-default.

Timing rails

Four kinetic lanes map the brand from touch response up through ambient pacing.

Fast rail

Micro-touch responses for hover, focus, and press.

--motion-duration-fast

Hover or focus to preview this rail.

Base rail

Standard component transitions and disclosure beats.

--motion-duration-base

Hover or focus to preview this rail.

Slow rail

Panel lifts, emphasis shifts, and celebratory follow-through.

--motion-duration-slow

Hover or focus to preview this rail.

Slower rail

Ambient loops and choreography that should never feel twitchy.

calc(--motion-duration-slow + --motion-duration-base)

Hover or focus to preview this rail.

Easing curve

The default easing is visualized directly from the brand fixture and applied to the sample puck.

Default easing

cubic-bezier(0.16, 1, 0.3, 1)

Control handles 16 0 and 30 0.

Hover and focus micro-transitions

Compact responses show how the brand handles touch, hover, and focus without over-speaking.

Card response Leaderboard pulse Focus or hover to feel the card lift and deepen. Contribution amount

Transition primitives

Drawer, toast, and menu reveal are CSS-only primitives bound to the same timing and easing rails.

Drawer slide

Toast enter / exit

Contribution saved Toast inherits the brand's response tempo.

Menu reveal

Signature keyframe

The specimen chooses a signature movement from the brand motion name and falls back to a calm breathe when no explicit signature exists.

Signature: continuous

Stagger and choreography

Five linked beats enter on a shared ratio-derived sequence so the cadence feels authored rather than simultaneous.

Sequence step uses --motion-stagger-step.

Interaction beats

The full loop runs through button press, card response, toast confirmation, and a brief celebration burst.

Idle-state motion

A restrained ambient loop keeps the surface alive without looking busy or distracting from content.

Motion hierarchy

Primary, secondary, and tertiary tones form a readable kinetic scale in the same way typography forms a type scale.

Primary motion --motion-duration-base

Reserved for the main state change that asks for attention.

Secondary motion --motion-duration-fast

Supports the primary beat without competing for emphasis.

Tertiary motion --motion-duration-slow

Ambient reinforcement and idle feedback under the surface.

Components

Product primitives for KBPD-AI / DUSK / MAKE, rendered under pointer and touch contexts with source-bound state styling.

Design-source contract: Named tiers, CSS variables, and semantic aliases before component styling.
Component ownership: shadcn-style copy-owned primitives: the site owns the markup and styling rather than fighting a themed library.
Interaction model: Native HTML now; complex menus/dialogs should graduate to Ark/Zag state machines before reuse in client apps.
Specimen discipline: Storybook-style state matrix: every primitive shows rest, hover, focus, active, mobile, and source provenance.

Rest

Hover

Focus

Active

Rest

Hover

Rest

Focus

Default surface

Weekend dues

Editorial warmth stays quiet on standard surfaces so the content keeps the focus.

Elevated surface

Milestone reached

Elevation steps forward for payment confirmations, nudges, and earned celebrations.

Trip name Default text field Contribution note Focused sample Invite code Disabled sample Goal amount Goal must stay above total contributions

Line item	Status	Amount
Palm Springs House	Confirmed	$780
Airport SUV	Pending	$240
Poolside Dinner	Paid	$315
Welcome Bags	Tracked	$180

Lead contributors
Booked items
Pending invites
Goal remaining
Celebration budget

Sample Surface

A Kitty pool-contribution card and leaderboard fragment, themed for KBPD-AI / DUSK / MAKE and sized for both pointer and touch contexts.

Kitty pool

Kitty Palm Springs House

Completion. The day's harvest. The made thing handed over.

Raised $1,745 Goal $2,400

Pool progress $655 left to close the house fund

Alicia Booked the villa
$640
Maya Covered flights
$585
Jordan Fronted groceries
$520

About

The brand prompt body, rendered from Markdown with the prompt metadata surfaced up front.

Mood: Completion. The day's harvest. The made thing handed over.

Audience: kbpd-ai cool register — default scope: /pricing, /start, checkout-confirmation, paid-archive-delivery

KBPD-AI / DUSK / MAKE — synthesized by orchestrate_ocs.mjs from kbpd-ai primitives

Generated Formal Composition

Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

UX Framework Contract

Navigation Shell

Buttons

Cards

Weekend dues

Milestone reached

Inputs

Toggles

Table

Data Viz

Kitty Palm Springs House

Top contributors

Timing rails

Easing curve

Hover and focus micro-transitions

Transition primitives

Signature keyframe

Stagger and choreography

Interaction beats

Idle-state motion

Motion hierarchy

Generated Formal Composition

Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

UX Framework Contract

Navigation Shell

Buttons

Cards

Weekend dues

Milestone reached

Inputs

Toggles

Table

Data Viz

Kitty Palm Springs House

Top contributors

Timing rails

Easing curve

Hover and focus micro-transitions

Transition primitives

Signature keyframe

Stagger and choreography

Interaction beats

Idle-state motion

Motion hierarchy

Generated Formal Composition

Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

UX Framework Contract

Navigation Shell

Buttons