name: bootcamp-design
version: alpha
description: >
  A terminal-brutalist landing page for a full-stack coding bootcamp. Near-black
  surface (`#0A0A0A`) overlaid with an 8px hairline grid, wired together by
  2px-thick `#3A3A3A` rules that frame every section like a CLI window. Two
  voltages do all the talking: acid-green `#C6FF00` (success / primary action)
  and hot-magenta `#FF2E63` (alert / accent). Everything is monospace and
  uppercase — Space Mono for display, JetBrains Mono for code/UI, IBM Plex Sans
  only for running body copy. Zero rounded corners by design, with glitch,
  blink-cursor, RGB-split, and type-on motion selling the hacker aesthetic.
colors:
  # Brand / Voltage
  acid-green: '#C6FF00'   # primary action, success ticks, [x] milestones, selection bg
  magenta: '#FF2E63'      # accent, alerts, [ ] upcoming, error/warn states
  # Surface
  surface: '#0A0A0A'      # page background, header, panels, on-green text
  # Text
  text: '#EDEDED'         # primary heading + body text
  text-70: 'rgba(237,237,237,0.70)'  # lede / supporting copy
  text-60: 'rgba(237,237,237,0.60)'  # module descriptions, footer links
  text-50: 'rgba(237,237,237,0.50)'  # window labels, line prefixes
  text-40: 'rgba(237,237,237,0.40)'  # comment captions (// ...)
  text-30: 'rgba(237,237,237,0.30)'  # footer fine print
  # Hairlines
  rule: '#3A3A3A'         # all 2px borders, frames, line numbers, dot placeholders
  grid-line: 'rgba(58,58,58,0.18)'  # 8px background grid overlay
  # Tint
  green-tint: 'rgba(198,255,0,0.04)'  # module-row hover fill
typography:
  display:
    fontFamily: "'Space Mono', monospace"
    fontSize: clamp(2.6rem,6vw,5.5rem)
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -0.01em
    textTransform: uppercase
  stat:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: clamp(3.5rem,9vw,7rem)
    fontWeight: 800
    lineHeight: 1
  code:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.625
  label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 12px
    fontWeight: 700
    letterSpacing: 0.1em
    textTransform: uppercase
  body:
    fontFamily: "'IBM Plex Sans', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.625
rounded:                  # nothing is rounded — sharp by manifesto
  none: 0px
spacing:                  # base unit 4px; the grid overlay is 8px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 48px
  '3xl': 64px
components:
  button-primary:
    backgroundColor: '{colors.acid-green}'
    textColor: '{colors.surface}'
    typography: '{typography.label}'
    border: '2px solid {colors.acid-green}'
    rounded: '{rounded.none}'
    padding: '14px 24px'
    # label e.g. "[ apply now ]"
  button-ghost:
    backgroundColor: 'transparent'
    textColor: '{colors.text}'
    typography: '{typography.label}'
    border: '2px solid {colors.rule}'
    rounded: '{rounded.none}'
    padding: '14px 24px'
    # hover border -> {colors.text}; label e.g. "> view curriculum"
  panel:
    backgroundColor: '{colors.surface}'
    border: '2px solid {colors.rule}'
    rounded: '{rounded.none}'
    # code window: title bar with 3 dot placeholders + filename, <pre> body
  stat-cell:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.stat}'
    border: '2px solid {colors.rule}'
    rounded: '{rounded.none}'
    padding: '32px'
    # one highlighted cell flips to bg {colors.acid-green} / text {colors.surface}
  module-row:
    backgroundColor: 'transparent'
    textColor: '{colors.text}'
    border: '2px solid {colors.rule}'  # bottom rule only
    rounded: '{rounded.none}'
    padding: '20px 8px'
    # hover: border {colors.acid-green}, bg {colors.green-tint}; [x]/[ ] marker
  countdown-cell:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.stat}'
    border: '2px solid {colors.rule}'  # seconds cell border -> {colors.magenta}
    rounded: '{rounded.none}'
    padding: '16px 20px'
    minWidth: '80px'
  faq-item:
    backgroundColor: 'transparent'
    textColor: '{colors.text}'
    typography: '{typography.display}'
    border: '2px solid {colors.rule}'  # bottom rule
    rounded: '{rounded.none}'
    padding: '20px 8px'
    # toggle icon "[+]" {colors.acid-green} -> "[−]" {colors.magenta}
