{"id":"2075589636227735902","url":"https://x.com/v0/status/2075589636227735902","text":"","author":{"name":"v0","username":"v0","avatarUrl":"https://pbs.twimg.com/profile_images/1955397769138667520/XoWT5Huy_200x200.jpg"},"createdAt":"Fri Jul 10 14:35:06 +0000 2026","engagement":{"replies":2,"retweets":28,"likes":385,"views":244027},"article":{"title":"Inside v0 Design Systems 2.0","previewText":"In 1976, NASA produced a manual. It told everyone at the agency exactly how to present the NASA name: the logotype, a sleek red wordmark everyone came to call the Worm, the spacing around it, the","coverImageUrl":"https://pbs.twimg.com/media/HM35sesWsAAVcv7.jpg","content":"In 1976, NASA produced [a manual](https://www.nasa.gov/wp-content/uploads/2015/01/nasa_graphics_manual_nhb_1430-2_jan_1976.pdf). It told everyone at the agency exactly how to present the NASA name: the logotype, a sleek red wordmark everyone came to call [the Worm](https://www.nasa.gov/general/the-worm-is-back/), the spacing around it, the colors, where it could sit on a letterhead and where it could sit on the side of a rocket.\n\nIt meant thousands of people, across thousands of documents and vehicles, could stay consistent. That manual is one of the earliest things we'd now call a design system, though the idea runs back through decades of print style guides. Every design system built since exists for the reason NASA's did: a group of humans, working next to other humans, trying to stay consistent as they grow and build.\n\n# How design systems used to work in v0\n\nOne of the most widely requested features in v0 is the ability to bring in your own design system. This request comes the loudest from teams with a lot to hold together: large surface areas, big groups of people and agents touching their sites and apps, and a brand that has to stay consistent everywhere.\n\nSo we built a first version. It ran through a registry: you'd start from the shadcn registry starter and restyle its tokens with your colors and fonts. Next, you'd express each of your components as a registry entry, deploy it, and open pieces into v0 one at a time.\n\nIt worked, and plenty of teams shipped real things with it. But it also had a ceiling. It often meant migrating your existing stack to shadcn, and even then, your design system and its shadcn replica in v0 drifted apart over time.\n\n# What changed\n\nOn June 25 [we announced Design Systems 2.0](https://x.com/v0/status/2070187537369583778), a full rewrite of v0 design systems. \n\nInstead of reshaping your system to fit v0, you can give v0 your real design system. Feed it your docs, your source code, an app that consumes it, your Figma, Storybook and more. v0 analyzes the sources and learns the patterns to use your design system.\n\nThree pieces make \"use my real components\" a reality:\n\n1. Set up once, reused everywhere: Importing a design system creates a skill: a reusable setup that teaches v0 how to build with your system. The skill references your real code, carries the rules for using it, and includes a starter every app begins from. Set it up once and it's there in every chat your team opens.\n\nAs an example, here's the skill for Fluent, Microsoft's design system:\n\n2. Verified against the source on every build: Each time v0 builds, it reads your actual component source, mounted read-only, and checks every piece against it: the prop exists, the token name resolves, the icon is actually exported. As a result, v0 won't reach for a prop or an icon that doesn't exist.\n\n3. Every app starts from a real starter: v0 sets up a working starter with your actual package installed, your provider mounted, your fonts and global styles wired, on-brand from the first render. Every chat you open afterward inherits that starter, so v0 composes from your real primitives instead of hand-rolling lookalikes.\n\nYou can feed v0 many sources. The richer the source, the better the outputs.\n\n- A package: a public or private npm package, a .tgz archive, or a source directory with its own package.json.\n\n- The repo where your components and tokens live.\n\n- A real app that uses the system, the richest source of all, because it shows your providers, fonts, and theme setup wired the way they really are.\n\n- Storybook, docs, or design guidelines, as links.\n\n- Figma frames, as visual reference for composition and density.\n\n- Screenshots, ZIPs, exported packages you drag in.\n\nAnd if you'd rather try it before importing anything of your own, v0 comes with design systems you can try:\n\n- GitHub's [Primer](https://primer.style/)\n\n- IBM's [Carbon](https://carbondesignsystem.com/)\n\n- Microsoft's [Fluent](https://fluent2.microsoft.design/)\n\n- Google's [Material 3](https://m3.material.io/)\n\n- AWS's [Cloudscape](https://cloudscape.design/)\n\nThe question is, how well do they perform in v0?\n\n# A demo: what if 𝚡𝚢𝚣 built GitHub\n\n![](https://pbs.twimg.com/media/HM3piv3WIAARSqD.jpg)\n\nA few weeks ago, @rauchg [posted a screenshot: what if Vercel built GitHub?](https://x.com/rauchg/status/2049959307941179678) A trend on X emerged with dozens of \"What if 𝚡𝚢𝚣 built GitHub\" screenshots. \n\nSo I decided to put it to the test with v0's new design systems feature.\n\nI gave v0 the same prompt multiple times, changing one thing between runs: the design system.\n\n> Build a dense single-page GitHub repo overview dashboard: top bar, left nav, stat cards, and panels for commits, PRs, issues, contributors, and CI/CD.\n\nFive real design systems, one per run: Microsoft's Fluent, IBM's Carbon, Shopify's [Polaris](https://polaris.shopify.com/), AWS's Cloudscape, and GitHub's own Primer. Then once more with no design system attached.\n\nThe results are below. \n\nLook closely. The details are subtle, and they highlight the craft and details of each design team's system.\n\n# Fluent × GitHub\n\n[Open in v0](https://v0.link/z5MFRMX)\n\n![](https://pbs.twimg.com/media/HM3qfZnWsAACaDr.jpg)\n\nLet's start with the search bar.\n\nClick into it and a blue line sweeps open from the center, and the easing going in is different from the easing coming out: it closes faster than it opens. That asymmetry is pure Fluent motion, on a search field, in a throwaway clone.\n\nHover a toolbar icon and the glyph shifts to that exact Fluent blue while a subtle gray fills in behind it and the tooltip fades up.\n\nEven the scrolling is in character. Fluent pins the top bar and lets everything beneath it move as one piece.\n\n# Carbon × GitHub\n\n[Open in v0](https://v0.link/A1ZRh3T)\n\n![](https://pbs.twimg.com/media/HM3q-lCWkAABPoo.jpg)\n\nYou can tell it's IBM before you can say why: the typography, the flat backgrounds, the exact blues, the way the font weights step down the hierarchy.\n\n![](https://pbs.twimg.com/media/HM3rCgvXUAAeSxt.jpg)\n\nThe buttons carry four distinct states: rest, hover, a deeper blue while the mouse is held down, and a focus state with a thin white keyline set into the edge. Hover never shows that keyline; only focus does.\n\n![](https://pbs.twimg.com/media/HM3rGr2W4AAcF2y.jpg)\n\nDark mode goes further than you'd expect. Not just a background flipped to black. Every badge remaps to its dark-mode token: the red that means \"failing\" swaps from the light-mode red to Carbon's darker red, the greens and blues do the same, each color moving to the value Carbon defines for a dark surface. The whole palette shifts together, exactly as it does in the real system.\n\n# Polaris × GitHub\n\n[Open in v0](https://v0.link/JlCi0Ha)\n\n![](https://pbs.twimg.com/media/HM3rgeXWMAA7uwM.jpg)\n\n![](https://pbs.twimg.com/media/HM3rlUeWkAAmjwY.png)\n\nThis one is unmistakably Polaris, the Shopify admin wearing a GitHub hat: the compact nav lists with a count badge tucked at the end of each row, and the page header that stacks a title, a green status pill, and a one-line tagline, the way every Polaris page opens. Look at the count badge on those rows: fully rounded, the exact pill radius Polaris uses all over the Shopify admin.\n\nWatch the checkbox when it ticks. That little checkmark animation comes straight from the real component.\n\nThe table is worth a closer look. With nothing selected it shows the column names: Pull request, Author, Status, Checks, Updated. Tick the select-all checkbox and that same header row turns into a bulk-actions bar reading \"5 selected.\" That swap is a specific Polaris behavior, and it's here because the real component does it.\n\n# Cloudscape × GitHub\n\n[Open in v0](https://v0.link/ef1WDTJ)\n\n![](https://pbs.twimg.com/media/HM3r9xHWgAAymAC.jpg)\n\nStraight out of the AWS console: the classic Cloudscape collapsible sidebar grouped into sections, with its collapse arrow, and the breadcrumb sitting right under the top bar the way every console page lays it out.From there it's the smaller things that seal it. Start with the notification area.\n\n![](https://pbs.twimg.com/media/HM341M8WcAEuJZP.jpg)\n\nIt's Cloudscape's flashbar: the blue info bar with the info icon and the dismiss X, \"main is up to date with production.\"Then resize the window.\n\n![](https://pbs.twimg.com/media/HM3sHV2WUAAptbo.jpg)\n\nThis is a classic Cloudscape mobile move. At phone width most systems collapse the breadcrumb into a menu or drop it entirely. Cloudscape keeps it pinned right under the top bar, exactly the way the AWS console does on a small screen.\n\n# Primer × GitHub\n\n[Open in v0](https://v0.link/XQJFyPo)\n\n![](https://pbs.twimg.com/media/HM3sUbiWEAAUptv.jpg)\n\nAnd to close the loop, I attached GitHub's own design system, Primer. What if GitHub built GitHub. You get GitHub. Everything comes from the real components: the exact background color, the same active state, the palette, the scroll. The least surprising result in the set, and maybe the clearest, since it's the one target we've all memorized.\n\n![](https://pbs.twimg.com/media/HM3sd3jWAAAsbC_.jpg)\n\n# No design system × GitHub\n\n[Open in v0](https://v0.link/M3uOcue)\n\n![](https://pbs.twimg.com/media/HM3sovHWcAABXwl.jpg)\n\nAnd here's the same prompt with nothing attached. The model did its honest best to look like GitHub from memory, and it gets the gist. Put it next to the other five, though, and it comes apart in the details: a palette that doesn't hold together, three or four different greens that belong to no scale, made-up icons standing in for things like merge, a stray spinner just spinning.\n\n![](https://pbs.twimg.com/media/HM3srzKWcAIs-h6.jpg)\n\nNone of it is broken. It's the ceiling of building from memory instead of from a system.\n\n# Try it\n\nIf your team has a design system, bring it into v0 today.\n\nSee how it works in the [Design Systems 2.0 docs](https://v0.app/docs/design-systems-2), then start at [v0.app/design-systems](https://v0.app/design-systems).\n\nWritten by @EstebanSuarez"},"adhxContext":{"savedByCount":1,"publicTags":[],"previewUrl":"https://adhx.com/v0/status/2075589636227735902"}}