SHIROKANE

shirokane-design · alpha

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

Overview

SHIROKANE is a long-scroll editorial site for a fictional Ise katagami stencil-dyeing atelier, structured as a four-folio register. It lives on warm paper-white washi #EDE4CF over ink-black sumi #16120E, with a single hot voltage — vermilion hanko red #D4452A — reserved for the brand stamp, kickers, prices, the focus ring, and the underline-wipe accents. Whole sections switch to coloured grounds: indigo #22335C (intro, footer), pure sumi (craft), and persimmon #C26A3A (custom). The type story is a deliberate east/west bracing: an English display serif, Cormorant Garamond, set huge and light, against a Japanese mincho, Shippori Mincho B1, for the kanji and headings, with JetBrains Mono carrying every code, label, and spec row in .18em uppercase tracking. The geometry is austere — near-zero radius everywhere, razor 1px hairlines instead of shadows, the only curves being the 6px-radius hanko stamp and tiny round dots. The signature moves are all scroll-driven via a single rAF loop: a per-letter blurred hero entrance, a horizontally-pinned 460vh "twelve steps" photo rail, a pinned three-panel custom split, and a heritage section that color-mixes its entire theme from light to dark as you scroll. Two textures recur over everything: an SVG feTurbulence paper grain at 5% multiply, and a masked torn-paper top edge on dark sections.

Colors

Brand / Voltage. vermilion #D4452A is the one true accent — it fills the .btn buttons, the hero .hanko stamp, every .kick kicker label, the inline dots, prices (.pm .v), the focus outline, and the underline-wipe hover. persimmon #C26A3A is the secondary accent: it is the full ground of the custom-left split panel and tints the intro kicker and spec labels.

Surface. washi #EDE4CF is the default page background and the light text colour on dark grounds. sumi #16120E is the ink-black used for body text, the craft section ground, and button hover. indigo #22335C grounds the intro and footer and stands in as a placeholder behind loading photos. linen #DDD0B4 is the muted card fill for etymology boxes, geo/spec panels, and the custom-right column.

Text. Body copy is sumi on light, washi on dark. ink-mist #8A8270 is the muted text for captions, intro lead-ins, the bolt-count note, and roman gloss names. A one-off warm brown #4a4034 carries the body paragraph inside the light custom panel.

Hairlines. No borders are opaque black — they are rgba(22,18,14,.2) on light grounds and rgba(237,228,207,.16) on dark (e.g. the marquee top/bottom rules). The .hair utility is currentColor at .22 opacity.