motion:
  type-on: 'Headline types char-by-char, 70ms/char, \n -> <br>'
  blink: 'Cursor block ▮ — opacity 0 at 50%, 1s steps(1) infinite'
  rgb-glitch: 'Headline RGB text-shadow split, 3.2s steps(1) infinite, fires ~93–97%'
  glitch: 'Top/bottom clip-path layers translate, glitchTop 2.6s / glitchBot 2.2s'
  count-up: 'Stats tick 0 -> target over ~60 steps, 25ms interval, IntersectionObserver @0.5'
  countdown: 'Live days/hrs/min/sec, setInterval 1000ms, zero-padded'
  module-row: 'border-color + background-color 0.15s ease on hover'
  faq: 'max-height 0 -> scrollHeight (no easing authored), instant snap'
  hov-underline: 'underline on hover, 3px offset'
icons:
  library: text glyphs / ASCII (no icon font)
  style: 'bracket tokens [x] [ ] [+] [−] [ apply ], box glyph ▮, square dots, ✓ !'
  color: '{colors.acid-green} for success, {colors.magenta} for alert'

Bootcamp

bootcamp-design · alpha

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

Overview

Bootcamp is terminal brutalism — a coding-bootcamp landing page that dresses itself as a CLI session. The surface is near-black #0A0A0A washed with a faint 8px hairline grid (rgba(58,58,58,0.18)), and the entire page is boxed by 2px-thick #3A3A3A rules: every section shares vertical side borders and a top border so the layout reads as one continuous bordered column, like nested terminal windows. Two voltages carry all the meaning — acid-green #C6FF00 for the primary CTA, success ticks, completed [x] milestones, and the text selection highlight, and hot-magenta #FF2E63 for alerts, the seconds countdown, error tokens, and upcoming [ ] modules. Type is almost entirely monospace and uppercase: Space Mono for big display headings, JetBrains Mono for code blocks, stats, labels, and nav, with IBM Plex Sans reserved for the few sentences of running body copy. The signature moves are pure hacker theater: a headline that types itself out (QUIT THE / CUBICLE. / SHIP CODE.) capped by a blinking block cursor ▮, an RGB-split glitch on that headline, count-up stat numbers, a live enrollment countdown, and code windows complete with fake syntax highlighting and a title bar of square dots. Nothing is rounded — the footer literally signs off // no rounded corners were used.

Colors

Brand / voltage. acid-green #C6FF00 is the primary signal: the [ apply ] button fill, the > COMPLETED curriculum headers, success ticks ✓, the [x] milestone markers, the typed-cursor block, large hero stats, and the ::selection background (with #0A0A0A text). magenta #FF2E63 is the counter-voltage: the $ ./init eyebrow, the alerts ("seats filling fast"), the seconds countdown cell + its border, null/error tokens in code, and [ ] upcoming modules.

Surface. A single surface #0A0A0A does everything — page background, sticky header, code panels, and the foreground text printed over the green highlight cells.

Text. text #EDEDED is the base ink for headings and copy. A descending opacity ramp of white tints handles hierarchy: rgba(237,237,237,0.70) for the lede, 0.60 for module descriptions and footer links, 0.50 for window labels and $ prefixes, 0.40 for // comment captions, and 0.30 for footer fine print.

Hairlines. rule #3A3A3A is the structural workhorse — all 2px borders and frames, plus the muted line numbers and the inert dot placeholders in window title bars. The background grid is the same hue at low alpha, grid-line rgba(58,58,58,0.18), tiled at 8px. Module rows pick up a faint green-tint rgba(198,255,0,0.04) fill on hover.

Typography

Three faces, all loaded from Google Fonts in one @import: Space+Mono:wght@400;700, IBM+Plex+Sans:wght@400;500;600;700, and JetBrains+Mono:wght@400;500;700;800. Space Mono is the display face (.font-mono-disp) for hero, section ## headings, module titles, and FAQ questions. JetBrains Mono (.font-code) is the system font — code blocks, nav, eyebrows, labels, buttons, stats, and the countdown. IBM Plex Sans (.font-body) is the only proportional face, used purely for paragraph copy.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(2.6rem,6vw,5.5rem)	700	0.95	tight	Hero headline (uppercase)
display (sec)	text-2xl–4xl	700	tight	—	## section.ext headings, module/FAQ titles
stat	clamp(3.5rem,9vw,7rem)	800	1	—	Hero salary stat; text-6xl for others
code	13px	400	1.625	—	<pre> code windows
label	12px	700	—	0.1em–0.2em	Eyebrows, stat captions, nav, buttons (uppercase)
body	16px (md:18px)	400	1.625	—	Lede + paragraph copy (IBM Plex Sans)

Layout

