shilp-sutra
Themer · Result

Minimal & monochrome.

One prompt. Or paste the CSS yourself.

Sharp + compact + monochrome accent. Bold type. Engineering-led minimalism.

archetype=vercelaccent 0° c0.01(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: vercel
 * accent:    hue 0° / chroma 0.010
 *
 * 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: 6px;
  --radius-control: 4px;
  --radius-control-inner: 2px;

  /* Accent ramp (OKLCH, 12 steps) */
  --color-accent-1: oklch(0.99 0.0003 0);
  --color-accent-2: oklch(0.97 0.0008 0);
  --color-accent-3: oklch(0.93 0.0018 0);
  --color-accent-4: oklch(0.89 0.0029 0);
  --color-accent-5: oklch(0.84 0.0042 0);
  --color-accent-6: oklch(0.78 0.0053 0);
  --color-accent-7: oklch(0.7 0.0074 0);
  --color-accent-8: oklch(0.62 0.0089 0);
  --color-accent-9: oklch(0.55 0.01 0);
  --color-accent-10: oklch(0.5 0.01 0);
  --color-accent-11: oklch(0.43 0.0074 0);
  --color-accent-12: oklch(0.32 0.0042 0);
  --color-accent-fg: oklch(0.99 0 0);
}

.dark {
  --color-accent-1: oklch(0.11 0.0003 0);
  --color-accent-2: oklch(0.17 0.0008 0);
  --color-accent-3: oklch(0.23 0.0021 0);
  --color-accent-4: oklch(0.29 0.0032 0);
  --color-accent-5: oklch(0.34 0.0042 0);
  --color-accent-6: oklch(0.38 0.0053 0);
  --color-accent-7: oklch(0.44 0.0068 0);
  --color-accent-8: oklch(0.53 0.0095 0);
  --color-accent-9: oklch(0.63 0.011 0);
  --color-accent-10: oklch(0.58 0.011 0);
  --color-accent-11: oklch(0.76 0.0068 0);
  --color-accent-12: oklch(0.88 0.0026 0);
  --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