---
name: system-ui
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//02 — Reveals the hardware underneath.
By Gualo Hawes · v2.0 · April 2026.
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 ships
```
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 ← SwiftUI tokens (3 modes + Inter/Plex typo)
SystemV2.swift ← SwiftUI chrome: motherboard canvas · film grain · CONSOLE popover · mode picker. Apply once with `.systemV2Chrome()` at the app root.
examples/
index.html ← full self-contained reference — open in browser
reference/
tokens.md ← design-token cheat sheet
```
## Trigger phrases
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"
## Three modes
| 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 |
Set via `data-theme="silver|black|bare"` on ``.
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
- **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
## The CONSOLE
One gear-icon button in the meta bar opens a frosted popover with:
- `MODE` — SILVER / BLACK / BARE
- `SOUND` — ON / OFF
- `GRAIN` — ON / OFF
Board profile is **not** user-selectable — it auto-picks per target app (see below).
## Motherboard profile system
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.
When Claude applies the skill, it picks a profile matching the target app:
| 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 |
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.
## Apply to a web project
```html
```
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 ``.
For a **CEP panel**: copy all files to `client/` and link from `index.html`.
## Component vocabulary
- **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
## Motion + sound
- **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]`.
## Grain
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.
## Anti-patterns
- 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
## Tagline
> **Reveals the hardware underneath.**
## Version
- **v2.0 — April 2026** · SYSTEM//02
- Authored by Gualo Hawes
- 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