name: orbitarium-design
version: alpha
description: >
  Orbitarium is a deep-space science-museum landing page on a near-black navy
  surface (`#070B1F`) lit by two voltages — a cyan ('#23E0E0') console glow and
  a molten-orange ('#FF7A1A') core, with a magenta ('#E040FB') reserved for the
  ticket "launch" beacon. The signature moves are a parallax starfield, a live
  orbiting planet system of exhibit dossiers, and a terminal/mission-control
  voice carried by mono labels. Type pairs a tall uppercase Clash Display for
  headlines with Space Grotesk body and a Major Mono Display accent for telemetry
  readouts. Geometry is deliberately sharp — square chips, square cards, hard
  edges — with circles reserved only for orbits, planets, the core and the
  pulsing ticket beacon.
colors:
  # Surface
  bg: '#070B1F'            # page background (near-black navy)
  surface-card: '#0A1029'  # planet bodies, detail cards, console panel fill
  # Brand / Voltages
  cyan: '#23E0E0'          # primary accent: console, planet borders, nav underline, hero word
  orange: '#FF7A1A'        # core / CTA fill: orbit core, transmit button, station markers
  magenta: '#E040FB'       # tickets beacon: pulse rings, launch button border + glow
  # Text
  text: '#EAF0FF'          # headings + primary body (cool white)
  text-strong: '#EAF0FF'   # high-emphasis on dark
  # Hairlines (text-tinted)
  hairline: 'rgba(234,240,255,0.14)'   # .hairline default border
  hairline-12: 'rgba(234,240,255,0.12)' # section dividers / header border
  hairline-08: 'rgba(234,240,255,0.08)' # secondary header divider
  # Text opacities (muted scale off the cool white)
  text-80: 'rgba(234,240,255,0.8)'  # nav links
  text-70: 'rgba(234,240,255,0.7)'  # body copy
  text-65: 'rgba(234,240,255,0.65)' # footer coordinates/hours
  text-60: 'rgba(234,240,255,0.6)'  # secondary captions
  text-55: 'rgba(234,240,255,0.55)' # header status bar mono
  text-50: 'rgba(234,240,255,0.5)'  # console field labels
  text-40: 'rgba(234,240,255,0.4)'  # footer legal
  # Cyan tints (rings + console)
  cyan-40: 'rgba(35,224,224,0.4)'   # console input underline, timeline rail, card borders
  cyan-28: 'rgba(35,224,224,0.28)'  # innermost orbit ring
  cyan-22: 'rgba(35,224,224,0.22)'  # middle orbit ring
  cyan-18: 'rgba(35,224,224,0.18)'  # outer orbit ring
typography:
  display:
    fontFamily: "'Clash Display', sans-serif"
    fontSize: clamp(3rem,11vw,11rem)
    fontWeight: 600
    lineHeight: 0.86
    letterSpacing: 0px
    textTransform: uppercase
  heading:
    fontFamily: "'Clash Display', sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1
    textTransform: uppercase
  wordmark:
    fontFamily: "'Clash Display', sans-serif"
    fontSize: 24px
    fontWeight: 600
    letterSpacing: 4.3px
  body:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.625
  mono:
    fontFamily: "'Major Mono Display', monospace"
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 1.5px
  mono-tiny:
    fontFamily: "'Major Mono Display', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 1.5px
rounded:
  none: 0px        # all chips, cards, buttons, console, markers
  full: 9999px     # orbits, rings, planets, core, ticket beacon
