shilp-sutra
Themer · Result

Bold & layered.

One prompt. Or paste the CSS yourself.

Rounded + comfortable + crisp + dramatic shadows. Vibrant accents. Familiar to mobile-first teams.

archetype=materialaccent 260° c0.22(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: material
 * accent:    hue 260° / chroma 0.220
 *
 * 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: 16px;
  --radius-control: 12px;
  --radius-control-inner: 10px;

  /* Accent ramp (OKLCH, 12 steps) */
  --color-accent-1: oklch(0.99 0.0058 260);
  --color-accent-2: oklch(0.97 0.0174 260);
  --color-accent-3: oklch(0.93 0.0405 260);
  --color-accent-4: oklch(0.89 0.0637 260);
  --color-accent-5: oklch(0.84 0.0926 260);
  --color-accent-6: oklch(0.78 0.1158 260);
  --color-accent-7: oklch(0.7 0.1621 260);
  --color-accent-8: oklch(0.62 0.1968 260);
  --color-accent-9: oklch(0.55 0.22 260);
  --color-accent-10: oklch(0.5 0.22 260);
  --color-accent-11: oklch(0.43 0.1621 260);
  --color-accent-12: oklch(0.32 0.0926 260);
  --color-accent-fg: oklch(0.99 0 0);
}

.dark {
  --color-accent-1: oklch(0.11 0.0058 260);
  --color-accent-2: oklch(0.17 0.0174 260);
  --color-accent-3: oklch(0.23 0.0463 260);
  --color-accent-4: oklch(0.29 0.0695 260);
  --color-accent-5: oklch(0.34 0.0926 260);
  --color-accent-6: oklch(0.38 0.1158 260);
  --color-accent-7: oklch(0.44 0.1505 260);
  --color-accent-8: oklch(0.53 0.2084 260);
  --color-accent-9: oklch(0.63 0.242 260);
  --color-accent-10: oklch(0.58 0.242 260);
  --color-accent-11: oklch(0.76 0.1505 260);
  --color-accent-12: oklch(0.88 0.0579 260);
  --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