# v0 Design Systems 2.0

v0 · June 25, 2026

[Original publication](https://x.com/v0/status/2070187537369583778)

I announced Design Systems 2.0 for v0, which lets v0 build with your real production components. You connect GitHub, Storybook, Figma, npm packages, documentation or a private registry, and the agent uses those components when it makes your app. It isn't recreating your design system or making a second source of truth in some other repo you have to manage [(2:11)](#t=131). It brings in the real components, the usage guidelines, colors, type and icons, and learns how to use them.

For the demo I pretended I was a designer at Microsoft [(0:21)](#t=21). I brought in Fluent, their design system, and gave v0 a screenshot of Outlook, and that's all I gave it. It didn't just make something that looks like Outlook, it made Outlook.

![Outlook, made by v0 from a screenshot with Microsoft's Fluent design system, captioned as I say: “and here's what it made. It didn't just make something that looks like Outlook, it made Outlook. This”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/v0-design-systems-2/outlook-ofLsW9RAcK9XOkAnWbehFnBpMIAB4n.mp4 "Clip")

The selected state is what blew my mind the first time I saw it [(0:37)](#t=37): the bar grows out from the middle, and deselecting it has a different easing. The icons change color separately from the text, the buttons without text get tooltips and the ones with text don't, and dark mode uses Fluent's dark blues [(1:02)](#t=62). It would take me months of working in Fluent to understand that level of detail, and I got it in one prompt.

![Selecting a message in v0's Outlook, with Fluent's selection bar, captioned as I say: “selected state is what blew my mind when I first saw it. That bar grows out from the middle, and then when I deselect it, it has a different easing duration. The icons change”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/v0-design-systems-2/selected-state-AzRf4VTCtRUug8I4VETiX9S4lp5Ur3.mp4 "Clip")

The night before, I'd been testing it with Shopify's Polaris to reimagine GitHub, and IBM's Carbon to reimagine Slack and Airbnb [(1:27)](#t=87). Importing one is a GitHub link, a Figma file or whatever else you have [(1:44)](#t=104), and once a design system is in, anyone on the team can add it to a new chat and get to work. I'm on the team that makes [v0 at Vercel](https://www.tomjohn.design/content/vercel).

![Opening v0's Import Design System dialog, captioned as I say: “works. On the homepage of v0, click the plus button, go down to Design Systems, and click Import Design System. On this modal,”](https://nlzkl2bo0qmd3uti.public.blob.vercel-storage.com/talks/clips/v0-design-systems-2/import-Ks9oMK9I7vOJPffa3WH30yRhSpmifZ.mp4 "Clip")