Building platform-agnostic,
multi-brand design systems

We are experts at creating design systems that are tailored to your company.
Submit a project

16

Design systems built

40+

Figma libraries created

5m+

Rectangles formatted

The top benefits of using a design system

Consistent UI/UX

Consistency enhances the user experience. By utilizing a component library, designers have the building blocks they need to create consistent and effective work flows. Crucial for large teams working in different areas of the product.

Efficiency

By providing pre-defined design patterns, components, and guidelines, a design system accelerates the design and development process. Teams can reuse existing elements, reducing the need to reinvent the wheel for each project.

Scalability

As a company expands and develops more products, maintaining a unified design becomes increasingly challenging. Leveraging a design system early on will aid in establishing new brands and aligning teams more swiftly.

Collaboration

A design system fosters collaboration between design, development, and management teams. It establishes a shared vocabulary and understanding, making communication more efficient and reducing misunderstandings.

Faster development cycles

When design and development teams efficiently utilize a design system to access pre-defined UI elements and guidelines, they can dedicate more time to innovation and tackling unique challenges, thereby speeding up the development process.

Quality control

A design system enforces design standards, reducing the likelihood of design errors and inconsistencies that could negatively impact the user experience and reduces the time spent running QA sessions between design and development teams.

What our process includes:

01

Audit

We conduct a thorough evaluation of existing design components, patterns, and user interactions. This process helps identify inconsistencies, redundancies, and opportunities for improvement. This process also helps us gain the knowledge we need about all the functionalities of your product.

02

Discovery

Before we start defining styles, we take some time to explore different ways the brand could be applied to the product and the design system based on created or provided brand guidelines. Typically, we showcase options based on how much brand volume or personality we want to turn up in the design system. Due to how we build design systems, we can start this process and simultaneously create the foundational styles and components.

03

Foundational styles

While working through the discovery process, we lay the groundwork for the foundational styles. By utilizing design tokens, we can make any significant changes quickly due to any pivots that may arise during discovery.

  • Design Tokens
  • Themes and Modes
  • Colors
  • Typography
  • Sizing
  • Borders
  • Spacing and grids
  • Shadows and blurs
04

Component library

Once foundational styles are in place, we create components using atomic design principles. We consider alignment with code, ease of maintenance, and consumer user experience. We prioritize creating flexible design systems that can grow and scale alongside the company.

  • Content
  • Actions
  • Inputs
  • Containers
  • Navigation
  • Artwork
  • Custom components
  • Token application
  • Iconography
  • Illustrations
  • Data visuals
  • Handoff tool kit
05

Documentation

We want to empower all teams to feel comfortable and confident using the design system, whether it's for products or marketing campaigns. We collaborate with teams to decide on the best tooling for where this source of truth should live to make it accessible and understandable.

  • Global and semantic tokens
  • Component redlining
  • Training videos
  • Training workshops
  • Component patterns
  • User experience best practices
  • Design system versioning
  • Maintenance processes
  • Governance process
06

Product rebuild

Once we've completed version 1 of the design system, our team can help rebuild existing products on various platforms and themes using the new design system. We often take this opportunity to help teach and train in-house designers on the best UX patterns and local component creation.

  • iOS, Android, and web
  • Light and dark modes
  • Local component creation
  • UX improvements
  • Team training
  • File management
07

Handoff

Lastly, we prepare all our files for handoff. We typically design within your Figma organization for a seamless handoff. Teams are already utilizing the design system and we've tackled all the training needed through documentation. Even after handoff, our team is easily accessible through our connect slack channels to answer any lingering questions or issues that may arise.

  • Token and Foundations library
  • Component library
  • Doucmentation
  • Icon library
  • Illustration library
  • Product rebuild files
  • Connected slack access

What our process includes:

01

Audit

We conduct a thorough evaluation of existing design components, patterns, and user interactions. This process helps identify inconsistencies, redundancies, and opportunities for improvement. This process also helps us ramp up to your product functionality.

02

Discovery

Before we start defining styles, we take time to explore different ways the brand could be applied to the product and the design system based on created or provided brand guidelines. Typically, we showcase options illustrating a spectrum of brand volume or personality we want to turn up in the design system. Due to how we build design systems, we can start this process and simultaneously create the foundational styles and components.

03

Foundational styles


While working through the discovery process, we lay the groundwork for the foundational styles. By utilizing design tokens, we can make any significant changes quickly due to any pivots that may arise during discovery.

  • Design Tokens
  • Themes and Modes
  • Colors
  • Typography
  • Sizing
  • Borders
  • Spacing and grids
  • Shadows and blurs
  • Accessibility checks
04

Component library

