---
version: alpha
name: "Planetarium template by 8B"
description: "A one-page planetarium site in Geist on night violet with flat orange, blue-violet, rust and magenta slabs, a sideways space journey and a sky that turns open. Free HTML template by 8B, MIT."
colors:
  primary: "#140a31"
  secondary: "#4c27b8"
  tertiary: "#ee55b6"
  neutral: "#ffffff"
  surface: "#140a31"
  on-surface: "#ffffff"
  accent-orange: "#eb5d16"
  rust: "#a3300c"
  ink: "#0f0822"
  caption: "#ffc9ee"
typography:
  headline-display:
    fontFamily: Geist
    fontSize: 116px
    fontWeight: 500
    lineHeight: 0.88
    letterSpacing: -0.055em
  headline-md:
    fontFamily: Geist
    fontSize: 48px
    fontWeight: 500
    lineHeight: 0.96
    letterSpacing: -0.045em
  numeral:
    fontFamily: Geist
    fontSize: 30px
    fontWeight: 300
    lineHeight: 1
    letterSpacing: -0.03em
  body-lg:
    fontFamily: Geist
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.03em
  body-md:
    fontFamily: Geist
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: -0.01em
  label-sm:
    fontFamily: Geist
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.28
    letterSpacing: -0.005em
  button:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.02em
  wordmark:
    fontFamily: Geist
    fontSize: 19px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.14em
rounded:
  field: 26px
  full: 999px
spacing:
  gutter: 44px
  section-y: 168px
  button-height: 48px
  time-button-height: 44px
  field-height: 52px
  band-height: 56px
components:
  button-primary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 24px
    height: "{spacing.button-height}"
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.neutral}"
  button-secondary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.neutral}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 24px
    height: "{spacing.button-height}"
  button-time:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.neutral}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 18px
    height: "{spacing.time-button-height}"
  nav-pill:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 10px 26px
  show-band:
    backgroundColor: "{colors.rust}"
    rounded: "{rounded.full}"
    height: "{spacing.band-height}"
  input-field:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.field}"
    padding: 14px 22px
    height: "{spacing.field-height}"
---

# Zenith planetarium template

## Overview

A one-page site for a planetarium or observatory that runs timed, live-narrated shows. The idea is a night sky that the page keeps opening: you arrive in violet dark, travel sideways through five space stops, watch a circle of sky turn open, and meet flat slabs of orange, blue-violet, rust and magenta where the practical facts live. It is for a dome, a science centre or an astronomy club that wants to feel like an evening out, not a museum leaflet. The feeling is quiet, large and a little theatrical, with white type set tight and very big.

## Colors

- **Night, `#140a31`**: the main ground, used for the body, the first screen, the journey, the late events and the start of the live and contact gradients. This is `primary`.
- **Blue-violet, `#4c27b8`**: the dome and schools sections, the full-screen phone menu and the middle of the live and contact gradients.
- **Magenta, `#ee55b6`**: the right panel of the roof, the journey runner, the dots on the events line, text selection and the glow at the end of the live gradient.
- **White, `#ffffff`**: type on dark grounds, filled buttons, the nav pill and the question section ground.
- **Orange, `#eb5d16`**: the flat ground of the shows section and the footer, and the warm end of the contact gradient.
- **Rust, `#a3300c`**: the left roof panel and the colour bands of the first and fifth shows.
- **Ink, `#0f0822`**: type and rules on orange, white and magenta grounds, button text and dark buttons.
- **Pale pink, `#ffc9ee`**: captions, stop distances, event dates and meta lines, contact labels and the thank-you line.

## Typography

Geist, loaded in weights 300 to 600, is the only family; its metric-matched Arial fallback keeps the first paint steady. Headings and the first-screen statement are weight 500 at roughly 116px on a wide screen (the CSS clamps from 46px up to 116px), with line height 0.88 and tracking of minus 0.055em, so lines sit almost touching. Sub-headings are 48px at the same weight. Lead paragraphs are 28px regular with tight tracking. Numerals and dates are light, weight 300. Body is 17px regular at 1.45. Captions are 14px. The bar's wordmark is semibold, uppercase and widely tracked at 0.14em, the only wide tracking on the page. Everything else is sentence case with negative tracking.

