find your calm

A warm, comprehensive visual reference for the Wellcome design system — colors, typography, button variants, cards, and mindful UI components.

Take a moment
Breathe in
Orange
#FF7E1D
Orange Deep
#EC5E0C
Orange Soft
#FFE9D6
Sky
#1FA8E0
Midnight
#12344D
Yellow
#FFCD3C
Coral
#FF8A7A
Teal
#2FBFA0
Lavender
#B79DEB
Ink
#2B2D42
Slate
#5E6C7A
Muted
#9BA6B2
Sand
#ECE3D7
Cream
#FFF6EC
48px
Poppins 700
Display
32px
Poppins 700
A Mindful Day
28px
Poppins 600
breathe in
18px
Regular 400
Body text for paragraphs and descriptions with comfortable reading line-height.
14px
Bold 700
Caption Label
12px
Semi 600
Small utility text for metadata and hints
Primary
Secondary
Soft
Danger
Ghost
New
Meditation Basics
Learn the fundamentals of mindfulness with gentle, guided daily sessions.
Popular
Letting Go of Stress
Release tension and find ease with a calming, breath-led practice.
🌙
Sleep
Nighttime SOS
A short wind-down to quiet a racing mind and drift off gently.
🎧
Pro
Focus Music
Immersive soundscapes engineered to help you stay in deep flow.
Badges
Completed In Progress New Focus Premium
Input + Button
Toggle
Progress
85%
60%
35%
Tooltips & Streak
Hover me 🔥42
Topic Pills
🧘Meditation 😴Sleep 🎯Focus 💛Anxiety
Avatar Group
+9
12 meditating now
Progress
72%
45%
Badges
Mindful Sleep Night