Koba Clinic
koba-clinic.jp/a rural Japanese ENT clinic that behaves like a confident product launch, a soft grey #BCC2C5 stage, one electric #00B9EF cyan doing every accent, Morisawa display type set huge with 1.6px tracking, a hero where a full-bleed building photo gets swallowed by a giant cyan rounded panel sliding up, and a whole-page Lenis scroll where text reveals on a 0.8s opacity-and-transform lift.
Design tokens
- display
- MFW-PUDShinGoCOnizPr6N-DeB (Morisawa condensed, demi-bold) for message headings
- body
- MFW-PAotoGothicStdN (Morisawa Aoto Gothic; Medium / Bold / DeBold / Regular) for body, labels, nav
- numeral
- din-2014 (Typekit) for the phone number and Latin numerals
- mono
- none
Do / Don't
Reference it for
- A local healthcare or care business that wants warmth and confidence, not a sterile medical template: grey ground, one saturated cyan, white type, a friendly mascot.
- Single-accent discipline done at full saturation: #00B9EF cyan as the only chroma against #BCC2C5 grey and white, so every cyan element reads as a deliberate signal (book, call, the three service categories).
- An oversized Japanese display face (Morisawa condensed) at 32px with 51.2px line-height and 1.6px tracking, set against a quiet Gothic body, as a craft-forward type pairing.
- The hero hand-off: a full-bleed building photo overtaken by a large rounded cyan panel, then a whole-page Lenis scroll where copy lifts in on a 0.8s opacity-plus-transform reveal.
- Persistent service furniture that stays useful without shouting: a fixed right rail (fever clinic / hours / access), a fixed bottom call-and-hours bar, and a circular reservation button anchored top-right.
Do not copy
- The "PAU" blob mascot and the こばクリニック wordmark are the clinic's identity; build an equivalent friendly mark, do not reuse theirs.
- The Morisawa fonts (MFW-PAotoGothicStdN, MFW-PUDShinGoCOnizPr6N-DeB) and Typekit din-2014 are licensed web fonts served from morisawafonts.net / use.typekit.net; map to comparable faces, do not hotlink theirs.
- The Japanese-first information architecture (発熱外来 fever clinic, デジスマ診療 booking integration, the Google Maps embed keyed to their location) is specific to a Japanese clinic; borrow the layout, localise the content.
- The clinic photography (the building, the interior, the children being examined) is theirs; the warm tactile photography is load-bearing here, so budget a real shoot rather than copying the images.
Signature moves
The hero hand-off plus reveal: a full-bleed concrete-building photo is overtaken
The hero hand-off plus reveal: a full-bleed concrete-building photo is overtaken by a large 42px-radius cyan panel rising on scroll, then the whole page runs under Lenis smooth scroll with copy lifting in on a 0.8s opacity-and-transform rev
Related references
Axel Clinic
strongHealth
a Kyiv multidisciplinary clinic that opens on a full-viewport split-screen gateway, a pale-grey "Multispecialty Clinic" half against a charcoal "Aesthetic Medicine" half, with 44px ultra-light uppercase Helvetica Neue headings sitting at opacity 0.6 over warm wood-corridor photography and a glass "Select your area" pill straddling the seam.
Nijinowa Clinic
strongHealth
a Yokohama home-visit clinic whose homepage runs as a fixed 270px left rail (logo, vertical bilingual nav, phone) against full-bleed warm photography on the right, a rainbow-fan motif fanning over the hero, ink-grey #222 type set in an old-style Japanese gothic with letter-spacing pushed wide (h1 50px on 90px leading, 10px tracking), and a single calm 0.15s ease-out as the whole site's transition.
One Medical
flagshipHealth
a primary-care membership clinic whose site makes healthcare feel calm and human, a warm teal-and-peach palette, a GT Super serif display over clean Ginto sans, audience-segmented care paths, and a "book" action that treats getting care as the product.
Abby Wilson Therapy
strongOther
A boutique therapist for "anxious, high-achieving women" who reassures by being polished and specific - a warm sand-and-charcoal editorial system, a Calluna serif voice, named specialties and a clearly walked process that says "I understand exactly who you are and how this works".