name: reel-fest-design
version: alpha
description: >
  An editorial print-poster identity for a fictional indie film festival
  (Lumière, Lisbon). Built on a warm paper cream surface (#F2ECD0) inked in
  near-black (#14110E), with four saturated risograph "section" colors —
  orange, violet, teal and competition red — that flood entire bands and ticket
  cards rather than accent them. The signature moves are a 12-column grid with
  visible hairline rulers, a floating parallax poster collage, a Gantt-style
  program timeline, perforated ticket cards with circular notches and CSS
  barcodes, and giant italic display marquees. Type is a high-contrast Fraunces
  display (italic, black, optical sizing) over DM Sans body and JetBrains Mono
  for every uppercase label. Geometry is mostly square-cornered and rule-bound;
  only the tickets soften to rounded-xl. Grain video and conic-gradient borders
  add analog texture.
colors:
  # Surface / Ink
  cream: '#F2ECD0'   # page surface; nav, hero, program, footer text on ink
  ink: '#14110E'     # near-black; all hairlines, body text, footer bg, type fills
  # Section voltages (full-bleed band/card fills)
  orange: '#E87030'  # shorts strand; hero pass card; footer submit button
  violet: '#6B3098'  # tickets section bg; docs strand; ticket notch circles
  teal: '#2C6872'    # features strand; day-pass card; filmmaker row 2
  red: '#C62E28'     # competition strand; nav BUY PASS; press marquee; filmmaker row 1
  # Hairlines / alpha
  ink-15: 'rgba(20,17,14,0.15)'   # hero vertical grid rulers
  ink-30: 'rgba(20,17,14,0.30)'   # gantt column dividers
  cream-20: 'rgba(242,236,208,0.20)' # footer bottom rule on dark
typography:
  display:
    fontFamily: "'Fraunces', 'Playfair Display', serif"
    fontSize: clamp(72px, 13vw, 200px)
    fontWeight: 900
    lineHeight: 0.95
    letterSpacing: -0.5px
  display-section:
    fontFamily: "'Fraunces', 'Playfair Display', serif"
    fontSize: clamp(48px, 7vw, 110px)
    fontWeight: 900
    lineHeight: 1
  body:
    fontFamily: "'DM Sans', 'Inter', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.625
  mono-label:
    fontFamily: "'JetBrains Mono', 'Space Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 1.5px
    textTransform: uppercase
  mono-eyebrow:
    fontFamily: "'JetBrains Mono', 'Space Mono', monospace"
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 4.8px
    textTransform: uppercase
rounded:
  none: 0px      # nav, grid, gantt blocks, color blocks, filmmaker rows
  xl: 12px       # ticket cards (rounded-xl)
  full: 9999px   # ticket notches, marquee dot/pill, color-block circle
spacing:          # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 96px   # py-24 tickets section
components:
  nav:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.ink}'
    typography: '{typography.mono-label}'
    border: '1px solid {colors.ink} (bottom)'
    rounded: '{rounded.none}'
    padding: '12px 24px'
  buyPassButton:
    backgroundColor: '{colors.red}'
    textColor: '{colors.cream}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '6px 12px'
  ticketCardHero:
    backgroundColor: '{colors.orange}'
    textColor: '{colors.ink}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.xl}'
    padding: '40px'
    # circular notches (violet, 28px) at left/right mid; CSS barcode footer
  ticketCardDay:
    backgroundColor: '{colors.teal}'
    textColor: '{colors.cream}'
    rounded: '{rounded.xl}'
    padding: '24px'
  claimPassButton:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.cream}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '16px 24px'
  dayTab:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.ink}'
    activeBackgroundColor: '{colors.ink}'
    activeTextColor: '{colors.cream}'
    typography: '{typography.mono-label}'
    border: '1px solid {colors.ink} (bottom)'
    padding: '12px 16px'
  ganttBlock:
    backgroundColor: '{colors.teal} | {colors.violet} | {colors.orange} | {colors.red}'
    textColor: '{colors.cream} | {colors.ink}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '8px'
  footerEmailInput:
    backgroundColor: 'transparent'
    textColor: '{colors.cream}'
    border: '1px solid {colors.cream}'
    submitButton: '{colors.orange} bg, {colors.ink} arrow'
motion:
  poster-float: 'GSAP yoyo y +=12px, 2–3.2s, sine.inOut, infinite (ambient hover)'
  hero-parallax: 'GSAP .hero-title yPercent -60 on scrub; posters via Locomotive data-scroll-speed'
  rot-border: '@property --angle conic-gradient spin 6s linear infinite'
  starburst: 'CSS spin-slow rotate 360deg over 12s linear infinite'
  gantt-reveal: 'GSAP batch autoAlpha 0→1, x -20→0, 0.6s, stagger 0.06'
  name-mask: 'GSAP yPercent 110→0, 1s, power3.out, on scroll into view'
  ticket-reveal: 'GSAP batch autoAlpha 0→1, y 40→0, 0.7s, stagger 0.1, power3.out'
  press-down: 'GSAP scale 0.97 on pointerdown, elastic.out(1,0.5) release'
  marquee: 'GSAP xPercent loop, 30s linear infinite (row-1 left, row-2 right)'
