name: overdrive-design
version: alpha
description: >
  A cyberpunk diagnostic-terminal landing page for a fictional tube-amp and
  reference-monitor brand. The surface is near-black void (#0A0B10) lit by three
  neon "voltages" — magenta (#FF2D9B), cyan (#19E0FF) and acid green (#B6FF3C) —
  carried entirely on hairline-thick borders rather than fills. Geometry is hard
  and industrial: 3px frames, clipped/cut corners, hard offset drop-shadows in
  neon, plus a CRT-scanline + grain overlay, animated VU meters, a glitch
  display face, and a faux frequency-response readout. Type is Chakra Petch for
  uppercase headings, Share Tech Mono for the relentless telemetry copy, and
  Rajdhani for body.
colors:
  # Brand voltages
  voltage-magenta: '#FF2D9B'   # primary accent: all 3px borders, primary buttons, section dividers, glitch layer
  voltage-cyan: '#19E0FF'      # secondary accent: mono labels, telemetry text, secondary buttons, glitch layer
  voltage-green: '#B6FF3C'     # signal/verified accent: status pulses, peak markers, "good" values
  # Surface
  surface: '#0A0B10'           # page background (void)
  surface-panel: 'rgba(0,0,0,0.6)'  # readout/log panel fill (black/60)
  surface-glass: 'rgba(0,0,0,0.4)'  # VU panel fill (black/40)
  # Text
  text: '#E6E9F0'              # base body text
  text-on-accent: '#0A0B10'   # near-black text on neon buttons
  white: '#FFFFFF'            # heading fill, emphasized values
  # Hairlines / muted
  text-muted: 'rgba(230,233,240,0.7)'   # body paragraphs (text-[#E6E9F0]/70)
  text-faint: 'rgba(230,233,240,0.4)'   # axis labels, footer fine print
  hairline-magenta: 'rgba(255,45,155,0.6)'  # softened 3px frames (border-[#FF2D9B]/60)
  hairline-cyan: 'rgba(25,224,255,0.4)'     # softened cyan frames / panel outlines
typography:
  display:
    fontFamily: "'Chakra Petch', sans-serif"
    fontSize: clamp(3rem, 8vw, 7rem)
    fontWeight: 700
    lineHeight: 0.92
    textTransform: uppercase
  heading:
    fontFamily: "'Chakra Petch', sans-serif"
    fontSize: 48px
    fontWeight: 700
    textTransform: uppercase
  body:
    fontFamily: "'Rajdhani', sans-serif"
    fontSize: 18px
    fontWeight: 500
  mono:
    fontFamily: "'Share Tech Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 1.5px
    textTransform: uppercase
rounded:
  # Brutalist: corners are clipped (clip-path), not radiused. Only status dots are round.
  none: 0px
  cut: 16px        # cut-corner clip-path notch
  cut-lg: 28px     # cut-corner-lg clip-path notch
  full: 9999px     # status-dot crosshair ring only
spacing:
  # base unit: 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 48px
  '3xl': 64px
components:
  navbar:
    backgroundColor: '{colors.surface}'   # bg-[#0A0B10]/95 + backdrop-blur-xs
    borderColor: '{colors.voltage-magenta}'  # border-b-[3px]
    typography: '{typography.mono}'
    padding: '0 24px'
  button-primary:
    backgroundColor: '{colors.voltage-magenta}'
    textColor: '{colors.text-on-accent}'
    typography: '{typography.heading}'
    rounded: '{rounded.cut}'   # cut-corner
    padding: '10px 20px'
    # hover: shadow-[6px_6px_0_#19E0FF] (hard cyan offset)
  button-secondary:
    backgroundColor: '{colors.voltage-cyan}'
    textColor: '{colors.text-on-accent}'
    typography: '{typography.heading}'
    rounded: '{rounded.cut}'
    padding: '14px 28px'
    # hover: shadow-[6px_6px_0_#FF2D9B]
  button-ghost:
    backgroundColor: 'transparent'
    textColor: '{colors.voltage-magenta}'
    borderColor: '{colors.voltage-magenta}'   # border-[3px]
    typography: '{typography.heading}'
    padding: '12px 28px'
  readout-panel:
    backgroundColor: '{colors.surface-panel}'
    borderColor: '{colors.voltage-magenta}'   # border-[3px]
    textColor: '{colors.voltage-cyan}'
    typography: '{typography.mono}'
    padding: '20px'
  status-chip:
    backgroundColor: 'transparent'
    textColor: '{colors.voltage-green}'
    borderColor: '{colors.voltage-green}'   # border-2
    typography: '{typography.mono}'
    padding: '4px 12px'
    # leading w-2 h-2 green animate-pulse square
  card-image:
    borderColor: '{colors.voltage-magenta}'   # border-[3px]
    rounded: '{rounded.none}'
    # full-bleed image + bottom gradient scrim from surface
motion:
  vupulse: 'VU bars animate height 12%->95%; GSAP yoyo loop, duration 0.3-0.7s, power1.inOut, random delays'
  wavepulse: 'footer waveform bars scaleY 0.3<->1, GSAP yoyo, duration 0.4-0.9s, sine.inOut'
  neonflicker: '@keyframes 3.5s infinite — opacity 1<->0.4 with magenta drop-shadow on response curve'
  blink: '@keyframes blink 1s step-end infinite on terminal cursor blocks'
  glitch: 'JS toggles .active class for 80ms; magenta + cyan pseudo-element offset slices, fired on intervals 2.6/3.7/4.2s'
  datarain: '@keyframes 3s linear infinite — vertical data lines translateY -100%->400%'
  nav-glitch-hover: 'text-shadow -2px 0 magenta, 2px 0 cyan on hover'
  scroll-reveal: 'GSAP ScrollTrigger: sections/header fade+rise y:40 opacity:0, 0.7s power2.out at top 85%'
  scanlines: 'fixed CRT overlay, repeating-linear-gradient, mix-blend overlay; SVG fractalNoise grain at 0.06 opacity'
icons:
  library: inline SVG
  style: thin-line crosshair / target reticle + SVG line-chart; no icon font
  stroke: 1px
  sizes: { sm: 9px, md: 10px, lg: 40px }
  color: '{colors.voltage-cyan}'

Overdrive Audio

overdrive-design · alpha

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

Overview

Overdrive Audio is a cyberpunk diagnostic-console landing page for a fictional maker of vacuum-tube amplifiers and reference bookshelf monitors. The whole page sits on a near-black void (#0A0B10) treated like the screen of a piece of test equipment: a fixed CRT scanline overlay and an SVG fractalNoise grain layer ride on top in mix-blend-mode:overlay, so everything reads through a faint CRT haze. The brand has no single accent — it runs on three neon "voltages": magenta #FF2D9B (the structural color, used for nearly every 3px border, primary button, and section rule), cyan #19E0FF (the data color, used for mono labels and telemetry), and acid green #B6FF3C (the signal color, reserved for "good"/verified values and the live status pulses). The signature moves are all industrial-machine: 3px hard frames everywhere, cut-corner clip-paths that notch the top-right of buttons and panels, hard neon offset drop-shadows (6px 6px 0) on hover, animated VU meters and a footer waveform built in JS, a glitch effect that slices headings into magenta/cyan on intervals, and a faux FREQUENCY_RESPONSE.svg line chart with a flickering neon trace. Type is a three-face system: Chakra Petch 700 uppercase for display/headings, the relentless Share Tech Mono for telemetry copy (status logs, spec readouts, axis labels), and Rajdhani for body. The geometry is sharp and rectangular — the only true curve in the system is the crosshair ring on the hero target.

Colors

Brand voltages. The system carries its color almost entirely on borders, not fills. voltage-magenta #FF2D9B is the dominant structural color: the sticky nav bottom border, the 3px frames around the hardware-rack grid and its cells, all section dividers, primary buttons, the glitch ::before slice, and the text-shadow half of nav hover. voltage-cyan #19E0FF is the data voltage: all Share Tech Mono labels, telemetry readout text, the secondary button fill, the iso-grid background lines, and the glitch ::after slice. voltage-green #B6FF3C is the signal voltage, reserved for positive/verified values (PEAK +3dB, LOCKED, VERIFIED, FREE), the pulsing ONLINE status squares, and peak markers on the response curve.

Surface. surface #0A0B10 is the page void and the nav fill (at 95%). Panels use translucent blacks: surface-panel rgba(0,0,0,0.6) for readout/log cells, surface-glass rgba(0,0,0,0.4) for the hero VU box; the footer card and some labels use solid black.

Text. text #E6E9F0 is the base ink; white is reserved for heading fills and emphasized spec values. text-on-accent #0A0B10 (near-black) sits on every neon button. Muted tiers are opacity ramps of the base ink: text-muted rgba(230,233,240,0.7) for body paragraphs, text-faint rgba(230,233,240,0.4) for axis labels and footer fine print.

Hairlines. Softened frames use the voltages at reduced alpha: hairline-magenta rgba(255,45,155,0.6) (the hero VU box border) and hairline-cyan rgba(25,224,255,0.4) (telemetry panel and overlay outlines).

Typography

Three faces, all loaded from Google Fonts in one @import: Chakra+Petch:wght@400..700, Rajdhani:wght@400..700, and Share+Tech+Mono. Chakra Petch is the display/heading face — geometric, slightly squared, always 700 weight and uppercase. Share Tech Mono is the telemetry face — a single- weight monospace used for every label, log line, spec readout and axis tick, almost always uppercase with wide tracking. Rajdhani is the body face (set as the page font-family default), a condensed humanist sans used at 500 for paragraphs.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(3rem, 8vw, 7rem)	700	0.92	—	Hero SIGNAL / INTEGRITY headline (uppercase, glitch)
heading	48–60px (text-4xl/5xl)	700	tight	—	Section h2 "RACK-MOUNT MATRIX", "ACOUSTIC TELEMETRY"
heading-sm	20–24px (text-xl/2xl)	700	normal	—	Card titles "CYAN-7 MONITOR", footer wordmark
body	18px (text-lg)	500	normal	—	Hero + telemetry paragraphs (Rajdhani)
mono	9–12px	400	relaxed	wide (tracking-widest)	All telemetry: labels, logs, axis ticks, status

Layout

Base unit is 4px (Tailwind's default scale); the page is centered in a max-w-[1440px] column with px-6 gutters. The composition runs as a stack of full-width sections each fenced top/bottom by 3px magenta rules:

1. Sticky nav (68px tall) — wordmark + version tag, mono nav links, an ONLINE status chip, and a magenta RUN_DIAGNOSTIC cut-corner button.
2. Hero — min-h-[88vh] two-column grid: left column holds a [SYS] boot line, the glitching SIGNAL // INTEGRITY headline, body copy, two buttons, and a live VU-meter panel; the right column is a diag-clip (diagonally clipped) photo of glowing copper coils with a crosshair target overlay and a telemetry HUD box.
3. Hardware rack — a 3-column grid of cells (images + readout.log panels) set inside one big 3px magenta frame with gap-0, so the cells share borders like a real rack matrix; the first cell spans two rows.
4. Acoustic telemetry — an iso-grid background section with a 40/60 split: a copy panel and an overlapping (-ml-20) cut-corner-lg card holding the SVG frequency-response chart with a hard magenta offset shadow.
5. Footer — a single bordered black card with an animated waveform strip, three mono columns (directory / system / transmit), and an EOF line. Whitespace is dense and instrumented — the page is meant to feel packed with live readouts, not airy.

Elevation & Depth

Depth comes from borders and hard offset shadows, never soft blur. The hallmark elevation is the hard neon offset shadow: shadow-[6px_6px_0_#19E0FF] / [6px_6px_0_#FF2D9B] appears on button hover, and a larger shadow-[10px_10px_0_rgba(255,45,155,0.3)] lifts the telemetry chart card. The only blur in the system is backdrop-blur-xs on the sticky nav. Glow is used sparingly: a text-shadow:0 0 20px rgba(25,224,255,0.4) on the telemetry heading, and drop-shadow flicker on the response curve. Atmosphere is supplied by the fixed CRT scanline overlay (repeating-linear-gradient, z-90, overlay blend) and the SVG grain layer (z-91, opacity 0.06).

Shapes

This is a brutalist, hard-edged system — no rounded-* softening. Corners are either square or clipped: cut-corner notches a 16px wedge off the top-right of buttons and panels via clip-path; cut-corner-lg notches 28px on the chart card; diag-clip cuts the hero image into a steep diagonal leading edge. The single rounded element in the whole page is the small rounded-full ring at the center of the hero crosshair reticle. Status indicators are tiny 2x2 squares (not dots).

Components

• Navbar — #0A0B10/95 with backdrop-blur-xs, bottom border-b-[3px] magenta; 68px tall; mono uppercase links that glitch on hover; magenta cut-corner RUN_DIAGNOSTIC button.
• Primary button — magenta fill, near-black Chakra Petch 700 uppercase label, cut-corner, hover hard cyan offset shadow. Labels like RUN_DIAGNOSTIC, DEPLOY_UNIT, CONFIGURE_RACK.
• Secondary button — cyan fill, near-black label, cut-corner, hover magenta offset shadow. Labels VIEW_RACK, ENGAGE.
• Ghost button — transparent, border-[3px] magenta, magenta label; hover offset shadow + white text. Label SPEC_SHEET.
• Readout/log panel — black/60 fill, border-[3px] magenta, cyan mono body with magenta header (> readout.log // A), white/green inline values, thin progress bars and micro VU bars.
• Status chip — transparent, border-2 green, green mono ONLINE with a pulsing 2x2 green square.
• Image card — full-bleed photo, border-[3px] magenta, bottom gradient scrim from #0A0B10, mono tag overlays (DRIVER_SCAN, KEVLAR_CONE).
• VU meter / waveform — JS-built bar strips with a magenta->cyan->green vertical gradient (VU) or per-bar neon colors + glow (footer).
• Telemetry HUD — black/50, border cyan/40, right-aligned mono spec list with green/magenta value highlights.

Motion

Heavily animated, driven by GSAP (with ScrollTrigger) plus CSS keyframes. JS builds 28 VU bars and 70 footer waveform bars, each looping height/scaleY with randomized durations (0.3–0.9s) and delays for an organic flutter. Headings glitch via a JS-toggled .active class (80ms bursts on 2.6s/3.7s/4.2s intervals) that paints magenta and cyan offset pseudo-element slices. CSS keyframes supply neonflicker on the response curve (3.5s), blink cursors (1s step-end), and datarain vertical scan lines (3s linear). Sections and the header fade+rise (y:40, opacity:0 -> 0, 0.7s power2.out) on scroll at top 85%. Nav links shift a magenta/cyan text-shadow on hover.

Iconography

No icon font — all "icons" are inline SVG or composed from divs. The hero target is a crosshair reticle (two 1px cyan rules + a small rounded-full cyan ring). The telemetry chart is a hand-authored SVG polyline over a <pattern> grid with peak-marker circles. Decorative ASCII-style glyphs (>, //, █, _) stand in for UI chrome throughout. Color follows the voltages: cyan for data, green for peaks/verified, magenta for warnings (CORE_TEMP).

Do's and Don'ts

• Do carry color on 3px borders and neon offset shadows, not on big fills — the surface should stay near-black.
• Do keep the three-voltage discipline: magenta = structure, cyan = data, green = positive signal.
• Do set all labels and telemetry in Share Tech Mono, uppercase, wide tracking; headings in Chakra Petch 700 uppercase.
• Do notch corners with cut-corner/diag-clip rather than rounding them.
• Don't introduce soft/blurred drop-shadows or rounded cards — depth is hard offsets and hairlines only.
• Don't put neon text on neon fills; button labels are near-black #0A0B10.
• Don't drop the CRT/grain overlays or the live VU/waveform motion — the "running diagnostic" feel depends on them.

Known Gaps

• VU and footer waveform bar counts, per-bar colors, and animation durations/delays are generated in JS at runtime (read from the script); individual bar heights are random.
• The grain overlay is an SVG fractalNoise filter (baseFrequency=0.8), approximated as a 0.06-opacity overlay rather than a fixed asset.
• Heading sizes for h2/card titles are Tailwind classes (text-4xl/5xl/xl/2xl); px values listed are the standard Tailwind equivalents.
• Rajdhani is set via the root inline font-family and assumed loaded by the shared Google Fonts @import.