Build a Small Design System Before Your Corporate Website Grows Out of Control

Many corporate websites start out tidy but gradually become inconsistent. New services get their own page solutions, buttons appear in several variations, headings change size and important messages are placed differently from page to page. Each individual change may seem small, but together they make the website harder to use and more expensive to develop further.

The solution does not have to be a comprehensive design system created for a large organization. For many Norwegian businesses, a small, documented set of rules for structure, navigation, typography, colors, components and actions is sufficient. The goal is not for every page to look the same. The goal is for them to feel like parts of the same website.

Start with the tasks the website should solve

A design system should not begin with the color palette. Start by clarifying which tasks visitors come to complete. A potential customer may want to understand a service, assess whether the company is a good fit and get in touch. An existing customer may be looking for support, documentation or contact information. A job seeker needs different entry points.

Make a short list of the most important tasks and prioritize them. The list provides direction for the menu, page hierarchy and which components you actually need. If requests for proposals are most important, the design must support the journey from need to relevant service, documentation of expertise and a clear way to get in touch.

Without this prioritization, the design system easily becomes a collection of visual rules without a clear business function.

Define a few page types

Most corporate websites can be built around a limited number of page types. These might include a home page, service page, topic page, customer story, article and contact page. Each page type should have a recommended structure while still giving the editor enough flexibility to adapt the content.

A service page can have this basic structure:

1. A clear heading that describes the service.
2. A brief explanation of who the service is suitable for.
3. The problem or need the customer wants to solve.
4. How the company works and what the delivery includes.
5. Documentation such as customer stories, professional expertise or concrete examples.
6. Answers to common questions and objections.
7. A relevant next action.

The structure helps users find answers in a logical order. It also makes publishing easier. The editor does not have to design the page from scratch every time a service is created.

Make navigation predictable

A design system must encompass more than the visual expression. Navigation is a central part of the user experience, and it should follow clear rules across the entire website.

Decide which levels can be shown in the main menu, how submenus work and where support functions such as login, language selection and contact should be located. Use names that visitors understand without internal knowledge of the company. Organization names, product families and internal departments are not necessarily good menu items.

The same terminology should be used consistently. If the menu uses the term Services, breadcrumbs, page headings and buttons should not alternate between services, solutions and areas of expertise without a good reason.

Also remember users who do not start on the home page. Someone who arrives directly at an article or service page must be able to understand where they are, which related pages are available and what a natural next step is.

Create a typographic hierarchy that can handle real content

Typography is not just about choosing a typeface. It is about readability, prioritization and rhythm. Define a limited number of levels for headings, body text, standfirsts, captions and smaller help texts.

Test the typography with real content. A heading that works with three short words can fall apart when a service has a long Norwegian name. A button that looks tidy with the text Read more, can become too cramped with Request a no-obligation assessment.

In particular, check that:

• The body text has a size and line spacing that is comfortable to read.
• The lines of text do not become unnecessarily wide on large screens.
• The heading levels are easy to distinguish from one another.
• Bold type is used to emphasize points, not entire paragraphs.
• Capital letters are not used for long texts or unclear buttons.
• The text still works when the user enlarges it.

A good typographic system helps users scan the page and understand what is important. It also makes the website more recognizable without requiring decorative elements in every section.

Translate the visual identity into concrete rules

A brand manual often describes the logo, colors and typefaces, but does not necessarily answer how the identity should work on a website. The website therefore needs its own rules for using the brand expression.

Define which colors can be used for backgrounds, text, links, buttons, notifications, and decorative surfaces. It should be clear which button is primary and when a secondary variant should be used. If all buttons have different colors and shapes, the signal of what matters most is lost.

Also clarify the image style. Should the images show employees at work, deliveries at customers’ premises, products in use, or the environments in which the company operates? Authentic and relevant photographs often provide more credibility than images that could belong to any business.

Visual identity is created through consistent use over time. The logo alone cannot do the job if the rest of the website feels random.

Build accessibility into the components

Accessibility should be a property of the system, not a check performed only just before publication. When the core components are well thought out, it becomes harder to create inaccessible pages by accident.

Buttons and links must be easy to perceive and use. Color contrast must work in all approved combinations. Forms must have clear labels, understandable error messages, and a logical order. Interactive elements must be usable with a keyboard, and the focus indicator must be visible.

Avoid using color as the only signal. For example, an error message should not be marked only in red, but should also include text explaining what needs to be corrected. Similarly, it should be possible to recognize a link without the user having to detect a subtle color difference.

The component library should also show what the editor needs to contribute. This may include alternative text for meaningful images, the correct heading level, and descriptive link text.

Standardize actions that support conversion

Conversion is often treated as the placement and color of a button. In practice, it is about reducing uncertainty and making the next step clear.

Define a small set of actions, such as requesting a quote, booking a meeting, contacting a specialist, downloading a document, or proceeding to a relevant service. Each page should have one clear primary action. Any secondary actions should not compete with it visually.

The button text should describe what happens. Send inquiry is clearer than Get started if the button opens a contact form. If the next step involves a conversation, you can also explain what the user can expect after submitting the form.

Create specific rules for where actions are placed. On a long service page, the primary action can be repeated after key decision points, but it should use the same text and design. Constantly introducing new variants makes the choice more difficult.

Give editors freedom within clear boundaries

A design system works poorly if it feels like an obstacle. Editors need enough flexibility to present different types of content, but not so many options that every page develops its own look.

A good model is to offer a limited selection of ready-made sections. These could include an introduction, text with an image, a bulleted list, a customer story, a quote, questions and answers, a contact person, and a call-to-action section. For each section, it should be defined when it is appropriate, which fields must be completed, and which combinations are allowed.

Avoid free settings for font sizes, arbitrary color choices, and manual spacing. Such options may seem practical at the time, but they quickly create inconsistencies that need to be cleaned up later.

Manage the system as a working tool

The design system should have a responsible owner. This may be someone internally or a collaboration between the company and the web agency. New components should be created because a genuine content need cannot be addressed well with existing alternatives, not because a single page should look different.

Review the system regularly. Look for components that are rarely used, variants that have acquired the same function, and pages that deviate from the patterns. Also use insights from forms, customer service, and user behavior to improve the structure and actions.

A small design system is successful when users encounter a predictable website, editors publish faster, and the company can develop new pages without starting the design work from scratch. It does more than create a more consistent visual identity. It establishes a stronger connection between content, user needs, and business objectives.