Chapter 3

Foundations

Chapter 3

Foundations

Chapter 3

Foundations

Your design system is more than a collection of reusable, shared assets. It should be an adaptable system of foundations, design principles, patterns, guidelines, components, and tools. Think of it as the hub that combines all the best practices for creating products.

STEP 1

Define your building blocks

Defining foundations will get you far.

Design Principles

Design principles aren't just about aesthetics; they're your organization's way of saying, "This is us." Think about what you want to convey. Playful startup or polished corporate? Your design is your first impression, your silent ambassador. Balance and contrast aren't just artistic fluff; they're crucial in making your design resonate or fall flat. Repetition is your brand's sticky note, and proper alignment and hierarchy ensure your key message doesn't get lost in the noise.

Space, movement, unity, variety – these give your design its voice. Space lets your message breathe, movement directs the eye, unity ties everything together, and variety keeps it fresh.

All in all, design is more than a pretty face; it's a declaration of your identity. Make it bold, and most importantly, make it yours.

Space, movement, unity, variety – these give your design its voice. Space lets your message breathe, movement directs the eye, unity ties everything together, and variety keeps it fresh.

All in all, design is more than a pretty face; it's a declaration of your identity. Make it bold, and most importantly, make it yours.

Meet the new Wise design system

Design Principles

An open source collection of Design Principles and methods.

Design principles are closely connected with Brand tone and Voice.

Color Palette

Each color sets a tone, evokes an emotion, and tells a part of your story. Your color palette is the first impact on the user. Make it harmonious and don't forget to make it accessible.

Supa Palette

All-in-one palette generator, editor and manager forFigma

Adobe Color

Use the Color Wheel to create harmonious colors that make a palette.

STEP 2

Components

When you are considering if the component is valuable enough to be part of the design system, ask yourself:

You're looking to start with the most impactful steps first. Begin with the commonly used components. Move from the smallest building blocks to the bigger ones. Don't overcomplicate. Start with a few components, create them, share the Figma library and see what works and what not.

Another exercise that helps when creating a design system is defining what you want your finished system to include. Not all design systems are the same — some are relatively basic, and others are much more advanced. Some are public, some will stay private forever.

For example: do you want to search through your components, write extensive documentation, add downloadable assets (branding materials, .svg icons, etc.), accessibility guidelines, etc.?

What is the primary purpose of this component?

What functionality does it need to provide?

How does it contribute to the user experience?

Is it visually and functionally consistent with other components?

Does it follow our design principles?

How does it interact with existing components?

Is the component flexible enough to be used in different contexts and brands?

How will it scale across various screen sizes and devices?

Is the component accessible to all users, including those with disabilities?

Did you test it?

Are there any technical constraints or requirements for this component?

How will this component be maintained and updated over time?

Is the design adaptable to future changes in technology or user needs?

Don't end up with 1000 components with slight differences. You will add a lot of complexity and, ultimately, design and tech debt.

It's like baking a cake. 🎂

If you add too many layers,

everything will fall apart.

It's like baking a cake. 🎂

If you add too many layers,

everything will fall apart.