Cybersteel is a retrofuturist design system built in direct opposition to modern "fluffy, bloated, web slop" software. It channels the excitement and optimism of early computing — the era when a computer felt like a portal to the future, not a distraction machine.

The system is grounded in three technical principles:

Rock-solid reliability — nothing crashes, flickers, or stutters
High performance — things load instantly, no layout shifts, no spinner theatre
Radical directness — do not waste the user's time; get the job done and get out of the way

The visual language is a direct expression of these values. It is not decoration for its own sake — every visual choice maps to a technical or philosophical intent.

Retrofuturist inspirations:

Art Deco (1920s–40s): geometric precision, gold ornament, symmetry, angular forms
Gruvbox color theme: warm dark backgrounds, muted earth tones, vivid accent colors
Fallout game series: amber CRT glow, terminal aesthetics, atomic-age optimism

Sources provided: None (this design system was created from description only). No Figma links, codebases, or existing assets were supplied.

CONTENT FUNDAMENTALS

Voice & Tone

Direct, imperative, technical. Address the user as a capable adult. No hand-holding.
Second person ("you"), present tense. "Your build failed." Not "It looks like there may have been an issue with your build."
No filler words, no exclamation points, no emoji. Cybersteel copy never says "Great job!" or "Looks like something went wrong 😬"
Sparse. Every word must earn its place. Delete the adjectives. Delete "currently." Delete "simply."
Confident. No hedging ("might," "perhaps," "it seems"). State facts.
Technical vocabulary is welcomed, not dumbed down. Users are professionals.

Casing

UI labels: Title Case for navigation, Sentence case for body, ALL CAPS for status indicators and section headers
Headings: Title Case preferred at H1/H2, sentence case for H3+
Buttons: ALL CAPS or Title Case, never mixed

Examples of Good Cybersteel Copy

BUILD COMPLETE — 1.4s ✓ vs. Your build finished successfully! ✗
No results. ✓ vs. Hmm, we couldn't find anything matching that query 🔍 ✗
Access denied. ✓ vs. Oops! It looks like you don't have permission to view this. ✗
47 errors. Fix them. ✓ vs. There are some issues we need to address together 😅 ✗

What Cybersteel Never Says

"Oops", "Whoops", "Uh oh", "Hmm"
"We're working on it", "Bear with us"
"Looks like...", "It seems like..."
"Please don't hesitate to..."
Emoji of any kind in product UI

VISUAL FOUNDATIONS

Color

Based on the Gruvbox palette — warm, dark, earthy. Not cool blue-grey like modern dark modes. The warmth evokes old paper, amber screens, and aged metal.

Backgrounds: Very dark warm browns/blacks. Not pure #000000 — always warm.
Foreground: Warm cream/ivory, never pure white
Accent — Gold: The signature color. Art Deco gold, amber terminal glow. Used sparingly: borders, highlights, interactive states.
Accent — Red: Danger, errors, critical alerts
Accent — Green: Success, safe, complete
Accent — Blue/Teal: Info, links, cool technical elements
Accent — Orange: Warnings, in-progress, hot paths
All accent colors have a dim (bg-facing) and bright (fg-facing) variant

See styles.css for all tokens.

Typography

Primary brand typeface: IBM Plex Sans. Used for display, body, and condensed roles by default. Self-hosted from /fonts (woff2). Weights available: 300, 400, 500, 600, 700 (plus 300/400/500 italic). SIL OFL — free for commercial and embedded use.

Primary monospace: IBM Plex Mono. Used for --font-mono — code, terminal output, data values, timestamps, and any tabular or log-like content where character alignment matters. Same designer, same skeletal proportions, so it sits cleanly next to Plex Sans on the same screen. Same weights, same license, same self-hosting.

Three semantic roles:

Display (--font-display): Titles, hero text, section headers. → Plex Sans, 600–700 weight, ALL CAPS with wide tracking at H1/H2.
Body (--font-body, also --font-condensed): UI text, labels, descriptions, prose. → Plex Sans, 400–500.
Mono (--font-mono): Code, terminal output, data values, timestamps. → Plex Mono.

Mono mode (opt-in)

For surfaces where the terminal aesthetic IS the point — consoles, status dashboards, IDE-like internal tools, hardware-grade hero moments — flip the whole surface into Plex Mono with the .mono-mode class. Display, body, and condensed all resolve to Plex Mono; structural CSS is unchanged.

<body class="mono-mode"> … </body>

Or scope it manually:

:root { --font-display: var(--font-mono); --font-body: var(--font-mono); --font-condensed: var(--font-mono); }

Do not introduce Orbitron, Barlow, Share Tech Mono, or any other family. If something looks like it needs a different typeface, the answer is weight, size, tracking, casing — or a deliberate switch to Mono mode for the whole surface.

Type scale is based on a 1.25 modular ratio. Minimum body size: 14px (web), 12pt (print).

Spacing

8px base grid. All spacing tokens are multiples of 4px, with the main scale in multiples of 8px.

Backgrounds

