How to Apply Brand Guidelines to a Website: A Practical Guide

At Talha Aslan and team, we have done this work many times. The most common problem we see is simple. The brand guidelines sit in a polished PDF, while the website grows on its own. In this guide, we show how we turn that PDF into a system a developer can use directly. In other words, the goal is to close the gap between the document and the live site for good.

Why do brand guidelines and websites drift apart?

Most guidelines target print and assume a fixed page. A website, however, is fluid. Screen width, user settings and content length change all the time. So a rule like "logo always top left, 40 mm wide" means little on a screen. Someone has to define what that rule means in a browser.

The second reason is the division of labor. A branding studio writes the guidelines, and a different team builds the site. If nobody translates the rules in between, the developer guesses. As a result, each new page gets a slightly different blue, a slightly different button and a slightly different heading size. Over time, those small gaps blur the brand.

The third reason is that guidelines rarely describe interaction. A printed brochure never shows how a button looks on hover, on click or when disabled. Therefore, you need to design those states from scratch while staying true to the spirit of the guidelines.

Which parts of your brand guidelines should you extract first?

Start by reading the document and pulling every web-relevant rule into one list. We do this in a spreadsheet. Each row holds the rule, its source page and its web equivalent. That way, the rest of the team can make decisions without opening the PDF. During extraction, look closely at these areas:

• Logo variants, clear space, minimum size and forbidden uses.
• Primary and secondary colors, with HEX, RGB, CMYK and Pantone values if present.
• The brand typeface family, its weights and any fallback suggestion.
• Heading and body hierarchy, line spacing and alignment preferences.
• Photography style, illustration style and the icon set.
• Brand tone, writing rules and banned phrases.

Mark the gaps in that list as well. For example, the document may have no digital color codes, or the web license for the typeface may be unclear. Resolve these issues before design starts. Otherwise, you will repaint everything a few weeks later.

What are design tokens, and why turn guidelines into tokens?

A design token is a small, named record that holds one design decision. For example, a token called "brand-primary" holds a HEX value, and a token called "space-4" holds a spacing value. In code, tokens usually live as CSS custom properties, also known as CSS variables.

The strength of tokens comes from having a single source. MDN's guide to CSS custom properties explains that you can define these values once and reuse them across the whole document. Consequently, if the brand color changes, you update one value instead of hundreds of lines.

We build tokens in two layers. The bottom layer holds raw values: blue shades, a gray scale and spacing steps. The top layer holds meaningful names such as "button-background", "link-color" and "error-text". Components only read from the top layer. So when you add a dark mode or a campaign theme, you only change the mapping. We cover the wider picture in our design system guide.

How do you convert brand colors into digital values?

If your guidelines list only CMYK or Pantone codes, you need a separate value for screens. Ink and screen light behave differently, and automatic conversion often looks dull. We explain that conversion in detail in our article on moving a print brand identity to digital. Here, we focus only on the website side.

In practice, we pick an sRGB HEX value for each brand color. Then we compare it on several screens, in light and dark settings. Once the brand owner approves it, the value goes into the digital appendix as the official code. To convert codes between formats, you can use our HTML color codes tool.

One primary color is not enough. A web interface needs lighter and darker shades of the same color for backgrounds, hover states, borders and selected items. Therefore, we usually derive a scale of eight to ten steps from each primary color. Build the scale with a consistent lightness step rather than by eye. That way, the shades sit well together.

Which color should do which job on the site?

Splitting the palette into roles is the most critical step in translating brand guidelines for the web. Guidelines usually say "primary" and "secondary". A website, however, needs roles like "link", "primary button", "warning" and "success". The table below shows a role split we often use, as an example.

Most guidelines lack error, success and info colors. Still, every site needs them. When you choose them, look for shades that match the warmth and saturation of the brand palette. Also, never let color carry meaning alone. Pair an error message with an icon or clear text. If you want to know how colors affect perception, our article on color psychology in web design is a good start.

What if your brand color fails the contrast test?

This is the problem we run into most often. Many brand colors are too light for text on a white background. According to the W3C explanation of minimum contrast, level AA requires at least 4.5:1 for normal text and at least 3:1 for large text. Moreover, these thresholds do not round. A ratio of 4.499:1 fails.

The same document clarifies one key detail. Text that forms part of a logo or brand name has no contrast requirement. However, the brand guidelines cannot extend that exception to ordinary body text. In other words, even if your brand is a light orange, you cannot set paragraphs and buttons in that orange if people cannot read them.

To solve it, we usually pick one of these routes:

• Use the brand color as a fill and place dark text on top.
• Derive a darker shade of the same color for text and links.
• Keep the color for large headings, icons and decorative areas only.
• Agree with the brand owner on an accessible "digital text color" in the guidelines.

You can measure every attempt with our color contrast checker. For the wider accessibility framework, see our article on WCAG standards.

How do you choose colors for focus states and forms?

Brand guidelines almost never consider keyboard users. Yet someone who tabs through a site must see clearly where they are. The W3C explanation of non-text contrast asks for at least 3:1 for interface components and meaningful graphics. Also, the logo exception does not cover focus indicators.

