name: ironlog-design
version: alpha
description: >
  IRONLOG is a strength-training dashboard rendered as an industrial control
  panel. A near-black graphite surface (`#101214`) is divided by 2px steel
  hairlines (`#2A2F34`) into a dense, borderless grid of telemetry tiles. One
  electric lime "voltage" (`#C6FF00`) flags PRs and live values while a hazard
  red (`#FF4D2E`) marks failure and deload states. Everything is uppercase,
  monospaced labels (`Roboto Mono`) over heavy compressed display numerals
  (`Archivo` 900), with LED-segment fill bars, a 6×7 intensity heatmap, and a
  faint CRT scanline overlay. Zero rounding — pure rectangular HUD geometry.
colors:
  # Brand / Voltage
  lime: '#C6FF00'          # electric accent — PRs, live stats, est 1RM, fills, selection
  hazard: '#FF4D2E'        # alert red — fatigue, fail/deload, blink dots, down-trends
  # Surface
  bg: '#101214'            # page background (graphite)
  panel: '#15181B'         # header, sidebar, inner grid tiles
  panel-alt: '#1A1E22'     # deload protocol callout block
  cell-rest: '#1F2429'     # heatmap REST cell / legend swatch
  seg-off: '#22272C'       # unlit LED segment
  # Intensity ramp (heatmap + legend + LED steel)
  intensity-low: '#3A3F44'  # LOW
  intensity-med: '#5A6066'  # MED / lit steel segment
  intensity-high: '#8A9097' # HIGH (same as muted text)
  # Text
  text-strong: '#FFFFFF'   # headings, primary numerals, key values
  text-muted: '#8A9097'    # labels, captions, units, body
  black: '#000000'         # text on lime fills, logo mark dot
  # Hairlines
  hairline: '#2A2F34'      # all 2px borders / 1px cell + spark grid lines
typography:
  display:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 36px          # text-4xl big stat numerals; logo text-xl, headings text-lg
    fontWeight: 900
    letterSpacing: -0.02em  # tracking-tight
  display-heading:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 18px          # section titles (text-lg); name uses text-sm/800
    fontWeight: 900
    letterSpacing: -0.02em
  body:
    fontFamily: "'Roboto', sans-serif"
    fontSize: 14px
    fontWeight: 400
  mono:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 12px          # nav (text-xs); labels run 10–11px
    fontWeight: 400
  mono-label:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.25em   # tracking-[0.25em] uppercase telemetry labels
    textTransform: uppercase
rounded:
  none: 0px                 # the entire system is rectangular
spacing:                    # base unit 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  xxl: 24px
components:
  header:
    backgroundColor: '{colors.panel}'
    borderColor: '{colors.hairline}'   # border-b-2; internal cells border-r-2 / border-l-2
    textColor: '{colors.text-muted}'
    rounded: '{rounded.none}'
  logo-mark:
    backgroundColor: '{colors.lime}'   # 28px square block with pr-glow
    rounded: '{rounded.none}'
  nav-tab:
    typography: '{typography.mono}'
    textColor: '{colors.text-muted}'
    borderColor: '{colors.hairline}'   # border-r-2
    padding: '0 16px'                   # px-4, full-height
  nav-tab-active:
    backgroundColor: '{colors.lime}'
    textColor: '{colors.black}'
    typography: '{typography.mono}'     # font-700
  stat-tile:
    backgroundColor: '{colors.bg}'
    borderColor: '{colors.hairline}'   # border-r-2 between tiles
    rounded: '{rounded.none}'
    padding: '20px'                     # p-5
  stat-label:
    typography: '{typography.mono-label}'
    textColor: '{colors.text-muted}'   # lime/hazard when flagged
  stat-value:
    typography: '{typography.display}'
    textColor: '{colors.text-strong}'  # lime for PR, hazard for fatigue
  led-bar:
    backgroundColor: '{colors.seg-off}' # 36 unlit segments, gap-[3px], h-5
    rounded: '{rounded.none}'
  heatmap-cell:
    borderColor: '{colors.hairline}'   # 1px border, h-14
    rounded: '{rounded.none}'
    # fill from intensity ramp; pr -> lime + pr-pulse, fail -> hazard
  metric-strip-tile:
    backgroundColor: '{colors.panel}'  # gap-px on hairline bg = 1px grid lines
    borderColor: '{colors.hairline}'   # border-2 wrapper
    padding: '12px'                     # p-3
    rounded: '{rounded.none}'
  sidebar:
    backgroundColor: '{colors.panel}'
    borderColor: '{colors.hairline}'
    rounded: '{rounded.none}'
  lift-row:
    borderColor: '{colors.hairline}'   # border-b-2, px-5 py-4
    typography: '{typography.mono-label}'
    padding: '16px 20px'
  deload-callout:
    backgroundColor: '{colors.panel-alt}'
    textColor: '{colors.text-muted}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