Default: dark warm bg, no images
Feature sections: translucent gradient overlays (warm amber/gold tints at low opacity, ~5–12%)
Cards: slightly lighter bg than page, with a 1px warm border
NO full-bleed photography unless explicitly specified
Subtle geometric Art Deco texture possible via CSS (repeating-linear-gradient patterns)
Scan line overlays at very low opacity (~3–5%) acceptable for terminal-style elements

Gradients

Simple, translucent, warm-toned
Direction: top-to-bottom or diagonal (135deg)
Used as overlays, not solid fills
Colors: gold/amber → transparent, or bg-dark → bg-darker
Never rainbow, never cool-toned, never noisy

Borders

1px solid is the standard — always visible, always crisp
Color: --border (warm mid-grey) for structural, --gold-dim for decorative/Art Deco accents
Hairline Art Deco ornament: thin double-line borders (border-bottom: 1px + offset) for headings
Corner radius: 0–4px max. Sharp corners preferred. Cybersteel does not round its corners like a toy.

Cards

background: --bg-active (one step lighter than page)
border: 1px solid --border
border-radius: 2px
Subtle inner shadow on hover: inset 0 0 0 1px --gold-dim
No drop shadows — flat, structural, mechanical

Animation & Motion

Fast and purposeful. No decorative animations.
Transitions: 150ms ease-out (UI state changes), 80ms linear (cursor/immediate)
No bounce, no spring, no elastic
No enter/exit animations on simple UI elements
Allowed: fade-in on modals/overlays (200ms ease), scanline flicker on terminal elements
Hover: color shift only — no scale, no float, no glow explosion

Hover & Press States

Hover: text/icon brightens (fg2 → fg1 → fg0 progression), border lightens
Press/Active: slight background darken (bg1 → bg0), border becomes gold
Focus: 1px gold outline, 2px offset — crisp, not blurry
No box-shadow: 0 0 20px gold glow effects

Iconography

Geometric, minimal, monochromatic
Stroke-based (not filled)
Lucide Icons (CDN) as primary icon set — closest to the aesthetic
No emoji in UI; unicode geometric characters (▶ ■ ◆ ▲) acceptable as decorative elements
See ICONOGRAPHY section below

Imagery

Minimal imagery in UI
When used: high contrast, desaturated or warm-toned, grain optional
No stock photo cheerfulness
Amber/sepia toning preferred

Transparency & Blur

backdrop-filter: blur() used sparingly — overlays/modals only
Translucent surfaces: background: rgba(var(--bg-surface-rgb), 0.85)
Never used purely decoratively

Layout

Fixed sidebar widths (e.g. 240px, 280px)
8-column or 12-column grid for content areas
Generous whitespace within dense information — breathe between groups, not within them
Fixed header/nav is acceptable; sticky sidebars acceptable
No carousels, no infinite scroll decorativeness

ICONOGRAPHY

Primary set: Lucide Icons (https://unpkg.com/lucide@latest/dist/umd/lucide.min.js)

Stroke-based, 24px grid, 1.5px stroke weight by default
Matches the precise, geometric character of the design system
Scale to 16px (compact), 20px (default), 24px (prominent)
Color: inherit from text context — no separate icon colors unless semantic (red for error, etc.)

Substitution flag: No custom icon font was provided. Lucide is used as the nearest available match. If Cybersteel has a proprietary icon set, replace Lucide references in ui_kits/ and update this section.

Supplementary unicode glyphs (Art Deco ornament):

◆ ◇ — diamond separator
▸ ▾ — directional indicators
■ □ — toggle/status squares
═ ║ ╔ ╗ ╚ ╝ — box-drawing for terminal chrome
· — interpunct as list separator

Never use emoji in product UI.

FILE INDEX

README.md                        ← This file
SKILL.md                         ← Agent skill definition
styles.css              ← All CSS custom properties (colors, type, spacing, effects)

assets/
  texture-scanline.svg           ← Scanline texture overlay

preview/
  colors-base.html               ← Base background/foreground palette
  colors-accents.html            ← Accent color swatches
  colors-semantic.html          ← Semantic color roles
  type-display.html              ← Display typeface specimen (Plex Sans)
  type-body.html                 ← Body type scale (Plex Sans)
  type-mono.html                 ← Monospace / terminal specimen (Plex Mono)
  type-sans.html                 ← Sans vs. Mono mode comparison
  spacing-tokens.html            ← Spacing scale
  borders-radius.html            ← Border styles and radius tokens
  shadows-elevation.html         ← Shadow system
  components-buttons.html        ← Button variants and states
  components-inputs.html         ← Form input states
  components-cards.html          ← Card components
  components-badges.html         ← Badges and status indicators
  components-nav.html            ← Navigation patterns

ui_kits/
  app/
    README.md                    ← UI kit notes and component list
    index.html                   ← Interactive app prototype
    Layout.jsx                   ← Shell: sidebar + topbar + content area
    Terminal.jsx                 ← Terminal/console component
    DataTable.jsx                ← Dense data table
    StatusBar.jsx                ← Bottom status bar
    CommandPalette.jsx           ← Keyboard-driven command palette

README.md Unescape Escape

Cybersteel Design System

Overview