spacing:            # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 64px
components:
  ticketLink:
    backgroundColor: transparent
    textColor: '{colors.cyan}'
    border: '1px solid {colors.cyan}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '10px 20px'
    hover: 'bg {colors.cyan}, text {colors.bg}'
    label: 'TICKETS'
  ctaPrimary:
    backgroundColor: '{colors.cyan}'
    textColor: '{colors.bg}'
    typography: '{typography.wordmark}'
    rounded: '{rounded.none}'
    padding: '16px 32px'
    hover: 'bg {colors.text}'
    label: 'LAUNCH TOUR'
  transmitButton:
    backgroundColor: '{colors.orange}'
    textColor: '{colors.bg}'
    typography: '{typography.wordmark}'
    rounded: '{rounded.none}'
    padding: '16px'
    hover: 'bg {colors.text}'
    label: 'TRANSMIT REQUEST →'
  planet:
    backgroundColor: '{colors.surface-card}'
    border: '1px solid {colors.cyan}'
    rounded: '{rounded.full}'
    size: '96px'
    elevation: 'cyan-glow (0 0 22px rgba(35,224,224,.45))'
  detailCard:
    backgroundColor: '{colors.surface-card}'
    border: '1px solid {colors.cyan}'
    rounded: '{rounded.none}'
    width: '240px'
    elevation: 'cyan-glow'
  consolePanel:
    backgroundColor: '{colors.surface-card}'
    border: '1px solid {colors.cyan-40}'
    rounded: '{rounded.none}'
    padding: '32px'
  consoleInput:
    backgroundColor: transparent
    textColor: '{colors.cyan}'
    border: '0; border-bottom 1px solid {colors.cyan-40}'
    typography: '{typography.body}'
    focus: 'border-bottom {colors.cyan}'
  launchBeacon:
    backgroundColor: '{colors.bg}'
    border: '2px solid {colors.magenta}'
    textColor: '{colors.text}'
    typography: '{typography.heading}'
    rounded: '{rounded.full}'
    size: '208px'
    elevation: '0 0 50px rgba(224,64,251,.55)'
    label: 'INITIATE LAUNCH · $24 // family pass'
motion:
  starfield-parallax: 'three star layers translateY on scroll at speeds 0.15 / 0.4 / 0.7'
  star-twinkle: 'opacity .25↔1, 3.5s ease-in-out infinite'
  hero-reveal: 'GSAP words yPercent 110 + blur(14px)→0, stagger 0.15, power3.out'
  orbit-system: 'animejs rotate 1turn over 48s linear loop; planets counter-rotate -1turn 48s; pause on hover'
  planet-hover: 'animejs spring scale→1.25 (stiffness 400 damping 25)'
  detail-card: 'opacity + translateY(8px→0), .25s, on planet-wrap hover'
  pulse-ring: 'scale .55→2.4, opacity .9→0, 2.6s ease-out infinite (one delayed 1.3s)'
  launch-pulse: 'animejs scale 1↔1.05, 1400ms inOut(2) alternate loop'
  show-reveal: 'GSAP ScrollTrigger xPercent -15 + fade, top 85%'
  countdown: 'animejs createTimer live HH:MM:SS countdowns'
  typewriter: 'terminal intro typed char-by-char at 45ms'
  blink-cursor: 'opacity blink 1s steps(1) infinite'
  nav-underline: 'cyan underline width 0→100%, .3s'
icons:
  library: none (no icon font/SVG set)
  style: text glyphs + geometric primitives (↗ ↦ → arrows, square/dot markers)
  color: '{colors.cyan}'

Orbitarium

orbitarium-design · alpha

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

Overview

Orbitarium is a deep-space mission-control landing page for an interactive science museum. The whole world sits on a near-black navy surface #070B1F beneath a three-layer parallax starfield, and it is lit by two competing voltages: a cyan console glow #23E0E0 that runs through nav, planet borders, the hero word and every input, and a molten orange #FF7A1A that owns the orbit "core" and the primary CTAs. A third voltage, magenta #E040FB, is held in reserve for one moment only — the pulsing circular "Initiate Launch" ticket beacon. The signature move is the Exhibit Orbits section: six exhibit dossiers ride three concentric cyan rings around the orange core, slowly rotating (48s) and counter-rotating so labels stay upright, halting on hover to reveal a square detail card. Voice is mission-control telemetry — Major Mono Display labels like // mission 001 — civilian access granted and lat 40.7n // lon 73.9w everywhere, with a live typewriter terminal and HH:MM:SS countdowns. Type is a tall uppercase Clash Display for headlines (line-height 0.86), Space Grotesk for body, and the mono face for instrumentation. Geometry is sharp: square chips, square cards, hard-edged buttons — circles appear only as orbits, planets, the core and the beacon.

