Reelbox

Remix this template to create a similar design — same sections, layout, animations, colors, and typography.

Landing page for an app that catalogues family Super-8 film reels. Style: nostalgic archival editorial, light warm cream canvas, amber and rust accents, Fraunces serif with Caveat script. Layout: single-column hero over a ledger-style stat band and film-spec ticker. Components: italic-inflected display headline, Thread a New Reel button, stat cells (reels, era, runtime), black marquee of film-stock specs, pill filter chips. Vibe: sentimental, tactile, analog — home-movie archiving.

core colors

typefaces

tokens

agent.kombai.com/kombai-inspiration-library/templates/reelbox/index.html

Palette

The system's color tokens.

amber

#D8A056

rust

#A84A26

cream

#F0E6CE

cream-2

#E8DCBA

paper

LINEAR-GRADIENT(180DEG, #F6EFD9 0%, #EFE3C5 100%)

paper-flat

#F6EFD9

ink

#1A1610

text

#1A1610

text-muted

RGBA(26,22,16,0.75)

text-faint

RGBA(26,22,16,0.55)

text-on-dark

#F0E6CE

hairline

RGBA(26,22,16,0.15)

hairline-strong

#1A1610

hairline-light

RGBA(240,230,206,0.4)

burn

RADIAL-GRADIENT(CIRCLE AT 60% 40%, RGBA(255,180,80,0.7), RGBA(168,74,38,0.4) 45%, TRANSPARENT 70%)

vignette

RADIAL-GRADIENT(ELLIPSE AT CENTER, TRANSPARENT 55%, RGBA(26,22,16,0.35) 100%)

Typography

Type tokens — family, size.

displayThe quick brown fox jumps'Fraunces', serif
140px

display-italicThe quick brown fox jumps'Fraunces', serif
140px

headingThe quick brown fox jumps'Fraunces', serif
64px

card-titleThe quick brown fox jumps'Fraunces', serif
20px

bodyThe quick brown fox jumps'Inter', sans-serif
15px

mono-labelThe quick brown fox jumps'JetBrains Mono', monospace
11px

mono-statThe quick brown fox jumps'JetBrains Mono', monospace
34px

nav-linkThe quick brown fox jumps'Inter', sans-serif
11px

handThe quick brown fox jumps'Caveat', cursive
26px

Spacing & Shape

Layout spacing tokens.

Token	Value	Preview
xs	4px
sm	8px
md	16px
lg	20px
xl	32px
xxl	40px

Border Radius

Corner rounding tokens.

Token	Value	Preview
sm	2px
md	6px
lg	12px
xl	16px
xxl	24px
full	9999px

design.md

The system as one file your coding agent can read and build from.

design.mdreadable by AI agents

tokens (raw)

name: reelbox-design
version: alpha
description: >
  A warm analog-archive interface for a fictional Super-8 family-film library
  ("Celluloid"). The surface is aged cream paper (`#F0E6CE`) inked in near-black
  (`#1A1610`), with two voltages — a soft amber (`#D8A056`) and a burnt rust
  (`#A84A26`) — doing all the accent work. The signature moves are heavy
  scrapbook craft: a fixed SVG film-grain overlay, sprocket-hole filmstrip
  rails, washi-tape corners, dashed rubber stamps, washi/index-card panels, and
  hover "film-burn" reveals on circular tin canisters. Type pairs an optical
  Fraunces serif display against an Inter body and an omnipresent JetBrains Mono
  for ledger/metadata labels, with Caveat handwriting for signed annotations.
  Geometry mixes hard 2px ink borders with generous rounded-2xl/3xl cards and
  full-pill controls.
colors:
  # Brand / Voltage
  amber: '#D8A056'    # primary warm accent: logo glyph, featured card fill, marquee highlights, timeline fill, gear graphic
  rust: '#A84A26'     # secondary hot accent: primary CTAs, section eyebrows, stamps, washi, pending state, hand annotation
  # Surface
  cream: '#F0E6CE'    # page background, light text on dark surfaces, panel fills
  cream-2: '#E8DCBA'  # secondary surface: ticker strip bg (at 60%), can-2 card fill
  paper: 'linear-gradient(180deg, #F6EFD9 0%, #EFE3C5 100%)'  # index-card / framed-photo paper panels
  ink: '#1A1610'      # near-black: body text, dark cards/sections, borders, filmstrip strip, nav avatar
  paper-flat: '#F6EFD9'  # tape-label fill, flat top of paper gradient
  # Text
  text: '#1A1610'           # ink, primary text
  text-muted: 'rgba(26,22,16,0.75)'   # body copy on cream
  text-faint: 'rgba(26,22,16,0.55)'   # mono metadata labels
  text-on-dark: '#F0E6CE'             # cream text on ink/rust surfaces
  # Hairlines
  hairline: 'rgba(26,22,16,0.15)'     # nav + footer borders
  hairline-strong: '#1A1610'          # 2px ticker borders, metadata top-rules
  hairline-light: 'rgba(240,230,206,0.4)'  # form field underline on dark
  # Gradient / Effect
  burn: 'radial-gradient(circle at 60% 40%, rgba(255,180,80,0.7), rgba(168,74,38,0.4) 45%, transparent 70%)'  # hover film-burn glow on tins
  vignette: 'radial-gradient(ellipse at center, transparent 55%, rgba(26,22,16,0.35) 100%)'  # frame darkening
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: 140px
    fontWeight: 500
    lineHeight: 0.88
    letterSpacing: -0.04em
  display-italic:
    fontFamily: "'Fraunces', serif"
    fontSize: 140px
    fontWeight: 300
  heading:
    fontFamily: "'Fraunces', serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.01em
  card-title:
    fontFamily: "'Fraunces', serif"
    fontSize: 20px
    lineHeight: 1.1
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.7
  mono-label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.2em
    textTransform: uppercase
  mono-stat:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.0
  nav-link:
    fontFamily: "'Inter', sans-serif"
    fontSize: 11px
    fontWeight: 600
    letterSpacing: 0.22em
    textTransform: uppercase
  hand:
    fontFamily: "'Caveat', cursive"
    fontSize: 26px
    fontWeight: 400
rounded:
  sm: 2px       # filmstrip frame cards (rounded-sm)
  md: 6px       # paper panels (rounded-md)
  lg: 12px      # form option cards (rounded-xl)
  xl: 16px      # vault can cards (rounded-2xl)
  xxl: 24px     # digitize panel (rounded-3xl)
  full: 9999px  # pills, buttons, avatars, tin reveals
spacing:        # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 32px
  xxl: 40px     # section py-20 / panel p-10
components:
  nav-link:
    textColor: '{colors.text}'
    typography: '{typography.nav-link}'
    hoverColor: '{colors.rust}'
  primary-button:
    backgroundColor: '{colors.rust}'
    textColor: '{colors.cream}'
    typography: '{typography.body}'
    rounded: '{rounded.full}'
    padding: '0 24px'
    height: '48px'
  secondary-button:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.full}'
    padding: '0 24px'
    height: '48px'
  dark-button:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.cream}'
    typography: '{typography.nav-link}'
    rounded: '{rounded.full}'
  icon-button:
    backgroundColor: 'transparent'
    border: '1px solid {colors.hairline}'
    textColor: '{colors.text-muted}'
    rounded: '{rounded.full}'
    size: '36px'
  can-card:
    backgroundColor: '{colors.amber}'
    textColor: '{colors.ink}'
    rounded: '{rounded.xl}'
    padding: '28px'
  tape-label:
    backgroundColor: '{colors.paper-flat}'
    textColor: '{colors.ink}'
    typography: '{typography.mono-label}'
    borderLeft: '2px solid {colors.rust}'
    padding: '4px 12px'
    transform: 'rotate(-1.5deg)'
  stamp:
    border: '2px dashed {colors.rust}'
    textColor: '{colors.rust}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.full}'
    transform: 'rotate(-12deg)'
  index-card:
    background: '{colors.paper}'
    rounded: '{rounded.md}'
    padding: '28px'
    shadow: '0 30px 60px -30px rgba(26,22,16,0.35)'
  field:
    backgroundColor: 'transparent'
    borderBottom: '1.5px solid {colors.hairline}'
    textColor: '{colors.ink}'
    typography: '{typography.body}'
    focusBorderColor: '{colors.rust}'
  chip:
    backgroundColor: 'rgba(216,160,86,0.4)'
    textColor: '{colors.ink}'
    typography: '{typography.body}'
    rounded: '{rounded.full}'
    padding: '4px 10px'
