name: augustus-whitley-design
version: alpha
description: >
  A sign-painter's portfolio rendered as an editorial, almanac-style broadsheet.
  Warm letterpress paper (`#F4F0E4`) and near-black ink (`#141010`) carry the
  surface, lit by two voltages: burnished 23-carat gold (`#D4AC40`, applied as a
  vertical metallic gradient on display type) and show-card red (`#A82828`).
  Signature moves are a clipped-gradient "gold-text" effect with an animated
  shimmer overlay, italic Playfair Display drop-caps, a wax-seal SVG that rotates
  slowly, washi-tape number tabs, dotted "paper grain" backgrounds, a GSAP
  horizontal-scroll portfolio, and ledger-ruled form inputs. Type pairs an italic
  Playfair Display display face, a Bilbo Swash Caps script, Cinzel small caps,
  condensed Barlow uppercase labels, an Inter body, and a Special Elite typewriter
  accent. Geometry is mostly sharp-edged (no radius) with pill CTAs and full-round
  dots/seals — an old-trade, hand-lettered atmosphere.
colors:
  # Brand / Voltage
  gold: '#D4AC40'        # primary brand metal; seals, accents, labels, gradient base
  red: '#A82828'         # show-card red; drop-caps, italic accents, CTA pill, washi tape
  amber: '#B07A30'       # secondary bronze; chapter labels, hairlines, gradient stop
  # Surface
  paper: '#F4F0E4'       # warm letterpress page surface; light sections, light text on ink
  ink: '#141010'         # near-black; dark sections, body text on paper
  # Gradient stops (gold-text / gold-bg)
  gold-light: '#FBE38C'  # top highlight of gold metallic gradient
  gold-deep: '#8A6418'   # dark trough of gold metallic gradient
  # Hairlines / overlays
  hairline-amber: 'rgba(176,122,48,0.45)'  # .hairline border
  hairline-gold: 'rgba(212,172,64,0.5)'    # .hairline-gold border
  vignette: 'rgba(20,16,16,0.85)'          # hero radial vignette edge
typography:
  display:
    fontFamily: "'Playfair Display', serif"
    fontSize: clamp(88px, 14vw, 220px)
    fontWeight: 900
    lineHeight: 0.85
    letterSpacing: -0.02em
  script:
    fontFamily: "'Bilbo Swash Caps', cursive"
    fontSize: clamp(44px, 8vw, 160px)
    fontWeight: 400
    lineHeight: 1
  cinzel:
    fontFamily: "'Cinzel', serif"
    fontSize: 14px
    fontWeight: 500
    letterSpacing: 0.3em
  cond:
    fontFamily: "'Barlow Condensed', sans-serif"
    fontSize: 11px
    fontWeight: 500
    letterSpacing: 0.3em
    textTransform: uppercase
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.7
  tape:
    fontFamily: "'Special Elite', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.1em
rounded:
  none: 0px      # cards, images, hairline frames, washi tabs (all sharp)
  full: 9999px   # CTA pill, dots, rotating seals
spacing:                 # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 48px
  '3xl': 64px
components:
  ctaPill:
    backgroundColor: '{colors.red}'
    textColor: '{colors.paper}'
    typography: '{typography.cond}'
    rounded: '{rounded.full}'
    padding: '16px 40px'
    # label: "Submit Commission →"; hover swaps fill to ink
  washiTab:
    backgroundColor: '{colors.red}'   # repeating 45deg red/#8E1F1F stripe
    textColor: '{colors.paper}'
    typography: '{typography.tape}'
    rounded: '{rounded.none}'
    padding: '4px 16px'
    # rotated ~ -2deg; soft drop shadow; label like "Nº 01"
  projectCard:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.paper}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    border: '1px solid {colors.hairline-gold}'
    # hover reveals second image via clip-path inset wipe
  manifestoFrame:
    backgroundColor: 'rgba(255,253,245,0.6)'
    textColor: '{colors.ink}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    border: '1px solid {colors.hairline-amber}'
    padding: '40px / 64px (md)'
    # decorative L-shaped corner ticks in amber
  ledgerInput:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    # bottom 1.5px ink rule + repeating ruled-line background; focus rule turns red
  chip:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.cond}'
    rounded: '{rounded.none}'
    border: '1px solid rgba(20,16,16,0.4)'
    padding: '8px 16px'
    # substrate selector; hover fills ink, text paper
  seal:
    backgroundColor: '{colors.red}'
    textColor: '{colors.paper}'
    typography: '{typography.cinzel}'
    rounded: '{rounded.full}'
    # SVG wax seal with circular textPath; rotate-slow 30s
