Life DS — Design System Playground

Colors

App Brand Colors

Luna

#6B3FA0

--c-brand (luna)

Aura

#00897B

--c-brand (aura)

Sienna

#E64A19

--c-brand (sienna)

Alma

#5E35B1

--c-brand (alma)

Nova

#6366F1

--c-brand (nova)

Aida

#1565C0

--c-brand (aida)

Stella

#F57F17

--c-brand (stella)

Vera

#C62828

--c-brand (vera)

Vita

#2E7D32

--c-brand (vita)

Aria

#283593

--c-brand (aria)

Semantic Colors (Light / Dark)

Background --c-bg #FAFAFA / #0A0A0F

Surface --c-surface #FFFFFF / #1C1C1E

Surface Container --c-surface-container #F2F2F5 / #252527

Text --c-text #1C1C1E / #F2F2F7

Text Secondary --c-text-secondary #6C6C70 / #8E8E93

Border --c-border #E5E5EA / #38383A

Error --c-error #FF3B30 / #FF453A

Focus --c-focus #007AFF / #0A84FF

Growth --c-growth #34C759 / #30D158

Activity Colors (Sienna)

Feed

#D4903A

--c-feed

Sleep

#5D82B8

--c-sleep

Diaper

#5A8F3C

--c-diaper

Growth

#A060A0

--c-growth-sna

Wellness

#B85050

--c-wellness

App Icons

Source SVGs in life-sdk/ds/web/icons/apps/ · 10 apps · rsvg-convert for iOS/Android PNGs

SVG Light

Luna Period tracker

Aura Pregnancy

Sienna Baby tracker

Alma Mental health

Nova Nightlife

Aida Social aid

Stella Child education

Vera Couple

Vita Nutrition

Aria Career

SVG Colored

Luna Period tracker

Aura Pregnancy

Sienna Baby tracker

Alma Mental health

Nova Nightlife

Aida Social aid

Stella Child education

Vera Couple

Vita Nutrition

Aria Career

Full Colored — iOS-style (80 × 80)

Luna Period tracker

Aura Pregnancy

Sienna Baby tracker

Alma Mental health

Nova Nightlife

Aida Social aid

Stella Education

Vera Couple

Vita Nutrition

Aria Career

Favicons (32 × 32)

Luna

Aura

Sienna

Alma

Nova

Aida

Stella

Vera

Vita

Aria

Typography

Perfect Fourth scale · System font stack · 4 weights

display 34px · w700 · lh1.2 --text-2xl

The quick brown fox

title 22px · w700 · lh1.2 --text-xl

The quick brown fox

headline 17px · w600 · lh1.3 --text-lg

The quick brown fox

body 15px · w400 · lh1.5 --text-base

The quick brown fox

caption 13px · w400 · lh1.4 --text-sm

The quick brown fox

label 12px · w500 · lh1.3 --text-xs

The quick brown fox

Spacing

4px base grid · 11 steps

space-1

4px --space-1

space-2

8px --space-2

space-3

12px --space-3

space-4

16px --space-4

space-5

20px --space-5

space-6

24px --space-6

space-7

28px --space-7

space-8

32px --space-8

space-10

40px --space-10

space-12

48px --space-12

tap-target

44px --tap-target

Radius & Shapes

Radius Scale

xs 4px --radius-xs

sm 8px --radius-sm

md 12px --radius-md

lg 16px --radius-lg

xl 24px --radius-xl

xxl 32px --radius-xxl

full 9999px --radius-full

pebble 24px 22px 26px 28px / 18px 16px 20px 20px --radius-pebble

Pebble & Blob Shapes

PebbleButton Primary CTA button 24px 22px 26px 28px / 18px 16px 20px 20px

Blob-1 Hero illustration blob 40% 60% 60% 40% / 60% 30% 70% 40%

Blob-2 Background decoration 50% 50% 30% 70% / 50% 60% 40% 50%

Blob-3 Feature highlight shape 65% 35% 54% 46% / 40% 44% 56% 60%

Icons

Lucide icon set · 52 icons shown · No emoji

home

heart

sparkles

bar-chart-3

moon

droplets

wind

ruler

users

share-2

alert-circle

plus

settings

calendar

activity

clock

star

check

x

chevron-left

chevron-right

chevron-down

eye

lock

unlock

map-pin

phone

message-circle

bell

search

filter

download

upload

pencil

trash-2

info

help-circle

shield

zap

thermometer

sun

cloud

leaf

flower

circle

shield-check

heart-pulse

trending-up

trending-down

book-open

pill

stethoscope

Atomics

Atoms — Molecules — Organisms — Templates

Atoms

DSButton atom

Secondary actions

Icon atom

Phase indicator

Molecules

