DEM0NHUB [ SKILLS FOR CLAUDE ]

system-ui

BY @GUALO — 19 DOWNLOADS — UI

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.

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

CLI INSTALL

curl -sS https://dem0n.vip/s/gualo/system-ui/SKILL.md -o ~/.claude/skills/system-ui/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//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 <html>.

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

<!DOCTYPE html>
<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">
  <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 for the vocabulary -->

  <script src="/path/to/system.js"></script>
  <script src="/path/to/motherboard.js"></script>
</body>
</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 <Script src="/system.js" strategy="afterInteractive" />.

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

BADGE

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

VERSIONS

  • 2.2.0 — 59.3 KB — 9d9a967d0226 DIFF
  • 2.1.5 — 57.9 KB — 84914a7edac0 DIFF
  • 2.1.4 — 57.5 KB — 795ded3f7915 DIFF
  • 2.1.3 — 57.2 KB — 52e3e4d32492 DIFF
  • 2.1.2 — 53.2 KB — 38c4ce631a11 DIFF
  • 2.1.1 — 52.4 KB — 3ebff53ee7c7 DIFF
  • 2.1.0 — 49.9 KB — dd8c3dd49bf5 DIFF
  • 2.0.1 — 44.3 KB — 633c9dc8908b DIFF
  • 2.0.0 — 36.6 KB — 0534900fb93b DIFF
  • 0.1.0 — 15.5 KB — 3e86aa8c4121

COMMENTS (0)

LOGIN TO COMMENT