motion:
  shimmer: 'gold-text overlay sweep, 6s linear infinite (background-position 200% → -200%), mix-blend overlay'
  rotateSlow: 'wax seals rotate 360deg, 30s linear infinite'
  marquee: 'craft-term ticker translateX(-50%), 40s linear infinite'
  heroReveal: 'GSAP name fades up y:60 with blur(20px), 1.4s power3.out; lines stagger 0.15s'
  horizontalScroll: 'GSAP ScrollTrigger pins #portfolio-pin, scrubs hscroll-track x by track width'
  scrollReveal: 'manifesto/anatomy/tools/form elements fade+blur up on enter; tools grid staggers from center'
  revealImg: 'project card hover wipes second image via clip-path inset, 0.7s cubic-bezier(.2,.8,.2,1)'
  submitPress: 'CTA scale 0.94 on pointerdown, elastic.out spring back on release'
icons:
  library: inline SVG
  style: hand-drawn flourishes + wax-seal compositions; typographic glyphs (✦ ✶ ★ →) as ornaments
  stroke: 1.4px (.flourish), 1px (seal rings)
  sizes: { sm: 16px, md: 24px, lg: 96px }
  color: '{colors.gold}'

Augustus Whitley

augustus-whitley-design · alpha

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

Overview

Augustus Whitley is a sign-painter's portfolio dressed as a turn-of-the-century trade almanac. The page lives on warm letterpress paper (#F4F0E4) and deep ink (#141010), and is lit by two voltages: burnished gold (#D4AC40) and show-card red (#A82828), with a bronze amber (#B07A30) as the connective tissue for chapter labels and hairlines. The signature move is the metallic display type — .gold-text clips a five-stop vertical gradient (#FBE38C → #D4AC40 → #8A6418 → #E8C46B → #B07A30) into giant italic Playfair Display headlines, then layers a .shimmer overlay that sweeps light across the letters every 6 seconds. The surface is textured, not flat: .paper-grain and .ink-grain paint dotted radial backgrounds, a .vignette darkens the hero edges, banner stripes and brick dividers cut between sections, and slowly rotating SVG wax seals sit in the corners. Content is organized as numbered "Chapters" and "Plates," tagged with washi-tape number tabs and typewriter captions. The type story is deliberately polyglot — Playfair display, a Bilbo Swash Caps script, Cinzel small caps, condensed Barlow uppercase micro-labels, Inter body, and a Special Elite typewriter face — and the geometry is almost entirely sharp-edged, reserving round corners for the red CTA pill and the circular seals.

Colors

Brand / Voltage. gold #D4AC40 is the primary metal — seals, micro-labels, marquee glyphs, and the base of every gold gradient. red #A82828 is show-card red, used for drop-caps, italic emphasis words, the CTA pill, and the diagonal washi-tape stripe (paired with a darker #8E1F1F). amber #B07A30 is the bronze secondary — chapter eyebrows, hairline borders, index dividers, and the trough of the gold gradient.

Surface. paper #F4F0E4 is the warm page; it backs the light sections and also serves as light text on dark sections. ink #141010 is near-black, backing the hero, portfolio, tools, and footer and serving as body text on paper.

Gradient stops. The metallic effect uses gold-light #FBE38C as the top highlight and gold-deep #8A6418 as the dark trough, with gold and amber between (.gold-text, .gold-bg, and the SVG gradient #g).

Hairlines / overlays. .hairline is hairline-amber rgba(176,122,48,0.45); .hairline-gold is rgba(212,172,64,0.5). The hero vignette fades to rgba(20,16,16,0.85) at the edges. Body copy on paper is set at ink/85, micro- labels at ink/60.

Typography

All faces load from a single Google Fonts @import. The display face is Playfair Display (italic, 900) — bespoke high-contrast didone used at huge sizes. The script is Bilbo Swash Caps; small caps are Cinzel; condensed labels are Barlow Condensed; body is Inter (the page calls it .font-sohne, simulating Söhne); the typewriter accent is Special Elite. All are open-source via Google Fonts, so no substitution is required.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(88–220px)	900	0.85	-0.02em	Italic Playfair headlines, drop-caps, card titles
script	clamp(44–160px)	400	1	—	"& Sons", signatures, "Thank you, kindly"
cinzel	14px (also 7–11px in SVG)	500	—	0.3em	Footer headings, seal text, marquee
cond	11px	500	—	0.18–0.5em	Uppercase eyebrows, labels, captions, nav
body	15px	400	1.7	—	Manifesto & paragraph copy (Inter)
tape	10–12px	400	—	0.1em+	Washi number tabs, stage tags, spec stamps

Layout

Base unit is 4px on Tailwind's scale; section rhythm uses large vertical padding (py-24–py-40). The page is a sequence of full-bleed chaptered sections: (1) a full-h-screen ink hero with autoplay video, layered gradient + vignette, giant centered name, corner ornaments, and a rotating seal; (2) a banner stripe + infinite marquee; (3) a centered max-w-5xl manifesto in a hairline frame with corner ticks and a drop-cap; (4) a GSAP-pinned horizontal-scroll portfolio of full-height panel-cards (intro panel → variable-width project plates → index panel); (5) a max-w-7xl four-stage anatomy grid plus a two-up comparison; (6) a 6×4 bento "tools of the trade" grid on ink-grain; (7) a two-column commissions split (sticky image + ledger form); and a four-column ink footer. Max content width is max-w-7xl. Whitespace is generous and editorial; the signature structural moves are the horizontal-scroll plate track and the bento tool grid.

