A design system is the shared set of tokens, components and usage rules a team builds with; a website style guide is its smallest form, one page of colours, type and core components. Study public systems such as USWDS, GOV.UK, Carbon and Atlassian, then use the builder below to make a starter guide for your own site.
| Layer | Examples | Smallest useful version |
|---|---|---|
| Foundations (tokens) | Colour, type scale, spacing, radius | One brand colour, one font, a 4 or 8px spacing step |
| Components | Button, input, card, alert | Primary and secondary button, text field, card |
| Patterns | Sign-up, search, error pages | A form layout and an empty state |
| Guidance | Voice, accessibility, do and don't | Five rules everyone on the team can repeat |
Updated
Lists of design systems link out and stop. This page explains what to take from four well documented public systems, then gives you a working style guide builder that renders buttons, a form field, a card and an alert from your choices and exports the matching CSS custom properties.
| System | Made by | What it publishes | Study it for |
|---|---|---|---|
| U.S. Web Design System (USWDS) | US General Services Administration | Design tokens, components with accessibility and implementation guidance | Token scales for colour, type and spacing units |
| GOV.UK Design System | UK Government Digital Service | Styles, components and patterns | Patterns for whole tasks, like asking for names |
| Carbon | IBM | Open source components for React and Web Components, built on IBM Plex type | Enterprise data tables and dense layouts |
| Atlassian Design System | Atlassian | Design tokens named by foundation, property and modifier, such as color.text | A clear token naming scheme |
Choose a brand colour, font stack, corner radius and spacing step. The sheet and the CSS below update together.
Every rule reads a custom property, so changing --brand or --radius restyles all components at once.
<style>
:root { --brand: #2563eb; --text: #111827; --line: #d1d5db; --danger: #b91c1c;
--radius: 10px; --space: 8px; --font: system-ui, sans-serif; }
body { font-family: var(--font); color: var(--text); }
.btn { padding: var(--space) calc(var(--space) * 2); border-radius: var(--radius); border: 2px solid var(--brand);
background: var(--brand); color: #fff; font-weight: 600; }
.btn.alt { background: transparent; color: var(--brand); }
.field { display: block; margin-top: calc(var(--space) * 2); }
.field input { display: block; margin-top: 4px; padding: var(--space); border: 1px solid var(--line); border-radius: var(--radius); }
.alert { margin-top: calc(var(--space) * 2); padding: var(--space); border-left: 4px solid var(--danger); background: #fef2f2; }
</style>
<button class="btn">Save</button> <button class="btn alt">Cancel</button>
<label class="field">Email <input type="email" placeholder="[email protected]"></label>
<p class="alert">Enter an email address in the format [email protected]</p>From USWDS, take the idea of limited token scales: spacing and colour come from a fixed set of steps, so pages stay consistent without anyone measuring. From GOV.UK, take patterns, which document how to ask for a date or an address across a whole task, not just how a field looks.
From Carbon, notice how each component page covers usage, style and code separately for different readers. From Atlassian, borrow the naming habit of foundation, then property, then modifier, which keeps hundreds of tokens findable.
A one-person or small-team website needs a page you can open while building, not a documentation site. Put the tokens at the top, the five components below, and a short do and don't list for each.
Code the tokens as CSS custom properties from day one. When the site grows, those same names can move into a token file and feed other platforms without renaming anything.
A style guide records visual rules: colours, fonts, logo use and tone. A design system adds the coded components, tokens and documentation that put those rules into products, and usually a process for changing them. Most small sites only need the style guide plus a handful of components.
Government systems such as USWDS and GOV.UK are public, explain the reasons behind each choice and focus on accessibility. Carbon shows how a large company documents complex components. Atlassian is a good model for naming tokens by role.
Several publish open source code, but each sets its own licence and brand rules, and a government or company look on an unrelated site can mislead visitors. Read the licence and brand rules on the system's site before reusing its components or look.
Start with one brand colour, a near-black for text, one or two greys for borders and surfaces, and a red for errors. Add more only when a real component needs them.
Related: Design tokens explained, Brand style guide generator, Colour contrast checker, CSS variables guide, Web design principles.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.