Home

01

About us

02

Projects

03

Blogs

04

Kairos

Kairos

Complete visual language for a mindfulness app, from icon system to onboarding illustrations.

Complete visual language for a mindfulness app, from icon system to onboarding illustrations.

Project image

The Brief

Kairos is a mindfulness application built around a simple proposition: most meditation apps talk too much. The product experience is intentionally sparse — a timer, a handful of guided sessions, and a daily streak mechanic built around breathing rather than streaks. The founders came to us needing a visual language that could carry that philosophy across the app UI, onboarding illustrations, and the App Store presence.

The Challenge

The mindfulness app category has converged on a single visual language: soft gradients, abstract blob shapes, gentle purples and blues. It is immediately legible as “wellness” and immediately forgettable. Kairos needed to stand for something different — their product philosophy was about clarity and silence, not comfort and warmth. The visual language needed to match.

Design Principles

We defined three principles that governed every decision across the project. Reduction: every element that does not carry meaning is removed. Precision: the elements that remain are placed and sized with intention. Breath: the layouts are open enough to feel like they have space to expand.

Colour System

The palette is built on near-white and near-black with a single accent — a muted terracotta that appears only on active states and progress indicators. No gradients anywhere in the UI. The background is not pure white but a warm 97% white that reads as paper rather than screen. The overall effect is closer to a well-designed physical object than a typical app.

Icon System

We designed 64 custom icons across six categories: navigation, session types, settings, states, emotions, and guided programme markers. Every icon is drawn on a 24px grid with consistent 1.5px stroke weight and rounded terminals. The system is designed to extend — each category follows a structural rule that makes new icons clearly part of the family without needing to reference the originals.

Icons for session types required particular care — translating concepts like Body Scan, Breath Focus, and Open Awareness into single marks that communicate without explanation. We went through eleven rounds of exploration on the Body Scan icon alone before landing on a form we were satisfied with.

Onboarding Illustrations

The onboarding sequence uses six full-screen illustrations — minimal, line-based compositions on the warm off-white ground. Each illustration depicts a moment of ordinary stillness: a hand resting on a table, a window with afternoon light, an empty chair by a door. No abstract shapes, no abstract metaphors. The intention was to make the app feel like an invitation into a real moment rather than a wellness product pitch.

App Store Presence

We art directed the full App Store listing including screenshots, preview video, and feature graphic. The screenshot series shows the UI in context rather than floating in abstract space — set against real surfaces, held in real hands. The preview video is 28 seconds with no voiceover, no music, and no text overlays except the app name at the end. It performed 62% above the category average for conversion to download in the first month.

Outcome

Kairos launched on iOS and Android simultaneously and reached 50,000 downloads within the first six weeks — entirely organic, no paid acquisition. It was featured as App of the Day by Apple in 14 markets. The founding team described the visual system as “the thing that made our investors take us seriously.” It is the project we are most proud of in the last two years.

Project type

Identity

Company name

Kairos

Industry

Health & Wellness

Suggested projects

Abstract dark flowing curved surface with soft highlights

Let's start a conversation

CTA image

Let's start a conversation

Let's start a conversation

{FAQ}

Questions ? answered

How long does a typical project take?

Do you work with early-stage startups?

What do you need from us to get started?

Can we make changes after the project is delivered?

Do you build websites or just design them?

We already have a brand. Can you just build the website?

How does the retainer work?

How do we know if we're a good fit?

{FAQ}

Questions ? answered

How long does a typical project take?

Do you work with early-stage startups?

What do you need from us to get started?

Can we make changes after the project is delivered?

Do you build websites or just design them?

We already have a brand. Can you just build the website?

How does the retainer work?

How do we know if we're a good fit?

{FAQ}

Questions ? answered

How long does a typical project take?

Do you work with early-stage startups?

What do you need from us to get started?

Can we make changes after the project is delivered?

Do you build websites or just design them?

We already have a brand. Can you just build the website?

How does the retainer work?

How do we know if we're a good fit?

Create a free website with Framer, the website builder loved by startups, designers and agencies.