motion:
  count-up: 'GSAP tween 0–target, 1.6s power2.out, delay 0.2s, toLocaleString formatting'
  led-fill: 'GSAP segments light sequentially over 1.1s power2.out, delay 0.3s; lime segs gain 4px glow'
  led-marker: 'white 3px marker slides 0%→fill% over 1.1s power3.out'
  heatmap-reveal: 'cells fade+scale 0.4→1, 0.5s back.out(1.7), stagger 0.012s'
  spark-grow: 'sidebar sparklines scaleY 0→1 on scroll-in, 0.5s power2.out, stagger 0.02s (ScrollTrigger top 85%)'
  pr-pulse: 'PR cells pulse lime box-shadow 4px→12px, 1.8s ease-in-out infinite (@keyframes prpulse)'
  blink: 'live/alert dots blink opacity 1→0.15, 1.4s steps(1) infinite'
  clock: 'header clock updates every 1000ms via setInterval'
icons:
  library: none — geometric primitives only
  style: solid square/dot status indicators + unicode triangles (▲ ▼)
  sizes: { dot: 6px, swatch: 12px, mark: 28px }
  color: '{colors.lime}'   # also hazard for alerts, hairline for inactive

IRONLOG

ironlog-design · alpha

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

Overview

IRONLOG is a strength-training "Strength OS" dashboard styled as an industrial machine console. The surface is graphite-black #101214 with a faint CRT scanline texture (repeating-linear-gradient at ~1.5% white opacity) laid over everything. The layout is a single edge-to-edge instrument cluster: a flush header bar, a 4-up KPI row, a large training heatmap, and a fixed right rail — all separated not by gaps but by 2px steel hairlines (#2A2F34), giving the borderless, gridded feel of a control panel. The one accent "voltage" is electric lime #C6FF00, reserved for personal records, the est-1RM stat, live session numbers, LED-bar fills and the selection highlight; a hazard red #FF4D2E carries every alarm state (fatigue, fail/deload, the blinking LIVE dot). Type is a two-register system: heavy compressed Archivo 900 numerals for the big readouts and Roboto Mono for every uppercase, wide-tracked label. Signature moves: 36-segment LED fill bars, a 6×7 day/week intensity heatmap with pulsing lime PR cells, sidebar sparklines, and count-up animations on load. Nothing is rounded — the geometry is pure rectangle.

Colors

Brand / Voltage. lime #C6FF00 is the sole accent: the logo mark block, the active nav tab fill, the est-1RM and PR numerals, LED "lime" fills, PR heatmap cells, positive trend triangles, the text selection (selection:bg-[#C6FF00]), and "ALL SYSTEMS" status. hazard #FF4D2E is the alarm color: fatigue numeral, the FAIL/DELOAD heatmap cell, deload-protocol label, down-trend triangles, and all blinking status dots (LIVE, DELOAD SOON).

Surface. bg #101214 is the page graphite. panel #15181B fills the header, the right sidebar, and the inner tiles of the metric strips. panel-alt #1A1E22 backs the deload-protocol callout. cell-rest #1F2429 is the heatmap REST cell and its legend swatch. seg-off #22272C is the unlit LED segment.

Intensity ramp. A neutral grey ramp drives the heatmap, legend, and LED steel fills: intensity-low #3A3F44, intensity-med #5A6066, intensity-high #8A9097 (LOW / MED / HIGH).

Text. text-strong #FFFFFF for headings and primary numerals; text-muted #8A9097 for all labels, units, captions and body (it doubles as the HIGH intensity grey); black #000000 for text sitting on lime fills.

Hairlines. hairline #2A2F34 is everywhere — every 2px border-b/r/l-2 divider, the 1px heatmap-cell borders, the connector dots between cells, and the gap-px lines inside the metric strips.

Typography

Three Google Fonts via one @import: Archivo (display, weights 600–900), Roboto (body, 400/500/700), and Roboto Mono (mono, 400/500/700, with font-variant-numeric: tabular-nums). Archivo's compressed grotesque carries all the big numerals at weight 900; Roboto Mono carries every uppercase label at 10–12px with wide tracking. Body Roboto is set on the wrapper but the UI is almost entirely mono + display in practice.

Token	Size	Weight	Tracking	Usage
display	36px (text-4xl)	900	-0.02em	KPI stat numerals; logo (text-xl), section heads (text-lg) scale down
display-heading	18px (text-lg)	900	-0.02em	"TRAINING CIRCUIT", "LIFT REGISTRY"
body	14px	400	—	wrapper default (rarely surfaced)
mono	12px (text-xs)	400/700	—	nav tabs, lift values
mono-label	10px	400	0.25em	telemetry labels, captions, legends (uppercase)

Layout

