name: washi-soken-design
version: alpha
description: >
  A dark, editorial e-commerce page for handcrafted Japanese washi notebooks. The
  surface is a near-black warm umber (`#1A1612`); everything is set in warm cream
  (`#F5EDD9`) with a single vermilion seal-red (`#D64030`) carrying every accent —
  kanji, kickers, rules, the hanko, hover fills. An indigo (`#2B3A52`) panel grounds
  the Mill section. Type is a two-voice pairing: ultra-thin Josefin Sans display
  caps (weight 100) for English headlines and Noto Serif JP for Japanese kanji and
  taglines, with wide-tracked uppercase micro-labels throughout. Geometry is almost
  perfectly flat — 2px radii on imagery, circular stamps/seals — and the page is
  built from full-bleed scroll-driven moves: a falling card stack, a horizontal
  pinned collection track, a parallax mill split, and 3D-tilt product tiles.
colors:
  # Brand / Accent
  vermilion: '#D64030'   # the one accent — kanji, kickers, rules, hanko, nav CTA, hover fills, progress bar
  # Surface
  bg: '#1A1612'          # page surface (warm near-black umber)
  indigo: '#2B3A52'      # Mill text panel background
  footer-bg: '#110F0C'   # darker footer base
  surface: 'rgba(245,237,217,0.04)'  # faint raised tint (defined; sparingly used)
  # Text
  cream: '#F5EDD9'       # primary text / on-vermilion fills (--cream / --text)
  muted: 'rgba(245,237,217,0.45)'   # secondary text, body copy, nav links, footer
  ghost: 'rgba(245,237,217,0.03)'   # giant watermark kanji in footer
  faint-num: 'rgba(245,237,217,0.06)'  # oversized panel numerals
  # Hairlines
  sep: 'rgba(245,237,217,0.08)'     # all 1px borders, rules, grid gaps

Washi Sōken

