Notice Design System

01 — Colors

Warm where others are cool. No pure whites, no cool grays, no blue tints. Every color is rooted in the earth-tone family.

Brand

Bright Marigold

#F0AF32 — Mark

Burnt Marigold

#B9691E — CTA

Burnt Marigold Hover

#A35B16 — CTA hover

Backgrounds

Warm Stone

#F7F3EE — Light bg

Warm Black

#1A1816 — Dark bg

Surfaces

Warm

#EFEBE4

Card

#E8E3DA

Subtle

#DDD7CC

Dark Mid

#272420

Dark Card

#322E29

Dark Subtle

#3D3833

Text Hierarchy

Primary

#2A2520

Secondary

#4D453B

Tertiary

#7A7068

Muted

#A69D94

Faint

#C8C0B6

Status

Success

#4A7A4A

Error

#A63D2F

Warning

#B8860B

Low / Cool

#2F6B8A

02 — Spacing

4pt base unit. Fine enough for Watch, consistent enough for iPhone and web.

space.xs

4pt

space.sm

8pt

space.md

16pt

space.lg

24pt

space.xl

32pt

space.2xl

48pt

space.3xl

64pt

Corner Radii

6px sm

8px md

10px lg

12px xl

03 — Typography

Four roles: display (wordmark), headline, body, and label. Light weights throughout — the typography breathes.

Display — Wordmark

Notice

Hiragino Kaku Gothic Pro W6 · 0.04em tracking · Fallback: Shippori Mincho 500

Headline

Your body already knows. Learn to listen.

DM Sans 300 · 0.01em tracking · clamp(1.4rem, 4vw, 2.6rem)

Body

Interoceptive awareness training for Apple Watch. Notice what's actually happening — before your mind tells a story about it. Heart rate, heart rate variability, breathing patterns surfaced as they happen.

DM Sans 300–400 · 1rem · line-height 1.7

Label / System

Real-Time Signals · Join Beta · Elevated

JetBrains Mono 300 · 0.1–0.2em tracking · uppercase

04 — Components

Buttons

Primary

Primary Small

Disabled

Secondary

Text

Learn more

Card

Real-Time Signals

See what's happening now

Heart rate, HRV, breathing patterns — continuous biometric signals surfaced as they happen, not as daily summaries.

Text Input

Click the input to see the focus state

Section Divider

What Notice Does

Feedback States

✓ You're on the list. We'll be in touch. Something went wrong. Please try again. Syncing... Watch battery low

Status Badges

Elevated Baseline Low Rising Falling

Confidence Indicator

Low

Medium

High

05 — Dark / Light Modes

Watch is always dark. iPhone supports both. Web is light only (v1). The semantic token system maps every color to both contexts.

Light Context — iPhone / Web

Primary text on warm surface

Secondary text

Tertiary · 7A7068

Card surface

Muted text · A69D94

Elevated Low Falling

Dark Context — Watch / iPhone Dark

Primary text on dark surface

Secondary text

Muted text · 8A8078

Card surface

Dark card · 322E29

Elevated Low Falling

06 — Iconography

Custom inline SVG. 1.5px stroke, round caps and joins. Burnt marigold strokes, bright marigold accent fills. No icon library.

pulse

hrv

breath

bell

gear

timeline

check

heart

arrow-up

arrow-down

info

07 — Motion

Embodied motion. Breath-paced ambient cycles, gentle entrance animations, and a signature easing curve that decelerates like an exhale.

Fade Up

0.6s · ease-default · translateY(12px)

Stagger

120ms intervals · cascade

Breath Cycle

8s full cycle · scale 1.0–1.15 · ambient only

Easing Curves

Token	Value	Usage
ease.default	cubic-bezier(0.25, 0.46, 0.45, 0.94)	Entrance/exit animations
ease.interactive	cubic-bezier(0.25, 0.1, 0.25, 1.0)	Button press, toggles

Duration Scale

Token	Value	Usage
duration.fast	0.15s	Hover, micro-interactions
duration.medium	0.3s	State changes
duration.default	0.6s	Entrance animations
duration.slow	1.0s	Page transitions
duration.breath	4.0s	Ambient breath cycles

08 — Data Visualization

Warm, precise, revealing. No chartjunk. Data that means something.

Signal Display — Watch (Dark Context)

72 bpm

Falling

38 ms

Elevated

Line Chart — iPhone (Light Context)

9am 12pm 3pm 6pm 9pm

Insight Card with Sparkline + Confidence

Pattern Detected

Your HRV drops consistently between 2–4pm on weekdays. You've described feeling "tight" during these windows.

12 OCCURRENCES

09 — Surface Mockups

Watch is the primary surface. iPhone is the companion. Both shown with representative screens.

Nudge

Your heart rate shifted. What do you notice?

Tight

Buzzing

Heavy

Skip

Watch — Prompt Screen

72 bpm

Baseline

Watch — Signal Screen

2:15pm · HRV Shift

HRV dropped from 42ms to 28ms. You reported "tight."

Elevated

Pattern Detected

Your HRV drops consistently between 2–4pm on weekdays.

9:40am · Nudge

Heart rate shifted. You reported "open."

Baseline

iPhone — Timeline

10 — Voice & Copy

Direct, warm, embodied. Names what's happening without judging it. No emoji, no forced positivity, no gamification.

Nudge Prompts

"Your heart rate shifted. What do you notice?"

Don't

"Uh oh! Your stress levels are up. Try taking 3 deep breaths!"

Insight Cards

"On days you walk before 9am, your afternoon HRV is 15% higher than your baseline."

Don't

"Great job walking this morning! Keep it up!"

Error States

"Can't reach the server. Your data is saved locally and will sync when the connection returns."

Don't

"Oops! Something went wrong. Please bear with us!"

Empty States

"No signals yet. Notice is calibrating to your baseline."

Don't

"Nothing here yet! Start your wellness journey today!"

Response Vocabulary

Somatic descriptors, not emotional categories. The user names what the body feels like, not what the mind thinks about it.

Tight Open Heavy Light Buzzing Numb Warm Cool Restless Still