shilp-sutra
Theming

Be yourself in OKLCH.

Pick a hue. Set the chroma. The twelve-step ramp generates itself.

Every component on the site recolours live as you move the sliders. Buttons, badges, alerts, focus rings. Drop the exported CSS into your project and your whole app follows.

No theme provider. CSS-vars only.Light + dark generated together.Same algorithm shilp-sutra ships with.
Controls

Pick a hue. The whole site follows.

Quick picks
12-step ramp (light)
12-step ramp (dark)
Live preview

Components recolor live as you move the sliders.

NewLiveDraftRemovedBeta
Brand-tinted notice

Surface, border, and text all read against the active hue. The DS does the heavy lifting; you only pick the colour.

Export CSS
:root {
  --color-accent-1: oklch(0.99 0.005 360);
  --color-accent-2: oklch(0.97 0.015 360);
  --color-accent-3: oklch(0.93 0.035 360);
  --color-accent-4: oklch(0.89 0.055 360);
  --color-accent-5: oklch(0.84 0.08 360);
  --color-accent-6: oklch(0.78 0.1 360);
  --color-accent-7: oklch(0.7 0.14 360);
  --color-accent-8: oklch(0.62 0.17 360);
  --color-accent-9: oklch(0.55 0.19 360);
  --color-accent-10: oklch(0.5 0.19 360);
  --color-accent-11: oklch(0.43 0.14 360);
  --color-accent-12: oklch(0.32 0.08 360);
  --color-accent-fg: oklch(0.99 0 0);
}
.dark {
  --color-accent-1: oklch(0.11 0.005 360);
  --color-accent-2: oklch(0.17 0.015 360);
  --color-accent-3: oklch(0.23 0.04 360);
  --color-accent-4: oklch(0.29 0.06 360);
  --color-accent-5: oklch(0.34 0.08 360);
  --color-accent-6: oklch(0.38 0.1 360);
  --color-accent-7: oklch(0.44 0.13 360);
  --color-accent-8: oklch(0.53 0.18 360);
  --color-accent-9: oklch(0.63 0.209 360);
  --color-accent-10: oklch(0.58 0.209 360);
  --color-accent-11: oklch(0.76 0.13 360);
  --color-accent-12: oklch(0.88 0.05 360);
  --color-accent-fg: oklch(0.13 0 0);
}

Paste this into your consumer CSS after the @import "@devalok/shilp-sutra/css" line. Your whole app picks up the new ramp instantly. See the customize-brand recipe for deeper customizations (radius, fonts, spacing).

Not sure where to start?
Try the Themer.

Four entry doors — pick an archetype, paste your brand color, take a wizard, or just see a result page. Each drops you at install + CSS to paste, no editing required.

Open the Themer →
Going deeper
Radius, fonts, spacing.

Every other token follows the same pattern as the accent ramp. Override the primitives you care about, leave the rest alone.

Read the customize-brand recipe →
Why OKLCH
Perceptually uniform.

Equal lightness numbers read as equal lightness to the eye. A step-9 pink and a step-9 indigo are the same perceived weight; rgb() and hsl() cannot promise that.