Colors

Surface. The page background is bg #070B1F, a near-black blue. Raised surfaces — planet bodies, exhibit detail cards, the field-trip console panel — use surface-card #0A1029, one notch lighter.

Voltages. cyan #23E0E0 is the primary accent and appears on the TICKETS outline button, the nav underline, planet borders, orbit rings, console input, the timeline rail, and the third hero word "OPEN". orange #FF7A1A is the energy/core color: the orbit center sphere with its core-glow, the LAUNCH TOUR-adjacent TRANSMIT button, the countdown "next show in" readout, and station markers. magenta #E040FB is used exclusively in the Get Tickets section — the two pulsing rings, the launch button border, and its // admission protocol label.

Text. Headings and primary body are text #EAF0FF, a cool white. Muted copy steps down a fixed opacity ladder of the same white: text-80 (nav), text-70 (body paragraphs), text-65 (footer coordinates/hours), text-60, text-55 (header status mono), text-50 (console field labels) and text-40 (footer legal).

Hairlines. Borders are tinted off the cool white, not the accents: hairline rgba(234,240,255,0.14) (the .hairline utility), hairline-12 (section dividers and the header bottom border), and hairline-08 (the header's inner divider). Cyan tints carry the structural orbit rings: cyan-18 (outer ring), cyan-22 (middle), cyan-28 (inner) and cyan-40 (input underlines, the planetarium timeline rail, console panel and detail-card borders).

Typography

Two webfonts are imported. Clash Display (Fontshare, weights 400–700) is the display/heading face, used uppercase with a punishingly tight line-height (0.86 in the hero). Space Grotesk (Google Fonts, 300–700) is the body face and the default body font-family. Major Mono Display (Google Fonts) is the all-lowercase telemetry/mono accent — every // label, coordinate, countdown and field caption. No bespoke faces; all three are open-source via the @import URLs.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(3rem,11vw,11rem)	600	0.86	0	Hero headline, uppercase
heading	48–72px (text-5xl/7xl)	600	1 (none)	0	Section H2s, uppercase
wordmark	24px	600	—	0.18em (~4.3px)	ORBITARIUM logo, button labels
body	16px	400	1.625 (relaxed)	0	Paragraph copy, inputs
mono	12px	400	—	0.3em widest (~1.5px)	// mission labels, telemetry
mono-tiny	10px	400	—	widest	Field captions, footer legal

Layout

Base unit is 4px (Tailwind scale); horizontal padding is px-8 (32px) inside a max-w-[1440px] centered container. The page is a single scrolling column of full-bleed sections separated by hairline-12 top borders. A two-row header carries a mono status bar above the wordmark + nav + TICKETS row. The hero is asymmetric: a left-aligned giant headline with a mix-blend-screen nebula image bleeding off the right edge. The centerpiece is a 150vh Exhibit Orbits stage holding an 840×840px orbit system (three concentric rings, an orange core, six absolutely-positioned planets on radii 420/290/160px). The planetarium is a left-rail vertical timeline; field trips is a 1fr / 1.3fr two-column grid with a terminal-window console; tickets is a right-aligned circular beacon with the heading anchored bottom-left. Footer is a 4-column grid. Whitespace is generous and dark — sections breathe with py-24.

Elevation & Depth

There are no soft drop shadows; depth comes from glows and hairlines. core-glow is a double orange bloom (0 0 60px 12px rgba(255,122,26,.55), 0 0 140px 40px rgba(255,122,26,.25)) on the orbit core and logo dot. cyan-glow (0 0 22px rgba(35,224,224,.45)) rims planets, detail cards and timeline markers. The launch beacon has a magenta bloom (0 0 50px rgba(224,64,251,.55)) plus animated pulse rings. The parallax starfield and mix-blend-screen nebula add atmospheric depth. Everything else is defined by thin tinted borders on the flat navy.

Shapes

Two extremes, nothing in between. UI is completely square — rounded.none 0px on every chip, card, button, console panel and station marker (a brutalist, console-screen feel). Circles (rounded.full 9999px) are reserved for the cosmology: orbit rings, the six planet spheres, the orange core, and the pulsing circular ticket beacon. The contrast between square interface and round celestial bodies is the system's core shape idea.

Components

• TICKETS link — transparent fill, 1px solid cyan border, cyan text, mono ~11px tracking 0.2em, square, 10px 20px; inverts to cyan-bg / navy-text on hover.
• LAUNCH TOUR CTA — solid cyan fill, navy text, Clash 18px tracked 0.15em, square, 16px 32px; hovers to white fill.
• TRANSMIT REQUEST button — full-width solid orange fill, navy text, Clash tracked 0.2em, square; hovers to white fill.
• Planet — surface-card fill, 1px cyan border, cyan-glow, circular 96px, with a 40%-opacity exhibit image, mono code + Clash name; springs to 1.25× on hover.
• Detail card — surface-card, 1px cyan, cyan-glow, square 240px; image + mono code/coord + Clash title + muted desc; fades in on planet hover.
• Console panel — surface-card fill, 1px cyan-40 border, square; faux title bar with three cyan dots + mission_booking.exe, then mono labels and bottom-border-only inputs.
• Console input — transparent, no box, 1px cyan-40 bottom border, cyan text; bottom border brightens to solid cyan on focus.
• Launch beacon — navy fill, 2px magenta border, circular 208px, magenta bloom, two animated pulse rings; Clash "INITIATE LAUNCH" + mono $24 // family pass.

Motion

Heavy, layered motion across three libraries (GSAP + ScrollTrigger, anime.js v4, Motion). The starfield parallaxes three layers on scroll at 0.15/0.4/0.7 speeds, all stars twinkling (opacity .25↔1, 3.5s). The hero words reveal with a masked yPercent 110 + blur(14px) un-blur, staggered 0.15s. The orbit system rotates 1turn / 48s linear-loop while planets counter-rotate to stay upright; hovering any planet pauses the whole system and springs that planet to 1.25×, while its square detail card fades up. The tickets beacon breathes (scale 1↔1.05, 1400ms) inside two expanding pulse rings (scale .55→2.4, 2.6s, one delayed 1.3s). Planetarium show entries slide in from the left on ScrollTrigger, each with a live createTimer HH:MM:SS countdown. The console runs a 45ms-per-char typewriter intro with a blinking cursor. Nav links grow a cyan underline on hover.

Iconography

No icon font or SVG icon set. "Icons" are typographic glyphs and CSS primitives: arrow characters (↗ ↦ →), small square/dot status markers, the three-dot faux window controls, and the pulsing ring shapes. Accent glyphs are cyan #23E0E0 (or orange/magenta in their respective sections); markers carry cyan-glow. All iconography is decorative/ambient telemetry rather than a UI control set.

Do's and Don'ts

• Do keep the surface near-black navy and let cyan and orange do the work; reserve magenta strictly for the ticket beacon moment.
• Do keep all interface elements square and reserve circles for celestial bodies (orbits, planets, core, beacon).
• Do voice every label and readout in lowercase Major Mono Display with // prefixes and wide tracking.
• Do express depth with glows and thin tinted hairlines, never soft drop shadows.
• Don't round buttons, cards or chips, or introduce a fourth accent color.
• Don't mix uppercase Clash with lowercase mono within the same label, or loosen the hero's 0.86 line-height.
• Don't put magenta anywhere outside the Get Tickets beacon.

Known Gaps

• Section H2s use Tailwind responsive sizes (text-5xl md:text-7xl); the heading token records the 48–72px range rather than a single value.
• The wordmark letterSpacing is given in em in the markup (0.18em); the px value (~4.3px at 24px) is computed.
• Several content blocks (planets, shows, detail cards) are injected by JS at runtime; their styling is read from the template strings in the inline script, not from server-rendered DOM.
• No icon library is present; the "icons" entry documents the glyph/primitive approach the page actually uses.