What's the difference between a design system and brand guidelines?

Brand guidelines are the rules. A design system is the reusable set of components built to follow those rules, ready to assemble rather than design from scratch each time.

Does a design system only apply to digital products?

No, though it's most associated with product and UI work. The same reusable components and logic can apply to any format a brand produces repeatedly.

Who owns a design system: design or development?

Ideally both. Design defines the components and rules; developers build and maintain them in code. The system breaks down if either side works without the other.

How do you know when a brand needs a design system?

When there's no internal logic behind one application to the next, and that lack of consistency is felt on a consumer level.

Can a design system slow down creative work?

Only if it's treated as rigid rather than a foundation. A well-built system should make routine work faster, freeing up time for the genuinely new problems that need fresh thinking.

Branding Handbook

Visual Identity

Design System

A design system is the reusable set of components and rules that let an identity scale across every product and platform.

What is a design system?

A design system is the connected library of components, patterns, and standards a brand uses to build consistent product and marketing experiences at scale.

Not the visual identity itself but a byproduct of it, a design system takes a high-level identity and codifies it into reusable building blocks that designers, developers and marketing teams can reliably create from. The most common use cases of a design system include website UI/UX, products, and print assets.

Without a design system, every new screen or page gets built from scratch with no guiding principles, leading to small inconsistencies that add up fast across a brand's footprint. With one, teams move faster while a brand continues to hold up.

What are the core parts of a design system?

Foundational elements

The fundamentals that make up the visual language for everything else that follows. This includes elements such as colour, typography, iconography, illustration, and grids.

Component library

The reusable visual elements and interaction points that turn design into implementation. This can include buttons, cards, layouts, and frames.

Documentation and usage rules

The overarching guidance that wraps around the entire system, explaining when and how to use each element and component correctly. This could include technical specs, best practices, and design tokens.

How a design system works in practice: Trellis

If your health is a framework for your life, then Trellis is the framework for your health. Creating a bank of Generational Health, it builds a living blueprint which not only helps organise your life, but ensures you can pass it on to your entire family.

The benefits it was conceived on deserved a brand that could back them up. And any framework worth its salt needs the right building blocks to bring it to life.

Femtech

Healthcare

B2C

Trellis

Built to click and expand with life itself, the design system for Trellis is based on a flexible grid platform that toggles to fit brand assets, leaving plenty of room to accommodate new elements as the brand grows.

This logic is what carries the brand's entire digital experience. Custom data visualisations, illustrative fingerprint textures, and diverse photography are all applied with as much creativity as consistency.

Outcome: A design system that doubles as a structure to build life upon, true to Trellis' claim as the Mother of all healthcare apps.

Read case study

FAQs

Your brand can't afford to be ignored

Time to turn up your truth

We zero in on the one thing only your brand can claim, then dial it up until it’s impossible to ignore.

Talk to us

Related work

A structure to build life upon

Toggling and expanding to house brand assets, Trellis' flexible grid system has the range to celebrate generational health in all its forms.

Result: A design system that supports Trellis' position as a living blueprint.

Conservation

Place-making

Non-profit

Aruba Conservation Foundation

A modular illustration system that grows to fit any layout

To reframe the brand's role as a spokesperson for overlooked ecosystems, we turned illustrated plants and animals into adaptable components that fit any layout.

Result: A systemised approach that amplifies the whispers of Mother Aruba.