Screenshot of Book And Hair

Book And Hair

book-and-hair.com/

a Japanese "books-meets-hair-salon" venture site that runs as one long illustrated scroll, a flat textured editorial illustration carrying the full-bleed hero on a #42B775 green, manifesto prose centred on #F2EFDE cream paper, Yeseva One display caps over a TsukuA Old Min mincho body, and a slow 0.8s cubic-bezier(0.18,0.06,0.23,1) reveal with floating cut-out motifs that bob and drift between sections.

Beauty Hair Salon strong

Design tokens

ink
paper
green
olive
tan
orange
white
display
Yeseva One (Google Fonts, high-contrast Didone display serif) for Latin act titles (BOOKS, SHOP, RECRUIT, LOCAL)
body
TsukuAOldMinPr6-R / -B (fontplus.jp mincho) for all Japanese; falls back through Yu Gothic / Hiragino / Meiryo to sans-serif
mono
none (Arial 13.3333px only on the menu-toggle glyph)

Do / Don't

Reference it for

  • A concept-led brand or local venture sold as one scrolling story: full-bleed illustrated hero, a centred manifesto act, then named photo-plus-text chapters.
  • A warm narrow palette, near-black on #F2EFDE cream paper with a #42B775 green field and a single #FC7C1A orange lifted from the artwork, no greys-on-greys.
  • A display serif plus a body serif voicing (Yeseva One caps for Latin act titles over a TsukuA Old Min mincho body), proof that two serifs at weight 400 can carry a whole site.
  • Slow 0.8s reveals on a custom cubic-bezier(0.18,0.06,0.23,1) curve plus looping float/pendulum/rotate motifs, all CSS-native with zero animation library.
  • Floating flat-illustration cut-outs that overlap section seams to bind photographic and illustrated content into one surface.

Do not copy

  • The TsukuA Old Min Pr6 mincho is licensed and served through fontplus.jp's tokenised subset endpoint; do not lift it, map to a licensed mincho or a workhorse serif.
  • The hand-drawn editorial illustration (the two-figure hero, the floating tools, the salon interiors) is bespoke commissioned art and the brand's identity; commission your own, do not trace it.
  • The WordPress theme plumbing (Facebook Pixel, GTM, dual GA tags) ships with the site; borrow the storytelling, not the marketing tags.
  • The all-Japanese mincho body sets its own line-length and 38px line-height for vertical-friendly script; re-tune line-height and measure for a Latin rebuild rather than copying 17/38px.

Signature moves

Slow 0.8s transform+opacity scroll reveals (plus a 0.8s clip-path photo wipe) on

Slow 0.8s transform+opacity scroll reveals (plus a 0.8s clip-path photo wipe) on the custom cubic-bezier(0.18,0.06,0.23,1) curve, paired with looping illust-floating / illust-pendulum / illust-rotate cut-out motifs, all CSS-native with zero