Getting Started
Introduction
What the Kuoni Design System is, who it is for, and the principles that guide it.
The Kuoni Design System is the shared language for designing and building Kuoni Travel products. It pairs a set of brand foundations — led by our Wow Yellow — with accessible, production-ready components and the patterns that assemble them into real booking experiences.
This documentation is the single source of truth. Designers reference it for visual decisions, engineers consume the components, and content teams follow its guidance so that every Kuoni touchpoint feels like one product.
Principles
Four principles guide every decision in the system.
- Make the moment feel like travel. Warmth, optimism and a sense of escape should come through. Wow Yellow is our signature — used with intent, never diluted.
- Clarity before decoration. A traveller mid-booking needs confidence, not ornament. Hierarchy, contrast and plain language come first.
- Accessible by default. Components ship meeting WCAG 2.1 AA. Accessibility is a baseline, not a feature.
- Consistent, not uniform. Reuse the same building blocks everywhere, but let context shape how they are composed.
What's inside
- Foundations — the colour, typography and spacing tokens everything is built on.
- Components — reusable building blocks, each with anatomy, variants, usage guidance, a full props table and accessibility notes.
- Patterns — proven compositions, such as the booking card and form layouts.
Who it's for
| Audience | How they use the system |
|---|---|
| Designers | Foundations and component specs to design on-brand, consistent screens. |
| Engineers | Installable React components with a documented API. |
| Content & PMs | Usage and content guidance to keep language consistent. |
Ready to build? Head to Installation.