name: apexdrill-design
version: alpha
description: >
  ApexDrill is a test-prep dashboard styled as an athletic scoreboard. A near-black
  charcoal surface (#15171C) with slightly darker panel wells (#101216) is wired
  together with hard 2px hairlines (#2A2E37) and a single electric-blue voltage
  (#2D7CFF) that doubles as the brand color, focus ring, and LED glow. Green
  (#27D17C) reads "on pace / mastered" and red (#FF4D4D) reads "needs work".
  The type story is heavy condensed Archivo Black displays in all-caps next to
  Geist Mono tabular numerals; everything is sharp-cornered (zero radius) with
  bracket corner accents, scanlines, and a sweeping blue flash. It looks like a
  stadium jumbotron for studying.
colors:
  # Brand / Voltage
  voltage: '#2D7CFF'        # electric blue — brand, primary buttons, active chips, ring, LED glow, focus
  # Surface
  bg: '#15171C'             # page background (near-black charcoal)
  panel: '#101216'          # card/panel wells, footer
  well: '#1c1f26'           # meter tracks, heatmap empty cells, ring backing
  # Text
  text: '#F4F6FA'           # primary text (off-white)
  text-muted: 'rgba(244,246,250,0.45)'  # labels, captions (F4F6FA/45)
  text-dim: 'rgba(244,246,250,0.55)'    # nav links (F4F6FA/55)
  # Hairlines
  line: '#2A2E37'           # 2px borders, dividers, card outlines
  # Semantic
  success: '#27D17C'        # green — on pace, high mastery, correct, streaks
  danger: '#FF4D4D'         # red — needs work, missed, low mastery, timer warning
  # Glow
  led-glow: 'rgba(45,124,255,0.35)'  # text-shadow on LED numerals
typography:
  display:
    fontFamily: "'Archivo', sans-serif"
    fontWeight: 900
    textTransform: uppercase
  anton:
    fontFamily: "'Anton', sans-serif"
  body:
    fontFamily: "'Manrope', sans-serif"
    fontWeight: 400
  mono:
    fontFamily: "'Geist Mono', monospace"
    fontWeight: 500
  odometer:
    fontFamily: "'Archivo', sans-serif"
    fontSize: clamp(100px, 12vw, 150px)
    fontWeight: 900
    lineHeight: 0.8
  h1:
    fontFamily: "'Archivo', sans-serif"
    fontSize: clamp(30px, 5vw, 36px)
    fontWeight: 900
    textTransform: uppercase
    lineHeight: 1
  eyebrow:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 11px
    fontWeight: 700
    letterSpacing: 3.3px
    textTransform: uppercase
  label:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 10px
    fontWeight: 700
    letterSpacing: 2px
    textTransform: uppercase
rounded:                      # essentially zero — scoreboard hard edges
  none: 0px
  cell: 2px                   # heatmap / meter cells only
  thumb: 0px                  # scrollbar thumb is square
spacing:                      # 4px base unit (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
components:
  primaryButton:
    backgroundColor: '{colors.voltage}'
    textColor: '#FFFFFF'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    padding: '10px 20px'
    hover: 'bg → {colors.text}, text → {colors.bg}'
  outlineButton:
    backgroundColor: 'transparent'
    textColor: '{colors.voltage}'
    typography: '{typography.mono}'
    border: '2px solid {colors.voltage}'
    rounded: '{rounded.none}'
    padding: '8px 16px'
    hover: 'bg → {colors.voltage}, text → white'
  card:
    backgroundColor: '{colors.panel}'
    border: '2px solid {colors.line}'
    rounded: '{rounded.none}'
    padding: '24px'
  testChip:
    backgroundColor: 'transparent (active: {colors.voltage})'
    textColor: '{colors.text-dim} (active: white)'
    typography: '{typography.mono}'
    border: '2px solid {colors.line} (active: {colors.voltage})'
    rounded: '{rounded.none}'
    padding: '8px 20px'
  meter:
    trackColor: '{colors.well}'
    fillColor: '{colors.success} / {colors.voltage} / {colors.danger} by mastery'
    height: '12px'
    rounded: '{rounded.none}'
  statTile:
    backgroundColor: '{colors.panel}'
    border: '2px solid {colors.line}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    padding: '20px–28px'
motion:
  odometerRoll: 'GSAP roll 0 → projected score, 1.6s power3.out (zero-padded)'
  flashSweep: 'GSAP diagonal blue sweep across hero, x -120% → 120%, 0.9s power2.inOut'
  masteryMeters: 'GSAP width + counter on ScrollTrigger (top 85%, once), 1.1s power3.out'
  ringCountdown: 'SVG stroke-dashoffset countdown (C=339.292), 1s tick; turns danger at ≤30s with 0.4s yoyo scale pulse'
  statusDot: 'Tailwind animate-pulse on live indicators'
icons:
  library: 'inline Unicode glyphs (▸ ▲ ⚡ ⚡) — no icon font'
  style: 'text glyphs in display/mono faces'
  sizes: { sm: 11px, md: 16px }
  color: '{colors.voltage} / {colors.success}'

ApexDrill

apexdrill-design · alpha

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

Overview

ApexDrill is a test-prep dashboard built to look like an athletic scoreboard or stadium jumbotron. The page sits on a near-black charcoal #15171C with panels recessed into a darker #101216, and the whole layout is welded together with hard 2px hairlines in #2A2E37 — no shadows, no rounded corners, just rules. A single electric-blue voltage #2D7CFF carries the brand wordmark, every primary button, the active test chip, the countdown ring, and a glowing LED text-shadow on the big numerals. Two semantic colors do the scoring work: green #27D17C for "on pace / mastered / correct / streak" and red #FF4D4D for "needs work / missed". The type is loud and condensed — Archivo Black at weight 900, 125% stretch, all-caps for displays and a giant 150px odometer, with Geist Mono tabular numerals everywhere a stat appears and Manrope for body. Signature moves: corner brackets drawn with ::before/::after, a faint scanline overlay, an animated diagonal flash sweep across the hero, an odometer that rolls up to your projected score, and a square blue scrollbar thumb.

Colors

Brand / Voltage. One accent does almost everything: voltage #2D7CFF. It fills the logo glyph, the "Start Drill" button, the active SAT chip, the drill ring, selection highlight, and emits the LED glow (text-shadow:0 0 22px rgba(45,124,255,.35)).

Surface. bg #15171C is the page; panel #101216 is every card/well and the footer; well #1c1f26 is the recessed track inside meters, the heatmap empty cell, and the ring's backing circle.

Text. text #F4F6FA is the off-white primary. Muted captions and labels use text-muted (F4F6FA at 45% opacity); nav links use text-dim (55%). Lower opacities (40%, 70%) appear on footer copy.

Hairlines. line #2A2E37 is the structural color — 2px borders on every card, section dividers (border-t-2), the chip outlines, and internal column rules.

Semantic. success #27D17C = on pace, high mastery (≥80), correct count, day streak, heatmap intensity. danger #FF4D4D = low mastery, missed count, the timer when ≤30s remaining.

Typography

Four Google Fonts are imported: Archivo (display, weight 900 + 125% font-stretch, the condensed scoreboard face), Anton (loaded as .font-anton, available accent), Manrope (body), and Geist Mono (tabular-nums for all stats and numerals). Closest substitutes if unavailable: Archivo → Archivo Expanded / Saira Condensed; Geist Mono → JetBrains Mono / Space Mono.

Token	Size	Weight	Line-height	Tracking	Usage
odometer	clamp(100→150px)	900	0.8	0.04em	Big projected-score readout (LED glow)
h1	clamp(30→36px)	900	1	—	Section + hero headings, uppercase
display	inherit	900	—	wide	Stat numerals, wordmark, button labels
anton	inherit	400	—	—	Available accent face (Anton)
eyebrow	11px	700	—	0.3em	Section kickers ("Score Projection Engine")
label	10px	700	—	0.2em	Stat captions ("Projected Score", "Current")
mono	14px	500	—	—	All numbers, captions, chips, chart fonts
body	16px	400	—	—	Paragraph copy (footer blurb)

Layout

4px base unit (Tailwind). Centered max-w-[1440px] column with px-6 gutters. The page is a vertical stack of full-width sections, each separated by a border-t-2 border-[#2A2E37] rule. The hero is a 12-column grid (7/5 split): a left scoreboard panel with the giant odometer and a 2×2 stat quad on the right, all enclosed in a bracketed, scanlined panel. Subsequent sections use 2-up mastery cards, a 5/7 drill split (countdown ring + adaptive-set tiles), a CSS-grid leaderboard (grid-cols-[60px_1fr_120px_120px]), a streak column + 26-week heatmap, and a 4-stat analytics row above Chart.js bar/donut/line canvases. Header is sticky (68px, border-b-2 in voltage). Whitespace is generous via py-12 section padding but the look is dense and dashboard-packed.

Elevation & Depth

No box-shadows. Depth comes entirely from (1) hard 2px hairlines outlining every surface, (2) the two-tone surface stack (#15171C page over #101216 panels over #1c1f26 wells), and (3) the LED text-shadow glow (0 0 22px rgba(45,124,255,.35)) plus a subtle backdrop-blur-sm on the sticky header. The scanline repeating linear-gradient and flash-sweep gradient add jumbotron texture rather than lift.

Shapes

Aggressively square. The radius story is essentially zero — cards, buttons, chips, meters, the scrollbar thumb (border-radius:0) are all hard-cornered. The only rounding is 2px on the tiny heat-cell squares and meter cells. Corner brackets (22px L-shaped marks in voltage blue) are drawn on key panels to read like a viewfinder/HUD.

Components

• primaryButton — voltage fill, white display-caps label ("▸ Start Drill"), no radius, px-5 py-2.5; hovers to off-white bg / charcoal text.
• outlineButton — transparent, 2px voltage (or danger) border, mono caps ("Launch ▸"), inverts to filled on hover.
• card — #101216 fill, 2px #2A2E37 border, zero radius, p-6; some carry the brackets corner accents.
• testChip — mono, 2px border; active = voltage fill + white; inactive = transparent + 55% text + line border, hovers to voltage border.
• meter — 12px track in #1c1f26 with a colored fill (success/voltage/danger by score) animated from 0 width; paired with a counting % readout.
• statTile — bordered panel, Archivo-900 numeral (text-5xl/6xl), 10px caps label, mono delta line; one quad tile is voltage-filled ("Correct Streak").
• leaderboard row — CSS-grid, avatar + bold name + mono score/percentile; the "You" row gets bg-[#2D7CFF]/12 + left voltage bar + ring on the avatar.
• countdown ring — SVG dual-circle (54r), 6px stroke, voltage progress over #1c1f26 track, mono LED timer centered.

Motion

GSAP 3 + ScrollTrigger drive everything. The odometer rolls 0→projected score over 1.6s (power3.out, zero-padded). A diagonal flash sweep runs across the hero on load (2.2s delay) and on the Flash-Test button (0.9s power2.inOut). Mastery meters animate width + counter when scrolled into view (top 85%, once, 1.1s). The drill ring counts down via stroke-dashoffset each second and, at ≤30s, switches to danger red with a 0.4s yoyo scale pulse on the timer. Small animate-pulse dots mark live status. Charts (Chart.js 4) render bar/donut/line in the analytics section with Geist Mono and the same palette.

Iconography

No icon library — iconography is inline Unicode glyphs set in the type faces: ▸ play/launch arrows, ▲ on-pace marker, ⚡ flash-test, • separators. Color follows semantics (voltage for actions, success green for positive markers). Glyphs are decorative/affordance hints, ~11–16px.

Do's and Don'ts

• Do keep one voltage blue as the only accent; let green/red carry scoring meaning.
• Do weld surfaces with 2px hairlines and the two-tone surface stack instead of shadows.
• Do keep displays Archivo-900 all-caps and put every number in Geist Mono tabular-nums.
• Do keep corners square; reserve the 2px rounding for tiny heat/meter cells only.
• Don't introduce drop shadows, soft radii, or pastel/multi-hue palettes — it breaks the scoreboard read.
• Don't dilute the voltage by using blue for body text or using green/red decoratively.
• Don't drop the brackets/scanline/LED-glow signature moves from hero panels.

Known Gaps

• Display sizes are read from Tailwind utility classes (text-3xl/text-5xl/ text-[150px]); the h1/odometer clamp ranges are inferred from the md:-responsive pair (e.g. text-3xl md:text-4xl), not authored as clamp() in the source.
• Letter-spacing values in px are converted from the source em tracking (.3em→3.3px at 11px, .2em→2px at 10px) and vary by element.
• Anton is imported and exposed via .font-anton but not used in the visible markup; documented as an available accent face.
• Opacity-based text colors (/45, /55, /40, /70) are listed as the most common muted/dim tokens; the full opacity set is in the markup.