shilp-sutra
Themer · Result

Warm & signature.

One prompt. Or paste the CSS yourself.

Devalok signature. Warm-tinted grain on surfaces, halo focus rings, pink accent, balanced rhythm.

archetype=devalokaccent 340° c0.19(override)

Paste it. Ship it.

Your AI editor installs shilp-sutra, applies this theme, and verifies the result.

Prefer to do it by hand?

Install, paste, verify.

Three steps — about a minute. Skip this section entirely if you used the prompt above.

1

Install

bash
pnpm add @devalok/shilp-sutra framer-motion
pnpm add -D tailwindcss@^4 @tailwindcss/postcss
pnpm add -D @devalok/eslint-plugin-shilp-sutra   # lint rules + migration autofixes
2

Paste this CSS

Drop into your global stylesheet, after the @import "@devalok/shilp-sutra/css"; line. Not inside any @layer.

css
/* shilp-sutra Themer output
 * archetype: devalok
 * accent:    hue 340° / chroma 0.190
 *
 * Paste into your global stylesheet, AFTER the shilp-sutra import:
 *   @import "tailwindcss";
 *   @import "@devalok/shilp-sutra/css";
 *   /* this block here */
 */

:root {
  /* Role tokens — derived from archetype + density + shape */
  --radius-surface: 12px;
  --radius-control: 8px;
  --radius-control-inner: 6px;

  /* Accent ramp (OKLCH, 12 steps) */
  --color-accent-1: oklch(0.99 0.005 340);
  --color-accent-2: oklch(0.97 0.015 340);
  --color-accent-3: oklch(0.93 0.035 340);
  --color-accent-4: oklch(0.89 0.055 340);
  --color-accent-5: oklch(0.84 0.08 340);
  --color-accent-6: oklch(0.78 0.1 340);
  --color-accent-7: oklch(0.7 0.14 340);
  --color-accent-8: oklch(0.62 0.17 340);
  --color-accent-9: oklch(0.55 0.19 340);
  --color-accent-10: oklch(0.5 0.19 340);
  --color-accent-11: oklch(0.43 0.14 340);
  --color-accent-12: oklch(0.32 0.08 340);
  --color-accent-fg: oklch(0.99 0 0);
}

.dark {
  --color-accent-1: oklch(0.11 0.005 340);
  --color-accent-2: oklch(0.17 0.015 340);
  --color-accent-3: oklch(0.23 0.04 340);
  --color-accent-4: oklch(0.29 0.06 340);
  --color-accent-5: oklch(0.34 0.08 340);
  --color-accent-6: oklch(0.38 0.1 340);
  --color-accent-7: oklch(0.44 0.13 340);
  --color-accent-8: oklch(0.53 0.18 340);
  --color-accent-9: oklch(0.63 0.209 340);
  --color-accent-10: oklch(0.58 0.209 340);
  --color-accent-11: oklch(0.76 0.13 340);
  --color-accent-12: oklch(0.88 0.05 340);
  --color-accent-fg: oklch(0.13 0 0);
}
3

Verify with a Button + Card

Open any page that uses Button and Card. Radius + accent should match the preview on the right.

Want to tweak more?

The CSS the Themer emits covers role tokens + the accent ramp. Everything else (font stack, spacing scale, focus ring, texture) is overridable the same way: write the CSS variable in :root and it cascades. See the customize-brand recipe for the full variable list.

Result — Themer · shilp-sutra