How do you turn a brand book into website rules?
Website brand guidelines translate your identity into things a browser can use: logo files in SVG, colours as HEX values that pass contrast checks, licensed web fonts with a Thai companion, a tone of voice in both languages, a photo style, and rules for buttons, links and forms.
A brand book made for business cards, signage and brochures usually covers only half of that. It gives CMYK or Pantone colours, a desktop font licence and a logo as a PDF, none of which drops straight into a website.
The fix is not a new brand. It is a short digital appendix, often two or three pages, that answers the questions a designer and developer will otherwise guess at. Trends move quickly, as our look at this year's web design trends shows, but a clear appendix keeps the site recognisably yours while styles change around it.
One note on scope before we start: we build websites from the brand you already have. We do not design logos or brand identities.
Which logo files does a website need?
A logo on a website appears in more places and sizes than people expect: a wide header on desktop, a compact header on phones, a browser tab, a share preview on LINE or Facebook, and sometimes a dark footer. A single JPG from the printer cannot serve all of them without looking blurred or boxed in white.
- SVG masterA vector SVG of the main logo, sharp at every size and small in file size.
- Horizontal versionA wide lockup for desktop headers.
- Stacked or compact versionA shorter version for phone headers and small spaces.
- Icon or symbolThe mark alone, for favicons, app icons and social avatars.
- Favicon setSquare icon exports for browser tabs and home screen shortcuts.
- Reversed versionA white or light logo for dark backgrounds and footers.
- Clear space ruleHow much empty space must surround the logo on screen.
Ask whoever designed your logo for vector originals (AI, EPS or PDF) if you do not have them. A developer can export web versions from those in minutes, while tracing a low-resolution file by hand costs time and rarely looks the same.
Colour that works on screens
Print colours are defined in CMYK or Pantone; screens use RGB, written on the web as HEX codes. Conversions are not exact, so agree one official HEX value for each brand colour rather than letting every designer pick their own.
Contrast comes first
Many brand palettes are built around a light, cheerful colour: a pale gold for a spa, a soft green for a clinic. On screen these often fail as text colours. The Web Content Accessibility Guidelines (WCAG) ask for a contrast ratio of at least 4.5 to 1 for normal body text and 3 to 1 for large text, and 3 to 1 for the edges of buttons and form fields. Test every text and background pair with a contrast checker before signing off.
If your main colour fails, you rarely need to change the brand. Use it for large shapes, backgrounds and accents, and pair it with a darker shade of the same hue for text and buttons. Our website accessibility guide covers contrast alongside the other checks.
States and modes
- Define hover, active and focus colours for links and buttons, not just the resting colour.
- Pick colours for success, warning and error messages that sit well with the palette.
- If the site will offer a dark mode, decide the dark background and how brand colours shift on it.
Fonts in two scripts
Licensing
A font bought for your office computers is usually licensed for desktop use only. Serving it on a website is a separate right, often priced by monthly page views, and some foundries do not offer it at all. Check the licence before the designer builds around a font. Fonts in the Google Fonts library are published under open licences that allow web use, which is why they are a common choice for business sites.
A Thai companion
Most Latin brand fonts have no Thai characters. On a bilingual site, the browser then falls back to whatever Thai font the device has, and headings suddenly look different on every phone. Choose a Thai companion that matches your Latin font in weight and feel: a Thai font with loops for a traditional look, or a loopless one for a modern, geometric brand. Set Thai text a little larger and with more line height than English, because Thai stacks vowels and tone marks above and below the line.
Fallbacks and weight
List a fallback stack for each font, and limit the site to two or three weights per family. Every extra weight is another file to download, which slows the first view on mobile data.
Voice and imagery
Tone of voice in English and Thai
A brand voice written only in English does not carry over by translation. Thai has its own levels of formality, and a tone that sounds friendly in English can read as too casual, or too stiff, in Thai. Write short voice notes for each language: how you address the reader, whether you use polite particles in headings and buttons, which words you avoid, and a few before-and-after examples. A hotel or resort website might be warm and respectful in both; a streetwear shop might be playful in Thai and plain in English for tourists.
Include button wording too, which our website copywriting tips cover in more depth. "Book now", "Get a quote" and "Chat with us" should have agreed Thai equivalents so they stay consistent across pages.
Imagery
Photo rules for the web should say more than "use high quality images". Describe the light (bright daylight or warm evening), whether people appear and how, colour treatment, and crops that work in both wide desktop banners and tall phone screens. Also say what to avoid, such as generic stock photos of handshakes. For taking the pictures themselves, see our photography tips for business websites.
UI details brand books forget
Print guidelines never had to describe a button. A website has dozens of small interface elements, and without rules each new page invents its own. Add these to your digital appendix:
- Buttons: a primary and a secondary style, corner radius, padding, and how they look on hover, focus and when disabled.
- Links: colour, whether they are underlined in body text (underlines help people spot them), and the visited and focus states.
- Forms: field borders, label style, error colour and error message tone.
- Icons: one icon set, one line weight, and whether icons are outlined or filled.
- Spacing: a simple scale, such as multiples of 8 pixels, so sections breathe evenly.
These rules become the building blocks of a website design system, which turns them into reusable components. They also shape the menu: header height, the active menu item and the mobile menu should follow the same palette and type, as covered in our guide to website navigation.
What should you send your web designer?
You do not need a thick manual to start a web project. The list below is enough for a designer to build pages that look like you from the first draft, which saves revision rounds later.
- Logo filesSVG master, horizontal, compact, icon and reversed versions.
- Colour valuesHEX codes for each brand colour, with the text and background pairs you want to use.
- FontsFont names, proof of web licence, and a preferred Thai companion if you have one.
- Voice notesA few lines on tone in English and in Thai, with example headings and button text.
- Photo styleFive to ten images you like, and any photos you already own the rights to.
- Things to avoidColours, words or image types that do not fit the brand.
If you have no guidelines
Plenty of small businesses have a logo and little else. That is workable. Gather what you have, including your shop sign, packaging, menus and social posts, and note what you like about them. We do not design logos or create brand identities, so if you need a new logo, commission it from a brand designer before the web project and ask them for the files listed here. If the logo is fine, the web designer can propose web colours, fonts and button styles that fit it for you to approve.
Consistent branding also supports enquiries: visitors trust a site that looks coherent, one theme of our notes on conversion rate optimization for websites. When your kit is ready, our website design and redesign service turns it into pages. The Business package, from THB 30,000 as an indicative one-time price, covers up to 15 pages in English and Thai with a custom WordPress theme; our pricing page compares all packages, and the final price is set in your written quote.
More on web design and UX
Sources
- W3C: Understanding WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum)
- W3C: Understanding WCAG 2.2 Success Criterion 1.4.11 Non-text Contrast
- Google Fonts: FAQ on licensing
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