Why we open-sourced the CarsXE design system
We rebuilt carsxe.com end to end. The same design system that ships the marketing site, product pages, and app chrome is now a public package: `@carsxe/design-system`. Docs live at ui.carsxe.com.
This post is the “why” — what was broken, what we refused to ship, and how to use the kit.
Two problems, one system
1. We did not look like one company
Over time the site accumulated pages that were “close enough.” Different radii. Different teal-ish blues. Buttons that almost matched. Product pages that felt like cousins of the homepage, not siblings.
That is a trust tax. Developers who evaluate an API also evaluate whether the company ships coherent product. Inconsistent UI reads as inconsistent engineering — even when the data layer is solid.
So we stopped treating each page as a one-off and built a single system: tokens, type, components, and docs. Marketing, product, and the package all pull from the same source.
2. AI slop was winning the default look
Open any newly generated SaaS homepage from the last couple of years and you will recognize the pattern: soft round buttons, heavy purple (or purple-adjacent) gradients, glass cards, the same hero layout with the same stock energy. Models trained on the internet regurgitate the internet’s most common “nice” UI. Sites start to look interchangeable.
What stands out now is the opposite of that default: intentional color, sharp corners, and restraint. We set --radius to 0. Primary is a deliberate navy-teal (#065774), not a generative purple. Type is Manrope for UI/body, DM Sans for headings, DM Mono for code — the same stack on carsxe.com and in the package.
We are not claiming nobody else will land here. We think more websites will. Models will catch up to this aesthetic too. By then we will have moved the system again. The point of a living design system is that the brand can stay ahead of the average.
What we shipped
Piece — Where
Component library + tokens — `@carsxe/design-system` on npm (MIT)
Docs + install — ui.carsxe.com
Theming reference — ui.carsxe.com/docs/theming
Source — github.com/carsxe/design-system
The site that runs on it — carsxe.com
Install:
npm install @carsxe/design-systemLoad CSS once (globals.css if you already compile Tailwind v4, otherwise styles.css), then import components from @carsxe/design-system/components/.... Do not run shadcn add in the consumer app. Do not copy component source into your repo. Customize with variant, size, className, and native props.
The kit is themed shadcn/ui primitives plus CarsXE-owned advanced components — same sharp chrome, success/warning variants where they matter, Motion transitions that respect reduced motion.
Design choices that are load-bearing
Sharp corners. --radius: 0. Circular controls stay rounded-full; everything else stays crisp. Round-everything was the AI default. We opted out.
Intentional primary. #065774 in light mode, with cyan showing up where hover/dark needs energy — not a gradient wash across the hero.
One type system. Manrope / DM Sans / DM Mono everywhere the system touches. Headlines and code should feel like they belong to the same product as the form controls.
Package, don’t fork. If every app copies shadcn into components/ui, you get five slightly different CarsXEs. Import the package instead.
For agents
ui.carsxe.com includes an agent prompt and skills so coding agents can install and use the kit without inventing wrappers. Paste the prompt from the docs site, or pull skills from the design-system repo catalog.
What this is not
- Not a claim that every pixel on carsxe.com is rendered from the npm package in a literal sense — the site and the kit share the system.
- Not a redesign “metrics” announcement. We are not inventing conversion lifts here.
- Not Storybook-as-the-story. The story is the site + the package + the choices above. Explore components in the docs when you need them.
Start here
- Walk the new site: carsxe.com
- Read install: ui.carsxe.com/docs
- Install:
npm install @carsxe/design-system
If you are migrating an existing app onto the kit, use the migrate guidance in the design-system skills rather than hand-rewriting every button.
---