| Table of Contents |
|---|
| minLevel | 1 |
|---|
| maxLevel | 7 |
|---|
| indent | 10px |
|---|
| type | flat |
|---|
| separator | pipe |
|---|
|
Meet Chameleon
Chameleon is Reckitt’s multi-brand design system for created digital experiences. It’s purpose is to help Reckitt’s brand move quickly and create consistent, quality digital products. We achieve this by simplifying common design decisions and testing patterns vigorously to ensure you’re getting the best pattern or component for the job.
Chameleon is a living design system which means it will grow and evolve with Reckitt to continually serve Reckitt’s brands.
What makes up Chameleon?
Designer can access and use Chameleon’s design system through our shared Figma libraries which contain foundations, patterns, and components.
| Panel |
|---|
| panelIconId | atlassian-info |
|---|
| panelIcon | :info: |
|---|
| bgColor | #FFEBE6 |
|---|
|
We need to nail down the Figma brand process | Info |
|---|
To request access to the Figma library please email nick.harris@reckitt.com |
Documentation and guidance
This site contains detailed documentation for our foundations, components, and patterns. Component and pattern documentation include do’s and don'ts, considerations, developer resources, and much more.
Design tokens
Components
Components are reusable code blocks that take the form of React components. They use Chameleon’s tokens and design foundations to extend basic HTML elements. These custom markup elements represent specific portions of the user interface.
Component props & variations
Many components come in different configurations which can be controlled by pros or are separate variations of their own. These variations are usually layout and styling changes with the html structure and functionality remaining consistent.
Patterns
Patterns are reusable elements have basis in usability and accessibility best practices. They come come in the form of components with recommended configurations (like Product Cards) or more behaviour, flow, and usability guidance.
Discover more
