Stellaris

stellaris-design · alpha

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

Overview

Stellaris is a deep-night astronomy dashboard styled as a precision instrument. The entire page sits on a near-black midnight blue (#0A0C1A) dusted with a faint fractal-noise overlay (the .noise::after SVG turbulence at 6% opacity, overlay blend). Against it runs a strict two-tone hierarchy: silver (#B0B8C0) for all text — stepped down through /85, /60, /55, /50, /40 opacities — and a single muted-gold voltage (#C4A030) reserved for the things that matter (bright stars, active equipment, key stats, planet markers, the log spine). The hero is a hand-built SVG planisphere: a circular star chart with an Unsplash deep-sky photo behind a radial vignette (.starmap-bg), concentric dashed altitude rings, a slowly rotating azimuth tick ring (.spin-60, 600s), a dashed gold ecliptic ellipse, twinkling gold stars, hand-plotted constellation lines, planet glyphs and deep-sky markers — all responding to pointer with a subtle 3D tilt. Surrounding it, data lives in sharp-cornered cards bounded only by hairline borders (rgba(176,184,192,0.18)) — no drop shadows anywhere. Type is light-weight Inter (300) for display, italic Inter for object names, and JetBrains Mono (with tnum) for every coordinate, clock and readout, giving the page its observatory-logbook voice. A red-safe toggle flips the whole UI into night-vision oxblood (#8A2020).

Colors

Brand / Voltage. A single accent: gold #C4A030. It marks bright stars and planet outlines on the chart, the center glow, active equipment-tile borders, the selected chip border, the "New Entry" outline button, the log spine and nodes, and any standout statistic (limit magnitude, "94%" transparency, "14 visible").

Surface. sky #0A0C1A is the page background (body, .root, .bg-sky) and backs small chart labels. field #1A1E30 is the only raised tone — equipment tiles, sketch frames, moon discs, the toggle track, and hover fills (bg-field/60, bg-field/80).

Text. silver #B0B8C0 is the universal ink for headings and body alike, used at full strength for primary text and at reduced opacities for metadata and muted captions. Body paragraphs run at /85.

Hairlines. hairline rgba(176,184,192,0.18) draws default borders, row dividers and chart rings; hairline-strong rgba(176,184,192,0.32) emphasizes section tops and the outer azimuth ring.

Semantic. red-safe #8A2020 is night-vision mode: the .red-safe class recolors all silver/gold text, SVG strokes and fills, hairlines and panel backgrounds to oxblood for dark-adapted observing.

Gradient. center-glow is a gold radial bloom (#C4A030 at 0.08 → transparent) at the chart's center; starmap is a radial vignette over the deep-sky photo, darkening from rgba(26,30,48,0.6) to rgba(10,12,26,0.95).

Typography

Two families, both loaded from Google Fonts: Inter (weights 300–600) and JetBrains Mono (300–500). Display, object names and body are all Inter; the display style is deliberately light (weight 300) with tight -0.02em tracking. Object names (galaxies, planets) are set in italic Inter — a recurring signature. JetBrains Mono, with tabular numerals (font-feature-settings: 'tnum'), carries every coordinate, RA/Dec readout, clock, magnitude and percentage — it is the data voice. Both are open-source, so no substitution needed.

Layout

Base unit is 4px on Tailwind's scale. The page is a single vertical scroll of full-bleed sections at px-8. The hero is a 12-column grid: an 8-column planisphere (a max-w-[780px] aspect-square chart) beside a 4-column sidebar holding a 4-up equipment icon rail and a hairline-divided "Targets · Tonight" list. Below, a 3-night forecast is a 4-column grid of cards separated by vertical hairlines under a strong top rule. The observation log is a centered vertical-spine timeline: a thin gold SVG spine down the middle with alternating two-column entries (right-aligned metadata on the left, notes + sketch on the right), each pinned by a round node on the spine. A fixed pill-shaped nav floats top-center with live coordinates and clocks; a hairline footer closes the page. Whitespace is generous and the composition reads as an instrument readout — labels, ticks, coordinates everywhere.

Elevation & Depth

There are essentially no drop shadows — depth comes entirely from hairline borders and a few translucent glass surfaces. The pill nav and sketch cards use backdrop-blur (xl and sm respectively) over translucent field fills. The only "glow" effects are soft gold radial blooms: the chart's center-glow, and a bg-gold/10 blur-2xl halo behind each observation sketch. Raised vs. flat is signaled by the field tone and a hairline; emphasis is a hairline-strong or a gold border, never a shadow.

Shapes

Two opposed geometries. Circular dominates the chart: every ring (azimuth, altitude, zenith), the moon discs, star dots, the pill nav, the toggle, and the log nodes are rounded-full. Sharp / near-sharp governs the data: equipment tiles and sketch frames use rounded-sm (~2px), while target rows, forecast cards, chips and the outline button are fully square-cornered. The contrast — soft round sky instruments against hard-edged tabular data — is the shape signature.

Components

• Pill nav — field/80 fill, hairline border, rounded-full, backdrop-blur-xl, py-2.5 px-5; mono coordinates + clocks with a gold compass icon and the red-safe toggle.
• Equipment tile — aspect-square, field fill, rounded-sm, hairline-strong border (active: gold border + gold dot + gold label); Tabler icon over an 8px uppercase label ("NAKED", "BINOC.", "80 mm").
• Target card — transparent row, bottom hairline divider, py-3 px-1, hover field/60; italic object name, mono designation, gold ALT, a small gold altitude-curve sparkline.
• Forecast card — square, vertical hairline separators, px-6 py-6; 30px display day name, a 5-segment seeing bar (gold filled / rgba(176,184,192,0.15) empty), and a clip-path moon-phase disc.
• Chip — square, hairline border, py-0.5 px-2, mono uppercase; active state uses gold border + gold text ("8×42 Binoculars", "Seeing 4/5").
• Outline button — square, gold border, gold uppercase 0.25em label, hover gold/10; "＋ New Entry".
• Sketch card — 176×128, field/60 + backdrop-blur-sm, rounded-sm, hairline border, gold blur halo behind; inline SVG eyepiece sketch with a mono caption.
• Toggle — 32×18 pill; unchecked field track with silver knob, checked red-safe track with knob sliding right.

Motion

Authored with GSAP + ScrollTrigger, anime.js and Lenis smooth scroll. The chart's tick rings rotate continuously (.spin-60 600s, .spin-24 240s, linear); bright stars twinkle (opacity 0.4↔1, 3s, staggered). The planisphere tilts in 3D on pointer move (perspective rotateX/Y up to ±6°, .4s ease-out). On load, target cards stagger in from the right (autoAlpha + x, stagger 0.06, power3.out). On scroll, log entries batch-reveal upward (y 32→0, stagger 0.12) and the gold center spine draws itself via strokeDashoffset scrubbed to scroll. The pill nav hides on scroll-down and reappears on scroll-up (opacity + translateY, .35s). A live clock ticks the LST readout every second.

Iconography

Tabler icons via the webfont (ti ti-*) for UI glyphs — compass, moon, eye, binoculars, telescope, cloud, plus — at text-sm/text-base/text-xl (14–20px), outline style, in silver with gold for active/accent. Astronomy content (stars, constellation lines, planet glyphs, deep-sky markers, eyepiece sketches, the chart itself) is hand-drawn inline SVG with stroke-width 0.4–1, using silver and gold strokes/fills. In red-safe mode every SVG stroke and .keep-fill is forced to oxblood.

Do's and Don'ts

• Do keep gold scarce — one voltage, reserved for the genuinely important.
• Do route every number through JetBrains Mono with tabular figures.
• Do use hairlines and the field tone for structure; let circular and sharp geometries coexist.
• Do keep object names in light italic Inter.
• Don't add drop shadows — depth is borders, blur and faint gold glow only.
• Don't brighten the surface or introduce a second accent color.
• Don't let red-safe mode leak any silver/gold — everything must collapse to oxblood.
• Don't use heavy Inter weights; display stays at 300.

Known Gaps

• Display fontSize is expressed as a clamp(...) summary of three fixed sizes (44/34/30px) that the HTML hard-codes per element; there is no real fluid clamp in the source.
• rounded-sm is mapped to ~2px (Tailwind's default) — the exact pixel value is not declared in the HTML.
• The starmap-bg layers a remote Unsplash photo behind the radial vignette; only the gradient values are tokenized, not the image.
• Body line-height 1.625 is Tailwind's leading-relaxed, inferred from the utility class rather than an explicit declaration.