← Back to Skills / Marketplace / mech
SKL · 24PRO

Mech.

A light-background sci-fi HUD aesthetic built on clinical precision — thin line work, targeting reticles, dot-matrix numerals, and a single warning-light accent color. The opposite of every other sci-fi UI style, and exactly why it stops people.

UNLOCK WITH PRO →
● Live preview · Mech demo
This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

Mech is the sci-fi HUD aesthetic that nobody expects — light instead of dark, clinical instead of glowing, precise instead of dramatic. Think the cockpit display of an Evangelion unit, a military drone feed, or a near-future aerospace instrument panel: white and cool-gray surfaces covered in thin line work, circular targeting reticles, dot-matrix readouts, and a single accent color that only shows up when something actually matters. Every other sci-fi UI style goes dark. This one goes the opposite direction, and that's exactly why it stops people.

● Looks Like
Neon Genesis Evangelion's cockpit interfacesPacific Rim's Jaeger displaysMilitary drone operator screensNear-future aviation HUDsThe UI concepts you see in high-end motion graphics reelsGundam's instrument panelsAerospace engineering visualization software
02 · Best For / Avoid If
＋ Best For
+Dashboards and monitoring tools where precision is the whole point
+Data visualization platforms with lots of real-time numbers
+Drone, robotics, or hardware product interfaces
+Security and operations tools
+Any app where the user needs to feel like they're operating something powerful
+Portfolios for engineers, product designers, and technical founders who want something that looks genuinely different
× Avoid If
×Your audience needs warmth or approachability — this aesthetic is deliberately clinical and doesn't do cozy
×Your product is consumer-facing in a casual context — shopping, social, entertainment
×You have a lot of text content to display — the aesthetic works for data and numbers, not long-form reading
×Dark mode is non-negotiable for your users — Mech is almost entirely a light-background system
03 · Design Philosophy
01

Light is the unexpected choice

Every sci-fi UI defaults to dark because darkness feels futuristic. Mech goes the other way, and that contrast is where its visual power comes from. A near-white background forces every element to earn its place through precision and line weight rather than glow and color, which produces interfaces that feel more like engineering instruments than movie props.

02

The circle is the primary shape

Radial elements — targeting reticles, arc gauges, circular progress rings, rotating dials — are the defining structural element of this aesthetic. They're not decoration; they're the primary way information is organized and displayed. A Mech interface reads circular data naturally the same way other interfaces read left-to-right text, and that unfamiliar reading pattern is part of what makes it feel genuinely technical.

03

One accent color, used like a warning light

The orange-red accent in Mech isn't a brand color — it's a signal. It appears on active states, critical values, and the single most important interactive element on any given screen. Everything else stays in grays and whites. The restraint is what gives the accent its weight; when it appears, your eye goes there immediately without any conscious effort.

04 · Use With Claude / Cursor
Claude
01Open your Claude project
02Click 'Add files' in the Project Knowledge panel
03Drop in SKILL.md and DESIGN.md
04Start a new chat in the project — Claude follows the spec
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — Cursor references both files per request
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Overloading the radial elements
Circular gauges and reticles are striking the first time and exhausting if every metric gets one. Reserve the full radial treatment for your two or three most important data points and use simpler horizontal bars for everything else.
! WARNING
Forgetting that empty space is doing work
The screenshots that make this aesthetic look incredible are mostly empty. All that white space isn't wasted — it's what makes the precise technical elements read as intentional rather than sparse. Fight the urge to fill it.
! WARNING
Using the accent color more than three times per screen
The moment it shows up on five or six elements, it stops being a signal and becomes just another color. Count the times you're using it and cut until it only appears where something genuinely needs attention.
! WARNING
Wrong typography
This aesthetic lives on condensed monospace fonts, tiny annotation text, and dot-matrix style numerals for big data displays. Standard sans-serif body fonts completely break the atmosphere. Ask Claude specifically for monospace labels, condensed display numbers, and annotation-style text at very small sizes.
● 07 · Download

Two files. That's it.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →