name: axiom9-design
version: alpha
description: >
  A near-black motorsport HUD for a carbon-plate racing sneaker. The surface is
  ink-black `#0A0A0A`; two voltages drive every accent — a high-visibility
  acid-lime `#C6FF00` ("volt") and an electric cobalt `#1E5BFF`. The signature
  move is relentless 15-degree shear: skewed panels, parallelogram/rhombus
  clip-path tiles, diagonal cobalt wedges, and a clip-path video hero. Type is
  black italic Archivo for explosive display headings, Inter for body, and IBM
  Plex Mono for telemetry labels set in wide all-caps tracking. Geometry is
  sharp and bracketed — zero corner radius, corner-tick frames, and animated
  chevron streaks reacting to scroll velocity.
colors:
  # Surface
  surface: '#0A0A0A'         # page background (.ax-body), HUD panels, deploy card
  surface-deep: '#070707'    # matrix section background
  surface-panel: '#101010'   # anatomy mesh/foam panels (#101010 / #111)
  surface-tile: '#111111'    # matrix data tiles (bg-[#111])
  # Brand / Voltage
  volt: '#C6FF00'            # primary accent — progress bar, headings, lines, CTAs
  cobalt: '#1E5BFF'          # secondary accent — wedges, plate, deploy section bg
  # Text
  text: '#D8DDE2'            # primary body/heading text (cool off-white)
  text-on-volt: '#000000'    # black text on volt fills
  text-on-cobalt: '#FFFFFF'  # white text on cobalt fills
  # Hairlines
  hairline: 'rgba(216,221,226,0.15)'  # borders/dividers (D8DDE2 @ 15%)
  hairline-panel: 'rgba(216,221,226,0.18)'  # HUD panel border
  # Gradient
  hero-scrim: 'rgba(0,0,0,0.7)'  # hero left-to-right black gradient over video
  deploy-glow: 'rgba(198,255,0,0.15)'  # radial volt glow in deploy section
typography:
  display:
    fontFamily: "'Archivo', sans-serif"
    fontSize: clamp(8vw, 15vw, 9rem)
    fontWeight: 900
    fontStyle: italic
    letterSpacing: -0.02em
    textTransform: uppercase
  heading:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 72px
    fontWeight: 900
    fontStyle: italic
    letterSpacing: -0.02em
    textTransform: uppercase
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  mono-label:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 0.3em
    textTransform: uppercase
  mono-micro:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.1em
rounded:                      # zero radius everywhere — sharp brutalist geometry
  none: 0px
spacing:                      # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 48px
components:
  logo-badge:
    backgroundColor: '{colors.volt}'
    textColor: '{colors.text-on-volt}'
    typography: '{typography.heading}'
    rounded: '{rounded.none}'
    padding: '2px 8px'
    note: 'skewed -9deg badge, "A9" counter-skewed inside'
  sys-badge:
    backgroundColor: '{colors.cobalt}'
    textColor: '{colors.text-on-cobalt}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '8px 16px'
    note: 'skewed -9deg, label "SYS.READY"'
  cta-button:
    backgroundColor: '{colors.volt}'
    textColor: '{colors.text-on-volt}'
    typography: '{typography.heading}'
    rounded: '{rounded.none}'
    padding: '12px 28px'
    note: 'skew-card (-9deg); content unskewed; "DEPLOY — $260"'
  hud-panel:
    backgroundColor: 'rgba(10,10,10,0.55)'
    textColor: '{colors.volt}'
    typography: '{typography.mono-micro}'
    rounded: '{rounded.none}'
    padding: '8px 12px'
    border: '1px solid {colors.hairline-panel}'
    note: 'absolute floating spec callouts on hero shoe, skewed'
  matrix-tile:
    backgroundColor: '{colors.volt}'
    textColor: '{colors.text-on-volt}'
    typography: '{typography.heading}'
    rounded: '{rounded.none}'
    padding: '32px'
    note: 'clip-path rhombus/parallelogram; variants in cobalt or #111 + volt border'
  anatomy-card:
    backgroundColor: '{colors.surface-panel}'
    textColor: '{colors.text}'
    typography: '{typography.heading}'
    rounded: '{rounded.none}'
    padding: '24px'
    border: '1px solid {colors.hairline}'
    note: 'skewed -15deg panel inside corner-tick bracket frame'
  deploy-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '32px'
    border: '1px solid {colors.text-on-volt}'
    note: 'skewed -9deg pricing card on cobalt section'
