ShurIQ Design System — Style Guide

shuriq.css v0.1.0 · renders live from the master sheet ← Component Audit

Package status

The master stylesheet the report engine ships. Everything on this page reads its values from shuriq/tokens.css at render time — the guide cannot drift from the code. Decision log: DESIGN-SYSTEM-AUDIT.md §6.

shuriq/shuriq.css — the master sheet (link only this)
shuriq/tokens.css — Layer 1: color · type · space · breakpoints · legacy aliases · signal theme
shuriq/base.css — Layer 2 seed: reset · body type · focus-visible baseline
chrome.css — combar / drawers / mobile nav / footer (pending extraction from inline blocks)
report.css — l3 grammar / railtoc / stats / callouts (pending)
viz.css — reunify the two forked copies (AHA v33 / AGDF v37) (pending)
player.css + js/ — one audio engine, combar.js, mobile-nav.js, secpanel.js (pending)

Grayscale ramp

Badges: unified both sites already ship this exact value · proposed canonical target, a variant still ships somewhere · open decision to make together.

Accents

Chart palette

Categorical ×7 + negative-space accents. AGDF tokenizes these (--cc1..7); AHA hardcodes the same hexes — tokenizing AHA is on the P1 list.

Signal (dark) theme

The [data-theme="signal"] overlay with real semantic names — replaces the ambient hack where --red and --gold were both aliased to the same blue.

Type ramp

Proposed scale (sites ship raw px literals today). Geist for sans/display · JetBrains Mono for labels · Newsreader italic for editorial highlights. Body 15/24 per GRID-SYSTEM.md.

Space scale

8px base with a 4px half-step; 72px page gutter on the 1440 frame.

Focus baseline (try Tab)

Shipped to both sites 2026-07-03: :focus-visible ring via zero-specificity :where() — keyboard-only, invisible to mouse/touch.

Pill link ‹ No. 02 · Wearables ›

Breakpoints

tokenvaluemeaning
--bp-phone600phone layout · tight gutters · zoom reset to 1
--bp-split900viz split collapses to single column
--bp-handoff1120combar hands off to burger + switcher pill
--bp-frame1440max content frame (72px gutters)
--bp-zoom1536html zoom 0.95 below this (ambients exempt — scroll-snap)

Proposed canonical set — the audit found ~16 ad-hoc breakpoints in a single page; collapsing to this scale is a P1 item.