Base unit is 4px; the decorative grid overlay tiles at 8px. The page is a single centered max-w-[1280px] column with px-6 gutters, and the brutalist signature is that every section carries border-x-2 side rules plus a border-t-2 top rule in #3A3A3A, so sections stack into one seamless framed stack ending in border-y-2 on the apply block. The hero is a 2-column split (copy left, fake career.config.js code window right) divided by an internal vertical rule. Outcomes is a 12-column metric grid of bordered stat cells (5/4/3 then 4/4/4), one cell inverted to solid acid-green. Curriculum and FAQ are full-width stacked rows generated by JS, each row a bottom-ruled band. A sticky top header (h-16) carries a traffic-light triad of colored squares and a ~/bootcamp $ prompt. Whitespace is generous inside cells (p-8 / p-12 / p-16) against the dense border scaffolding.

Elevation & Depth

There is no shadow and no glass — depth is entirely structural. Hierarchy comes from the 2px #3A3A3A rules, the framed-window metaphor, and the single inverted (solid green) stat cell that pops by contrast. The background grid overlay adds subtle texture but no elevation. Glow exists only momentarily as the RGB text-shadow split during the glitch animation.

Shapes

Aggressively sharp. Every corner is 0px — there is not a single rounded-* class in the markup, and the footer states it outright: // no rounded corners were used. Decorative squares (the traffic-light triad, blink dot, dot placeholders) are exact w-3 h-3 / w-2.5 h-2.5 squares, never circles. The whole system reads as right-angled and grid-locked.

Components

• Primary button — solid #C6FF00 fill, #0A0A0A text, 2px green border, square, px-6 py-3.5, JetBrains Mono uppercase bold. Label: [ apply now ].
• Ghost button — transparent, #EDEDED text, 2px #3A3A3A border that goes to #EDEDED on hover, square. Label: > view curriculum.
• Code panel — 2px #3A3A3A frame on #0A0A0A; title bar with three square dot placeholders + a filename (career.config.js), then a <pre> body with fake syntax colors (green keys, magenta keywords, muted line numbers).
• Stat cell — bordered metric tile, JetBrains Mono extrabold number with a caption label; one cell inverts to solid green on #0A0A0A text.
• Module row — bottom-ruled band with an [x]/[ ] marker, W## index, Space Mono title and Plex body description; hover lifts the border to green and tints the bg.
• Countdown cell — bordered box, big extrabold number + tiny caption; the seconds cell uses a magenta number and magenta border.
• FAQ item — bottom-ruled accordion row; Space Mono question, [+]/[−] toggle that flips green↔magenta, body answer that expands via max-height.

Motion

The page leans hard on motion theater, all CSS/JS, none disabled. The hero headline types itself char-by-char at 70ms with \n→<br>, trailed by a blinking block cursor ▮ (1s steps(1)). An RGB-split glitch fires on the headline (rgbsplit 3.2s steps(1), splitting into magenta/green text-shadows at ~93–97%); a separate .glitch utility clips top/bottom layers that jitter (glitchTop 2.6s, glitchBot 2.2s). Stat numbers count up from 0 to target over ~60 steps (25ms interval) when scrolled into view (IntersectionObserver @0.5). A live countdown ticks days/hrs/min/sec every 1000ms. Module rows transition border-color/background-color over 0.15s ease on hover; links underline with a 3px offset; FAQ answers snap open via max-height to scrollHeight (no easing authored).

Iconography

No icon font. All "icons" are typographic: bracket tokens [x] [ ] [+] [−] [ apply ], a box-drawing cursor glyph ▮, terminal ticks ✓ and bangs !, and > / // / $ prompt sigils. Status color follows the voltages — green for done/success, magenta for upcoming/alert. Decorative geometry is limited to small solid squares (traffic-light triad, blinking alert dot).

Do's and Don'ts

• Do keep every border exactly 2px solid #3A3A3A and let sections share side + top rules so the framed-column metaphor holds.
• Do restrict color to the two voltages plus white opacity tints — green for success/primary, magenta for alert/upcoming.
• Do stay monospace and uppercase for UI/labels; reserve IBM Plex Sans for running paragraphs only.
• Do keep the terminal flavor: $ prompts, // comments, ## headings, bracket markers, fake code windows.
• Don't introduce any rounded corners, shadows, or glassmorphism — the system is flat and right-angled by manifesto.
• Don't add a third accent color or use the voltages for large fills beyond the single inverted stat cell and the primary button.
• Don't soften the motion into polished easing — the glitch/blink/type-on jitter is the brand.

Known Gaps

• letterSpacing for the hero display is read as Tailwind tracking-tight (≈ -0.01em / -0.025em); the exact value is the Tailwind default, not an explicit px value in the markup.
• Stat-cell text-6xl, section headings, and similar use Tailwind size classes (text-2xl/text-6xl etc.); the px equivalents follow Tailwind defaults rather than literal values in the HTML.
• The fake syntax-highlight colors inside code panels reuse the two voltages and white tints; they are presentational, not separate brand tokens.
• The .glitch utility is defined in CSS but not applied to any element in the current markup; described as authored-but-unused.