Base unit 4px (Tailwind scale); tile padding is p-5 (20px), strip cells p-3 (12px). The page is full-bleed with no outer max-width or centering — it fills the viewport like a console. Vertical structure: (1) a flush flex header whose segments are partitioned by border-r/l-2 hairlines, pushing live stats to the right with ml-auto; (2) a grid-cols-2 lg:grid-cols-4 KPI band; (3) a lg:grid-cols-[1fr_400px] main split — a heatmap section on the left and a fixed-width 400px right rail. The metric strips use the gap-px over a hairline background trick to draw hairline grid lines. Whitespace is tight and uniform; density and alignment do the work, not breathing room.

Elevation & Depth

Essentially flat — depth comes from 2px hairlines and panel-on-bg contrast, not shadows. The only "elevation" is glow: .pr-glow puts a lime box-shadow plus inset glow on the logo mark and PR legend swatch; lit lime LED segments get a 0 0 4px lime glow; the est-1RM numeral has a text-shadow:0 0 14px lime halo; the heatmap marker uses a white 0 0 8px glow. The .scan scanline overlay adds a subtle CRT texture across the whole surface.

Shapes

Strictly rectangular. There is no rounded-* anywhere in the markup — every tile, cell, segment, swatch, dot and button is a hard-cornered rectangle or square. This sharpness is the brand: it reads as instrumentation, not consumer app. The only "shapes" are small solid squares (status dots, the logo mark) and thin bars (LED segments, sparklines, the heatmap marker).

Components

• Header — panel #15181B, border-b-2 hairline; flush flex row of hairline-separated segments (logo, meso nav, athlete, BW/RPE/SESSION/LIVE readouts).
• Logo mark — 28px solid lime square with .pr-glow; "IRONLOG" in Archivo 900 over "STRENGTH OS" mono caption (tracking-[0.3em]).
• Nav tab — mono text-xs, border-r-2, px-4 full height; muted by default, hover:text-white. Active tab: lime fill, black text, font-700 ("MESO 3 · WK 4").
• KPI tile — p-5, border-r-2; mono-label header row, Archivo-900 count-up numeral (white / lime PR / hazard fatigue) + unit, then an LED fill bar.
• LED bar — 36 segments, flex-1 h-5 gap-[3px], unlit seg-off; fills steel ramp / lime / fatigue red via JS; optional white sliding marker.
• Heatmap — 6 week-rows × 7 day-cols, cells h-14 with 1px hairline border; fill from intensity map; PR cells lime + .pr-pulse, fail cells hazard; 2px connector dots link cells horizontally.
• Metric strip — 3-up grid, gap-px on hairline bg, border-2 wrapper, tiles panel p-3; mono label + Archivo-800 figure (PR CELLS / FAILED SETS / etc.).
• Lift row (right rail) — px-5 py-4 border-b-2; Archivo-800 lift name, mono scheme, a 10-bar sparkline (lime up / hazard down), right-aligned mono weight and trend.
• Deload callout — panel-alt block, blinking hazard label, mono body with inline white/lime emphasis spans.

Motion

All driven by GSAP (+ ScrollTrigger), CSS keyframes for the loops:

• Count-up — numerals tween 0→target over 1.6s power2.out (delay 0.2s), formatted with toLocaleString.
• LED fill — segments light sequentially over 1.1s power2.out (delay 0.3s); lime segments gain a glow; the est-1RM bar's white marker slides to the fill %.
• Heatmap reveal — cells fade + scale 0.4→1, 0.5s back.out(1.7), stagger 0.012s.
• Sparklines — scaleY 0→1 on scroll into view, 0.5s power2.out, stagger 0.02s.
• Loops — .pr-pulse (lime glow 4→12px, 1.8s infinite) on PR cells; .blink (opacity 1→0.15, 1.4s steps) on live/alert dots; the header clock ticks every second.

Iconography

No icon library. Status is conveyed by geometric primitives: small solid squares/dots (6px status dots, 12px legend swatches, the 28px logo mark) and unicode triangles ▲ ▼ for trend direction. Colors follow state — lime for positive/live, hazard for alert, hairline grey for inactive. Decorative glow is reserved for lime PR elements.

Do's and Don'ts

• Do separate regions with 2px #2A2F34 hairlines, never with shadows or gaps.
• Do reserve lime #C6FF00 for PRs / live / positive and hazard #FF4D2E for failure / fatigue / alerts — they are semantic, not decorative.
• Do keep every label uppercase mono with wide tracking; big numbers in Archivo 900.
• Do keep the scanline overlay and rectangular geometry — they are the HUD identity.
• Don't introduce rounded corners, drop shadows, or soft fills.
• Don't add a third accent hue or use lime/hazard for neutral chrome.
• Don't center the layout or cap its width — it should fill the viewport.

Known Gaps

• The scanline overlay opacity (~1.5% white) and the exact glow radii are read literally from the <style> block; rendered intensity may vary by display.
• Archivo font-900 etc. are author-defined utility classes mapped to numeric weights; Tailwind's default font-* names are not used.
• Type sizes for the big numerals are Tailwind text-4xl (≈36px); the spec lists the Tailwind default rather than a measured pixel value.
• Body Roboto is declared on the wrapper but rarely surfaces; the live UI is effectively mono + display.