motion:
  progress-bar: 'fixed 3px rust top rail, scaleX 0→1 scrubbed to scroll via GSAP ScrollTrigger'
  headline-wipe: 'h1 clipPath inset(0 100% 0 0)→0 over 1.2s power2.inOut on load'
  can-hover: 'card translateY(-4px) rotate(-1deg) over .4s ease; circular preview fades/scales in with sepia, burn glow to .55'
  marquee: 'marq keyframes translateX(0→-50%), 40s linear infinite'
  gear-spin: 'two SVG reels spin 360deg, 22s and 14s linear infinite (one reversed)'
  submit-morph: 'button collapses to 56px circle (.35s) showing check; a dashed stamp drops from -60vh with bounce.out over .9s'
icons:
  library: Tabler Icons (webfont, ti)
  style: outline
  sizes: { sm: 16px, md: 18px, lg: 20px }
  color: '{colors.ink}'

Reelbox — Celluloid

reelbox-design · alpha

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

Overview

Reelbox renders "Celluloid," a fictional Super-8 family-film archive, as a warm analog scrapbook. The whole page sits on aged cream paper (#F0E6CE) printed in near-black ink (#1A1610), and almost every accent is one of two voltages: a soft amber (#D8A056) for highlights and a burnt rust (#A84A26) for action. The signature move is texture and craft layered on top of clean Tailwind layout — a fixed SVG fractal-noise grain overlay (.grain-fixed, multiply blend), sprocket-hole filmstrip rails (radial-gradient dots on an ink strip), washi-tape corners, dashed rotated rubber stamps, and a hero of circular film "tins" that on hover lift, rotate slightly, and bloom a sepia preview behind a radial "film-burn" glow. Type tells the era: an optical Fraunces serif display (set huge — 140px hero, opsz 144) with italic light variants, an Inter body, and JetBrains Mono everywhere as ledger/metadata labels (§ 02 — THE VAULT, frame timecodes, stats). Caveat handwriting signs the memory cards. Geometry is mixed: hard 2px ink rules and borders coexist with rounded-2xl/3xl cards and fully pill-shaped controls.

Colors

Brand / Voltage. Two accents carry the system. amber #D8A056 is the warm highlight — the logo film glyph, the featured can-card fill, the highlighted marquee words, the playback timeline fill, and the spinning gear graphic. rust #A84A26 is the hot action color — primary CTAs ("Thread a new reel"), every section eyebrow (§ 0n —), the dashed stamp, washi tape, the PENDING state card, the focus underline on inputs, and the Caveat signature.

Surface. cream #F0E6CE is the page background and the light text used on dark panels. cream-2 #E8DCBA is a secondary surface (the stats ticker at 60% opacity, the second can-card). paper is a vertical gradient #F6EFD9 → #EFE3C5 for the index-card and framed-photo panels, with #F6EFD9 (paper-flat) used solid for tape labels. ink #1A1610 doubles as the darkest surface: the filmstrip section, the dark can-card, the nav avatar, and the rust/ink CTA buttons.

Text. Primary text is ink. Body copy on cream runs at rgba(26,22,16,0.75); faint mono metadata at rgba(26,22,16,0.55). On ink and rust surfaces text flips to cream (often at 60–85% opacity).

Hairlines. Nav and footer borders are rgba(26,22,16,0.15). Structural rules — the ticker top/bottom and metadata column tops — are full-strength 2px ink. Form underlines are rgba(26,22,16,0.25) on light and rgba(240,230,206,0.4) on dark.

Gradient / Effect. The hover burn glow is a radial gradient from rgba(255,180,80,0.7) through rgba(168,74,38,0.4) to transparent in screen blend; framed photos get a vignette radial darkening to rgba(26,22,16,0.35).

Typography

Four families, all from Google Fonts, plus Tabler icon webfont. The display face is Fraunces (serif, font-variation-settings: 'opsz' 144 for the dramatic optical-size cut), used for every headline and card title, frequently with an italic light (300) inflection on a single word. Inter is the body and nav face. JetBrains Mono is the workhorse label/metadata face — uppercase, wide-tracked, used for eyebrows, stats, timecodes, and form labels. Caveat is handwriting for the signed annotation. All are open-source; no substitutes needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	140px	500	0.88	-0.04em	Hero H1 (also 88px footer, 64/58px section H2)
display-italic	inherits	300	—	—	Italicized accent word inside displays
heading	64px	500	1.0	tight	Section H2 ("Reels, by the tin.")
card-title	20px	400/500	1.1	—	Can-card titles, index-card sub-heads
body	15px	400	1.7	—	Paragraphs, button labels, chips
mono-label	11px	400	—	0.2em	Eyebrows, metadata, form labels (uppercase)
mono-stat	34px	400	1.0	—	Ticker numbers (042, 1968–82, 14:32:08)
nav-link	11px	600	—	0.22em	Nav links, pill button text (uppercase)
hand	26px	400	—	—	Caveat signature, rotated -1deg

Mono sizes range tiny (9–11px labels) to large (22–34px stat readouts); nav-link and mono-label are the only consistently uppercased styles.

Layout

Base unit is 4px on Tailwind's scale; sections breathe at py-16/20 and panels at p-10. Every band centers on a max-w-[1360px] container with px-8 gutters. The page is a vertical sequence of full-bleed bands: a three-column grid nav (links / centered logo lockup / account actions), a hero with a 140px serif headline and a 12-column intro grid, a 5-column stats ticker bordered top and bottom in 2px ink, a scrolling mono marquee, "The Vault" 12-column bento of can-cards (a 6-col×2-row featured tin plus 3-col tiles), an ink filmstrip section with a horizontally-scrolling sprocket rail and a playback timeline, a 12-column "Stories" split (7-col framed photo + metadata grid / 5-col index card), a "Digitize" panel split 5/7 (rust info column with spinning gears / cream request form), and a footer with an 88px serif sign-off over three mono link columns. Whitespace is generous but the composition is dense with collage props (tape, stamps, corners, reticles).

Elevation & Depth

Depth comes mostly from texture and layering, not conventional cards-on-shadow. The fixed grain overlay (opacity .12, multiply) and per-section .grain (.18) sit over everything. Real shadows are reserved for the paper panels: 0 30px 60px -30px rgba(26,22,16,0.4) (framed photo) and …0.35 (index card) — long, soft, low. Tape labels carry a 1px bottom shadow; washi tape a small 0 2px 6px rgba(0,0,0,.1). Circular tin previews use ring shadows (0 0 0 3px rgba(26,22,16,0.45), 0 0 30px rgba(255,180,80,0.35)). Hard 2px ink borders (ticker, digitize panel, can-4 outline) and vignettes provide the rest of the structure.

Shapes

A deliberately mixed radius story. Filmstrip frames are nearly sharp (rounded-sm 2px) to read as film cells; paper panels are softly rounded-md (6px); form option tiles rounded-xl (12px); vault can-cards rounded-2xl (16px); the digitize panel rounded-3xl (24px). All interactive controls — buttons, nav pills, icon buttons, avatars, chips, the tin reveals, and timeline dots — are fully pill/circle (rounded-full). Counterpointing the soft cards are hard square fixtures: 2px ink borders, the dashed-stamp circle, and the L-shaped focus corners.

Components

Nav link — uppercase Inter 11px/0.22em, ink at 80%, hover rust. No fill.
Logo lockup — 36px ink circle with amber Tabler film glyph + Fraunces "Celluloid" 22px and a mono "EST. ARCHIVE · 1968" subline.
Primary button — rust fill, cream text, full pill, 48px tall, px-6, Inter 14px medium + trailing arrow icon (e.g. "Thread a new reel").
Secondary button — transparent, 1px ink border, ink text, full pill, 48px.
Dark pill button — ink fill, cream text, nav-link type (filter chips, "Save story", account button with amber dot).
Icon button — 36px circle, 1px ink/25 border, ink/70 glyph; hover inverts to ink fill + cream glyph.
Can-card — rounded-2xl tile (p-5/7), fill amber / cream-2 / ink / rust / bordered, holding a circular tin image, a rotated tape-label code, a mono duration, and a Fraunces title; hover reveals a sepia photo + burn glow.
Tape label — #F6EFD9 chip, mono 11px/0.12em, 2px rust left border, rotated -1.5°, faint bottom shadow.
Stamp — 2px dashed rust ring, rust mono bold text, rotated -12°, with two faint inner rules; reads "ARCHIVED 1974" / "SCHEDULED".
Index card — paper-gradient panel, ruled lines-bg, washi tape corner, dashed-divider sections, people chips, hand-signed.
Field — borderless transparent input with 1.5px underline (ink/25 light, cream/40 dark), Inter 16px, rust underline on focus.
Chip — amber/40 fill (or dashed ink border for "+ identify"), full pill, Inter 12px.
Stat readout — mono number 22–34px over a mono/0.2em label, rust used for emphasis digits and dividing characters.

Motion

GSAP + ScrollTrigger drive the dynamics. A 3px rust progress bar is pinned top and scrubbed to scroll (scaleX 0→1). The hero headline wipes in via clipPath inset(0 100% 0 0)→0 over 1.2s power2.inOut on load. Can-cards on hover lift translateY(-4px) rotate(-1deg) (.4s ease) while their circular preview fades and scales from .85→1 with sepia(.4) contrast(1.1) and the burn glow rises to .55. A mono marquee loops translateX(0→-50%) over 40s linear. The digitize gears are two SVG reels spinning 360° at 22s and 14s (one reversed). The form submit morphs the button to a 56px circle showing a check (.35s) then drops a dashed "SCHEDULED" stamp from -60vh with bounce.out over .9s.

Iconography

Tabler Icons via webfont (ti ti-*), outline style. Used for nav controls (search, bell), buttons (arrow-up-right, player-play, arrow-right, chevrons, tag, download, bookmark, microphone, check), the logo (movie), and filmstrip status (volume-off, circle-dot, focus-2). Typical sizes are text-base–text-lg (16–20px); glyphs inherit their container's color — ink on cream, cream on dark, amber/rust for accents.

Do's and Don'ts

Do keep the cream/ink base and spend color only as amber-highlight / rust-action; let the two voltages stay scarce.
Do layer the grain, tape, stamps, sprockets, reticles, and vignettes — the craft props are the brand.
Do use Fraunces big with a single italic-light accent word, JetBrains Mono for every label/stat/timecode, and Caveat only for human signatures.
Do keep all controls pill/circle while letting cards step through the rounded scale.
Don't introduce cool/bright hues, flat pure-white surfaces, or drop the grain — it kills the analog feel.
Don't set body or UI copy in Fraunces, or set headlines in Inter/Mono.
Don't trade the long soft paper shadows for generic card elevation, or square off the pill controls.

Known Gaps

The Tabler icon font is loaded from CDN; exact stroke width is the library default (not authored here) — recorded as outline.
burn and vignette are gradient effects; their stops are read verbatim from CSS but the perceived color is composite (screen/multiply blend over images).
The paper token is a gradient, not a flat hex; paper-flat #F6EFD9 is its solid top stop used for tape labels.
Spacing tokens are inferred from the Tailwind classes actually present (4px base); the template does not declare a formal spacing scale.
The spin keyframe for the gears is defined inline inside an SVG <defs> block rather than the main stylesheet.