A design system in plain words
A website design system is a documented kit of colours, type sizes, spacing, buttons, cards, forms and page sections, plus the rules for using them.
Anyone who adds a page to your site picks from the kit instead of inventing something new. The result is a site that still looks like one company after three years, five editors and a Thai version.
If your site has more than one person publishing, or it grows by a few pages every month, a design system is what stops the slow drift: a slightly different blue on the new promotions page, a third style of button, headings that jump in size between the English and Thai versions. It does not need to be a big corporate project. For most Bangkok businesses it is a short document and a set of reusable blocks built into the theme.
It is also not the same as following this year's web design trends. Trends change what looks fresh. A design system decides how your own site stays consistent while you adopt, or ignore, whatever comes next.
Who usually needs one
- Hotel and resort websites, and serviced apartments, with room, offer and event pages added every season.
- Clinics with a page per treatment and several staff editing content.
- Real estate websites adding project and listing pages in two languages.
- B2B and foreign-run companies where marketing, sales and head office all touch the site.
Design system, style guide, brand book, UI kit
These four terms get mixed up in meetings, so it helps to separate them. The brand book is the input from your marketing side. The design system is what a web team builds from it so the website can grow without breaking.
| Item | What it contains | Who uses it | Lives where |
|---|---|---|---|
| Brand book | Logo, brand colours, tone of voice, photography mood | Marketing, agencies, printers | PDF or shared drive |
| Style guide | Written rules: colours in use, heading styles, writing conventions | Editors and designers | Document or wiki page |
| UI kit | Drawn components such as buttons, cards and forms | Designers | Design file, for example Figma |
| Design system | Tokens, coded components, page patterns and the rules for all of them | Designers, developers and editors | The theme itself, plus short documentation |
What goes inside
If you want the background on interface work first, our explainer on what UI/UX design is covers the terms. A design system packages that work into four layers.
1. Design tokens
Tokens are the named values everything else uses: brand colours with their exact codes, a type scale, spacing steps, corner radius, shadows and the layout grid. Name them by job, not by look. "Primary action" survives a rebrand; "dark green" does not.
Type needs extra care on a bilingual site. Thai script has tall vowel and tone marks above and below the line, so Thai text usually needs more line height than English at the same size. A good system sets a Thai font and an English font that sit well together, and defines line height per language rather than one number for both.
2. Components
Buttons, form fields, cards, accordions, price boxes, contact bars. Each one is defined once, with its states: normal, hover, focus, disabled, error. That last group matters because error and focus states are where accessibility usually breaks.
3. Patterns
Patterns are whole sections assembled from components: a hero with a WhatsApp button, a room or treatment card grid, a FAQ block, a map and opening hours strip. Editors build pages by stacking patterns.
4. Content rules
How long a heading can be, how to write button labels, one fixed way to write prices and dates (always "THB" before the figure, or always "baht" after it, never both), and which language appears first. Without these, the visual kit stays consistent while the words drift.
Where do the savings come from?
A design system costs time up front. It pays back in four places.
- New pages are faster. A new branch, treatment or project page is assembled from existing patterns. The designer is not redrawing a card for the fifth time and the developer is not restyling it.
- Changes are cheaper. Change the primary button colour once and every button on the site follows. Without tokens, that same change is a hunt through dozens of pages and custom CSS.
- Accessibility is built in. If the button component already has readable contrast and a visible focus ring, every page that uses it inherits both.
- Testing means something. When you run experiments on calls to action, a consistent system means you are testing the offer, not three accidental button styles. Our notes on conversion rate optimization for websites go into how to run those tests.
The honest limit: a system does not make a weak page convert. It removes friction and inconsistency so the content and the offer can do their job.
When it is overkill
A five-page site edited once a year by one person does not need formal documentation. A clean theme with a handful of set styles is enough. The case gets stronger once you pass roughly a dozen templates, publish in two languages, or have more than one editor. Those are the points where drift starts costing real hours.
A small-business version
You do not need a Material Design sized manual. For a hotel, clinic or shop with a growing site, this short kit covers most of the value. It fits on a few pages and lives mostly inside the theme.
- Colour tokensPrimary, secondary, text, background, border, success and error, each with a named role and tested contrast.
- Type scale for two languagesFive or six sizes, a Thai and an English font pairing, and separate line heights for Thai.
- Spacing stepsFour to six spacing values used everywhere instead of ad hoc margins.
- Ten core componentsButton, link, form field, card, accordion, notice, table, image with caption, contact bar and navigation.
- Six to eight patternsHero, feature grid, FAQ, pricing or offer box, contact section and a text and image split.
- One page of content rulesButton wording, heading length, price and date formats, and which language leads.
- An ownerOne named person who approves anything new before it enters the kit.
How do you build a design system into WordPress?
WordPress already has the pieces for a design system, if the theme is built for it rather than bolted onto a page builder.
theme.json holds the tokens
A block theme's theme.json file defines the colour palette, font families, font sizes, spacing scale and layout widths. The editor then offers only those values, so an editor cannot pick a random shade of red for a headline. WordPress documents this in its Block Editor Handbook under global settings and styles.
Block patterns hold the sections
Patterns are pre-built groups of blocks that editors insert and fill in. You can register a pattern for an offer section, a treatment card grid or a bilingual FAQ, and lock parts of it so the structure stays put while the text changes.
Custom blocks hold the special parts
Where a pattern is not enough, for example a price box that must always show the same fields, a small custom block keeps the markup and styling fixed. This is how we build Business package sites on WordPress: a custom theme with no page builder, where the system is in the code rather than in a PDF nobody opens.
Before you commit, it helps to browse website design examples and note which repeating sections your own site needs. If your current site was built page by page, a system usually arrives as part of a responsive website redesign, because the components have to be rebuilt for phones anyway.
Components that must work in Thai and English
- Navigation labels: Thai words are often longer, so menus need room or a sensible wrap.
- Buttons: set a minimum width and allow two lines rather than truncating Thai text.
- Line breaking: Thai has no spaces between words, so check that long strings break cleanly on small screens.
- Forms: labels, help text and error messages in both languages, with a PDPA consent line that reads naturally in each.
Keeping it alive
Most design systems fail quietly. Nobody owns them, someone adds a one-off banner for a sale, and a year later the kit and the live site disagree.
Who owns it
In a small company, one person in marketing or operations should approve anything new. The web developer maintains the code side: tokens in theme.json, patterns and blocks. Large public systems such as Google's Material Design and IBM's Carbon are worth browsing to see how documentation can be organised, but treat them as references, not something to copy. They serve products with hundreds of screens; your site needs a fraction of that.
A simple routine
- Every new request first asks: can an existing pattern do this?
- If not, the new component is designed once, added to the kit and documented in a line or two.
- Twice a year, review the live site against the kit and remove what nobody uses.
- Check new components against the basics in our website accessibility guide before they go live.
If you are planning a new site or rebuilding one that has drifted, our website design and redesign service builds the system into a custom WordPress theme from the start. The Business package, from THB 30,000 as an indicative one-time price, covers up to 15 pages in English and Thai with two revision rounds; the final figure is set in your written quote. You can compare all package prices before you get in touch.
More on web design
Sources
- WordPress Block Editor Handbook: Global settings and styles (theme.json)
- Material Design 3
- IBM Carbon Design System
Builds and ranks the websites: the systems behind the 17 client sites whose Search Console numbers we publish. This guide was written by the Website Development Bangkok team. More about us