--- name: system-v2 description: SYSTEM V2 — Gualo Hawes' next-generation editorial-brutalist design language (separate from the original `system-ui` skill). Reveals the hardware underneath. FIVE modes — LIGHT / DARK / BARE / TINT / MEDIA — Inter + IBM Plex Mono typography, bracket labels [ IR-01 ], LED toggles, segmented sliders, flat-disc knobs, hairline underscore inputs, single-pill buttons with mono suffix, stacked meta cards, session telemetry rail, 24fps canvas film grain, magnetic 432Hz UI sounds, and a profile-driven animated motherboard (auto-picks COMPUTE / CAMERA / AUDIO / VIDEO topology per target app). CONSOLE popover (gear icon) is the DEFAULT home for every app-level setting — register them via `.systemV2Chrome { SystemAppToggle / Select / Slider / Button }` in Swift (or `window.SystemV2.addSetting(...)` on the web — HTML API coming in a later patch). Keeps the main UI floor clean. Trigger whenever the user wants SYSTEM V2, the five-mode palette (LIGHT/DARK/BARE/TINT/MEDIA), tint shells, media backgrounds, or the gear-as-settings-drawer pattern. Ships as drop-in CSS + JS for web/CEP/React + matching SwiftUI theme for macOS/iOS. --- # SYSTEM V2 — Reveals the hardware underneath. By Gualo Hawes · **v2.2.0** · April 2026. This is a **separate skill** from the original `system-ui`. Install this one when you want the v2 branch — five modes, media backgrounds, tint shells, and the CONSOLE popover acting as the default home for app settings. ## What ships ``` system-v2/ SKILL.md ← this file system.css ← all tokens + components (5 modes, typography, layout) system.js ← runtime — sound engine, CONSOLE popover, grain, theme motherboard.js ← profile-driven PCB renderer (compute/camera/audio/video) system-bootstrap.js ← auto-wires grain canvas + motherboard + CONSOLE on load SystemTheme.swift ← SwiftUI tokens (5 modes + Inter/Plex typo) SystemV2.swift ← SwiftUI chrome: motherboard canvas · film grain · CONSOLE popover · mode picker · app-settings registry. Apply with `.systemV2Chrome()` or `.systemV2Chrome { ... app settings ... }`. examples/ index.html ← full self-contained reference — open in browser reference/ tokens.md ← design-token cheat sheet ``` ## Five modes | Mode | Palette | Vibe | |------|---------|------| | `LIGHT` | Neon silver `#C7CCD1 → #0A0C10` | Editorial print · hospital-flicker clean | | `DARK` | Deep black `#0A0A0C → #F4F4F8` | Cinematic · terminal | | `BARE` | Deep PCB green `#0B2A22` + smoked-silver glass | Skin peeled off · motherboard fully visible | | `TINT` | User-picked color smoked over motherboard | BARE but user-branded | | `MEDIA` | User GIF / image / video + smoke overlay | Moody · brand assets behind the chrome | TINT cascades: the picked hex tints panels, knobs, bars, pills — one accent per page, consistently. ## Typography - **Primary**: Inter (400/500/600/700/800) with `font-feature-settings: "ss01", "cv11", "cv05"` - **Mono**: IBM Plex Mono (400/500) - Google Fonts link baked into CSS preamble ## The CONSOLE — default home for app settings One gear icon in the meta bar opens the CONSOLE popover. Built-in rows: - `MODE` — LIGHT / DARK / BARE / TINT / MEDIA - `TINT` — color swatches (when mode=TINT) - `MEDIA` — file picker (when mode=MEDIA) - `SOUND` — ON / OFF - `GRAIN` — ON / OFF **v2.2 — app settings land here by default.** Any app-level setting (BPM lock, API host, autosave, whatever) lives inside the CONSOLE until the dev decides to pull it out. The floor stays clean. ### SwiftUI ```swift ContentView() .systemV2Chrome { SystemAppToggle(label: "BPM LOCK", isOn: $bpmLock) SystemAppSelect(label: "SYNC", selection: $sync, options: ["BEAT","TEMPO","KEY"]) SystemAppSlider(label: "MASTER", value: $master, in: 0...1) SystemAppButton(label: "PANIC", buttonLabel: "STOP ALL") { stopAll() } // Or custom rows: SystemAppSettingRow("API HOST") { Text(apiHost).font(.system(size: 9, design: .monospaced)) } } ``` Every row styles itself with the active mode's palette + plays the SYSTEM click/hover sounds. ## Motherboard profile system Live PCB underneath the UI: amber traces, gold solder pads, chip packages with silkscreen labels, SMD components (red/green/black), signal pulses on Manhattan-routed bus lanes. | Profile | Topology | Use when app is... | |---------|----------|--------------------| | `compute` | CPU + chipset + 3 RAM sticks + NVMe + BIOS | general-purpose, productivity, editors | | `camera` | Image sensor + ISP + memory + MCU + PMIC | camera / imaging / photo / scanning | | `audio` | DSP + DAC + ADC + AMP + clock, heavy caps | music, audio, DSP, DAW, synths | | `video` | GPU + 4 VRAM + HDMI + DP | video editing, render, streaming | Add more profiles by editing `PROFILES` in `motherboard.js` (JS) or the `PROFILES` dict in `SystemV2.swift` (Swift). ## Apply to a web project ```html ``` ## Apply to a SwiftUI app ```swift import SwiftUI @main struct MyApp: App { var body: some SwiftUI.Scene { WindowGroup { ContentView() .systemV2Chrome() // or .systemV2Chrome { SystemAppToggle(...) } } } } ``` Bundle `SystemTheme.swift` + `SystemV2.swift` into your target. The chrome state (mode, tint, media, sound, grain) persists to `UserDefaults` automatically under the `system.v2.*` key prefix. ## Component vocabulary - **Meta bar**: top strip — breathing brackets + live timestamp + page + CONSOLE gear - **Session rail** (220px): live telemetry — ID, uptime, CPU, MEM, NET LED, sparklines - **Stacked meta card**: no box, just ruled lines + dotted key/value rows — typography IS the card - **Single-pill button** (`.sys-btn`): label + mono suffix; hover inverts. `.ghost` variant for secondary - **LED toggle** (`.toggle`): rack-mount LED dot + uppercase label + ON/OFF state text - **Segmented bar slider** (`.slider`): no thumb, fills from left, readout rides the fill edge - **Flat-disc knob** (`.knob`): perfect circle, single hairline indicator, mono readout - **Hairline underscore input** (`.input-field`): no box, just baseline, block cursor - **Bracket label** (`.bracket`): breathing `[ IR-01 ]`, state-aware (active / error), optional LED prefix - **Ruled line** (`.ruled`): key · dots · value — editorial metadata row - **Editorial table** (`.sys-tbl`): dotted header rule, LED status prefix ## Motion + sound - **Motion**: snappy instrument — 100–200ms eases, no springs, tactile hardware feel - **Sound**: magnetic 432Hz engine — click · hover · toggle · focus · enter · error. WebAudio on the web, band-limited Fourier synthesis on Swift (exact parity). Stereo-pans by pointer X on the web. Auto-wires on any `.sys-btn`, `.pill-group button`, `.toggle`, `[data-sys]`, or via `.systemSound()` on Swift views. ## Grain Included inline — canvas scrambled every frame at 24fps, NOT a sliding tile. `overlay` blend at ~0.10 opacity. For standalone use in non-SYSTEM projects, see the separate [`film-grain`](../film-grain/) skill. ## Anti-patterns - No colors outside the active mode's 9-stop palette — ONE accent max per page (TINT is the one exception, and even that's locked to the user's pick) - No rounded corners > 4px on cards (pills are 999px by design) - No drop shadows or gradients for depth — layered surfaces + dotted rules do that - No sans other than Inter, no mono other than IBM Plex Mono - No icons — mono codes + brackets only. (Exception: the CONSOLE gear, intentional.) - No springs or bounce motion — SYSTEM is hardware, not iOS - No mixing with another design system — all-or-nothing ## Tagline > **Reveals the hardware underneath.** ## Version - **v2.2.0 — April 2026** · SYSTEM V2 - CONSOLE popover now hosts app-level settings by default - New Swift API: `.systemV2Chrome(appSettings:)` + `SystemAppToggle` / `SystemAppSelect` / `SystemAppSlider` / `SystemAppButton` / `SystemAppSettingRow` - Swift sound engine: band-limited Fourier synthesis with HTML-parity envelope - Motherboard blur + grain + shell tuning locked to HTML reference - Authored by Gualo Hawes - Fonts: Inter + IBM Plex Mono (Google Fonts / SIL OFL)