Steady · Comprehensive Style Guide
One book.
Everything Steady
is made of.
A single source of truth for the surfaces, motion, voice, illustration, and principles that make Steady feel like Steady. Read it before you build. Keep it open while you ship.
01 · The mark
Five irregular rays. One low horizon.
The Loose Five. Drawn as if by someone who has watched the sun rise from a hospital window many times. Not a corporate sunburst, not a wellness mandala.
The six color variants
The Figma Logo set is two styles (Mark, Lockup) by six colors by three sizes, 36 variants total. Each color is built for a background: Honey and Heritage on light, Mono Dark on light, Mono Light on dark, White Rays on color or photography.
Clear space
Minimum padding of one ray-length on every side. The mark needs room. That is the point of it.
Minimum size
20px on screen, 8mm in print. Below that, the rays lose their irregularity and it stops being our mark.
Animation
Horizon draws first on the Settle curve, then the five rays appear in sequence one Quick step (120ms) apart. Reveal on first launch and the loading screen only, never gratuitously.
02 · Color
Espresso anchors. Honey calls. Lanes carry meaning.
Steady's palette is intentionally narrow at the foundation and intentionally meaningful in the lanes. Color is never decorative. It is how the patient knows what kind of moment they're in.
Ink
The text ramp. Espresso anchors everything; the softer steps carry secondary copy, metadata, and faint hints.
Paper
Surfaces, lightest to deepest, plus the rule that divides them. Paper, not parchment.
Accent
Honey is the brand call. Clay carries refusal and the wordmark. Butter is the soft glow.
Medical
The clinical ramp. Five steps from deep to faint for labs, terms, and things-to-know.
Support & Source
Sage is the calm support surface. Vault carries the document-source accent.
Lanes carry meaning
Four lanes. Each one means something. If you reach for medical-blue to decorate a non-clinical surface, you have just lied to the user about what kind of moment they're in. The whole system depends on this discipline.
The lanes are a contract.
If you find yourself reaching for a lane color because the surface "needs more color," stop. The lanes tell the patient whether what they're looking at is clinical, confirmed, personal, or refused. Every misuse weakens the contract.
Tokens
Colors live in Figma as the Steady / Color variable collection, the design source of truth, and mirror to CSS variables and React Native theme tokens in code (src/theme/colors.ts). All 27 tokens, grouped Ink, Paper, Accent, Medical, Lane, Support, Source.
| Token | Hex | Role |
|---|---|---|
| --ink | #1F1814 | Primary ink, default text, mark stroke on light |
| --ink-soft | #4A3F36 | Secondary text, supporting copy |
| --ink-mute | #8B7668 | Muted labels, metadata, captions |
| --ink-faint | #B0998A | Faint hints, placeholders, disabled |
| --paper | #FBF7EE | Page background |
| --paper-faint | #FFFAF0 | Lightest raised surface |
| --paper-warm | #FDF1DC | Warm wash, hero and honey-adjacent fills |
| --paper-deep | #ECE4D2 | Card surfaces, soft panels |
| --rule | #D9CFB8 | Dividers, hairlines, borders |
| --honey | #ECA02A | Brand call, eyebrows, mark rays |
| --honey-deep | #B8730E | Honey emphasis on light surfaces |
| --clay | #B86850 | Refusal lane, Steady wordmark |
| --clay-light | #F4D5CE | Refusal card backgrounds |
| --butter | #FBE4B7 | Honey washes, glow, illustration hints |
| --med-deep | #2C5375 | Clinical text on light |
| --med | #4A7FA8 | Clinical lane |
| --med-mid | #87B0D0 | Mid clinical fills, chips |
| --med-light | #DCEAF4 | Clinical card backgrounds |
| --med-faint | #EFF5FB | Lightest clinical wash |
| --money | #5B9270 | Confirmation lane, green |
| --money-light | #DCEDDF | Confirmation backgrounds |
| --life | #C97F12 | Life lane, personal and family, amber |
| --life-light | #FBEDCE | Life-lane backgrounds |
| --sage | #DCE9DF | Calm support surfaces |
| --sage-ink | #2D4A35 | Text and icons on sage |
| --vault | #7E6F86 | Vault, document-source accent |
| --vault-light | #ECE7EF | Vault backgrounds |
03 · Typography
Source Serif Pro for headlines and body. Inter for utility.
Two type families plus a mono. Source Serif Pro is the warm, human voice for everything the patient reads. Inter handles utility text and metadata. JetBrains Mono earns its place only for eyebrows and code-like meta. Source Serif at large sizes carries the weight of a real document. A Brief, not a notification.
Steady is for the toughest week of someone's year.
The four faces
A diagnosis arrived.
Don't agree to anything irreversible this week. The first appointment is for hearing, not deciding. Most regretted decisions happen in week one because patients feel rushed; they almost never need to be.
Three things to know this weekWhat's most useful to share · After-visit summary, lab or test results, medication list, notes the doctor handed you.
DOC ID · STDY-RES-2026-014
refs · STDY-FOUND-2026-001 (prep doc)
What's the next step? How long? Who do I call?
Type scale
Ten named tokens, mirroring Figma's Typography page. Body sits at 15px; headlines climb from Title 3 to Display.
04 · Spacing & radius
Eight points, all the way down.
Spacing tokens are multiples of 4, but the rhythm of the system is 8. Anything off an 8pt step needs a reason. Radii run a discrete scale: soft on small surfaces, pronounced on cards, full pill on chips and capsules. Whitespace is a deliverable.
Spacing scale
Corner radii
Page rules
Section vertical rhythm is 96px on desktop (--space-4xl), 64px on mobile. Prose and headings run the full width of the content column; component cards keep their own max widths. Every Brief, Vault, and Health Plan card breathes with at least 24px (--space-l) of internal padding.
05 · Components
The pieces, in their resting state.
Every Steady component is a card or pill at heart. They share radii, share a few padding values, and stay calm. If a component is doing too much, break it in two.
Component inventory
Thirty components in the Figma library, split Atoms and Composites. The specimens below cover the most-used in detail; the full set lives in Figma under Components · Atoms and Components · Composites.
- Button · five intents, the primary path forward
- Lane Stripe · colored edge marking a card's lane
- Source Chip · tags content by source (Vault, doctor, you)
- Member Pill · a care-team person, avatar plus name
- Nav / Back · the back affordance, never a trap
- Section Header · eyebrow plus title for a block
- Progress Counter · the "5 of 5" step indicator
- Add Question Button · capture a question for next visit
- Suggested Q Chip · a tappable proposed question
- First Q Chip · the seeded starter question
- Choice Row · single-select option in onboarding
- Onboarding Topbar · step context during setup
- Text Input Field · single-line, serif, honey focus
- Textarea · multi-line, the patient's own words
- Brief Footer Note · the quiet "drawn from your records" line
- Header · screen title plus context
- Tab Bar · Brief, Health Plan, Vault, Ask
- Brief Card · the atomic Brief unit
- Refusal Card · the refusal surface, clay lane
- File Row · a document in the Vault
- Acknowledgment Card · the "we read you" moment
- Things-to-know Card · the clinical three-up
- Upload Prompt Card · ask for records, gently
- Steady Response · an AI answer block
- Question Bubble · the patient's asked question
- Welcome Feature Row · onboarding value props
- Care Team Concentric Rings · who's around the patient
- Vault Upload Action Row · add, scan, import
- Share Toolbar · share a Brief or plan
- Photo Banner · full-bleed image header
Buttons
Five intents. Primary for the surface's chosen path forward. Honey for "save / capture" actions tied to the brand call. Secondary for an alternate path (Skip, Maybe later). Ghost for cancel and dismiss. Danger for destructive moves, always paired with a confirm.
- Padding
12px 22px, radius--radius-md - Font: Inter 600, 14px
- Hover:
translateY(-1px)+ soft shadow, 150ms standard ease - One primary per surface. Never two.
Lane chips
The chip carries the lane color. It is the smallest legal use of a lane and doubles as a tag in the Vault, an inline marker on a Brief item, or a status badge on a Health Plan question.
- Background uses the
-softtoken, ink uses the-deeptoken - Padding
5px 11px, radius full pill - Dot is 7px and uses the saturated lane color
- Never more than three chips on a single card
Three things to know · this week
Don't agree to anything irreversible.
The first appointment is for hearing, not deciding. Most regretted decisions happen in week one because patients feel rushed; they almost never need to be.
Brief card
The atomic unit of the Brief surface. Eyebrow in honey-deep tells the patient what kind of moment this is. Title is one declarative sentence. Body is the explanation, never longer than 2–3 sentences. Footer chips are the only call to action.
- Padding
22px 24px, radius--radius-lg - Border
1px solid --rulewith a0 1px 2px rgba(31,24,20,0.04)shadow - Max-width 360px on phone, 460px on tablet
- One title, one body. Never an exclamation point.
Inputs
Inputs use the serif. The patient is writing their own thought, not interacting with a form. Focus state uses the honey ring, never blue.
- Padding
12px 14px, radius--radius-sm - Font: Source Serif Pro · 400 · 15px
- Placeholder color
--ink-mute - Focus: 2px honey outline, 1px offset
This week's Brief
A diagnosis arrived.
Brief surface
The Brief is the home screen. Four lane cards, in order: clinical, saved, captured-for-later, refused. Same vertical rhythm every week. The patient learns the shape of their week before they learn the content.
- Container: phone screen at 9:19.5 ratio
- Card padding
10px 12px, radius--radius-md - Eyebrow uses the lane's
-deepink color - Cards never exceed two lines of body copy on mobile
Patterns & Templates
Patterns are recurring component arrangements; templates are reusable page shells. Both live in Figma under Patterns and Templates, and assemble from the atoms and composites above.
- Onboarding Flow · the setup sequence, step by step
- Brief Layouts · how lane cards stack on the Brief
- AI Output Patterns · how Steady renders answers
- Refusal Pattern · the clay refusal surface (detailed in §06)
- Phone Screen Template · the 9:19.5 device shell
- Modal Template · the sheet and modal shell
06 · The refusal pattern
Refusal is a designed surface. Not an error.
Steady refuses certain questions. Prognosis numbers, "how long do I have," anything irreversible-by-nature, and any hallucination the classifier flags. The refusal is a real piece of the product, with a real surface and a real voice. The most important pattern in the system.
What I won't try to answer
How long do I have?
I'm not the right place for this. A prognosis depends on details I cannot see and on conversation that should happen with your oncologist, with someone you trust in the room.
Refusal card
Three parts, in order. What I won't try to answer (the labeled refusal). The reason (one sentence, no apology, no euphemism). The redirect (a concrete alternative that lives inside the product). The refusal is never a dead end.
- Background
--clay-soft, ink--clay-deep, border1px solid rgba(184,104,80,0.3) - Eyebrow uses the explicit phrase "What I won't try to answer," every time
- Title is the question, restated. The patient sees their own words back.
- Reason is one sentence, in serif body
- Footer "Try instead" line is in Inter, with the suggested redirect in quotes
When the system refuses
Steady refuses requests that match four categories. Prognosis estimates ("how long," "what are my odds"), unverifiable medical specifics ("which oncologist is best"), anything irreversible-by-nature ("should I sign this consent"), and any output the classifier flags as a hallucination on regulated content. Every refusal points back to a clinician or to a designed in-product surface.
When the system explicitly does not refuse
Steady does answer a long list of questions other systems hide behind. What is a tumor marker. What does "stage" mean. What should I bring to the appointment. How do insurance pre-authorizations work. What is in my after-visit summary. Refusal is rationed. Most of the time, Steady answers.
07 · Motion
Four curves. Six durations. Bound to frame.
Two scales, easing and duration, both tokenized and both bound to Yumi's frame library in code. Motion at the system level is restraint: the only animations that ship are the ones earning their cost in LCP and INP. Pick a token. Never an inline curve.
The four easing curves
| Name | Curve | When | Demo |
|---|---|---|---|
| Standardframe.ease.standard | cubic-bezier(0.4, 0, 0.2, 1) | The default for state changes that move both ways: buttons, cards, chip taps. Symmetric. | |
| Decelerateframe.ease.out | cubic-bezier(0, 0, 0.2, 1) | Entering elements that arrive and settle in. Modal open, drawer in, tooltip appearance. | |
| Accelerateframe.ease.in | cubic-bezier(0.4, 0, 1, 1) | Exiting elements that gather speed and leave. Dismiss, close, sheet down. | |
| Settleframe.ease.settle | cubic-bezier(0.22, 1, 0.36, 1) | A long, soft landing. Sheet open, modal, the brand mark's reveal and illustration breath. Use when something should feel intentional rather than inevitable. |
Duration tokens
Six durations bind to the frame library (frame.duration.standard). Any new motion uses a token; if a motion needs one that doesn't exist, propose it to Yumi before shipping.
Reduced motion
Every animated component checks prefers-reduced-motion itself and renders the static fallback. Don't pass the hook through props. Mei-Lin's commitment: Steady is fully usable with all motion disabled.
The do-not-animate list.
- Confetti or sparkles on any success state. The patient is dealing with a serious diagnosis. Confetti when they upload a pathology report is wrong, full stop.
- Loading spinners that suggest urgency (fast spin, color shift, pulse acceleration). Steady loading states use the breath spinner. We don't add tension to a wait.
- Toasts that slide and bounce. Use a quiet fade. Toast positions are deterministic; movement adds nothing.
- Page-level parallax in the marketing site or any in-app surface. Causes motion sickness for a meaningful slice of our audience. Mei-Lin called this one.
- The brand mark on a loop in any chrome context (header, footer, nav). Reveal is precious. Looping turns it into noise.
- Auto-rotating carousels. Never.
08 · Voice & tone
A calm, well-trained nurse. Not a chatbot.
Every line of copy is read by someone who is exhausted. Voice in Steady is short, declarative, and warm without being soft. Specific, not soothing.
Do / don't pairs
Do · empty Health Plan
No questions yet. Add one for next visit.
Clear, calm, ends with a small invitation. The patient knows what they're being asked.
Don't
You haven't added anything yet! 🎯 Let's get started!
Two exclamations, an emoji, and gamified language. Wrong moment, wrong product.
Do · saved confirmation
Saved to your Brief.
Three words. The action is confirmed. No celebration required.
Don't
Awesome! That's been saved successfully ✨
Affect that hasn't been earned. The patient saved a question, not a victory.
Do · refusal
I'm not the right place for this.
Direct, owns the limit, redirects to a real path. The patient is told clearly.
Don't
As an AI assistant, I can't help with that. Sorry!
Boilerplate, apologetic, hides behind a category. Tells the patient nothing.
Do · onboarding
Welcome to Steady.
Period, not exclamation. The italic invitation line ("for the toughest week of someone's year") follows.
Don't
Hi there! Let's set you up 👋
Casual register, friendly waving emoji, "let's." Wrong product, wrong patient.
Voice rules
No exclamations
Periods. The patient does not need our excitement. This is the smallest principle in the document and the one we expect to defend the most.
No emoji in product
Emoji belong in onboarding emails, not in surfaces the patient is reading at 2 a.m. The illustration system carries warmth.
Specific over soothing
"Three things to know this week" instead of "Some thoughts to help you." Naming the form is part of the calm.
Cite the document
If we say "your after-visit summary," we link to the actual document, or we explain what one is. Always.
Permission to leave
Every captured commitment can be unsaved. Every nudge can be turned off. Every Brief can be skipped without explanation.
Imperative, not pleading
"Don't agree to anything irreversible this week," not "We suggest you might want to consider waiting." The patient deserves directness.
09 · Illustration
Modern. Empathetic. Specific.
A library by Vera Sable. Hand-drawn quality, anatomical precision, restrained palette. No abstract metaphors. No "journey" imagery. No rolling hills.
The principle.
Every illustration in Steady is of a real, specific object. Not a concept. A hand holding a piece of paper, not "support." A teacup at rest, not "calm." Specificity is what makes the work feel made for this person, in this moment.
Modern: clean lines, considered negative space, warm not flat. Empathetic: human-scale objects, moments of stillness, light implied.
A selection of the spot library
The full Vera Sable library has sixteen spots. The eight above are the most-used. Briefs only. Never sequenced into a slideshow, never paired with motion graphics, never used decoratively.
10 · Accessibility commitments
Steady passes for the people most easily failed.
Mei-Lin Kowalski's commitments. Cognitive accessibility, motor accessibility, low-vision and screen reader, reduced motion, plain language. Every one a contract, not a checkbox.
Designed for chemo-brain.
Every primary surface has at most one decision. The Brief shows three things, never seven. Onboarding is built for someone with a fraction of a normal attention budget.
REF · mei-lin · CAB · accessibility commitmentsReduced motion, not "less motion."
With prefers-reduced-motion on, every illustration becomes static, the brand-mark reveal becomes a fade, and route transitions are opacity-only. The product is fully usable.
Color is not the message.
Lane chips always carry an icon or label, never color alone. Type contrast meets WCAG AA at every body size, AAA on the Brief surface. Honey is not used for body text.
44px minimum, 48px preferred.
All interactive elements meet 44px touch targets, with 48px on primary CTAs. Spacing between targets is at least 8px. The patient may be holding the phone in one hand at 3 a.m.
Plain language audited every release.
The voice script runs against a 6th-grade reading level on every Brief and Refusal card. Jargon is allowed only when accompanied by a one-line explanation in serif body.
The caregiver is a first-class user.
Every patient-facing surface has a caregiver-mode equivalent. Two-hands illustration, "bring someone with you" prompts, shared Health Plan with audit trail. Mei-Lin's red line.
11 · The ten principles
Steady's principles. The implicit rules, made explicit.
Ten principles, written down for the first time. The implicit rules behind every artifact we have shipped, made explicit so the next ten engineers, designers, and clinicians who join us know what they are agreeing to.
Calmness is a feature, not a tone.
Calm is engineered through whitespace, slow motion, restrained color, periods instead of exclamations, and the explicit refusal to gamify anything. It is not a style. It is a stack of decisions, applied consistently, that produces a feeling.
The patient is exhausted before they meet us.
Design the surface for someone who hasn't slept well in three nights, is reading on a phone in a hospital cafeteria, and has just had a difficult conversation. The default user is not your alert weekday self. Build for the worst-case version of attention.
Refusal is a designed surface.
What the system will not try to answer is as visible, as styled, and as cared-for as what it will. The refusal is not an error state. It is a real piece of the product, with its own card, its own typography, its own redirect to a real path.
Cite the document. Always.
If we say "your after-visit summary," we link to the actual document, or we explain what one is. We never reference an artifact the patient cannot find. Every claim points to a source the patient can verify, alone, without asking us.
Whitespace is a deliverable.
The Sunday Brief shows three things from last week, three things ahead, and one small permission. That's it. The product manager who suggests adding "trending health topics" or "tips for caregivers" gets walked back to this principle and asked which of those three columns the patient asked for.
No exclamation points. No confetti.
Affect in clinical-adjacent products has to be earned and rationed. The patient who just uploaded their pathology report does not want a 🎉. The success state for "you sent the insurance appeal" is the email landing in the recipient's inbox, not a confetti burst.
The default is no notification.
Every push, every email, every in-app nudge starts off. The patient enables what they want. We are not in the engagement business, we are in the "remember this when it matters" business. The two are not the same.
Privacy is design, not a checkbox.
What the patient stores in Steady is theirs. Sharing is opt-in, time-bound, audit-logged, and visible on the surface itself. There is no "the cloud" in Steady's voice. There is only the patient's device, the patient's account, and the named people they share with.
Permission to leave is given freely.
Every captured commitment can be unsaved. Every Health Plan question can be removed. Every Brief can be skipped without explanation. Every account can be deleted with a single in-app action. We do not bind the patient to the product. We earn their return week by week.
Beautiful is what works.
Pretty is decoration, beautiful is function. The Brief is beautiful because a tired patient can read it in 90 seconds and know what they need to do. The refusal card is beautiful because it tells the truth without apologizing. Aesthetic and utility are the same problem.