name: margolis-design
version: alpha
description: >
  An editorial type-foundry specimen site for a fictional transitional variable
  serif. The surface is warm paper (#F2EEE4) cut against espresso (#241E18)
  panels, with a single vermilion voltage (#D33A1F) for live readouts, eyebrows,
  and accents. The signature moves are a scroll-pinned hero that interpolates the
  display weight from 100 to 900 while the two paper side-columns slide off, a
  live type tester with hard-edged slab sliders, a vertical waterfall, and a
  hover-reactive glyph constellation. The type story is pure foundry: Playfair
  Display for the high-contrast specimen, Spectral for body, Space Mono for every
  technical label. The geometry is strict and bracketed — 12-column grids,
  2px espresso rules, hairline grey dividers, corner brackets, zero border-radius.
colors:
  # Brand / Voltage
  vermilion: '#D33A1F'    # the single accent — eyebrows, live readouts, slider thumbs, leaders, CTA fill, prices
  # Surface
  paper: '#F2EEE4'        # warm page surface and side columns
  espresso: '#241E18'     # near-black panels (hero center, dark sections), text default, all 2px/3px borders
  # Text
  ink: '#241E18'          # default body/heading ink (= espresso)
  on-dark: '#F2EEE4'      # paper-colored text on espresso panels
  muted: '#B8B2A6'        # warm grey — captions, off-state labels, hairline dividers, histogram track
  # Hairlines
  hairline: '#B8B2A6'     # 1px grey dividers, corner brackets, divide-y rules
  rule: '#241E18'         # 2px / 3px espresso section rules and frame borders
  # Overlays
  scrim: 'rgba(36,30,24,0.6)'      # modal backdrop (#241E18 at 60%)
  focus-tint: 'rgba(211,58,31,0.04)' # contenteditable specimen focus background
typography:
  display:
    fontFamily: "'Playfair Display', serif"
    fontSize: clamp(2.5rem, 9vw, 9rem)
    fontWeight: 400
    lineHeight: 0.82
  heading:
    fontFamily: "'Playfair Display', serif"
    fontSize: 48px
    fontWeight: 800
    lineHeight: 1
  body:
    fontFamily: "'Spectral', serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  pangram:
    fontFamily: "'Playfair Display', serif"
    fontSize: clamp(2.2rem, 6vw, 5.5rem)
    fontWeight: 500
    lineHeight: 1.05
  label:
    fontFamily: "'Space Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 2px
    textTransform: uppercase
  eyebrow:
    fontFamily: "'Space Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 4.4px
    textTransform: uppercase
rounded:                  # everything is square — zero radius is the system
  none: 0px
spacing:                  # base unit 4px; Tailwind scale actually used
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 64px
  '3xl': 112px
components:
  slab-slider:
    backgroundColor: '{colors.muted}'
    borderColor: '{colors.espresso}'
    border: '3px solid {colors.espresso}'
    thumbColor: '{colors.vermilion}'
    rounded: '{rounded.none}'
    height: '6px (track), 18x26px (thumb)'
  corner-frame:
    borderColor: '{colors.hairline}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.none}'
    padding: '32px'
    detail: '22px corner brackets, 2px {colors.muted}'
  config-table:
    borderColor: '{colors.espresso}'
    textColor: '{colors.ink}'
    valueColor: '{colors.vermilion}'
    typography: '{typography.label}'
    divider: '1px {colors.hairline}'
    padding: '8px 12px'
  cta:
    backgroundColor: '{colors.vermilion}'
    textColor: '{colors.on-dark}'
    border: '3px solid {colors.espresso}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '12px 24px'
    hover: 'background → {colors.espresso}'
  modal:
    backgroundColor: '{colors.paper}'
    border: '3px solid {colors.espresso}'
    rounded: '{rounded.none}'
    width: '380px (max 90vw)'
    scrim: '{colors.scrim}'
  feature-toggle:
    onColor: '{colors.vermilion}'
    offColor: '{colors.muted}'
    typography: '{typography.label}'
    leader: '1px {colors.vermilion}'
motion:
  hero-weight-morph: 'GSAP ScrollTrigger pinned, scrub 1, end +=2200; interpolates wght 100→900 via fontVariationSettings'
  hero-columns: 'side columns slide off: col-left xPercent -110 / col-right +110, ease power2.in'
  tester-live: 'instant input listeners update size / wght / tracking / line-height + 12-bar histogram'
  glyph-attract: 'anime.js createAnimatable — pointermove pulls glyph toward cursor (×0.45), scale 1.08, color → vermilion; pointerleave springs back'
  waterfall: 'static vertical-rl specimens 12→96pt, horizontal scroll'
icons:
  library: inline glyphs / text marks (no icon font)
  style: typographic — bullet (●), bracketed close [ ✕ ], arrow (→), quote marks
  color: '{colors.vermilion}'

Margolis

margolis-design · alpha

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

Overview

Margolis is the marketing specimen for a fictional independent type foundry — "a transitional variable serif for editorial and identity work." It looks and behaves like a real foundry microsite. The surface is a warm uncoated paper #F2EEE4, repeatedly cut against full-bleed espresso panels #241E18, with a single vermilion voltage #D33A1F doing all the accent work: section eyebrows, live numeric readouts, slider thumbs, leader lines, prices, and the lone CTA. The signature move is the hero: a 12-column grid with two paper side-columns flanking a black center stage where the word MAR / GO / LIS is set in Playfair Display. As you scroll, a GSAP-pinned timeline interpolates the variable weight from wght 100 to wght 900 while the side columns slide off-screen, turning the brand mark into a live weight demo. Below it the page is a sequence of foundry instruments — a live type tester with hard slab sliders and a weight histogram, a vertical-text waterfall ramping 12→96pt, a hover-reactive glyph constellation that springs glyphs toward the cursor (anime.js) and opens a glyph- metrics modal, an OpenType feature playground, and a giant quote-mark pangram. The type story is strict: Playfair Display for every specimen, Spectral for the single body paragraph, Space Mono for all technical chrome. The geometry is uncompromisingly square — 12-column grids, 2px espresso rules between sections, 1px grey hairlines inside, decorative corner brackets, and zero border-radius anywhere.

Colors

Brand / Voltage. vermilion #D33A1F is the only accent in the system. It marks every section eyebrow (/ 01 — INTERACTIVE SPECIMEN), live readouts (wght 100, current config values), the slider thumbs, dashed sidebearing guides and leader lines, licensing prices, the active OpenType label, and the solid CTA fill. Used sparingly against the neutral field, it reads as the "voltage."

Surface. paper #F2EEE4 is the warm page surface and the hero side columns. espresso #241E18 is the near-black: the hero center stage, the waterfall and playground sections, the modal preview cell, and — critically — the color of every structural border in the design.

Text. Default ink is #241E18 on paper. On espresso panels, headings and specimens flip to on-dark #F2EEE4 (paper-colored). muted #B8B2A6 is the warm grey for captions, secondary metadata, off-state feature labels, and the histogram track.

Hairlines. Two rule weights define the architecture: rule #241E18 is the 2px (sections) / 3px (modal, CTA, slider) espresso border, and hairline #B8B2A6 is the 1px grey used for corner brackets, divide-y table rules, and border-t caption underlines.

Overlays. The modal backdrop is scrim rgba(36,30,24,0.6) (espresso at 60%). The contenteditable specimen tints its focus state with focus-tint rgba(211,58,31,0.04) (vermilion at 4%).

Typography

Three Google Fonts, imported together: Playfair Display (the high-contrast transitional serif that is the product, with italic and a 100–900 variable weight axis used live), Spectral (a calmer serif for the one body paragraph), and Space Mono (the monospace that carries every label, eyebrow, readout, and table cell). All faces are open-source on Google Fonts, so no substitution is needed. Labels are uppercase mono with wide tracking; the display face leans on font-variation-settings:'wght' … rather than discrete weights.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(2.5rem, 9vw, 9rem)	400→900 (variable)	0.82	—	Hero word MAR/GO/LIS
heading	48px (text-5xl)	800	1	—	Section H2s (The Type Tester, etc.)
body	16px	400	1.5	—	Footer description (Spectral)
pangram	clamp(2.2rem, 6vw, 5.5rem)	500	1.05	—	Italic pangram quote
label	11px	400	1.6	2px (widest)	Mono metadata, table cells, sidebar
eyebrow	11px	400	—	4.4px (0.4em)	Section eyebrows / 0n — …

Notable one-offs: hero corner copy at tracking-[0.5em]/0.4em, the footer wordmark at text-6xl wght 900, and the two pull quote marks at 30rem.

Layout

Base unit 4px on the Tailwind scale; sections use generous vertical rhythm (py-16 / py-20 / py-28). The page is a vertical stack of full-width sections, each opened by a left eyebrow + H2 and a right mono caption. The dominant primitive is the 12-column grid: the hero splits 3 / 6 / 3 (paper left, espresso center, paper right), and the tester and footer split into 3 / 6 / 3 control/specimen/config layouts. Content frames are wrapped in a bracketed hairline box (.brackets) with 22px corner brackets. Sections are separated by 2px espresso top borders; the hero is full-viewport (h-screen) and scroll- pinned. The glyph field is an absolutely positioned constellation (percent coordinates) over a 520px canvas. Whitespace is deliberate and editorial — content breathes inside strict rectangular frames.

Elevation & Depth

There are no soft shadows or glows anywhere — depth is built entirely from borders and color blocking. The espresso panels recede the paper around them; 2px/3px espresso rules and 1px grey hairlines carve the structure; corner brackets imply a viewfinder frame. The only "overlay" depth is the modal, which floats on a 60% espresso scrim. The aesthetic is flat, print-like, and hard-edged.

Shapes

Zero radius — every corner is square. rounded.none = 0 is the whole story: slider tracks and thumbs, the modal, the CTA, config tables, and frames are all hard rectangles. Even the Firefox range thumb explicitly sets border-radius: 0. The brutalist squareness is intentional and load-bearing.

Components

• Slab slider (input.slab) — 6px track filled muted #B8B2A6 with a 3px espresso border; thumb is an 18×26px vermilion #D33A1F block with a 3px espresso border, fully square. Used for SIZE / WEIGHT / TRACKING / LINE-HEIGHT.
• Corner frame (.brackets) — 1px hairline box with 32px padding and four 22px muted corner brackets (2px). Wraps the tester and footer.
• Config table — 1px espresso border with divide-y hairline rows, label left in mono, value right in vermilion; rows px-3 py-2. Labels: WGHT / SIZE / TRACK / LEAD.
• CTA — solid vermilion fill, on-dark text, 3px espresso border, mono label, px-6 py-3; hover swaps fill to espresso. Label: ACQUIRE THE FAMILY →.
• Glyph metrics modal — 380px paper card, 3px espresso border, square; mono header GLYPH METRICS with [ ✕ ] close in vermilion; left espresso preview cell with dashed vermilion sidebearing guides, right divide-y metrics table.
• Feature toggle (.feat-label) — mono label, on = vermilion, off = muted, with a 1px vermilion leader line to the specimen. Labels: LIGATURES 'liga', OLD-STYLE FIG 'onum', SWASH 'swsh'.
• Histogram — 12 flex vermilion bars inside a 1px espresso box, heights computed live around the current weight.
• Editable specimen (.ed-spec) — contenteditable display text; focus tints background focus-tint. Default content "Handgloves".

Motion

Two libraries. GSAP + ScrollTrigger drive the hero: a pinned timeline (start: 'top top', end: '+=2200', scrub: 1) interpolates the hero word's wght from 100 to 900 and updates the readout, then slides the side columns off (xPercent ±110, power2.in). anime.js (createAnimatable) powers the glyph constellation — pointermove pulls each glyph toward the cursor at 0.45×, scales to 1.08, and recolors to vermilion; pointerleave springs it home. The type tester updates instantly on input (size, weight, tracking, leading + the histogram). The waterfall is static vertical-rl text scrolling horizontally. Hover transitions are otherwise minimal (CTA fill swap).

Iconography

No icon font. All "icons" are typographic marks set in the display or mono face: a vermilion bullet ● before the foundry name, a bracketed [ ✕ ] close button, an arrow → on the CTA, and oversized “ ” quote marks (30rem) as decorative section furniture. Accent marks are vermilion; structural marks inherit ink.

Do's and Don'ts

• Do keep vermilion as the single accent — readouts, eyebrows, thumbs, prices, one CTA. Scarcity is what makes it a voltage.
• Do keep every corner square (radius 0) and build depth from borders, not shadows.
• Do set all technical chrome (labels, tables, eyebrows, readouts) in Space Mono, uppercase, wide-tracked.
• Do use Playfair Display's variable wght axis live; let weight be the interaction.
• Don't introduce rounded corners, drop shadows, glows, or gradients.
• Don't add a second accent color or tint the paper/espresso pairing.
• Don't set body or specimen text in the mono face, or labels in the serif.
• Don't soften the 2px/3px espresso rules into thin or grey borders.

Known Gaps

• Eyebrow/label tracking is expressed in the HTML as em values (tracking-[0.4em], tracking-widest); converted to px against 11px text (0.4em ≈ 4.4px, tracking-widest ≈ 2px) for the token table.
• text-5xl / text-6xl resolved to Tailwind defaults (48px / 60px).
• Spacing scale is inferred from observed Tailwind utilities (p-6, p-8, py-16/20/28, gap-6/8), not a declared scale.
• The histogram bar heights and glyph attract magnitudes are JS-driven; values describe behavior, not fixed CSS.