DESIGN SYSTEM · DEV PREVIEW

Style Guide

A scannable preview of the .ARK design system — palette, type scale, spacing scale, and a live gallery of the redesigned chrome components. Every value here is drawn verbatim from the design-system reference and the token files; nothing is recomputed.

PREVIEW ROUTE — REMOVE BEFORE PUBLISH. STYLE is currently a REAL, visible nav item (the DEV gate was removed for this build review). Remove the feature entirely by deleting src/pages/styleguide.astro, src/styles/styleguide.css, and the one STYLE line (flagged REMOVE BEFORE PUBLISH) in src/shell/ShellNav.tsx.

Palette

Six tokens, light-theme only (brand is Paper / Ink). a11y role + contrast ratio per swatch — Gray and Acid are decoration / background only and are never bound to a text utility by construction.

Paper

#FAF9F6

Background / substrate.

The page surface; all text sits on it.
Ink

#111212

All text + primary marks.

Ink on Paper ≈ 16.8:1 (AAA).
Slate

#54544F

Muted readable text — descriptors, subtitles.

Slate on Paper ≈ 7:1 (AA+). Approved 2026-05-30.
Gray

#9A9A95

Decoration ONLY — hairlines, rules, dividers.

Gray on Paper ≈ 2.65:1 — FAILS AA. Never used as text.
Cobalt

#3358D6

Links / interaction ONLY.

Cobalt on Paper ≈ 5.4:1 (AA). White on Cobalt ≈ 5.8:1.
Acid

#D6F84C

Tiny Y2K accent — highlight BACKGROUND (Ink on top), never foreground.

Ink on Acid ≈ 13:1 (AAA). Acid on Paper ≈ 1.1:1 — invisible as text.

Type scale

Space Grotesk (display + body), Space Mono (labels + metadata). One editorial hero (Display 80 over Heading 1 48), then the tight ~1.25 working ladder. Suisse Int'l swaps in later via the one font-variable.

Display SG Medium 80 / 1.05 / -0.02em

The grid is the composition
Heading 1 SG Medium 48 / 1.08 / -0.02em

One confident jump at the top
Heading 2 SG Medium 38 / 1.12 / -0.015em

Tight everywhere below
Heading 3 SG Medium 30 / 1.18 / -0.01em

The working ladder
Heading 4 SG Medium 24 / 1.25 / -0.005em

Clears Body L
Body L SG Regular 20 / 1.50 / 0

Expose structure — visible rules, table-like rows, links that look like links.
Body SG Regular 17 / 1.55 / 0

The shell is recessive — Paper bg, Ink text, generous whitespace, the chrome stays quiet.
Body S SG Regular 15 / 1.50 / 0.005em

Subtract anything that is not structurally earning its place.
Mono Label Space Mono 12 / 1.20 / 0.12em · UPPERCASE

SELECTED WORK
Mono Space Mono 14 / 1.45 / 0.01em

46.76°N 7.63°E · THUN
Chrome / Mono Space Mono 11 / 1.50 / 0.04em — chrome labels + nav

INDEPENDENT CREATIVE STUDIO

Spacing scale

8px base / baseline rhythm: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 · 160 · 192. Snap every gap and padding to this ladder.

--space-1 4px
--space-2 8px
--space-3 12px
--space-4 16px
--space-5 24px
--space-6 32px
--space-7 48px
--space-8 64px
--space-9 96px
--space-10 128px
--space-11 160px
--space-12 192px

Chrome components

Live instances of the redesigned chrome. In production the nav, coords, and time render var(--paper) and rely on the bottom bar's mix-blend-mode:difference to invert — so every specimen below sits on an explicit stage (dark = the "over media" extreme), plus a paired Paper + media blend demo that reproduces BOTH production extremes.

Selection mark (.ARK)

live · SelectionMark

Variant A (text-select). Always-on; hover / focus inverts the 16% Cobalt tint to solid Cobalt with Paper letters. Shown on Paper (its native surface).

Selection-mark nav — active + hover invert

live · ShellNav

NO boxes/borders/fills — each item wears the shared .ARK selection-mark treatment (identical to the logo). INACTIVE rest = plain Ink label. ACTIVE rest = the always-on selected look (16% Cobalt tint + Ink label + Cobalt I-beam bars + corner knobs; here HOME, via a forced pathname). HOVER any item = the invert gesture (tint → solid Cobalt, label → Paper, handles → Paper). Renders true on Paper — it lives OUTSIDE the blended bar in production.

Nav contrast — over Paper vs. media

unblended selection mark

The nav now lives OUTSIDE the difference-blended bar (only coords + time still blend), so the selection mark renders TRUE on both substrates. Left = over Paper (Ink label, 16% Cobalt tint); right = over loud media. ⚠️ FLAG for Shain: AT REST both inactive AND active labels are Ink (the active item adds a 16% tint + Cobalt handles, but its label is still Ink) — so over a dark case-study hero (Drop In, the critical path) the labels read poorly; only the active item's Cobalt handles hint at it. Solid Cobalt + Paper is the HOVER/invert state, not rest. This is the inverse of the old blended design (labels were white over media, weird over Paper) — the tradeoff is now flipped to reads-right-over-Paper / weak-over-media. Confirm dark-media handling for the bottom nav on the case-study heroes.

over Paper

over media

Scramble coordinates

live · Coordinates

Resting state = the coordinates; hover decodes the slot to the place name, then scrambles back on leave (one fixed-width slot, zero layout shift). THUN decodes noticeably slower than SANTA TERESA (duration scaled inversely to name length). Hover to see the decode.

46.76°N 7.63°E9.64°N 85.17°W

Paging rail — bar indicator

replicated · deck-rail classes

DeckRail renders only when a deck is present, so this is a faithful static replica using the same .deck-rail* classes and the documented inline values: active bar = 20px wide, Cobalt, opacity 1; idle = 9px, Ink, opacity 0.25; counter above (45px, centered). Shown on Paper, its native surface (the rail stays OUT of the blended bar in production).

Scroll hint

replicated · scrollhint classes

The live ScrollHint fades out after a ~2s dwell, so this is a forced- visible replica using the same .scrollhint* classes. Copy: scroll / ↑ ↓ to move through (Mono gray). Shown on a dark stage.

Buttons

Button row · .contact-form__submit

There is no shared <Button> component in the tree — these mirror the SAME tokens as the one real CTA (the contact submit): primary = Paper text on Ink, 18px SG Medium, ≤4px radius; secondary = Cobalt mono link (the VIEW 03 "enter the work" register). FLAG: extract a shared Button if more CTAs land.