motion:
  progress-bar: 'volt scaleX bar scrubbed to page scroll (ScrollTrigger scrub 0.3)'
  hero-shoe: 'rotates 12deg and lifts y:-30 as anatomy enters (scrub 1)'
  tracker-lines: 'volt SVG lines flicker opacity 1→0.3, repeat yoyo, staggered'
  chevron-streaks: 'chevrons dart on scroll velocity (x = velocity*speed) then settle back'
  anatomy-entrance: 'layers slide in from x:120, fade, power3.out, 0.8s on scroll'
  matrix-entrance: 'tiles rise y:60, fade, power3.out, 0.7s on scroll'
  count-up: 'matrix numbers count 0→target over 1.4s power4.out, once'
  ticker: 'mono marquee scrolls xPercent -50 over 18s, infinite linear'
icons:
  library: Tabler Icons (webfont, ti)
  style: outline
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.volt}'
  note: 'ti-chevron-right (decorative streaks), ti-bolt (spec rows), brand icons in footer'

Axiom-9

axiom9-design · alpha

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

Overview

Axiom-9 is a motorsport-grade HUD landing page for a fictional carbon-plate racing sneaker. The whole thing sits on ink-black #0A0A0A and is lit by two "voltages": an acid-lime #C6FF00 (the .volt class) carrying the progress bar, headlines, tracker lines and CTAs, and an electric cobalt #1E5BFF (the .cobalt/.bg-cobalt class) used as massive diagonal wedges, the carbon-plate callout, and the full deploy section. The signature move is a relentless 15-degree shear — -skew-x-[15deg] cobalt slabs slice the hero and section backgrounds, while UI chrome uses a tighter 9-degree skew (.skew-card / .unskew counter-rotation pair). Headlines are explosive black italic Archivo set huge (text-[15vw] in the hero), body copy is calm #D8DDE2 Inter, and every label is wide-tracked uppercase IBM Plex Mono with // and ▸ telemetry punctuation. Geometry is aggressively sharp: zero corner radius, parallelogram/rhombus clip-path data tiles, bracket corner-tick frames around anatomy panels, a clip-path video hero, and a jagged top edge on the deploy section.

Colors

Surface. The page is #0A0A0A (.ax-body). The matrix section drops to #070707 (surface-deep); anatomy panels are #101010/#111 (surface-panel, surface-tile); HUD panels and the deploy pricing card use translucent rgba(10,10,10,0.55) / #0A0A0A.

Voltage (brand). Volt #C6FF00 is the primary accent — scroll progress bar (.bg-volt), the word "THE", section eyebrows, tracker SVG lines (stroke:#C6FF00), the diagonal volt rail with shadow-[0_0_20px_#C6FF00] glow, count-up stats, and every primary CTA. Cobalt #1E5BFF is the secondary voltage — the giant skewed hero wedges (one at 40% opacity), the "02 — CARBON PLATE" panel, two matrix tiles, and the entire deploy section background.

Text. Primary text is cool off-white #D8DDE2, frequently at /70, /60, /50 opacity for hierarchy. On volt fills text is black #000000; on cobalt fills text is white #FFFFFF.

Hairlines. Borders/dividers are #D8DDE2 at ~15% (rgba(216,221,226,0.15)); HUD panels use 18%. On the cobalt deploy section, dividers switch to rgba(0,0,0,0.3).

Gradient. The hero video carries a left-to-right black scrim (from-black/70 via-black/20 to-black/60). The deploy section has a radial volt glow radial-gradient(circle at 70% 20%, rgba(198,255,0,0.15), transparent 50%).

Typography

Three Google Fonts via one @import: Archivo (700/900) for display, Inter (400/500/600) for body, IBM Plex Mono (400/500/600) for labels. The display face is always weight 900, italic, uppercase, with -0.02em tracking (.ax-disp). Mono labels carry wide tracking (0.3em/0.25em) and are uppercase (.ax-mono).

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp ~8–15vw	900 italic	0.82	-0.02em	Hero "BREAK / THE / BARRIER"
heading	48–72px (text-5xl–7xl)	900 italic	tight	-0.02em	Section titles, CTAs, stats
body	14–16px	400	1.6	—	Paragraphs, descriptions
mono-label	12px	400	—	0.3em	Eyebrows, spec labels, ticker
mono-micro	10px	400	—	wide	HUD panel labels

Layout

Base unit 4px on the Tailwind scale; content max-width 1440px centered with px-6 md:px-12. The page is four full-bleed sections. Hero: a 12-col grid — left column headline + CTA, right column the floating shoe image with SVG tracker lines and three skewed HUD spec panels; behind it a clip-path video (polygon(0 0, 62% 0, 38% 100%, 0 100%)), two cobalt wedges, a glowing volt rail, drifting chevrons, and a bottom telemetry strip. Anatomy: three right-aligned max-w-4xl layer cards inside bracket corner-tick frames, each a -skew-x-[15deg] panel with counter-skewed content and a mono spec column. Matrix: a 12-col grid of clip-path data tiles (rhombus/parallelogram) mixing volt, cobalt, and dark fills. Deploy: a clip-jag cobalt section with a mono marquee ticker, big black headline, a skewed dark pricing card, and footer. Whitespace is generous vertically (py-28 md:py-40) but the composition is dense with overlapping diagonal layers.

