Give v0 a design system

v0 is fast and its default output is recognizably v0: the same neutral surfaces, the same Geist 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.

Here is the free amber-sportswear-editorial kit rendered from its real tokens. A system like this, semantic colors, fonts, and treatments rather than a loose palette, is what you hand to v0 (the commands below use ambient-sage, another free 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:

   Copy

   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.

   Copy

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

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.

• Design Systems - v0 Docs: v0's current design-systems workflow adds sources (repos, Figma, links, attachments) and saves the design system as a skill; the shadcn registry guide is labeled legacy.