Elevation & Depth

Depth comes from borders, gradients, and texture rather than soft drop shadows. Cards and images are framed with 1px gold/amber hairlines, not box-shadows. Layered linear/radial gradients (from-ink overlays on imagery, the hero vignette, dotted grain) create atmospheric depth. The washi tape carries a genuine soft shadow (0 4px 14px rgba(0,0,0,0.25)). On hover, .tool-cell lifts with a gold ring + glow (0 0 0 1px rgba(212,172,64,0.6), 0 20px 60px -10px rgba(212,172,64,0.45)). The gold-text also carries a tiny text-shadow + drop- shadow for engraved relief.

Shapes

Overwhelmingly sharp — rounded.none (0px) on cards, image frames, the manifesto/anatomy panels, bento cells, and washi tabs, reinforcing the broadsheet/letterpress feel. Round corners are reserved for two roles: the rounded.full red CTA pill and the circular elements (the status dot, the rotating wax seals). The washi tabs and stage tags add intentional rotation (±2–3deg) for a hand-applied look rather than a radius.

Components

• ctaPill — red fill, paper text, condensed uppercase 13px, fully rounded, 16px 40px padding; hover swaps to ink. Label: "Submit Commission →".
• washiTab — diagonal red/#8E1F1F stripe, paper typewriter text, sharp, rotated, soft shadow; labels like "Nº 01", "Stage I · Pencil".
• projectCard — ink ground, gold-hairline image frame, Playfair title + gold condensed metadata; hover wipes a second (drawing) image via clip-path.
• manifestoFrame — translucent paper fill, amber hairline + L-shaped corner ticks, Playfair body with a red 110–170px drop-cap.
• ledgerInput — transparent with a 1.5px ink bottom rule over a repeating ruled-line background; focus turns the rule red.
• chip (substrate selector) — sharp ink-hairline tags, condensed uppercase; hover fills ink, text paper. Labels: Glass / Wood / Brick / Steel / Other.
• seal — SVG wax seal: red disc, gold/paper rings, Cinzel circular textPath, italic "A·W" monogram; rotates slowly.

Motion

GSAP + ScrollTrigger drive the page. Hero: the name fades up y:60 with a 20px blur over 1.4s (power3.out), eyebrow/script lines stagger in. The portfolio section is pinned and its track scrubbed horizontally by its full scroll width, with each plate fading up as it enters. Manifesto, anatomy, tools, and form rows reveal on scroll with fade + blur; the tool grid staggers from center. CSS-level: .shimmer sweeps the gold letters (6s), .rotate-slow spins seals (30s), .marquee scrolls terms (40s), and project cards wipe their reveal image via clip-path (0.7s). The submit button presses to scale 0.94 and springs back with elastic.out.

Iconography

No icon font — iconography is inline SVG and typographic glyphs. The wax seals are composed SVGs (circles, circular textPath, monogram). Decorative ornaments are Unicode glyphs: ✦ and ✶ in the marquee (gold/red), ★ in seals, → in labels and CTAs, ✦ in nav. A .flourish class (stroke 1.4px, currentColor, no fill) is defined for hand-drawn line ornaments. Functional icon sizes range from small glyphs to the 96px gold-leaf-book SVG in the bento grid. Default ornament color is gold.

Do's and Don'ts

• Do keep display headlines in italic Playfair with the gold-gradient clip, and reserve red for emphasis words, drop-caps, the CTA, and washi tape.
• Do texture surfaces with the grain/vignette/stripe treatments and frame media with thin gold/amber hairlines rather than soft shadows.
• Do label content as numbered Chapters/Plates with condensed uppercase eyebrows and typewriter (Special Elite) tags.
• Don't round card or image corners — keep geometry sharp; rounding is only for the CTA pill, dots, and seals.
• Don't introduce flat solid-color cards or drop-shadow elevation; depth is hairlines, gradients, and grain.
• Don't flatten the type system to one face — the polyglot pairing (Playfair / Bilbo / Cinzel / Barlow / Inter / Special Elite) is the identity.

Known Gaps

• The gold gradients (.gold-text, .gold-bg, SVG #g) are multi-stop; the gold-light / gold-deep tokens capture the extremes; #E8C46B mid-stop is not tokenized separately.
• The washi tape stripe uses two reds (#A82828 / #8E1F1F); only the primary red is tokenized.
• Display/script fontSize is expressed as clamp(...) summarizing the real responsive text-[88px] md:[180px] lg:[220px] (and 44/68px, etc.) steps.
• .font-sohne maps to Inter in the markup (the footer credits "Söhne" as the intended/simulated face).
• Spacing scale is inferred from Tailwind utilities actually used; not an explicit design-token table in the source.