washi-soken-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Washi Sōken is a dark editorial storefront for handmade Japanese paper notebooks, trading on restraint and craft. The whole page sits on a warm near-black umber (#1A1612) and speaks in a single warm cream (#F5EDD9), with one and only one accent: a seal-red vermilion (#D64030) that does all the talking — kanji, the circular hanko/stamp seals, every kicker label, the nav CTA, the collection progress bar, hover fills, and the underline on the hero link. A deep indigo (#2B3A52) panel grounds the Mill story for contrast. The type story is deliberately bicultural: Josefin Sans in its thinnest weight (100) renders huge, wide-tracked English headlines and oversized faint numerals, while Noto Serif JP sets the Japanese kanji, taglines, and brand seals; tiny 0.5–0.6rem uppercase labels with .26em tracking thread through as eyebrows. Geometry is nearly flat — 2px radii on images, 50% circles for the seals, no rounded buttons — and depth comes from one big card-stack drop shadow rather than a shadow system. The page is a sequence of full-bleed scroll-driven set pieces: a hero with a falling, mouse- leaning rotated card stack over a dimmed background video; a pinned 300vh horizontal-scroll collection track of four panels; a 200vh sticky Mill split with image parallax and animated stat counters; an accordion of daily rituals; and a 3-up product grid whose tiles tilt in 3D and slide up an "Add to Cart" bar on hover.

Colors

Brand / Accent. A single voltage: vermilion #D64030 (--vermilion). It is the hero kanji 和紙, every section kicker ("Available Now", "Ways of Using", "Since 1923"), the kanji captions in the collection (越前和紙, 手製本…), the collection progress-bar fill, the nav CTA border/text (inverting to a vermilion fill with cream text on hover), the hero link underline, the product Add to Cart slide-up bar, and the two circular seals (hero stamp + footer hanko). Nothing else competes with it.

Surface. Page background is bg #1A1612 (--bg), a warm umber near-black used on body, hero, collection, rituals, and shop. The Mill text column flips to indigo #2B3A52 (--indigo) for a single deep-blue moment. The footer drops to a darker #110F0C. A defined-but-barely-used surface rgba(245,237,217,0.04) exists for faint raised tints; accordion hover uses an even fainter rgba(245,237,217,0.025).

Text. Everything is cream #F5EDD9 (--text/--cream) — including text that sits on the vermilion fills. Secondary copy, nav links, footer text, and Japanese subtitles use muted rgba(245,237,217,0.45). Several decorative tints layer down from the same cream: faint-num rgba(...,0.06) for the giant panel numerals, ghost rgba(...,0.03) for the footer watermark kanji 和紙創研, and one-off 0.28/0.18/0.38 tints for sub-labels and accordion numbers.

Hairlines. All 1px borders, the nav bottom border, spec rows, accordion dividers, footer rules, and the product-grid gap are sep rgba(245,237,217,0.08).

Typography

Two webfonts via Google Fonts: Josefin Sans (weights 100, 300, 600) and Noto Serif JP (weights 300, 400, 700), loaded in one @import. Josefin Sans is the display and UI face — its hairline weight 100 carries every large headline and numeral; 600 carries the wide-tracked uppercase micro-labels and prices. Noto Serif JP (.ns) is the Japanese voice — kanji captions, taglines, the hero subtitle, brand seals, and the footer watermark, mostly at weight 700. Body default is Josefin Sans 300. The hallmark type move is the ultra-thin display caps with wide letter-spacing (.06–.1em) set very large and very tight in line-height (down to .88), paired against bold serif kanji.

Token	Size	Weight	Line-height	Tracking	Usage
Hero EN headline	clamp(58px,8.5vw,126px)	100	.88	.1em	"WASHI / SŌKEN", masked slide-up
Hero JP	clamp(1.6rem,3.2vw,3rem)	700 (serif)	—	.06em	和紙, vermilion
Section heading	clamp(34px,5vw,70px)	100	.93	.06em	"Daily Rituals", "The Sōken Collection"
Panel heading	clamp(30px,4.2vw,58px)	100	1.0	.06em	collection panel titles
Panel numeral	clamp(72px,11vw,148px)	100	1	-.02em	"01"–"04", faint-num tint
Mill heading	clamp(30px,3.4vw,50px)	100	1.1	.06em	"The Mill at Echizen", clip-path reveal
Stat number	clamp(34px,3.8vw,52px)	100	1	-.02em	animated counters, cream
Footer brand	clamp(32px,4.5vw,60px)	100	1	.1em	"Washi Sōken"
Footer ghost	clamp(38px,7.5vw,90px)	700 (serif)	1	.12em	和紙創研 watermark
Micro-label (.lbl)	.58rem (varies .48–.6rem)	600	—	.26em	uppercase kickers, nav, prices
Nav logo	.95rem	100	—	.32em	和紙 Washi Sōken
Body copy	.76–.78rem	300	1.84–1.86	—	paragraph copy, muted

Layout

Base spacing is loose and viewport-relative; horizontal section padding is 8vw throughout, with section vertical rhythm at 120px (80px on mobile). The page is a top-to-bottom film strip of full-bleed scenes, no central max-width container. The fixed nav (18px 56px, blurred) spans the top. The hero is 100vh, split: a left 50% title block with the falling card stack pinned right at 10vw. The collection is a 300vh outer with a sticky 100vh inner whose 400vw flex track translates horizontally across four 100vw two-column panels (image | text). The Mill is a 200vh outer with a sticky two-column split (parallax image | indigo text). Rituals is a full-width accordion; Shop is a 3-column product grid (repeat(3,1fr), 1px sep gaps, margin 8vw) collapsing to 2-up on mobile. Footer is a 1fr auto 1fr grid with a vertical rule, a giant ghost watermark, and a bottom strip. Whitespace is generous and calm; oversized faint numerals and watermarks set the editorial scale.

Elevation & Depth

Almost entirely flat — depth is created by color tint, scale, and motion, not a shadow system. The single real shadow is on the hero card stack: box-shadow: 0 22px 60px rgba(0,0,0,.65), a deep soft drop under the rotated cards. The nav uses glass: background rgba(26,22,18,.82) + backdrop-filter: blur(12px) over a sep hairline. Everywhere else, separation is hairlines (1px solid var(--sep)), the indigo panel, and 3D perspective transforms (hero lean, product tilt) rather than elevation.

Shapes

Resolutely flat-and-round. Rectangular elements are sharp or barely softened: images and the accordion thumbnail use border-radius: 2px; cards in the hero stack are 2px. Buttons are not rounded at all — the nav CTA and product CTA are square. The only true curves are perfect circles: the hero stamp (68px, 1.5px vermilion ring) and footer hanko (96px, 2px vermilion ring), both border-radius: 50%, plus the small 22px circular accordion chevron icon. No pills, no large radii.

Components

• Nav — fixed, glass rgba(26,22,18,.82) + blur(12px), 1px sep bottom border, padding 18px 56px. Logo in Josefin 100, .32em tracking. Links .54rem uppercase .26em, muted → cream on hover.
• Nav CTA — square, 1px solid vermilion, vermilion text, 9px 22px, .54rem uppercase; inverts to vermilion fill + cream text on hover. "Shop Now".
• Hero card stack — four 320×427 cards, 2px radius, deep 0 22px 60px rgba(0,0,0,.65) shadow, fanned -7°…6.5°, drop-in on load and mouse-lean parallax, fades on scroll.
• Seals (stamp / hanko) — circular vermilion-ringed badges with Noto Serif JP text; hero stamp 新作/新品 at 65% opacity, footer hanko 和紙創研 / SŌKEN.
• Collection panel — full-viewport 2-col (image | text); oversized faint numeral, vermilion kicker, thin display heading, vermilion kanji, muted body, spec rows.
• Spec row — flex justify-between, 1px sep bottom border, .6rem, label muted / value cream. e.g. "Size — A5 — 148 × 210 mm".
• Mill stat — thin Josefin numeral (cream), .52rem uppercase label; counts up on scroll into view ("101 Years", "4th Generation", "12 Artisans").
• Accordion item — 1px sep top border, trigger 28px 8vw, thin title + serif tagline, 22px circular chevron that rotates 180° and turns vermilion when open; body max-height reveal with 1fr 260px copy/image grid.
• Product tile — bg #1A1612, 3/4 image, serif JP name (muted) + thin EN name + desc + .75rem Josefin 600 price; 3D mouse-tilt; vermilion Add to Cart bar slides up from the bottom on hover (cream text). e.g. "Unbleached Natural · A5 — Lined · ¥3,200".
• Footer — 1fr auto 1fr grid: brand block + uppercase links, vertical sep rule, hanko + location; giant ghost-tinted watermark kanji; bottom copyright strip.

Motion

Scroll-driven and entrance-driven, all hand-rolled in a single rAF loop + IntersectionObservers.

• Hero entrance — masked headline words slide up (translateY(110%)→0, .85s cubic-bezier(.2,.8,.2,1), staggered .28s/.42s); subtitle, link, stamp, scroll hint fade-up on staggered delays up to 1.9s.
• Card stack — cards drop from -110vh with a springy cubic-bezier(.34,1.56,.64,1) (.95s, staggered), then lerped mouse-lean perspective rotation and scroll fade.
• Collection — col-track translates X with scroll over the 300vh pin; vermilion progress bar fills 0→100%.
• Mill — image parallax (translateY up to -40px); heading reveals via clip-path: inset(0 0 100%→0%) .75s; stat counters ease-out cubic over 1100ms.
• Shop tiles — 3D perspective(720px) tilt on mousemove (±7°/±5°), image scale 1.04 on hover, CTA bar translateY(100%→0) .32s.
• General — .fade-up and section headings rise 18–20px and fade in on scroll (.7–.8s ease). Link/border color transitions .2s.

Iconography

Effectively icon-free. The only icon is a tiny inline SVG chevron in the accordion (8×8 viewBox, stroke: currentColor, stroke-width: 1.5, no fill), housed in a 22px circular 1px sep button that rotates 180° and turns vermilion when its item opens. There is no icon library. "Iconography" is instead carried by typographic seals — the circular vermilion hanko and stamp set in Noto Serif JP kanji.

Do's and Don'ts

• Do keep vermilion as the only accent — use it for kanji, seals, kickers, rules, and hover states, and nothing else.
• Do set English headlines in ultra-thin Josefin Sans (weight 100) at large sizes with wide tracking, and reserve Noto Serif JP for Japanese text and seals.
• Do keep surfaces flat: 2px radii on imagery, perfect circles for seals, square buttons, hairlines instead of shadows.
• Do lean on 8vw side padding and oversized faint numerals/watermarks for the editorial scale.
• Don't introduce a second accent color, gradients, or a shadow/elevation system — the one card-stack shadow is the exception, not a pattern.
• Don't round buttons or use heavy Josefin weights for display; the thinness is the identity.
• Don't put cream text on cream surfaces without the muted tints, or let the indigo panel spread beyond the Mill.

Known Gaps

• Spacing has no formal scale; values are ad-hoc and viewport-relative (8vw padding, 120px/80px section rhythm). The spacing tokens in the style guide are an inferred 4px-based approximation, not authored tokens.
• No radius scale is authored beyond 2px (images/cards) and 50%/9999px (circles); the rounded scale is summarized from those literals.
• Background video and all imagery are remote (Pexels/Unsplash/CDN); hero video opacity .4 over #1A1612 shifts perceived color.
• Exact .lbl size varies per use (.48rem–.6rem); the table lists the base .58rem.