Elevation & Depth

Mostly flat with hairline borders rather than shadows. Depth comes from overlapping skewed translucent slabs and three specific glows: the volt rail shadow-[0_0_20px_#C6FF00], the hero shoe drop-shadow-[0_20px_40px_rgba(0,0,0,0.6)], and the deploy radial volt glow. HUD panels declare backdrop-filter:none (authored as panels, not glass). The fixed header sits on bg-black/30.

Shapes

Zero corner radius throughout — no rounded-* classes appear; the language is hard edges and angles. Shape identity comes instead from skew transforms (15deg structural, 9deg UI) and clip-path polygons: clip-hero-video, clip-rhombus, clip-parallelo, and clip-jag. Anatomy cards are wrapped in bracket frames built from absolutely-positioned 2px volt corner ticks.

Components

• Logo badge — volt fill, black A9 in Archivo, skewed -9deg, padding 2px 8px; paired with "AXIOM-9" wordmark.
• SYS.READY badge — cobalt fill, white mono label, skewed -9deg, padding 8px 16px.
• CTA button — volt fill, black Archivo label "DEPLOY — $260", skewed -9deg with unskewed content, padding 12px 28px (deploy variant py-4, text-xl).
• HUD spec panel — translucent rgba(10,10,10,0.55), 1px D8DDE2/18 border, mono micro label + volt value (e.g. "FLYKNIT 3.2"), skewed.
• Matrix tile — clip-path rhombus/parallelogram, fills in volt (black text), cobalt (white text), or #111 with volt/grey border; giant count-up number + unit.
• Anatomy card — #101010 panel, 1px hairline (or volt border for foam), -skew-x-[15deg] with counter-skewed Archivo title "01 — MESH"; corner-tick bracket frame.
• Deploy pricing card — #0A0A0A fill, 1px black border, skewed -9deg, mono spec rows + $260 Archivo, volt CTA.
• Telemetry strip / ticker — mono wide-tracked text separated by volt ● dots or ▸/|; bottom hero strip is static, deploy ticker is a marquee.

Motion

GSAP + ScrollTrigger drive everything. Volt progress bar scrubs to scroll (scaleX, scrub 0.3). The hero shoe rotates 12deg and lifts as anatomy enters (scrub 1). Tracker SVG lines flicker opacity (1→0.3, yoyo, staggered). Chevrons streak by scroll velocity (x = velocity*speed) then ease back to 0. Anatomy layers slide in from x:120 (power3.out, 0.8s); matrix tiles rise from y:60 (power3.out, 0.7s). Matrix numbers count up 0→target over 1.4s (power4.out, once). The deploy ticker marquees xPercent:-50 over 18s, infinite linear.

Iconography

Tabler Icons via webfont (ti classes), outline style. ti-chevron-right is the decorative streak motif in volt at varied sizes/opacities; ti-bolt marks anatomy spec rows in volt; footer brand icons (ti-brand-instagram, ti-brand-x, ti-brand-youtube) render black on the cobalt section. Default icon color is volt #C6FF00 for accents, otherwise inherits text color.

Do's and Don'ts

• Do keep the two voltages disciplined: volt for primary action/data, cobalt for structural wedges and the deploy zone.
• Do maintain the skew system — 15deg for big structural slabs, 9deg for UI chrome, always with a counter-skew on the content.
• Do set every label in wide-tracked uppercase mono with //, ▸, ● telemetry punctuation.
• Do keep corners hard (radius 0) and lean on clip-path polygons and bracket ticks for shape interest.
• Don't introduce rounded corners, soft shadows, or glassy blur (HUD panels are explicitly backdrop-filter:none).
• Don't add a third accent color or set display type in anything but black italic Archivo.
• Don't flatten the diagonals to a straight grid — the shear is the brand.

Known Gaps

• The display fontSize is a clamp() approximation of the hero's text-[15vw] md:text-[8vw] plus section text-5xl/7xl/8xl headings; the source uses viewport/Tailwind step sizes, not a single declared clamp.
• Spacing scale is inferred from Tailwind utility classes (4px base); no explicit spacing tokens exist in the HTML.
• HUD panel translucency (rgba(10,10,10,0.55)) is read from the .hud-panel rule; on-cobalt black hairline rgba(0,0,0,0.3) is read from border-black/30.