StillwaterDESIGN.md alpha

Stillwater is a mobile-first system for meditation, sleep stories, breathing exercises and gentle habit tracking. The interface should lower the heart rate: soft pastel color, lots of air, round shapes and a warm serif that feels handwritten without being fussy. Every screen has one clear thing to do. Motion is slow (400-600 ms, ease-out) and the night mode is a first-class citizen, because many sessions happen in bed. Fonts were chosen with full Latin Extended coverage, so Polish, Czech and other Central European diacritics render correctly in both the serif and the sans.

primary#6B58B8
secondary#F4B69C
tertiary#9CC3A8
neutral#8B8698
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayFraunces · 44px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headline-lgFraunces · 32px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headline-mdFraunces · 24px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

titleNunito · 18px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body-lgNunito · 17px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body-mdNunito · 15px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

label-mdNunito · 13px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

label-smNunito · 12px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

timerFraunces · 64px · Light

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Corner Radius

12px
20px
28px
36px
9999px

Spacing

Base: 4px
4px
8px
8px
16px
24px
24px
32px
48px
72px

Stillwater is a mobile-first system for meditation, sleep stories, breathing exercises and gentle habit tracking. The interface should lower the heart rate: soft pastel color, lots of air, round shapes and a warm serif that feels handwritten without being fussy. Every screen has one clear thing to do. Motion is slow (400-600 ms, ease-out) and the night mode is a first-class citizen, because many sessions happen in bed. Fonts were chosen with full Latin Extended coverage, so Polish, Czech and other Central European diacritics render correctly in both the serif and the sans.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Chips

defaultselected

Inputs

Timer

default

default

Tab Bar

default

Error Alert

default

Streak Badge

default

divider

default

Elevation & Depth

card-shadow

Do's & Don'ts

Do

keep one primary action per screen, in thumb reach
use pastel tints for backgrounds and the dusk violet only for actions and progress.d
round every corner; pills for all buttons

Don't

use pure black, pure white backgrounds or saturated red outside errors
use fast or bouncy animations
put white text on pastel tints; use the matching dark 'on-' color
Download .md
Storm Cube Marketing Agency Storm Cube Marketing Agency @stormcube
License CC-BY
Uploaded yesterday
Version v1
File size 8.0 KB
Downloads 4
Copies 0
healthcare light minimal mobile-app organic

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/stormcube/stillwater and implement it in my code

Don't have the MCP? Install it here