name: seki-forge-design
version: alpha
description: >
  A cinematic, editorial bladesmith landing page set on near-black charcoal
  (#1B1814) with a single ember-orange voltage (#B64A2A) and a warm cream ink
  (#F0E9D7). The signature moves are a clip-path hero wipe under a giant Fraunces
  wordmark, a GSAP-pinned horizontal-scroll "collection" of seven full-screen
  knife panels with vertical kanji titles and animated blade diagrams, and a
  light cream "paper" Care section that breaks the dark spell. Type pairs a high-
  optical-size Fraunces serif display with Shippori Mincho for Japanese/quote
  voice and Inter for tracked-out micro-labels. Geometry is essentially sharp:
  hairline borders and rules instead of radii, with rounds reserved for circles,
  ripples, and pills. Texture (procedural wood grain, paper grain, vignette,
  warm radial light) and an ember glow carry the depth.
colors:
  # Surface
  char: '#1B1814'      # primary page surface (near-black charcoal), body background
  walnut: '#5A3A22'    # secondary surface — knife-panel media wells, wood-texture base
  cream: '#F0E9D7'     # light surface for Care section (paper-tex), and the primary ink on dark
  # Brand / Voltage
  ember: '#B64A2A'     # the one accent — section indices, kanji rules, CTA fill, glows, live dots
  # Text
  text-cream: '#F0E9D7'        # headings + body on dark surfaces
  text-char: '#1B1814'         # headings + body on the cream Care section
  text-steel: '#8A8E92'        # muted spec labels, secondary metadata
  # Hairlines (alpha-on-cream)
  hairline: 'rgba(240,233,215,.10)'  # section/panel borders on dark
  hairline-strong: 'rgba(240,233,215,.15)' # bordered spec cells
  rule-steel: '#8A8E92'        # 1px rules & ticks at ~.35 opacity
  # Glass
  glass-fill: 'rgba(240,233,215,.06)'   # commission option cards
  glass-border: 'rgba(240,233,215,.12)' # glass card border
  # Gradient / Glow
  warm-light: 'rgba(182,74,42,.25)'     # ember radial light bloom behind hero/commission
  ember-glow: 'rgba(182,74,42,.40)'     # ember box-shadow ring + 40px glow
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(6rem, 22vw, 22rem)  # hero wordmark; section H2 5xl–7xl
    fontWeight: 500
    letterSpacing: -0.02em
  mincho:
    fontFamily: "'Shippori Mincho', serif"
    fontSize: 30px            # knife sub-names (text-3xl); also quotes/kanji
    fontWeight: 400
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 15px            # essay body / spec copy
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontFamily: "'Inter', sans-serif"
    fontSize: 11px
    fontWeight: 500
    letterSpacing: 0.25em
    textTransform: uppercase
rounded:                      # near-zero geometry; rounds only for circles/pills
  none: 0px                   # default — borders & rules carry structure
  full: 9999px                # ripples, live dots, commission circle stage, care badge
spacing:                      # 4px base; Tailwind scale
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 32px
  '2xl': 48px
  section: 128px              # py-32 section rhythm
components:
  navbar:
    backgroundColor: transparent
    textColor: '{colors.cream}'
    typography: '{typography.label}'
    note: 'fixed top-0, mix-blend-difference, wordmark in Shippori Mincho tracking-[0.3em]'
  glassOption:
    backgroundColor: '{colors.glass-fill}'
    borderColor: '{colors.glass-border}'
    textColor: '{colors.cream}'
    typography: '{typography.mincho}'
    rounded: '{rounded.none}'
    padding: '16px'
    note: 'backdrop-blur(8px); hover lifts fill to .10 and border to ember/.50'
  ctaButton:
    backgroundColor: '{colors.ember}'
    textColor: '{colors.cream}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    padding: '32px'
    border: '1px solid rgba(240,233,215,.2)'
    note: 'full-width; cta-glow on hover (60px ember glow); click ripple'
  specCell:
    backgroundColor: transparent
    borderColor: '{colors.hairline-strong}'
    textColor: '{colors.cream}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '12px'
  knifePanel:
    backgroundColor: '{colors.char}'
    mediaWell: '{colors.walnut}'
    textColor: '{colors.cream}'
    rounded: '{rounded.none}'
    note: '12-col grid, full viewport; vertical-rl ember knife name; animated SVG diagram'
  statBlock:
    textColor: '{colors.cream}'
    typography: '{typography.display}'
    note: 'big Fraunces numeral over a tracked Inter label (steel/char-60)'
motion:
  heroWipe: 'clipPath inset(0 100% 0 0)→inset(0) over 1.6s power3.inOut'
  heroWordRise: 'yPercent 80→0, opacity 0→1, 1.4s power3.out, delay 0.6s'
  heroParallax: 'heroImg scale→1.18 on scroll scrub'
  horizontalScroll: 'GSAP ScrollTrigger pin + scrub of 7 panels, snap to 1/(n-1)'
  diagramDraw: 'SVG stroke-dashoffset 1→0 (draw-path) on horizontal containerAnimation'
  reveals: 'h2 / .font-display y 40→0, opacity 0→1, 1s power3.out at top 85%'
  careHover: 'mouseenter grows hovered care-side flex→1.4, siblings→0.6 over 0.6s'
  ripple: 'click spawns ember/cream circle scaled ~18–40× fading out 0.7–0.9s'
  marquee: 'footer text translateX -50% over 40s linear infinite'
icons:
  library: game-icons (lorc / sbed via jsDelivr) + Tabler (ti) + inline SVG
  style: solid silhouette SVGs recolored via CSS filter; thin inline strokes 1–1.2px
  sizes: { sm: 16px, md: 32px, lg: 40px }
  color: '{colors.ember}'   # game-icons filtered to ember; Tabler shield in walnut

Seki Forge — Kajiya Atelier

seki-forge-design · alpha

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

Overview

Seki Forge is a cinematic, editorial landing page for a fictional four-generation Japanese bladesmith. The world is built on near-black charcoal char #1B1814, lit by a single ember voltage ember #B64A2A and written in warm cream ink cream #F0E9D7. It opens with a clip-path wipe revealing a darkened forge photo beneath a colossal Fraunces wordmark ("A·TELIER") sized clamp(6rem, 22vw, 22rem), flanked by ember rules and 刀 · KATANA set in Shippori Mincho. The centerpiece is a GSAP-pinned horizontal-scroll "Collection" — seven full-viewport 12-column panels, each pairing a charcoal spec side (with a vertical-rl ember knife name at text-[12vw], a Mincho sub-title, a two-column spec grid, and an SVG blade diagram that draws itself in) against a walnut media well playing a forging video. The Forge section switches to a procedurally textured wood background for a three-column photo essay; Care breaks the spell entirely with a light cream "paper" two-pane layout that expands on hover. Geometry is near-zero — hairline borders, dashed rules, and tick marks carry all structure; the only rounds are the commission circle stage, the live dots, the care badge, and click ripples. Depth comes from texture and glow, not shadow: wood grain, paper grain, a hero vignette, warm ember radial light, and an ember-glow ring.

Colors

Surface. char #1B1814 is the dominant near-black charcoal — the body background and the base of every dark section (hero, commission, collection, intro, footer). walnut #5A3A22 is the secondary surface for the knife-panel media wells and the base color of the procedural wood-tex. cream #F0E9D7 is both the primary ink on dark surfaces and the light surface itself in the Care section (via paper-tex).

Brand / Voltage. ember #B64A2A is the single accent and appears everywhere a spark should: section index labels (05 — Commission), the kanji-flanking rules, the full-width CTA fill, "● LIVE FROM SEKI" dots, the vertical knife names, italic tamahagane, and as glow/ring color.

Text. text-cream #F0E9D7 for headings/body on dark; text-char #1B1814 for the light Care section; text-steel #8A8E92 for muted spec labels, panel metadata, and footer stats. Body copy is frequently dimmed via opacity (text-cream/70, /85, /60).

Hairlines. Structure is drawn with rgba(240,233,215,.10) borders between sections/panels, rgba(240,233,215,.15) around bordered spec cells, and a steel #8A8E92 1px rule/dash/tick family (rules at ~.35 opacity, dashed rules at 8px dash size).

Glass. Commission option cards use glass: fill rgba(240,233,215,.06), border rgba(240,233,215,.12), backdrop-filter: blur(8px); on hover the fill rises to .10 and the border turns ember rgba(182,74,42,.5).

Gradient / Glow. warm-light is a top radial of rgba(182,74,42,.25) behind the hero and commission. ember-glow is 0 0 0 1px rgba(182,74,42,.4), 0 0 40px rgba(182,74,42,.25); the CTA hover glow extends to 0 0 60px rgba(182,74,42,.55). Backgrounds layer black gradients (from-black/80 via-black/10 to-black/40) and the hero vignette (transparent 40% → rgba(0,0,0,.65)).

Typography

Three families, all loaded from Google Fonts via one @import: Fraunces (variable optical-size serif, the display face), Shippori Mincho (a Japanese serif used for kanji, knife sub-names, and quoted voice), and Inter (body and the tracked micro-label). Fraunces uses font-feature-settings: 'ss01' on figure numbers. No bespoke fonts — all three are open-source.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(6rem, 22vw, 22rem) / 5xl–7xl	500	leading-none / 1.05	-0.02em (hero -0.04em)	Fraunces hero wordmark, section H2s, big stat numerals
mincho	30px (text-3xl), up to 7xl kanji	400–800	1.5–1.6	0.3em–0.4em on tracked headers	Japanese kanji, knife sub-names, pull-quotes
body	15px	300–400	1.6–1.9	normal	Inter essay/spec/description copy
label	11px	500	normal	0.25em	uppercase micro-labels, indices, metadata

Layout

Base unit 4px on the Tailwind scale; section vertical rhythm is py-32 (128px). Content sits in max-w-7xl mx-auto px-8 (and a wider max-w-6xl intro). The page is a vertical sequence of full-bleed sections: a h-screen hero, a commission configurator on a 12-col grid (3 / 6 / 3) around a circular center stage, the pinned horizontal Collection (h-screen track of seven w-screen 12-col panels alternating 7/5 and 5/7), a 3-column Forge photo essay over wood texture, a two-pane cream Care section that snaps to full height, a manifesto intro with a giant low-opacity background kanji, and a 12-col footer with a scrolling marquee. The signature structural moves: the giant clip-revealed wordmark, the horizontal-scroll knife gallery with vertical-rl names, and the tonal flip to cream in Care. Whitespace is generous and confident; the eye is led by ember indices and hairline rules.

Elevation & Depth

There are almost no drop shadows. Depth is built from: (1) layered black/vignette gradients over imagery; (2) procedural textures — wood-tex (repeating linear grain + radial darkening over walnut) and paper-tex (subtle radial flecks over cream); (3) the warm ember radial light blooms; and (4) glow effects — ember-glow (1px ember ring + 40px ember glow) and the CTA's 60px hover glow with an inset cream hairline. glass cards add a single backdrop-blur(8px) plane. Borders and rules — not shadows — separate everything.

Shapes

Effectively a sharp-cornered system: rounded.none (0px) is the default and all cards, panels, spec cells, and the CTA are square. rounded.full (9999px) is reserved for genuine circles and pills — the commission circular stage rings, the care 手入 badge, live-status dots, and the expanding click ripples. The visual rhythm is carried by 1px hairlines, dashed rules (dash, 8px), tick marks (tick 8px / tick-lg 14px), and a vertical gradient divider.

Components

• Navbar — fixed, transparent, mix-blend-difference; Mincho wordmark 鍛冶屋 · KAJIYA tracking-[0.3em], Inter label nav links, ember status dot.
• Glass option card — fill rgba(240,233,215,.06), border .12, blur(8px), 16px padding, square; Mincho title + steel label subtitle; hover → ember border.
• CTA button — full-width ember fill, cream text, 1px cream/.2 border, 32px padding, square; Fraunces "Begin Your Commission →"; cta-glow + ripple on click.
• Spec grid — 120px / 1fr two-column grid, 14×28px gaps; steel label keys, cream values, tabular-nums for measurements.
• Spec cell — bordered (cream/.15) square box, ember caption + Mincho value.
• Knife panel — full-viewport 12-col, char spec side + walnut video well; vertical-rl ember name text-[12vw], animated SVG blade diagram.
• Stat block — large Fraunces numeral (with ember accents) over a steel label caption, used in intro and care footers.
• Care badge — 64px cream circle, char/.20 border, Mincho 手入.
• Marquee — footer cream/40 label strip animating translateX over 40s.

Motion

GSAP + ScrollTrigger drive everything. Hero: a 1.6s clipPath wipe (inset(0 100% 0 0) → inset(0)) with the wordmark rising yPercent 80→0 over 1.4s (delay 0.6s) and the image parallax-scaling to 1.18 on scroll. The Collection is a pinned horizontal scroll (scrub: 1) of all seven panels with snap to 1/(panels.length-1); inside each, SVG blade diagrams draw via stroke-dashoffset 1→0 keyed to the horizontal containerAnimation. Section headings and .font-display elements reveal with y 40→0, opacity 0→1 at top 85%. Care panes expand on hover (flex → 1.4 for the hovered side, 0.6 for siblings, 0.6s power3.out). Commission options and the CTA emit a scaling ember/cream ripple on click (and a small x-wobble on options). The footer marquee loops translateX -50% over 40s linear. A no-tw-transition utility exists to disable Tailwind transitions where GSAP owns motion.

Iconography

Mixed sources. Primary decorative glyphs are game-icons (lorc zigzag-tune, sbed water-drop) pulled from jsDelivr as solid SVG silhouettes and recolored to ember via CSS filter (invert/sepia/saturate/hue-rotate). A single Tabler glyph (ti ti-shield, 32px, walnut) appears in Care. The remaining marks are inline SVG — the nav logo and the directional/scroll arrows — drawn with thin 1–1.2px cream/steel strokes. Sizes run 16–40px. Icons are mostly decorative accents and section markers, not a dense UI icon set.

Do's and Don'ts

• Do keep char #1B1814 as the dominant ground and let ember #B64A2A be the only accent — one voltage, used sparingly for indices, rules, dots, and glow.
• Do carry structure with hairlines, dashed rules, and ticks; keep corners square except for true circles and pills.
• Do pair Fraunces (display), Shippori Mincho (Japanese/quote), and Inter (body + 0.25em tracked labels), and use tabular-nums for specs.
• Do build depth from texture, vignette, warm light, and glow — not drop shadows.
• Don't introduce a second accent color or round off the cards/CTA/panels.
• Don't flatten the tonal flip — Care must stay light cream against the dark.
• Don't drop the GSAP motion (hero wipe, horizontal pin, diagram draw); the layout reads as static without it.

Known Gaps

• The hero wordmark size is a fluid clamp(6rem, 22vw, 22rem); the recorded fontSize is that clamp, with section H2s ranging text-5xl–7xl.
• Body/heading colors are frequently applied at fractional opacity (text-cream/70, /85, /60); tokens record the base hexes, not every alpha.
• Procedural textures (wood-tex, paper-tex, vignette, warm-light) are multi-layer CSS gradients summarized by role, not reproduced layer-for-layer.
• Icon ember color from game-icons is achieved via a CSS filter chain approximating #B64A2A, not a literal fill value.