SYSTEM THE LIVING STYLE GUIDE

Drawn, not templated.

The design bible — night geometry, Swiss proportion, one accent, and motion laws from Apple HIG + Material 3. This page + Admin → System are the design system. Agents implement it via skills/design-system/ (immersive-motion · retro-futurist-graphics · design-proportion · stat-story-ui). Narrative voice: skills/narrative/entropy-worldview.

01PALETTE — VOID, INK, ONE SIREN

VOID · #000000
deep black ground

BLACK GLASS · RGBA(16,16,18,.55)
every surface — blur 26 · saturate 180 (rev 9.5)

HAIRLINE · RGBA(255,255,255,.12)
cool edge + specular top — never warm

INK · #F0EDE5
cream — type & linework

WHISPER · #9A958A
secondary voice

PAPER · #DDD0B8
Swiss yellowish paper — no orange signal

CHARCOAL · #1B1A18
retained in system — no longer paints surfaces

ARCHIVED · #FF4655
the red trial (rev 7.1)

ARCHIVED · #23221F
the warm surface — replaced by black glass

02PROPORTION — φ GOVERNS

MAJOR / MINOR = 61.8 / 38.2 · SPACING SCALE: 0.382 · 0.618 · 1 · 1.618 · 2.618 · 4.236 REM · FIGURES SERVE PARAGRAPHS (≤38% VIEWPORT) · SIZE SERIES ÷1.618 · OPTICAL CENTER: MORE AIR BELOW

03TYPE — HELVETICA SPEAKS, MONO ANNOTATES

Statement 700

Body 400 — cream on ground, max 58ch, whisper for support.

MONO 0.72REM · 0.12EM TRACKING — FIGURE LABELS, KICKERS, CAPTIONS, SERIALS

04CONSTRUCTION MARKS — THE ONLY ORNAMENT

CROSSHAIRS · DASHED SURVEY RINGS · DIMENSION LINES · REGISTRATION CORNERS · AXIS TICKS — FAINT (.2–.4), ONE OR TWO PER COMPOSITION

05WIDGETS — READOUTS, NOT CONTAINERS

// note Containers hold content. Instruments read it. Frame with hairlines, annotate with mono, take one measurement in red.

→ Primary — the one red action ghost — hairline

06GEOMETRIC MOTION — FOUR VERBS

ROTATEWhole-system, 90–150s.so slow it feels still TRAVELA signal rides a path.offset-path · 3–16s RIPPLEA shock propagates.scale 0.15→2.4, fading DRAWA relationship appears.dashoffset 1→0, once

SVG / GRAPHICS ONLY · SKILL · retro-futurist-graphics

07IMMERSIVE MOTION — APPLE HIG + MATERIAL 3

Purpose over spectacle. Continuity over jump cuts. Motion optional (prefers-reduced-motion). One idea per moment.

REVEALOpacity + lift into viewIO once SCENELive full · past dim · future softAcademy cinema SCROLL-INKWords light as you scrolleye guide SCRUBScroll maps --sp 0→1steppers PIN / H-TRACKSticky + horizontal scrubtimeline HITRare cinematic (flare)grow + dissolve

DURATION · INSTANT 0–90 · FAST 150–200 · STANDARD 250–320 · EMPHASIZED 350–450 · SCENIC 600–900 · CINEMATIC 900–1400
EASING DEFAULT · cubic-bezier(0.22, 1, 0.36, 1) · FORBIDDEN · heavy parallax · motion-only meaning · attention loops · hover-only story
SKILL · immersive-motion · ALSO IN ADMIN → SYSTEM → DESIGN BIBLE

08BUTTONS — FLAT ORANGE

→ Primary — flat Swiss paper ghost — hairline

NO METALLIC RIM · NO GLOW · NO CREAM UNDER-EDGE · HOVER = BRIGHTNESS ONLY

UNIT · DT-CORE-01 DIVISION · SYSTEMS × DESIGN STATUS · ACTIVE OUTPUT · PRIMARY · CLEARANCE 03 BUILD · REV 7.5 — NIGHT