Clinical calm. A medical tool that feels like a weather app — the pitch is relief from paperwork, so the page is mostly air, and nothing on it is in a hurry.
Colors
The hero is a vertical sky gradient, steel blue #7B9DC4 at the top easing to #9BC0DA and then to a white horizon; white type sits directly on it. Below the fold everything goes near-white — #FAFAFA canvas, #F5F5F5 rounded cards — with #151515 headings and #93939F body copy. One sky blue (#2597D0 range) tints the small pill-label icons. Every CTA is pure near-black #070709. No second accent, no saturated brand colour.
Type
Open Runde (a rounded geometric sans) for absolutely everything, weights 400 and 600 only. Hero at 80px/600 with hard negative tracking (-0.04em) and sub-1.0 line-height so the two lines stack tight; section heads 44px; body 18px at -0.01em. Headings interrupt themselves — a small sticker-sized glyph is set inline where a word would be ('Save 📄 hours a week'). No serif, no all-caps, no second family.
Layout
The hero is a rounded card inset from the page edges (28px top corners, 48px bottom) with the sky living inside it: centred nav strip, centred headline, three tight sub-lines, one black pill CTA, then the paper stack bleeding off the bottom edge with small 'Before' and 'After' tabs pinned to the floating documents. Below it, 2-up soft-grey feature cards — pill label top-left, 44px claim, a product vignette floating in the middle of the card, a white 'About X ›' pill bottom-left — then a pinned tabbed section, then a 3-up row of small icon cards.
Motion
Quiet and scroll-driven: sections ease up into place, and the how-it-works section pins while its two tabs swap panels in the same frame rather than scrolling past. Nothing loops, nothing parallaxes, no cursor tricks.
Texture
Rounded everything — 100px pills, 32–48px card radii, 50% avatars. Soft realistic paper shadows in the hero; flat matte greys everywhere else. Product screenshots are feathered into their cards instead of being framed in browser chrome.
Imagery
Generate: (1) the hero sky plate — a smooth steel-blue-to-pale gradient with a faint scatter of tiny star specks, no clouds, no horizon line; (2) a stack of white paper letters rising out of the bottom edge of that sky, slightly fanned, soft realistic shadows, the top sheet showing a handwritten scrawl and the one behind it clean typed text (the before/after gag); (3) product-UI vignettes — an upload panel, a text field, a transcription waveform row — composed in code inside rounded white cards, each faded out at its edges rather than cropped; (4) a few small duotone sky-blue glyph icons for the pill labels. Tool: kie-ai Flux or Seedream for the sky plate and the paper stack, Recraft remove-bg to cut the stack out; build the UI vignettes as real markup. No stock photography of doctors, ever.
Don't
No dark navy 'medical dashboard' palette, no stock clinician photography, no stethoscope or heartbeat iconography, no gradient-filled buttons, no red or green status colour, no hard corners, and no second typeface — the roundness of the one font is doing the reassurance.
Make it your own
Turn this reference into a useful brief for your project. Copy it into the AI tool you already use.
Add constraintsPreview & edit promptAssembled in your browser. No API key or AI request needed. Changing the fields refreshes the preview.