## Layout

Most sections sit on a twelve-column grid with a 44px gutter on wide screens (clamped from 16px) and 168px of vertical padding (clamped from 88px). Headings are often split into words or halves that sit apart: three parts in the corners and centre of the dome, two halves either side of the roof photo, staggered words in the questions. The journey is a held horizontal strip of five stops, the show list is a row grid with a colour band, name, description, length and time buttons, and the events sit on a four-column line. Below 1000px the show rows and events collapse to fewer columns; below 760px grids become a single column, the strip stops are 84vw wide and the roof panels stack around the photo. The wordmark in the footer spans the full width.

## Elevation & Depth

There are no card shadows. Depth comes from layers: photos blended onto violet with `screen` blending, a star-trail photo turned behind the dome heading, glowing radial dots and a ring and fan of rays on the first screen. The only shadow token is a 5px ring in ink around a focused button or field.

## Shapes

Pills and circles dominate: buttons, the nav pill, the show bands and the event dots use fully rounded corners, and inputs use a 26px radius. Rings are 1px circles; hairline rules, 1px, separate rows and mark the progress line and the schools and events rails. Photos are square-cornered, cropped to 4:3, 3:4 or the section's own frame.

## Components

- **button-primary**: white pill, ink text, 48px high. On hover a circle of ink grows from the centre and the label turns white.
- **button-secondary**: the same pill in ink with white text, used in the bar's Book seats button; hover fills white.
- **button-time**: the smaller 44px ink pill for show times, one per time.
- **nav-pill**: the white capsule that holds the five links; links draw an underline on hover.
- **show-band**: a 56px gradient pill, one per show, in its own colour pair.
- **input-field**: white field with ink text and a 26px radius, for the box-office form.

## Motion

The page loads GSAP, ScrollTrigger and Lenis. Lenis gives smooth scrolling; most motion is scrubbed with a 0.6 second lag.

- **Navigation**: the bar slides up out of view when you scroll down and returns when you scroll up, over 0.55 seconds.
- **Opening**: the statement rises in on load and the paragraph and buttons lift in a beat later. A dot circles the ring in a 42 second loop, which pauses when the section is off screen.
- **Journey**: the section is pinned while the strip of stops slides sideways for the width it overflows. Each photo drifts into its frame and a glowing runner travels along the progress line.
- **Dome**: the section holds for about 1.3 screens. A circle of star-trail photo grows from 14% to fill the screen while it rotates from minus 80 degrees to level, and a thin ring expands and fades.
- **Shows, schools, questions**: heading words gather toward the middle and move out to place; intros and the schools photo fade in once, from a blur on large hover screens; the row rules are traced once, while the schools line, being vertical, simply appears.
- **Live**: quote words spread from the middle while the presenter photo drifts in from the side and fades up, sharpening from a blur on large hover screens.
- **Roof**: two panels start closed over the telescope photo and slide apart, sideways on wide screens and vertically on phones.
- **Events**: on wide screens four cards start at different heights and slightly tilted, then settle onto the line as it draws; on phones they slide in from alternate sides beside a vertical line.
- **Contact**: a night layer fades out while a ring closes in from outside the screen.

With reduced motion on, the entrance and scroll animations and smooth scrolling are switched off and the journey's five stops sit in a plain grid. The bar's hide on scroll and hover transitions on buttons and links still run.

## Do's and Don'ts

- Do keep night violet as the dominant ground and let the flat orange, blue-violet and magenta slabs carry facts.
- Do set big headings at weight 500 with strongly negative tracking and a line height under 1.
- Do keep one family, Geist, and the light weight for numerals and dates.
- Do keep pills and circles for controls; keep photos square-cornered.
- Do use pale pink for captions and meta lines, and check their contrast when colours change.
- Don't add drop shadows, rounded cards or stock icons.
- Don't introduce a second display typeface or wide tracking outside the wordmark.
- Don't put white type on the white question ground or ink type on the night ground.
- Don't add bolted-on scroll effects; keep the page's own motion.
- Don't remove the section ids or the classes the scripts read.