Color
The palette is Tailwind's default colors, namespaced under the zmoki- prefix — every group available as zmoki-slate,claravine-green, zmoki-stone, and so on, each a full 50→950 scale. The system is warm and minimal: a warm off-white canvas (zmoki-stone-50), soft white cards, and a single claravine-green accent — the other ramps wait until you want more color. No inline hex — only the utility classes.
Custom
claravine-green
claravine-green
50
#F7FDFA
100
#E8F9F1
200
#C9F0DF
300
#8BE0BA
400
#5DD39E
500
#2CA26D
600
#1F744E
700
#1B6443
800
#175539
900
#13452F
950
#0A271A
Neutrals
slate
zmoki-slate
50
oklch(98.4% 0.003 247.858)
100
oklch(96.8% 0.007 247.896)
200
oklch(92.9% 0.013 255.508)
300
oklch(86.9% 0.022 252.894)
400
oklch(70.4% 0.04 256.788)
500
oklch(55.4% 0.046 257.417)
600
oklch(44.6% 0.043 257.281)
700
oklch(37.2% 0.044 257.287)
800
oklch(27.9% 0.041 260.031)
900
oklch(20.8% 0.042 265.755)
950
oklch(12.9% 0.042 264.695)
gray
zmoki-gray
50
oklch(98.5% 0.002 247.839)
100
oklch(96.7% 0.003 264.542)
200
oklch(92.8% 0.006 264.531)
300
oklch(87.2% 0.01 258.338)
400
oklch(70.7% 0.022 261.325)
500
oklch(55.1% 0.027 264.364)
600
oklch(44.6% 0.03 256.802)
700
oklch(37.3% 0.034 259.733)
800
oklch(27.8% 0.033 256.848)
900
oklch(21% 0.034 264.665)
950
oklch(13% 0.028 261.692)
zinc
zmoki-zinc
50
oklch(98.5% 0 0)
100
oklch(96.7% 0.001 286.375)
200
oklch(92% 0.004 286.32)
300
oklch(87.1% 0.006 286.286)
400
oklch(70.5% 0.015 286.067)
500
oklch(55.2% 0.016 285.938)
600
oklch(44.2% 0.017 285.786)
700
oklch(37% 0.013 285.805)
800
oklch(27.4% 0.006 286.033)
900
oklch(21% 0.006 285.885)
950
oklch(14.1% 0.005 285.823)
neutral
zmoki-neutral
50
oklch(98.5% 0 0)
100
oklch(97% 0 0)
200
oklch(92.2% 0 0)
300
oklch(87% 0 0)
400
oklch(70.8% 0 0)
500
oklch(55.6% 0 0)
600
oklch(43.9% 0 0)
700
oklch(37.1% 0 0)
800
oklch(26.9% 0 0)
900
oklch(20.5% 0 0)
950
oklch(14.5% 0 0)
stone
zmoki-stone
50
oklch(98.5% 0.001 106.423)
100
oklch(97% 0.001 106.424)
200
oklch(92.3% 0.003 48.717)
300
oklch(86.9% 0.005 56.366)
400
oklch(70.9% 0.01 56.259)
500
oklch(55.3% 0.013 58.071)
600
oklch(44.4% 0.011 73.639)
700
oklch(37.4% 0.01 67.558)
800
oklch(26.8% 0.007 34.298)
900
oklch(21.6% 0.006 56.043)
950
oklch(14.7% 0.004 49.25)
Colors
red
zmoki-red
50
oklch(97.1% 0.013 17.38)
100
oklch(93.6% 0.032 17.717)
200
oklch(88.5% 0.062 18.334)
300
oklch(80.8% 0.114 19.571)
400
oklch(70.4% 0.191 22.216)
500
oklch(63.7% 0.237 25.331)
600
oklch(57.7% 0.245 27.325)
700
oklch(50.5% 0.213 27.518)
800
oklch(44.4% 0.177 26.899)
900
oklch(39.6% 0.141 25.723)
950
oklch(25.8% 0.092 26.042)
orange
zmoki-orange
50
oklch(98% 0.016 73.684)
100
oklch(95.4% 0.038 75.164)
200
oklch(90.1% 0.076 70.697)
300
oklch(83.7% 0.128 66.29)
400
oklch(75% 0.183 55.934)
500
oklch(70.5% 0.213 47.604)
600
oklch(64.6% 0.222 41.116)
700
oklch(55.3% 0.195 38.402)
800
oklch(47% 0.157 37.304)
900
oklch(40.8% 0.123 38.172)
950
oklch(26.6% 0.079 36.259)
amber
zmoki-amber
50
oklch(98.7% 0.022 95.277)
100
oklch(96.2% 0.059 95.617)
200
oklch(92.4% 0.12 95.746)
300
oklch(87.9% 0.169 91.605)
400
oklch(82.8% 0.189 84.429)
500
oklch(76.9% 0.188 70.08)
600
oklch(66.6% 0.179 58.318)
700
oklch(55.5% 0.163 48.998)
800
oklch(47.3% 0.137 46.201)
900
oklch(41.4% 0.112 45.904)
950
oklch(27.9% 0.077 45.635)
yellow
zmoki-yellow
50
oklch(98.7% 0.026 102.212)
100
oklch(97.3% 0.071 103.193)
200
oklch(94.5% 0.129 101.54)
300
oklch(90.5% 0.182 98.111)
400
oklch(85.2% 0.199 91.936)
500
oklch(79.5% 0.184 86.047)
600
oklch(68.1% 0.162 75.834)
700
oklch(55.4% 0.135 66.442)
800
oklch(47.6% 0.114 61.907)
900
oklch(42.1% 0.095 57.708)
950
oklch(28.6% 0.066 53.813)
lime
zmoki-lime
50
oklch(98.6% 0.031 120.757)
100
oklch(96.7% 0.067 122.328)
200
oklch(93.8% 0.127 124.321)
300
oklch(89.7% 0.196 126.665)
400
oklch(84.1% 0.238 128.85)
500
oklch(76.8% 0.233 130.85)
600
oklch(64.8% 0.2 131.684)
700
oklch(53.2% 0.157 131.589)
800
oklch(45.3% 0.124 130.933)
900
oklch(40.5% 0.101 131.063)
950
oklch(27.4% 0.072 132.109)
green
zmoki-green
50
oklch(98.2% 0.018 155.826)
100
oklch(96.2% 0.044 156.743)
200
oklch(92.5% 0.084 155.995)
300
oklch(87.1% 0.15 154.449)
400
oklch(79.2% 0.209 151.711)
500
oklch(72.3% 0.219 149.579)
600
oklch(62.7% 0.194 149.214)
700
oklch(52.7% 0.154 150.069)
800
oklch(44.8% 0.119 151.328)
900
oklch(39.3% 0.095 152.535)
950
oklch(26.6% 0.065 152.934)
emerald
zmoki-emerald
50
oklch(97.9% 0.021 166.113)
100
oklch(95% 0.052 163.051)
200
oklch(90.5% 0.093 164.15)
300
oklch(84.5% 0.143 164.978)
400
oklch(76.5% 0.177 163.223)
500
oklch(69.6% 0.17 162.48)
600
oklch(59.6% 0.145 163.225)
700
oklch(50.8% 0.118 165.612)
800
oklch(43.2% 0.095 166.913)
900
oklch(37.8% 0.077 168.94)
950
oklch(26.2% 0.051 172.552)
teal
zmoki-teal
50
oklch(98.4% 0.014 180.72)
100
oklch(95.3% 0.051 180.801)
200
oklch(91% 0.096 180.426)
300
oklch(85.5% 0.138 181.071)
400
oklch(77.7% 0.152 181.912)
500
oklch(70.4% 0.14 182.503)
600
oklch(60% 0.118 184.704)
700
oklch(51.1% 0.096 186.391)
800
oklch(43.7% 0.078 188.216)
900
oklch(38.6% 0.063 188.416)
950
oklch(27.7% 0.046 192.524)
cyan
zmoki-cyan
50
oklch(98.4% 0.019 200.873)
100
oklch(95.6% 0.045 203.388)
200
oklch(91.7% 0.08 205.041)
300
oklch(86.5% 0.127 207.078)
400
oklch(78.9% 0.154 211.53)
500
oklch(71.5% 0.143 215.221)
600
oklch(60.9% 0.126 221.723)
700
oklch(52% 0.105 223.128)
800
oklch(45% 0.085 224.283)
900
oklch(39.8% 0.07 227.392)
950
oklch(30.2% 0.056 229.695)
sky
zmoki-sky
50
oklch(97.7% 0.013 236.62)
100
oklch(95.1% 0.026 236.824)
200
oklch(90.1% 0.058 230.902)
300
oklch(82.8% 0.111 230.318)
400
oklch(74.6% 0.16 232.661)
500
oklch(68.5% 0.169 237.323)
600
oklch(58.8% 0.158 241.966)
700
oklch(50% 0.134 242.749)
800
oklch(44.3% 0.11 240.79)
900
oklch(39.1% 0.09 240.876)
950
oklch(29.3% 0.066 243.157)
blue
zmoki-blue
50
oklch(97% 0.014 254.604)
100
oklch(93.2% 0.032 255.585)
200
oklch(88.2% 0.059 254.128)
300
oklch(80.9% 0.105 251.813)
400
oklch(70.7% 0.165 254.624)
500
oklch(62.3% 0.214 259.815)
600
oklch(54.6% 0.245 262.881)
700
oklch(48.8% 0.243 264.376)
800
oklch(42.4% 0.199 265.638)
900
oklch(37.9% 0.146 265.522)
950
oklch(28.2% 0.091 267.935)
indigo
zmoki-indigo
50
oklch(96.2% 0.018 272.314)
100
oklch(93% 0.034 272.788)
200
oklch(87% 0.065 274.039)
300
oklch(78.5% 0.115 274.713)
400
oklch(67.3% 0.182 276.935)
500
oklch(58.5% 0.233 277.117)
600
oklch(51.1% 0.262 276.966)
700
oklch(45.7% 0.24 277.023)
800
oklch(39.8% 0.195 277.366)
900
oklch(35.9% 0.144 278.697)
950
oklch(25.7% 0.09 281.288)
violet
zmoki-violet
50
oklch(96.9% 0.016 293.756)
100
oklch(94.3% 0.029 294.588)
200
oklch(89.4% 0.057 293.283)
300
oklch(81.1% 0.111 293.571)
400
oklch(70.2% 0.183 293.541)
500
oklch(60.6% 0.25 292.717)
600
oklch(54.1% 0.281 293.009)
700
oklch(49.1% 0.27 292.581)
800
oklch(43.2% 0.232 292.759)
900
oklch(38% 0.189 293.745)
950
oklch(28.3% 0.141 291.089)
purple
zmoki-purple
50
oklch(97.7% 0.014 308.299)
100
oklch(94.6% 0.033 307.174)
200
oklch(90.2% 0.063 306.703)
300
oklch(82.7% 0.119 306.383)
400
oklch(71.4% 0.203 305.504)
500
oklch(62.7% 0.265 303.9)
600
oklch(55.8% 0.288 302.321)
700
oklch(49.6% 0.265 301.924)
800
oklch(43.8% 0.218 303.724)
900
oklch(38.1% 0.176 304.987)
950
oklch(29.1% 0.149 302.717)
fuchsia
zmoki-fuchsia
50
oklch(97.7% 0.017 320.058)
100
oklch(95.2% 0.037 318.852)
200
oklch(90.3% 0.076 319.62)
300
oklch(83.3% 0.145 321.434)
400
oklch(74% 0.238 322.16)
500
oklch(66.7% 0.295 322.15)
600
oklch(59.1% 0.293 322.896)
700
oklch(51.8% 0.253 323.949)
800
oklch(45.2% 0.211 324.591)
900
oklch(40.1% 0.17 325.612)
950
oklch(29.3% 0.136 325.661)
pink
zmoki-pink
50
oklch(97.1% 0.014 343.198)
100
oklch(94.8% 0.028 342.258)
200
oklch(89.9% 0.061 343.231)
300
oklch(82.3% 0.12 346.018)
400
oklch(71.8% 0.202 349.761)
500
oklch(65.6% 0.241 354.308)
600
oklch(59.2% 0.249 0.584)
700
oklch(52.5% 0.223 3.958)
800
oklch(45.9% 0.187 3.815)
900
oklch(40.8% 0.153 2.432)
950
oklch(28.4% 0.109 3.907)
rose
zmoki-rose
50
oklch(96.9% 0.015 12.422)
100
oklch(94.1% 0.03 12.58)
200
oklch(89.2% 0.058 10.001)
300
oklch(81% 0.117 11.638)
400
oklch(71.2% 0.194 13.428)
500
oklch(64.5% 0.246 16.439)
600
oklch(58.6% 0.253 17.585)
700
oklch(51.4% 0.222 16.935)
800
oklch(45.5% 0.188 13.697)
900
oklch(41% 0.159 10.272)
950
oklch(27.1% 0.105 12.094)
Usage
Reference any palette as a Tailwind utility with the zmoki- prefix and a shade. The system's accent is claravine-green on a warm zmoki-stone-50 canvas.
- bg-claravine-green-600 / text-white— accent: links, buttons, CTAs (hover claravine-green-700, focus ring claravine-green-500)
- bg-zmoki-stone-50— page background (warm off-white)
- text-zmoki-stone-900— ink: body text & headings
- text-zmoki-stone-500 / text-zmoki-stone-600— muted & secondary text
- bg-white + border border-zmoki-stone-200 + shadow-sm— cards & panels (soft border, subtle shadow, rounded)
Re-skinning? To recolor the whole site, find/replaceclaravine-green with another Tailwind group. For a brand color that isn't in Tailwind, build a 50→950 scale from your base oncolorhexa.com ("Shades and Tints"), add it to customPalettes in src/design-tokens.mjs (the claravine-greenscale is the worked example), and it appears here automatically.
Combinations must pass WCAG AA — every text/background pair needs ≥ 4.5:1 (≥ 3:1 for large text, borders, and focus rings). Fills carrying white text (CTA, buttons, hero) usually need a -600/-700 shade to qualify. Check pairs with theFigma contrast checker.