name: apogee-dynamics-design
version: alpha
description: >
  A mission-control dossier for a fictional space-systems engineering
  consultancy. Deep-navy surface (`#0B1026`) printed with a faint 12-column
  grid, set in cream (`#DCD4BC`) JetBrains Mono. The voltage is a single amber
  (`#F2B840`) used for the period, status pills, and "OPEN →" affordances, with
  teal (`#3A8A9A`) reserved for line-art schematics and pearl (`#E6E9F2`) for
  serif lead-ins. The signature moves are a condensed-black Archivo headline at
  clamp(64px,14.5vw,232px), hairline-ruled document sections numbered §01–§06,
  monospace tick rulers, a live UTC clock, an inline terminal pane, hand-drawn
  SVG mission schematics, and a horizontally pinned GSAP timeline. Everything is
  flat: borders, not shadows.
colors:
  # Brand / Voltage
  amber: '#F2B840'    # primary accent — period mark, status pills, OPEN links, schematic highlights
  teal: '#3A8A9A'     # secondary — terminal prompt, schematic wireframes, minor timeline ticks
  # Surface
  navy: '#0B1026'     # page background; also text color reversed onto amber/cream chips
  # Text
  cream: '#DCD4BC'    # default body + heading text, hairlines, grid lines (at low alpha)
  pearl: '#E6E9F2'    # serif lead-ins, mission/team names, case-study headings
  # Hairlines (derived from cream)
  hairline: 'rgba(220,212,188,0.18)'   # all section borders, card dividers, table rules
  grid-line: 'rgba(220,212,188,0.06)'  # the faint 12-column print grid (.grid-lines)
  tick: 'rgba(220,212,188,0.25)'       # minor tick marks in the ruler row
  row-hover: 'rgba(220,212,188,0.04)'  # mission card hover wash
  # Semantic (terminal traffic lights)
  term-red: '#ff5f56'
  term-yellow: '#ffbd2e'
  term-green: '#27c93f'
  amber-hover: '#ffd05a'  # .btn-amber:hover fill
typography:
  display:
    fontFamily: "'Archivo', sans-serif"
    fontSize: clamp(64px,14.5vw,232px)
    fontWeight: 900
    lineHeight: 0.82
    letterSpacing: -0.04em
    textTransform: uppercase
  section-heading:
    fontFamily: "'Archivo', sans-serif"
    fontSize: clamp(40px,6vw,88px)
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.04em
    textTransform: uppercase
  serif-lead:
    fontFamily: "'Roboto Slab', serif"
    fontSize: clamp(24px,3vw,30px)
    fontWeight: 400
    lineHeight: 1.375
  serif-name:
    fontFamily: "'Roboto Slab', serif"
    fontSize: 24px
    fontWeight: 400
  mono-body:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.625
  mono-label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.2em
    textTransform: uppercase
  mono-micro:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.2em
    textTransform: uppercase
rounded:
  none: 0px      # default for every box, chip, pill, card, button
  full: 9999px   # only the three terminal traffic-light dots and small schematic node circles
