name: foreman-forge-design
version: alpha
description: >
  A union-made workwear storefront dressed entirely as paper goods: kraft hangtags,
  denim-textured panels, twine, brass rivets and rubber-stamp typography. The surface
  is warm cream (#F0E4C8); the structural voltage is workwear indigo (#1C3A6A) with a
  brass (#B89A4A) accent and a rust (#C8501A) hot spot. Every primitive is a physical
  artifact — die-cut hangtag shapes, dashed stitch borders, mono serial numbers,
  barcodes and inspection seals. Type pairs condensed Oswald (stamped display) with
  Inter (body) and JetBrains Mono (every label, serial and spec). Geometry is sharp:
  zero corner radius except circular rivets/holes, with character coming from rotation,
  hand-drawn dashes and CSS material textures rather than soft shadows.
colors:
  # Brand / voltage
  indigo: '#1C3A6A'   # primary brand — denim panels, headings, links, borders
  brass:  '#B89A4A'   # accent — rivets, seals, buttons, eyebrows, dividers
  rust:   '#C8501A'   # hot accent — ampersand, units, em emphasis, secondary CTA
  # Surface
  cream:  '#F0E4C8'   # page background, hangtag paper, light cards, text on dark
  kraft:  '#D4C4A0'   # textured kraft material for hangtags + size section bg
  dark:   '#0a1520'   # near-black — tag holes, marquee scrim
  # Text
  ink:    '#1a1a1a'   # body default text color on cream surface
  twine:  '#6A4A30'   # muted brown — mono labels, captions, hairlines, notes
  # Hairlines (rgba)
  hairline-twine: 'rgba(106,74,48,.3)'   # dashed stitch / spec-table separators
  hairline-cream: 'rgba(212,196,160,.35)' # footer dividers + form border on dark
typography:
  display:
    fontFamily: "'Oswald', sans-serif"
    fontSize: clamp(46px, 8.4vw, 96px)
    fontWeight: 800
    lineHeight: 0.82
    letterSpacing: -0.012em
  display-mega:
    fontFamily: "'Oswald', sans-serif"
    fontSize: clamp(56px, 9vw, 120px)
    fontWeight: 800
    lineHeight: 0.9
  stamp:
    fontFamily: "'Oswald', sans-serif"
    fontSize: 18px
    fontWeight: 800
    letterSpacing: 0.05em
    textTransform: uppercase
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.65
  mono-label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.3em
    textTransform: uppercase
  serial:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.15em
rounded:                      # near-zero — circles only
  none: 0px
  full: 9999px                # rivets, tag holes, corner stitch dots
spacing:                      # 4px base unit
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 80px
components:
  stamp-button:
    backgroundColor: 'rgba(240,228,200,.08)'
    textColor: '{colors.indigo}'
    typography: '{typography.stamp}'
    border: '2px solid currentColor'
    rounded: '{rounded.none}'
    padding: '0.65rem 1.4rem'
    hover: 'background {colors.brass}, color #1a1a1a'
    # label e.g. "SHOP THE COLLECTION →"
  hangtag-card:
    backgroundColor: '{colors.kraft}'   # kraft-tex material
    clipPath: 'polygon(0 8%, 50% 0, 100% 8%, 100% 100%, 0 100%)'
    border: '1px solid {colors.hairline-twine}'
    rounded: '{rounded.none}'
    padding: '48px 14px 16px'
    elevation: 'paper-shadow (layered drop + inset highlight)'
    # punched circular hole at top, twine connector above
  spec-table:
    textColor: '{colors.indigo}'
    typography: '{typography.serial}'
    rowSeparator: '1px dashed {colors.hairline-twine}'
    labelColor: '{colors.twine}'
  denim-panel:
    backgroundColor: '{colors.indigo}'   # denim-tex weave texture
    textColor: '{colors.cream}'
    rounded: '{rounded.none}'
    # header, dividers, collection, wages base, footer
  newsletter-input:
    backgroundColor: 'transparent'
    textColor: '{colors.cream}'
    border: '1px solid {colors.hairline-cream}'
    typography: '{typography.serial}'
    buttonBackground: '{colors.brass}'
motion:
  tag-swing: 'rotate -2.5deg ↔ 2.5deg, 6s ease-in-out infinite (hero hangtag)'
  shine-sweep: 'animated gradient text sweep, 4s linear infinite (shine-text)'
  marquee: 'translateX(-50%), 30s linear infinite (hero bottom bar)'
  wipe-reveal: 'clip-path inset(0 100%→0) 700ms cubic-bezier(.86,0,.07,1) on hero wordmark'
  cascade-rise: 'translateY/translateX + opacity, 700ms cubic-bezier(.2,.8,.2,1), staggered'
  card-flip: 'rotateY 180deg, .8s cubic-bezier(.2,1.2,.35,1) on click'
  spotlight-mask: 'radial mask follows cursor on wages section (270px radius)'
  svg-path-draw: 'stroke-dashoffset 1500→0, 1.4s on size diagram enter'
  word-fill: 'indigo→brass on scroll progress (built-here heading)'
icons:
  library: inline css/unicode (no icon font)
  style: 'stamped glyphs — ● bullets, ✓ check, ↻ ↗ → ↳ arrows, drawn SVG diagram'
  color: '{colors.brass}'

Foreman & Forge

foreman-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

Foreman & Forge is a single-page union-workwear storefront staged as a stack of physical paper goods. The page background is warm cream #F0E4C8; the structural voltage is workwear indigo #1C3A6A, carried on denim-textured panels (denim-tex, a CSS cross-weave of fine 45°/-45° lines over #1C3A6A). The accent is brass #B89A4A — rivets, inspection seals, buttons and every eyebrow — with rust #C8501A held in reserve as a hot spot (the ampersand, measurement units, em-emphasis, the secondary CTA). The signature move is the die-cut hangtag: a kraft-paper shape (clip-path: polygon(0 8%, 50% 0, 100% 8%, 100% 100%, 0 100%)) with a punched hole, a twine drop, corner stitch dots and an inner dashed border, reused as the hero card, the worker portraits, the product flip-cards and the wages panel. Everything is labeled like factory output: JetBrains Mono serial numbers, lot codes, barcodes, spec tables and a circular "QA №47 INSPECTED & PASSED" seal. Type is condensed Oswald for stamped display (font-weight:800, tight line-height:.82), Inter for the few prose paragraphs, and JetBrains Mono for all metadata. The geometry is deliberately sharp — no rounded corners anywhere except true circles (rivets, holes, stitch dots); character comes from slight rotations, hand-drawn dashes and CSS material textures rather than soft elevation.

Colors

Brand / voltage. indigo #1C3A6A is the primary — it backs every denim-tex panel (header, dividers, collection, wages, footer), and colors headings, links, borders and spec-table values on cream. brass #B89A4A is the metal accent: rivet gradients, the inspection seal, the newsletter button, divider dashes, eyebrows and the brass stitch border, plus the hover fill on stamp buttons. rust #C8501A is the single hot accent — the hero ampersand, spec-grid units (OZ/YR/UN), <em> emphasis in body copy, and the secondary "INSPECT THE WAGES" CTA.

Surface. cream #F0E4C8 is the page background and the light fill for tags and notes; it also serves as text-on-dark over indigo panels. kraft #D4C4A0 is the textured paper material (kraft-tex — stippled radial dots + a diagonal sheen) used for all hangtags and as the Size section background. dark #0a1520 is near-black, used for punched tag holes and the marquee scrim.

Text. ink #1a1a1a is the default body color on cream. twine #6A4A30 is the muted brown used for all mono labels, captions, worker notes and as the base of hand-drawn hairlines.

Hairlines. Dashed separators and stitch borders use rgba(106,74,48,.3) (twine at low alpha); footer dividers and the dispatch-form border use rgba(212,196,160,.35) (cream at low alpha) on the dark panels.

Typography

Three families loaded from one Google Fonts call (Oswald:500,700,800 + Inter:400,500,600 + JetBrains Mono:400,500,700). Oswald is the condensed stamped display face; Inter is the neutral body face; JetBrains Mono carries every serial, label, spec value and barcode caption. All faces are open-source, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(46px,8.4vw,96px)	800	0.82	-0.012em	Hero wordmark
display-mega	clamp(56px,9vw,120px)	800	0.9	-0.01em	Section H2s (BUILT HERE, COLLECTION)
stamp	18px	800	—	0.05em, UPPER	Stamp buttons, spec titles, "ADD TO CART"
body	15px	400	1.65	—	Inter prose (intro, footer about, dispatch)
mono-label	11px	400	—	0.3em, UPPER	Eyebrows, header bar, dividers, footer headings
serial	10px	400	—	0.15em	Serial numbers, lot codes, ID strips, spec cells

Note: Oswald is also used at small sizes for stat numbers (clamp(28px,4.4vw,40px)) and the giant wage figure (clamp(80px,14vw,160px)), always weight 700–800.

Layout

Base unit is 4px; the practical scale runs 4 / 8 / 16 / 24 / 40 / 80 px, with section vertical padding 80px 40px 100px and a 1440px max-width inner column. The page is a vertical stack of full-width sections separated by denim-textured dividers ("SECTION II · BUILT HERE"). The hero is a 100vh four-layer parallax composition (denim mill photo → grain overlay → CSS hangtag → foreground rivet PNG), each layer translated by scrollY * depth in one rAF loop. Below it: an asymmetric 4-column "worker cascade" (columns offset by margin-top 0/52/20/76px), a 2-column bento product grid (1.4fr 1fr, the chore coat spanning two rows), a centered 880px wages panel with a cursor spotlight, and a 360px 1fr size-guide split (SVG diagram + spec table). The footer opens with a bordered "crate label" then a 5-column grid (1.6fr 1fr 1fr 1fr 1.4fr). Whitespace is generous but busy — every panel is packed with metadata, dashes and seals, so the calm comes from alignment rather than emptiness.

Elevation & Depth

Depth is mostly material and hairline, not floating shadow. The one real shadow is paper-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 20px 40px -10px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.2) — a layered drop with an inset top highlight that makes tags read as lifted paper. Rivets get inset bevels (inset -2px -2px 4px rgba(0,0,0,.4), inset 2px 2px 3px rgba(255,255,255,.4)) plus a small drop. The wages "vellum" tag and the hero marquee bar use glass (backdrop-filter: blur(10px) / blur(6px)) over translucent fills. Everywhere else, separation comes from dashed stitch borders, 1px dashed hairlines and the parallax layer stack rather than box-shadow.

Shapes

The radius story is sharp by default, circular for hardware. Tokenized radius is effectively 0 for all rectangular elements (cards, buttons, tables, panels, inputs). The only curves are true circles via border-radius: 50% / 9999px: brass rivets, punched tag holes, corner stitch dots, and the inspection seal. The distinctive shape is not a radius at all but the hangtag clip-path polygon (a notched-top tag silhouette) and the diagonal cut at the top of the wages vellum tag.

Components

• Stamp button (.btn-stamp) — translucent cream fill rgba(240,228,200,.08), 2px solid currentColor, Oswald 800 / 0.1em tracking, padding .65rem 1.4rem, zero radius; hover flips to brass fill on dark ink. Labels: "SHOP THE COLLECTION →", "↳ INSPECT THE WAGES", "MEET THE FULL FLOOR →".
• Hangtag card (.hangtag-shape + .kraft-tex + .paper-shadow) — kraft material, notched-top clip-path, punched dark hole, inner 1px dashed border, four twine corner dots, twine drop connector above. Used for hero, worker portraits, product cards.
• Stamp badge (.stamp) — Oswald 800, 3px solid currentColor, rotated -2.5deg, cream-wash fill; e.g. "VERIFIED · LOCAL 119".
• Spec table (.spec-table) — mono labels in twine uppercase, indigo bold values right-aligned, rows separated by 1px dashed rgba(28,58,106,.3).
• Product flip-card — hangtag front (photo + name + price) flips on click via rotateY(180deg) to a kraft spec sheet back with table + "ADD TO CART" stamp.
• Inspection seal (.hero-inspect-seal) — 44px rust-bordered circle rotated -8deg, "QA №47" inside.
• Barcode (.barcode) — pure CSS repeating-linear-gradient bars, 46px tall.
• Newsletter form — transparent input, cream hairline border, brass "JOIN →" button.
• Marquee bar — dark glass scrim, brass-bulleted mono ticker scrolling left.

Motion

All motion is CSS/JS driven (no libraries). Hallmarks: the hero hangtag swings (tagswing ±2.5deg, 6s); the wordmark wipes in line-by-line via clip-path inset (700ms, staggered 120/220ms delays); a shine sweep runs across shine-text (4s); the bottom marquee scrolls (30s). On scroll, sections rise in (translateY(32px)→0, 650–700ms cubic-bezier(.2,.8,.2,1), IntersectionObserver), worker cards cascade with 120ms stagger, bento cards rise with 110ms stagger, the "BUILT BY HAND. HERE." words fill indigo→brass with scroll progress, the COLLECTION H2 slides up, the WAGES H2 winds in its letter-spacing (.38em→.01em), and the size diagram draws its SVG paths (stroke-dashoffset 1500→0, 1.4s). The wages section runs a cursor spotlight radial mask; on touch it falls back to a 6s pulse keyframe. Cards flip on click; hovering one card dims its siblings (opacity:.55, scale:.98).

Iconography

No icon font. Icons are stamped Unicode glyphs and CSS shapes in keeping with the factory-paper voice: ● bullets (brass) in the marquee and stock column, a ✓ in a ringed circle for "PASSED", and arrows → ↳ ↻ ↗ for actions. The only true vector is the size-guide measurement diagram — an inline SVG garment outline (indigo draw-path) with brass dashed measurement lines and mono labels (A·WAIST … E·INSEAM), animated by path-draw. Decorative hardware (rivets, holes, twine, barcode) is built from gradients and clip-paths, not icons.

Do's and Don'ts

• Do keep the three voltages disciplined: indigo for structure, brass for metal/labels, rust as a rare hot spot — never let rust spread into general UI.
• Do label everything like factory output (serials, lot codes, mono captions, seals); the metadata density is the brand.
• Do render cards as kraft hangtags with the notched clip-path, punched hole and twine, and use paper-shadow to lift them.
• Do keep corners sharp; reserve circles strictly for hardware (rivets, holes, dots).
• Don't introduce rounded rectangles, soft pastel shadows or gradients-as-decoration — depth here is texture + hairlines.
• Don't swap the condensed Oswald display for a geometric/neutral face, or set body copy in Oswald (Inter only for prose; Mono only for labels).
• Don't flatten the textures (kraft-tex, denim-tex) to solid fills — the woven/ stippled material is core to the paper-goods illusion.

Known Gaps

• kraft-tex and denim-tex are multi-layer CSS background recipes (radial dot stipple + diagonal weave); the design.md describes them as named materials rather than enumerating every gradient stop.
• The built-here heading has a brass texture-image overlay (background-image: url(...png) clipped to text) that only appears if the asset loads; the documented behavior is the indigo→brass color fill fallback that always renders.
• Several photographic/foreground assets are remote PNGs on a CDN with onerror="display:none" fallbacks; only the indigo placeholder backgrounds are guaranteed, so image-dependent color is not tokenized.
• Spacing scale is inferred from the recurring values (4/8/16/24/40/80px); the source uses occasional one-off px and rem values not captured as tokens.