name: st-aldwyn-s-design
version: alpha
description: >
  A candlelit cathedral-choral-school landing page rendered in deep pine-teal
  (`#0E1B1C`) with warm vellum interludes (`#F4ECDB`). Ecclesiastical serif
  display (Italiana / Marcellus) is paired with a monospaced eyebrow voice
  (JetBrains Mono, wide tracking, uppercase) and Inter Tight body. The amber
  voltage (`#E08A1E`) and a brass hairline (`#C9A24B`) carry CTAs, accents, and
  rules, with violet and teal as liturgical secondary tones. Signature moves:
  a full-bleed hero video with blur-in word reveal, an eight-panel sticky-stacked
  "Lancets" curriculum, a Roman-numeral typographic system, a hover-darkening
  bento, a cursor-tracked faculty preview, and a hand-drawn SVG footer rule that
  draws itself. Geometry is almost entirely sharp-edged — square cards, square
  buttons, square chips — the only curves being the lancet-window faculty preview
  and circular audition dots.
colors:
  # Surface
  bg: '#0E1B1C'           # primary deep pine-teal page surface (hero, ens, footer)
  vellum: '#F4ECDB'       # warm parchment surface for calendar + faculty sections
  ink: '#1A2426'          # near-black text/borders on vellum surfaces
  # Text
  ivory: '#F1E9D6'        # primary body/heading text on dark surfaces
  ink-muted: '#3b4648'    # muted slate text on vellum (bios, secondary)
  violet-body: '#d8cae6'  # body copy inside the violet visit panel
  violet-quote: '#bfa9d6' # italic quote inside visit panel
  # Brand / Voltage
  amber: '#E08A1E'        # primary accent — CTA fill, eyebrows, headings, hover, focus
  brass: '#C9A24B'        # secondary metallic — hairlines, mono labels, footer brand
  amber-dark: '#b06a12'   # darker amber for "advent" calendar event titles on vellum
  amber-ink: '#241402'    # near-black brown text on amber button/dots
  # Liturgical secondary
  teal: '#0E5C5A'         # teal accent — calendar event titles, tile/photo fallbacks
  violet: '#4B2E6B'       # violet — visit section bg, calendar event titles, eyebrows
  # Hairlines / overlays
  brass-hairline: 'rgba(201,162,75,.45)'  # chip + footer borders on dark
  ink-hairline: 'rgba(26,36,38,.18)'      # rules/borders on vellum
  ivory-hairline: 'rgba(241,233,214,.25)' # rules inside dark panels (pstats)
  # Gradient
  hero-bg-gradient: 'linear-gradient(160deg, #15282a, #0a1314)'  # hero fallback bg
  hero-overlay: 'linear-gradient(to bottom, rgba(14,27,28,.34) 0%, transparent 32%, transparent 60%, rgba(14,27,28,.42) 100%)'  # hero scrim
typography:
  display:
    fontFamily: "'Italiana', serif"
    fontSize: clamp(48px, 8vw, 112px)
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0.03em
  heading:
    fontFamily: "'Marcellus', serif"
    fontSize: clamp(40px, 5vw, 64px)
    fontWeight: 400
    lineHeight: 1.05
  body:
    fontFamily: "'Inter Tight', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  mono:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 0.2em
    textTransform: uppercase
  eyebrow:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.28em
    textTransform: uppercase
rounded:                  # almost entirely square; pills/circles are the exception
  none: 0px
  sm: 6px
  dot: 50%
  lancet: '50% 50% 6px 6px/35% 35% 6px 6px'   # faculty preview window shape
spacing:                  # base unit 2px; common steps below
  xs: 4px
  sm: 8px
  md: 14px
  lg: 18px
  xl: 24px
  xxl: 48px
  section: 120px          # vertical section padding