spacing:        # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 64px
components:
  top-bar:
    backgroundColor: '{colors.navy}'
    textColor: '{colors.cream}'
    typography: '{typography.mono-label}'
    borderBottom: '1px solid {colors.hairline}'
    padding: '16px 32px'
    rounded: '{rounded.none}'
  status-pill:
    backgroundColor: '{colors.amber}'
    textColor: '{colors.navy}'
    typography: '{typography.mono-micro}'
    padding: '2px 8px'
    rounded: '{rounded.none}'
  display-headline:
    textColor: '{colors.cream}'
    typography: '{typography.display}'
    note: 'trailing period rendered in {colors.amber}; intro masked reveal via .line-clip + .line-inner'
  terminal-pane:
    backgroundColor: '{colors.navy}'
    textColor: '{colors.cream}'
    typography: '{typography.mono-body}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.none}'
    note: 'header row of three full-round dots (term-red/yellow/green); prompt in {colors.teal}'
  mission-card:
    backgroundColor: 'transparent'
    textColor: '{colors.cream}'
    typography: '{typography.mono-body}'
    borderBottom: '1px solid {colors.hairline}'
    padding: '24px 0'
    rounded: '{rounded.none}'
    note: '7-col grid (80px / 1.4fr / 1fr / .9fr / 1.1fr / 1.6fr / 90px); hover wash {colors.row-hover}; OPEN → link in {colors.amber}; name in serif {colors.pearl}'
  capability-card:
    backgroundColor: 'transparent'
    textColor: '{colors.cream}'
    typography: '{typography.mono-body}'
    border: '1px solid {colors.hairline}'
    padding: '32px'
    rounded: '{rounded.none}'
    note: 'CAP-0x label row; teal/amber line-art schematic; serif h3 in {colors.pearl}'
  amber-button:
    backgroundColor: '{colors.amber}'
    textColor: '{colors.navy}'
    typography: '{typography.mono-micro}'
    fontWeight: 700
    padding: '8px 20px'
    rounded: '{rounded.none}'
    note: 'hover fill {colors.amber-hover}'
  scheduling-link:
    textColor: '{colors.cream}'
    typography: '{typography.mono-label}'
    borderBottom: '2px solid {colors.amber}'
    padding: '2px 6px'
    rounded: '{rounded.none}'
    note: 'on hover inverts to {colors.amber} bg / {colors.navy} text'
  data-row:
    textColor: '{colors.cream}'
    typography: '{typography.mono-body}'
    borderBottom: '1px solid {colors.hairline}'
    note: 'tabular-nums (.tnum); muted labels at opacity 0.6; right-aligned amber values for highlights'
  case-overlay:
    backgroundColor: '{colors.navy}'
    textColor: '{colors.cream}'
    typography: '{typography.mono-body}'
    rounded: '{rounded.none}'
    note: 'fixed inset-0 z-80 full-screen dossier; close chip is cream bg / navy text'
motion:
  hero-lines: 'GSAP timeline — .line-inner reveals from yPercent 110→0, stagger 0.12, power3.out 0.9s'
  hero-parallax: 'headline yPercent 0→-30 scrubbed across #hero (ScrollTrigger)'
  counter-scramble: 'mission counter scrambles random chars ~20 frames @60ms then settles to "40+"'
  terminal-type: 'terminal lines typed char-by-char @25ms, staggered 900ms; cursor blinks via steps(1) yoyo'
  utc-clock: 'live setInterval(1s) updating T+ HH:MM:SS UTC'
  card-reveal: 'mission cards autoAlpha 0→1, y 32→0, stagger 0.08, power2.out (ScrollTrigger.batch @ top 88%)'
  schematic-draw: 'SVG stroke-dash line-draw — dashoffset len→0, 1.4s, per-element delay 0.04, power2.inOut'
  cap-text: 'paragraphs autoAlpha 0→1, y 14→0, stagger 0.15'
  timeline-pin: 'horizontal pinned scroll — .tl-track (300vw) translated x, scrub 1, pinned across wrap'
  team-rows: 'rows autoAlpha 0→1, y 30→0, stagger 0.1, power3.out'
  contact-type: 'typewriter clipPath inset(0 100%→0%) reveal, steps(40), staggered 500ms'
  case-open: 'overlay fades in autoAlpha 0→1, 0.4s on mission-card click'
icons:
  library: inline SVG (hand-drawn schematics + mission patches)
  style: outline / wireframe line-art, non-scaling-stroke
  stroke: 1-1.5px (0.6-3px range within schematics)
  sizes: { patch: 56px, schematic: full-width-h128 }
  color: '{colors.cream} structure, {colors.teal} wireframe, {colors.amber} highlight nodes'

Apogee Dynamics

apogee-dynamics-design · alpha

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

Overview

