shilp-sutra
Themer · Result

Modern & balanced.

One prompt. Or paste the CSS yourself.

Slightly-rounded + comfortable + crisp borders + subtle shadows. Modern SaaS baseline.

archetype=stripeaccent 250° c0.20(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: stripe
 * accent:    hue 250° / chroma 0.200
 *
 * 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: 10px;
  --radius-control: 6px;
  --radius-control-inner: 4px;

  /* Accent ramp (OKLCH, 12 steps) */
  --color-accent-1: oklch(0.99 0.0053 250);
  --color-accent-2: oklch(0.97 0.0158 250);
  --color-accent-3: oklch(0.93 0.0368 250);
  --color-accent-4: oklch(0.89 0.0579 250);
  --color-accent-5: oklch(0.84 0.0842 250);
  --color-accent-6: oklch(0.78 0.1053 250);
  --color-accent-7: oklch(0.7 0.1474 250);
  --color-accent-8: oklch(0.62 0.1789 250);
  --color-accent-9: oklch(0.55 0.2 250);
  --color-accent-10: oklch(0.5 0.2 250);
  --color-accent-11: oklch(0.43 0.1474 250);
  --color-accent-12: oklch(0.32 0.0842 250);
  --color-accent-fg: oklch(0.99 0 0);
}

.dark {
  --color-accent-1: oklch(0.11 0.0053 250);
  --color-accent-2: oklch(0.17 0.0158 250);
  --color-accent-3: oklch(0.23 0.0421 250);
  --color-accent-4: oklch(0.29 0.0632 250);
  --color-accent-5: oklch(0.34 0.0842 250);
  --color-accent-6: oklch(0.38 0.1053 250);
  --color-accent-7: oklch(0.44 0.1368 250);
  --color-accent-8: oklch(0.53 0.1895 250);
  --color-accent-9: oklch(0.63 0.22 250);
  --color-accent-10: oklch(0.58 0.22 250);
  --color-accent-11: oklch(0.76 0.1368 250);
  --color-accent-12: oklch(0.88 0.0526 250);
  --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