name: y-gen-design
version: alpha
description: >
  Yūgen is an editorial wabi-sabi landing page for a fictional Kyoto ceramics
  studio. It sits on a warm oat `cream` (#EAE0C8) surface and works in earthy
  pigments — charcoal `char` (#1E1A16), clay (#C4A585), pine (#5A6C54) — with a
  single luminous `gold` (#B18844) as the kintsugi accent that mends every seam,
  link, and price. The type story is all serif: an optical Fraunces display at
  enormous sizes (14vw hero) paired with a Lora body, leaned into italics for
  measurements and asides. Signature moves are physical and slow: a pinned hero
  whose bowl zooms to fill the screen while a gold SVG crack draws across it,
  skew-on-scroll imagery, magnetic buttons, a custom gold cursor, fractal-noise
  grain overlays, and torn-paper image masks. Geometry is mostly raw rectangles
  with full pills for the two buttons; nothing else is rounded.
colors:
  # Brand / Accent
  gold: '#B18844'        # the kintsugi voltage — links, prices, eyebrows, accent italics, cursor, button fill
  gold-bright: '#D9B26A' # lighter gold used mid-stop in the hero crack gradient
  # Surface
  cream: '#EAE0C8'       # primary page surface; collection + gallery backgrounds; light text on dark sections
  char: '#1E1A16'        # charcoal — headings, body text on cream, and the dark philosophy/footer surface
  clay: '#C4A585'        # warm clay — the workshops section background and input underline
  pine: '#5A6C54'        # muted pine green — the commissions section background
  # Text (tints of char / cream via Tailwind opacity)
  text-muted: 'rgba(30,26,22,0.60)'  # char/60 — captions, secondary copy on cream
  text-soft: 'rgba(234,224,200,0.85)' # cream/85 — body copy on dark surfaces
  # Hairlines
  hairline: 'rgba(30,26,22,0.20)'    # char/20 — workshop list row dividers
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: 14vw          # hero word; ranges down to text-2xl in cards
    fontWeight: 300
    lineHeight: 0.9
  display-section:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(3rem, 8vw, 6rem)  # section headings (text-5xl → text-8xl)
    fontWeight: 400
    lineHeight: 0.92
  body:
    fontFamily: "'Lora', Georgia, serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.85
  meas:
    fontFamily: "'Lora', serif"
    fontSize: 14px
    fontWeight: 400
    fontStyle: italic       # measurements / asides, rendered in gold
  eyebrow:
    fontFamily: "'Lora', serif"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 4.4px     # .4em
    textTransform: uppercase
rounded:                      # mostly sharp; pills only on buttons + hero bowl
  none: 0px
  full: 9999px
spacing:                      # base unit 4px; section rhythm in 8px multiples
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  section: 128px              # py-32, scaling to py-48 (192px) on md
components:
  nav:
    backgroundColor: transparent
    textColor: '{colors.cream}'
    typography: '{typography.eyebrow}'
    padding: '24px 56px'
    note: 'fixed top bar, mix-blend-difference so it inverts over any surface'
  eyebrow-label:
    textColor: '{colors.gold}'
    typography: '{typography.eyebrow}'
  bowl-card:
    backgroundColor: transparent
    textColor: '{colors.char}'
    typography: '{typography.display-section}'
    rounded: '{rounded.none}'
    note: 'image in aspect-ratio frame, skews on scroll + scales 1.05 on hover; name in Fraunces, price in gold'
  liquid-button:
    backgroundColor: '{colors.char}'
    textColor: '{colors.cream}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.full}'
    padding: '20px 40px'
    note: 'spinning conic-gradient gold ring behind a char pill; label "Book a Wheel →"'
  send-button:
    backgroundColor: '{colors.gold}'
    textColor: '{colors.char}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.full}'
    padding: '0'
    note: '220×56px pill; morphs to a 64px circle with a drawing checkmark on click; label "Send Inquiry →"'
  input-line:
    backgroundColor: transparent
    textColor: '{colors.cream}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    padding: '14px 4px'
    note: 'bottom-border only (2px clay), focus turns border gold; used in the commission form'
motion:
  hero-pin: 'Pinned hero (ScrollTrigger scrub): gold crack draws (strokeDashoffset 2200→0), bowl scales to 9× and un-rounds, section fades out'
  line-clip: 'Heading lines wipe up from translateY(120%) to 0 over .9s cubic-bezier(.2,.7,.2,1), staggered 90ms via --i'
  stagger-reveal: '[data-stagger] fades + rises 40px over 1.1s ease, staggered 120ms via --i, triggered by IntersectionObserver'
  skew-on-scroll: 'Images skewY by --skew (clamped ±6deg) driven by Lenis scroll velocity, .15s ease-out'
  magnetic: 'Buttons follow the cursor 25% (power3.out) and spring back via elastic.out on leave'
  liquid-spin: 'Conic-gradient gold ring rotates 360deg over 4s linear infinite behind the liquid button'
  horizontal-gallery: 'Gallery pins and translates its track horizontally on scroll (GSAP, scrub:1)'
  philosophy-crossfade: 'Sticky right-side image stack cross-fades between 3 figures across the section scroll (scrub:0.6)'
  cursor: 'Custom gold ring (lerp 0.15, mix-blend-difference) + solid dot follow the pointer; native cursor hidden'
icons:
  library: inline SVG (no icon font)
  style: hand-drawn line motifs — squiggle dividers, kintsugi crack, torn-paper masks; arrow glyphs (→ ↓) set in type
  stroke: 1.2px–2.5px
  color: '{colors.gold}'

Yūgen

y-gen-design · alpha

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

Overview

Yūgen is a wabi-sabi editorial landing page for a fictional Kyoto wood-fired ceramics studio, and every choice serves a single feeling: slowness, asymmetry, and beauty in the broken. The whole site rests on a warm oat cream (#EAE0C8) surface dusted with a multiply-blend fractal-noise grain overlay, against which sit deep char charcoal (#1E1A16), warm clay (#C4A585), and a muted pine (#5A6C54) for full-bleed section backgrounds. The one voltage is gold (#B18844) — the kintsugi gold that mends cracked pottery — and it appears everywhere a "seam" should glow: links, prices, eyebrow labels, italic measurements, the custom cursor, the send button, and a literal SVG crack that draws across the hero. Typography is unapologetically serif: an optical Fraunces display (SOFT axis, light weight 300) scaled to a colossal 14vw for the hero word and text-8xl for section heads, paired with Lora for body and italic asides. The signature moves are tactile and scroll-driven — a pinned hero whose round bowl zooms to 9× and squares off as the gold crack completes, images that skew with scroll velocity, magnetic springy buttons, a horizontal pinned gallery, a sticky cross-fading philosophy stack, and torn-paper masked images. Geometry is deliberately raw: rectangles everywhere, with full pills reserved only for the two buttons and the hero bowl.

Colors

Brand / Accent. gold (#B18844) is the only accent and carries all emphasis: eyebrow section numerals, prices ($140, $220), accent italics, the form labels, the underlined email, the send-button fill, and the cursor. A lighter gold-bright (#D9B26A) appears only as the middle stop of the hero crack's linear gradient (alongside two transparent #B18844 stops).

Surface. cream (#EAE0C8) is the page background and the text color on dark sections. char (#1E1A16) does double duty — it's the heading/body ink on cream and the full-bleed background of the Philosophy and Footer sections. clay (#C4A585) backs the Workshops section and forms input underlines. pine (#5A6C54) backs the Commissions section.

Text. Body and muted text are tints rather than separate hexes: char/60 (≈rgba(30,26,22,.60)) for captions and secondary copy on cream, and cream/85 (≈rgba(234,224,200,.85)) for body copy on dark surfaces. Footer fine print drops to cream/40.

Hairlines. The only rules are char/20 row dividers in the workshop pricing list; there are no box borders elsewhere.

Typography

Two Google Fonts, both serifs, imported at the top of the stylesheet. Fraunces (ital,opsz,wght axes, with font-optical-sizing:auto and a SOFT 100 variation) is the display face — used light (300) and huge in the hero, and at 400 with frequent italics for section heads. Lora (with Georgia, serif fallback) is the body and "measurement" face. There is no sans-serif and no mono; italic Lora in gold is the recurring "meas" treatment for dimensions (∅ 12·8 cm), prices of time, and poetic asides. The eyebrow is Lora at 11px, uppercase, with a wide .4em track.

Token	Size	Weight	Line-height	Tracking	Usage
display	14vw	300	0.9	.32em (tracking-mega)	Hero "YŪGEN", footer logo
display-section	clamp 3–6rem (text-5xl→8xl)	400	0.92	—	Section headings, card names
body	15px	400	1.85	—	Paragraph copy
meas	14px	400 (italic)	—	—	Measurements, asides, prices-of-time (gold)
eyebrow	11px	400	—	.4em uppercase	Section numerals, nav links, captions, form labels

Layout

Base unit is 4px; section vertical rhythm is py-32 (128px) scaling to py-48 (192px) on md, with horizontal px-6→px-14 (24→56px) gutters. The page is a sequence of full-viewport scroll scenes rather than a single column: a h-screen hero, an irregular 12-column collection grid where bowls are offset with md:col-start-* and md:mt-* so no two align, a split Philosophy section with scrolling prose left and a sticky cross-fading image stack right, a Workshops section pairing a pricing list with a 2-column torn-paper image mosaic, a 100vh horizontally-scrolling pinned Gallery, and a Commissions form on pine. There's no fixed max-width container — content breathes edge to edge, and whitespace is generous and intentional (large gap-y-24, mb-20).

Elevation & Depth

This system avoids conventional cards and shadows. Depth comes from: the fractal-noise grain pseudo-element (opacity .35, multiply blend) on the hero, workshops, and commissions; one large soft shadow on the hero bowl (0 60px 120px -30px rgba(30,26,22,.5)); mix-blend-difference on the nav, cursor ring, and image-corner labels so they invert over whatever passes beneath; and torn-bottom SVG masks that give workshop images a hand-ripped lower edge. Color-block section backgrounds (char, clay, pine) supply the rest of the layering.

Shapes

Sharp by default. Images sit in raw rectangular aspect-[*] frames with no radius; dividers are hand-drawn squiggle SVGs. The only curves are rounded-full pills: the hero bowl (a perfect circle that scroll-morphs to a square), the "Book a Wheel" liquid button, and the "Send Inquiry" button (which morphs from a 220px pill to a 64px circle on submit). The cursor ring and dot are also circles.

Components

• Nav — transparent fixed bar, mix-blend-difference, eyebrow-style links; brand "Yūgen · Est. 2014" left, "Kyoto / 京都" (italic gold) right.
• Eyebrow label — gold, uppercase, .4em track; carries Roman section numerals ("I — The Collection").
• Bowl card — no fill/border; rectangular image frame that skews on scroll and scales 1.05 on hover; Fraunces name, char/60 spec line, gold meas line, gold price, "acquire" eyebrow.
• Liquid button — char pill with a spinning conic-gradient gold ring behind it; cream Fraunces uppercase label "Book a Wheel →".
• Send button — solid gold pill (220×56px), char label "Send Inquiry →"; morphs to a 64px circle revealing a drawing char checkmark on click.
• Input line — transparent, 2px clay bottom-border only, cream Lora text, 14px/4px padding; border turns gold on focus. Labels are gold eyebrows numbered "01 — Your name".
• Squiggle divider — full-width hand-drawn sine SVG in gold at .7 opacity.
• Workshop price row — flex row, char/20 bottom hairline, plain label left + gold italic meas right.

Motion

Motion is the centerpiece, built on GSAP + ScrollTrigger + Lenis smooth scroll (duration 1.4). The hallmark is the pinned hero: as you scroll, the gold crack draws (strokeDashoffset 2200→0), the bowl scales to 9× and un-rounds from a circle to a square, and the whole section fades. Headings wipe up line-by-line (.line-clip, .9s cubic-bezier(.2,.7,.2,1), staggered 90ms); [data-stagger] blocks fade and rise 40px (1.1s, staggered 120ms). Images skew by up to ±6° based on scroll velocity; buttons are magnetic (follow cursor 25%, elastic spring-back); the gold ring spins (4s linear); the gallery pins and scrolls horizontally; the philosophy stack cross-fades 3 images on scrub. A custom gold cursor (lerped ring

• dot) replaces the native one. Failsafe timeouts force content visible after a few seconds in case observers don't fire.

Iconography

No icon font. All marks are inline SVG hand-drawn motifs: the gold kintsugi crack across the hero, sine-wave squiggle dividers, the torn-paper image masks, and the checkmark inside the send button. UI directionality is conveyed with typographic arrows (→, ↓) set in the text, and Japanese characters (京都, 一椀ずつ, 寸) used decoratively. Stroke weights run 1.2px (squiggles) to 2.5px (checkmark); accent color is gold.

Do's and Don'ts

• Do keep gold rare and meaningful — it's the kintsugi seam, used for emphasis, prices, and accents, never for large fills beyond the one button.
• Do stay all-serif: Fraunces for display, Lora for body, italics for asides.
• Do lean into asymmetry — offset the collection grid, vary aspect ratios, let images skew and tear.
• Do preserve the grain, mix-blend-difference labels, and the custom cursor; they carry the tactile, analog mood.
• Don't introduce sans-serif type, bright saturated colors, or drop shadows on cards — depth here is grain, blend modes, and color blocks.
• Don't round corners except the two buttons and the hero bowl; the rectangular rawness is the point.
• Don't speed up or remove the slow scroll motion — the pacing is the wabi-sabi.

Known Gaps

• Text colors char/60, cream/85, cream/40, and the char/20 hairline are Tailwind opacity utilities; the rgba values listed are computed approximations of those tints over their surfaces.
• display-section size is given as a clamp(3rem,8vw,6rem) approximation of the Tailwind text-5xl md:text-7xl/8xl responsive jumps actually used.
• Spacing tokens are inferred from the Tailwind classes present (py-32/48, gap-y-24, px-6/14); there is no authored token scale in the HTML.
• The hero crack gradient and grain noise are SVG/data-URI effects; their exact rendered appearance depends on the browser's filter implementation.