name: ce-l-craic-design
version: alpha
description: >
  A dim, peat-fire Irish session-house landing page. The surface is a deep
  bottle-green (#0B1F18) lifted by a warm parchment ink (#F4E9CF), with a single
  ember-orange voltage (#FF6A1F) carrying every live signal, plus heather-purple
  and whistle-blue as secondary accents and a copper hairline throughout. The
  type story is romantic and old-world: Cinzel for engraved display, an italic
  EB Garamond for body, and Special Elite typewriter caps for every label and
  meta line. Signature moves are scroll-pinned theatre — a 400vh image-sequence
  hero, a 600vh horizontal pin-scroll through nine "snug" panels, oversized
  ember numerals bleeding off the tune rows, a velocity marquee, and a theme
  inverting (dark→light) notices board — all wrapped in a fixed film-grain
  overlay.
colors:
  # Surface
  bg-primary: '#0B1F18'   # page background, deep bottle-green; pinned section bg
  bg-surface: '#142C24'   # raised panels, snug3 section, footer, tooltip bg
  # Brand / Voltage
  ember: '#FF6A1F'        # primary accent — live dots, CTAs, big numerals, links-on-hover, glows
  heather: '#7A3E8E'      # secondary accent — purple tags, map pins, regular-snug glows
  whistle: '#B8D4D0'      # tertiary accent — pale blue meta, keys, outlined tags
  copper: '#C58A4A'       # warm metallic — eyebrows, hairlines, ornaments, play-btn ring
  # Text
  text-primary: '#F4E9CF' # parchment ink — headings + primary body on dark
  text-muted: '#9FB3A9'   # desaturated sage — subs, captions, secondary meta
  # Paper (inverted notices / sheet music)
  notice-paper: '#FBF6E7' # cream pinned-notice card
  scrap-paper: '#f7e9c8'  # handwritten scrap notice
  paper-ink: '#1E1A16'    # near-black ink on cream notices
  # Hairlines (all over copper at low alpha)
  hairline-copper: 'rgba(197,138,74,.25)' # panel borders, dividers, table rules
  hairline-ink: 'rgba(244,233,207,.08)'   # faint ink dividers on dark

Ceòl & Craic

ce-l-craic-design · alpha

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

Overview

Ceòl & Craic is the landing page for a fictional Irish "session house" and it is built to feel like a turf-lit snug at half-eight. The whole page sits on a deep bottle-green surface (--bg-primary #0B1F18), with raised panels a shade warmer (--bg-surface #142C24), and every word is set in a warm parchment ink (--text-primary #F4E9CF). One voltage does all the live work: an ember orange (--ember #FF6A1F) for the "fire is lit" dot, the CTAs, the oversized tune numerals, hover links and every glow. Two more accents play supporting roles — a heather purple (--heather #7A3E8E) for regular-session tags and map pins, and a pale whistle blue (--whistle #B8D4D0) for keys and quiet meta — while a copper (--copper #C58A4A) draws nearly every hairline, eyebrow and ornament. The type story is deliberately old-world: Cinzel (engraved serif caps) for display, italic EB Garamond for body and names, and Special Elite (a typewriter mono) in tracked uppercase for labels, flags and timestamps. The geometry is almost square — radii are essentially 0 to 2px except for circular pills and avatars — so depth comes from copper hairlines, soft shadows, ember glows and a fixed film-grain overlay (.grain, mix-blend-mode:overlay, opacity .18) rather than rounded cards. The signature moves are scroll theatre: a 400vh image-sequence hero, a 600vh horizontal pin-scroll through nine snug panels, ember numerals bleeding off the tune rows, a velocity marquee, and a notices board that inverts the theme to cream paper.

Colors

Surface. --bg-primary #0B1F18 is the page background and the backdrop of every pinned section; --bg-surface #142C24 lifts the snug3 section, footer, tooltips and raised panels. Snug panels themselves use a vertical gradient between the two (rgba(20,44,36,.95) → rgba(11,31,24,.95)).

Voltage / Brand. --ember #FF6A1F is the single hero color — live-status dot (with 0 0 12px glow), the .btn-ember CTA, oversized .tune-num numerals (text-shadow 0 0 60px rgba(255,106,31,.25)), .stat-num, hover state on nav and footer links, progress dots, the marquee accent and every radial ember glow. On ember fills, text flips to a near-black brown #1a0a02.

Secondary accents. --heather #7A3E8E fills .tag-heather, heather map pins, and the cooler radial glow behind non-tonight snugs (rgba(122,62,142,.18)). --whistle #B8D4D0 is the calm one — outlined .tag-whistle, tune keys, hum labels, legend text.

Copper. --copper #C58A4A is the metallic hairline color: eyebrows, .brand-sub, knot/ornament SVG strokes, the .play-btn ring, table header rules, and almost all borders via rgba(197,138,74,.18–.25).

Text. --text-primary #F4E9CF for headings and primary body; --text-muted #9FB3A9 for subs, captions and secondary meta.

Paper (inverted). The notices board flips to cream: .notice is #FBF6E7 with ink #1E1A16, .notice.scrap is #f7e9c8. Sheet-music .tune-paper is the parchment --text-primary with --bg-primary ink drawn on it.

Hairlines. Two repeated alpha colors: copper rgba(197,138,74,.18–.25) and faint ink rgba(244,233,207,.06–.12).

Typography

Three families, all loaded from Google Fonts in one @import: Cinzel (500/700), EB Garamond (italic 400/500) and Special Elite. The body default is italic EB Garamond 17px — italics are the resting state, normal is the exception. Cinzel is the engraved display face (used both upright-700 for big section heads and italic-500 for romantic names). Special Elite is the typewriter voice for every uppercase label, with heavy tracking (.18em–.4em).

Token	Size	Weight	Line-height	Tracking	Usage
display-hero	clamp(48px, 6.8vw, 104px)	700	.95	-.005em	Cinzel hero H1
display-num	clamp(220px, 30vw, 480px)	700	.8	-.04em	ember tune numerals
display-section	clamp(40px,5vw,64px)	500–700	1	.01–.04em	Cinzel section H2
name-italic	clamp(36px,4.5vw,56px)	500	1.04	—	Cinzel italic snug/tune names
body	17px	400	1.55	—	EB Garamond italic body
body-sub	16–18px	400	1.4	—	EB Garamond italic subs
label	10–13px	400	—	.18em–.4em	Special Elite uppercase eyebrows/flags/meta
tag	9–11px	400	—	.2em–.3em	Special Elite uppercase chips

Layout

Base spacing unit is 4px, with an 8px-multiple rhythm; content lives in a .wrap capped at max-width:1280px with 32px side padding, while pinned sections break out to 10vw gutters. The page is a vertical stack of tall scroll-driven sections: a fixed header.topbar (blur + green gradient), a 400vh .hero-outer with a position:sticky 100vh stage, a 600vh .snugs-outer horizontal pin-scroll of nine flex:0 0 70vw panels, a 400vh .snug3-outer pinned 60/40 split, a normal-flow .tunebook of giant numeral rows, a .townland marquee + 3-up stat-wall + map grid, and a 300vh .notices-outer that inverts to light. Knot-divider SVG rules separate movements. Whitespace is generous and theatrical — single panels fill the viewport, numerals are allowed to overflow and bleed off-canvas (margin-left:-80px, clip-path).

Elevation & Depth

There are no flat material cards; depth is built from four things. (1) Copper and ink hairlines everywhere instead of borders-as-shadow. (2) Soft drop shadows on floating paper: notices 0 14px 30px -8px rgba(0,0,0,.55), sheet music 0 24px 40px -20px rgba(0,0,0,.6). (3) Ember glows — box-shadow:0 0 12px on live dots, 0 0 30px on play-btn hover, 0 0 80px around the hearth orb, and text-shadow halos on big numerals. (4) A global fixed .grain film overlay (blend overlay, opacity .18) plus a backdrop-filter:blur(6px) topbar. The ember CTA carries both a ring and a glow: 0 0 0 1px rgba(255,106,31,.4), 0 6px 20px -6px rgba(255,106,31,.55).

Shapes

The system is almost entirely square — most cards, tags and panels have border-radius:0 to 2px (a faint softened-paper feel). The only round forms are fully circular: 999px/50% pill CTAs, avatar stacks, map pins, live dots, the 72px play button and the 380px hearth orb. Sheet-music paper and tune-paper get a sharp 2px. The contrast — engraved-square panels against perfectly round ritual objects — is intentional.

Components

• btn-ember (CTA) — fill {colors.ember}, text #1a0a02, Special Elite uppercase .2em, padding 11px 22px, radius 999px, ring+glow shadow; hover lifts translateY(-1px). Labels: "Pull a Stool", "Subscribe".
• topbar — fixed, green-gradient fade, backdrop-filter:blur(6px), padding 20px 32px; nav links Special Elite .2em, hover → ember underline.
• live-status — Special Elite caps in {colors.whistle} with a pulsing ember dot. Text: "fire is lit · 14 inside".
• snug-panel — 70vw gradient panel, border-left:1px {colors.hairline-copper}, padding 48px 56px, grid layout; huge faint Cinzel --snug-num numeral clipped in the corner; radial ember/heather glow behind.
• snug-aside — bordered setlist box, gradient fill linear-gradient(165deg, rgba(244,233,207,.03), rgba(255,106,31,.05)), copper corner ticks, dashed list rules; lead item turns ember.
• tag — Special Elite caps 10px, radius 2px. Variants: .tag-ember (ember/#1a0a02), .tag-heather (heather/parchment), .tag-whistle (transparent + whistle border).
• tune-num — clamp(220→480px) Cinzel 700 in {colors.ember} with a 0 0 60px glow, negative margin so it bleeds off the row.
• tune-paper — parchment-fill sheet-music card, ink {colors.bg-primary}, radius 2px, deep soft shadow.
• play-btn — 72px transparent circle, 1.5px {colors.copper} ring, a dashed rotating outer ring, hover → ember + 0 0 30px glow.
• notice (inverted) — cream {colors.notice-paper} card, ink {colors.paper-ink}, width 280px, a red-ember pin dot, drop shadow, rotated a few degrees; .ntag chips reuse fest/work/beg/now palette.
• stat — centered, giant ember Cinzel numeral + Special Elite label, count-up animated, separated by copper hairlines.
• footer newsletter — copper-bordered inline form, ember submit button.

Motion

All animation is hand-rolled vanilla JS scroll-driving (no GSAP/library) plus CSS keyframes; the shared easing is --ease cubic-bezier(.2,.8,.2,1). Scroll-pinned: the hero swaps a 4-frame image sequence by scroll progress with progress dots; the snugs strip translates horizontally across 600vh; tune numerals/paper get a parallax data-px offset; notices parallax and the section background lerps from dark to light. Load/enter reveals: hero H1 winds letter-spacing in per-char (900ms, staggered --i*30ms), snug3 title words rise+unskew (800ms, --i*70ms), footer pull-quote words fade up (700ms, --i*55ms), tunebook words wipe an ember gradient on scroll. Looping CSS keyframes: pulse (live dot 2.4s), emberFlicker (3.6s), waveBar (crowd hum 1.8s), hearthPulse (4.5s), pinPulse (3s), rotate (play-btn ring 28s). All hover transitions run .25–.3s.

Iconography

No icon font — everything is inline hand-drawn SVG with stroke:currentColor, typically stroke-width:1.2–1.6, round caps, fill:none. The recurring marks: the circular Celtic-knot brand-mark (with an ember center dot), the knot-rule divider, per-snug ornament glyphs, a large bodhrán (Irish drum) illustration, a hand-drawn map of Ireland with a compass rose, hand-rendered staff/notes inside the tune-paper, and a simple play triangle (M5 3l16 9-16 9z). Color is almost always {colors.copper} for ornaments and {colors.text-primary} or {colors.ember} for the brand mark.

Do's and Don'ts

• Do keep ember as the only "live/now" signal — it earns attention because nothing else competes for it.
• Do set labels and timestamps in tracked uppercase Special Elite, body and names in italic EB Garamond, and big heads in Cinzel.
• Do build depth with copper hairlines, soft shadows and ember glows, and keep the film-grain overlay on.
• Do let big numerals bleed off their rows — the overflow is the move.
• Don't round the corners; the system is square except for circular ritual objects (pills, dots, avatars, play button, hearth orb).
• Don't introduce a second bright accent or use heather/whistle for primary CTAs — they are quiet supporting colors.
• Don't flatten the type to a single weight or drop the italics — the italic-default body is core to the voice.

Known Gaps

• The film-grain texture (.grain) and all hero/avatar/map photography are external CDN assets, not part of the token system; only the overlay treatment (opacity .18, mix-blend-mode:overlay, 300px tile) is documented.
• Scroll-driven values (horizontal translate distance, parallax data-px factors, dark→light lerp midpoint) are computed at runtime in JS; durations and easings above are read directly from CSS, the scroll positions are described qualitatively.
• Font weights for EB Garamond are imported only as italic 400/500; "normal" (upright) body styles fall back to the browser's faux-upright of those faces.