name: meridian-blueprint-design
version: alpha
description: >
  A drafting-table blueprint UI for a certification study planner. The surface is
  a deep navy (#0E2A47) overlaid with a two-tier cyan engineering grid (24px fine +
  120px major). One amber "voltage" (#F2A93B) marks active/recommended states and the
  primary CTA; a teal (#3FB984) signals done/verified; cyan (#5FB0D9) carries all the
  technical labels and dimension lines. Everything is built from hairline-bordered
  cells with zero corner radius — a literal engineering drawing. Type is a three-face
  system: heavy uppercase Archivo headlines, Atkinson Hyperlegible body, and IBM Plex
  Mono for every label, datum, and annotation. Signature moves: title-block header,
  numbered binding strip, dependency-tree SVG with marching-dash prerequisite lines,
  an animated readiness gauge, and a revision-history table footer.
colors:
  # Surface
  navy: '#0E2A47'              # page background / all cell fills / button text on amber
  navy-grid-fine: 'rgba(95,176,217,0.07)'   # 24px blueprint grid lines
  navy-grid-major: 'rgba(95,176,217,0.14)'  # 120px blueprint grid lines
  # Brand / Voltage
  amber: '#F2A93B'            # primary CTA, active/WIP, recommended callout, selection bg
  cyan: '#5FB0D9'             # technical labels, dimension lines, datums, dep edges
  teal: '#3FB984'             # done/verified status, gauge "100" zone, success accents
  # Text
  ink: '#EAF2F8'             # primary text (off-white)
  ink-75: 'rgba(234,242,248,0.75)'  # body/secondary copy
  ink-60: 'rgba(234,242,248,0.60)'  # muted captions
  ink-45: 'rgba(234,242,248,0.45)'  # faint annotations / copyright
  # Hairlines
  hairline: 'rgba(234,242,248,0.25)'  # primary cell borders / dividers
  hairline-soft: 'rgba(234,242,248,0.18)'  # inner table dividers
  hairline-faint: 'rgba(234,242,248,0.10)'  # table row separators
  hair-cyan: 'rgba(95,176,217,0.45)'  # cyan-tinted borders on chips
  edge-cyan: 'rgba(95,176,217,0.50)'  # timeline axis line
  edge-amber: 'rgba(242,169,59,0.60)' # amber callout chip borders
typography:
  display:
    fontFamily: "'Archivo', sans-serif"
    fontSize: clamp(2.4rem,6vw,5rem)
    fontWeight: 900
    lineHeight: 0.92
    letterSpacing: -0.02em
    textTransform: uppercase
  heading:
    fontFamily: "'Archivo', sans-serif"
    fontSize: clamp(1.8rem,4vw,3rem)
    fontWeight: 900
    lineHeight: 1.0
    textTransform: uppercase
  stat:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 30px
    fontWeight: 800
  body:
    fontFamily: "'Atkinson Hyperlegible', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  mono-label:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.18em
    textTransform: uppercase
  mono-datum:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 9px
    fontWeight: 400
    letterSpacing: 0.25em
    textTransform: uppercase
rounded:                      # blueprint = strictly orthogonal
  none: 0px
spacing:                      # 4px base unit; cell padding steps at 6/10/14 (Tailwind p-6/10/14)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 56px
components:
  primary-button:
    backgroundColor: '{colors.amber}'
    textColor: '{colors.navy}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '12px 28px'
    # label e.g. "VIEW SCHEMATIC ▸"; hover:brightness-110
  ghost-button:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    border: '1px solid rgba(234,242,248,0.5)'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '12px 28px'
    # hover:bg ink/10 ; label e.g. "SCHEDULE EXAM"
  cell:
    backgroundColor: '{colors.navy}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.none}'
    padding: '24px to 56px (p-6 / p-10 / p-14)'
    # the universal hairline-bordered drawing cell; sections are grids of these
  chip:
    backgroundColor: 'transparent'
    textColor: '{colors.cyan}'
    border: '1px solid {colors.hair-cyan}'
    typography: '{typography.mono-datum}'
    rounded: '{rounded.none}'
    padding: '4px 8px'
    # e.g. "DWG · IT + PMP TRACKS"; amber variant uses {colors.edge-amber} border + amber text
  nav-link:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '8px 16px'
    border: '1px solid {colors.hairline} (left only)'
    # hover:bg cyan/15
  svg-node:
    backgroundColor: '{colors.navy}'
    border: '1.3px stroke {colors.ink}'
    rounded: '{rounded.none}'
    # dependency-tree box; final-exam node uses {colors.amber} stroke; status tag fill amber/teal
  status-tag:
    backgroundColor: '{colors.teal}'      # DONE = teal, WIP = amber
    textColor: '{colors.navy}'
    typography: '{typography.mono-datum}'
    rounded: '{rounded.none}'
    # inline rect tag inside SVG nodes
motion:
  reveal: 'GSAP from y:30, opacity:0, duration 0.7, ease power2.out, ScrollTrigger start "top 88%"'
  dep-line: 'marching dashes — strokeDashoffset 0 to -120, duration 5s, ease none, repeat -1, repeatDelay 3s'
  hero-dash: 'marching dashes — strokeDashoffset 0 to -100, duration 5s, ease none, repeat -1, repeatDelay 3s, delay 0.3s'
  node-hover: 'highlight prereq chain: stroke-width 1.5 to 3 + cyan drop-shadow, duration 0.2s'
  gauge-sweep: 'needle rotate -90 to angle + counter 0 to 78, duration 1.6s, ease power3.out, once on enter'
  button-hover: 'CSS brightness-110 (amber) / bg ink/10 (ghost)'
icons:
  library: inline SVG (no icon font) + Unicode glyphs (▸ ◂ ✓ ×)
  style: hairline line-art (logo monogram, dependency tree, gauge, timeline diamonds)
  stroke: 1.2px–1.6px
  sizes: { logo-sm: 22px, logo-md: 34px, diamond: 12px }
  color: '{colors.cyan}'

Meridian — Certification Blueprint

meridian-blueprint-design · alpha

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

Overview

Meridian dresses a certification study planner as a literal engineering drawing. The page is a deep navy field (#0E2A47) printed with a two-layer cyan blueprint grid — fine 24px lines at rgba(95,176,217,0.07) and major 120px lines at rgba(95,176,217,0.14) — so the whole canvas reads as graph paper. The composition is a stack of hairline-bordered cells (rgba(234,242,248,0.25)), never cards: a title-block header with SHEET / REV / SCALE / DATE datum columns, a vertical numbered binding strip down the left edge, full-bleed sections divided by 1px rules, and a 12-column drafting grid inside. One amber "voltage" (#F2A93B) does all the signalling — the primary CTA, the WIP/recommended states, the text selection — while teal (#3FB984) means done/verified and cyan (#5FB0D9) carries every label, dimension tick, and dependency edge. Type is a deliberate three-face split: massive uppercase Archivo 900 headlines, Atkinson Hyperlegible for human body copy, and IBM Plex Mono for every datum, code, and // annotation. The signature moves are all diagram-as-interface: a dependency-tree SVG whose prerequisite lines march as animated dashes and light up on hover, an animated readiness gauge with a sweeping needle, a 12-week timeline on a real axis with rotated-square milestones, and a revision-history table footer signed "DRAWN BY / CHECKED."

Colors

Surface. The entire page is navy #0E2A47, reused as the fill of every cell and SVG node and as the text color sitting on amber buttons. The blueprint texture is two linear-gradient grids in cyan: fine lines rgba(95,176,217,0.07) at 24px and major lines rgba(95,176,217,0.14) at 120px.

Brand / Voltage. amber #F2A93B is the single loud accent — primary CTAs, the "RECOMMENDED" callout, WIP status tags, the gauge mid-zone, and the selection highlight (selection:bg-[#F2A93B]). cyan #5FB0D9 is the technical voltage: all mono labels, datums, dimension ticks, dependency edges, and the logo box. teal #3FB984 is the success voltage: DONE tags, ✓ VERIFIED, the gauge "100" arc, and the final timeline milestone.

Text. Primary text is ink #EAF2F8 (off-white). Body and secondary copy step down through ink-75 (0.75), ink-60 (0.60), and ink-45 (0.45) for the faintest captions and copyright.

Hairlines. Cell borders and section dividers are hairline rgba(234,242,248,0.25); inner table dividers use hairline-soft (0.18) and table rows hairline-faint (0.10). Tinted borders: hair-cyan rgba(95,176,217,0.45) on cyan chips, edge-cyan (0.50) for the timeline axis, edge-amber rgba(242,169,59,0.60) for amber callout chips.

Typography

Three Google Fonts imported in one @import: Archivo (500–900), Atkinson Hyperlegible (400/700), and IBM Plex Mono (400–600). Archivo is the heavy geometric display/heading face (always uppercase, weight 800–900, negative tracking). Atkinson Hyperlegible — a high-legibility humanist sans — is the body face. IBM Plex Mono is the workhorse of this design: it sets every label, datum field, code string, and //-prefixed annotation, almost always uppercase with wide tracking.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(2.4rem,6vw,5rem)	900	0.92	tight (-)	Hero H1, uppercase
heading	clamp(1.8rem,4vw,3rem)	900	1.0	tight (-)	Section H2, uppercase
stat	30px (text-3xl)	800	—	—	Big stat numbers (240+, 94%)
body	16px	400	1.5	—	Atkinson body copy
mono-label	11px	400	—	0.18em	Nav, datum values, UI labels
mono-datum	9px	400	—	0.25em	Smallest datums (SHEET, FIG 1.0)

Mono sizes range from 8px (column captions) through 9/10/11/12/13px; the gauge number is Archivo 900 at text-5xl.

Layout

4px base unit; cell padding climbs through Tailwind p-6 / p-10 / p-14 (24/40/56px). The whole page is capped at max-w-[1440px] and centered. Structure: a sticky title-block header split into hairline-divided columns (logo, sheet name, a 4-up datum grid of SHEET/REV/SCALE/DATE, then nav); a 12px-cell numbered binding strip aside (w-12) running down the left edge; then a main of full-bleed sections each separated by a 1px rule. Inside, content lives on lg:grid-cols-12 splits (hero 7/5, schematic 8/4, schedule 7/5) with every column boundary drawn as a hairline border. The hero pairs a left text column with a right SVG dependency diagram captioned "FIG 1.0 — DEPENDENCY MAP". Whitespace is generous but always bounded by a ruled cell — nothing floats.

Elevation & Depth

Essentially flat — depth comes from hairlines, not shadows. There is exactly one soft shadow in the system, a transient cyan drop-shadow(0 0 4px #5FB0D9) applied to dependency lines on node hover. The header uses a faint glass effect: backdrop-blur-xs over bg-[#0E2A47]/85. Otherwise the blueprint grid and 1px borders carry all spatial hierarchy; crosshatch fills (repeating-linear-gradient at 45° in cyan 0.25) add texture to a couple of cells.

Shapes

Strictly orthogonal — zero corner radius anywhere (rounded.none = 0). This is the load-bearing geometric rule: every cell, button, chip, SVG node, and tag is a sharp rectangle, true to engineering-drawing convention. The only non-rectangular shapes are intentional diagram primitives: small 12px squares rotated 45° as timeline milestone diamonds, circles as graph-node status dots, and the dimension-tick pseudo-elements (::before/::after, 1px × 12px cyan) that bracket stat columns.

Components

• primary-button — amber #F2A93B fill, navy text, mono-label, no radius, ~12×28px padding, hover brightness-110. Label e.g. "VIEW SCHEMATIC ▸".
• ghost-button — transparent, rgba(234,242,248,0.5) 1px border, ink text, mono, no radius, hover bg ink/10. Label e.g. "SCHEDULE EXAM".
• cell — navy fill, hairline 1px border, no radius, p-6/10/14; the universal drawing tile. Sections are grids of cells with shared ruled boundaries.
• chip — transparent, hair-cyan border, cyan mono-datum text, no radius, 4×8px; e.g. "DWG · IT + PMP TRACKS". Amber variant: edge-amber border + amber text ("PREREQ CHAIN", "RECOMMENDED ◂ CALLOUT").
• nav-link — mono-label, left hairline border per item, hover bg cyan/15; the log-in link inverts to amber fill + navy text.
• datum field — stacked pair: cyan mono-datum caption (8–9px, wide-tracked) over a mono value (11–12px); used in header columns and footer title block.
• svg-node — navy box, 1.3px ink stroke, mono code + Archivo 700 title; carries a DONE (teal) / WIP (amber) status rect. Final-exam node uses amber stroke.
• gauge — three-arc SVG (cyan/amber/teal), ink needle, Archivo-900 readout in teal.
• revision table — full-width mono table, 11px, cyan headers, faint row hairlines; latest revision (D.04) highlighted amber.

Motion

GSAP + ScrollTrigger drive everything. .reveal blocks fade and rise (y:30 →0, opacity 0→1, 0.7s power2.out, trigger "top 88%"). The hallmark motion is the marching dashes: dependency lines animate strokeDashoffset 0 → -120 over 5s linear, repeat -1 with a 3s repeatDelay (so they crawl, pause, crawl); hero diagram dashes do the same to -100. Hovering a tree node highlights its prerequisite chain — stroke-width 1.5→3 plus a cyan glow over 0.2s. The readiness gauge sweeps its needle from -90° to the target angle while a counter tallies 0→78 over 1.6s power3.out, fired once on scroll-in. Buttons animate via CSS brightness-110 only.

Iconography

No icon font. All marks are inline SVG line-art: the logo monogram (a peaked-roof "M" inside a square with a teal apex node), the dependency tree, the readiness gauge, and the timeline milestone diamonds. Strokes are hairline, 1.2–1.6px, predominantly cyan #5FB0D9 with ink and accent strokes. UI affordances use Unicode glyphs instead of icons: ▸ (CTA arrow), ◂ (callout pointer), ✓ (verified), × (multiplier). Decorative SVG sizes: 34px and 22px logos, 12px diamonds.

Do's and Don'ts

• Do keep every container a hairline-bordered, zero-radius rectangle on the navy grid — the blueprint metaphor breaks the moment something rounds or floats.
• Do reserve amber for one job at a time (primary action / active / recommended), teal for done/verified, and cyan for technical chrome and labels.
• Do set all labels, datums, and annotations in IBM Plex Mono, uppercase and wide-tracked, and prefix narrative annotations with //.
• Do reserve Archivo 900 uppercase for headlines and big numbers only; let Atkinson Hyperlegible carry readable body copy.
• Don't add drop-shadows, gradients on cards, or rounded corners — depth is hairlines and the grid, not elevation.
• Don't let amber and teal both signal status in the same element, or use cyan as a CTA color.
• Don't remove the title-block / binding-strip / revision-table framing — they are the signature that sells the engineering-drawing concept.

Known Gaps

• Letter-spacing on Archivo headlines is Tailwind tracking-tight (~-0.02em), approximated here as -0.02em.
• Cell padding is a responsive range (p-6 → p-14); the token captures the steps but any given cell picks one per breakpoint.
• Spacing scale is inferred from observed Tailwind utilities (gap-3/4/6, mt-6/8/9/12, py-2/3), not an authored token set.
• The needle rotation uses transform-box: fill-box; transform-origin: 50% 100% with a GSAP target of 78%; the visual angle is computed at runtime.
• Body line-height is Tailwind leading-relaxed/default; recorded as 1.5.