components:
  button:
    backgroundColor: '{colors.amber}'
    textColor: '{colors.amber-ink}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '18px 34px'
    # uppercase, .18em tracking, 13px; click ripple + translateY(-2px) hover
  link-amber:
    textColor: '{colors.amber}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    border: '1px solid rgba(224,138,30,.5) (bottom only)'
    # 12px uppercase text link with amber underline
  chip:
    backgroundColor: 'rgba(14,27,28,.35)'
    textColor: '{colors.ivory}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.none}'
    padding: '8px 14px'
    border: '1px solid {colors.brass-hairline}'
    # variant .b sets text to brass
  cal-row:
    typography: '{typography.heading}'
    rounded: '{rounded.none}'
    padding: '20px 6px'
    border: '1px solid {colors.ink-hairline} (bottom)'
    # 5-col grid; amber underline grows on hover; event titles colored teal/violet/amber-dark
  tile:
    backgroundColor: '{colors.teal}'
    rounded: '{rounded.none}'
    border: '1px solid transparent -> {colors.brass} on hover'
    # bento; siblings dim to .55, hovered tile scales 1.03 + shadow + brass border
  audition-dot:
    backgroundColor: '{colors.amber}'
    textColor: '{colors.amber-ink}'
    rounded: '{rounded.dot}'
    border: '2px solid {colors.brass}'
    # 26px circle holding a music-note glyph
  faculty-preview:
    backgroundColor: '{colors.violet}'
    rounded: '{rounded.lancet}'
    border: '2px solid {colors.brass}'
    # 200x264 cursor-tracked image preview shaped like a lancet window
  panel:
    rounded: '{rounded.none}'
    padding: '8vh 48px'
    # 100vh sticky full-bleed image panel with Roman numeral + scrim
motion:
  ease: 'cubic-bezier(.16, 1, .3, 1) — global easing var(--ease)'
  hero-word-reveal: 'per-word blur(16px)+translateY(26px)->0, .9s, staggered 90ms via --i'
  lede-rise: 'opacity + translateY(18px) 1s, delay .8s'
  chipstrip-in: 'opacity + translateX(24px) 1.1s, delay 1.1s'
  clipline: 'clip-path inset(0 100% 0 0) -> 0, 1s; headline wipe-in'
  cal-row-in: 'opacity + translateY(14px) .7s on intersect'
  cal-row-underline: 'amber bar width 0 -> 100% on hover, .4s'
  panel-lock: 'pcontent blur(14px)+translateY(20px)->0 .8s when panel locks'
  panel-stack: 'JS rAF: previous panel scale 1->.96 + opacity 1->.65 as next covers'
  hero-parallax: 'JS rAF: hero video scale up to 1+sY/2200, opacity dim on scroll'
  marquee: 'JS rAF accreditation track, ~38s loop, velocity-boosted by scroll'
  visit-parallax: 'JS rAF: visit photo translateY +/-30px on scroll'
  ls-spread: 'heading letter-spacing .42em->.01em + opacity .4->1, 1.1s'
  footer-rule: 'SVG stroke-dashoffset 2400 -> 0, 2.4s draw-on'
  button-ripple: 'JS Web Animations white circle scale 0->2.6, 650ms on click'
icons:
  library: inline SVG (visit section) + Unicode music-note glyphs (audition dots)
  style: outline
  stroke: 1.6px
  sizes: { sm: 16px }
  color: '{colors.amber}'

St. Aldwyn's Cathedral Music School

st-aldwyn-s-design · alpha

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

Overview

St. Aldwyn's is a candlelit, ecclesiastical landing page for a fictional cathedral choral foundation. The page lives mostly on a deep pine-teal surface (#0E1B1C), interrupted by two warm vellum interludes (#F4ECDB) for the concert calendar and the faculty list, plus a saturated violet "Visit" block (#4B2E6B). The voltage is a single warm amber (#E08A1E) used for the CTA fill, eyebrows, hover states, and focus rings, supported by a brass metallic (#C9A24B) that draws every hairline, mono label, and the footer's hand-drawn rule. The type story is liturgical: an Italiana serif at hero scale (up to 112px), a Marcellus serif for section heads and event titles, Inter Tight for body, and JetBrains Mono in wide uppercase tracking for the eyebrow/label voice — giving the page its inscription-on-stone feel. The signature moves are the hero's per-word blur-in reveal over a full-bleed video, an eight-panel sticky-stacked "Lancets" curriculum where each 100vh image panel locks and the prior one scales away, Roman numerals (I–VIII, CC+, XLII) used as a typographic system, a bento that dims its siblings on hover, a cursor-tracked lancet-window faculty preview, and an SVG footer rule that draws itself on. Geometry is overwhelmingly sharp — square buttons, chips, tiles, and cards — reserving curves only for the audition dots and the Gothic-window preview.

Colors

Surface. The dominant surface is bg #0E1B1C, a deep pine-teal used for the hero, the ensembles section, and the footer. Two vellum sections — vellum #F4ECDB — host the concert calendar and the faculty list, with ink #1A2426 for their text and 2px divider rules. The hero itself sits on a linear-gradient(160deg, #15282a, #0a1314) fallback behind its video.

Text. On dark surfaces, body and headings use ivory #F1E9D6. On vellum, secondary copy (bios, calendar meta) uses ink-muted #3b4648. The violet visit panel uses violet-body #d8cae6 for body and violet-quote #bfa9d6 for the closing scripture quote.

