Identity Forge

Give v0 a design system

v0 supports shadcn registries, Tailwind configuration, and CSS variables. Give it the kit's registry item and use the matching DESIGN.md as the brief.

Updated July 13, 2026

Why v0 needs a design system

v0 is fast and its default output is recognizably v0: the same neutral surfaces, the same Geist/Inter type, the same rounded cards. That's fine for a prototype and wrong for a brand. Because v0 builds on shadcn/ui and Tailwind, it will happily use a different token set and type pairing if you give it one; the trick is handing it a complete, coherent system rather than a few loose color choices.

The kit you'll give it

Here is the free ambient-sage kit, rendered from its real tokens. This is the coherent system you hand to v0: semantic colors, fonts, and treatments, not just a palette:

Ambient Sage

After Work Chill

Double tap on a widget to edit settings

Save SettingsLearn more

Plus Jakarta Sans · 28 semantic tokens · light + dark

Ambient Sage: the exact tokens and fonts v0 will theme against once you apply the kit.

Give v0 the kit

  1. 1

    Paste the DESIGN.md as the brief

    Open the kit's page in the gallery (e.g. /kits/ambient-sage) and copy its DESIGN.md: the intent, type system, spacing, component treatments, motifs, and do's & don'ts. Paste it into the v0 chat and tell v0 to follow it for everything it builds.

  2. 2

    Apply the tokens via the shadcn registry

    Once you've connected v0's output to a project (via GitHub or Download), run the kit's registry command there to install its CSS variables into your shadcn theme:

    npx shadcn add https://identityforge.io/r/ambient-sage.json
  3. 3

    Or paste the CSS variables directly

    No shadcn setup? Copy the kit's CSS-variable export from its kit page and paste the :root and .dark blocks into your global stylesheet. v0's generated components already reference --background, --primary, and friends.

  4. 4

    Ask v0 to rebuild on the system

    Now prompt normally: v0 renders against your tokens and follows the DESIGN.md's rules.

    Build a pricing page. Use only the design tokens already in
the theme and follow the DESIGN.md I pasted.

The registry URL is the shareable artifact

Every public kit exposes a stable shadcn registry item at https://identityforge.io/r/<slug>.json. That single URL carries the whole token set: hand it to v0, a teammate, or another builder and they get the identical theme.

Why this beats a hand-picked palette

Dropping three brand colors into v0 gets you three colors and a lot of undefined defaults for the other 25 roles: hover states, muted text, borders, chart series, dark mode. A kit defines all 28 semantic roles in light and dark, so v0 never has to improvise the in-between values. That's the difference between a themed app and a recolored one. Read semantic color tokens explained for the full role list.

Same idea in the other web builders: Lovable and Bolt. For coding agents, start at the pillar guide.

FAQ

How do I give v0 a design system?

Paste the kit's DESIGN.md into the v0 chat as the brief, and apply the kit's tokens via its shadcn registry item (`npx shadcn add https://identityforge.io/r/<slug>.json`) or by pasting its CSS variables into your theme. v0's shadcn/Tailwind output then renders against your tokens.

Does v0 support shadcn registries?

v0 generates shadcn/ui code, so a kit's registry item installs cleanly into the project it produces. You run `npx shadcn add <registry-url>` in that project (via GitHub sync or after downloading), then keep prompting v0 to use the theme.

Can I do this without shadcn?

Yes. Copy the kit's CSS-variable export from its kit page and paste the :root and .dark blocks into your global stylesheet. The semantic token names are the same either way.

All guides