Apogee Dynamics is a mission-control dossier rendered as a website — a fictional space-systems engineering consultancy presented as a "flight-readiness review" document. The surface is a deep aerospace navy (#0B1026) carrying cream (#DCD4BC) JetBrains Mono as its working voice, with a faint 12-column print grid (rgba(220,212,188,0.06)) and hairline rules (rgba(220,212,188,0.18)) partitioning the page into numbered sections §01 through §06. The headline voice is a condensed-black Archivo (.font-machina, font-stretch:condensed, letter-spacing:-0.04em) that scales to a colossal clamp(64px,14.5vw,232px), while a Roboto Slab serif (.font-tiempos) in pearl (#E6E9F2) handles the human-readable lead-ins. A single amber voltage (#F2B840) marks every period-mark, status pill, "OPEN →" affordance, and highlight; teal (#3A8A9A) is held for line-art schematics and the terminal prompt. The signature moves are unmistakable: a live T+ HH:MM:SS UTC clock, an embedded bash terminal pane with traffic-light dots, monospace tick rulers, hand-drawn SVG mission patches and capability schematics that draw themselves on scroll, and a horizontally pinned GSAP timeline. Geometry is uniformly sharp — zero radius everywhere except the terminal dots and schematic nodes — and depth is communicated through borders, never shadows.

Colors

Brand / Voltage. The system runs on one accent: amber #F2B840, used for the trailing period after each title, the bg-amber status pills (with navy text), "OPEN →" / "OPEN" link labels, schematic highlight nodes, and the btn-amber primary button (which warms to #ffd05a on hover). teal #3A8A9A is a quiet secondary — the apogee@console terminal prompt, schematic wireframe strokes, and minor ticks on the timeline axis.

Surface. navy #0B1026 is the only background, set on body. It also serves as the reversed text color printed onto amber and cream chips.

Text. cream #DCD4BC is the default for body, headings, hairlines, and grid lines. pearl #E6E9F2 lifts the serif lead-ins, mission and team names, and case-study headings to read warmer and brighter than the mono.

Hairlines. All structural lines derive from cream at low alpha: hairline rgba(220,212,188,0.18) for section borders, card dividers, and table rules; grid-line rgba(220,212,188,0.06) for the faint .grid-lines 12-column backdrop; tick rgba(220,212,188,0.25) for minor tick-row marks; and row-hover rgba(220,212,188,0.04) for the mission-card hover wash.

Semantic. The only semantic colors are the terminal traffic-lights — term-red #ff5f56, term-yellow #ffbd2e, term-green #27c93f — purely decorative window-chrome.

Typography

Three faces, all from Google Fonts. The display face is Archivo (weights 400/600/800/900), used at weight 900 with font-stretch:condensed and -0.04em tracking via .font-machina for all uppercase headlines. Roboto Slab (400/600/700) is the serif lead-in face (.font-tiempos), close to the "Tiempos" naming in the class. JetBrains Mono (400/500/700) is the body and label workhorse, set on body directly and carrying every metadata strip, table, and terminal line, often uppercased with 0.18em–0.2em tracking and font-variant-numeric:tabular-nums (.tnum) for aligned figures.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(64px,14.5vw,232px)	900	0.82	-0.04em	Hero "APOGEE / DYNAMICS."
section-heading	clamp(40px,6vw,88px)	900	0.9	-0.04em	§02–§06 headings (contact up to clamp(48px,9vw,160px))
serif-lead	clamp(24px,3vw,30px)	400	1.375	—	Positioning statement, timeline blurbs
serif-name	24px	400	normal	—	Mission / team / case names
mono-body	12px	400	1.625	—	Card text, terminal, dossiers
mono-label	11px	400	1.5	0.2em	§-labels, "// POSITIONING STATEMENT"
mono-micro	10px	400	normal	0.2em	Meta strips, table headers, pills

Layout

The base unit is 4px on the Tailwind scale; padding clusters at 32px (px-8) gutters and 64px (py-16) section rhythm. Every section is a max-w-[1440px] mx-auto container framed by top/bottom hairlines, opening with a 12-column grid grid-cols-12 gap-4 band that pairs a left-weighted heading (md:col-span-8) with a right-aligned data block (md:col-span-4). The hero stacks a four-cell meta strip, the giant headline, a three-column positioning/counter/status row, and an inline terminal pane, closed by a 60-cell tick ruler. Missions render as a custom 7-column CSS grid (80px 1.4fr 1fr .9fr 1.1fr 1.6fr 90px) collapsing to two columns under 900px. Capabilities are a 2×2 bordered matrix; the timeline is a 300vw horizontal track pinned and scrubbed; the team is a 12-column data table; contact is a min-h-[80vh] bottom-anchored panel. Whitespace is generous and document-like — the page reads as printed pages, not cards floating in space.

Elevation & Depth

There are no box-shadows anywhere. Depth is entirely structural: 1px hairline borders (rgba(220,212,188,0.18)) define every section edge, card divider, table rule, and schematic frame. The faint 12-column grid and tick rulers add a sense of engineered substrate. The only "layer" is the case-study overlay, a position:fixed; inset:0; z-index:80 full-screen navy panel that simply covers the page — again flat, bordered, no shadow.

Shapes

Resolutely orthogonal. Every box, chip, pill, card, button, input, and frame is rounded:0 — the brutalist/technical-drawing default. The only curved geometry is rounded-full on the three 10px terminal traffic-light dots and on small SVG node circles inside the patches and schematics. Sharpness is the brand.

Components

• Top bar — navy, cream, mono-label 11px uppercase; bottom hairline; 16px/32px padding; amber bullet, an amber ON CONSOLE pill, and a live UTC clock at right.
• Status pill — bg-amber fill, navy text, mono-micro, 2px/8px padding, square. Used for ON CONSOLE, Active, and case M-040 markers.
• Display headline — cream Archivo-condensed at clamp; trailing period in amber; masked line-reveal via .line-clip / .line-inner.
• Terminal pane — bordered navy box; header row of red/yellow/green full-round dots plus mission-control@apogee — bash / 80×24; body in mono-body with a teal apogee@console prompt and a blinking cream cursor.
• Mission card — transparent 7-col grid row, bottom hairline, 24px vertical padding; SVG patch, serif pearl name, mono metadata, amber OPEN →; hover wash rgba(220,212,188,0.04); click opens the case overlay.
• Capability card — bordered cell of a 2×2 matrix, 32px padding; CAP-0x label row, a teal/amber line-art schematic, serif pearl h3, two text-[var(--cream)]/85 paragraphs.
• Amber button — bg-amber / navy, mono-micro bold, 8px/20px, square; hover #ffd05a. Label e.g. "View full manifest →".
• Scheduling link — cream text, mono-label, 2px amber bottom-border; inverts to amber bg / navy text on hover. "Schedule a flight-readiness call →".
• Data row — table/list row with bottom hairline, tnum figures, muted (opacity 0.6) labels, right-aligned amber highlights (e.g. 97.5% success rate).
• Case overlay — fixed full-screen navy dossier with header rule, bordered spec table, two-column dossier body; cream/navy CLOSE ✕ chip.

Motion

GSAP + ScrollTrigger and the Motion One ESM library drive a dense, instrument- panel choreography. On load: the hero headline reveals line-by-line (yPercent 110→0, stagger 0.12, power3.out), the mission counter scrambles random glyphs for ~20 frames before settling to "40+", the terminal types character-by-character at 25ms with a steps(1) blinking cursor, and a UTC clock ticks every second. On scroll: the hero headline parallaxes to yPercent:-30; mission cards and team rows fade-and-rise in staggered batches; capability SVGs draw their strokes via dash-offset animation (1.4s, 0.04s per element); cap paragraphs stagger in; the timeline track (300vw) is pinned and scrubbed horizontally; the contact lines reveal with a clipPath steps(40) typewriter. Clicking a mission fades the case overlay in over 0.4s.

Iconography

No icon font — all marks are inline SVG. Each mission carries a unique 56px hand-drawn "patch" (hexagons, orbits, diamonds, deltas built from polygons, circles, and lines) and each capability a full-width ~128px technical schematic (radiator panels, a CPU bus, particle-flux rings, a ground dish/link/MOC diagram). Strokes are thin (0.6–3px, mostly 1–1.5px) with vector-effect:non-scaling-stroke so line weight holds during the draw-on animation. Color convention: cream for primary structure, teal for secondary wireframe, amber for highlight/active nodes. Tiny inline labels use JetBrains Mono at 8–9px.

Do's and Don'ts

• Do keep every surface flat and bordered — hairlines, not shadows.
• Do keep corners square; reserve rounded-full for terminal dots and SVG nodes only.
• Do treat amber as a scarce voltage: periods, status, "OPEN", highlights.
• Do uppercase mono labels with 0.18–0.2em tracking and use tnum for any numeric column or clock.
• Do number sections §01–§06 and frame each in a max-w-1440 hairline band.
• Don't introduce a second accent or warm the navy surface.
• Don't add drop-shadows, gradients-as-fills, or rounded cards — it breaks the technical-drawing register.
• Don't set body copy in a serif or headlines in anything but condensed Archivo; teal is for schematics, not text.
• Don't let the line-art schematics use thick or filled shapes — they read as engineering drawings, not illustrations.

Known Gaps

• font-machina requests Archivo with font-stretch:condensed; Archivo's static webfont may not expose a true condensed axis in all browsers, so the effective condensation is approximate.
• serif-lead / section-heading sizes are read from Tailwind text-2xl/3xl utilities and inline clamp() values; the serif-lead clamp is inferred from the md:text-3xl responsive pair (24px → 30px).
• Hairline/grid/tick/hover colors are alpha-on-cream rgba() values, not opaque swatches.
• Motion durations/easings are taken from the GSAP/Motion script literally; the typewriter "strip tags" path is simplified in the source and approximated here.