Stillpoint Design System

Warm, playful, rounded -- the visual language of mindfulness

Colors

Stillpoint uses a warm orange-led brushwork accented with calming blues for focus and deep purples for sleep content. The neutral brushwork is warm-toned with creams and soft grays.

Brand

Orange
#FF7300
Orange Light
#FF7E1D
Orange Bright
#FC5500
Orange Warm
#FFA500
Yellow
#FFCE00
Yellow Light
#FFF4CC

Primary (Blue)

Blue
#0061EF
Blue Bright
#0069FF
Blue Light
#0CA4FF
Blue Dark
#3860BE

Secondary

Purple
#281466
Purple Mid
#3B197F
Pink
#FFA1CC
Green
#02873E
Green Light
#32AE88
Teal
#27455C

Neutrals

Black
#141313
Charcoal
#2D2C2B
Dark Gray
#44423F
Gray 700
#4B4C4D
Gray 600
#636059
Gray 400
#A8A5A0
Gray 300
#BAB7B5
Gray 200
#D8D8D8
Gray 100
#E2DED9
Gray 50
#F4F4F4
Warm White
#F9F4F2
Cream
#F5F2ED

Semantic

Success
#01A652
Info
#0C6FF9
Error
#FC5500
Warning
#FFCE00

Typography

Stillpoint uses their custom "Stillpoint Apercu" font -- a rounded, friendly geometric sans-serif. Weights range from 400 (regular) to 900 (black). Here we approximate with DM Sans.

Display / 92px / Black
Be kind to your mind
font-size: 92px | font-weight: 900 | line-height: 1.05
H1 / 72px / Bold
Meditation made simple
font-size: 72px | font-weight: 700 | line-height: 1.1
H2 / 48px / Bold
Put your mind to sleep
font-size: 48px | font-weight: 700 | line-height: 1.15
H3 / 40px / Bold
Explore our library
font-size: 40px | font-weight: 700 | line-height: 1.2
H4 / 32px / Bold
What mkindreds are saying
font-size: 32px | font-weight: 700 | line-height: 1.25
H5 / 24px / Bold
Daily meditation
font-size: 24px | font-weight: 700 | line-height: 1.3
H6 / 16px / Bold
What we offer
font-size: 16px | font-weight: 700 | line-height: 1.15
Body / 16px / Regular
Stillpoint is your guide to mindfulness for your everyday life. Learn meditation and mindfulness skills from world-class experts like Stillpoint co-founder Andy Puddicombe.
font-size: 16px | font-weight: 400 | line-height: 1.5
Small / 14px / Regular
Cancel anytime. Terms and conditions apply.
font-size: 14px | font-weight: 400 | line-height: 1.5
Caption / 12px / Medium
3 MIN MEDITATION
font-size: 12px | font-weight: 500 | letter-spacing: 0.05em | uppercase

Font Weights

Aa
400 Regular
Aa
500 Medium
Aa
600 Semibold
Aa
700 Bold
Aa
900 Black

Spacing

4px base unit spacing scale used consistently throughout the product.

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px
128px

Border Radius

Stillpoint's signature rounded aesthetic -- everything feels soft and approachable. Large radii dominate the UI.

2px
sm
8px
md
12px
lg
16px
xl
24px
2xl
32px
3xl
pill
50%

Shadows

Subtle, warm shadows that add depth without harshness.

Small
Medium
Large
Card
Yellow Glow
Button

Gradients

Warm sunrise gradients for energy, deep night gradients for sleep.

Sunrise
Sleep Night
Warm Glow
Calm Blue
Warm Pink
Focus

Buttons

Pill-shaped primary actions, rounded-rect secondary. The CTA orange button is the hero action.

Primary Buttons

CTA / Brand

Yellow CTA

Dark

Secondary / Ghost

Social Login Buttons

Form Inputs

Clean, minimal inputs with 8px radius and subtle borders. Used on login/signup screens.

Login Form Pattern

Forgot password?

Cards

Rounded cards with 24px radius, soft shadows, and image-top layouts. Content cards use 16px radius.

Basics Course

Learn the fundamentals of meditation in 10 days.

10 sessions

Sleepcasts

Drift off with calming bedtime stories told by soothing voices.

45+ episodes

Focus Music

Scientifically designed music to help you concentrate.

Playlists

Stress & Anxiety

Tools to manage stress and find calm in everyday moments.

Guided

Testimonial Card

"

I started using Stillpoint to help with stress at work. After just two weeks, I noticed a real difference in how I handle tough moments.

Sarah M.
Stillpoint mkindred since 2023

Hero Sections

Stillpoint uses bold, colorful hero areas -- often with yellow/orange backgrounds, large type, and playful illustrations or app screenshots.

40% off the sleep that makes your day

Get the app for meditation, sleep, and focus.

:)

Put your mind to sleep

Wind down with sleepcasts, sleep music, and soundscapes.

☽

Meditation made simple

Guided meditation as easy as 3 minutes a day.

◉

Pills & Tags

Rounded pill tags for categories, durations, and labels.

