Afuri

afuri.com

a Tokyo yuzu-shio ramen house that presents itself like a gallery, near-pure white space, a single yellow Mt-Afuri mark, an all-caps letter-spaced AFURI wordmark in a Yu Gothic system stack, and full-bleed food photography that fades up on a 0.5s scrollFade so a bowl of ramen reads as a still life.

Hospitality Casual Restaurant strong

Design tokens

ink
white
grey-light
grey-mid
grey-dark
accent-yellow
display
Yu Gothic system stack (游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif)
serif
"EB Garamond", serif (Google Fonts) for the English-translation passages
body
Yu Gothic system stack for Japanese; Roboto (300/500) as a Latin fallback
extra
Times appears as a bare fallback in 3 spots

Do / Don't

Reference it for

  • A restaurant or hospitality brand that wants to read as a gallery, not a menu PDF: white canvas, full-bleed food photography, and one outlined pill CTA per section.
  • A near-monochrome interface (black ink on white, greys #B8B8B8 / #555555 / #8D8D8D) where the food photography is the only colour and a single yellow mark is the entire brand accent.
  • An all-caps, wide-tracked wordmark treatment (0.28px to 0.65px letter-spacing) that turns a plain system sans into a considered logotype.
  • Bilingual editorial bands (Japanese paragraph plus an English translation column) as the section pattern for a Japan-rooted brand speaking to two audiences.
  • A calm 0.5s scrollFade reveal discipline (opacity up as elements enter) built without any animation library, proof that one CSS transition and a little jQuery carry a whole site's motion.

Do not copy

  • The Mt-Afuri yellow mountain mark and the AFURI wordmark are the brand's identity; rebuild the treatment (yellow tile, wide-tracked caps), never the mark itself.
  • The Yu Gothic / Hiragino Japanese system stack is right for a Japanese site; for a Latin-script client map to a comparable humanist sans and do not ship the JP font stack by reflex.
  • The jQuery + backstretch + bxslider plumbing is dated; borrow the look (full-bleed photo, 0.5s fade) and rebuild it on the modern stack, do not port the libraries.
  • The bilingual two-column copy only earns its place for a genuinely bilingual brand; a single-language client should not fake it.

Signature moves

Confidence through emptiness: an all-white hero with only a wide-tracked all-cap

Confidence through emptiness: an all-white hero with only a wide-tracked all-caps wordmark, then full-bleed food photography that fades its opacity up over 0.5s ease (jQuery scrollFade) as each band scrolls into view, one outlined 26px pill