EmpathyBanner molecule

Mood empathy opener

PebbleButton molecule

Primary CTA

SegmentedRing molecule

Cycle ring display

Organisms

StitchCalendar organism

Appointment calendar

StitchChart organism

Cycle trend chart

StitchDashboard organism

Today summary card

StitchInsight organism

Insight cards

StitchSettings organism

Settings panels

Templates

StitchOnboarding template

Onboarding flow

Components

Live previews with traceability IDs

PebbleButton Primary CTA

brand: luna|aura|sienna|alma|nova|aida · label · icon · size: sm|md|lg · variant: primary|secondary · disabled · loading

PebbleAction Quick log action

icon · label · color · active · onclick

SegmentedRing Cycle phase visualization

Day 14 Ovulation

segments[{value,color,label}] · currentIndex · centerText · centerSubtext · size

DSFloatingNav Navigation

tabs[{id,label,icon}] · active · brand · onchange · onfab · daisyOpen

Active tab: home — Click tabs & brand buttons above to interact

DaisyMenu Radial FAB menu

Tap + to open daisy menu

open · items[{id,icon,label,color}] · onselect · onclose · brand

DSBottomSheet Data entry panel

open · title · onclose · maxHeight · slot (form content)

EmpathyBanner Emotional support banner

message: {key, icon, category, fallback} · onDismiss

AIInsightCard AI insight display

Generated by AI · Not medical advice

Your cycle has been regular for 3 consecutive months. Luteal phase consistently 13-14 days.

text · disclaimer · brand · onLearnMore

EvidenceCard Evidence-based information

Ovulation typically occurs 12-16 days before the next menstrual period.

ACOG Practice Bulletin DOI: 10.1097/AOG.0000000000004853

text · source · doi · icon

CrossPromoCard Cross-app promotion

targetApp · targetColor · icon · title · body · ctaLabel · ctaHref · dismissible

MedicalDisclaimer Required disclaimer

No props — always renders standard disclaimer text

PrivacyBadge GDPR indicator

Private & Encrypted

Your data is protected with AES-256-GCM encryption and Argon2id key derivation (64MB RAM, 3 iterations). Only you have access to your personal information.

expanded: false|true

ChatBubble Chat message bubble

role: user|assistant · content · timestamp

ChatInput Chat text input

brand · placeholder · chips[] · onsend

Pebble Drawer & Settings

Profile drawer + settings panel components

DSPebbleDrawer Fixed profile drawer

brand · items[{id,label,type}] · activeId · onselect · onsettings · onadd

Active: me

DSSettingsSlide Settings panel

open · brand · title · onclose · children

All Tokens

43 tokens · Click UUID to copy

Category	Token	Value
Color	`--c-bg`	#FAFAFA
Color	`--c-surface`	#FFFFFF
Color	`--c-surface-raised`	#F7F7F8
Color	`--c-surface-container`	#F2F2F5
Color	`--c-text`	#1C1C1E
Color	`--c-text-secondary`	#6C6C70
Color	`--c-border`	#E5E5EA
Color	`--c-error`	#FF3B30
Color	`--c-focus`	#007AFF
Color	`--c-growth`	#34C759
Typography	`--text-2xl`	34px
Typography	`--text-xl`	22px
Typography	`--text-lg`	17px
Typography	`--text-base`	15px
Typography	`--text-sm`	13px
Typography	`--text-xs`	12px
Typography	`--weight-normal`	400
Typography	`--weight-medium`	500
Typography	`--weight-semibold`	600
Typography	`--weight-bold`	700
Spacing	`--space-1`	4px
Spacing	`--space-2`	8px
Spacing	`--space-3`	12px
Spacing	`--space-4`	16px
Spacing	`--space-6`	24px
Spacing	`--space-8`	32px
Spacing	`--space-10`	40px
Spacing	`--space-12`	48px
Spacing	`--tap-target`	44px
Radius	`--radius-xs`	4px
Radius	`--radius-sm`	8px
Radius	`--radius-md`	12px
Radius	`--radius-lg`	16px
Radius	`--radius-xl`	24px
Radius	`--radius-pebble`	24px 22px 26px 28px / 18px 16px 20px 20px
Motion	`--duration-fast`	120ms
Motion	`--duration-normal`	240ms
Motion	`--duration-slow`	320ms
Motion	`--ease-out`	cubic-bezier(0.2,0,0,1)
Motion	`--ease-spring`	cubic-bezier(0.34,1.56,0.64,1)
Shadow	`--shadow-sm`	0 1px 3px rgba(0,0,0,.08)
Shadow	`--shadow-md`	0 4px 12px rgba(0,0,0,.10)
Shadow	`--shadow-lg`	0 8px 24px rgba(0,0,0,.12)