Goood, at night.
Evening light, one voice, one sound.
Approved 2026-10-01.
Foundations
Night is Goood's only theme: the Light and Dark toggle both show it. Cream text on a forest-to-black sky, translucent cream cards, Sun Gold for the one active or playing thing per view.
Three brand colors, three jobs
Sun Gold marks the primary action, the active tab, NEW and what is playing. Sage belongs to Jessa: her pearl, Create and “create one with me”. Lavender is reserved for the Journal room.
Sun Gold
Active, playing, the one primary action
--brand-primary
Sage
Jessa’s presence. Never changes color.
--brand-secondary
Lavender · reserved
The Journal room (n16)
--brand-tertiary
Each palette includes solid, hover, pressed, on-color text, two surface tints, readable text, and border roles. The theme selector above updates these examples.
Text with more range
Use a role for the purpose of the text. Placeholders still need labels; disabled tones are reserved for inactive controls.
--fg--fg-secondary--fg-muted--fg-subtle--fg-placeholder--fg-disabled--fg-brand-primary--fg-brand-secondary--fg-brand-tertiary--fg-inverseSurface and status roles
bg
bg-subtle
bg-muted
bg-inverse
Status colors keep their meaning independently of brand colors.
Explore the full palettes · 50–950
These are raw ingredients. Components use semantic roles so colors can adapt to light and dark themes.
Neutral · cream over night
50
100
200
300
400
500
600
700
800
900
950
Sun Gold
50
100
200
300
400
500
600
700
800
900
950
Sage
50
100
200
300
400
500
600
700
800
900
950
Lavender
50
100
200
300
400
500
600
700
800
900
950
Feelings · pearl body
calm
anxious
sad
tired
overstimulated
down on myself
i don’t know
Each feeling also has -light, -deep and -room steps: the pearl’s highlight and shadow, and the top of its destination room. Feelings are always labelled in words.
Spacing, radius & elevation
Typography
Newsreader Light for headings and titles, Geist for every interface label. Section headings are lowercase. Display text is never bold.
Families
Newsreader · Geist
Line height
1 / 1.04 / 1.15 / 1.45 / 1.55
Letter spacing
-.015em display · .08em / .14em caps
Weights
300 / 400 / 500 / 600
Display · Newsreader
6XL · 76px · italic
The feeling’s name on its destination. Long names step down to 5XL (56px). Line height 1.
anxious
4XL · 48px
Page questions and titles: Home, picker, library, end screen. Tight (1.04).
how are you
feeling?
3XL · 40px · italic
The grounding cue.
breathe in
2XL · 32px
Section headings (lowercase), video titles, the sheet title. Snug (1.15).
new this week
XL · 26px
Catalog row headings, empty states.
Sleep Stories
LG · 20px · regular
Card and row titles, feeling labels, the equal-weight choice buttons.
Softness
Interface · Geist
Body-LG · 17px
Jessa’s line under a feeling.
here is what I have for you
MD · 15px
Body, buttons, the greeting. Normal (1.45); descriptions use Relaxed (1.55).
goood evening, june
SM · 14px
Supporting copy, tile names, card titles.
pick a sound, lock your phone. it keeps playing.
XS · 13px
Metadata, pills, captions.
Extended Session · 09:11
2XS · 11px
Tab labels, NEW, durations, “playing”. Caps use .08em; the wordmark uses .14em.
NEWGooodLibrary
Shared label
Featured
Geist · 2XS / 11px · SemiBold / 600 · Wide tracking · Uppercase. Used for FEATURED and the wordmark; never as an eyebrow over a heading.
Icons
Phosphor, regular for navigation and controls; filled for the active tab, play/pause and a hearted or favorited state. Pearls, line art and the wave are Goood artwork, not icons.
Regular
Inactive tabs, back, close, action chips.
Filled
Active tab, transport controls, pressed heart and favorite.
Goood patterns
Product compositions in css/product.css, built from the shared tokens. Rules: one glowing card per view (the check-in), cards are translucent cream with a 1px cream border and no shadow, glass only on floating chrome, Sun Gold only for what is active or playing.
The mark
Three woven rings: the sun, the open in-between and the moon (n1, n16). Cream rings, a Sun Gold sun, a cream crescent. On the splash the rings draw in left to right, the sun rises, then the moon appears.
Pearls
Goood’s only characters. Light from the upper left, a glint, a soft shade and a halo in the pearl’s own color. Jessa’s is sage and never changes.
Home: greeting, check-in, tree
Category tiles and video cards
v1 thumbnails are not in the handoff. Placeholders use the category tint and its line art; real thumbnails replace them.
Sounds, the now-playing pill and the capsule tab bar
One ambient sound at a time. The pill opens the Sounds sheet; when paused it says so and its waves still.
Equal-weight choices, alternatives and quiet actions
Leaving is a feature: “end screen time” is the same button as “play next”. Hearts toggle with no counts.
01 / Button
One vocabulary for sizes, variants, and interaction states.
Hover and keyboard-focus any enabled button to inspect its state.
Brand palette and action treatment
Palette changes the brand color. Variant controls emphasis. These are separate recipe examples, not a recommended action group.
Primary palette
Secondary palette
Tertiary palette
02 / Field
Input, textarea, and native select share labels, hints, and validation. Selects reserve space for an inset arrow. Help and error text have an additional 2px of top spacing.
Enter a valid email address.
03–05 / Selection controls
Checkboxes and radios use 20px indicators. Checkboxes select options, radios select one option, and switches change a setting.
06 / Surface
A visual treatment with no prescribed content or layout.
A horizontal composition
Identity, a short description, and room to breathe.
24
A compact data composition.
An elevated surface
Use elevation when hierarchy calls for it. A plain section or divider is equally valid.
These compositions are examples, not core card templates. Surface defines treatment only; layout and padding are composed separately.
07 / Badge
Compact labels communicate status with words as well as color.
08 / Tabs
Line and segmented treatments share keyboard and panel behavior.
A clear overview of the current view. Use the arrow keys to change tabs.
Recent activity appears here. Each tab owns its associated panel.
Preferences belong in the settings panel.
A clear overview of the current view. Use the arrow keys to change tabs.
Recent activity appears here. Each tab owns its associated panel.
Preferences belong in the settings panel.
09 / Alert
Persistent feedback belongs near the relevant content.
Use inline feedback near the relevant content.
Your preferences are up to date.
Some information may be out of date.
Check the highlighted fields and try again.
10 / Dialog
Native modal semantics with an accessible title and explicit dismissal.
11 / Avatar
Image, initials, and a neutral fallback. Three sizes.
Use initials or the neutral person icon when a photo is unavailable.
12 / Search field
A field composition with search and clear actions.
Clearing returns focus to the field. Product code owns filtering.
Mobile primitives
App header, bottom navigation, sheet, sticky action bar, and list row. In the framed mobile player, safe-area padding clears the transparent 44px status bar and 28px home indicator overlays. Standalone and canvas screens keep native safe areas only.
A flexible list row
Leading, body, and trailing content.
Sheets share dialog behavior: focus stays inside, Escape closes, and focus returns to the trigger.