Brand / Voltage. amber #E08A1E is the single accent: it fills the CTA button, colors eyebrows and most curriculum headings, drives hover states (faculty names, footer links, calendar underline), and is the focus-ring color. brass #C9A24B is the metallic partner — chip borders, the tuning rule gradient, mono pitch/year labels, the footer brand wordmark, and the footer rule stroke. amber-ink #241402 is the near-black brown text that sits on amber fills (button, dots). amber-dark #b06a12 colors the "Advent" calendar event titles on vellum.

Liturgical secondary. teal #0E5C5A and violet #4B2E6B act as a two-color liturgical accent system: they color calendar event titles (.ev.t, .ev.r), serve as image-fallback fills for panels and tiles, and violet is the full background of the Visit section and the faculty preview window.

Hairlines / overlays. Borders are translucent: brass-hairline rgba(201,162,75,.45) on dark, ink-hairline rgba(26,36,38,.18) on vellum, and ivory-hairline rgba(241,233,214,.25) inside dark panels. The hero overlay is a top-and-bottom darkening gradient in the page color.

Typography

Four faces, all loaded from Google Fonts via one @import/link: https://fonts.googleapis.com/css2?family=Italiana&family=Marcellus&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500. Italiana is the display serif (hero H1 only); Marcellus is the heading serif (section H2/H3, event titles, faculty names, footer brand); Inter Tight is the body sans; JetBrains Mono is the label/eyebrow/mono face, always uppercase with wide tracking. All serif headings are weight 400 with 1.05 line-height. No bespoke fonts — all four are open-source Google Fonts.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(48–112px)	400	1.05	.03em	Hero headline (Italiana)
heading	clamp(40–64px)	400	1.05	—	Section H2/H3, event/faculty names (Marcellus)
body	16px	400	1.6	—	Paragraphs, lede (Inter Tight)
mono	12px	400/500	—	.2em	Labels, pitch, hours, Roman numerals (JetBrains Mono)
eyebrow	11px	400	—	.28em	Uppercase section eyebrows (amber/violet)

Note: curriculum H3 scales to clamp(48px, 8vw, 108px); the performance stat values (dd) use the heading serif at 40px in amber; Roman-numeral panel numbers use mono at clamp(90px, 16vw, 230px) in translucent brass.

Layout

Base unit ~2px; the recurring step values are 4 / 8 / 14 / 18 / 24 / 48px, with section vertical padding of 120px (80px on mobile). Content is centered in a .wrap at max-width: 1180px with 48px side padding (24px mobile). The page is a long single-column scroll of full-width sections: a 100vh hero with absolute top-bar, centered body, and bottom chip strip; a vellum calendar with a top accreditation marquee and a 5-column grid table (150px 1fr 1.1fr 1fr 110px); the eight-panel sticky-stacked Lancets curriculum (each panel position:sticky; top:0; height:100vh); a 4-column / 200px-row bento (grid-template-columns: repeat(4,1fr) with big 2x2 and tall 1x2 spans); a centered vellum faculty list (max 980px); a two-column violet Visit split; and a 4-column footer grid (1.5fr 1fr 1fr 1fr). The whitespace is generous and editorial; the signature structural move is the sticky panel stack where Roman-numerated image panels lock and the prior scales away beneath the next.

Elevation & Depth

The system is predominantly flat and hairline-driven rather than shadowed. Depth comes from: translucent borders (brass on dark, ink on vellum), layered scrims over full-bleed images (per-panel data-scrim overlays like rgba(14,92,90,.38)), and the hero's top/bottom darkening gradient. The one real drop shadow is the bento hover: 0 20px 50px rgba(0,0,0,.5) on the lifted tile. The faculty preview and panels rely on blur-in transitions (filter: blur(14px)->0) for depth rather than shadow. No glassmorphism beyond the semi-transparent chip backgrounds.

Shapes

Sharp by default. Buttons, chips, calendar rows, bento tiles, footer columns — all square (border-radius: 0), reinforcing the carved-stone, manuscript feel. The small radius 6px appears only at the base of the faculty preview window. Circles (border-radius: 50%) appear in two places: the click ripple and the 26px audition "movement" dots holding music-note glyphs. The faculty preview is the one ornate shape — a lancet/Gothic-window silhouette via border-radius: 50% 50% 6px 6px/35% 35% 6px 6px.

Components

