Pai Wellness Logo
    WA Bot

    Pai Wellness · Design System · 2026

    Design Language

    Every token, component, and composition used across the platform. Rooted in the warmth, nature, and spirit of Pai.

    01 — Colours

    Pai Brand — Warm & Grounded

    #0f172a

    Night Slate

    Canvas, navbar

    #c2410c

    Terracotta

    CTA accent, fire

    #92400e

    Earth Ochre

    Warm text, prices

    #166534

    Jungle Green

    WhatsApp, free, nature

    #7c3aed

    Violet Dusk

    Retreats, healing

    #be185d

    Dusk Rose

    Donation, feminine energy

    Supporting — Mist & Sky

    #2563eb

    Cerulean

    Interactive, active nav

    #0891b2

    Mountain Mist

    Calm, info states

    #d97706

    Temple Gold

    Featured, stars, highlight

    #4ade80

    Bamboo Leaf

    Success states

    Stone neutral ramp — replaces cool grey

    50
    100
    200
    400
    500
    600
    800
    900

    Gradient recipes

    from-slate-900/60 via-slate-900/70 to-slate-900/90Hero overlay
    from-blue-300 via-purple-300 to-purple-400Hero title
    from-purple-300 via-pink-300 to-orange-300Sub-title
    from-orange-600 to-red-700 (terracotta)Warm CTA
    from-violet-700 to-pink-700Healing/Dusk
    from-violet-600 to-indigo-600Invite/Create
    from-green-800 to-green-950Jungle warmth

    Event categories — Pai palette

    yogameditationwell-beingworkshopsmusicnightlifecraftsoutdoorhealingother
    02 — Typography

    Display — Space Grotesk (same as Home)

    Explore Pai, Explore Yourself.

    Hero / D1

    48px · 700 · −0.03em

    Trainings & Retreats

    Heading / D2

    30px · 700 · −0.02em

    Upcoming Events

    Section / D3

    22px · 700 · −0.01em

    Interface — System UI (sans-serif stack)

    Morning Hatha Yoga Class · Pai Walking Street

    Body / Semibold

    15px · 600

    Get daily updates on WhatsApp — a silent group delivering curated local experiences straight to your phone.

    Body / Regular

    14px · 400 · leading-6

    Wednesday, May 5, 2026 · 08:00 AM

    Caption

    12px · 500

    Pai Wellness · Design System

    Eyebrow

    10px · 600 · uppercase · ls 0.1em

    01 — Colours

    Mono / Label

    10px · mono · uppercase

    03 — Space & Radius

    Spacing scale (Tailwind × 4px)

    4
    8
    12
    16
    20
    24
    32
    40
    48
    64

    Radius

    sm
    md
    lg
    xl
    2xl
    3xl
    full

    Cards use rounded-xl / rounded-2xl. Pills/badges use rounded-full. Feature cards use rounded-3xl.

    04 — Buttons

    Core variants

    Pill — primary mobile CTA usage

    Gradient — header/nav

    States

    Size scale

    05 — Badges & Labels

    Status badges

    Featured
    Free
    Donation
    Pending
    Rejected
    Approved

    Dismissible filter

    Yoga Teacher Training Wellness Retreat May 2026

    Live dot — "Happening Today"

    Happening Today

    Nav counter dot

    3

    Used on Trainings bottom nav tab

    06 — Cards

    Event card

    Featured
    yogaFree

    Morning Hatha Yoga Class

    Wed, May 7 · 8:00 AM
    Pai Walking Street
    by Ariya

    Training card

    Healing Retreat฿12,000
    S
    Sofia M.

    5-Day Deep Healing & Sound Bath Retreat

    Jun 12 – Jun 17, 2026
    Pai, Thailand
    View details

    WhatsApp banner

    Join on WhatsApp

    Get daily event updates

    Invite / CTA banner

    Know someone who'd love this?

    Invite friends & facilitators

    Healing offering card

    ReikiSound Healing

    Reiki + Sound Bath Session

    90 min · ฿800

    M
    Maria K.

    Empty state

    🌿

    Nothing on May 5

    No events scheduled. Try another date.

    07 — Inputs
    08 — Motion
    TokenValueUsed in
    Fade upopacity 0→1 · y 20→0 · 0.4s ease-outEventCard, TrainingCard
    Hero enteropacity 0→1 · y 30→0 · 0.8s ease-outHeroSection headline
    CTA staggerdelay +300ms after heroHero CTA buttons
    Hover lifty −5px · shadow growEventCard whileHover
    Hover scalescale 1.02TrainingCard (desktop)
    Tap shrinkscale 0.98TrainingCard (mobile)
    Nav activescale 1.05Bottom nav active item
    Nav tapactive:scale-90Bottom nav tap feedback
    Bounce dotsanimate-bounce · delays 0 / 150 / 300msHome loading skeleton
    Ping dotanimate-ping · bg-orange-400/75Happening Today button

    Live — hover lift (y −5px)

    Hover me

    09 — Patterns

    Mobile bottom nav

    Today
    This Week
    3
    Trainings
    Healing

    Page header (Today)

    Today

    Monday, May 5, 2026

    May 5

    Time-of-day quick scroll

    Event group header

    Morning

    (3)

    Hero gradient overlay

    from-slate-900/60 via-slate-900/70 to-slate-900/90

    + from-blue-900/50 mix-blend-overlay

    10 — IconsLucide React · h-4 (inline) · h-5 (nav) · h-6 (bottom nav)
    Today
    Events
    Trainings
    Healing
    Featured
    Location
    Time
    Attendees
    WhatsApp
    Morning
    Afternoon
    Evening
    Featured★
    Create
    Success
    Dismiss
    Error
    Info
    Done
    Loading
    Settings
    Logout
    Profile
    Brand
    Pai Wellness · Design System · 2026v1.1