Once foundational styles are in place, we create components using atomic design principles. We consider alignment with code, ease of maintenance, and consumer user experience. We prioritize creating flexible design systems that can grow and scale alongside the company.

  • Content
  • Actions
  • Inputs
  • Containers
  • Navigation
  • Artwork
  • Custom components
  • Token application
  • Iconography
  • Illustrations
  • Data visuals
  • Handoff tool kit
05

Documentation

We want to empower all teams to feel comfortable and confident using the design system, whether it's for products or marketing campaigns. We collaborate with teams to decide on the best tooling for where this source of truth should live to make it accessible and understandable.

  • Global and semantic tokens
  • Component redlining
  • Training videos
  • Training workshops
  • Component patterns
  • User experience best practices
  • Design system versioning
  • Maintenance processes
  • Governance process
06

Product rebuild

Once we've completed version 1 of the design system, our team can help rebuild existing products on various platforms and themes using the new design system. We often take this opportunity to help teach and train in-house designers on the best UX patterns and local component creation.

  • iOS, Android, and web
  • Light and dark modes
  • Local component creation
  • UX improvements
  • Team training
  • File management
07

Handoff

Lastly, we prepare all our files for handoff. We typically design within your Figma organization for a seamless handoff. Teams are already utilizing the design system and we've tackled all the training needed through documentation. Even after handoff, our team is easily accessible through our connect slack channels to answer any lingering questions or issues that may arise.

  • Token and Foundations library
  • Component library
  • Documentation
  • Icon library
  • Illustration library
  • Product rebuild files
  • Connected slack access

Our approach to platform-agnostic,
multi-brand design systems

Breakdown of multi-brand design system strucutre
Multi-brand design system structure

Utilizing design tokens for easy theming and maintenance

We collaborate with engineering teams to define a token structure that works best for them. By using a token structure you can make one edit at the semantic level and have the everything referencing that token update instantly.

Breakdown of design tokens

Tokens are used to define foundation styles

Another way you could describe a design token is simply a design decision. These design decisions end up shaping the foundational visual styles for the design system that can be used across the entire company, product and marketing teams can benefit from a single design system.

Atomic design principles for creating flexible, easy-to-use components

We execute variations of this strategy based on each team's needs, but below is a simplified example of how we approach atomic design principles. This strategy reduces the number of variants needed per component, reducing memory consumption, making components easy to use, pinpointing and fixing any potential bugs faster, and giving teams the flexibility they need to build out new features

Atoms

The most basic components that are used in combination to make up all other components in the design system. They come in a wide range of styles and needed variants to make those more complex components much more flexible.

atomic components
Molecules

Molecule components are made up of a combination of atomic components. This allows consumers to do things like adjust size easily via the nested components. This strategy allows for easier maintenance and keeps file sizes down.

Molecule components
Organisms

Organisms are made when you start to combine a mix of atomic and molecular components that are commonly used together to create a new component.

Organism components

Documentation that is thorough

A design system is meaningless if no one knows how to use it. We provide all our design system clients with thorough documentation covering token usage, foundational styles, component usage, structure, and redlining. Live training workshops and open office hours are set to help teams transition into using a design system. Training videos are created that consumers can refer back to that walk them through anything they need to use the system successfully.

Documentation collage

How we can help your team

Multi-brand design system

We can design an entire platform-agnostic, multi-brand design system that includes an audit, look and feel discovery, token architecture, style creation, component creation, supporting libraries, documentation, governance process, training, and Github syncing.

This is great for:

  • Companies wanting scale quickly with multiple brands or products on the roadmap

  • Products being built on iOS, Android, and web

  • Teams struggling to get organized due to lack of time or headcount

Single brand design system

Early stage start-ups don't often need all the bells and whistles of a multi-brand design system but still need to be able to iterate a ship features quickly. We can create a single brand design system that can grow as you grow.

This is great for:

  • Start-ups wanting to get an early start on design processes and best practices for stable growth

  • Products in the MVP phase

  • Teams struggling to get organized due to lack of time or headcount

Consulting on your design system

We have 15+ years of experience building design systems from start-ups to enterprise companies. We've seen and tested it all while keeping up-to-date with the latest design system tooling. We can help you and your team make sure they are following best practices and recommend areas for improvement.

This is great for:

  • Companies with established systems that may be struggling to scale

  • Teams wanting to refactor their design system to include design tokens

  • Companies with an internal design systems designer(s)

Ready to get started?

Please submit a new project inquiry below or feel free to email us directly at hello@forge.is.

Thank you for reaching out!
We look forward to learning more about your project. You can expect to hear back from us within 24-48 hours.
Oops! Something went wrong while submitting the form.