That is why we pick a strong color from the brand palette for the focus ring. Often a dark shade of the primary color or a contrasting secondary color works. Then we test the ring on both light and dark backgrounds. Form fields need the same care. Borders, checked boxes and error states should also meet the 3:1 limit.

Treat hover and pressed states with the same rigor. For instance, a primary button can turn one shade darker on hover. Still, the label contrast must stay above the threshold. Defining these small shifts as tokens ensures every developer picks the same shade.

Disabled components fall outside the rule. Even so, do not make them so faint that users cannot tell why a button does nothing. In short, make a clear visual decision for every state and save it as a token.

How do you move a brand typeface to the web?

The first question is legal, not technical. Does the brand typeface include a web license? A desktop license often does not cover embedding on a website. So check the license document or ask the font vendor. If the license does not fit, choose a web-licensed alternative that stays close to the spirit of the guidelines.

Once the license is clear, we move to performance. web.dev's font best practices recommend the WOFF2 format, subsetting to drop unneeded glyphs and a deliberate font-display choice. The article also reminds you to confirm that the license allows subsetting first.

Guidelines often list four or five weights. A website usually needs two or three: regular, semibold and bold. Each extra weight means another file. Therefore, load only the weights the design actually uses. We cover choosing and pairing typefaces in our web typography guide.

How do you build a type scale that adapts to screen size?

Guidelines give heading sizes in points. The web, on the other hand, works with pixels, rem and viewport units. We first fix the body text size. Then we scale headings with a consistent ratio. As a result, the six heading levels form a proportional ladder.

On mobile, large headings take up too much space. So we define heading sizes within a range that flexes with screen width. The CSS clamp function keeps a minimum and maximum while allowing a smooth transition in between. That way, readers follow the hierarchy from the guidelines with the same logic on desktop and on phones.

Line height and line length belong to the scale too. Comfortable line height and moderate line length make reading easier. Translate alignment rules with care as well, because justified text can create uneven gaps on screens. For example, body copy that runs justified in a printed catalog often works better left-aligned on the web.

How do you apply logo rules to the site header?

Guidelines usually define clear space relative to part of the logo, such as the height of a letter. To keep that ratio on the web, we use the logo as an SVG. Then we set the surrounding space with a value tied to the logo height. So when the logo grows or shrinks, the clear space follows.

You also need to translate the minimum size. Instead of the millimeter value from print, we test the smallest pixel height at which the logo stays legible. After that, the mobile header never goes below that limit. If the logo blurs at that size, we switch to the simplified variant or to the emblem alone.

Dark backgrounds require a reversed logo variant. In addition, the favicon is the smallest and simplest form of the logo, and it shows up in search results. Our article on favicon problems in Google results covers that topic. Finally, if the logo works as a link, give it a meaningful accessible name.

How do you derive spacing and a grid from the guidelines?

Many guidelines define page margins and column counts for print. On the web, we do not copy those values directly. Instead, we choose a base unit, for example a step of 4 or 8 pixels. Then we define every space as a multiple of it. As a result, components follow a predictable rhythm rather than random values.

For the grid, we usually build twelve columns on desktop and four on mobile. If the guidelines use asymmetric layouts, we reinterpret them inside that grid. Put simply, the aim is to keep the visual character of the guidelines while respecting the flexibility of screens.

Name spacing tokens the same way you name color tokens. Names like "space-2" and "space-4" stop developers from typing pixels by hand. They also make sure the design file and the code speak the same language.

How do you keep photography and icons on brand?

Photo guidelines often describe a mood: natural light, real people, warm tones. On the web, we turn that mood into concrete rules. For example, we define aspect ratios for hero images, the crop focus and the overlay you use when text sits on a photo.

Consistency matters even more for icons. Icons from different sets stand out right away because of line weight and corner radius. That is why we choose one icon set and draw any missing icons with the same line weight. We also prepare icons as SVG files that inherit the current text color.

Alt text is part of the brand voice too. However, alt text should describe what an image shows, not repeat a marketing slogan.

How do you carry brand tone into interface copy?

Tone rules usually target advertising copy. Yet the most-read text on a site lives in buttons, form labels and error messages. People call this microcopy. If the guidelines say "friendly but serious", you need to show how that sounds in an error message.

For every tone rule, we write a "do and don't" pair. For instance, instead of "An error occurred", write "We could not recognize this email address. Could you check the spelling?" We also choose consistent verbs on buttons. We never say "Submit" on one page and "Send" on another. We explain how to build a sitewide voice in our guide on creating a brand voice for your website.

Fix the form of address from the start as well. The level of formality should stay the same from the headline to the cookie banner. Otherwise, readers feel like they talk to a different company on each page.

How do you build a component library from brand guidelines?

Once tokens are ready, we move to components. A component is a reusable interface part, such as a button, a form field, a card or a navigation menu. Each component takes its values only from tokens. It contains no hand-typed color or spacing value. So when the guidelines change, components change with them.

