name: orbital-design
version: alpha
description: >
  A flight-director / mission-control HUD for a space-tourism brand, rendered on
  a near-black space surface (`#06080F`) with two electric voltages — cyan
  (`#1FE0E0`) and magenta (`#FF3D9A`) — plus a console-green status accent
  (`#39FF88`). Everything reads like a telemetry terminal: monospaced labels in
  ALL CAPS with wide tracking, glowing text-shadows, chamfered (clipped) panel
  corners with L-shaped corner ticks, faint horizontal scanlines, and live
  countdown / EKG / Gantt instrumentation. The type story pairs a wide geometric
  display (Michroma) with a humanist body (Chivo) and a structural monospace
  (JetBrains Mono). Geometry is hard and angular: zero border-radius, a single
  22px corner chamfer, hairline cyan borders, and neon box-shadow glows instead
  of soft shadows.
colors:
  # Surface
  space: '#06080F'        # page background, deepest panels, video bay
  panel-fill: '#1B2230'   # .panel background, left hero column
  bay: '#0A0E18'          # status bar + alternating section bands
  # Brand / Voltage
  cyan: '#1FE0E0'         # primary voltage: headings, borders, ticks, glows, labels
  magenta: '#FF3D9A'      # secondary voltage: CTAs, alerts, REC, accent stats
  green: '#39FF88'        # console-green status: SYS_ONLINE, EKG, OK markers
  # Text
  text-body: '#C7D3E0'    # default body text (light slate)
  text-white: '#FFFFFF'   # emphasized stat values, card titles
  ink: '#000000'          # text on filled CTA buttons / selection
  cta-hover-mag: '#ff5cab' # magenta button hover fill
  # Hairlines (alpha cyan)
  hairline: 'rgba(31,224,224,0.25)'  # section dividers, status bar border
  panel-border: 'rgba(31,224,224,0.35)' # .panel border
  hairline-faint: 'rgba(31,224,224,0.15)' # gantt row borders
  # Effects
  scan: 'rgba(31,224,224,0.05)'      # scanline gradient stripes
  glow-cyan: 'rgba(31,224,224,0.4)'  # cyan neon glow
  glow-mag: 'rgba(255,61,154,0.5)'   # magenta neon glow
typography:
  display:
    fontFamily: "'Michroma', sans-serif"
    fontSize: clamp(20px, 5vw, 60px)
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.35em
    textTransform: uppercase
  heading:
    fontFamily: "'Michroma', sans-serif"
    fontSize: clamp(24px, 4vw, 36px)
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.05em
    textTransform: uppercase
  body:
    fontFamily: "'Chivo', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.625
  mono-label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.4em
    textTransform: uppercase
  mono-data:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 12px
    fontWeight: 700
    letterSpacing: 0.1em
  countdown:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: clamp(48px, 8vw, 72px)
    fontWeight: 800
    lineHeight: 1
rounded:                  # angular system — radius is effectively zero
  none: 0px
  chamfer: 22px           # corner chamfer via clip-path, not border-radius
spacing:                  # base unit 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 48px
  '3xl': 64px
components:
  statusBar:
    backgroundColor: '{colors.bay}'
    textColor: '{colors.cyan}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '6px 16px'
    border: '1px solid {colors.hairline}'  # bottom only
  panel:
    backgroundColor: '{colors.panel-fill}'
    border: '1px solid {colors.panel-border}'
    rounded: '{rounded.chamfer}'   # clip-path chamfer top-right + corner ticks
    boxShadow: '0 0 18px rgba(31,224,224,0.08), inset 0 0 30px rgba(0,0,0,0.4)'
  ctaMagenta:
    backgroundColor: '{colors.magenta}'
    textColor: '{colors.ink}'
    typography: '{typography.mono-data}'
    rounded: '{rounded.chamfer}'
    padding: '12px 24px'
    boxShadow: '0 0 14px rgba(255,61,154,0.5), 0 0 30px rgba(255,61,154,0.2)'
  ctaCyan:
    backgroundColor: '{colors.cyan}'
    textColor: '{colors.ink}'
    typography: '{typography.mono-data}'
    rounded: '{rounded.chamfer}'
    padding: '8px 16px'
    boxShadow: '0 0 14px rgba(31,224,224,0.4), 0 0 30px rgba(31,224,224,0.15)'
  destinationCard:
    backgroundColor: '{colors.panel-fill}'
    textColor: '{colors.text-white}'
    typography: '{typography.heading}'
    rounded: '{rounded.chamfer}'
    padding: '16px 20px'   # bottom-anchored overlay caption
  ganttBar:
    backgroundColor: '{colors.magenta}'
    textColor: '{colors.ink}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
    padding: '0 8px'
