The short verdict
- Component libraries are excellent building blocks. Their default look is shared by everyone who uses them.
- A design system is the set of decisions that makes those blocks yours.
- You need fewer decisions than you think: type, colour, spacing, radius and a few components.
01Why generated sites share a look
Many AI builders generate code with Tailwind and the shadcn/ui component library. They are popular for good reasons: well built, accessible by default and easy to adapt. But builders rarely adapt them. So you get the same neutral greys, the same soft rounded corners, the same thin borders, the same button heights, on a huge number of sites.
Visitors may not know the library’s name, but they recognise the look, the way you recognise a stock photo.
02What each one gives you
| Factor | Library defaults | Your design system |
|---|---|---|
| Speed to start | Instant | A few days to set up |
| Accessibility | Good base | Same base, if you keep it |
| Looks like you | No | Yes |
| Consistency over time | Drifts with each prompt | Held by shared tokens |
| Easy to change globally | Only if tokens are used | Yes, by design |
03What a small design system includes
For a marketing site, a design system does not need to be a 200-page manual. It is a short list of decisions, stored as variables, that every page uses.
- Type. One or two families, a size scale with clear steps, line heights and weights.
- Colour. A small palette with roles: text, background, accent, border, states. Checked for contrast.
- Spacing. One scale, used for padding, gaps and section rhythm.
- Shape. Corner radius, border style, shadow or no shadow. These carry more character than people expect.
- Components. Buttons, cards, inputs, nav, footer, each built once from the tokens above.
- Motion. A couple of durations and easing curves, so movement feels like one hand made it.
“A library gives you good parts. A system decides what they look like when they are yours.”
04Small changes, big difference
You can see the effect with very few changes. Swap the font. Change the corner radius from soft to square, or the other way. Replace grey borders with spacing and background shifts. Pick one strong accent colour. On the same component code, a site can go from instantly recognisable as a default to clearly its own.
05Where it lives
In exported code, the system lives in the Tailwind config and CSS variables, which a developer can update once for the whole site. In Webflow, it lives in variables and classes, which the Designer applies everywhere. Either way, the rule is the same: no one-off values. Every colour, size and space comes from the system.
06Questions people ask
Should I stop using shadcn/ui?
No, if you have developers. It is a fine base. Theme it properly so it stops looking like the default.
Is a design system overkill for a small site?
Not a small one. Even a five-page site benefits from fixed type, colour and spacing values. It also makes every later change faster.
Can I give the design system to an AI builder?
You can describe it in prompts, but tools often drift from it. Hard-coding tokens in the code helps hold the line.
Can you tell how default my site looks?
Yes. Send us the link and we will point out which parts read as library defaults.
