What is a design system?

A design system defines the colors, fonts, logo, and building blocks of your website before the first page is built. This allows you to see how your website will look early on and avoids any surprises at launch.

No more surprises

Many website projects follow the same pattern: The agency spends weeks building, then comes the big presentation. Only then does the client realize that the blue is too cold or that the font doesn't suit the industry. Every change at this stage costs time and money because it affects every page.

With a design system, we reverse this order. First, we define the visual foundation together with you, then we build it. What you approve in the design system will later be visible on the finished website.

What is a design system?

A design system is the set of rules for the appearance of your brand on the web. You can think of it like a construction kit: all the parts are clearly defined once and then used consistently everywhere.

These typically include:

• Colors with clear roles: main color, accent color, backgrounds, text colors, and signal colors for hints or errors.
• Fonts for headings and body text, including sizes and spacing
• Logo in the necessary variations, such as light, dark and as a small icon
• Components such as buttons, maps, forms, navigation and footer
• Spacing and grids ensure that each page appears calm and tidy.
• Visual language and icons, i.e., what kind of photos and symbols suit you.

The major advantage: New pages, landing pages, or even social media posts can later be created from the same building blocks. Your online presence remains consistent, even as it grows.

Mood board or design system?

Many people are familiar with the term moodboard. A moodboard is a collection of images, colors, and sample pages that capture a mood. It answers the question: What feeling should the website convey?

The design system goes a step further. It transforms this mood into binding rules: precise color values, specific fonts, finished buttons, and spacing. The mood board is therefore the starting point, the design system the foundation for implementation. With us, the two flow seamlessly together: your favorite examples form the mood board, and from that, the design system emerges.

Good colors define

Colors determine in seconds whether a website appears serious, playful, elegant, or technical. A good palette usually consists of four to six colors that complement each other well.

Here's how we proceed:

1. Gather inspiration: Platforms like Coolors showcase thousands of finished palettes, sorted according to current trends. Even beginners can quickly find a mood they like here.
2. Assign roles: Each color gets a task. A tried and tested rule of thumb is 60 30 10: approximately 60 percent calm base color, 30 percent secondary color, and 10 percent accent for buttons and important elements.
3. Check contrast: Text must be easily readable on any background. We check the combinations according to the WCAG accessibility guidelines to ensure that older people or people with visual impairments can also read everything.
4. Taking existing elements into account: If you already have a logo, vehicle lettering or business stationery, we will derive the product range from that.

Example: For an upscale restaurant right on the lake, muted petrol and mint tones, a bright white with a bluish tint, and a warm peach tone as an accent would be suitable. The palette evokes water and sunsets while still appearing sophisticated.

Finding the right font

Typography is voice. A classic serif typeface conveys trustworthiness and tradition, while a clean sans-serif typeface appears modern and businesslike. We usually combine two typefaces: one with character for headlines and an easily readable one for body text.

For the AI to work with the correct font, it needs a clear specification. There are two simple ways to provide this:

• Specifying font names: You select two fonts you like from Google Fonts or a font matching tool like Fontpair. We then transfer the names directly into the design system.
• Show example page: Do you know a website whose typography you like? Send us the link. We'll find out which fonts are used there and suggest equivalent alternatives if the original font is subject to licensing fees.

Real-world example: Our own website, amplus.ch, uses Merriweather for headings and Konnect for body text. The serif font inspires trust, while the sans-serif font ensures good readability on screen.

Important for Swiss SMEs: We integrate fonts directly onto your server in compliance with data protection regulations, instead of loading them from Google every time a page is requested.

Create logo and design system in advance using AI

Previously, a design system was a complex project that only larger companies could afford. AI has fundamentally changed that. Today, we can create an initial draft in a very short time, including logo, colors, fonts, and the most important components.

This has three advantages for you:

• Affordable entry point: The design system is created upfront for a small fixed price of [add price]. You'll see exactly what your website could look like before committing to the entire project.
• Logo included: If you don't yet have a logo, the AI will generate several suggestions. We'll refine the best one by hand to ensure it works well even in small and monochrome formats.
• Joint meeting: We will go through the design system with you and adjust it until it feels right.

The AI provides speed and variations, while the experience and visual expertise come from us. No design goes to you unchecked.

This is what a design system looks like.

A single overview shows you all the decisions that shape your website. We'll discuss this page together before implementation begins.

Changes should be made when they are advantageous.

Changing the color in the design system takes minutes. The same change on a finished website with twenty pages can take hours. That's why it's worth discussing aesthetics right from the start.

There are also other advantages that are often underestimated:

• Faster implementation: We build your website directly from the approved building blocks. Fewer rounds of approval mean an earlier launch.
• Consistent appearance everywhere: Use the same colors and fonts for flyers, presentations, social media or your email signature.
• Easy expansion: If a new offer is added in two years, the new page automatically fits into the overall picture.
• Security during team changes: If other people later work on your website, they will find all the rules in one place.

Conclusion

A design system transforms a gut feeling into a clear template that you can see, review, and help shape early on. Thanks to AI, this step is now quick and affordable. The result: a website without unpleasant surprises.

How the design system fits into the overall process of modern website creation is shown in the article "Website creation in the AI age: a practical test ".

Would you like to see your design system before committing? Contact us at +41 44 535 00 55 or via the contact form. We will create an initial draft for you.