Scrims / overlays. Photo tag chips and hero darkening use rgba(22,18,14,.6); the nav becomes rgba(22,18,14,.92) once scrolled past the hero. The hero base is linear-gradient(160deg, #22335C, #16120E 70%) behind the video.

Typography

Four families, all loaded from Google Fonts in one request: Cormorant Garamond (display serif, weights 300–600 + italics), Shippori Mincho B1 (Japanese mincho, 400–800), Zen Kaku Gothic New (body sans, 300–500), and JetBrains Mono (labels & specs, 400–500). These are real open-source faces — no substitution needed. Display serif is set light (300–400) and enormous; mincho headings are heavy (700) and often run writing-mode: vertical-rl; the mono is always uppercase with wide tracking.

Layout

Base unit is 4px; section vertical rhythm runs in big multiples (120px section padding, 128px between bolts, 140px intro). The page is centred on a max-width: 1440px .wrap with 56px side gutters (32px under 980px). The composition is a stack of full-bleed folios: a 100vh hero with corner ticks and HUD captions; an indigo intro with a 3fr/6fr/3fr grid and a vertical-rl kanji rail; a collections register of alternating .bolt grids (64px metarail / 7fr photo / 5fr info, flipped on even rows); a sumi craft section with a 460vh sticky-pinned horizontal photo rail; a 340vh pinned 1fr/1fr custom split; a 300vh pinned heritage section that inverts its theme; and an indigo footer. Whitespace is generous and editorial; asymmetry (offset hero lockup lower-left, flipped grids, vertical rails) is the structural signature.

Elevation & Depth

This system is essentially flat — depth comes from hairlines, coloured grounds, and texture, not shadows. The only real box-shadow is on the custom-left monitor frame (0 30px 80px rgba(22,18,14,.4)) and the hero headline text-shadow (0 4px 44px rgba(22,18,14,.55)). Everywhere else, separation is achieved with 1px hairlines (often double-rule 3px double on the masthead), .05–.22 opacity overlays, and section background swaps. Two textures add tactility: an SVG feTurbulence paper grain (.grain::after, 5% opacity, multiply blend) and masked torn-paper top edges (.torn::before).

Shapes

Resolutely orthogonal. Radius is 0 on every card, photo, button, input, panel, and chip — corners are sharp. The only rounded forms are the .hanko stamp at 6px and fully-round 50% dots (the vermilion .dot, metarail tick, seam-rail dots). Photos use strict aspect ratios (4/3 bolts, 4/5 drapes, 3/4 craft & heritage) and reveal via clip-path inset wipes rather than scale or fade.

Components

• Button (.btn) — vermilion fill, washi text, no radius, 17px 30px padding, 18px Cormorant uppercase at .24em; hover swaps fill to sumi; active nudges down 1px. Label pairs text with an inline arrow SVG (e.g. "View full register →").
• Hanko stamp (.hanko) — vermilion 6px-radius square set into the H1, with vertical-rl mincho "白金"; scales in on load.
• Photo tag (.tag) — rgba(22,18,14,.6) chip, washi mono label, 5px 12px, pinned top-left of photos.
• Etymology card (.ety) — linen fill, 20px padding, hidden until bolt hover/reveal.
• Spec block (.spec) — JetBrains Mono 12px justified key/value rows, muted keys, vermilion Cormorant price.
• Stat (.stat) — rgba(237,228,207,.05) fill, Cormorant 54px count-up number, mono label.
• Input line (.iline) — transparent, bottom 1px hairline only, Cormorant 20px text, vermilion underline on focus.
• Nav (header.nav) — fixed, transparent over hero, solidifies to rgba(22,18,14,.92) past 85vh; mono links with mincho Japanese sub-labels.
• Geo / spec panels (.geo, .specgrid) — linen fill, hand-drawn pattern SVGs at 1.2px stroke alongside italic Cormorant values.

Motion

One easing rules everything: cubic-bezier(.16,1,.3,1) (--ease). The hero entrance staggers each headline letter from blur(16px) + translateY(28px) at a 55ms step, then the hanko scales 1.12→1. Section headers reveal with translateY(105%) line wipes or clip-path inset reveals. A single requestAnimationFrame scroll loop drives the rest: hero video scales 1→1.1 with a darkening overlay, photos parallax by data-speed, the craft rail translates horizontally across a 460vh pin with a progress-fill bar, the custom split cross-fades three panels by scroll segment, and the heritage section color-mixes its whole theme washi→sumi while a vertical title grows scaleY .4→1 and timeline nodes clip-reveal. The intro marquee scrolls 42s linear infinite; links carry a .45s underline-wipe. prefers-reduced-motion is acknowledged in code via a reduce flag but it is hard-set to false, so motion always runs.

Iconography

All icons are hand-authored inline SVGs — there is no icon font. Style is predominantly outline (1.4–1.6px stroke, currentColor) with a handful of solid glyphs: the play triangle on the documentary link, the star/clock heritage marks, and the brand compass mark. Pattern diagrams in the geo panels are drawn at 1.2px stroke with solid sumi dots. Accent marks (dots, ticks) take vermilion; functional UI icons inherit currentColor so they flip with the section theme. Sizes: 16px UI, 18px in buttons, 22px heritage marks, 28px brand mark.

Do's and Don'ts

• Do keep vermilion as the only saturated accent — one voltage, used sparingly on stamps, kickers, prices, and focus.
• Do brace Cormorant Garamond against Shippori Mincho B1, and reserve JetBrains Mono exclusively for uppercase labels, codes, and spec rows.
• Do keep corners sharp (radius 0) and lean on hairlines, coloured grounds, and the grain/torn textures for depth instead of shadows.
• Do preserve the scroll-pinned signature sections and the single shared cubic-bezier(.16,1,.3,1) easing.
• Don't introduce drop shadows, soft rounded cards, or a second bright accent — it breaks the austere paper-and-ink discipline.
• Don't body-set the display serif or drop the Japanese mincho; the east/west pairing is the identity.
• Don't swap reveal wipes (clip-path / line-mask) for generic fades, or let the marquee/parallax run without the house easing.

Known Gaps

• The reduced-motion path exists in JS (reduce flag) but is hard-coded to false, so the spec documents motion as always-on.
• Section-inversion colours during the heritage scroll are computed live via JS color-mix/lerp between washi, sumi, persimmon, and indigo — intermediate values are interpolated, not authored tokens.
• --her-accent interpolates between [212,69,42] (vermilion) and [34,51,92] (indigo); the resting value is vermilion, captured here as hairline/accent rather than a fixed hex.
• Spacing tokens are inferred from the recurring padding/gap values; the HTML uses raw pixel values rather than a named scale.