BreathOS

Download the App

My role

Founding Designer & Developer, 2026

  • Figma
  • Illustrator
  • Claude

Deliverables

  • Planning documentation
  • Wireframes
  • Design system & components
  • High-fidelity UI/UX design
  • Full implementation
  • Animation & sound design
  • App Store setup & assets
The BreathOS app icon on an iPhone home screen

About

BreathOS is an iOS app for guided breathing offering eight science-backed breathing patterns and advanced customization tools that allow users to practice guided breathwork their way.

I designed and built BreathOS end-to-end, from the first planning doc to App Store launch. From my co-owner's brief, I designed how the app looks, feels and sounds, and directed its development with Claude Code.

The Brief

My client came to me with a clear brief: a breathing app built for utility, customization and convenience that also looks beautiful. They set the goal; I defined and delivered everything else.

The Solution

Combine real utility with clean design and an easy-to-follow interface, backed by robust pattern and sound libraries and built into iOS with HealthKit and Live Activities.

Soft clouds seen from above

The Process

I ran the project over four months, part-time, with weekly check-ins to share progress and gather feedback.

  • Planning & Wireframes
  • Visual Design & Branding
  • Build
  • Polish & Debug
  • LaunchShip

Onboarding Flow

The BreathOS splash screen
BreathOS onboarding, screen two
BreathOS onboarding, screen three
BreathOS onboarding, screen four
BreathOS onboarding, screen five
BreathOS onboarding, screen six
A hand holding an iPhone showing the BreathOS home screen with the Focus and Better Sleep sessions

8 Science-backed Breathing Patterns

Advanced Customizations

Apple Health Integration

Animation Design

I designed 6 animations for users to choose from to visually guide their practice. Each one adds interest and variation without losing sight of the pattern.

The Better Sleep session controls on an iPhone: name, rounds, animation, theme, soundscape and voice settings
Building a custom breathing pattern on an iPhone: phases with type and duration, rounds, animation, theme and icon

More menu

Create a custom sound experience with 4 different sound categories. A total of 52 sound options for users who want to practice off screen.

Customize session length including an infinite option for advanced users.

Choose from 6 animation styles

8 background themes

Expandable phase card with custom selectors for phase type, duration, and removal.

All custom selectors and options from session controls included.

I designed guardrails that prevent users from creating dangerous breathing patterns. Phase duration limits and set rules trigger warnings.

Icon selectorsIcon selectors and all custom selectors from session controls included

Wireframes

BreathOS wireframe 1
BreathOS wireframe 2
BreathOS wireframe 3
BreathOS wireframe 4
BreathOS wireframe 5
BreathOS wireframe 6
BreathOS wireframe 7
BreathOS wireframe 8

Mood

A celestial take on a consumer product, elevated but accessible: aurora backgrounds, sky-inspired gradients and glass surfaces.

A soft pastel gradient orb
Three Dries Van Noten bottles in warm gradients
A weather app card reading De Ochtend
Six sky gradients from dawn to dusk
A glassy pill button
A glass logo mark beside two people at a laptop

Color

The palette is the base for a wider spectrum of accents and gradients, including a signature gradient from the brand colors.

  • Celestial3660E4
  • MelonFD9375
  • MistE6E9ED
  • Nyx141413
  • WhiteFFFFFF
  • OrchidECCDFF

Gradients

Gradients carry the brand identity: two primary gradients represent the brand, with rich shades adding depth and range.

  • AuroraC6E2FDFEE5F6FCF3E9
  • Daybreak3067F2BA9CDAFFAE8E
  • Horizon2850C669ABF0FEFFEF
  • Moonlight141F43DEC2C0
  • Emerald1221324AAF91D8F4A2
  • Abyss18182A504EAA
  • Ethereal251B7EBC7AD9FEAE8C
  • SolsticeFCB771D84061602149
  • Sandalwood2E1D29A7534DFFC29C

Icons

Each breathing pattern gets its own glass icon: a custom, geometric set of 16 that stays minimal and cohesive.

The Focus session card from the app's Explore screen: level, the box-breathing phases and a Begin button

Full Icon Set

Typography

Public Sans brings a clean, familiar UI feel that complements the brand, with three weights setting the hierarchy.

Public Sans

  • Regular
  • Medium
  • Semibold

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz () & ? ! @ ~ 1234567890

The BreathOS app icon drawn on its construction grid
The finished BreathOS app icon

The Grid

A simple 4-column grid with 20px gutters, opting for wider 24px margins and more space around the content.

A man reclining on a white sofa with his eyes closed, phone in hand

Tap-in with iOS Live Activities

The BreathOS Live Activity: a Focus session with 15 seconds left on the Inhale phase
Two BreathOS screens: the Favorites list and a Focus session in progress

The operating system for your nervous system.

Up Next

Hotel Rossi