Pain has an ebb and flow. Learn yours.
Ebb helps people living with chronic pain log a flare in ten seconds, see what drives it, learn what actually helps, and walk into every appointment with a report their clinician can use.
“Denise is on the sofa at 10pm, one lamp on, phone at 30% brightness, logging with her thumb because her wrist hurts too. Nine days later Dr. Mehta reads the same record on a clinic monitor, with 90 seconds before the next patient.” The whole system is designed for both of those moments.
How we chose the colour: cold compress
Not by avoiding what healthcare uses, but by asking why. Three findings from pain-perception research set the rules; the palette follows from them.
In controlled studies, pain shown after red was rated most intense. Nothing warm or red goes near the scale; red is kept for safety alerts only.
White produced the lowest pain ratings and is the colour people link with relief. The ground is true white.
Blue is associated with calm and serenity. A cool glacier blue carries the brand, clear of Curable’s teal and the category’s navy.
Loud, generic and already owned by the category. Our design database suggested exactly this, with a children’s font.
The usual “health that isn’t blue” escape. It reads as femtech to clinic buyers, and its dark end sits next to red on the scale.
Judges pain as good or bad, primes higher ratings at the red end, and fails colour-blind users.
True white, a glacier blue for calm, night ink for text and the evening check-in, and a neutral cool scale where lightness does the work.
Colour
Restrained in the product (glacier blue ≤10% of any screen, true white everywhere else), committed on the website, drenched only in the evening check-in. Every ratio below is measured live from the token file, not typed in.
Ground and ink
Brand
Pain intensity: a neutral cool ramp, never red, never a traffic light
Text is ink on 0–6 and white on 7–10. Both pass 4.5:1 at every step.
Status (states only, always with an icon and a label)
Evening mode (scoped to the check-in, never a global dark theme)
Status vocabulary
The exact pill for every state in the product. One word per state, used everywhere.
Typography
Literata for display, built for long reading on screens. Atkinson Hyperlegible Next for everything you tap or scan, designed by the Braille Institute for low-vision readers. Body text is 17px on patient surfaces and 15px in the clinic.
Website scale (fluid)
--fs-displayPain has an ebb and flow.
--fs-h1Ten seconds on a bad day
--fs-h2Your clinician sees it too
--fs-h3Short sleep, sharper pain the next day
--fs-leadA flare plan you write with your clinic, one step at a time, so the worst nights have a first move.
--fs-body · 17pxPain is your nervous system’s alarm. With chronic pain, the alarm can stay sensitive long after tissues have healed, the way a smoke detector goes off for toast. That doesn’t make the pain imaginary. It means there are more ways to turn it down than rest alone.
Product scale (fixed)
--t-32 · displayHow’s the pain right now?
--t-22 · displayWhat Ebb noticed this week
--t-18 · UI boldDenise Okafor · PEG 6.3
--t-15 · UILast log 10:04 PM · lower back, burning · synced from iPhone
--t-13 · metaReviewed by Dr. Laura Chen, PhD · Mar 4, 2026
Why Atkinson: medication blurs reading
Il1 O0 · Take 1 tablet (10 mg)
Il1 O0 · Take 1 tablet (10 mg)
Tabular figures where numbers align
| Week | Avg pain | PEG | Logs |
|---|---|---|---|
| Aug 17 | 4.1 | 4.7 | 7 |
| Aug 24 | 5.8 | 6.0 | 6 |
| Aug 31 | 6.4 | 6.8 | 11 |
Space, form and motion
Form archetype: Sheet. Surfaces are full-bleed tone bands, not cards. The rule is round what you touch, square what you read: fewer boxes to parse on a brain-fog day, and every touchable thing is obviously touchable.
Spacing (4px base)
Shape: three radii, never a fourth
A square tone band. No border, no shadow, no card.
Density: patient vs clinic
Elevation: flat, with one shadow for floating layers
--elev-popMotion
pressButtons and chips scale to 0.97 in 160ms, so the interface visibly heard the tap.
--ease-outcubic-bezier(.23, 1, .32, 1) for anything entering. Popovers 180ms, from their trigger.
--ease-drawercubic-bezier(.32, .72, 0, 1) for sheets and drawers, 280ms.
eveningA 400ms crossfade when the log dims itself at night. The only other orchestrated motion is the breathing pacer.
reduced motionMovement becomes a crossfade or an instant change; the pacer becomes a text count.
Controls
Every control in every state. Focus rings are always visible; every touch target is at least 44px.
Buttons
Fields
Choices
Surfaces and data
Bands, rows and tables do the containing. Layers float with the one shadow.
Rows
Table with sort, selection and a bulk bar
| Condition | PEG | Data days | Status |
|---|
Tabs, accordion, banners
What counts as a flare?
Who can see my logs?
Layers
Built for pain
The components that exist because of this product. Each one is the real renderer the phone, web, desktop and clinic screens call.
Nothing selected
Tide line and calendar: 90 days of pain
Insight and outlook: the AI shows its working
Clinic components
Breathing pacer and evening mode
Device frames
Your last 30 days
Feedback and states
The unhappy paths are designed, not left to chance. Each appears on real screens in the product.
Iconography
One family, one 1.75 stroke on a 24px grid, inlined as SVG. Never emoji, never a sparkle for “AI”.
Bans
Written down so they are enforced, not remembered.