system-ui
0.1.0 → 2.0.0
---
name: system-ui
-description: SYSTEM — Gualo Hawes' editorial-Swiss design language. Apply this design system to ANY product that should feel like GIR / IRIS / pentboyz aesthetic — neon silver light mode OR deep black dark mode, Inter + JetBrains Mono typography, bracket labels [ IR-01 ], dotted ruled lines, noise grain overlay, magnetic 432Hz UI sound engine. Trigger whenever the user wants to apply the SYSTEM theme, the IRIS style, the GIR look, Gualo's design language, a "SYSTEM-styled" interface, or says "make it match SYSTEM / IRIS / pentboyz". Ships as ready-to-drop CSS + JS for web/CEP + a matching SwiftUI theme for native macOS/iOS apps.
+description: SYSTEM//02 — Gualo Hawes' editorial-brutalist design language. Reveals the hardware underneath. Apply this system to ANY product that should feel like GIR / IRIS / pentboyz aesthetic. Three modes (SILVER light / BLACK dark / BARE transparent-over-motherboard), 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 underneath (auto-picks COMPUTE / CAMERA / AUDIO / VIDEO topology per target app). One gear icon opens the CONSOLE popover for mode / sound / grain. Trigger whenever the user wants to apply the SYSTEM theme, SYSTEM//02, the IRIS style, the GIR look, Gualo's design language, "reveals the hardware underneath", or says "make it match SYSTEM / IRIS / pentboyz / BARE mode". Ships as drop-in CSS + JS for web/CEP/React + matching SwiftUI theme for macOS/iOS.
---
-# SYSTEM — Editorial-Swiss Design Language by Gualo Hawes
+# SYSTEM//02 — Reveals the hardware underneath.
-SYSTEM is a **shared design language** for ANY Gualo product — web app, CEP panel, native macOS/iOS app, marketing page, editorial layout. It is the visual DNA behind IRIS, GIR-adjacent surfaces, and pentboyz brand work.
+By Gualo Hawes · v2.0 · April 2026.
-Apply this system when the user wants:
-- **Editorial / Swiss / brutalist** layout feel
-- **Monochrome neon silver** (light) or **deep black** (dark) palette
-- **Inter + JetBrains Mono** typography with bracket labels (`[ IR-01 ]`)
-- **Editorial rule lines** (dotted, between key/value pairs)
-- **Subtle fractal noise grain** overlay — the SYSTEM signature texture
-- **Magnetic UI sound engine** — 432Hz clicks, FM-shimmer hovers, sonar pulses
-- **Light + dark theme toggle** with automatic color-scheme switching
+SYSTEM v0.1 was an editorial skin. **SYSTEM//02 is an x-ray.** Every bracket is a pin label. Every readout is an oscilloscope trace. The meta bar is silkscreen. The grain is board substrate. SYSTEM doesn't dress your app — it exposes its circuits.
-## What's in the skill
+## What ships
```
-system.css ← full design system (drop into any <link rel="stylesheet">)
-system.js ← SYSTEM sound engine + theme helpers (WebAudio-powered)
-SystemTheme.swift ← matching SwiftUI theme for native macOS/iOS apps
-reference/tokens.md ← design-token cheat sheet (colors, type, spacing, sound)
-examples/index.html ← reference HTML demo showing every component
+system-ui/
+ SKILL.md ← this file
+ system.css ← all tokens + components (3 modes, typography, layout)
+ system.js ← runtime — sound engine, CONSOLE popover, grain, theme
+ motherboard.js ← profile-driven PCB renderer (compute/camera/audio/video)
+ SystemTheme.swift ← matching SwiftUI theme (v0.1 tokens, v2.1 update pending)
+ examples/
+ index.html ← full self-contained reference — open in browser
+ reference/
+ tokens.md ← design-token cheat sheet
```
-## When to use — trigger phrases
+## Trigger phrases
-Trigger this skill when the user says any of:
+Apply this skill when the user says any of:
+- "apply SYSTEM to X" / "SYSTEM//02 to X" / "SYSTEM v2 to X"
+- "make this feel like GIR / IRIS / pentboyz / Gualo"
+- "reveal the hardware underneath" / "add the motherboard look"
+- "SILVER mode" / "BLACK mode" / "BARE mode"
+- "add the LED toggles / bracket labels / magnetic sounds"
+- "editorial brutalist" / "editorial-Swiss design language"
-- "apply SYSTEM theme / design to X"
-- "use the IRIS style for X"
-- "make this feel like GIR / pentboyz / my brand"
-- "use Gualo's design language"
-- "SYSTEM-styled page / app / panel"
-- "make it editorial / brutalist like SYSTEM"
-- "import the system.css / SystemTheme.swift"
-- "add the magnetic sound engine / SYSTEM sounds to this site"
-- "neon silver look" or "deep black editorial"
+## Three modes
-Also trigger when the user references any SYSTEM concept by name — brackets, ruled-lines, noise-grain, the `[ ... ]` label style.
+| Mode | Palette | Vibe |
+|------|---------|------|
+| `SILVER` | Neon silver `#C7CCD1 → #0A0C10` | Light · editorial print · hospital-flicker clean |
+| `BLACK` | Deep black `#0A0A0C → #F4F4F8` | Dark · cinematic · terminal |
+| `BARE` | Deep PCB green `#0B2A22` + smoked-silver glass | Skin peeled off · motherboard fully visible through transparent hardware |
-## Usage — Web (HTML / React / CEP panel)
+Set via `data-theme="silver|black|bare"` on `<html>`.
-### 1. Import the CSS + JS
+In `BARE`, panels use `rgba(175,182,190,0.22)` smoked glass + `backdrop-filter: blur(14px)` — the motherboard lives beneath. Ambient motherboard opacity per mode: silver `0.08` · black `0.04` · bare `1.0`.
+## Typography
-```html
+
+- **Primary**: `Inter` (wght 400/500/600/700/800) with `font-feature-settings: "ss01", "cv11", "cv05"` for the sharp grotesque Geist-like alternates
+- **Mono**: `IBM Plex Mono` (wght 400/500)
+- **Google Fonts link**: baked into CSS preamble
-<!DOCTYPE html>
+
-<html lang="en" data-theme="light"> <!-- or "dark" -->
+## The CONSOLE
-<head>
+
+One gear-icon button in the meta bar opens a frosted popover with:
+- `MODE` — SILVER / BLACK / BARE
+- `SOUND` — ON / OFF
+- `GRAIN` — ON / OFF
- <link rel="stylesheet" href="/path/to/system.css">
+
+Board profile is **not** user-selectable — it auto-picks per target app (see below).
-</head>
+
+## Motherboard profile system
-<body>
+
- <!-- your content -->
+The skill renders a live PCB underneath the UI with amber traces, gold solder pads, chip packages (silkscreen labels), SMD components (red/green/black), and signal pulses traveling Manhattan-routed bus lanes.
- <script src="/path/to/system.js"></script>
+
+When Claude applies the skill, it picks a profile matching the target app:
-</body>
+
+| 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 cap density | music, audio, DSP, DAW, synths |
+| `video` | GPU + 4 VRAM + HDMI + DP | video editing, render, streaming |
-</html>
+
+Add more profiles by editing the `PROFILES` object in `motherboard.js`. Each profile has chips (gridded on 12×8), bus connections between them (lanes + side), and SMD density.
-```
+
+In the standalone demo (`examples/index.html`) the profile randomizes on load.
-For **Next.js**, copy `system.css` to `src/app/system.css` and import it in your root `layout.tsx`. Copy `system.js` to `public/system.js` and load via `<Script src="/system.js" strategy="afterInteractive" />`.
+## Apply to a web project
-For a **CEP panel**, copy both files to `client/` and link from `index.html`.
-
+```html
-### 2. Use the components
-
+<!DOCTYPE html>
-The CSS defines classes for the complete component library:
+<html data-theme="silver">
-
+<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">
-```html
+ <link rel="stylesheet" href="/path/to/system.css">
-<!-- Typography scale -->
-<h1 class="display">IRIS</h1> <!-- huge brand display -->
-<h2 class="heading">PRODUCT</h2> <!-- section heading -->
-<p class="body-text">Description</p> <!-- body -->
-<span class="mono">[ IR-01 ]</span> <!-- mono label -->
-<span class="bracket">V. 001</span> <!-- bracket label -->
-
+</head>
-<!-- Meta bar (header strip with brackets + date + buttons) -->
-<div class="sys-meta-bar mono">
- <div class="meta-left">
- <span class="bracket">[ GUALO HAWES ]</span>
- <span>10/04/26</span>
- <span>PAGE N/A</span>
- </div>
- <div class="dotted-rule"></div>
- <div class="meta-right">
- <span class="bracket">[ IR-01 ]</span>
- <span>V. 001</span>
- <button class="sys-btn-small">DARK</button>
- </div>
-</div>
-
+<body>
-<!-- Ruled line (editorial key-value with dotted rule between) -->
-<div class="ruled-line">
- <span class="key">PRODUCT</span>
- <div class="dots"></div>
- <span class="value">CREATIVE TOOL</span>
-</div>
+ <canvas class="mb-canvas" id="mb"></canvas>
+ <canvas id="grain"></canvas>
-<!-- Card grid -->
-<div class="card-grid">
- <div class="sys-card" data-sys="click">
- <div class="mono">[ 001 ]</div>
- <div class="heading card-title">CANVAS</div>
- <div class="card-desc">Infinite board.</div>
- </div>
-</div>
+ <!-- Your UI with SYSTEM classes — see examples/index.html for the vocabulary -->
-<!-- Primary button -->
-<button class="sys-btn sys-btn-primary" data-sys="click">DOWNLOAD</button>
-```
+ <script src="/path/to/system.js"></script>
+ <script src="/path/to/motherboard.js"></script>
-
+</body>
-### 3. Theme toggle
-
+</html>
-```js
-// Toggle light ↔ dark (persists via data-theme attribute on <html>)
-const isDark = SYSTEM.toggleTheme(); // returns new state
-
+```
-// Toggle sound on/off
-const soundOn = SYSTEM.toggleSound(); // returns new state
-// Play a specific sound manually
-SYSTEM.click(); // magnetic pulse — for clicks
-SYSTEM.hover(); // FM shimmer — for hovers
-SYSTEM.focus(); // sonar resonance — for focus/enter
-SYSTEM.enter(); // harmonic bloom — for enter/transitions
-SYSTEM.toggle(); // phase beat — for toggles
+For **Next.js**: drop `system.css` into `src/app/system.css` and import in root `layout.tsx`. Drop `system.js` + `motherboard.js` into `public/` and load with `<Script src="/system.js" strategy="afterInteractive" />`.
-```
+
+For a **CEP panel**: copy all files to `client/` and link from `index.html`.
-### 4. Auto-wired sounds
+## Component vocabulary
-Any element with `data-sys="click"` auto-plays `SYSTEM.click()` on click. The system.js sets up delegated listeners so you don't have to wire each element manually. Supported:
+- **Meta bar**: top strip — breathing brackets + timestamp + page + CONSOLE gear
+- **Session rail** (left, 220px): live telemetry — ID, uptime, CPU, MEM, NET LED, sparklines
+- **Stacked meta card**: no box, just ruled lines + dotted key/value rows; the typography IS the card
+- **Single-pill button** (`.sys-btn`): label + mono suffix (`DOWNLOAD V.2.0`); 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 below
+- **Hairline underscore input** (`.input-field`): no box, just baseline, block cursor, editorial feel
+- **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
-- `data-sys="click"` → click sound on click
-- `data-sys="hover"` → shimmer on hover
-- `data-sys="focus"` → sonar on focus
-- `data-sys="enter"` → bloom on click
-- `data-sys="toggle"` → beat on click
+## Motion + sound
-## Usage — Native (SwiftUI macOS / iOS)
+- **Motion**: snappy instrument — 100–200ms eases, no springs, tactile hardware feel
+- **Sound**: magnetic 432Hz WebAudio engine — click · hover · toggle · focus · enter · error · success · tick · page. Stereo-pans by pointer X. Auto-wires on any `.sys-btn`, `.pill-group button`, `.toggle`, or `[data-sys]`.
-Copy `SystemTheme.swift` into your Sources folder. Import it and use the `System` namespace:
+## Grain
-```swift
-import SwiftUI
+Separate skill: [`film-grain`](../film-grain/). SYSTEM//02 includes it inline — canvas scrambled every frame at 24fps. NOT a sliding tile. The `overlay` blend at 0.10–0.14 opacity adds filmic texture without obscuring content.
-struct ContentView: View {
- @Environment(\.colorScheme) var scheme
+## Anti-patterns
- var body: some View {
- VStack(spacing: 0) {
- // Meta bar
- HStack {
- BracketLabel(text: "GUALO HAWES")
- Text(DateFormatter.irisDate.string(from: Date()))
- .font(System.Typo.mono())
- .foregroundColor(System.tertiary(scheme))
- Spacer()
- BracketLabel(text: "IR-01")
- }
- .padding(System.Space.md)
- .overlay(SystemDivider(), alignment: .bottom)
+- Never use colors outside the 9-stop palette of the active mode — ONE accent max per page
+- Never rounded corners > 4px on cards (pill controls are the exception at 999px)
+- Never drop shadows or gradients for depth — layered surfaces + dotted rules do that job
+- Never any sans other than Inter, any mono other than IBM Plex Mono
+- Never icons — mono codes + brackets only. (Exception: one gear icon for the CONSOLE, intentional.)
+- Never spring or bounce motion — SYSTEM is hardware, not iOS
+- Never mix SYSTEM with another design system — all-or-nothing
- // Hero
- Text("IRIS")
- .font(System.Typo.display(120))
- .foregroundColor(System.contrast(scheme))
+## Tagline
- // Card
- VStack(alignment: .leading, spacing: System.Space.sm) {
- Text("[ 001 ]").font(System.Typo.mono())
- Text("CANVAS").font(System.Typo.heading(18))
- Text("Infinite board.").font(System.Typo.body(12))
- }
- .systemCard()
+> **Reveals the hardware underneath.**
- // Buttons
- Button("DOWNLOAD") { }.systemButtonPrimary()
- Button("CANCEL") { }.systemButtonSecondary()
-
+## Version
- // Ruled metadata
- RuledLine(key: "PRODUCT", value: "CREATIVE TOOL")
- }
- .systemBackground()
- }
-}
-```
+
+- **v2.0 — April 2026** · SYSTEM//02
-
+- Authored by Gualo Hawes
-The Swift theme provides parallel components: `System.Typo`, `System.Space`, `System.Motion`, `BracketLabel`, `RuledLine`, `SystemDivider`, `.systemCard()`, `.systemButtonPrimary()`, `.systemButtonSecondary()`, `.systemBackground()`, and the `SystemSound` shared audio engine.
+- Fonts: Inter + IBM Plex Mono (Google Fonts / SIL OFL)
+- Sound engine: WebAudio, 432Hz tuning, stereo panner
+- Motherboard: canvas 2D, profile-driven, Manhattan-routed bus traces
-## Design tokens at a glance
-
-### Light mode — "Neon Silver" (default)
-
-| Token | Hex | Use |
-|-------|-----|-----|
-| `--bg` | `#C7CCD1` | page background |
-| `--surface` | `#BFC4CA` | card body |
-| `--elevated` | `#B5BAC1` | elevated panels |
-| `--muted` | `#A0A6AE` | borders, dividers |
-| `--tertiary` | `#7D838C` | mono labels, hints |
-| `--secondary` | `#555B64` | bracket labels |
-| `--primary` | `#3A3F47` | body text |
-| `--heading` | `#1A1D23` | heading text |
-| `--contrast` | `#0A0C10` | display + emphasis |
-
-### Dark mode — "Deep Black"
-
-| Token | Hex |
-|-------|-----|
-| `--bg` | `#0A0A0C` |
-| `--surface` | `#111115` |
-| `--elevated` | `#1A1A20` |
-| `--muted` | `#28282F` |
-| `--tertiary` | `#45454F` |
-| `--secondary` | `#7A7A8C` |
-| `--primary` | `#B0B0C4` |
-| `--heading` | `#DCDCE8` |
-| `--contrast` | `#F0F0F8` |
-
-### Typography
-
-- **Display**: `Inter`, 700 weight, `letter-spacing: -0.04em`, `line-height: 0.82`, uppercase
-- **Heading**: `Inter`, 700, `-0.01em` tracking, uppercase
-- **Body**: `Inter`, 400, 15px, `0.02em` tracking
-- **Mono**: `JetBrains Mono`, 400, 10px, `0.06em` tracking, uppercase
-- **Bracket**: mono inside `[ ... ]` with padding
-
-Google Fonts URL baked into CSS: `Inter + JetBrains Mono`.
-
-### Spacing
-
-`xs 4 · sm 8 · md 16 · lg 32 · xl 64 · xxl 128` (px) — always prefer these tokens; don't introduce custom spacing.
-
-### Motion
-
-- **Fade in**: `ease-out 0.5s`
-- **Fade out**: `ease-in 0.3s`
-- **Hover**: `ease-in-out 0.35s`
-- **Theme switch**: `500ms` cross-fade (background + color)
-
-## Anti-patterns — NEVER do these
-
-- ❌ Use colors outside the 9-stop neon-silver / deep-black palette. ONE accent max per page.
-- ❌ Use rounded corners > 4px on cards. SYSTEM is flat rectangles and thin borders.
-- ❌ Skip the noise grain overlay — it's the signature SYSTEM texture. Always include.
-- ❌ Use heavy drop shadows or gradients for "depth" — use dotted rules + bracket labels + mono metadata instead.
-- ❌ Use a sans-serif other than Inter, or a mono other than JetBrains Mono. The typography IS the brand.
-- ❌ Overload the sound engine — one sound per interaction, magnetic sounds are subtle (-30dB range).
-- ❌ Mix with other design systems. SYSTEM is all-or-nothing for a coherent product.
-
-## Output contract
-
-When the user asks you to apply SYSTEM to a project:
-
-1. **Copy the 3 source files** (`system.css`, `system.js`, `SystemTheme.swift`) into appropriate paths in their project.
-2. **Wire them up** (link/import) per the Usage section above.
-3. **Set `data-theme="light"`** on the `<html>` element (or equivalent) and apply the CSS classes.
-4. **Refactor existing components** to use SYSTEM classes — replace custom buttons/cards/labels with SYSTEM equivalents.
-5. **Report back** — list which files changed, what classes were applied, theme mode (light/dark), and any tokens the user should adjust.
-
-## Version
-
-- **v0.1 — April 2026** (initial release)
-- Authored by Gualo Hawes
-- Fonts: Inter + JetBrains Mono via Google Fonts CDN
-- Sound engine: WebAudio, 432Hz tuning, convolution reverb
-