motion:
  reveal: 'GSAP from opacity:0 y:40, duration 0.7s power2.out, ScrollTrigger top 88%'
  ekg: 'GSAP stroke-dashoffset 1400→0, duration 2.4s linear, repeat infinite (heartbeat draw)'
  ganttBars: 'GSAP from opacity:0, duration 0.6s, stagger 0.08s power2.out on scroll'
  countdown: 'JS setInterval 1s — live T-minus countdown + UTC clock'
  hexFlicker: 'JS setInterval 220ms — random hex / lat-lon telemetry text'
  bpmFlicker: 'JS setInterval 900ms — randomized heart-rate readout (64–73)'
  ctaHover: 'background-color swap to {colors.cta-hover-mag} / white on hover'
icons:
  library: Tabler icons-webfont + game-icons (lorc/sbed/delapouite via jsDelivr) + inline SVG
  style: outline / line
  stroke: 1-2.5px
  sizes: { sm: 16px, md: 20px, lg: 36px, xl: 48px }
  color: '{colors.cyan}'   # also magenta/green per status; game-icons tinted via CSS color

Orbital Reach

orbital-design · alpha

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

Overview

Orbital Reach is a mission-control HUD for a space-tourism brand — a "Flight Director Terminal" rendered on a near-black space surface (#06080F) banded with darker bays (#0A0E18) and gunmetal panels (#1B2230). The whole page behaves like live telemetry: a top status bar reads SYS_ONLINE in console-green with a ticking UTC clock and a pulsing magenta ● REC; a vertical wordmark glows on the left; a live T-minus countdown counts down beside an autoplaying Earth-limb video feed framed by L-shaped corner ticks. Two electric voltages drive everything — cyan #1FE0E0 for structure (headings, hairline borders, ticks, labels, glows) and magenta #FF3D9A for action and alarm (CTAs, REC, alerts, accent stats) — with a third console-green #39FF88 reserved for status (SYS_ONLINE, the EKG trace, [ OK ] checks). The signature moves are the chamfered panel (.panel + chamfer-tr clip-path cutting a 22px corner, ringed by .corner-tick L-brackets), faint cyan scanlines (.scan) overlaid on nearly every surface, and neon text-shadow/box-shadow glows standing in for soft elevation. Type is a deliberate three-way split: wide geometric Michroma for display headlines (heavy 0.35em tracking, uppercase, cyan glow), humanist Chivo for the few prose passages, and JetBrains Mono everywhere else — the labels, data, countdown digits, Gantt cells, and checklists that make it feel like a console. Geometry is hard: zero border-radius, a single 22px chamfer, hairline borders, and live instrumentation (countdown, hex flicker, EKG, Gantt bars).

Colors

Surface. The page sits on space #06080F, the deepest near-black, used for the body, the video bay, and the innermost wells (e.g. Gantt track backgrounds). panel-fill #1B2230 is the gunmetal fill of every .panel and the left hero column. bay #0A0E18 is a slightly lifted band used for the status bar and the alternating SCHEDULER / BIOMETRIC sections.

Brand / Voltage. cyan #1FE0E0 is the primary voltage — display and section headings (with a 0 0 18px rgba(31,224,224,0.4) glow), panel borders, corner ticks, the wordmark, mono labels, and the glow-cyan shadow. magenta #FF3D9A is the secondary voltage of action and alarm: the RESERVE_SEAT / INITIATE_CLEARANCE CTAs, the ● REC indicator, the seconds digit, PAD_39A, booking-window Gantt bars, and pending-status markers. green #39FF88 is a console-status accent only: the SYS_ONLINE dot, the EKG cardiac trace, [ OK ] checklist marks, and RENDER_OK.

Text. Default body text is text-body #C7D3E0 (light slate), frequently dimmed to 40–70% opacity for secondary copy. text-white #FFFFFF is reserved for emphasized stat values and card titles. ink #000000 is the text color on filled cyan/magenta buttons and the selection color (selection:bg-[#FF3D9A] selection:text-black).

Hairlines. Borders are alpha-cyan: hairline rgba(31,224,224,0.25) for section dividers and the status bar, panel-border rgba(31,224,224,0.35) for the .panel outline, and hairline-faint rgba(31,224,224,0.15) for Gantt rows.

Effects. scan rgba(31,224,224,0.05) is the repeating 1px-on / 4px-off scanline gradient. The glows are glow-cyan rgba(31,224,224,0.4) and glow-mag rgba(255,61,154,0.5), applied as layered box-shadows and as text-shadow on headings and countdown digits.

Typography

Three Google-Fonts families, all imported together: Michroma (display), Chivo (300/400/700, body), and JetBrains Mono (400/500/700/800, all data/labels). Michroma is a wide, monospace-feeling geometric sans that reads as "instrument panel"; Chivo is a grotesque humanist sans used sparingly for prose; JetBrains Mono carries the terminal voice. All three are open-source, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(20–60px)	400	1	0.35em	Wordmark ORBITAL REACH (vertical + footer)
heading	clamp(24–36px)	400	1.1	~0.05em (tracking-wider)	Section H2s, card H3 titles
body	14px	400	1.625	0	Hero intro, system spec descriptions
mono-label	10px	400	normal	0.4em (tracking-[0.4em])	Section eyebrows (02 // TARGETING_GRID), HUD overlays
mono-data	12px	700	normal	wide	CTA labels, stat readouts, Gantt cells
countdown	clamp(48–72px)	800	1	0	T-minus digits (cyan + magenta seconds)

Layout

Base unit is 4px (Tailwind default scale); the recurring rhythm is px-4 sm:px-8 horizontal gutters and py-16/py-20 section padding. The page is a full-bleed single column of stacked, divider-separated sections (no centered max-width container) — each section opens with a magenta mono eyebrow and a cyan Michroma H2. The signature structural moves: an asymmetric hero split (lg:grid-cols-[30%_70%]) pairing a vertical-writing wordmark + live countdown column against a corner-ticked video feed; a 6-column bento "TARGETING_GRID" (auto-rows-[200px], with a 4×2 hero cell and a full-width premium banner); a 12-month Gantt "LAUNCH-WINDOW MATRIX" with absolutely-positioned percentage-width bars; a three-column blueprint "CABIN SPEC" (1fr_1.4fr_1fr) flanking a hue-shifted wireframe render; and a two-column biometric console with an animated EKG trace and a clearance checklist. Whitespace is dense and technical — tightly packed instrumentation, not airy.

Elevation & Depth

There are no conventional drop shadows. Depth comes from three devices: (1) the .panel recipe — background:#1B2230, 1px solid rgba(31,224,224,0.35) border, and a dual box-shadow: 0 0 18px rgba(31,224,224,0.08), inset 0 0 30px rgba(0,0,0,0.4) that gives an outer cyan haze plus an inner vignette; (2) neon glows — glow-cyan and glow-mag box-shadows on buttons/dots and text-shadow glows on headings and countdown digits; (3) scanlines (.scan) layered over surfaces and imagery to add CRT texture. Imagery sits behind panels at reduced opacity (0.35–0.9) with gradient scrims and an occasional hue-rotate "wireframe" filter (brightness/contrast/saturate/sepia/hue-rotate + mix-blend-mode:screen).

Shapes

The system is hard-edged and angular. Border-radius is effectively zero everywhere — buttons, chips, Gantt bars, and inputs are all square. The one shaping move is chamfer-tr, a clip-path polygon that slices a 22px notch off the top-right corner of every panel and CTA, paired with .corner-tick L-shaped 2px cyan brackets pinned to all four corners (::before/::after + .tk-bl/.tk-br). The combination of square edges, the single chamfer, and corner brackets is the template's geometric signature — a machined, registration-mark look.

Components

• Status bar — bg-[#0A0E18], bottom border-[#1FE0E0]/25, mono 10–12px, tracking-widest; left SYS_ONLINE (green dot w/ glow) + FLIGHT_DIRECTOR_TERMINAL // V2.04, right live UTC clock + magenta ● REC.
• Panel — .panel: #1B2230 fill, rgba(31,224,224,0.35) border, dual glow+inset shadow; almost always combined with chamfer-tr + corner-tick and a .scan overlay.
• Magenta CTA — bg-[#FF3D9A] fill, black mono-bold text, chamfer-tr, glow-mag shadow, px-6 py-3/px-8 py-4, hover #ff5cab. Labels: RESERVE_SEAT →, INITIATE_CLEARANCE →.
• Cyan CTA — bg-[#1FE0E0] fill, black mono-bold text, chamfer-tr, glow-cyan shadow, px-4 py-2, hover white. Label: RESUME_TRAINING.
• Destination card — corner-ticked chamfered panel with full-bleed image at 0.35–0.75 opacity, .scan overlay, a game-icon target glyph, and a bottom-anchored caption: green/magenta mono profile tag, white Michroma title, mono ALT/VEL/DUR stats.
• Gantt bar — square bg-[#FF3D9A] (booking) or bg-[#39FF88] (crewed) bar, absolutely positioned by left%/width%, black mono-bold 10px label (W-01, CRWD), some with glow-mag.
• Biometric tile / stat box — small bordered cells (border-[#39FF88]/30 or border-[#1FE0E0]/30, p-2) with a dimmed mono label over a white value.
• Checklist — mono list with [ OK ] (green) / [ X ] (magenta) markers and a 66%-complete clearance footer.

Motion

GSAP + ScrollTrigger plus plain setInterval instrumentation. .reveal elements fade up (opacity:0, y:40, 0.7s power2.out, trigger top 88%). The EKG path draws on an infinite loop (stroke-dashoffset 1400→0, 2.4s linear, repeat:-1). Gantt .gbar bars fade in staggered (0.6s, 0.08s stagger). Live JS: a 1s countdown/UTC tick, a 220ms hex-flicker telemetry readout, and a 900ms randomized BPM (64–73). Button hovers swap background color. The motion language is "live console": continuous, looping, data-driven, not decorative entrances only.

Iconography

Three icon sources. Tabler icons-webfont (<i class="ti ti-rocket">, ti-heartbeat, ti-calendar-week, ti-clock) for inline UI glyphs, color inherited (cyan/green). Game-icons (lorc/sbed/delapouite targeting, on-target, targeted, target-prize) loaded as SVGs and CSS-tinted via inline style="color:#..." — used as decorative "targeting" marks on destination cards. Plus hand-rolled inline SVG (the crosshair reticle over the video, the EKG path). Stroke weights run 1–2.5px; sizes from 16px UI glyphs up to 36–48px decorative marks. Default tint is cyan, with magenta/green for status emphasis.

Do's and Don'ts

• Do keep all labels uppercase monospace with wide tracking — the terminal voice depends on it.
• Do wrap content in .panel + chamfer-tr + .corner-tick and overlay .scan; that trio is the brand.
• Do reserve green strictly for status/health, magenta for action/alarm, and cyan for structure — three voltages with distinct jobs.
• Do use neon text-shadow/box-shadow glows for emphasis instead of soft shadows.
• Don't introduce rounded corners — keep edges square with the single 22px chamfer.
• Don't add soft/blurred grey drop shadows; depth is cyan glow + inner vignette + scanlines only.
• Don't set headings in anything but Michroma, or data/labels in anything but JetBrains Mono.
• Don't flatten the live instrumentation — the countdown, EKG, hex flicker, and Gantt are core to the mission-control feel.

Known Gaps

• Display/heading/countdown sizes are responsive Tailwind ramps; the clamp(...) values in tokens approximate the text-2xl/4xl/5xl/6xl/7xl breakpoint steps in the markup.
• tracking-wider (heading) is recorded as ~0.05em (Tailwind's 0.025em rounded up for the wide look); exact Tailwind value is 0.025em.
• Body line-height is taken from leading-relaxed (1.625); leading-none (1) is used on the wordmark/countdown.
• Several colors are alpha overlays (/25, /70 etc.) applied at point of use; base hexes are listed and the common alpha hairlines are tokenized, but every one-off opacity is not enumerated.
• Icon glyph fills for game-icons depend on inline color: styles; the listed default (cyan) is the most common, but per-icon overrides (magenta/green) occur.