Human before administrative
Meaning and momentum appear before menus, records, or status.
MAHALO RESEARCH · DESIGN SYSTEM V3.0
kai
Clinical trust.
Beautifully human.
Kai is the product system behind Embrace V2: an editorial participant experience for study tasks, questionnaires, connected health, records, and safe AI guidance. One skeleton supports Ink and Dawn while tenant expression stays controlled.18 canonical chapters14 answer patterns2 complete themes1 safety model
TODAYOne small moment
embraceOne small moment
for your health.
01 · Foundations
Principles before pixels.
The system protects participant dignity, attention, and research meaning before it protects visual consistency.One decision at a time
Focused screens reduce burden and protect data quality.
Earn every answer
Explain why information matters at the moment it is requested.
Gratitude, not gamification
Thank contribution without points, pressure, or manufactured streak anxiety.
Context without diagnosis
Health signals support reflection and research—not clinical interpretation.
Safe assistance by default
Kai explains the study and product while preserving medical and privacy boundaries.
02 · Visual grammar
Editorial outside. Precise inside.
Large narrative transitions frame compact, credible product interfaces. The system feels art-directed without making research tasks theatrical.Let the chapter breathe.
Instrument Serif carries emotional transitions. DM Sans carries every action, explanation, and data label.
Inside the phone, use compact cards, explicit hierarchy, and one dominant action.
Pastels create memorable moments. Ink preserves seriousness and contrast.
Every flow earns its own shape.
A consent page must not look like device pairing. A questionnaire must not look like a dashboard.
03 · Color
A quiet base with purposeful atmosphere.
Neutral actions preserve hierarchy. Mint, coral, blue, and violet express meaning—not decoration.Primary text, dark canvas, neutral CTA
Editorial canvas
Participant app background
Clinical context section
Contribution, success, selected progress
Human warmth, symptom attention
Records, connected data, information
Kai, reflection, guided assistance
Recoverable attention
Blocking error only
Color contract: Ink owns primary actions. Mint marks contribution and success. Coral marks human warmth or attention. Blue marks records and connected information. Violet is reserved for Kai, reflection, and guided assistance.
04 · Typography
Two voices. One calm hierarchy.
Instrument Serif makes participation feel considered. DM Sans keeps every interaction legible, direct, and trustworthy.Instrument Serif
Participant emotion, prompts, chapter titles, reflective moments.
DM Sans
Navigation, controls, body copy, labels, health values, metadata.
display.heroInstrument Serif 40080–132 / .84
Narrative page openings
display.sectionInstrument Serif 40056–118 / .88
Chapter transitions
display.screenInstrument Serif 40036–48 / .92
Participant prompts
title.cardDM Sans 60016–22 / 1.2
Functional card titles
body.largeDM Sans 40017–18 / 1.6
Editorial support
body.defaultDM Sans 40015–16 / 1.5
Product copy
labelDM Sans 7008–11 / 1.2
Uppercase context and metadata
dataDM Sans 50026–42 / 1
Health values
05 · Layout & shape
Generous chapters. Intimate screens.
Page-level whitespace is cinematic; phone-level spacing is measured, reachable, and dense enough to feel real.Spacing rhythm
4
8
12
16
20
24
32
48
64
96
Radius language
12controls
18inputs
26cards
58phone
Screen architecture
06 · Motion
Motion explains change.
Animation reveals sequence, confirms action, and preserves spatial understanding. It never competes with participant attention.Scale .98, visible state change
14px rise, ease-out
22px chapter rise
Width or stroke interpolation
Action → check → gratitude
Expand in place; preserve context
Reduced motion: remove ambient movement, collapse spatial transitions to short crossfades, and retain the visible completion state.
07 · Core components
One skeleton. Two complete themes.
Geometry, hierarchy, interaction, and safety copy remain identical across Ink and Dawn. Only semantic surfaces and elevation change.Saved securelyAvailable to your approved study team.
Saved securelyAvailable to your approved study team.
08 · Participant home
The whole study day, without the project management.
The home screen prioritizes the next meaningful action, then reveals progress, health context, connected sources, visits, privacy, and support in that order.9:41
TUESDAY · JUL 15Good morning,
Good morning,
Maya.
YOUR NEXT STUDY MOMENT4 MIN
How did treatment affect your day?
A few thoughtful questions help your study understand changes that numbers alone cannot show.
TODAY’S STUDY50%
2 of 4 moments complete
Morning medicationLogged at 8:04 AM
Daily treatment check-inReady now · 4 min
Two-minute walk testOpens at 3:00 PM
Evening symptom diaryAfter 8:00 PM
Next study moment
Questionnaire or task receives the strongest atmosphere and only primary CTA.
Study plan
Progress describes what is complete and what unlocks later—never a performance score.
Health context
Show recent values, source, timeframe, and a non-diagnostic boundary.
Connected sources
Expose pause, delay, and provenance instead of implying silent success.
Human support
Visits, coordinators, privacy, and consent remain reachable from home.
09 · Research interactions
Every answer deserves the right instrument.
Fourteen response patterns share one calm shell, explicit context, a clear selected state, and a resumable flow.9:41
ENERGY
Where are you
right now?
There is no right answer. Choose what feels closest.
01Single select02Multi select03Likert04NRS 0–1005VAS slider06Numeric07Text08Date & time09Searchable choice10Ranking11Image capture12Audio task13Body map14eDiary grid
Instrument integrity: licensed wording, answer order, scoring, units, recall period, and required logic are study-controlled. Kai styling never edits validated instrument content.
10 · Health data
Make signals understandable, not diagnostic.
Every metric names its source and timeframe. Visuals communicate change without implying clinical thresholds the study has not defined.Show Oura, Apple Health, Garmin, WHOOP, device raw, or blended Mahalo.
Use today, last night, seven days, or study window—not vague recency.
Distinguish missing, delayed, partial, and processing data.
Compare the participant to their own recent range unless protocol defines otherwise.
Use “research context,” never “healthy,” “normal,” or treatment advice by default.
11 · Connected health
One Mahalo system. Honest source differences.
Oura, Apple Health, Health Connect, Garmin device raw, Garmin Connect, and WHOOP share one interaction language while provenance stays explicit.OuraSleep · readiness · temperature
Synced 12 min agoApple HealthActivity · heart · mobility
Synced 4 min agoHealth ConnectAndroid health records
Synced 18 min agoGarmin DeviceRaw PPG · motion · BBI
Receiving nowGarmin ConnectActivity · sleep · workouts
PausedWHOOPStrain · recovery · sleep
Synced 9 min agoConnection sequence
- Explain the value
- List exact data categories
- Request platform permission
- Confirm first sync
- Show completeness and provenance
Recovery sequence
- Name the affected source
- Protect already collected data
- Offer retry or reconnect
- Allow study participation to continue
- Escalate to the study team
12 · Ask Kai
Helpful within a clearly marked boundary.
Kai helps participants understand Embrace, study tasks, connected data, and what to expect next. It never presents itself as a clinician.ASK KAI · STUDY GUIDEPRIVATE BY DESIGN
What would help right now?
Clear boundaryKai explains Embrace, study tasks, and participant-approved data. It does not diagnose, recommend treatment, assess eligibility, or handle urgent medical needs.
Kai may
Explain study tasks, summarize participant-visible data, troubleshoot sync, preview flows, locate privacy controls, and route to the study team.
Kai must not
Diagnose, recommend treatment, interpret adverse events, determine eligibility, change consent, expose hidden study logic, or claim urgent monitoring.
Route safely
Medical question → care provider. Urgent concern → emergency guidance configured by study. Protocol question → study coordinator.
13 · System states
Every state sets an expectation.
State design explains what happened, what remains safe, and the next available action.Loading
Preserve layout and name what is loading.
Offline
Allow questionnaires to continue and explain later sync.
Recoverable
Name the source and offer one retry action.
Blocking
Explain the reason and connect to study support.
Complete
Confirm storage, then thank the participant.
Scheduled
State exactly when a future task becomes available.
14 · Accessibility
Non-negotiable by construction.
Clinical participation must remain usable across vision, motor, cognitive, hearing, language, and motion needs.WCAG 2.2 AA contrast across every theme and approved tenant accent.
Touch targets at least 48×48px with clear spacing between actions.
Dynamic type through 200%; serif roles may fall back to DM Sans for legibility.
Screen readers announce progress, prompt, helper, required state, selection, source, and sync status.
Never rely on color alone for completion, warning, selected, delayed, or error states.
Reduced motion keeps meaning through instant layout and visible confirmation.
Participant copy targets plain language with clinical aliases where needed.
Questionnaires resume safely; no critical information is timed or hover-only.
15 · Privacy & consent
Control must be visible, specific, and reversible.
Participants should understand what is shared, with whom, for how long, and what changes if permission is withdrawn.Say what the study can see.
Name approved records, health categories, device sources, date range, and research team access.
Changing your mind is a supported flow.
Explain future collection, already shared records, study impact, and how to contact the coordinator.
Ask only for what the protocol needs.
Kai and UI defaults must never expand collection scope for convenience.
16 · Localization
Coherence across language, script, and direction.
The design anticipates expansion rather than shrinking translated content into English-sized boxes.Script-aware type
Map display roles to an appropriate serif; preserve DM Sans or Noto Sans for UI coverage.
Complete RTL mirroring
Reading order, progress, chevrons, charts, navigation, and asymmetric corners reverse together.
Expansion headroom
Externalize strings, units, dates, instrument versions, and region-specific emergency guidance.
17 · Token architecture
One source. Product-level meaning.
Primitive values feed semantic roles, component decisions, mode behavior, and controlled tenant overrides.{
"semantic": {
"surface": { "canvas": "{paper}", "inverse": "{ink}" },
"meaning": {
"contribution": "{mint}",
"attention": "{coral}",
"information": "{blue}",
"assistant": "{violet}"
}
},
"component": {
"studyTask": { "radius": 29, "action": "{ink}" },
"healthCard": { "sourceRequired": true },
"kaiPanel": { "boundaryCopyRequired": true }
}
}18 · Tenant governance
Expression without fragmentation.
Tenant theming may change brand expression. It may not weaken hierarchy, accessibility, research integrity, or safety behavior.How are you feeling today?
The skeleton, spacing, safety language, and interaction stay fixed.
May change
Approved accent, brand mark, illustration set, display face, and study-specific content.
Stays locked
Neutral actions, spacing, interaction anatomy, question integrity, accessibility, privacy, and Kai safety.
Release gate
Review Ink and Dawn, maximum text scale, reduced motion, offline states, every source status, and all fourteen answer types.