name: forge-design
version: alpha
description: >
  Forge is a blueprint-grid brutalist system for a men's hormone-optimization
  clinic. The surface is a warm engineering paper (#D6D3CC) overlaid with a
  48px graph-paper grid; everything is locked into a 1440px sheet bounded by
  3px jet-black rules. The single voltage is an electric utility yellow
  (#F2E94E) that snaps in on hover and marks the popular plan and CTAs, with a
  brick-red (#B5402F) reserved for the medical-notice band. Type is two faces:
  Archivo black for screaming uppercase display, JetBrains Mono for the
  technical micro-labels, registration codes, and coordinates. Signature moves:
  corner registration marks on tiles, "FIG.01 — SUBJECT" plate captions on
  grayscale photos, mono section indices (01 / SEC—HORMONE), instant 0ms invert
  hover, and zero border-radius throughout.
colors:
  # Brand / Voltage
  voltage: '#F2E94E'      # electric utility yellow — CTAs, hover invert, popular plan, "Measuring."
  brick: '#B5402F'        # brick red — medical-notice band only
  # Surface
  paper: '#D6D3CC'        # warm blueprint paper — page background and on-jet text
  jet: '#161616'          # near-black — rules, ink text, inverted panels
  # Text
  ink: '#161616'          # primary text on paper
  on-jet: '#D6D3CC'       # text on jet/brick panels
  # Hairlines / grid
  grid-line: 'rgba(22,22,22,0.10)'   # 48px blueprint graph lines
  rule-soft: 'rgba(214,211,204,0.30)' # paper rules at 30% inside jet bars (header dividers)
  rule-soft-25: 'rgba(214,211,204,0.25)' # paper rules at 25% inside stat band
typography:
  display:
    fontFamily: "'Archivo', sans-serif"
    fontSize: clamp(3.2rem,9vw,9rem)
    fontWeight: 900
    lineHeight: 0.88
    letterSpacing: -0.03em
    textTransform: uppercase
  heading:
    fontFamily: "'Archivo', sans-serif"
    fontSize: clamp(2rem,5vw,4rem)
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.02em
    textTransform: uppercase
  card-title:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 24px
    fontWeight: 900
    lineHeight: 0.95
    textTransform: uppercase
  body:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.625
  mono-label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.2em
    textTransform: uppercase
  mono-cta:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.15em
    textTransform: uppercase
rounded:
  none: 0px        # everything — brutalist, no radius anywhere
spacing:            # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 40px
  '3xl': 64px
components:
  topbar:
    backgroundColor: '{colors.jet}'
    textColor: '{colors.on-jet}'
    typography: '{typography.mono-label}'
    border: '3px solid {colors.jet}'   # bb3 base rule
    padding: '12px 16px'
  cta-primary:
    backgroundColor: '{colors.voltage}'
    textColor: '{colors.ink}'
    typography: '{typography.mono-cta}'
    border: '3px solid {colors.jet}'
    rounded: '{rounded.none}'
    padding: '16px 28px'   # px-7 py-4
    hover: 'invert-snap — instant 0ms to voltage fill, jet text/border'
  cta-secondary:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.mono-cta}'
    border: '3px solid {colors.jet}'
    rounded: '{rounded.none}'
    padding: '16px 28px'
  service-tile:
    backgroundColor: '{colors.paper}'   # featured tile uses {colors.jet}
    textColor: '{colors.ink}'
    typography: '{typography.card-title}'
    border: '3px solid {colors.jet}'
    rounded: '{rounded.none}'
    padding: '32px'        # p-8
    margin: '-1.5px'       # tiles overlap so rules collapse to single 3px line
    note: 'reg corner registration marks; invert-snap hover'
  stat-cell:
    backgroundColor: '{colors.jet}'
    textColor: '{colors.on-jet}'
    typography: '{typography.mono-label}'
    border: '3px solid {colors.rule-soft-25}'  # br3 internal dividers
    padding: '24px'        # p-6
  pricing-card:
    backgroundColor: '{colors.paper}'   # popular card uses {colors.voltage}
    textColor: '{colors.ink}'
    typography: '{typography.card-title}'
    border: '3px solid {colors.jet}'
    rounded: '{rounded.none}'
    padding: '32px'
    minHeight: '420px'
  fig-plate:
    backgroundColor: '{colors.jet}'
    textColor: '{colors.on-jet}'
    typography: '{typography.mono-label}'
    border: 'bt3 br3 — 3px jet top + right'
    padding: '8px 16px'
    note: 'bottom-left caption plate on grayscale photos, e.g. FIG.01 — SUBJECT'
  medical-band:
    backgroundColor: '{colors.brick}'
    textColor: '{colors.on-jet}'
    typography: '{typography.mono-label}'
    border: '3px solid {colors.on-jet}'   # b3 in paper color for the badge
    padding: '32px 40px'
motion:
  invert-snap: 'transition-duration 0ms !important — instant flip to voltage fill on hover (no ease)'
  counter: 'anime.js animate hero number 0 → 12,400 over 1600ms ease out(3), triggered onScroll'
  counter-label: 'section index ticks 0 → NN over 900ms ease out(3), zero-padded, onScroll'
  tile-reveal: 'opacity 0→1 + translateY 40→0 over 700ms ease out(3), staggered onScroll'
  hero-line: 'opacity 0→1 + translateY 100%→0 over 800ms ease out(4), 120ms stagger per line'
  reduced-motion: 'prefers-reduced-motion disables reveals; counters jump to final value'
icons:
  library: inline glyphs / ASCII
  style: typographic — arrows (→), bullets (●), quote marks ("), plus-codes (+01)
  color: '{colors.ink}'
  note: no icon font; all marks are characters or CSS-drawn registration corners

Forge

forge-design · alpha

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

Overview

Forge dresses a men's hormone-optimization clinic as an engineering blueprint. The page is a warm draftsman's paper #D6D3CC carrying a literal 48px graph grid (linear-gradient hairlines at rgba(22,22,22,0.10)), and the whole layout is a single max-w-[1440px] "sheet" framed by 3px jet-black rules (.bl3 .br3 .bb3). Sections stack as bordered registers, each tagged in the top-left with a JetBrains Mono index like 01 / SEC—HORMONE. The lone accent is an electric utility yellow #F2E94E — it fills the primary CTAs, marks the popular plan and the final word "Measuring.", and crucially is the hover state: the .invert-snap class kills the transition (0ms) so any interactive surface flips to a yellow fill with jet text in a single hard frame. A brick red #B5402F appears exactly once, for the medical-notice band. Type screams in Archivo black uppercase (leading-[0.88], tracking-[-0.03em], up to 9rem) against a quiet technical voice of JetBrains Mono micro-labels, registration codes, and coordinates (LAT 40.71 / LON -74.00). Photos are grayscaled and captioned with FIG.0X plates; tiles carry CSS-drawn corner registration marks. Nothing is rounded — radius is zero everywhere.

Colors

Brand / Voltage. voltage #F2E94E is the single accent: primary CTA fills, the .invert-snap hover state, the "OPTIMIZED — POPULAR" pricing card, and the word "Measuring." in the closing headline. brick #B5402F is used once, as the background of the medical-notice band.

Surface. paper #D6D3CC is the blueprint background and doubles as the text color on dark panels. jet #161616 is the ink for all rules and body text, and the fill for inverted panels (top bar, stat band, featured service tile, closing CTA, footer baseline).

Text. ink #161616 for type on paper; on-jet #D6D3CC for type on jet and brick panels.

Hairlines / grid. grid-line rgba(22,22,22,0.10) draws the 48px graph paper. Inside jet bars, dividers are paper at reduced opacity: rule-soft rgba(214,211,204,0.30) in the header and rule-soft-25 rgba(214,211,204,0.25) in the stat band.

Typography

Two Google Fonts, imported together: Archivo (400–900) carries both display and body (.font-display and .font-body both map to Archivo), and JetBrains Mono (400/500/700) carries every technical label. Display weights run at 900 (font-black) in tight, negative-tracked uppercase; body runs at 400 with leading-relaxed. Both are open-source via Google Fonts, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(3.2rem,9vw,9rem)	900	0.88	-0.03em	Hero + closing headlines, uppercase
heading	clamp(2rem,5vw,4rem)	900	0.9	-0.02em	Section titles ("Protocols, Exposed.")
card-title	24–48px	900	0.95	—	Service/pricing/step card titles, uppercase
body	15–16px	400	1.625	—	Paragraphs, plan feature lists
mono-label	10–12px	400	1.5	0.18–0.25em	Section indices, fig plates, footer, coords
mono-cta	13–14px	700	1	0.15em	Button labels, uppercase

Layout

Base unit 4px on Tailwind's scale; padding clusters at p-6/p-7/p-8 (24/28/ 32px) for tiles and sm:p-10/p-16 (40/64px) for hero and large sections. The page is one centered max-w-[1440px] sheet bounded left/right/bottom by 3px jet rules, so the entire site reads as a bordered engineering drawing. Sections are full-width registers stacked vertically; content grids are 12-col for the hero (7/5 split) and 3- or 4-col for services, steps, results, and pricing. The services grid uses grid-flow-row-dense with a md:col-span-2 md:row-span-2 featured tile. Every tile sets -m-[1.5px] so adjacent 3px borders overlap into a single shared rule — the hallmark "collapsed grid" look. Each section pins a mono index label absolutely top-left (top-3 left-4). Whitespace is dense and structural; the grid does the breathing, not margins.

Elevation & Depth

No shadows, no glass, no glow — depth is entirely linework. The 3px jet borders (.b3 and edge variants) define every plane; the only "raised" cues are the inverted jet/brick panels and the yellow hover snap. The blueprint background grid sits behind everything as the lowest layer.

Shapes

Brutalist and orthogonal: border-radius: 0 everywhere — buttons, cards, plates, and badges are all hard rectangles. The signature shape detail is the CSS-drawn corner registration mark (.reg): four 14px L-shaped brackets with 2px strokes pinned 6px into each corner, in jet (or paper via .reg-light), mimicking print registration crops.

Components

• Top bar — jet fill, paper text, mono uppercase 11px tracked 0.18em; cells divided by br3 paper rules at 30%; ends in a yellow invert-snap "BOOK BLOODWORK →" cell.
• Primary CTA — voltage fill, ink text, 3px jet border, px-7 py-4, mono bold 13px; instant invert-snap to yellow on hover.
• Secondary CTA — transparent fill, ink text, 3px jet border, same metrics; inverts to yellow on hover.
• Service tile — paper (featured tile jet), 3px jet border, -m-[1.5px] overlap, p-8, .reg corner marks, mono index "01", Archivo-black title; whole tile is invert-snap.
• Stat cell — jet fill, paper text, internal br3 dividers at 25%, mono "+01" tag, Archivo-black figure ("12,400+").
• Step card — paper (step 04 is voltage), 3px border, mono "STEP 0X", title, giant mono arrow (→) / bullet (●).
• Pricing card — paper (popular card voltage), 3px border, min-h-[420px], Archivo-black price "$199/MO", em-dash feature list, "SELECT" outline button.
• Fig plate — jet fill, paper text, bt3 br3, bottom-left photo caption "FIG.01 — SUBJECT".
• Medical band — brick-red fill, paper text, paper-bordered "! MEDICAL NOTICE" badge beside Archivo-bold uppercase warning.

Motion

Powered by anime.js v4 (esm.sh), all scroll-triggered. The hero number counts 0 → 12,400 over 1600ms out(3); section indices tick up zero-padded over 900ms; tiles reveal with opacity 0→1 + translateY 40→0 over 700ms staggered on scroll; hero lines wipe up translateY 100%→0 over 800ms with a 120ms per-line delay. The hallmark interaction motion is the anti-motion invert-snap: transition-duration: 0ms !important, so hover flips to yellow with no easing. prefers-reduced-motion disables reveals and snaps counters to their final values.

Iconography

No icon font. All "icons" are typographic glyphs — directional arrows (→), filled bullets (●), oversized quotation marks (") in testimonials, and plus-code tags (+01) — rendered in JetBrains Mono, color ink. The only drawn marks are the CSS pseudo-element registration corners on .reg tiles.

Do's and Don'ts

• Do keep the whole layout inside the 1440px bordered sheet and let the blueprint grid show through.
• Do use yellow only as the voltage: CTAs, the popular plan, the hover snap, and the one accent word.
• Do keep hover instant (0ms) — the hard invert is the brand's signature.
• Do tag every section with a mono index and caption every photo with a FIG plate.
• Don't introduce border-radius, shadows, or gradients (other than the grid hairlines).
• Don't add a second accent color; brick red stays reserved for the medical notice.
• Don't soften the type — display stays Archivo-black uppercase with tight negative tracking.

Known Gaps

• The blueprint grid is a CSS background-image gradient pair; described exactly, not approximated.
• Spacing tokens are inferred from Tailwind utility classes (p-6/p-7/p-8, etc.), not from explicit CSS variables.
• The 9999px/full radius is not used anywhere; the only radius token is none (0px).