icons:
  library: Tabler icons (webfont) + game-icons (star-prominences SVG)
  style: outline
  sizes: { sm: 16px, base: 16px }
  color: '{colors.ink} / {colors.cream} (inherits context)'

Lumière / Reel Fest

reel-fest-design · alpha

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

Overview

Reel Fest is the identity for "Lumière", a fictional 10th-edition indie film festival in Lisbon. It reads like a printed festival program blown up to screen scale: a warm paper --cream (#F2ECD0) surface, everything inked in near-black --ink (#14110E), and four risograph section colors — --orange (#E87030), --violet (#6B3098), --teal (#2C6872) and competition --red (#C62E28) — that don't accent so much as flood whole bands and cards. The page is built on a literal 12-column grid whose hairline rulers stay visible (border-[var(--ink)]/15), and the signature moves stack hard: a floating parallax poster collage over a grain video in the hero; a Gantt-style program timeline with colored screening blocks on a time-axis; perforated rounded-xl ticket cards with circular violet notches and pure-CSS barcodes; and giant italic Fraunces marquees scrolling in opposite directions. Type is high-drama — Fraunces set black + italic with optical sizing for every headline up to clamp(72px, 13vw, 200px), DM Sans for the rare body paragraph, and JetBrains Mono uppercase with wide tracking for every label, eyebrow, and metric. Geometry is overwhelmingly square and rule-bound; only tickets soften to 12px corners.

Colors

Surface & Ink. The whole site sits on cream #F2ECD0 with ink #14110E as the universal contrast: every hairline border, all body and label type, the footer background, and the type fills of headlines. This two-tone print base is the constant.

Section voltages. Four saturated colors carry the program taxonomy and flood full sections: orange #E87030 (shorts strand, the hero "Festival Pass" card, footer submit button), violet #6B3098 (the entire Tickets section background, docs strand, and every ticket-notch circle), teal #2C6872 (features strand, the Day-Pass card, second filmmaker row), and red #C62E28 (competition strand, the nav "BUY PASS" pill, the top press marquee, first filmmaker row, and section accent words). They are used at full strength as backgrounds, never tinted.

Hairlines & alpha. Three alpha values structure the grid: ink-15 rgba(20,17,14,0.15) for the hero's vertical column rulers, ink-30 rgba(20,17,14,0.30) for the gantt column dividers, and cream-20 rgba(242,236,208,0.20) for the footer's bottom rule on dark.

Typography

Three faces, all Google Fonts: Fraunces (display, italic + black, optical sizing on) is the festival voice — high-contrast, antique, dramatic; if unavailable it falls back to Playfair Display. DM Sans carries the few body paragraphs (fallback Inter). JetBrains Mono does all the typographic labor: eyebrows, metrics, nav, gantt block titles, ticket meta (fallback Space Mono). Headlines are italic and black with tight or negative leading; labels are uppercase with wide tracking (tracking-widest ≈ 0.1em up to tracking-[0.4em] for hero eyebrows).

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(72px,13vw,200px)	900 italic	0.95	tight	Hero headline "LUMIÈRE in revolt"
display-section	clamp(48px,7vw,110px)	900	1.0	—	Section H2s (Program, Tear here, Filmmakers)
body	14px	400	1.625	—	Filmmaker bios, the rare paragraph
mono-label	11px	400	normal	~1.5px	Eyebrows §, metrics, gantt blocks, ticket meta
mono-eyebrow	12px	400	normal	4.8px (0.4em)	Hero date/location eyebrows

Display also appears at fixed sizes inside cards: 84px (pass title), 64px / 40px (prices), 96px (press marquees), 48px (footer wordmark).

Layout

Base unit 4px on Tailwind's scale; the dominant primitive is the 12-column grid with persistent hairline dividers. Sections are full-bleed and stacked, each separated by border-b border-[var(--ink)]. The hero is a full-screen (h-screen) composition: a 12-col grid-line backdrop, an absolutely-positioned poster collage (10+ images and color blocks with individual rotations and parallax speeds), a multiply-blended grain video, a centered giant headline, and a bottom info band split 3/6/3. Program uses a sticky 2-col day-selector beside a 10-col Gantt timeline (time header + venue rows with absolutely-positioned colored screening blocks). Tickets is a 7/5 split of perforated cards. Filmmakers are alternating full-bleed 7/5 colored rows (text / image, order-swapped). Press is two opposing display marquees around a centered pull-quote. Whitespace is generous inside flooded sections but the grid rulers keep everything architecturally tight. No rounded page container — content runs edge to edge.

Elevation & Depth

Depth is mostly flat and rule-based — hairline ink borders do the work shadows normally would. The exceptions: floating hero .poster cards carry a real drop shadow 0 20px 40px rgba(0,0,0,0.35); the hero layers a grain video at opacity:0.12; mix-blend-mode:multiply and a .grain overlay at opacity:0.18; mix-blend-mode:overlay. The hero headline gets a subtle text-shadow: 0 1px 0 rgba(242,236,208,0.4). The .rot-border utility paints an animated conic-gradient ring (--orange → --red → --cream → --orange) just outside its element. Ticket cards rely on 2px ink/cream borders, not shadow.

Shapes

Square by default — nav, grid, gantt blocks, color blocks, filmmaker rows, and footer inputs all have 0 radius, reinforcing the printed-broadsheet feel. The deliberate softening is the ticket cards at rounded-xl (12px), whose silhouette is then perforated by border-radius:50% notch circles (28px, violet) bitten out of left and right edges — the unmistakable torn-ticket motif. Other full circles appear as marquee separator dots/pills and one hero color block (border-radius:50%).

Components

• Nav — fixed, cream bg, bottom ink hairline, 12-col mono-label layout; left wordmark "✦ Lumière / Indie Fest '25", center links, right "10 DAYS · 142 FILMS" + red BUY PASS pill.
• BUY PASS / accent buttons — red fill, cream text, square, mono-label, Tabler ticket icon; hover swaps to ink (a.btn-red:hover).
• Hero pass card — orange fill, ink text + 2px ink border, rounded-xl, violet notches, game-icons starburst (spinning), 3-col metric grid, "From €180", black "Claim Pass →" button, CSS barcode footer.
• Secondary ticket cards — teal (Single Day, €32), cream (Docs Strand, €68), and a bordered cream Single Screening (€9); each with violet notches, Fraunces price, mono meta; barcodes inverted on dark cards.
• Day tab — mono-label rows in the sticky selector; active state flips to ink bg + cream text; bottom hairlines.
• Gantt block — absolutely-positioned screening bar colored by strand (teal/violet/orange/red, or cream+ink-border for Retro), mono-label title with runtime; hover reveals a poster thumbnail.
• Filmmaker row — full-bleed colored band (red/teal/orange), 7/5 text-image split, giant italic Fraunces name with mask reveal, mono metric grid (Films/Talks/Lang.), Tabler ti-video label.
• Press marquee — 96px italic Fraunces quotes scrolling, interleaved with rounded image pills and dot separators; red band (left) + cream band (right).
• Footer — ink bg, cream text, 12-col mono columns, email input (transparent, cream border) with orange "→" submit; credit line "Reckless Neue · Söhne · Söhne Mono".

Motion

Heavy GSAP + Locomotive Scroll choreography. Hero posters float ambiently (y +=12, yoyo, sine.inOut) and parallax via Locomotive data-scroll-speed; the hero title scrubs up yPercent -60 on scroll. Gantt blocks batch-reveal (autoAlpha + x slide, stagger 0.06); ticket cards batch-reveal (autoAlpha + y40, stagger 0.1, power3.out); filmmaker names rise from a mask (yPercent 110→0, power3.out). Buttons/ticket cards press to scale 0.97 on pointerdown and spring back with elastic.out(1,0.5). Two press marquees loop 30s linear in opposite directions. CSS-only: .rot-border conic spin (6s) and .starburst rotation (12s). Day tabs toggle active class on click.

Iconography

Primarily Tabler icons via the webfont (ti ti-ticket, ti ti-video), outline style, sized to the surrounding text (text-base ≈ 16px), inheriting the contextual color (ink or cream). One decorative game-icons SVG (star-prominences / "starburst") sits on the hero pass card, filtered to pure black and slowly spinning. A ✦ glyph stands in for the nav mark. Icons are sparse and functional, not a system unto themselves.

Do's and Don'ts

• Do keep the cream/ink print base constant and let the four section colors flood entire bands at full saturation.
• Do keep the 12-column hairline grid visible — the rulers are the structure.
• Do set headlines in italic black Fraunces and every label in uppercase tracked JetBrains Mono.
• Do reserve rounded-xl + notch circles + CSS barcode exclusively for ticket cards.
• Don't introduce drop shadows for general depth — use ink hairlines (posters and grain are the only depth exceptions).
• Don't tint or pastel-ize the voltages, or mix two strand colors within one block.
• Don't round nav, gantt, grid, or filmmaker geometry — square corners carry the broadsheet identity.

Known Gaps

• Letter-spacing values are approximated from Tailwind tokens: tracking-widest (~0.1em → ~1.5px at 11px) and tracking-[0.4em] (4.8px at 12px); tracking-tight on the hero ≈ -0.5px.
• display line-height 0.95 is from the hero; section headlines use leading-none (1.0) and filmmaker names leading-[0.85].
• Alpha hairline hexes (ink-15, ink-30, cream-20) are derived from the Tailwind opacity modifiers on var(--ink) / var(--cream).
• rounded-xl mapped to 12px per Tailwind v4 default; not explicitly set in px.
• The .rot-border and .grain utilities are defined in CSS but not attached to visible elements in the markup; documented as available tokens.
• Fonts are loaded live from Google Fonts; the footer's "Reckless Neue · Söhne" credit is decorative fiction, not the actual loaded stack.