name: resonate-design
version: alpha
description: >
  A dark stained-glass festival site for "Verre Vivant." The surface is near-black
  lead (`#131113`); four saturated "voltages" — ultramarine (`#1F3E99`), ruby
  (`#A2283A`), emerald (`#2E6C4C`) and ochre (`#D79A35`) — burn through warm cream
  (`#F2E8D4`) text and 4px lead borders that turn every grid cell into a leaded
  pane. The type story pairs an optical Fraunces serif (display, often italic) with
  Inter for body copy and a tracked-out Bebas Neue for stage/label captions. The
  signature moves: a fractured 12-column "window" hero of colored panes with
  hover-reveal labels, gem-cut clip-path slices, SVG film grain, a marquee strip,
  and a horizontally scrolling timeline of glowing program strips.
colors:
  # Brand / Voltages
  ultra: '#1F3E99'    # ultramarine pane fill, Nave stage, timeline strips, accents
  ruby: '#A2283A'     # ruby pane fill, Crypt stage, Food panel, logo facet
  emerald: '#2E6C4C'  # emerald pane fill, Spire stage, Camping panel
  ochre: '#D79A35'    # ochre/gold accent + pane fill, CTA buttons, live dot, links
  # Surface
  lead: '#131113'     # page background, 4px leaded borders, dark button fills
  # Text
  cream: '#F2E8D4'    # primary text on dark, light pane fills (Cloister/newsletter)
  # Hairlines (cream at low alpha)
  hairline-strong: 'rgba(242,232,212,0.10)'  # 4px section dividers (cream/10)
  hairline-soft: 'rgba(242,232,212,0.20)'    # lineup row underlines (cream/20)
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(34px, 3.8vw, 54px)
    fontWeight: 600
    lineHeight: 0.88
  display-italic:
    fontFamily: "'Fraunces', serif"
    fontSize: 64px
    fontWeight: 300
    lineHeight: 1
  heading:
    fontFamily: "'Fraunces', serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.1
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.6
  caption:
    fontFamily: "'Bebas Neue', sans-serif"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.18em
    textTransform: uppercase
rounded:                  # the system is sharp — corners are square everywhere
  none: 0px
  full: 9999px            # only the live-status dot and timeline axis dots
spacing:                  # base unit 4px; grid gutters are 1px (gap-1)
  hair: 1px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 40px
  xxl: 80px
components:
  primaryButton:
    backgroundColor: '{colors.ochre}'
    textColor: '{colors.lead}'
    typography: '{typography.caption}'
    rounded: '{rounded.none}'
    border: '2px solid {colors.lead}'
    padding: '10px 20px'
    label: 'BUY TICKETS →'
  lightButton:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.lead}'
    typography: '{typography.caption}'
    rounded: '{rounded.none}'
    border: '2px solid {colors.lead}'
    padding: '10px 16px'
    label: '★ FULL LINEUP'
  ghostButton:
    backgroundColor: transparent
    textColor: '{colors.cream}'
    typography: '{typography.caption}'
    rounded: '{rounded.none}'
    border: '2px solid {colors.cream}'
    padding: '10px 16px'
    label: '▸ PLAY TRAILER'
  darkButton:
    backgroundColor: '{colors.lead}'
    textColor: '{colors.cream}'
    typography: '{typography.caption}'
    rounded: '{rounded.none}'
    padding: '12px 24px'
    label: 'RESERVE A PANE →'
  pane:
    backgroundColor: '{colors.ultra}'   # one of the four voltages per cell
    textColor: '{colors.cream}'
    rounded: '{rounded.none}'
    border: '4px solid {colors.lead}'   # .leaded
    note: 'radial highlight + inset glow overlays; hover slides .label up'
  stageColumn:
    backgroundColor: '{colors.ultra}'   # voltage per stage; Cloister is cream/ochre
    textColor: '{colors.cream}'
    rounded: '{rounded.none}'
    border: '4px solid {colors.lead}'
    padding: '20px'
  practicalPanel:
    backgroundColor: '{colors.ultra}'   # voltage per panel
    textColor: '{colors.cream}'
    rounded: '{rounded.none}'
    border: '4px solid {colors.lead}'
    padding: '24px to 32px'
    note: 'SVG grain overlay; Tabler icon top-left'
  timelineStrip:
    backgroundColor: '{colors.ultra}'   # matches its stage voltage
    textColor: '{colors.cream}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    border: '2px solid {colors.lead}'
    note: '.glow-strip inset glow; absolute-positioned by left/width %'
  newsletterInput:
    backgroundColor: transparent
    textColor: '{colors.lead}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    border: '2px solid {colors.lead}'   # on the form wrapper
    padding: '12px 16px'