We follow this order when we build the library:

1. Base elements: headings, paragraphs, links, lists and table styles.
2. Interactive elements: buttons, form fields, checkboxes and select menus.
3. Composite parts: cards, alert boxes, tabs and accordions.
4. Layout parts: header, footer, navigation and content sections.

Document the default, hover, focus, pressed and disabled states for each component. Next to each one, list the tokens it uses. That document becomes the live web version of your guidelines.

How do you keep tokens in sync between design files and code?

If tokens live only in code, designers keep working with old values. If they live only in the design file, developers copy every value by hand. Therefore, we make sure both sides read from the same source. In practice, we keep the token list in one file and generate design styles and CSS variables from it.

Naming matters here too. A style called "Blue 600" in the design file should carry the same name in code. Also, log each change with a short note: what changed, why and who approved it. Then, six months later, when someone asks why the blue got darker, you find the answer at once.

Set a regular sync rhythm as well. For example, a short check before each release that compares design styles with code variables catches drift early.

Does dark mode break your brand identity?

Not if you set it up well. However, moving brand colors onto a dark background unchanged often causes trouble. Saturated colors vibrate on dark surfaces, while dark shades disappear. So for dark mode, we choose a slightly lighter, less saturated version of the primary color.

The two-layer token structure pays off here. The meaningful token "button-background" points to one value in light mode and another in dark mode. Meanwhile, the component code stays the same. You also swap the logo for its reversed variant. Remember to run contrast tests for both modes separately.

Which mistakes break the brand on a website most often?

The most common mistakes we see come from habits, not from technology. A team wants to ship a campaign page fast and takes a shortcut. However, every shortcut leaves a small deviation from the guidelines. Watch for these mistakes in particular:

• Adding a new color outside the palette on a campaign page.
• Squeezing or stretching the logo, or adding a drop shadow to it.
• Trying a typeface in headings that the guidelines never mention.
• Using different corner radii and heights on buttons.
• Leaving a theme's default colors in place of the brand palette.

The shared fix is to make the component library the only valid path. In other words, if you cannot build a new page with existing components, you add a component to the library first and then build the page. That way, you create a lasting solution instead of a shortcut.

What do guideline rules become on the web?

The table below summarizes the web equivalents of rules we often meet in brand guidelines. You can use it as a starting template for your own project.

Example scenario: how does a manufacturer's site come together?

As an example scenario, picture a manufacturer that has used printed catalogs for years. Its guidelines include a deep navy and a bright yellow, but list only Pantone codes. The brand typeface also has a desktop license only. In the first week, we extract the rules and list the gaps.

Next, we choose screen values for the navy and the yellow. Navy passes easily as text on white. Yellow, on the other hand, fails as text on white. So we use it as a button fill with navy text on top. Then we buy a web license for the typeface or suggest a close alternative.

After that, we set up the tokens and the component library. Finally, we test each page template against the checklist. This scenario is not a promise. It only shows the typical flow of the process.

What should you check before launch?

Before we launch a site, we tick off the list below one item at a time. It looks short, yet each item takes a separate pass through the pages.

• Every color comes from a token, and the code has no hand-typed colors.
• Body text and buttons reach 4.5:1, and large headings reach 3:1.
• The focus indicator stays visible on every interactive element and reaches 3:1.
• The logo never goes below its minimum size on mobile, and clear space holds.
• Font files use WOFF2, and the site loads only the weights it needs.
• Error, success and info messages differ by text or icon, not by color alone.
• Button verbs and the form of address stay consistent across pages.
• If you have dark mode, you ran contrast tests for both modes.
• The favicon and share images match the logo in the guidelines.

How do brand guidelines stay a living document?

Launch does not end the work. New campaigns, new pages and new team members arrive. If nobody updates the digital appendix of your brand guidelines, old problems return within months. That is why the guidelines need an owner, and every change needs that person's approval.

We suggest keeping the digital appendix in the same place as the tokens and the component library. Then the document and the code stay connected. We also add a short review step for each new component. Does it use color tokens? Does it pass contrast? Is the tone consistent? In short, small but regular checks cost less than a big redesign.

Plan a broader audit once a year too. During that audit, compare random pages of the live site with the guidelines and list every deviation.

Who should apply your brand guidelines to the website?

This work needs a team that bridges brand design and front-end development. People who read guidelines and turn them into tokens, measure contrast and code components need to work together. We set this up on your site from start to finish, review your guidelines and draw up a roadmap. For scope and timing, you can request a quote through our web design service page.

If you prefer to work with your own team, follow the order in this guide: extraction, color, contrast, typography, logo, spacing, tone, components and checks. If you get stuck, you can also get a quote from our web design team for a review that compares your current site with your guidelines. Above all, the goal is for the brand in the PDF to earn the same trust on screen.

Keep in mind that applying guidelines is not a one-time conversion. It is a habit you repeat on every new page of the site. Once that habit takes hold, design decisions speed up, debates shrink and the brand speaks with one voice at every touchpoint. Moreover, new team members learn the rules from the components instead of the PDF.