about
Design System Tiers ()
To support Mediahuis' multiple teams and to not become a blocking factor itself, Chameleon consists of multiple layers, which each have their importance. This layering allows teams to both invent and spread new patterns and take ownership of their creations.
Overview of tiers
There are three tiers within Chameleon.
- Tier 0: The base tier contains the foundations: values that make up the basis for each brand.
- Tier 1: A platform-specific translation of the values in the foundations to tokens.
- Tier 2: Implementation of the foundations and tokens in tier 0 and tier 1 in the form of base building blocks (e.g. button, paragraph, ...).
- Tier 3: Team-specific patterns and components that combine multiple elements from tier 0 and tier 1.
Tier 0: Foundations
Foundations can be seen as the DNA for a specific brand and form a single source of truth. These include, but are not limited to, color, typography, spacing, etc.
As these foundations are generally applicable, they form the heart of Chameleon and are thus tier 0.
Tier 1: Tokens
Since foundations are more or less abstract concepts that are platform-agnostic, they need a specific translation to be used in code. This is where tokens come into play. Tokens are an implementation of these agreed-upon truths for a specific platform and bridge the gap between design and development.
Tier 2: Building blocks
Using the tokens from tier 1, Chameleon provides an ever-evolving set of base building blocks. These building blocks are mostly low-level components that can be combined to create compelling user-facing interfaces.
These building blocks are platform-tailored, as they are ready-to-use in development projects. As such, there will be multiple different implementations, i.e. an implementation for web, an implementation for Android, etc.
Tier 0, tier 1 and tier 2 are actively managed and maintained by the Chameleon team. What this means is that we ensure correct color contrasts in the foundations, fully functional and correctly formatted fonts and components that are both functionally and visually tested and pass our accessibility checklist.
Tier 3: Team-specific components
The true power of our design system tiers lies in tier 3. With tier 3, we want to encourage teams to set up their internal design system. E.g., a subscription offer that is built out of several of the tier 2 building blocks is a perfect candidate to belong to a team's design system. This enables the team to reuse this component across all of their projects.
However, the use case for a team's design system is not limited to internal team projects. Teams are encouraged to share their patterns with other teams, to assure an even higher degree of unification.
When compared to tier 2 components and patterns, the Chameleon team does not guarantee the quality of these components. However, we are always willing to aid teams in ensuring the quality of their shared components.
Promotion between tiers
Another advantage of the multi-tier system is that it enables the Chameleon team to promote patterns and components between tiers.
If a certain pattern turns out to be highly-used across teams, it is our job to promote this pattern to tier 2. That way, we can fully polish the overall quality of the component and make it more generally available.
A clear example of this promotion could be an article teaser. After all, Mediahuis will always be a media company, so articles lie at the heart of the organization. While the initial implementation of this pattern can belong to a certain team, after time this could be promoted to tier 2 to become a first-class citizen of Chameleon.