Design Tokens

Color Palette

Backgrounds

--bg-screen #FFFFFF

--bg-page #EFF1F5

--chip-bg #EDEDED

--bg-loading #5C6272

Primary

--primary #878E9F

--primary-hover #727680

Borders

--nav-border #EAEAEA

--input-border #D9D9D9

Text

--text-primary #424753

--text-secondary #9A9A9A

--icon-gray #A0A7BA

Highlights

--success #4CAF7D

tier1-bg #FFF0E8

tier1-text #C05A1A

tier2-bg #EEF2FF

tier2-text #4A5BA8

Typography

All text uses Roboto. Google Fonts loaded via link.

Screen Heading

.screen-heading 36px / weight 400
color #424753
line-height 1.17

Screen description body text — supporting copy that appears below a screen heading.

.screen-desc 16px / weight 400
color #424753
line-height 1.55

Form Label

.form-label 12px / weight 600
uppercase / #424753
letter-spacing 0.4px

Step 1

.step-label 12px / weight 500
uppercase / #9A9A9A
letter-spacing 1px

Chat message text in a bubble

.chat-bubble 16px / weight 400
color #424753
line-height 1.17

Button text 12–13px / weight 700
uppercase / #FFFFFF
letter-spacing 0.6px

Caption or secondary text — muted supporting copy

Caption / secondary 12px / weight 400
color #9A9A9A

Border Radius

--radius
8px

--radius-chip
100px (pill)

--radius · --radius-chip

Shadows

--shadow-card 0px 4px 4px
rgba(0,0,0,0.05)

--shadow-elevated 0px 14px 44px
rgba(0,0,0,0.2)

--shadow-subtle 0px 2px 4px
rgba(0,0,0,0.2)

--shadow-card · --shadow-elevated · --shadow-subtle

Components

Buttons & CTAs

Primary CTA

.btn-welcome

Forward FAB · Default + Disabled

.fab-nav · .fab-nav:disabled

Back Navigation (bare icon, no border)

.fab-back

Chat Gate (End-of-Chat CTA)

.gate-buttons · .gate-primary · .gate-secondary

Form Inputs

Text Input

First Name

.form-label · .form-input

Textarea

Notes

.form-input (textarea)

Custom Dropdown

Pronouns

.form-select-wrap · .form-input

Error State

Please enter a valid email address

.form-input.input-error · .field-error-msg

Sliders

Range Slider with Age Display

Age

.slider-input · .age-display · .slider-wrap

Selection Controls

Radio Pills (Yes / No)

.checkin-opt.radio · .radio-dot · .active

Quick Reply Chips

.checkin-options · .checkin-opt · .active

Stacked Button Options

.ha-btn-option · .ha-btn-option.active

Context Pill Tray

.chat-ctx-pill · .chat-ctx-pill.active

Multi-Select Chips

Before School

During School

All Afternoon

After Bedtime

+ Add

.chip · .chip.active · .chip.chip-add

Custom "+ Add" Inline Input

Before School

.chip-add-input

Cards

Priority Reorder List (drag to reorder)

Daily phone-free focus time for homework

Consistent bedtime with screens off early

Weekly arts and crafts together

.priority-list · .priority-item · .priority-badge · .priority-title · .priority-handle

Task Card

Complete

10-minute morning walk

Today

5-minute guided breathing exercise

Tomorrow

Journal — 3 things you're grateful for

.task-card · .task-card.done · .task-check · .task-info · .task-status · .task-title

Off-Ramp Resource Card

988 Suicide & Crisis Lifeline

Call or text 988 — available 24/7

Find a Therapist

Psychology Today directory

.offramp-resource · .offramp-resource-icon.t1/.t2 · .offramp-resource-body · .offramp-resource-label · .offramp-resource-sub

Chat UI

Chat Bubbles + System Label + Quick Replies

Today · 9:41 AM

Good morning! How are you feeling today?

Pretty good, thanks!

That's wonderful to hear. Let's check in on how your sleep goals are going this week.

.chat-bubble · .chat-ai · .chat-user · .chat-system · .checkin-options · .checkin-opt

Headers & Navigation

Screen Header — with progress bar (intake flow)

.screen-header · .header-avatar · .header-logo · .header-progress · .header-dots

Screen Header — without progress bar (core app)

.screen-header · .header-avatar · .header-logo · .header-spacer · .header-dots

Chat Header (centered avatar · hamburger)

.chat-header · .header-avatar · .header-dots

Hamburger / Sub-menu Button (dark context)

.sub-menu-btn

Dark Screen Pattern

Used on full-screen onboarding / plan presentation screens. The dark chrome (bg-loading) wraps .dark-header + .sub-content + .dark-footer.

Dark Header + Sub-content + Dark Footer

Alignd

Your plan is ready

Personalized based on your assessment answers.

.dark-header · .sub-menu-btn · .sub-content · .dark-footer · .btn-welcome

Tab Toggle

Segmented pill used to switch between views (e.g. Plan / Tasks).

2-Up Tab Toggle

.tab-toggle · .tab-toggle button · .tab-toggle button.active

Badges & Labels

All Badge Variants

Step 1

.step-label

Immediate Support Needed

.offramp-tier-badge.tier1

Clinical Referral

.offramp-tier-badge.tier2

Loading / Spinner

Spinner (dark background)

Generating your plan…

Personalizing based on your assessment

.loading-spinner · .loading-spinner-inner · .loading-spinner-ring