• button (.btn) — amber #E08A1E fill, amber-ink #241402 text, square, 18px 34px padding, mono uppercase .18em 13px; hover translateY(-2px) + brightness(1.08), click spawns a white radial ripple. Labels: "Plan Your Visit".
• link-amber — amber mono uppercase 12px text link with a half-opacity amber bottom border. Label: "Hear Evensong".
• chip — square, rgba(14,27,28,.35) bg, brass-hairline border, ivory mono uppercase 11px; .b variant turns text brass. Used in the hero bottom strip.
• eyebrow — mono uppercase 11px, .28em tracking, amber (or violet on vellum).
• cal-row — 5-column vellum grid row, ink text, Marcellus event title colored teal/violet/amber-dark by service type, brass mono time at right; an amber underline grows left-to-right on hover.
• panel (lancet) — 100vh sticky full-bleed image with a colored scrim, a giant translucent-brass Roman numeral top-right, and bottom-left content (eyebrow + huge amber/brass H3 + body + 2-col mono bullet list with square amber markers).
• tile (bento) — square teal-fallback image card with a bottom gradient caption (Marcellus name + amber mono sub-label); on hover the whole bento dims to .55 while the hovered tile returns to full, scales 1.03, gains a brass border and a large shadow.
• audition-dot — 26px amber circle with 2px brass border and music-note glyph (♩ ♪ 𝅗𝅥 𝅝); Movement IV's dot inverts to violet bg / brass glyph.
• faculty-preview — fixed 200x264 lancet-window image that follows the cursor (eased), violet bg, brass border, fading in on row hover.
• pstats — definition list of performance stats; mono uppercase term, amber Marcellus 40px value rendered as Roman numerals (CC+, XLII, XVII).
• footer rule — full-width SVG wave path, brass 1.4px stroke, drawn on via stroke-dashoffset when it enters view.

Motion

Global easing is cubic-bezier(.16, 1, .3, 1). CSS-driven reveals are one-shot via IntersectionObserver: the hero headline reveals word-by-word with a blur(16px) + translateY(26px) rise staggered 90ms per word; the lede, CTA, and chip strip fade/slide in on delays; section headings wipe in via clip-path or letter-spacing spread (.42em->.01em); calendar rows, tiles, faculty rows, and footer columns fade-rise with per-index stagger. JS rAF loops power the heavier choreography: hero video scales and dims on scroll, the sticky panels lock (blur->0) and the prior panel scales 1->.96/dims as the next covers it, the accreditation marquee scrolls continuously (~38s) and speeds up with scroll velocity, the visit photo parallaxes +/-30px, and the faculty preview eases toward the cursor. The footer rule draws its stroke over 2.4s. Buttons emit a Web-Animations ripple on click. A reduce flag exists in JS but is hard-coded false, so motion is always on.

Iconography

Minimal. UI icons are three inline outline SVGs in the Visit section (map pin, calendar, headphones), drawn at 16px with 1.6px amber stroke. Decorative glyphs are Unicode music notes (♩ ♪ 𝅗𝅥 𝅝) inside the circular audition dots. No icon font or icon library is loaded. The footer's wave divider is a hand-authored SVG path. Roman numerals function as a quasi-iconographic numbering system throughout.

Do's and Don'ts

• Do keep the surface deep pine-teal and reserve vellum for editorial interludes (calendar, faculty); the contrast is the rhythm of the page.
• Do use amber as the single voltage and brass for hairlines/metallic accents — don't introduce a third bright color.
• Do keep edges square; the carved-stone feel depends on border-radius: 0 everywhere except dots, ripples, and the lancet preview.
• Do keep the serif/mono pairing: Italiana/Marcellus for display, JetBrains Mono uppercase for every label and eyebrow.
• Do lean on Roman numerals and Latin phrases (Soli Deo Gloria, Liber Calendarii) as part of the typographic system.
• Don't add drop shadows broadly — depth is hairlines, scrims, and blur, with the bento hover the lone exception.
• Don't soften corners or add gradients beyond the hero overlay/fallback.
• Don't speed up the slow, reverent motion timings or remove the per-word hero reveal — the pacing is the point.

Known Gaps

• Spacing is inferred from observed values (4/8/14/18/24/48px); no formal scale is declared in the source, so the base unit (~2px) is approximate.
• The hero video is an external asset; its visual is approximated by the teal poster/fallback and the #15282a->#0a1314 gradient.
• Per-panel scrim colors vary by panel (teal/violet/page-color at .35–.42 alpha); the tokens capture representative values rather than each one-off.
• All four typefaces are confirmed open-source Google Fonts, so no substitutes are needed.