Screenshot of Koba Clinic

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.

Health Gp Clinic strong

Design tokens

theme
bg-grey
grey
white
black
white-42
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