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.
Design tokens
- 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
Related references
Eshk Hair
strongBeauty
a four-city hair-salon group (London, Berlin, New York, Toronto) on a WordPress + Bootstrap 4 theme that turns a colour-blocked palette of dusty rose #BF8275, sage green #6A8A6E and blush #E4DADA into the whole identity, with a heavy black Arial-Black "ESHK" wordmark, italic Roboto-100 section titles boxed in 1px outlines, and a calm 0.15s colour transition holding it together.
Hair Ici
exceptionalBeauty
a Tokyo hair salon built as a near-silent editorial split-screen, ink-black 10px Neue Haas Grotesk and a Ryo/Classico serif on a warm stone #D6D4C9 ground, where the only voice of colour is a muted plum #725068, two panels scroll independently, and a GSAP-plus-Barba intro brings the fixed header up over 1.1s on an expo-out curve.
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".
Abhishek Jha
nicheDesign Portfolio
Indian designer personal portfolio - 4-font system (DM Sans + thunder + editorial + playground), 17-step scale up to 288px, dark plum + pink palette, 9-keyframe marquee/cloud motion.