# BG LANDS — Design System Master

> Global source of truth. Page overrides, when present, may only adjust density and composition—not brand colors, accessibility, or component semantics.

## Direction

**Frontier Command Center** — a dark, cinematic control surface inspired by the official pixel-art logo: obsidian stone, lantern gold, moss green and a restrained square-grid language. The result should feel crafted for Minecraft without looking like a themed template.

The website follows a Product Demo arc: promise → proof → product → cross-play → installation → trust → CTA. The launcher compresses the same story into a task-first desktop dashboard.

## Design dials

| Dial | Site | Launcher |
|---|---:|---:|
| Variance | 7/10 | 5/10 |
| Motion | 5/10 | 4/10 |
| Density | 5/10 | 7/10 |

## Brand tokens

- Primary / CTA: `#F4B72B` — lantern gold.
- Secondary / success: `#63C174` — moss green.
- Background: `#070A08`; surfaces: `#0D1210`, `#141B17`.
- Foreground: `#F4F1E8`; muted: `#AAB2AA`; border: `#2B352E`.
- Error: `#FF7A7A`; info: `#8AB4F8`.
- Heading: Bahnschrift Condensed / Arial Narrow; body: Geist / Segoe UI; data: Geist Mono / Cascadia Mono.

All implementation values flow from `assets/design-tokens.json` and its generated CSS. Raw colors are allowed only for composed alpha effects that cannot be represented by a current semantic token.

## Composition

- Use a 4/8 px spacing rhythm and responsive gutters: 16, 24, 32 px.
- Web content max-width: 1200 px; body measure: 55–72 characters.
- Launcher: one dominant action card plus a secondary utility rail.
- Web hero: logo/status, short promise, one download CTA, product proof.
- Use asymmetry in large compositions, but preserve predictable reading and keyboard order.

## Components

- Minimum interactive height: 44 px desktop, 48 px mobile.
- Primary button: gold fill, obsidian text, one action verb.
- Secondary action: dark surface, visible border, white text.
- Cards: one-pixel border, restrained inset highlight, no decorative blur.
- Focus: 3 px gold ring with visible offset.
- Status always combines color with text and/or an icon.
- Icons are SVG or CSS geometry with a consistent two-pixel stroke; no emoji structure.

## Motion

- Fast 160 ms; normal 240 ms; slow 420 ms.
- Animate only opacity and transform; transitions explain hover, reveal, progress or state change.
- At most two visual systems move simultaneously in a view.
- `prefers-reduced-motion: reduce` removes reveal, floating and smooth-scroll behavior.

## Accessibility and delivery gate

- Normal text contrast ≥4.5:1; large text and non-text UI ≥3:1.
- Sequential headings, visible labels, usable skip links, correct ARIA states.
- No hover-only information; no content hidden by sticky UI.
- Web verified at 375, 768, 1024 and 1440 px with no horizontal overflow.
- Launcher verified at its 900×620 minimum and 1180×760 default.
- Loading, disabled, success, warning and error states remain visually distinct.
- Current Microsoft client-ID limitation remains visible beside every launcher download.

