Case study · Away.ai

Away.ai Design System

Building a design system for AI travel assistant

Client is Away.aiIndustry is Travel · AI travel assistantTimeline is Jan – Apr 2026

Building a design system for AI travel assistant

  • Design systems
  • Design tokens
  • UI design
  • Components
  • Motion
Away.ai Design System — hero

Away.ai — Design System

Away.ai is an AI travel assistant that helps you plan and book trips without opening twenty tabs. Simply tell it what you want, just like texting a friend, and Away.ai finds, matches, and books the right trip for you.

Away.ai Design System — foundations, components and the rules that connect them
Away.ai Design System — foundations, components and the rules that connect them

Building a design system from scratch

I worked on creating a design system to support Away.ai’s AI-powered travel experience. While we had existing brand guidelines, they weren’t fully optimised for digital products, so the challenge was to translate the brand into a consistent, scalable, and functional UI system.

I established the core foundations, defining typography, colour, spacing, and shape usage to create a cohesive visual language. Designed for a dark UI, the system needed to balance visual clarity, readability, and consistency across the product experience.

The brand the system starts from
The brand the system starts from
Typography — Fraunces and Hanken Grotesk
Typography — Fraunces and Hanken Grotesk
Spacing scale and layout tokens
Spacing scale and layout tokens
Shapes — ten corner radii
Shapes — ten corner radii
Elevation — surface fills, borders, where shadows are used
Elevation — surface fills, borders, where shadows are used
Shadows — eleven tokens, light to heavy
Shadows — eleven tokens, light to heavy

Primitives and semantic tokens

I structured the system around primitives and semantic tokens, separating raw design values from their contextual application in the interface.

Token architecture — primitives, alias, component
Token architecture — primitives, alias, component
Primitive colours
Primitive colours
Alias colours — surface, text, brand and state
Alias colours — surface, text, brand and state

Components

On top of these foundations, I built the major components used across the product.

Buttons, badges, tabs, inputs, selection and alerts
Buttons, badges, tabs, inputs, selection and alerts
Component motion — date range, seat map, tabs, flight card
Kinetic components
Chat, hotel and trip components
Chat, hotel and trip components
Checkbox — states and variants
Checkbox — states and variants
Screens built with the system
Screens built with the system

The system in the product

Hotel selection — desktop and mobile
Hotel selection — desktop and mobile
Flight selection — desktop and mobile
Flight selection — desktop and mobile
Booking completed
Booking completed

Result

The result was a solid design foundation that brought consistency to the interface and created a scalable starting point for the product’s future development.