name: silas-mccallum-design
version: alpha
description: >
  A traditional sign-painter's portfolio rendered as warm letterpress: a cream
  broadside (#F2EEDA) carrying near-black ink type (#141010), lit by 23-karat
  gold (#C49A2A) and a show-card red (#BC2B2B). The signature moves are kinetic
  Western display type — a giant clamped 'Rye' headline that reveals
  character-by-character via clip-path and scrubs its letter-spacing on scroll —
  plus a JS-driven velocity marquee, a cursor-tracked project list with a gilded
  preview card, a pinned six-stage "anatomy" panel swap, and a hover-expand bento
  of the trade's tools. Geometry is sharp-cornered throughout (zero border-radius
  except the nav dot), held together by 1–2px hairlines and gold borders rather
  than shadows.
colors:
  # Surface
  bg-primary: '#F2EEDA'   # cream broadside — page background, light sections, reversed-out type on dark
  bg-dark: '#141010'      # near-black ink — dark sections (anatomy, footer), strip, image scrims, borders
  # Text
  text-primary: '#141010' # body + headings ink on cream
  text-on-dark: '#F2EEDA' # cream type reversed out on dark surfaces
  # Brand / Accent
  accent-gold: '#C49A2A'  # 23-karat gold — primary accent: gilded headline word, rules, labels, borders, hover fills
  accent-red: '#BC2B2B'   # show-card red — marquee + quote section fills, CTAs, hover title color, submit button
  accent-ochre: '#D4862A' # warm ochre — form field labels only
  # Hairlines (derived, alpha)
  hairline-ink: 'rgba(20,16,16,0.12)'   # list dividers on cream
  hairline-gold: 'rgba(196,154,42,0.25)' # gold cell dividers in dark strip
  # Scrims / Gradient
  scrim-dark: 'rgba(20,16,16,0.75)'  # image hover overlays (0.75–0.92 variants)
  hero-veil: 'linear-gradient(100deg, #F2EEDA 0%, #F2EEDA 36%, rgba(242,238,218,0.55) 60%, rgba(242,238,218,0.25) 100%)' # left-weighted cream veil over hero photo, plus a 24px ink dot-grid
typography:
  display:
    fontFamily: "'Rye', serif"
    fontSize: clamp(72px, 14vw, 220px)
    fontWeight: 400
    lineHeight: 0.92
  ui:
    fontFamily: "'Alfa Slab One', serif"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 1.8px
    textTransform: uppercase
  body:
    fontFamily: "'Libre Baskerville', serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.65
  body-italic:
    fontFamily: "'Libre Baskerville', serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    fontStyle: italic
rounded:                  # essentially sharp — no radius scale in use
  none: 0px
  full: 9999px            # only the 8px nav-logo dot
spacing:                  # 4px base unit; section rhythm in multiples
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 32px
  '2xl': 48px
  '3xl': 64px
  '4xl': 96px
components:
  nav:
    backgroundColor: transparent
    textColor: '{colors.text-on-dark}'
    typography: '{typography.ui}'
    padding: '20px 32px'
    note: 'fixed, full-width, mix-blend-mode: difference so it inverts over any surface'
  tag-chip:
    backgroundColor: transparent
    textColor: '{colors.accent-gold}'
    typography: '{typography.ui}'
    border: '1px solid {colors.accent-gold}'
    rounded: '{rounded.none}'
    padding: '6px 14px'
    note: 'fills gold with cream text on hover/active'
  hero-strip-cell:
    backgroundColor: '{colors.bg-dark}'
    textColor: '{colors.accent-gold}'
    typography: '{typography.ui}'
    border: '1px solid {colors.hairline-gold}'
    padding: '14px 20px'
    note: 'bottom coordinate strip, 2px gold top border'
  marquee:
    backgroundColor: '{colors.accent-red}'
    textColor: '{colors.text-on-dark}'
    typography: '{typography.display}'
    note: 'italic display type, gold ✦ separators, 2px dark top+bottom borders'
  project-list-row:
    textColor: '{colors.text-primary}'
    typography: '{typography.display}'
    border: '1px solid {colors.hairline-ink}'
    padding: '18px 0'
    note: 'title goes red on hover; gold N° and faded year flank it'
  cursor-preview:
    backgroundColor: '{colors.bg-dark}'
    border: '2px solid {colors.accent-gold}'
    rounded: '{rounded.none}'
    note: '200x280 fixed card that lerp-follows the cursor over the list'
  bento-tile:
    backgroundColor: '{colors.bg-dark}'
    rounded: '{rounded.none}'
    note: 'image or type tiles; red/cream/dark variants; clip-path reveal, hover scale 1.04 with siblings dimmed to 0.55'
  form-input:
    backgroundColor: transparent
    textColor: '{colors.text-primary}'
    typography: '{typography.body-italic}'
    border: '2px solid {colors.text-primary}'
    note: 'underline-only fields; bottom border turns gold on focus; ochre labels'
  substrate-radio:
    backgroundColor: transparent
    textColor: '{colors.text-primary}'
    typography: '{typography.ui}'
    border: '1px solid {colors.text-primary}'
    padding: '8px 16px'
    note: 'checked = ink fill with gold text'
  btn-submit:
    backgroundColor: '{colors.accent-red}'
    textColor: '{colors.text-on-dark}'
    typography: '{typography.ui}'
    rounded: '{rounded.none}'
    padding: '16px 32px'
    note: 'goes ink-dark on hover'
motion:
  hero-char-reveal: 'per-character clip-path inset(0 100% 0 0) -> 0, 0.7s cubic-bezier(.2,.8,.2,1), 35ms stagger'
  hero-subhead-blur: 'per-word blur(12px)+opacity 0 -> sharp, 0.6s, 80ms stagger after 800ms'
  hero-letterspacing-scrub: 'scroll scrubs --hero-ls 0 -> 0.06em across hero height (rAF)'
  marquee: 'JS transform translateX loop; speed boosted/damped by scroll velocity (boost 0.4–1.0)'
  clip-reveal: 'headings + grid cards clip-path inset(0 100%->0) 0.7–0.9s cubic-bezier(.2,.8,.2,1) on IntersectionObserver'
  skew-settle: 'works list rows + quote words translateY+skewY -> 0, 0.6–0.7s, 60ms stagger'
  blur-to-sharp: 'anatomy heading words blur(16px) -> 0, 0.7s, 90ms stagger'
  anatomy-pin: '300vh sticky stage that swaps photo+panel+pip across 6 stages on scroll progress'
  parallax: 'quote mark translateX, commission image translateY -0.2 on scroll (rAF)'
  image-hover: 'card img scale 1.03–1.04 over 0.8s; meta scrim fades+slides up 0.35s'
icons:
  library: inline unicode glyphs (no icon font)
  style: 'typographic — arrows ↗ ↓, ornaments ✦ § ⚒ ⅜, em-dashes; gold dot in nav'
  color: '{colors.accent-gold}'

Silas McCallum

silas-mccallum-design · alpha

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

Overview

Silas McCallum is the portfolio of a fictional Brooklyn sign painter and glass gilder, and the page is built to look like one of his broadsides. The surface is a warm cream paper, #F2EEDA, printed in near-black ink, #141010, and lit by two craft pigments: 23-karat accent-gold #C49A2A and a show-card accent-red #BC2B2B (a warmer accent-ochre #D4862A appears only on form labels). Three Western display faces carry the whole identity — Rye for giant ornamental headlines, the chunky slab Alfa Slab One for every uppercase micro- label, and Libre Baskerville (often italic) for body and pull quotes. The signature move is kinetic display type: the hero's clamped clamp(72px,14vw,220px) "SILAS / McCALLUM" reveals character-by-character via clip-path and then scrubs its letter-spacing open as you scroll. Below it, a velocity-reactive red marquee, a cursor-tracked project list that floats a gold-bordered preview card, a 300vh pinned "From sketch to gild" stage that swaps through six gilding steps, and a hover-expand bento of brushes and gold leaf. Everything is sharp-cornered: there are no rounded corners anywhere except the 8px dot in the logo. Structure is held by hairlines, gold borders, and full-bleed photography rather than shadows.

Colors

Surface. bg-primary #F2EEDA is the cream page and every light section; bg-dark #141010 is the ink used for dark sections (the anatomy pin, footer), the hero coordinate strip, image hover scrims, and most borders.

Text. text-primary #141010 is body and headings on cream; text-on-dark #F2EEDA reverses the cream out over dark surfaces.

Brand / Accent. accent-gold #C49A2A is the dominant accent — the gilded second headline word, every rule and divider, micro-labels, the cursor-preview border, the bento gold-leaf accents, and the fill that tag chips/substrate selections flip to. accent-red #BC2B2B fills the marquee and the pull-quote section, and drives CTAs, hovered list titles, and the submit button. accent-ochre #D4862A is used narrowly, only for the commission form's field labels.

Hairlines. Dividers are ultra-thin: rgba(20,16,16,0.12) between project- list rows on cream, and rgba(196,154,42,0.25) between cells in the dark strip.

Scrims / Gradient. Image hover overlays are rgba(20,16,16,0.75–0.92). The hero composites a 24px ink dot-grid over a left-weighted cream gradient veil (linear-gradient(100deg, #F2EEDA … rgba(242,238,218,0.25))) so the dark type stays legible on the left while the craft photo reads on the right.

Typography

Three Google-Fonts Western/period faces, all serif-family fallback. Rye (spurred Tuscan display) is the headline voice; Alfa Slab One (heavy slab) is the all-caps UI/label voice, always tracked 0.14–0.2em and uppercase at ~10px; Libre Baskerville is the reading face for body, descriptions, and italic pull quotes. There are no bespoke faces to substitute — all three load from one Google Fonts @import.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(72px,14vw,220px)	400	0.92	scroll-scrubbed 0→0.06em	hero H1; section headings (smaller clamps), list/card titles, marquee
ui	10px	400	—	0.14–0.2em	nav, eyebrows, labels, chips, strip cells, buttons
body	15px	400	1.65	0	paragraphs, intros
body-italic	14px	400	1.6	0	hero desc, pull quotes, annotations

Layout

Base unit 4px; horizontal section padding is a consistent 32px, vertical section rhythm runs in 48 / 64 / 96px steps. The page is a single long scroll of full- bleed sections (no global max-width container; inner copy blocks cap around 420–900px). Structure: a fixed difference-blend nav; a 100vh hero with absolutely positioned headline, kicker, subhead, CTA, and a dark bottom coordinate strip; a full-width marquee band; a Selected Works block (21:9 featured banner + cursor- tracked list + a 12-column / 4-column mixed-span photo grid); a 300vh pinned two-column anatomy section; a 12-column tools bento (260px rows); an edge-bleed red pull quote; a two-column commission section (full-bleed photo + underline form); and a dark footer with a giant gold logotype. Whitespace is generous and editorial, with type frequently bleeding past the right edge intentionally.

Elevation & Depth

There are effectively no drop shadows. Depth comes from (1) value contrast — dark photo/section panels against cream; (2) hairline and gold borders (1–2px) acting as edges and dividers; (3) layered scrims over imagery on hover; and (4) parallax and clip-path motion. The only soft glow is a faint cream text-shadow: 0 1px 18px rgba(242,238,218,0.55) on the hero headline to lift it off the photo. The gold cursor-preview and bento tiles read as floating purely through their 2px gold border and scale, not shadow.

Shapes

Aggressively rectilinear. Global border-radius is 0 — banners, cards, tiles, chips, the preview card, and buttons are all hard-cornered, reinforcing the printed-broadside feel. The sole exception is the border-radius: 50% 8px dot in the nav logo. Aspect ratios do the shaping work instead: 21:9 banner, 4:3 / 1:1 / 3:1 grid cards, and a 200×280 portrait preview.

Components

• Nav — transparent, fixed, full-width, mix-blend-mode: difference so it inverts over any background; Alfa Slab One 10px caps; gold dot + "EST. MDCCCXCVIII", links, "Brooklyn, NY ↗".
• Tag chip — transparent with 1px gold border, gold caps text, 6×14px; fills accent-gold with cream text on hover/active.
• Hero strip cell — bg-dark ground, gold caps, 1px gold hairline dividers, 2px gold top border; 14×20px.
• Marquee — accent-red band, italic Rye type, gold ✦ separators, 2px ink top/bottom borders.
• Project list row — Rye title (red on hover) between a gold "N° xx" and a faded year, 18px vertical, 1px ink hairline dividers.
• Cursor preview — 200×280 fixed card, bg-dark ground, 2px gold border, lerp-follows the cursor.
• Bento tile — sharp bg-dark / accent-red / cream variants; image tiles scale 1.04 on hover while siblings dim to 0.55; gold N° labels and overlays.
• Form input — underline-only (transparent, 2px ink bottom border) that turns gold on focus; ochre Alfa Slab One labels numbered "01 /".
• Substrate radio — pill-less square chip, 1px ink border; checked = ink fill with gold text ("Glass / Wood / Metal / Masonry / Vehicle Body").
• Submit button — accent-red fill, cream caps, 16×32px, goes ink-dark on hover ("Send the Inquiry ↗").

Motion

Motion-heavy and entirely vanilla-JS/CSS (no libraries). Hero headline reveals per character via clip-path (0.7s, 35ms stagger), the subhead blurs in per word, and scrolling scrubs the headline's letter-spacing 0→0.06em. A JS transform loop drives the marquee, speeding/damping with scroll velocity. Section headings and grid cards wipe in with clip-path on IntersectionObserver; works-list rows and quote words settle from a translateY+skewY; the anatomy heading blurs to sharp. The anatomy section is a 300vh pinned stage that swaps photo, panel, and progress pip across six stages by scroll progress. Quote mark and commission image parallax on scroll. Image cards scale ~1.03–1.04 over 0.8s with a fading scrim. There is a @media (prefers-reduced-motion) comment block but it is empty.

Iconography

No icon font. All "icons" are typographic: unicode arrows (↗, ↓), ornaments (✦, §, ⚒), the fraction 3⅜, em-dashes as connectors, and a single round gold dot in the nav. Roman numerals (N° I–VII) and dotted-letter "N°" markers number the works and tools. Color defaults to accent-gold for these marks; ornaments inherit section text color.

Do's and Don'ts

• Do keep every corner sharp (radius 0); the only round element is the nav dot.
• Do reserve accent-gold for accents/borders and accent-red for fills, CTAs, and hover emphasis; keep accent-ochre to form labels.
• Do set all micro-labels in Alfa Slab One, uppercase, tracked 0.14–0.2em.
• Do use hairlines and gold borders for structure instead of drop shadows.
• Don't introduce a sans-serif or break the three-face Western type system.
• Don't add box-shadows or glassmorphism — depth is value + border + motion.
• Don't let Rye carry body copy; it is display-only.

Known Gaps

• Spacing scale is inferred from observed 4/8/12/20/32/48/64/96px values; there is no explicit token scale in the CSS beyond the color/font :root variables.
• The prefers-reduced-motion block is present in the source as a header comment but contains no rules; reduced-motion behavior is effectively unimplemented.
• Letter-spacing on ui is given in em in the CSS (0.18em ≈ 1.8px at 10px); the token value is the px approximation.
• Hairline/scrim colors are derived rgba values grouped from multiple near- identical one-offs (0.75 / 0.82 / 0.92 ink scrims).