UXS-013 — Landing page (root /)
Status · Draft v0.1 Visual fidelity · Spec-only (no prototype HTML); references existing
/scienceSpace-101 landing as the closest sibling IA anchor · §entrance · §nav-bar · §footer · §shared-tokens Related PRD · PRD-013
Why this UXS exists
The landing page is Orrery's first impression for every new visitor. PRD-013 establishes the what and why; this UXS establishes the how it looks and behaves. It pins down the hero, the section rhythm, the 11-card grid, the CTAs, the responsive breakpoints, and the accessibility contract.
The design has to thread a narrow needle: feel substantial enough that a first-time visitor stays for 30 seconds, but light enough that a returning user can skip past in one click without resentment.
Principles
- Engineering-blueprint tone. Same visual vocabulary as
/science: white-on-near-black, teal accents, generous whitespace, no marketing flourishes. The page should look like the rest of the app — not a promo skin bolted on. - One clear primary action. The hero CTA ("Explore the solar system") is the single biggest interactive element. Everything else is supporting copy or secondary navigation.
- Read or skip — both equally valid. A user who wants to read everything can. A user who clicks the hero CTA in 2 seconds gets the same outcome as if the page didn't exist. Neither is penalised.
- Mobile-first feels native, not crammed. The 375 px layout is not a desktop layout shrunk down; it's the same content with different rhythm.
- Honest provenance is part of the design. The footer block is not afterthought-small — it's a real element of the page, sized so the user actually reads "no accounts, no tracking, MIT licensed."
Scope
In scope
- Visual + interaction spec for the new
/route at desktop (≥ 1024 px), tablet (768–1023 px), and mobile (375–767 px). - Component states for the hero CTAs, the 11 nav cards, and the footer block.
- Accessibility requirements (heading order, ARIA labels, keyboard nav, RTL, reduced-motion).
- Token usage (no new tokens; uses what's in
tokens.css).
Non-goals
- Animation choreography beyond the existing
prefers-reduced-motionpattern. - Per-locale visual variants (only translation; layout is shared).
- Custom illustrations or photography for the cards (icons only — engineering-blueprint SVG style).
- Re-skinning the nav or footer-strip components (those stay as-is per UXS-001).
Boundary note
This UXS does not redesign the always-on bottom-trailing footer strip (Credits | Library | v0.3.0). That stays put on every route and renders unchanged. The landing page adds a separate in-flow footer block at the bottom of the scrollable content — a different element, larger and more readable.
Theme
Inherits the global dark theme. No light-mode treatment defined in V1 (no other route has light-mode either).
Tokens
Inherited (already in tokens.css)
| Token | Use on landing |
|---|---|
--color-bg (#04040c) | Page background |
--color-text | Hero wordmark, headings, primary body text |
--color-text-dim | Caption text, footer block secondary text |
--color-accent (#4466ff) | Focus rings |
--color-teal (#4ecdc4) | Primary CTA, card hover border, link hover |
--font-display (Bebas Neue) | Wordmark, section headings, card route slugs |
--font-editorial (Crimson Pro italic) | Body copy in the why/what/tour sections |
--font-mono (Space Mono) | Card descriptions, footer-block metadata |
--nav-height (52 px) | Top offset for the hero |
--size-nav-title (30 px) | Reference only — landing wordmark uses its own larger size |
Newly defined
None. The landing page composes existing tokens.
Sizes (component-local, not promoted to tokens)
| Element | Desktop | Mobile |
|---|---|---|
| Hero wordmark | 96 px | 48 px |
| Hero tagline | 22 px | 18 px |
| Hero subhead | 16 px | 14 px |
| Section heading (h2) | 32 px | 24 px |
| Body paragraph | 17 px | 15 px |
| Card title (route slug) | 22 px | 20 px |
| Card description | 14 px | 13 px |
| Footer block heading | 14 px | 13 px |
| Footer block body | 12 px | 11 px |
Layout
Desktop (≥ 1024 px)
┌──────────────────────────────────────────────────────────────────────┐
│ [ NAV — sticky 52 px, unchanged from UXS-001 ] │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ ╔══════════════════════════════╗ │
│ ║ ORRERY ║ ← wordmark 96px │
│ ║ ║ │
│ ║ A solar system explorer ║ ← tagline │
│ ║ for the browser. ║ │
│ ║ ║ │
│ ║ Real orbital mechanics. ║ ← subhead │
│ ║ 37 missions. 14 languages. ║ │
│ ║ ║ │
│ ║ [ Explore the solar system ] [ How it works ] │
│ ╚══════════════════════════════╝ │
│ │
│ ───────────────────────────────── │
│ │
│ ## What is this? │
│ │
│ Orrery is a browser-based solar system explorer, │
│ mission simulator, and encyclopedia. Real orbital │
│ mechanics. No backend. Runs offline. 14 languages. │
│ │
│ [ ...2-3 more paragraphs... ] │
│ │
│ ───────────────────────────────── │
│ │
│ ## Why this exists │
│ │
│ [ Inspired by Artemis II. Open source. │
│ No ads, no tracking, no accounts. Designed to │
│ be share-able by URL. ] │
│ │
│ ───────────────────────────────── │
│ │
│ ## How to use it │
│ │
│ [ Multi-paragraph guided tour, each /route a link ]│
│ │
│ ───────────────────────────────── │
│ │
│ ## All 11 destinations │
│ │
│ ┌──────────┬──────────┬──────────┐ │
│ │ /explore │ /plan │ /fly │ │
│ ├──────────┼──────────┼──────────┤ │
│ │ /missions│ /earth │ /moon │ │
│ ├──────────┼──────────┼──────────┤ │
│ │ /mars │ /iss │ /tiangong│ │
│ ├──────────┼──────────┼──────────┤ │
│ │ /science │ /fleet │ │ │
│ └──────────┴──────────┴──────────┘ │
│ │
│ ───────────────────────────────── │
│ │
│ ┌─────── Footer block ───────┐ │
│ │ No accounts. No tracking. │ │
│ │ One functional cookie │ │
│ │ (locale, ADR-057). MIT. │ │
│ │ │ │
│ │ GitHub · README · License │ │
│ │ Credits · Library · TA │ │
│ └─────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────┘- Single centred column, max-width 880 px.
- Vertical padding between sections: 64 px desktop, 40 px mobile.
- Section dividers: 1 px horizontal rule,
rgba(255,255,255,0.08), 880 px wide (matches column). - Hero block is the first thing below the nav, top padding 96 px (desktop) / 48 px (mobile).
Tablet (768–1023 px)
- Same vertical structure as desktop.
- Card grid drops from 3 cols to 2 cols.
- Hero wordmark 80 px, tagline 20 px.
- Column max-width tightens to 720 px.
Mobile (375–767 px)
- Same vertical structure.
- Card grid is 1 col (full-width cards).
- Hero wordmark 48 px, tagline 18 px, subhead 14 px.
- CTAs full-width buttons stacked vertically (44 px touch target each per ADR-018).
- Side padding 16 px.
- Section dividers full-width (minus padding).
Component states
Hero CTAs
Primary CTA — Explore the solar system (links to /explore).
| State | Border | Background | Text | Notes |
|---|---|---|---|---|
| Default | 1 px var(--color-teal) | transparent | var(--color-teal) | |
| Hover | 1 px var(--color-teal) | rgba(78,205,196,0.18) | var(--color-teal) | 120 ms transition |
| Focus-visible | 2 px var(--color-accent) (outline) | inherits hover | inherits | offset 2 px |
| Active (pressed) | inherits hover | rgba(78,205,196,0.28) | inherits |
Padding: 16 px × 32 px desktop, 14 px × 24 px mobile. Border-radius 4 px (matches existing buttons).
Secondary CTA — How does it work? (anchor link to the lower section, or hard-link to /science).
Same shape; ghost styling (no border, just text + underline-on-hover).
Cards (11×)
Each card is an <a> block.
| State | Border | Background | Translate-Y | Notes |
|---|---|---|---|---|
| Default | 1 px rgba(255,255,255,0.12) | rgba(255,255,255,0.02) | 0 | |
| Hover | 1 px rgba(78,205,196,0.4) | rgba(78,205,196,0.04) | -4 px | 150 ms transition; suppressed under prefers-reduced-motion: reduce |
| Focus-visible | 2 px var(--color-accent) (outline) | inherits hover | inherits | outset 2 px |
| Active | inherits hover | inherits | -2 px |
Card internal layout:
┌─────────────────────────────────┐
│ [icon 24×24] /explore │ ← icon left, slug right; flex row
│ │
│ The solar system in 3D │ ← bold one-liner
│ │
│ Real orbital mechanics, click │ ← dim multi-line, mono
│ any planet for live position │
│ data. │
└─────────────────────────────────┘Padding: 20 px. Border-radius 4 px. Min-height 160 px (so all cards align even when descriptions vary).
Footer block
Larger than the always-on bottom-trailing strip. Sits at the bottom of the scrollable column.
┌──────────────────────────────────────────────────┐
│ ABOUT THIS PROJECT │
│ │
│ Orrery is open-source under the MIT license. │
│ No accounts. No tracking. One functional cookie │
│ stores your explicit locale choice (per ADR-057).│
│ │
│ GitHub · README · License · Credits · │
│ Library · Technical Authority │
└──────────────────────────────────────────────────┘Border 1 px rgba(255,255,255,0.08), padding 24 px, border-radius 4 px. Inline links styled like the always-on footer-strip — Space Mono, dim, hover teal.
Accessibility
- Heading order.
<h1>for the wordmark (visually styled as the mark itself; the literal H1 text is "Orrery"). Tagline is<p class="hero-tagline">. Section titles are<h2>. - Landmark roles. Page wraps a
<main>(already provided by+layout.svelte). The card grid is<ul>with<li>children. The footer block uses<section aria-labelledby="...">for screen-reader landmark recognition. - Card semantics. Each card is
<li><a href="..."><span class="route-slug">...</span><span class="card-title">...</span><span class="card-desc">...</span></a></li>. The icon is decorative (aria-hidden="true"). Hit-area is the entire<a>. - CTA buttons. Primary CTA is
<a class="cta cta-primary" href="/explore">(semantic — it navigates). Use a<button>only if it triggers in-page action (e.g., scroll to anchor for the "How does it work?" CTA — which is also acceptable as<a href="#how-it-works">). - Keyboard nav. Tab order: nav (existing) → hero CTAs → section anchors are focusable by clicking — within the article, tab moves through links → cards (in DOM order) → footer-block links → always-on footer strip. Standard browser focus rings on every interactive element; visible custom outline using
var(--color-accent). - Aria-labels. Cards include an
aria-labelof the form"<route-slug>: <one-line-description>"so screen readers announce the destination clearly. - RTL. Card grid mirrors automatically via CSS Grid +
[dir="rtl"]global hook (already in tokens.css). Hero text-align stays centred (no mirror needed). Card icon-left flips to icon-right under RTL. - Reduced-motion. All transitions (card hover translate, button colour fade) are gated by
@media (prefers-reduced-motion: no-preference). Under reduced-motion, the hover styles still apply but instantaneously. - Touch targets. All CTAs ≥ 44 × 44 px on mobile per ADR-018. Card hit-area exceeds this by design.
- Lighthouse target. Accessibility ≥ 95 (CI gate inherited from ADR-025).
Acceptance criteria
- [ ] Hero renders at 1280 × 800 desktop with wordmark visually centred, tagline and subhead below, two CTAs side-by-side.
- [ ] Hero collapses to 375 × 667 mobile with wordmark scaled, single-column CTAs full-width.
- [ ] All 11 cards render in the canonical order from PRD-013 §scope.
- [ ] Card hover state lifts the card 4 px and tints the border teal — verified at desktop only; mobile (no hover) shows :active styling on tap.
- [ ] All 11 cards navigate to their canonical routes when clicked, preserving the active
?lang=parameter. - [ ] Primary CTA navigates to
/explore?lang=<active>(or/exploreif locale is en-US). - [ ] Secondary CTA scrolls to or links to the encyclopedia preview /
/science. - [ ] Section dividers render between every section.
- [ ] Footer block displays the four required text lines + six inline links in Space Mono.
- [ ] All landing strings are sourced from
messages/<locale>.jsonvia Paraglide; no hard-coded English in the markup. - [ ] All 14 locales render landing copy in their language (no en-US fallbacks).
- [ ] German visitor with no
?lang=lands on/, sees German content, URL canonicalises to/?lang=de(per #73 Gap 1 already shipped). - [ ] RTL (Arabic): hero stays centred, card grid mirrors, body copy flows right-to-left.
- [ ] Lighthouse accessibility ≥ 95 on the new route at both 1280 × 800 and 375 × 667.
- [ ]
prefers-reduced-motion: reducemedia query disables card-hover translate-Y and button colour transitions. - [ ] No console errors or warnings on first paint.
Draft v0.1 · awaiting review.