Overview

Understand what patterns are, and how we organize, maintain, and evolve them at Mews.

What is a pattern?

A pattern is a reusable solution to a recurring user goal or problem. It explains how UI elements or layouts should behave and be arranged, ensuring consistency across different contexts, flows, and pages.

Do

A pattern is...

  • A reusable solution to a recurring user goal or problem
  • A set of rules on how UI elements should behave or be arranged
  • Applicable to flows, page layouts, or interactions
Don't

A pattern is not...

  • A pattern is not a single instance or one-off solution
  • A pattern is not a specific piece of content or a one-time example
  • A pattern is not an exact visual or mockup filled with content to copy

 

Pattern vs. Template vs. Component

Understanding the difference between these three terms is key to working effectively with our design system:

Type

Description

Key Points

Pattern

Reusable solution guidelines

- Addresses a recurring user goal or problem
- Describes behavior, flows, or page structures
- Reusable across multiple contexts
- Can be behavioral, layout-oriented, or flow-level

Template

Applied instances

- Concrete example of a specific component or page in product's context
- Design-only asset, often linked to components with slots in Figma
- Pre-filled examples for clarity or inspiration
- Demonstrates usage without prescribing rules

Component

Reusable building blocks

- Individual UI elements
- Can be foundational (Button, Input) or compositional (Dialog, Table)
- Comes with pre-defined behavior, variants, and properties
- They are combined to create a page layout

 

Principles of a good pattern

Principles help define what makes a pattern effective. To make them memorable and easy to apply, we created CRAFT:

Principle

Explanation

Clear

Easy to understand and apply

Reusable

Works across multiple contexts, pages, or flows

Adaptable

Can adapt without breaking consistency

Fully-documented

Includes real examples and guidance

Targeted

Solves a recurring user goal or problem


Pattern Statuses

As Mews grows and our products evolve rapidly, some patterns may become outdated or need review.

To maintain clarity and trust in our system, each core pattern now includes a Pattern Status section that indicates its current state, ownership, and last update.

  • Status: Lifecycle stage of the pattern (Draft, Validating, Up-to-date, Needs Review).
  • Owner: The responsible team or individual.
  • Last Updated: Date of the most recent change or validation.

Example:

Status

Up-to-date

Owner

Design System Team

Last Updated

10.11.2025

 

Status definitions

Status

Meaning

Draft

Initial work, not published yet.

Validating. Add your feedback here.

Published version for feedback and internal review.
Should include link to provide feedback.

Up-to-date

Pattern and relevant documentation were validated and updated.

Needs Review

Pattern hasn’t been reviewed for a while and may be outdated or incomplete.


Ownership

Most existing patterns were part of Mews design vision. As the product has evolved, some patterns now need a refresh to align with new product needs.

Ownership is being clarified to ensure each pattern has a responsible owner and that the Design System Team maintains oversight for discoverability and consistency.

Who defines patterns?

Any designer or product team may own and contribute patterns that emerge from their planned work.

  • Core patterns: Principal Designers and the Design System team act as reviewers and consultants, providing guidance and ensuring alignment across products.
  • Non-core patterns: Patterns limited to a particular product area (e.g., PMS) should be contributed with proper documentation. Review is recommended.

Requesting a pattern or changes

  • If you identify a missing pattern, or want to propose updates to an existing one, contact the Principal Designers or the Design System Team and share your proposed solution.
  • Requests will be reviewed to ensure alignment with system and product needs.
  • For product-specific patterns (e.g., B2B-only), share your documentation with the Design System Team so it can be linked here.

Questions and feedback

  • Any questions, feedback, or clarifications about a pattern should be directed to the Owner listed in the Pattern Status section.
  • If the owner is unclear, contact the Design System Team to route your request.