name: hagane-design
version: alpha
description: >
  Hagane is an editorial landing page for a fictional Japanese knife atelier:
  a warm paper-cream canvas (#F0E9D7) printed against deep charcoal (#1B1814),
  with a single ember-red voltage (#B64A2A) used for accents, hairlines, and
  hover states. The type story pairs a high-contrast Bodoni Moda display serif
  with a Source Serif 4 italic ("mincho") for blade names and a Hanken Grotesk
  sans for body and uppercase labels. Signature moves: giant clamp-scaled
  display headings, ultra-wide-tracked uppercase eyebrows, faint kanji
  watermarks bleeding off-section, an SVG paper-grain overlay, walnut-and-steel
  accents, and a charcoal multi-step commission configurator. Geometry is nearly
  flat and square — hairline borders over shadows, square panels, with one pill
  CTA the only rounded exception.
colors:
  # Surface
  cream: '#F0E9D7'          # primary paper surface, page background, light text on dark
  cream-warm: 'linear-gradient(165deg, #F0E9D7 0%, #EBE2CE 40%, #F2EBDB 100%)'  # warm cream section bg (intro, care)
  cream-cool: 'linear-gradient(180deg, #EEEAD9 0%, #F0E9D7 50%, #EDE5D2 100%)'  # cool cream section bg (collection)
  charcoal: '#1B1814'      # near-black surface for hero/forge/commission/footer; default text on cream
  walnut: '#5A3A22'        # walnut wood accent, commission panel bg, handle gradient
  # Brand / Voltage
  ember: '#B64A2A'         # the single accent — eyebrows, hairlines, hover, active states, CTA fill
  ember-dark: '#9c3e22'    # CTA hover state
  # Text / Neutral
  steel: '#8A8E92'         # muted steel grey — captions, specs, secondary labels, borders
  cream-90: 'rgba(240,233,215,0.9)'  # body copy on charcoal
  cream-80: 'rgba(240,233,215,0.8)'  # secondary body on charcoal
  cream-70: 'rgba(240,233,215,0.7)'  # tertiary labels on charcoal
  cream-60: 'rgba(240,233,215,0.6)'  # muted labels on charcoal
  cream-40: 'rgba(240,233,215,0.4)'  # faint captions on charcoal
  charcoal-80: 'rgba(27,24,20,0.8)'  # body copy on cream
  charcoal-70: 'rgba(27,24,20,0.7)'  # secondary body on cream
  # Hairlines
  steel-hairline: 'rgba(138,142,146,0.2)'  # default borders/dividers in configurator + footer
  steel-row: 'rgba(138,142,146,0.3)'       # knife-list row dividers
  # Semantic
  success: '#2a6b4a'       # configurator "Submitted" confirmation state
typography:
  display:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: clamp(60px, 11vw, 180px)   # hero wordmark; section headings text-5xl–8xl
    fontWeight: 900
    lineHeight: 0.85
    letterSpacing: -0.01em
  display-italic:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: clamp(24px, 6vw, 72px)
    fontWeight: 300
    fontStyle: italic                    # second line of split headings, blockquote
  mincho:
    fontFamily: "'Source Serif 4', serif"
    fontSize: 18px
    fontWeight: 400
    fontStyle: italic                    # blade names, spec values, engraving preview
  body:
    fontFamily: "'Hanken Grotesk', sans-serif"
    fontSize: 15px
    fontWeight: 300
    lineHeight: 2
  eyebrow:
    fontFamily: "'Hanken Grotesk', sans-serif"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.3em
    textTransform: uppercase             # section eyebrows, captions, nav
  watermark:
    fontFamily: "'Source Serif 4', serif"
    fontSize: clamp(200px, 30vw, 500px)
    fontWeight: 300                       # off-section kanji at rgba(27,24,20,0.03)
rounded:                  # near-flat brutalist; squares + hairlines dominate
  none: 0px
  sm: 2px                 # care cards (rounded-sm), SVG handle corners
  full: 9999px           # the single pill — Submit Commission CTA
spacing:                  # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 80px              # py-20/py-28 section rhythm
components:
  nav:
    backgroundColor: 'transparent'       # absolute over hero
    textColor: '{colors.cream}'
    typography: '{typography.eyebrow}'
    notes: 'fixed top, uppercase links, hover -> {colors.ember}; game-icons knife logo'
  hero-wordmark:
    textColor: '{colors.cream}'
    typography: '{typography.display}'
    notes: '"Hagane" with ember period; over brightness-dimmed sepia video'
  section-eyebrow:
    textColor: '{colors.ember}'
    typography: '{typography.eyebrow}'
    notes: 'preceded by a 12px ember hairline rule (§ 01 — Collection)'
  knife-row:
    backgroundColor: 'transparent'
    textColor: '{colors.charcoal}'
    typography: '{typography.mincho}'
    borderBottom: '1px solid {colors.steel-row}'
    padding: '24px 0'
    notes: 'hover/active recolors row + number to {colors.ember}'
  knife-detail:
    backgroundColor: '{colors.charcoal}'
    textColor: '{colors.cream}'
    rounded: '{rounded.none}'
    padding: '40px'
    notes: 'sticky panel; ember hairline divider; spec grid in mincho italic'
  care-card:
    backgroundColor: '{colors.charcoal}'
    textColor: '{colors.cream}'
    rounded: '{rounded.sm}'
    padding: '32px'
    notes: 'lift -8px + 64px shadow on hover; ember top-edge gradient; giant ghost number'
  spec-option:
    backgroundColor: 'transparent'
    textColor: '{colors.cream}'
    rounded: '{rounded.none}'
    border: '1px solid {colors.steel-hairline}'
    padding: '14px 18px'
    notes: 'active -> ember border + 0.08 ember fill + inset 3px ember bar'
  spec-chip:
    backgroundColor: 'transparent'
    textColor: '{colors.cream}'
    rounded: '{rounded.none}'
    border: '1px solid rgba(138,142,146,0.25)'
    padding: '10px 20px'
    typography: '{typography.eyebrow}'
    notes: 'active -> solid {colors.ember} fill'
  input:
    backgroundColor: 'transparent'
    textColor: '{colors.cream}'
    border: '1px solid {colors.steel}'
    padding: '14px 16px'
    notes: 'focus border -> {colors.ember}; engrave input is bottom-border-only mincho italic'
  cta-pill:
    backgroundColor: '{colors.ember}'
    textColor: '{colors.cream}'
    rounded: '{rounded.full}'
    typography: '{typography.eyebrow}'
    padding: '16px 32px'
    notes: 'Submit Commission; hover -> {colors.ember-dark}; only pill in the design'
motion:
  library: 'GSAP 3 (ScrollTrigger, SplitText) + Locomotive Scroll 5 (lenis lerp 0.08)'
  hero-chars: 'SplitText chars, y:120 -> 0, stagger 0.05, 1.2s power4.out'
  section-reveal: 'headings/cards y:50–80 + opacity, 1–1.4s power3/power4.out, ScrollTrigger top 85%'
  care-card-hover: 'translateY(-8px), 0.5s cubic-bezier(0.16,1,0.3,1), 64px shadow'
  forge-parallax: 'pinned image + yPercent -8 scrub on desktop'
  kanji-parallax: '--kanji-y -15% scrub'
  blade-svg-draw: 'strokeDashoffset 1000 -> 0, 1.3s power2.inOut on knife change'
  spec-fade: 'specFadeIn keyframe, opacity + translateY(12px), 0.4s ease'
icons:
  library: 'Tabler Icons (webfont, ti) + game-icons (lorc curvy-knife, sparkling-sabre, inline svg, inverted)'
  style: outline
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.ember}'   # ti-knife/ti-arrow-right etc.; steel for inert chevrons

Hagane

hagane-design · alpha

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

Overview

Hagane is an editorial, print-inspired landing page for a fictional Japanese knife atelier ("Hagane & Co., Kyoto · est. 1923"). The canvas alternates between warm paper cream (#F0E9D7, with subtle cream-warm/cream-cool gradients) and deep charcoal (#1B1814), like a monograph with dark and light plates. A single ember-red voltage (#B64A2A) carries every accent — section eyebrows, the period in the wordmark, hairline rules, hover recolors, active configurator states, and the one pill CTA. The type story is the centerpiece: a high-contrast Bodoni Moda display serif at heroic clamp sizes (up to 180px, weight 900, line-height 0.85), a Source Serif 4 italic ("mincho") for blade names and spec values, and Hanken Grotesk light for body and the ubiquitous wide-tracked (0.3em) uppercase labels. Signature moves: giant kanji watermarks (刃, 磨) bleeding off the right edge at 3% opacity, an SVG fractal-noise paper grain at 3.5% opacity, hand-drawn blade-profile SVGs that stroke-animate on hover, a sepia-graded hero video, and walnut/steel material cues. Geometry is deliberately near-flat: hairline borders instead of shadows, square panels, 0.85–0.95 heading leading, and only rounded-sm (2px) on care cards plus the lone rounded-full Submit button.

Colors

Surface. The dominant page surface is paper cream cream #F0E9D7, applied to the body and reused as the light text color on dark sections. Two gradient washes vary it per section: cream-warm (a 165° blend through #EBE2CE) on the intro and care sections, and cream-cool (180° through #EEEAD9/#EDE5D2) on the collection. The dark surface is charcoal #1B1814, used full-bleed on the hero, forge, commission, knife-detail panel, care cards, and footer. walnut #5A3A22 is the wood material accent — the commission image panel background and the SVG handle gradient.

Brand / Voltage. Everything accented is ember #B64A2A: the eyebrow labels (§ 01 — Collection), the . after "Hagane", hairline rules, the blockquote left border, hover color on nav/footer links and knife rows, active states across the configurator, and the Submit CTA fill. ember-dark #9c3e22 is its hover/ press shade.

Text / Neutral. steel #8A8E92 is the workhorse muted grey for captions, spec keys, secondary labels, and select-arrow strokes. On charcoal, body and labels step down through cream opacities — cream-90/80/70/60/40. On cream, text uses charcoal and its charcoal-80/70 opacities.

Hairlines. Borders carry most structure: steel-hairline rgba(138,142,146, 0.2) for configurator panels and the footer top rule, and steel-row rgba(138,142,146,0.3) for knife-list dividers.

Semantic. A single success #2a6b4a swaps onto the Submit button as the "✓ Submitted" confirmation.

Typography

Three Google-Fonts families, imported in one @import: Bodoni Moda (display serif, high contrast, used 400–900 + italic), Source Serif 4 (the "mincho" serif, used italic for blade names/specs and as the kanji watermark face), and Hanken Grotesk (sans, 300–600, body + labels). All are open-source web fonts, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(60px,11vw,180px)	900	0.85	-0.01em	Hero wordmark, section headings (text-5xl–8xl)
display-italic	clamp(24px,6vw,72px)	300 italic	0.95	—	Second heading line, blockquote
mincho	18px	400 italic	normal	—	Blade names, kana, spec values, engraving
body	15px	300	2	—	Essay/body copy (drop-cap on forge essay)
eyebrow	11px	400	normal	0.3em	Uppercase eyebrows, captions, nav, footer
watermark	clamp(200px,30vw,500px)	300	1	—	Off-section kanji at 3% opacity

Note: nav and tags push tracking even wider (0.35em–0.4em uppercase). The forge essay uses a Bodoni drop-cap (::first-letter, 4rem).

Layout

Base unit is 4px on the Tailwind scale; vertical section rhythm is py-20/py-28 (80–112px). The page is a long single-column scroll of full-bleed sections that alternate cream and charcoal: absolute-positioned hero over a video, a centered intro statement, a 12-column collection (7-col knife list + 5-col sticky detail panel), a two-column forge photo-essay (pinned image + scrolling prose, max-w-2xl), a three-column care grid with staggered margin-top offsets, and a two-column commission block (walnut image panel + charcoal configurator). Content max-widths range max-w-md/max-w-sm for prose to max-w-7xl for the collection. Signature structural moves: sticky section header inside the collection, sticky knife-detail panel (top-[220px]), the pinned forge image, asymmetric 3:2 image pairs, and giant decorative numerals/kanji bleeding off-edge. Whitespace is generous and calm — the layout breathes like a printed catalogue.

Elevation & Depth

Almost entirely flat. Structure comes from hairline borders (steel-hairline, steel-row) rather than shadows. The two real shadows are on care cards: box-shadow: 0 32px 64px -16px rgba(27,24,20,0.4) on hover, paired with a translateY(-8px) lift and an ember top-edge gradient reveal. Depth otherwise is photographic — sepia/brightness-graded images, radial ambient ember glows on the forge (rgba(182,74,42,0.06)), linear vignette overlays, the 3.5% paper-grain noise, and 3% ghost kanji/numerals behind content. No glassmorphism.

Shapes

Brutalist-leaning and square. Default radius is 0 (knife rows, detail panel, configurator options, chips, inputs, summary boxes all have sharp corners). The only softening is rounded-sm (2px) on the care cards and the small SVG handle rect, and rounded-full on exactly one element — the Submit Commission pill. Step dots and wood swatches are rounded-full circles. The discipline is: sharp panels, circular markers, one pill button.

Components

• Nav — transparent, absolute over hero; cream uppercase eyebrow links at 0.25em, hover to ember; left logo is an inverted game-icons curvy-knife SVG
  • "Hagane & Co."; right shows "Kyoto · est. 1923".
• Section eyebrow — ember § 0N — Title at 11px/0.3em uppercase, preceded by a 12px ember hairline rule.
• Knife row — transparent list row, border-b steel-row, py-6; number + mincho-italic name + kana + length; hover/active recolors row and number to ember; drives the detail panel on mouseenter.
• Knife detail — sticky charcoal panel, p-10, square; header, looping video, full-width ember hairline, then a mincho-italic spec grid (steel keys / cream values); "Acquire →" ember link.
• Care card — charcoal, rounded-sm, p-8; looping video with bottom fade, ti icon in ember, Bodoni title, mincho subtitle, ember rule, dotted-bullet step list; hover lift + 64px shadow + ember top gradient; giant ghost numeral.
• Spec option — full-width square button, steel-hairline border, transparent; active = ember border + 8% ember fill + inset 3px 0 0 ember bar.
• Spec chip — square outline pill (no radius), 11px uppercase; active = solid ember fill.
• Spec wood swatch — square button with a colored dot (walnut/ho/ebony/cherry)
  • label; active = ember border + faint ember fill.
• Inputs — transparent, 1px steel border, cream text, focus border ember; engraving input is bottom-border-only, centered mincho italic 3xl.
• CTA pill — the only rounded-full: ember fill, cream uppercase label, px-8 py-4, hover ember-dark; turns success green on submit.
• Footer — charcoal, top hairline; Bodoni "Hagane." wordmark, uppercase link row (incl. 日本語), © MMXXV line.

Motion

GSAP 3 (ScrollTrigger + SplitText) drives reveals, with Locomotive Scroll 5 (lenis lerp 0.08) smoothing the page. Hero h1 characters split and rise (y:120→0, stagger 0.05, 1.2s power4.out); the wordmark sub-labels fade up after. Section headings and cards reveal on scroll (y:50–80 + opacity, 1–1.4s power3/power4.out, top 85%), knife rows stagger (0.08), care cards add a subtle rotateX:8. The forge image is pinned on desktop with an 8% parallax scrub; kanji watermarks parallax via --kanji-y -15%. Blade-profile SVGs draw on each knife change (strokeDashoffset 1000→0, 1.3s power2.inOut). The configurator steps cross-fade with a specFadeIn keyframe (0.4s) and animate dots/borders. Hovers on links/rows/CTAs are 0.25–0.5s color/transform transitions.

Iconography

Tabler Icons via webfont (ti ti-*) for UI glyphs — ti-chevron-down, ti-arrow-right/ti-arrow-left, and care icons ti-knife/ti-adjustments/ ti-box, typically rendered in ember at text-xl. Two decorative game-icons SVGs (lorc curvy-knife, sparkling-sabre) appear inverted/desaturated in the nav and commission panel. The select arrow is an inline steel-stroked SVG. Style is outline, small (16–24px), ember for active/UI accents and steel for inert markers.

Do's and Don'ts

• Do keep ember as the sole accent — one voltage carries the whole system.
• Do alternate cream and charcoal plates and let kanji/numeral ghosts bleed off-edge at ~3% opacity.
• Do use Bodoni huge with tight 0.85 leading, mincho italic for blade names/specs, and Hanken with 0.3em+ uppercase tracking for labels.
• Do structure with hairline borders, not shadows; keep panels square.
• Don't introduce a second accent color or use ember as a large fill (only the one pill CTA + tiny active fills).
• Don't round corners beyond rounded-sm cards and the single pill.
• Don't add heavy drop-shadows except the care-card hover lift.
• Don't mix in a second sans or drop the wide uppercase tracking on labels.

Known Gaps

• Heading letterSpacing: -0.01em is approximated from Tailwind tracking-tight (exact value not specified in CSS).
• display-italic line-height 0.95 and size range are inferred from the text-5xl–7xl responsive classes on the italic heading lines.
• Gradient tokens (cream-warm, cream-cool, handle/blade SVG gradients) are recorded as their literal CSS; the build's tokens.json stores representative flat colors for them.
• Spacing scale is the standard Tailwind 4px scale; the xxl: 80px token represents the dominant py-20/py-28 section rhythm rather than a named class.