The soullinked styleguide
Every token and every component the site is built from, in every state — one page, zero one-off styles. Sample copy is in-world: runs, links, the blame board.
Brand
The broken-link mark is the only logo: teal is the link that holds, coral is the one that broke. Wordmark is the brand mono at 800 with a decorative indigo .io.
soullinked.io
Color tokens
From web/static/tokens.css — the single source of truth. Text/background pairs were AA-checked when the tokens landed; components never dilute them with opacity.
Brand
Surfaces
Text
Semantic
Tints
Type scale
System stacks only — zero font files, zero layout shift. Weights: 400 body, 700 emphasis, 800 display.
--fs-xs — one falls, all fall: that is the whole rulebook.
--fs-sm — one falls, all fall: that is the whole rulebook.
--fs-base — one falls, all fall: that is the whole rulebook.
--fs-md — one falls, all fall: that is the whole rulebook.
--fs-lg — one falls, all fall: that is the whole rulebook.
--fs-xl — one falls, all fall: that is the whole rulebook.
--fs-2xl — one falls, all fall: that is the whole rulebook.
--font-mono carries the wordmark, lobby codes, tokens, and stat figures.
Spacing
4px base. If a gap is not on this ruler, it is not a gap we use.
Buttons
Primary is teal (the intact link), danger is coral (the broken one). Tab to any of them for the :focus-visible ring; specimens toast so nothing on this page is dead.
Forms
Cards
A default card. Most page content lives inside one.
Eyebrow heading
.card-section fronts a labeled region — settings, rosters, the run list.
.card-highlight is the token-reveal well: shown once, never stored, treated like it matters.
Status pills
Every pill is icon + text — color is never the only channel.
Lobby lifecycle
Encounter fates
Link state
Privacy (always visible on run-scoped pages)
Stub phases
Banners
Toasts
Announced via the aria-live region the shell ships on every page.
Summary tiles
Board table
Horizontal scroll on phones; the player column goes sticky at 768px.
| Player | Caught | Fell | Links broken | Routes burned | Badges |
|---|---|---|---|---|---|
| Mara | 14 | 2 | 1 | 0 | 5 |
| Rook | 13 | 4 | 3 | 2 | 5 |
| Junei | 15 | 1 | 0 | 1 | 6 |
Empty state
No runs live right now. Host one and the board wakes up.
Stub state
Rendered from the real ia.js registry entry for /graveyard — real route, honest phase line, a live cross-link, zero dead controls (STUB-STANDARD).
Graveyard
Opens in BetaEvery fallen mon gets a death card — lifespan, killer, last words. The graveyard remembers what the run cost.
Deaths already land on your run’s blame board → your runs
Identity chip
The cosmetic cache made visible: dot color rides data-color through SL.applyDataStyles.
Color picker
aria-pressed marks the selection; the ring is not just color.
QR / pairing block
Drawn by the dep-free encoder (qr.js asset). The code text is the accessible equivalent — the QR is progressive.
Codes last 5 minutes and work once.
Link-graph nodes
Feed
- Rook’s TAILLOW fell on Route 110 — the link took Mara’s SHROOMISH with it.
- Mara caught WINGULL on Route 104. Link formed with Junei’s ZIGZAGOON.
- Route 103 burned — the first encounter fled and the officials do not forget.
HP bars
role="meter"; the width is the [data-hp] CSSOM pass, the class carries the severity.
Tabs
Who broke the link, counted.
What the run cost, remembered.
Dialog
The confirm() replacement for host actions.
Skeletons
Static under prefers-reduced-motion — the tokens.css kill switch, not a per-component courtesy.
Icons
The inline symbol sprite, 24×24 stroke glyphs on currentColor. Decorative by rule: always aria-hidden with text alongside.
Player palette
The 8 — player-chosen cosmetics, frozen across the rebrand, and always paired with the player’s name text.
Breakpoints
Mobile-first at 360px; the only breakpoints are min-width: 768px and min-width: 1280px. If a layout needs a third, the layout is wrong.
Colophon
- web/static/tokens.css — every color, size, and duration
- web/static/app.css — the component library
- web/static/app.js — the shared runtime (window.SL)
- web/src/shell.js — the page shell
- web/src/ia.js — the IA registry (nav, footer, stubs)
The broken-link mark is the only logo.