Meditation Sleep Focus Stress Movement Popular New 3 min 10 min 20 min

Meditation Player

The iconic Stillpoint player uses a warm gradient background (yellow to orange), centered timer ring, and minimal controls. The progress bar sits at the bottom.

9:41
Managing Anxiety
Session 3 of 10
4:32
-15
+15
4:3210:00

Player Specifications

Backgroundlinear-gradient(180deg, #FFCE00, #FF7300)
Timer ring160px diameter, 4px stroke
Timer font44px, weight 700, white
Play button72px circle, white background
Skip buttons56px circle, rgba(255,255,255,0.2)
Progress bar4px height, rgba(255,255,255,0.3) track
Title16px, weight 700, white
Subtitle13px, weight 400, white 80%

Sleep Mode

Dark mode UI with deep purple-to-black gradients. Cards use translucent white backgrounds. Calming, low-contrast design for bedtime use.

9:41 PM

Sleep

Wind down and drift off

Rainday Antiques
Sleepcast - 45 min
Night Sounds
Soundscape - 8 hrs
Wind Down
Sleep meditation - 15 min
Deep Sleep Music
Music - 60 min
Today
Explore
Sleep
Profile

Sleep Mode Tokens

Backgroundlinear-gradient(180deg, #281466, #141313)
Card bgrgba(255, 255, 255, 0.08)
Card radius16px
Thumbnail radius12px
Text color#FFFFFF
Secondary textrgba(255, 255, 255, 0.6)
Tab bar bg#141313
Active tab color#FFA1CC (pink)

Sleep Content Types

Sleepcasts Soundscapes Sleep Music Wind Down

Explore Cards

Square aspect-ratio cards with vibrant background colors and bold white text overlays. Used in category grids and content carousels.

Meditation
Sleep
Focus
Move
Nature
Stress
Kids
Courses

Progress Rings

Circular progress indicators used for streaks, session completion, and daily goals. Orange fill on gray track.

30%
70%
Done
50%

Streak Counter

7
Day streak
Keep it going!

Tab Bar

Bottom tab navigation for the mobile app. White background for day mode, dark for sleep mode. Orange active state.

Light Mode

Today
Explore
Search
Profile

Dark / Sleep Mode

Today
Explore
Sleep
Profile

Illustration Style

Stillpoint's iconic illustration style features amorphous blob shapes, simple dot-eye characters with curved smiles, and a warm brushwork. All shapes are organic and rounded -- no sharp edges anywhere.

Character Blobs

Happy
Calm
Sleepy
Focused

Design Principles

Organic Shapes

No sharp corners. Every shape uses blob-like, organic border radii (40%-60% variations). This creates the warm, approachable feeling that defines Stillpoint.

Minimal Faces

Characters use dot eyes (2-3px circles) and simple curved-line smiles. No detailed facial features. Expressions are conveyed through shape and posture.

Warm Brushwork

Illustrations primarily use orange, yellow, and pink tones. Sleep illustrations use deep purples and navy. Cool blues are reserved for focus content.

Gentle Motion

Animations are slow and breathing-like (4s ease-in-out). Float and scale effects. Never jarring or fast. Everything moves like it is breathing.

Animations

Stillpoint animations are slow, calming, and breathing-inspired. Transitions use ease-in-out curves.

Breathe
4s ease-in-out, scale 1-1.08
Float
3s ease-in-out, translateY 0-8px
Pulse
2s ease-in-out, opacity 0.6-1

Transition Specs

NameValueUsage
Fastall 0.15s easeHover states, micro-interactions
Defaultall 0.3s easeButton states, card hover
Slowall 0.5s easePage transitions, reveals
Springall 0.4s cubic-bezier(0.34,1.56,0.64,1)Playful bounces
Breathe4s ease-in-out infiniteMeditation visuals

Token Reference

Complete list of CSS custom properties / design tokens.

Layout Tokens

TokenValue
--max-width1440px
--content-width1200px
--narrow-width800px
--nav-height80px
--mobile-nav-height64px
--tab-bar-height56px

Breakpoints

NameValue
Mobile375px
Tablet768px
Desktop1024px
Wide1440px

Z-Index Scale

NameValue
Dropdown100
Sticky200
Nav1000
Modal2000
Toast3000

Font Family

TokenValue
--font-primary'Stillpoint Apercu', sans-serif
--font-secondaryApercu, sans-serif
--font-serifApercu, serif

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.theme.extend,
  },
};

// Also reuse designSystem.tailwind.componentRecipes for common surfaces.
ScopePrimaryBody FontRadiusShadowBreakpoint
Design System——800px—{'max': '375px'}
ScopeRecipeClass PatternNotes
Design SystembuttonPrimaryinline-flex items-center justify-center gap-2 rounded-pill bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colorsPrimary action button using exported brand, radius, and shadow tokens.
Design SystemsurfaceCardrounded-card bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6Default surface/card treatment for high-visibility content areas.
Design SysteminputFieldrounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ringBase text input treatment aligned to the exported radius, border, and focus tokens.