system-v2

BY @GUALO — 27 DOWNLOADS — UI

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.

\u2606 0 DOWNLOAD ALL (.ZIP) SKILL.MD TAR.GZ V2.2.0

CLI INSTALL

curl -sS https://dem0n.vip/s/gualo/system-v2/SKILL.md -o ~/.claude/skills/system-v2/SKILL.md --create-dirs

DOWNLOAD ALL gives you a single .zip containing SKILL.md + the tar.gz — drag it into Claude Code in one go.

Sign up to see the full skill

Get the source, install command, comments, and version history

GET AN INVITE

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

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

<!DOCTYPE html>
<html data-theme="light">
<head>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/path/to/system.css">
</head>
<body>
  <canvas class="mb-canvas" id="mb"></canvas>
  <canvas id="grain"></canvas>

  <!-- Your UI with SYSTEM classes — see examples/index.html -->

  <script src="/path/to/system.js"></script>
  <script src="/path/to/motherboard.js"></script>
  <script src="/path/to/system-bootstrap.js"></script>
</body>
</html>

Apply to a SwiftUI app

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 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)

BADGE

![downloads](https://dem0n.vip/s/gualo/system-v2/badge.svg)

VERSIONS

2.2.0 — 59.5 KB — 6c0692fb127e