name: margot-halloran-design
version: alpha
description: >
  A risograph-zine portfolio for a fictional Brooklyn brand-identity studio. The
  surface is warm pulp paper (#EFEAD8) flipped against deep navy ink (#0B1B2B);
  an acid vermillion (#E53A28) is the single loud voice and an electric lime
  (#C8FF3D) draws hairline seams and fills masked words. Type is a three-voice
  editorial system — a variable Bricolage Grotesque display that pulses its
  weight and width, a Newsreader italic for asides and brand marks, and an
  uppercase Departure Mono for every label, coordinate and stamp. Signature
  moves: a split-clip hero that wipes open on load, a cursor-tracked floating
  preview card over a fragment list, a velocity marquee, sticky-stacked scaling
  panels, and a navy footer where a giant stroked email fills in lime as you
  scroll. Geometry is print-bed flat — hairline rules everywhere, sharp
  rectangles, the only curves being two ink-stamp circles.
colors:
  # Surface
  bg-pulp: '#EFEAD8'        # primary page paper surface
  bg-ink: '#0B1B2B'         # deep navy — dark panels, marquee, footer
  # Brand / Accent
  accent-vermillion: '#E53A28' # the one loud voice — eyebrows, seam underline, marks, selection
  accent-lime: '#C8FF3D'    # electric lime — nav cell borders, hero seam, rules, filled words
  accent-graphite: '#1A1A1A' # near-black graphite (declared utility)
  # Text
  text-ink: '#0B1B2B'       # body + heading text on pulp
  text-pulp: '#EFEAD8'      # text on ink/navy surfaces
  muted: 'rgba(11,27,43,.55)'      # muted ink — meta, idx, scroll cues on pulp
  muted-pulp: 'rgba(239,234,216,.55)' # muted pulp — meta on navy
  # Hairlines
  hairline-ink: '#0B1B2B'   # 1px full-ink rules (nav, hero, section heads)
  hairline-soft: 'rgba(11,27,43,.18)'   # faint list-row dividers on pulp
  hairline-pulp: 'rgba(239,234,216,.18)' # faint rules on navy footer
  # Palette swatches (Panel B color study — printed values, not UI tokens)
  swatch-cream: '#F5F1E6'
  swatch-verm: '#E83A28'
  swatch-yellow: '#F4D03A'
  swatch-blue: '#2A4A8A'
  swatch-ink: '#1C1915'
typography:
  display:
    fontFamily: "'Bricolage Grotesque', sans-serif"
    fontSize: clamp(72px, 12vw, 168px)
    fontWeight: 500
    lineHeight: 0.85
    letterSpacing: -0.045em
  section-head:
    fontFamily: "'Bricolage Grotesque', sans-serif"
    fontSize: clamp(36px, 5.4vw, 76px)
    fontWeight: 600
    lineHeight: 0.9
    letterSpacing: -0.03em
    textTransform: uppercase
  serif-italic:
    fontFamily: "'Newsreader', serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.55
  body:
    fontFamily: "'Newsreader', serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
  mono:
    fontFamily: "'Departure Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.18em
    textTransform: uppercase
rounded:
  none: 0px       # everything print-flat: cards, panels, swatches, hairlines
  full: 9999px    # only the two ink-stamp circles and the nav status dot
spacing:          # base unit 4px; layout padding climbs in large steps
  xs: 4px
  sm: 8px
  md: 18px
  lg: 36px
  xl: 48px
  2xl: 80px
  3xl: 120px
components:
  nav-tab:
    textColor: '{colors.text-ink}'
    typography: '{typography.mono}'
    borderColor: '{colors.accent-lime}'
    hoverColor: '{colors.accent-vermillion}'
    rounded: '{rounded.none}'
    padding: '18px 28px 16px'
    # lime cell borders, ink rules top/bottom, active row underlined in vermillion
  eyebrow:
    textColor: '{colors.accent-vermillion}'
    typography: '{typography.mono}'
    # vermillion uppercase mono label above every section heading
  fragment-row:
    textColor: '{colors.text-ink}'
    typography: '{typography.display}'
    borderColor: '{colors.hairline-soft}'
    rounded: '{rounded.none}'
    padding: '22px 8px'
    # grid: idx / variable-weight title / italic year / mono tag; vermillion top rule on hover
  preview-card:
    backgroundColor: '{colors.bg-ink}'
    rounded: '{rounded.none}'
    shadow: '0 30px 60px rgba(11,27,43,.35)'
    # fixed 260x340 card, clip-reveals from center, follows the cursor list
  ink-stamp:
    textColor: '{colors.accent-vermillion}'
    borderColor: '{colors.accent-vermillion}'
    typography: '{typography.mono}'
    rounded: '{rounded.full}'
    # double-stroke circle, rotated ~-12deg, wobble animation
  palette-swatch:
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '18px'
    # five solid color blocks with hex label, separated by faint white rules
  masked-email:
    textColor: 'transparent'
    strokeColor: '{colors.text-pulp}'
    fillColor: '{colors.accent-lime}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    # giant outlined wordmark; words fill lime on scroll, @ stays pulp, final dot vermillion
  stat:
    textColor: '{colors.text-pulp}'
    typography: '{typography.display}'
    # huge variable-weight numerals on navy, mono label beneath
motion:
  hero-clip-reveal: 'left half wipes inset(0 100% 0 0)->0, right half wipes from top; clip-path 1.1s cubic-bezier(.86,0,.07,1) on .is-loaded'
  hero-weight-pulse: 'per-letter "Margot" font-variation-settings wght 250-600 sine-driven in rAF'
  hero-pull-apart: 'halves translateX +/- up to 60px scrubbed to scrollY * 0.06'
  hero-parallax: 'right-half image translateY scrollY * -0.18px'
  list-row-entrance: 'opacity + translateY(14px)->0, .55s cubic-bezier(.2,.8,.2,1), 50ms stagger via IntersectionObserver'
  row-hover: 'vermillion top rule scaleX 0->1 .45s; padding-left 28px; title weight 400->700 + tighter tracking'
  preview-reveal: 'opacity .25s + clip-path inset(50%)->0 .35s cubic-bezier(.2,.8,.2,1) on mouseenter'
  marquee: 'JS translateX loop — rail-1 leftward ~38px/s, rail-2 rightward ~28px/s; CSS exposes scroll-velocity register --vel'
  panel-stack: 'sticky panels, each scales to 0.96 + brightness 0.70 as the next arrives; headline clip-reveals inset(0 100%)->0 1s'
  panel-D-lines: 'SVG paths stroke-dasharray 800 draw to dashoffset 0 .8s on .in'
  email-word-fill: 'words toggle .filled (lime, stroke 0) past per-word scroll thresholds'
  stamp-wobble: 'rotate -8deg<->-12deg, 6s ease-in-out infinite'
  wind-up: 'section heading letter-spacing .35em->-0.03em + opacity .4->1 over .8s'
icons:
  library: inline unicode glyphs (no icon font)
  style: 'typographic marks — ◉ ✦ ↳ ↓ ↗ ⎯⎯ ▸ • ★ ✿'
  color: '{colors.accent-vermillion}'

Margot Halloran

margot-halloran-design · alpha

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

Overview

Margot Halloran is a risograph-zine portfolio dressed as a press bed. The page is warm pulp paper — --bg-pulp #EFEAD8 — that flips into deep navy ink --bg-ink #0B1B2B for its loud sections (the marquee, the stacked panels, the footer). Two accents do all the talking: an acid vermillion #E53A28 is the single shout — eyebrows, the seam underline, ink-stamp marks, even the text selection — and an electric lime #C8FF3D is the wiring, drawing nav cell borders, the hero seam, research connector lines and filling masked words. The type story is editorial and three-voiced: a variable Bricolage Grotesque display that literally pulses its weight per-letter in the hero, a Newsreader italic for asides, years and brand marks, and an uppercase Departure Mono for every coordinate, label and stamp (tracking .18em–.22em). The geometry is print-flat: hairline rules everywhere, sharp rectangles, no rounded cards — the only curves are two ink-stamp circles and the status dot. Signature moves stack up: a split-clip hero that wipes open on load, a cursor-tracked floating preview over a fourteen-row fragment list, a velocity marquee, sticky panels that scale and dim as the next slides over, and a giant stroked footer email that fills lime word-by-word as you scroll.

Colors

Surface. bg-pulp #EFEAD8 is the paper the whole site is printed on; bg-ink #0B1B2B (navy) backs the marquee strip, all four stacked panels' dark sides, and the footer. Brand/accent. accent-vermillion #E53A28 is rationed deliberately — it appears as the nav status dot, all eyebrows, the hero seam-underline and surname, hover rules on list rows, the giant "Aa" in Panel C, ink-stamp strokes, the final dot of the email, and ::selection. accent-lime #C8FF3D is structural electricity: nav cell borders, the hero seam line and coordinate, the rail divider, Panel B/D eyebrows, the SVG research lines, and the filled state of the masked email. accent-graphite #1A1A1A is declared but barely surfaced. Text. text-ink #0B1B2B for everything on pulp, text-pulp #EFEAD8 for everything on navy; muted rgba(11,27,43,.55) and muted-pulp rgba(239,234,216,.55) carry meta/idx/cue text on each ground. Hairlines. Full ink #0B1B2B rules frame the nav, hero and section heads; rgba(11,27,43,.18) divides list rows; rgba(239,234,216,.18–.25) rules the footer. Palette study. Panel B prints five literal swatches as content — cream #F5F1E6, vermillion #E83A28, yellow #F4D03A, blue #2A4A8A, ink #1C1915 — these are subject matter, not the UI palette (note the swatch vermillion/ink differ slightly from the page accents).

Typography

Three Google-Fonts families loaded in one request. Bricolage Grotesque (variable opsz 12..96, wdth 75..100, wght 200..800) is the display face — used at every scale via font-variation-settings, from the clamp(72–168px) hero name to fragment titles, panel headlines, the 460px "Aa", and footer stats. Newsreader (optical 6..72, italic 400/500) handles the body (15px), the hero blurb, years, brand "it." spans, the footer grab line, and quotes — always with a literary italic. Departure Mono is the monospace label voice: uppercase, heavily tracked (.14em–.22em), 10–13px, on every eyebrow, coordinate, tag and stamp. Display tracking is consistently negative (-0.025em to -0.06em) and line-height tight (.85–.9); mono tracking is wide and positive.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(72px,12vw,168px)	500 (var)	0.85	-0.045em	hero name, headlines, stats
section-head	clamp(36px,5.4vw,76px)	600 (var, wdth 85)	0.9	-0.03em UPPER	section H2s
serif-italic	18px	500	1.55	—	hero blurb, notes, quotes
body	15px	400	1.6	—	footer copy, base body
mono	11px	400	1.6	0.18em UPPER	eyebrows, labels, coords, stamps

Layout

Base unit is 4px, but section padding jumps in large editorial steps (18 / 36 / 48 / 80 / 120px). The page is a vertical sequence with no global max-width — it runs edge to edge, framed only by horizontal hairline rules. Header: a mono meta-row, then a full-bleed tab nav cell-bordered in lime between two ink rules. Hero: a 52/48 split — left pulp text half, right navy image half — each clip-wiped open on load, divided by a 1px lime seam with a coordinate stamp. Work section: an <ol> of fourteen rows in a 60px 1fr auto auto grid, max-width reserved (calc(100% - 340px)) so rows never slide under the fixed preview card. Marquee: full-bleed navy band, vermillion rules top and bottom, two opposed scrolling rails split by a lime divider. Featured: a 400vh stack-outer of four position:sticky 100vh panels (A output 58/42, B palette with a 5-column swatch grid, C type 1fr/38%, D research as an absolutely-composed collage). Footer: navy, a grab-line + stamp grid, the masked email, a 3-up stat strip and a 4-up colophon. Whitespace is generous and editorial; alignment is grid-strict.

Elevation & Depth

Almost entirely flat — depth comes from hairlines and the pulp/ink ground flip, not shadows. Two real shadows exist: the fixed preview card 0 30px 60px rgba(11,27,43,.35) and the Panel D collage images 0 18px 30px rgba(0,0,0,.35). The stacked panels fake depth through scale-down (to 0.96) plus brightness dim (to 0.70) as the next panel slides over, and through z-index stacking A<B<C<D. The footer stamp carries a faint radial glow radial-gradient(circle, rgba(229,58,40,.08), transparent 70%). No glass/backdrop-blur anywhere.

Shapes

Print-flat. Nothing is rounded except border-radius:50% on the nav status dot, the cursor-preview type stamp, and the two ink stamps (preview stamp and footer stamp). Everything else — cards, swatches, panels, the logo card, list rows — is a hard rectangle (rounded.none = 0). The recurring shape motif is the 1px rule: section dividers, nav cells, the hero seam, the type-spec block borders, the double-stroke (2px–3px double) stamp rings, and the email's -webkit-text-stroke outline.

Components

• nav-tab — transparent fill, lime cell borders (border-right/left), ink rules top & bottom; mono uppercase 12px .22em; hover turns vermillion; active has a vermillion 2px underline inset 28px. Padding 18px 28px 16px. Labels: "◉ Work", "Process", "About", "Contact", cue "↳ Scroll · Drag · Peel".
• eyebrow — vermillion (or lime on navy panels) mono uppercase label, e.g. "✦ Brand Identity · Food & Drink · 2018—Now", "Panel 02 / The Palette".
• fragment-row — 60px 1fr auto auto grid: mono idx, variable-weight Bricolage title, Newsreader-italic vermillion year, mono tag. Faint .18 divider; on hover a vermillion top rule scales in, the row indents 28px, the title fattens to wght 700.
• preview-card — fixed 260×340, navy ground, hard corners, deep shadow; clip-reveals from center, shows either an image or a rotated double-ring "stamp".
• ink-stamp — vermillion 2px–3px double circle, mono uppercase text, rotated ~-12°; footer one wobbles 6s. Text e.g. "LET'S / MAKE / SOMETHING / ·MH·".
• palette-swatch — five solid blocks (cream/verm/yellow/blue/ink) with a mono name + dimmed hex, faint white right-borders, bottom-aligned labels.
• masked-email — clamp(56–200px) Bricolage 700, color:transparent with a 2px pulp text-stroke; words flip to lime fill (stroke 0) past scroll thresholds; "@" stays pulp, trailing "." is vermillion.
• stat — huge variable Bricolage numerals (14 / 06 / 01) on navy with a mono uppercase label, in a 3-up strip ruled top and bottom.

Motion

Heavily motion-driven via a single rAF loop. The hero clip-reveals on .is-loaded (1.1s cubic-bezier(.86,0,.07,1)), its name letters pulse weight continuously (sine over wght 250–600), the halves pull apart and the image parallaxes on scroll. List rows enter with opacity+translate on a 50ms IntersectionObserver stagger, and respond to hover with a scaling vermillion rule and weight change. The marquee runs two opposed JS translateX loops (~38px/s and ~28px/s). Stacked panels scale to 0.96 and dim to 0.70 brightness as the next arrives, with clip-revealed headlines and a dasharray line-draw in Panel D. The footer email fills word-by-word, and the stamp wobbles -8°↔-12° forever. Section headings wind up from wide tracking. A 3.5s safety timeout force-reveals anything still hidden.

Iconography

No icon font. All "icons" are inline Unicode/typographic marks used decoratively and as cues: ◉ (active tab), ✦ (eyebrow + marquee separators), ↳ ↓ ↗ (scroll/link cues), ⎯⎯ ▸ (section/eyebrow leaders), • (keyword bullets), ★ (featured), ✿ (studio note), and ◦ dots between meta items. They inherit color contextually — mostly vermillion or lime — and carry zero stroke configuration.

Do's and Don'ts

• Do keep vermillion rationed — one loud voice per view (the Panel B note says it literally: "printed once per spread, never twice").
• Do flip pulp↔ink to mark sections; use lime for hairlines/wiring and vermillion for emphasis marks.
• Do label everything in uppercase Departure Mono with wide tracking, and use Newsreader italic for human/literary asides.
• Do keep corners sharp; reserve border-radius:50% for ink stamps and the dot.
• Don't add drop shadows or rounded cards — depth is hairlines + ground flip.
• Don't introduce a fourth typeface or set the display face at a fixed weight; its variability (weight/width pulsing) is the personality.
• Don't confuse the Panel B printed swatches with the UI palette — they're subject matter and differ slightly from the page accents.

Known Gaps

• Spacing scale is inferred from the padding/margin values actually used (4px base; large editorial steps); there is no formal scale in the source.
• Marquee speeds (~38px/s, ~28px/s) and the weight-pulse range (250–600) are read from the JS math, not authored design tokens.
• accent-graphite #1A1A1A is declared in :root but has no visible application in the markup.
• The Panel C copy names "Degular Mono" as the fictional client's type, but the page is actually set in Departure Mono — the spec follows what's loaded/rendered.