name: hawker-type-design
version: alpha
description: >
  A type-foundry specimen site for "Northwood Type Co." built around the
  Hawker variable typeface. Warm cream paper (#F0EAD8) and near-black ink
  (#121211) with a single hot-orange voltage (#D25A30) and a marigold gold
  (#E8B03A) for buttons. The whole page is editorial-brutalist: hairline ink
  borders divide every section, no rounded corners, and DM Mono labels sit
  beside enormous Fraunces variable-font display. The signature move is
  live interactivity — four sliders drive Fraunces' wght/wdth/opsz/SOFT axes
  across a contenteditable honeycomb of glyphs, and an interactive license
  matrix recalculates prices in real time.
colors:
  # Brand / Voltage
  orange: '#D25A30'   # hot-orange accent: em italics, caret, slider thumb, checks, popular badge, accent hex tiles
  gold: '#E8B03A'     # marigold: primary button fill (.gold-btn), gold hex tiles
  # Surface
  cream: '#F0EAD8'    # page background (--cream), light text on ink sections
  ink: '#121211'      # near-black: body text, all borders, dark inverted sections
  photo-bg: '#2a2520' # warm brown placeholder behind "in the wild" images
  # Hairlines (derived from ink/cream at opacity)
  ink-80: 'rgba(18,18,17,0.8)'   # header bottom border (border-[var(--ink)]/80)
  ink-20: 'rgba(18,18,17,0.2)'   # interior matrix cell dividers (border-[var(--ink)]/20)
  ink-03: 'rgba(18,18,17,0.03)'  # odd matrix-row zebra stripe
  cream-30: 'rgba(240,234,216,0.3)' # cell dividers on dark license header
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: 'clamp(80px, 18vw, 280px)'   # hero word
    fontWeight: 700                         # default --wt; pushed to 900 via font-variation-settings
    lineHeight: 0.85
    letterSpacing: '-0.04em'
  heading:
    fontFamily: "'Fraunces', serif"
    fontSize: 80px       # section h2 range 64-88px
    fontWeight: 800
    lineHeight: 0.85
    letterSpacing: '-0.04em'
  label:
    fontFamily: "'DM Mono', monospace"
    fontSize: 11px       # mono labels run 9-12px
    fontWeight: 400
    letterSpacing: '0.05em'
    textTransform: uppercase
  price:
    fontFamily: "'Fraunces', serif"
    fontSize: 56px
    fontWeight: 900
    lineHeight: 1
rounded:                  # brutalist: everything is square except slider thumbs
  none: '0px'
  full: '9999px'          # only the round slider thumb
spacing:                  # base unit 4px; Tailwind 8px rhythm dominant
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 48px
components:
  navButton:              # gold-btn in header ("Cart →")
    backgroundColor: '{colors.gold}'
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '8px 16px'
  primaryButton:          # gold-btn in license matrix ("Add Desktop")
    backgroundColor: '{colors.gold}'
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '20px'
    hover: 'background → orange, text → cream'
  badge:                  # est-1998 chip / "popular" tag
    backgroundColor: 'transparent'  # est chip; popular uses orange fill
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    border: '1px solid {colors.ink}'
    padding: '2px 8px'
  hexCell:                # honeycomb glyph tile
    backgroundColor: '{colors.cream}'  # accent variant → orange edge, gold variant → gold fill
    textColor: '{colors.ink}'
    typography: '{typography.display}'
    border: '1px ink edge via ::before'
    clipPath: 'hexagon polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)'
  slider:
    trackColor: '{colors.ink}'
    thumbColor: '{colors.orange}'
    thumbBorder: '2px solid {colors.ink}'
    rounded: '{rounded.full}'
  sectionDivider:
    border: '1px solid {colors.ink}'
  darkPanel:              # specimen + license header sections
    backgroundColor: '{colors.ink}'
    textColor: '{colors.cream}'
motion:
  heroType: 'GSAP TextPlugin types "Descender" over 1.4s ease none, delay 0.3s, then a blinking caret'
  caretBlink: 'caret-blink 0.7s steps(1) infinite — orange bar at 50% opacity'
  honeycombReveal: 'GSAP ScrollTrigger: hex tiles fade+rise (y30) on enter, stagger 0.02 from random'
  hexHover: 'transform scale(1.08) rotate(3deg), 0.18s cubic-bezier(.34,1.56,.64,1) overshoot'
  marquee: 'scroll 40s linear infinite, translateX(-50%)'
  pdfHover: 'Motion One color sweep: bg/border → orange over 0.3s, reverts on leave'
  matrixReveal: 'GSAP ScrollTrigger: rows fade+rise (y24), stagger 0.06'
  sliderDrive: 'range inputs set --wt/--wd/--op/--soft CSS vars live, reshaping every .vf glyph'
icons:
  library: Tabler Icons (webfont, ti)
  style: outline
  sizes: { sm: 20px, md: 24px, lg: 180px }
  color: '{colors.ink}'   # cream on dark panels, orange for checkmarks

Hawker Type

hawker-type-design · alpha

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

Overview

Hawker Type is the specimen microsite for "Northwood Type Co.", a fictional foundry shipping the Hawker variable typeface for packaging. The whole thing sits on warm cream paper (--cream #F0EAD8) inked in near-black (--ink #121211), with one hot-orange voltage (--orange #D25A30) reserved for emphasis and a marigold gold (--gold #E8B03A) carrying every button. The aesthetic is editorial-brutalist: hairline ink borders frame and divide every section, corners are perfectly square, and tiny uppercase DM Mono labels sit beside towering Fraunces display set with negative tracking and sub-1 line-height. The signature move is that the type is alive — four range sliders drive Fraunces' real variable axes (weight, width, optical size, softness) through CSS custom properties, reshaping a contenteditable honeycomb of hexagonal glyph tiles and the hero word simultaneously. A second interactive surface, the license matrix, recomputes desktop/web/app prices as you drag its sliders. Two sections invert to ink-on-cream for contrast.

Colors

Brand / Voltage. orange #D25A30 is the single accent voltage — it colors em-italic words inside headings, the blinking type caret, the slider thumbs, the license checkmarks, the "popular" badge fill, the price $ signs, and the accent hexagon tiles; it is also the hover fill for buttons. gold #E8B03A (.gold-btn) is the resting fill of every call-to-action button and a scatter of gold honeycomb tiles.

Surface. cream #F0EAD8 is the page background and the light text used on inverted sections. ink #121211 is the body text, every border, and the fill of the two dark panels (specimen download + license header). photo-bg #2a2520 is a warm-brown placeholder behind the "in the wild" product photos.

Hairlines. Borders are ink at varying opacity: ink-80 rgba(18,18,17,0.8) for the sticky header underline, ink-20 rgba(18,18,17,0.2) for the interior license-cell dividers, and ink-03 rgba(18,18,17,0.03) as a near-invisible zebra stripe on odd matrix rows. On the dark license header, dividers flip to cream-30 rgba(240,234,216,0.3).

Typography

Two families, both from Google Fonts. Fraunces is the variable display and body face ('Fraunces', serif), exercised across four axes via font-variation-settings: weight (wght 100–900, default 700), width (wdth 25–151, default 100), optical size (opsz 9–144, default 80) and the soft serif/terminal axis (SOFT 0–100, default 50). Display set runs from 22px license figures up to a clamp(80px,18vw,280px) hero word, always with tight -0.03em to -0.04em tracking and 0.85 line-height. DM Mono ('DM Mono', monospace, weights 400/500) is the entire UI-label voice: uppercase, 9–12px, light letter-spacing, used for section numbers (§ 02), spec readouts, captions and button text.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(80px,18vw,280px)	700 (→900 via VF)	0.85	-0.04em	hero word, footer wordmark
heading	64–88px	800	0.85–0.9	-0.03 to -0.04em	section h2s
price	56px	900	1	—	license subtotals
label	9–12px	400	normal	0.05–0.1em	mono captions, nav, badges (uppercase)

Layout

Base unit is 4px with Tailwind's 8px rhythm dominant; section padding is px-8 with py-16/py-20/py-24. The page is a single full-bleed column of stacked sections, each separated by a 1px ink border (border-b border-[var(--ink)]), giving a printed-broadsheet feel. Inside sections, a 12-column grid (grid-cols-12) governs the editorial layouts — the hero's control panel is four col-span-3 slider cells, "in the wild" is an asymmetric photo mosaic with one row-span-2 feature, and the license matrix is a 4×N grid of col-span-3 cells. The honeycomb is a bespoke flex layout of hexagon rows (clip-path polygons) with alternating offset rows pulled up -40px to interlock. Header and the hero control panel are sticky. No container max-width; the design embraces full width and dense, gridded whitespace.

Elevation & Depth

There are no box-shadows anywhere. Depth comes entirely from hairline ink borders and flat color inversions — dark ink panels for the specimen and license header, the orange and brown blocks in the photo mosaic. The only "layering" is the honeycomb's ::before ink edge behind each cream hex tile (creating a 1px outlined hexagon) and z-index lifts on hover. This is a deliberately flat, paper-on-paper system.

Shapes

Brutally square. Every container, button, badge, input track and image frame has border-radius: 0. The two exceptions are functional: the circular slider thumbs (border-radius:50%, {rounded.full}) and the hexagonal glyph tiles, which use clip-path polygons rather than radius. The hexagon is the recurring brand shape — it appears in the logo mark, and as the entire honeycomb character grid.

Components

• navButton ("Cart →") — gold fill, ink text, square, px-4 py-2, uppercase mono with wide tracking; hover sweeps to orange/cream.
• primaryButton ("Add Desktop/Web/App") — gold fill, ink text, square, py-5 full-width, mono uppercase with a Tabler cart icon.
• badge — est-chip is a 1px ink outline, transparent, px-2 py-0.5 uppercase mono; the "popular" tag is the same but with an orange fill.
• hexCell — cream hexagon (clip-path) with a 1px ink edge via ::before; accent variant gets an orange edge, gold variant a gold fill; contenteditable, 70px Fraunces glyph, each cell randomized across the design space; hover scales 1.08 + rotates 3deg.
• slider — 2px ink track, 18px round orange thumb with 2px ink border; drives variable axes (hero) or prices (license).
• sectionDivider — 1px solid ink border-b between every section.
• darkPanel — ink background, cream text; specimen download + license header.

Motion

Type is the protagonist. On load, GSAP's TextPlugin types the hero word "Descender" over 1.4s (ease:none) then appends a caret-blink cursor (an orange bar blinking 0.7s steps(1)). The honeycomb tiles stagger-reveal on scroll (ScrollTrigger, fade + 30px rise, stagger 0.02 from:'random'), and license .matrix-rows fade + rise 24px in sequence. Hex tiles overshoot on hover (scale(1.08) rotate(3deg), 0.18s cubic-bezier(.34,1.56,.64,1)). The specimen "PDF" button color-sweeps to orange via Motion One on hover. A 64px Fraunces marquee scrolls infinitely (scroll 40s linear). The live driver is the sliders writing --wt/--wd/--op/--soft CSS vars, reshaping every .vf glyph in real time.

Iconography

Tabler Icons via webfont (ti classes). Outline style, ink-colored (cream on dark panels, orange for license checkmarks). Used at small UI scale (~20–24px: ti-arrow-down, ti-shopping-cart, ti-check, ti-minus) and one oversized decorative ti-file-download at 180px in the specimen section. The logo mark is an inline SVG hexagon with an "N" — not from the icon set.

Do's and Don'ts

• Do keep corners square (radius 0) everywhere except the slider thumb.
• Do divide every section with a single 1px ink hairline.
• Do pair towering negatively-tracked Fraunces display with tiny uppercase DM Mono labels.
• Do reserve orange for true emphasis and gold for buttons only.
• Don't add box-shadows or soft elevation — depth is borders and inversions.
• Don't introduce a third accent color or round the type containers.
• Don't set Fraunces at a fixed weight where a variable axis is expected; the type is meant to move.

Known Gaps

• Fraunces clamp(80px,18vw,280px) hero size is viewport-relative; the 280px cap and the 80px section heading are documented as representative points.
• Many headings carry per-element font-variation-settings overrides (e.g. wght 900 / wdth 75); the frontmatter records the default :root axis values (wght 700, wdth 100, opsz 80, SOFT 50) and notes the override range in prose.
• Hairline colors ink-80/20/03 and cream-30 are Tailwind opacity modifiers on the base ink/cream tokens, expanded here to rgba for clarity.
• Header underline uses /80 opacity; the rest of section dividers are full opacity ink.