← All UI styles
Healthcare Calm
Teal and generous spacing, sized so the label is legible under stress.
TintedsystemHealth productsCare and wellbeingPatient-facing tools
Construction · Tinted
Surfaces are a wash of the accent over the page — no border, no shadow, only a shift in tone saying where one group ends.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Healthcare Calm style. Calm teal on near-white, with generous spacing and body text a size larger than usual. The assumption is that the reader is tired, worried, or both. Build every
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- calm teal
- generous spacing
- larger body text
- low visual noise
What this style refuses
- alarming reds outside real errors
- dense rows
- small type
- decorative gradients
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
RoleLightDark
Background
#f4f9f9#0b1516Surface
#ffffff#12201fBorder
#cfe0e0#25393aText
#122425#e8f2f1Muted text
#4d6162#93a8a8Accent
#0d6c70#5cc0c4On accent
#ffffff#04211fShape and type
Radius10 / 16 / 22 px
Border1px solid
Shadownone
Displaysystem-ui
Bodysystem-ui
Monoui-monospace
Type scale12 · 13 · 16 · 18 · 23 · 31 px
Weights400 / 600 / 700
Line height1.55
Tracking0em
Spacing4px grid · roomy
Surfaceflat
Accentfilled
Separatornone
Labelssentence case
Blurnone
Measured contrast — body 15.15:1 light, 16.24:1 dark; secondary text 6.17:1 and 7.42:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Healthcare Calm
*
* Teal and generous spacing, sized so the label is legible under stress.
*
* One complete product screen, rendered from the token object below —