motion:
  pane-reveal: 'GSAP ScrollTrigger: panes fade + scale .92→1, .7s power3.out, staggered (i%6)*0.04s'
  heading-reveal: 'GSAP: h2 y:40→0 + fade, .8s power3.out at top 85%'
  label-slide: 'CSS: .label translateY(110%)→0 on pane hover, .5s cubic-bezier(.7,.05,.2,1)'
  tint-fade: 'CSS: colored multiply tint opacity→.35 on hover, .6s ease'
  marquee: 'CSS: translateX(-50%) loop, 40s linear infinite (.marquee)'
  pulse: 'CSS: brightness(1)→1.25, 1.6s ease-in-out infinite alternate (live dot + strip)'
  scroll: 'Lenis smooth scroll, autoRaf, synced to ScrollTrigger'
icons:
  library: Tabler Icons (webfont, ti)
  style: outline
  sizes: { md: 'text-3xl/4xl', lg: 'text-5xl' }
  color: '{colors.cream}'
  note: 'ti-music, ti-ticket, ti-bus, ti-tent, ti-coffee; ★ ▸ ● glyphs as decorative marks'

Resonate

resonate-design · alpha

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

Overview

Resonate is the design system behind Verre Vivant, a fictional Utrecht festival for the borderlands of jazz, contemporary classical and electronic music. The whole page is a stained-glass window: a near-black lead surface (#131113) carved into grid cells, each filled with one of four saturated "voltage" pigments — ultramarine #1F3E99, ruby #A2283A, emerald #2E6C4C, ochre #D79A35 — and separated by chunky 4px lead borders (.leaded). Warm cream (#F2E8D4) carries every word. The display face is an optical Fraunces serif (often italic and light for poetic lines like "fractured" and "in glass strips."), body copy is Inter, and all stage names, panel labels and meta captions are a tightly tracked, uppercase Bebas Neue sprinkled with ★, ▸ and ● glyphs. The signature moves are the fractured 12-column hero of colored panes with hover-reveal labels, gem-cut clip-path slices (triangles, trapezoids, diagonals), a fine SVG fractal-noise grain laid over panels, a looping marquee strip, and a horizontally scrollable schedule built from glowing program strips pinned by percentage. Everything is square-cornered and hard-edged — the only round things are the live-status dot and the timeline's diamond axis markers.

Colors

Brand / voltages. Four pigments do all the chromatic work, each tied to a stage and reused across the page: ultra #1F3E99 (ultramarine — The Nave / jazz), ruby #A2283A (The Crypt / electronic, Food panel, logo facet), emerald #2E6C4C (The Spire / classical, Camping panel), and ochre #D79A35 (The Cloister / crossover, and the universal accent — CTA buttons, links on hover, the live dot, the highlighted ticket tier). They appear as solid pane fills via inline style="background:var(--…)" and as multiply tints over photo/video panes.

Surface. lead #131113 is the page background, the 4px leaded border between every pane, and the fill of dark buttons and the subscribe input's button.

Text. cream #F2E8D4 is the primary text color on the dark surface and also serves as a light pane fill (the Cloister stage, the newsletter copy pane, the tickets panel), where text flips to lead.

Hairlines. Section dividers are 4px borders in cream/10 (rgba(242,232,212,0.10)); lineup list rows are underlined in cream/20–cream/25; the timeline ruler uses cream/15. There is no separate gray — every neutral is cream at low alpha.

Typography

Three Google-Fonts families, imported in one @import: Fraunces (opsz 9–144, weights 300/400/600/800/900 — the variable optical serif, set with font-variation-settings:"opsz" 144), Inter (300/400/500/600), and Bebas Neue. Fraunces is the bespoke optical face; if substituting, any high-contrast modern serif with an italic works, but the optical-size axis is part of the look. Bebas Neue is the all-caps "stage" voice and is always tracked at .18em.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(34px,3.8vw,54px)	600	0.88	tight	Hero headline ("Light, fractured into sound.")
display-italic	44–64px	300–400	~1	tight	Section h2s, poetic italic lines, big wordmarks
heading	18–28px	600	1.1	tight	Pane titles, stage names, panel headlines
body	13px	400	1.6	—	Inter paragraphs, descriptions, footer links
caption	10–14px	400	—	0.18em, UPPERCASE	Bebas Neue stage labels, meta, buttons, section indices

Layout

Base spacing unit is 4px; the hallmark is a 1px grid gutter (gap-1) over a lead background so the gaps read as lead came between panes. The page is a stack of full-bleed sections divided by 4px cream/10 borders: a top nav + marquee strip; a fractured 12-column hero grid (grid-cols-12, col-span/row-span cells sized to calc(100svh - 112px)) of colored panes mixing video, image and type; a 4-up "By Stage" grid (640px tall); a horizontally scrollable schedule on a grid-cols-[120px_repeat(36,…)] ruler with min-width:1400px; a 4×2 "Practicals" bento (2×2 tickets, 1×1 transport/camping, 2×1 food); a 12-column newsletter row (4/5/3 split); and a 12-column footer. Content padding is px-6 md:px-10 with py-20 section rhythm. Whitespace is dense and editorial — the design fills the window edge-to-edge rather than centering in a narrow column.

Elevation & Depth

There are no drop shadows in the conventional sense. Depth comes from: the 4px lead borders that frame every pane; .pane::after inset glows (inset 0 0 60px rgba(255,255,255,.18) plus a 1px inner cream stroke); a .pane::before radial white highlight set to mix-blend-mode:overlay; .glow-strip inset glow on timeline strips (inset 0 0 30px rgba(255,255,255,.25)

• a 3px lead ring); and text-shadow on hero/feature headlines (0 2px 16px–20px rgba(0,0,0,.35–.5)). Layered SVG fractal-noise grain (.grain, opacity .18, overlay blend) sits over the stage and practicals panels for a painted-glass texture.

Shapes

The system is deliberately sharp: border-radius is effectively 0 everywhere. The expressive geometry instead comes from clip-path cuts — angled slices (.slice-clip-1…4), triangles (.tri-up/.tri-dn), trapezoids (.trap-l/.trap-r) and diagonals (.diag-l/.diag-r) — that fracture certain panes into faceted glass shards. The only curves are rounded-full: the pulsing live-now dot and the timeline's small diamonds (which are themselves squares rotated 45°).

Components

• Primary button — ochre fill, lead text, 2px lead border, square, Bebas caption; hover → cream fill (BUY TICKETS →).
• Light / ghost buttons — cream fill or transparent-with-cream-border, 2px borders, square (★ FULL LINEUP, ▸ PLAY TRAILER).
• Dark button — lead fill, cream text, no border (RESERVE A PANE →, SUBSCRIBE ★).
• Pane — .leaded 4px lead border, voltage fill, inset glow + radial highlight overlays; hover slides a gradient .label (caption + serif title) up from the bottom and dims the color tint.
• Stage column — full-height voltage panel, 4px-lead-bordered header block, then a serif lineup list with cream/20 row dividers; Cloister inverts to cream/ochre with lead text.
• Practical panel (bento) — grain-textured voltage card, 24–32px padding, a large Tabler icon top-left and a Roman-numeral tag top-right, Bebas kicker + Fraunces headline + Inter copy.
• Timeline strip — .glow-strip, 2px lead border, voltage fill matching its stage, absolutely positioned by left/width percentages on a cream/5 track; lower-priority acts set to opacity:.7–.85.
• Newsletter form — 2px lead-bordered wrapper, transparent input with lead/40 placeholder, inline dark subscribe button.
• Marquee — repeated Bebas spans with ★ separators scrolling left.

Motion

GSAP + ScrollTrigger drive scroll reveals, with Lenis providing smooth scrolling (autoRaf, synced to ScrollTrigger.update). Panes fade in and scale from .92 (.7s power3.out) with a staggered (i%6)*0.04s delay; section h2s rise y:40→0 while fading (.8s power3.out). CSS handles the interactions: pane .label slides from translateY(110%) to 0 over .5s cubic-bezier(.7,.05,.2,1) on hover, the color tint eases to opacity:.35 over .6s, the marquee loops translateX(-50%) over 40s linear, and .pulse cycles brightness(1→1.25) over 1.6s (live dot + "playing now" timeline strip).

Iconography

Tabler Icons via the webfont (<i class="ti ti-…">), outline style, cream-colored, used in the practicals panels at text-3xl–text-5xl (ti-music, ti-ticket, ti-bus, ti-tent, ti-coffee). Beyond the icon font, typographic glyphs do heavy decorative lifting: ★ (festival mark, list bullets), ▸ (play), ● (live / stage-color dots), ↔/→ (scroll & action arrows). The logo is an inline SVG pentagon split into colored facets — one per voltage — echoing a stained-glass panel.

Do's and Don'ts

• Do keep the 1px grid gutters over a lead background so gaps read as leading.
• Do wrap colored cells in the 4px .leaded border — it's the structural motif.
• Do tie each voltage to its stage and reserve ochre as the universal accent.
• Do set all-caps labels in Bebas Neue at .18em and keep poetic display lines in italic light Fraunces.
• Don't introduce border-radius on panes, buttons or cards — the system is square.
• Don't add real drop shadows; depth comes from inset glows, borders and grain.
• Don't dilute the four-voltage palette with extra hues or grays — neutrals are cream at low alpha.

Known Gaps

• Tailwind utility class sizes (text-3xl, text-5xl, text-2xl, etc.) are rendered by the Tailwind v4 browser CDN; the px values for icon and some heading sizes are the framework defaults, not authored inline.
• The letterSpacing for nav links / headings beyond Bebas (tracking-wide, tracking-tight) uses Tailwind defaults and is approximated.
• The SVG grain and radial-highlight overlays are described by their CSS, not a baked-in raster; exact perceived texture depends on blend modes at render time.
• The clip-path slice classes (.slice-clip-*, .tri-*, .trap-*) are defined in CSS; only .diag-l and .trap-l are actually applied in the markup.