diff --git a/README.md b/README.md new file mode 100644 index 0000000..b1d27fe --- /dev/null +++ b/README.md @@ -0,0 +1,225 @@ +# Cybersteel Design System + +## Overview + +**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. + +```html + … +``` + +Or scope it manually: +```css +: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 +``` diff --git a/assets/texture-scanline.svg b/assets/texture-scanline.svg new file mode 100644 index 0000000..e246dd1 --- /dev/null +++ b/assets/texture-scanline.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/fonts/IBMPlexMono-Bold.woff2 b/fonts/IBMPlexMono-Bold.woff2 new file mode 100644 index 0000000..262a671 Binary files /dev/null and b/fonts/IBMPlexMono-Bold.woff2 differ diff --git a/fonts/IBMPlexMono-Italic.woff2 b/fonts/IBMPlexMono-Italic.woff2 new file mode 100644 index 0000000..0e72669 Binary files /dev/null and b/fonts/IBMPlexMono-Italic.woff2 differ diff --git a/fonts/IBMPlexMono-Light.woff2 b/fonts/IBMPlexMono-Light.woff2 new file mode 100644 index 0000000..7e404fe Binary files /dev/null and b/fonts/IBMPlexMono-Light.woff2 differ diff --git a/fonts/IBMPlexMono-LightItalic.woff2 b/fonts/IBMPlexMono-LightItalic.woff2 new file mode 100644 index 0000000..380decc Binary files /dev/null and b/fonts/IBMPlexMono-LightItalic.woff2 differ diff --git a/fonts/IBMPlexMono-Medium.woff2 b/fonts/IBMPlexMono-Medium.woff2 new file mode 100644 index 0000000..99c2610 Binary files /dev/null and b/fonts/IBMPlexMono-Medium.woff2 differ diff --git a/fonts/IBMPlexMono-MediumItalic.woff2 b/fonts/IBMPlexMono-MediumItalic.woff2 new file mode 100644 index 0000000..f534ad6 Binary files /dev/null and b/fonts/IBMPlexMono-MediumItalic.woff2 differ diff --git a/fonts/IBMPlexMono-Regular.woff2 b/fonts/IBMPlexMono-Regular.woff2 new file mode 100644 index 0000000..a6c77d6 Binary files /dev/null and b/fonts/IBMPlexMono-Regular.woff2 differ diff --git a/fonts/IBMPlexMono-SemiBold.woff2 b/fonts/IBMPlexMono-SemiBold.woff2 new file mode 100644 index 0000000..59e4f52 Binary files /dev/null and b/fonts/IBMPlexMono-SemiBold.woff2 differ diff --git a/fonts/IBMPlexSans-Bold.woff2 b/fonts/IBMPlexSans-Bold.woff2 new file mode 100644 index 0000000..953f94f Binary files /dev/null and b/fonts/IBMPlexSans-Bold.woff2 differ diff --git a/fonts/IBMPlexSans-Italic.woff2 b/fonts/IBMPlexSans-Italic.woff2 new file mode 100644 index 0000000..cf026fe Binary files /dev/null and b/fonts/IBMPlexSans-Italic.woff2 differ diff --git a/fonts/IBMPlexSans-Light.woff2 b/fonts/IBMPlexSans-Light.woff2 new file mode 100644 index 0000000..d0a42af Binary files /dev/null and b/fonts/IBMPlexSans-Light.woff2 differ diff --git a/fonts/IBMPlexSans-LightItalic.woff2 b/fonts/IBMPlexSans-LightItalic.woff2 new file mode 100644 index 0000000..bf4bb42 Binary files /dev/null and b/fonts/IBMPlexSans-LightItalic.woff2 differ diff --git a/fonts/IBMPlexSans-Medium.woff2 b/fonts/IBMPlexSans-Medium.woff2 new file mode 100644 index 0000000..6d5527e Binary files /dev/null and b/fonts/IBMPlexSans-Medium.woff2 differ diff --git a/fonts/IBMPlexSans-MediumItalic.woff2 b/fonts/IBMPlexSans-MediumItalic.woff2 new file mode 100644 index 0000000..3c57765 Binary files /dev/null and b/fonts/IBMPlexSans-MediumItalic.woff2 differ diff --git a/fonts/IBMPlexSans-Regular.woff2 b/fonts/IBMPlexSans-Regular.woff2 new file mode 100644 index 0000000..f0ee65d Binary files /dev/null and b/fonts/IBMPlexSans-Regular.woff2 differ diff --git a/fonts/IBMPlexSans-SemiBold.woff2 b/fonts/IBMPlexSans-SemiBold.woff2 new file mode 100644 index 0000000..08c0d5a Binary files /dev/null and b/fonts/IBMPlexSans-SemiBold.woff2 differ diff --git a/preview/borders-radius.html b/preview/borders-radius.html new file mode 100644 index 0000000..159702c --- /dev/null +++ b/preview/borders-radius.html @@ -0,0 +1,155 @@ + + + + + + + + + + + +
+
Section 1 — Shape exploration · buttons · cards · inputs
+ +
+ +
+
Sharp
0px
+
Slight
2px
+
Medium
6px
+
Round
12px
+
Pill
999px
+ + +
Button
+
+
Execute
+
Cancel
+
+
+
Execute
+
Cancel
+
+
+
Execute
+
Cancel
+
+
+
Execute
+
Cancel
+
+
+
Execute
+
Cancel
+
+ + +
Card
+
+
Node Alpha
99.97% uptime
+
+
+
Node Alpha
99.97% uptime
+
+
+
Node Alpha
99.97% uptime
+
+
+
Node Alpha
99.97% uptime
+
+
+
Node Alpha
99.97% uptime
+
+ + +
Input
+
192.168.1.1
+
192.168.1.1
+
192.168.1.1
+
192.168.1.1
+
192.168.1.1
+
+
+ + + + + diff --git a/preview/colors-accents.html b/preview/colors-accents.html new file mode 100644 index 0000000..66486c3 --- /dev/null +++ b/preview/colors-accents.html @@ -0,0 +1,52 @@ + + + + + + + + + +
+
+
+ gold-bright#fabd2f +
+
+
+ gold-dim#d79921 +
+
+
+ gold-muted#b57614 +
+
+
+ amber#ffb000 +
+
+
+
red-bright
+
red-dim
+
green-bright
+
green-dim
+
blue-bright
+
blue-dim
+
+
+
orange-bright
+
orange-dim
+
aqua-bright
+
aqua-dim
+
purple-bright
+
purple-dim
+
+ + diff --git a/preview/colors-base.html b/preview/colors-base.html new file mode 100644 index 0000000..89f99bc --- /dev/null +++ b/preview/colors-base.html @@ -0,0 +1,167 @@ + + + + + + + + + + + +
+
Default pairing
+
+
+
Background
+
+
+
bg-page · #313131
+
+
Page, content area
+
+
+
Foreground
+
+
+
fg-body · #f2e2ba
+
+
Primary body text
+
+
+
Deploy pipeline ready
+
Node 07 offline — failover active
+
+
+
+ + +
+ +
+
Backgrounds
+
+
bg-shell
+
bg-page
+
bg-surface
+
bg-active
+
bg-disabled
+
bg-border
+
+
Foregrounds
+
+
fg-heading
+
fg-body
+
fg-secondary
+
fg-caption
+
fg-muted
+
+
+ + +
+
Text in context
+
+
fg-heading
Heading text
+
fg-body
Primary body — the system is operational
+
fg-secondary
Secondary body — node 07 offline
+
fg-caption
Caption — cluster-01 · us-east-1
+
fg-muted
LABEL · STATUS · TIMESTAMP
+
+
+
+ + +
+
Surface pairings
+
+
+
Overview
fg-heading
+
Topbar / sidebar
fg-muted
+
bg-shell
+
+
+
default
+
Dashboard
fg-body
+
Page content
fg-secondary
+
bg-page
+
+
+
Node Alpha
fg-secondary
+
Cards, panels
fg-caption
+
bg-surface
+
+
+
Selected row
fg-body
+
Hover / active
fg-secondary
+
bg-active
+
+
+
+ + +
+
Edge cases — bg3 & bg4
+
+ +
+
bg-disabled · Disabled surface
+
Deploy pipeline
+
Node offline — action unavailable
+
fg4 only · intentionally muted
+
+ +
+
bg-border · Borders & dividers only
+
+
+
+
Input field border
+
+
+
Never use as a text container background
+
+ +
+
+ + + diff --git a/preview/colors-semantic.html b/preview/colors-semantic.html new file mode 100644 index 0000000..e425040 --- /dev/null +++ b/preview/colors-semantic.html @@ -0,0 +1,188 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StatePropertyPrimarySecondaryDangerSuccess
Default
DefaultBG
--gold-dim
transparent
transparent
transparent
Border
--gold-dim
--border
--red-dim
--green-dim
Text
--bg-shell
--fg-secondary
--red-bright
--green-bright
Hover
HoverBG
--gold-bright
gold 20% tint
red 20% tint
green 20% tint
Border
--gold-bright
--gold-dim
--red-bright
--green-bright
Text
--bg-shell
--fg-body
--fg-body
--fg-body
Press
PressBG
--fg-heading
--gold-bright
--red-bright
--green-bright
Border
--fg-heading
--gold-bright
--red-bright
--green-bright
Text
--bg-shell
#ffffff
#ffffff
#ffffff
+ +
+
Semantic text colors
+
+
+
Success
+
+ ● Online + ✓ Verified + Build complete + --green-bright +
+
+
+
Danger
+
+ ● Error + ✕ Failed + Connection timeout + --red-bright +
+
+
+
Warning
+
+ ● Degraded + Disk usage 84% + Threshold exceeded + --orange-bright +
+
+
+
Info
+
+ ● Running + Heartbeat OK + node-01 + --blue-bright +
+
+
+
Primary
+
+ ● Active + Build #441 + v2.4.1-stable + --gold-bright +
+
+
+
Disabled
+
+ ● Offline + Unavailable + No data + --fg-muted +
+
+
+
+ + + diff --git a/preview/components-badges.html b/preview/components-badges.html new file mode 100644 index 0000000..a51b926 --- /dev/null +++ b/preview/components-badges.html @@ -0,0 +1,79 @@ + + + + + + + + + + +
+
System / connectivity
+
+
Online
+
Offline
+
Degraded
+
Error
+
+
Online = reachable and responding · Offline = unreachable · Degraded = reachable but unhealthy · Error = fault condition
+
+ +
+
Process / job
+
+
Running
+
✓ Complete
+
✕ Failed
+
Pending
+
Warning
+
+
Running = in progress · Complete = finished successfully · Failed = finished with error · Pending = queued · Warning = finished with caveats
+
+ +
+
Labels / tags
+
+
Info
+
v2.4.1
+
Staging
+
Beta
+
Read-only
+
+
+ + + diff --git a/preview/components-buttons.html b/preview/components-buttons.html new file mode 100644 index 0000000..63cff25 --- /dev/null +++ b/preview/components-buttons.html @@ -0,0 +1,75 @@ + + + + + + + + + +
variants
+
+ + + + + + +
+
sizes
+
+ + + +
+ + diff --git a/preview/components-cards.html b/preview/components-cards.html new file mode 100644 index 0000000..5d4d571 --- /dev/null +++ b/preview/components-cards.html @@ -0,0 +1,136 @@ + + + + + + + + + +
Static cards (display only)
+
+
Node Alpha
+
cluster-01 · us-east-1
+
99.97%
+
Uptime — 30d
+
+
+
Alert
+
node-07 · 09:41:02Z
+
Connection timeout. Failover initiated.
+
Critical
+
+ +
Clickable cards (hover + press)
+ +
Deploy #441
+
main · a3f9c12e · 14s ago
+
Production build deployed. 0 errors.
+
Complete
+ +
+
Open Console
+
cluster-01 · 12 active sessions
+
Launch terminal session in this cluster.
+
+ +
+
Card states
+ +
+
Default
Static surface — no hover effect, no cursor change.
+
Background
--bg-surface + --gradient-card
+
Border
1px solid --border
+
+ +
+
Clickable
Apply .clickable, role="button", or use <a>/<button> — opts the card into hover + press.
+
+ +
+
Hover
border --gold-dim · halo 0 0 0 3px rgba(215, 153, 33, 0.35)
+
— width
3px, grows OUTWARD from card edge
+
— opacity
35% — translucent so the halo reads as a soft accent, not a hard second ring
+
— transition
--transition-hover (150ms ease-out)
+
+ +
+
Press
background + border --gold-bright · text #fff · halo cleared
+
— transition
--transition-press (55ms ease-out) on enter, --transition-hover on release
+
— mirrors
.btn-secondary:active — same press treatment as ghost-style buttons
+
+ +
The hover halo only appears when a card is actually interactive. Surface cards (data display) get no hover effect at all — clickable cards opt in via class or semantic element. Press fills with gold-bright to match the secondary-button click pattern, so a clicked card reads consistently with the rest of the interactive system.
+
+ + diff --git a/preview/components-inputs.html b/preview/components-inputs.html new file mode 100644 index 0000000..31e02d3 --- /dev/null +++ b/preview/components-inputs.html @@ -0,0 +1,102 @@ + + + + + + + + + +
+ + +
IPv4 or hostname
+
+
+ + +
+
+ + +
Key format invalid.
+
+
+ + +
Verified.
+
+ +
+
Focus state — outward halo, semantic color
+
Width
3px, expands outward from field edge
+
Outline
suppressed (outline: none) to prevent stacking with global :focus-visible ring
+
Transition
--transition-hover (150ms ease-out) on border-color + box-shadow
+ +
+
Default
border --gold-bright · halo rgba(215, 153, 33, 0.35)
+
35% opacity — matches card hover. Used for neutral fields with no semantic state.
+ +
Invalid
border --red-bright · halo rgba(204, 36, 29, 0.5)
+
50% opacity — keeps the red signal on focus rather than overriding to gold.
+ +
Verified
border --green-bright · halo rgba(152, 151, 26, 0.5)
+
50% opacity — keeps the green signal on focus rather than overriding to gold.
+
+ +
Semantic states (invalid/verified) preserve their color through focus so meaning doesn't flip on interaction. Their dim variants read quieter than gold-dim at the same opacity, so they're bumped to 50% to match perceived intensity.
+
+ + diff --git a/preview/components-nav.html b/preview/components-nav.html new file mode 100644 index 0000000..9e5af96 --- /dev/null +++ b/preview/components-nav.html @@ -0,0 +1,259 @@ + + + + + +Navigation — Cybersteel + + + + + +
+
Component · Navigation
+

Navigation

+

Selection lights up the existing structural rule rather than introducing new chrome. The topbar's bottom divider becomes gold under the active tab; the sidebar leans entirely on typographic contrast — cream & bold for active, muted for the rest.

+
+ + +
+
+
01
+
Top Tabs
+
Lit divider — the bottom rule glows gold under the active tab.
+
✓ Locked
+
+
+
+
+
Cybersteel
+
Dashboard
+
Nodes
+
Builds
+
Alerts
+
Logs
+
Settings
+
+
CONTENT
+
+
+
+ + +
+
+
02
+
Side Nav
+
Bare brightness — active item is cream & bold; rest are muted.
+
✓ Locked
+
+
+
+ +
CONTENT
+
+
+
+ + + diff --git a/preview/components-states.html b/preview/components-states.html new file mode 100644 index 0000000..fdf6ca7 --- /dev/null +++ b/preview/components-states.html @@ -0,0 +1,238 @@ + + + + + + + + + + +
+
Interactive states — press and hold any button to see lit state
+ +
+
Primary
+ + + +
Press: --fg-heading fill (warm cream)
Text stays dark — readable
+
+ +
+
Secondary
+ + + +
Hover: gold tint + text brightens
Press: gold-bright fill + white text
+
+ +
+
Danger
+ + +
Hover: red tint + text brightens
Press: red-bright fill + white text
+
+ +
+
Success
+ + +
Hover: green tint + text brightens
Press: green-bright fill + white text
+
+ +
+
Disabled
+ +
Opacity 0.5
pointer-events: none
+
+ +
+
Loading
+ +
Spinner + neutral
cursor: not-allowed
+
+
+ +
+
Timing — press: 55ms ease-out · release: 180ms ease-out
+
+
+ :active → transition: 55ms ease-out
+ release → transition: 180ms ease-out
+ :hover → transition: 150ms ease-out +
+
+ Lit color = --fg-heading (#fbf1c7)
+ Text = --bg-shell (#1d2021)
+ Ratio ≈ 12:1 — passes AAA +
+
+
+ + + diff --git a/preview/index.html b/preview/index.html new file mode 100644 index 0000000..137a54d --- /dev/null +++ b/preview/index.html @@ -0,0 +1,965 @@ + + + + + + +Preview Index — Cybersteel + + + + + + +
+
+ + Cybersteel + Preview Index + +
+ + Reference set online +
+
+ +
+
+
Design system reference
+

Preview
Index

+

+ Explore the complete visual language through 16 focused references. + Start with the foundations, inspect the type system, then move through structure, + effects, components, and live interaction states. +

+
+ +
+
16Reference pages
+
04System groups
+
07Live demos
+
00Remote assets
+
+
+
+ +
+
+
+ + + +
+ + +
+
+ +
+ + + + + + + + +
+ No matching references. + Clear the search or use another system term. +
+
+ + + + + + diff --git a/preview/shadows-elevation.html b/preview/shadows-elevation.html new file mode 100644 index 0000000..1911999 --- /dev/null +++ b/preview/shadows-elevation.html @@ -0,0 +1,86 @@ + + + + + + + + + + +
+
Elevation — bg + border only · no drop shadows
+
+
+
Page
bg0 · no border
+
+
+
Card / raised
bg1 · --border
+
+
+
Hover
bg1 · gold-dim
+
+
+
Active / press
bg2 · gold-dim
+
+
+
Overlay / modal
bg-hard · gold-dim
+
+
+
+ +
+
Interactive card — hover and press to see state changes
+
+
+
Node Alpha
+
99.97% · us-east-1
+
+
+ Default: bg1 + --border
+ Hover:   bg1 + gold-dim border
+ Press:   bg2 + gold-dim border
+
+ No shadow at any state.
+ Focus: 2px gold outline. +
+
+
+ + + diff --git a/preview/spacing-tokens.html b/preview/spacing-tokens.html new file mode 100644 index 0000000..e7e0a58 --- /dev/null +++ b/preview/spacing-tokens.html @@ -0,0 +1,280 @@ + + + + + + + + + + +
Spacing tokens
+ + +
+ +
Micro — component internals
+ +
+
--space-chip
+
4px
+
+
badge padding · icon–label gap · border offsets · micro nudges
+
+
+
--space-element
+
8px
+
+
chip/pill padding · inline gaps · icon inset · tight row spacing
+
+
+
--space-component
+
12px
+
+
button vertical padding · input inset · list row gap · label-to-field
+
+ + +
Component — internal layout
+ +
+
--space-group
+
16px
+
+
card inset · input horizontal padding · form field gap · default gap
+
+
+
--space-cluster
+
20px
+
+
grouped nav items · related form sections · compact panel inset
+
+
+
--space-panel
+
24px
+
+
sidebar/panel inset · modal body · drawer padding · section subheader gap
+
+ + +
Layout — between components & sections
+ +
+
--space-block
+
32px
+
+
content block gaps · card grid gutter · toolbar height
+
+
+
--space-content
+
40px
+
+
major content group spacing · dialog padding · sub-section gap
+
+
+
--space-section
+
48px
+
+
page section breaks · feature group dividers · hero subheading gap
+
+ + +
Page — large layout & full-bleed
+ +
+
--space-region
+
64px
+
+
hero vertical padding · layout area spacing · large feature gaps
+
+
+
--space-zone
+
80px
+
+
page-scale layout spacing · full-width section vertical rhythm
+
+
+
--space-canvas
+
96px
+
+
page margins · full-bleed hero top padding · maximum layout gutter
+
+
+ + +
+
In use
+
+ + +
+
chip · space-chip + space-element
+
+ + +
+ space-chip + → +
+
+ ONLINE +
+ + +
+ space-element + → +
▶
+
+ Deploy +
+ +
+
+ + +
+
input · space-component label→field
+
+
Target node
+
+
+ ← space-component (12px) +
+
cluster-01 · us-east-1
+
+
+ + +
+
inset comparison · space-group (16px) vs space-panel (24px)
+
+ + +
+
space-group · compact card
+
+
+
+
+
+
Node Alpha — 07
+
CPU 34% · MEM 61%
+
+
+
+
+
← 16px on all sides
+
+ + +
+
space-panel · open panel
+
+
+
+
+
+
System status
+
PipelineREADY
+
Node 07OFFLINE
+
+
+
+
+
← 24px on all sides
+
+ +
+
+ + +
+
page sections · space-section (48px between blocks)
+
+
+
Overview
+
Cluster health · 12 nodes active
+
+
+
+
space-section · 48px
+
+
+
Deploy log
+
Last deploy 14 min ago · pipeline v2.4.1
+
+
+
+ +
+
+ + + diff --git a/preview/type-body.html b/preview/type-body.html new file mode 100644 index 0000000..b4c4ea9 --- /dev/null +++ b/preview/type-body.html @@ -0,0 +1,23 @@ + + + + + + + + + +
15px / 400 sans
The system is operational. All services nominal.
+
13px / 400 sans
Secondary labels, captions, helper text.
+
18px / 600 sans
Section Title
+
11px / 600 / caps mono
Status · Active · Module · Online
+
13px / 300 sans
Fine print, timestamps, version strings — v2.4.1-stable
+ + diff --git a/preview/type-display.html b/preview/type-display.html new file mode 100644 index 0000000..6deb895 --- /dev/null +++ b/preview/type-display.html @@ -0,0 +1,73 @@ + + + + + + + + + +
+
Display · 48px · 700 · IBM Plex Sans
+
Cybersteel
+
+
+
Display · 28px · 700 · uppercase
+
Build Complete
+
+
+
Subheading · 18px · 600
+
Deploy pipeline ready
+
+
+
Body · 14px · 400 · Plex Sans
+
Node 07 offline — failover to node 08 complete. All traffic rerouted.
+
+
+
Light · 13px · 300
+
Secondary labels, helper text, timestamps
+
+ +
+
◆ Display · IBM Plex Sans
+

+ Display, body, and condensed roles all resolve to IBM Plex Sans by default. + For console / status / hardware-grade surfaces, flip to Mono mode with + class="mono-mode" on the surface root — see type-sans.html. + --font-mono is always Plex Mono for code, data, and timestamps. +

+
+ + diff --git a/preview/type-mono.html b/preview/type-mono.html new file mode 100644 index 0000000..33f5ebf --- /dev/null +++ b/preview/type-mono.html @@ -0,0 +1,31 @@ + + + + + + + + + +
+
IBM Plex Mono — terminal / build output
+
$ cybersteel build --release
+
compiling core [████████████] 100%
+
linking 1.4s
+
BUILD COMPLETE — 0 errors · 0 warnings
+
+
+
Log levels · timestamps · data values
+
09:41:00 INFO node-01 heartbeat OK · 2ms
+
09:41:01 WARN node-03 disk usage 84%
+
09:41:02 ERR node-07 connection timeout
+
+ + diff --git a/preview/type-sans.html b/preview/type-sans.html new file mode 100644 index 0000000..85b485b --- /dev/null +++ b/preview/type-sans.html @@ -0,0 +1,229 @@ + + + + + + + + + + +
+

◆ Type Modes · Sans vs Mono

+
Sans · Default · Mono · Opt-in
+
+ +
+ +
+
+ Plex Sans · default + DEFAULT +
+ +
+
Display · 32 / 700
+
Build Complete
+
+
+
H2 · 22 / 600 · caps
+
Deploy Pipeline
+
+
+
Body · 15 / 400
+
Node 07 offline. Failover to node 08 complete. All inbound traffic rerouted within 1.4 seconds. No data loss recorded.
+
+
+
Caption · 11 / 600 · caps · mono
+
Status · Active · 1.4s
+
+
+ +
+
+ Plex Mono · alt + OPT-IN +
+ +
+
Display · 32 / 700
+
Build Complete
+
+
+
H2 · 22 / 600 · caps
+
Deploy Pipeline
+
+
+
Body · 14 / 400
+
Node 07 offline. Failover to node 08 complete. All inbound traffic rerouted within 1.4 seconds. No data loss recorded.
+
+
+
Caption · 11 / 600 · caps
+
Status · Active · 1.4s
+
+
+ +
+ +
+
◇ Default (Sans)
+

IBM Plex Sans is the primary face. Display, body, and condensed roles all resolve to it by default. Use it for documentation, dashboards, settings, forms, marketing pages, and any prose-heavy or proportional-label-heavy surface.

+

--font-mono is always IBM Plex Mono — code blocks, terminal output, data values, and timestamps stay monospaced regardless of mode.

+
+ +
+
◇ When to switch to Mono mode
+ +
+ +
+
◇ How to switch
+

Apply .mono-mode at the surface root. Children inherit. Display, body, and condensed all flip to Plex Mono.

+
// whole app +<body class="mono-mode"> … </body> + +// or scope manually +:root { + --font-display: var(--font-mono); + --font-body: var(--font-mono); + --font-condensed: var(--font-mono); +}
+
+ +
+
◇ Rule
+

One mode per application (or per major surface). Do not mix Sans and Mono body text on the same screen — the rhythm clash breaks the system. Mono for code, data, status badges, and timestamps is always allowed and expected, even in Sans surfaces.

+
+ + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..30cedca --- /dev/null +++ b/styles.css @@ -0,0 +1,519 @@ +/* ============================================================ + CYBERSTEEL DESIGN SYSTEM — styles.css + Retrofuturist. Technical. Direct. + Gruvbox-derived palette + Art Deco type system. + ============================================================ */ + +/* ============================================================ + BRAND FONTS — IBM PLEX SANS + IBM PLEX MONO + + Plex Sans is the PRIMARY brand face — used for display, body, + and condensed roles. Proportional, readable, professional; + carries the Cybersteel voice into long-form and dense UI. + + Plex Mono is the PRIMARY MONOSPACE face — used for code, + terminal output, data values, timestamps, and any tabular or + log-like content where character alignment matters. It is also + the right pick for hardware-grade hero / status moments where + the terminal aesthetic is the point. + + Both faces share the same designer (IBM) and the same skeletal + proportions, so they sit together cleanly on the same screen + (Sans for prose + labels, Mono for code + status). + + Both families: SIL OFL — free for commercial and embedded use. + Self-hosted from /fonts (woff2). No external CDN dependency. + ============================================================ */ + +/* Light 300 */ +@font-face { + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url('fonts/IBMPlexMono-Light.woff2') format('woff2'); +} +@font-face { + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 300; + font-display: swap; + src: url('fonts/IBMPlexMono-LightItalic.woff2') format('woff2'); +} + +/* Regular 400 */ +@font-face { + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2'); +} +@font-face { + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url('fonts/IBMPlexMono-Italic.woff2') format('woff2'); +} + +/* Medium 500 */ +@font-face { + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2'); +} +@font-face { + font-family: 'IBM Plex Mono'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url('fonts/IBMPlexMono-MediumItalic.woff2') format('woff2'); +} + +/* Semibold 600 */ +@font-face { + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url('fonts/IBMPlexMono-SemiBold.woff2') format('woff2'); +} + +/* Bold 700 */ +@font-face { + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('fonts/IBMPlexMono-Bold.woff2') format('woff2'); +} + +/* ── IBM PLEX SANS ── */ + +/* Light 300 */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url('fonts/IBMPlexSans-Light.woff2') format('woff2'); +} +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 300; + font-display: swap; + src: url('fonts/IBMPlexSans-LightItalic.woff2') format('woff2'); +} + +/* Regular 400 */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('fonts/IBMPlexSans-Regular.woff2') format('woff2'); +} +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: url('fonts/IBMPlexSans-Italic.woff2') format('woff2'); +} + +/* Medium 500 */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url('fonts/IBMPlexSans-Medium.woff2') format('woff2'); +} +@font-face { + font-family: 'IBM Plex Sans'; + font-style: italic; + font-weight: 500; + font-display: swap; + src: url('fonts/IBMPlexSans-MediumItalic.woff2') format('woff2'); +} + +/* Semibold 600 */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); +} + +/* Bold 700 */ +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('fonts/IBMPlexSans-Bold.woff2') format('woff2'); +} + +:root { + + /* ── BASE BACKGROUNDS (warm dark, Gruvbox-derived) ── */ + --bg-shell: #1d2021; /* topbar, sidebar, nav chrome, modal backdrops */ + --bg-page: #313131; /* default page canvas, main content area */ + --bg-surface: #3c3836; /* cards, panels, drawers, input fields, code blocks, table rows */ + --bg-active: #504945; /* selected rows, active nav items, hover states */ + --bg-disabled: #665c54; /* disabled buttons/inputs — fg-muted text only, intentionally low contrast */ + --bg-border: #7c6f64; /* borders, dividers, rules, input outlines — never use as a text surface */ + + /* RGB triplets for rgba() use */ + --bg-page-rgb: 49, 49, 49; + --bg-surface-rgb: 60, 56, 54; + --bg-active-rgb: 80, 73, 69; + + /* ── BASE FOREGROUNDS (warm cream/ivory) ── */ + --fg-heading: #fbf1c7; /* hero text, page headings, display titles */ + --fg-body: #f2e2ba; /* primary body text, default readable content */ + --fg-secondary: #e0d0a8; /* labels, secondary descriptions, table data */ + --fg-caption: #cebd9e; /* captions, metadata, timestamps, placeholders */ + --fg-muted: #b8a98e; /* disabled text, token labels, subtle UI annotations */ + + /* ── ACCENT — GOLD (signature, Art Deco) ── */ + --gold-bright: #fabd2f; /* primary interactive, focus rings */ + --gold-dim: #d79921; /* borders, decorative rules */ + --gold-muted: #b57614; /* hover states, pressed accents */ + --amber: #ffb000; /* terminal amber glow, CRT reference */ + + /* ── ACCENT — RED ── */ + --red-bright: #fb4934; + --red-dim: #cc241d; + --red-muted: #9d0006; + + /* ── ACCENT — GREEN ── */ + --green-bright: #b8bb26; + --green-dim: #98971a; + --green-muted: #79740e; + + /* ── ACCENT — BLUE / TEAL ── */ + --blue-bright: #83a598; + --blue-dim: #458588; + --blue-muted: #076678; + + /* ── ACCENT — ORANGE ── */ + --orange-bright: #fe8019; + --orange-dim: #d65d0e; + --orange-muted: #af3a03; + + /* ── ACCENT — AQUA ── */ + --aqua-bright: #8ec07c; + --aqua-dim: #689d6a; + --aqua-muted: #427b58; + + /* ── ACCENT — PURPLE ── */ + --purple-bright: #d3869b; + --purple-dim: #b16286; + --purple-muted: #8f3f71; + + /* ── SEMANTIC COLORS ── */ + --color-primary: var(--gold-bright); + --color-primary-dim: var(--gold-dim); + --color-danger: var(--red-bright); + --color-danger-dim: var(--red-dim); + --color-success: var(--green-bright); + --color-success-dim: var(--green-dim); + --color-warning: var(--orange-bright); + --color-warning-dim: var(--orange-dim); + --color-info: var(--blue-bright); + --color-info-dim: var(--blue-dim); + --color-link: var(--blue-bright); + --color-link-hover: var(--gold-bright); + --color-focus: var(--gold-bright); + + /* ── SURFACES ── */ + --surface-page: var(--bg-page); + --surface-raised: var(--bg-surface); + --surface-overlay: var(--bg-shell); + --surface-hover: var(--bg-active); + --surface-active: var(--bg-surface); + + /* ── BORDERS ── */ + --border: var(--bg-border); /* structural borders */ + --border-subtle: var(--bg-disabled); /* very faint separators */ + --border-accent: var(--gold-dim); /* decorative/active */ + --border-focus: var(--gold-bright); /* focus rings */ + --border-danger: var(--red-dim); + --border-success: var(--green-dim); + + /* ── SHADOWS ── */ + /* Flat design — no drop shadows. Elevation expressed through bg + border only. */ + --shadow-sm: none; + --shadow-md: none; + --shadow-lg: none; + --shadow-inset: none; + --shadow-gold: 0 0 0 1px var(--gold-dim); /* focus/active ring — only permitted shadow use */ + + /* ── GRADIENTS ── */ + --gradient-gold-fade: linear-gradient(135deg, rgba(250,189,47,0.08) 0%, transparent 60%); /* @kind color */ + --gradient-amber-fade: linear-gradient(180deg, rgba(255,176,0,0.06) 0%, transparent 100%); /* @kind color */ + --gradient-dark-fade: linear-gradient(180deg, var(--bg-shell) 0%, var(--bg-page) 100%); + --gradient-card: linear-gradient(135deg, rgba(250,189,47,0.04) 0%, rgba(40,40,40,0) 100%); /* @kind color */ + --gradient-scanline: repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0,0,0,0.03) 2px, + rgba(0,0,0,0.03) 4px + ); /* @kind color */ + + /* ── SPACING (8px base grid) ── */ + --space-chip: 4px; /* badge/tag padding, icon-label gap, border offsets, micro nudges */ + --space-element: 8px; /* inline element gaps, chip/pill padding, icon inset, tight row spacing */ + --space-component: 12px; /* button vertical padding, input inset, list row gap, label-to-field gap */ + --space-group: 16px; /* card inset, input horizontal padding, form field gap, default gap */ + --space-cluster: 20px; /* grouped nav items, related form section spacing, compact panel inset */ + --space-panel: 24px; /* sidebar/panel inset, modal body padding, drawer inset, section subheader gap */ + --space-block: 32px; /* between distinct content blocks, card grid gutter, toolbar height */ + --space-content: 40px; /* major content group spacing, dialog padding, page sub-section gap */ + --space-section: 48px; /* page section breaks, feature group dividers, hero subheading gap */ + --space-region: 64px; /* hero vertical padding, layout area spacing, large feature gaps */ + --space-zone: 80px; /* page-scale layout spacing, full-width section vertical rhythm */ + --space-canvas: 96px; /* page margins, full-bleed hero top padding, maximum layout gutter */ + + /* ── BORDER RADIUS ── */ + --radius-none: 0px; + --radius-sm: 4px; + --radius-md: 6px; /* default — confirmed */ + --radius-lg: 10px; + --radius-pill: 999px; + + /* ── TRANSITIONS ── */ + --transition-press: 55ms ease-out; /* @kind other */ /* entering active/pressed state */ + --transition-ui: 180ms ease-out; /* @kind other */ /* releasing, hover changes */ + --transition-hover: 150ms ease-out; /* @kind other */ /* hover enter/exit */ + --transition-modal: 200ms ease; /* @kind other */ /* overlays, modals */ + + /* ── INTERACTION PATTERN (ghost buttons) ── */ + /* default: transparent bg, colored border + fg2 text */ + /* hover: 20% accent tint bg, colored border, fg1 text (--transition-hover) */ + /* press: full accent-bright fill, white text (--transition-press) */ + /* release: back to hover/default (--transition-ui) */ + + /* ── TYPOGRAPHY — Font Families ── + Plex Sans is the primary face for display, body, and + condensed roles. Plex Mono is the primary monospace face + for code, terminal output, data values, and timestamps. + + For a fully terminal-styled surface (status dashboard, + console, hardware-grade hero), set --font-display / + --font-body / --font-condensed to var(--font-mono) on the + surface root, or apply the .mono-mode class. + */ + --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + --font-mono: 'IBM Plex Mono', 'Courier New', monospace; + + --font-display: var(--font-sans); + --font-body: var(--font-sans); + --font-condensed: var(--font-sans); + + /* ── TYPOGRAPHY — Scale (1.25 modular ratio, base 16px) ── */ + --text-xs: 11px; /* status badges, fine print */ + --text-sm: 13px; /* secondary labels, captions */ + --text-base: 15px; /* default body text */ + --text-md: 16px; /* slightly prominent body */ + --text-lg: 18px; /* subheadings, emphasized labels */ + --text-xl: 22px; /* H3 level */ + --text-2xl: 28px; /* H2 level */ + --text-3xl: 36px; /* H1 level */ + --text-4xl: 48px; /* display / hero */ + --text-5xl: 64px; /* hero display */ + --text-6xl: 96px; /* max scale; masthead only */ + + /* ── TYPOGRAPHY — Weight ── */ + --weight-light: 300; + --weight-regular: 400; + --weight-medium: 500; + --weight-semibold:600; + --weight-bold: 700; + --weight-black: 900; + + /* ── TYPOGRAPHY — Line Heights ── */ + --leading-tight: 1.15; + --leading-snug: 1.3; + --leading-normal: 1.5; + --leading-loose: 1.7; + --leading-mono: 1.4; + + /* ── TYPOGRAPHY — Letter Spacing ── */ + --tracking-tight: -0.02em; + --tracking-normal: 0em; + --tracking-wide: 0.05em; + --tracking-wider: 0.1em; + --tracking-widest: 0.2em; /* ALL CAPS labels */ +} + + +/* ── SEMANTIC ELEMENT DEFAULTS ── */ + +*, *::before, *::after { + box-sizing: border-box; +} + +html { + font-size: 16px; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} + +body { + background-color: var(--bg-page); + color: var(--fg-body); + font-family: var(--font-body); + font-size: var(--text-base); + font-weight: var(--weight-regular); + line-height: var(--leading-normal); +} + +/* ── HEADINGS ── */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-display); + font-weight: var(--weight-bold); + line-height: var(--leading-tight); + letter-spacing: var(--tracking-wide); + color: var(--fg-heading); + margin: 0 0 var(--space-group); +} + +h1 { + font-size: var(--text-3xl); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; +} + +h2 { + font-size: var(--text-2xl); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; +} + +h3 { + font-size: var(--text-xl); + font-family: var(--font-condensed); + font-weight: var(--weight-semibold); + letter-spacing: var(--tracking-normal); +} + +h4 { + font-size: var(--text-lg); + font-family: var(--font-condensed); + font-weight: var(--weight-semibold); +} + +h5 { + font-size: var(--text-base); + font-family: var(--font-condensed); + font-weight: var(--weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--fg-secondary); +} + +h6 { + font-size: var(--text-sm); + font-family: var(--font-mono); + font-weight: var(--weight-regular); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--fg-caption); +} + +/* ── BODY TEXT ── */ +p { + font-size: var(--text-base); + line-height: var(--leading-normal); + color: var(--fg-secondary); + margin: 0 0 var(--space-group); +} + +small { + font-size: var(--text-sm); + color: var(--fg-caption); +} + +/* ── LINKS ── */ +a { + color: var(--color-link); + text-decoration: none; + transition: color var(--transition-ui); +} + +a:hover { + color: var(--color-link-hover); +} + +/* ── CODE ── */ +code, kbd, samp, pre { + font-family: var(--font-mono); + font-size: var(--text-sm); + line-height: var(--leading-mono); +} + +code { + color: var(--gold-bright); + background: var(--bg-surface); + padding: 2px 6px; + border: 1px solid var(--border); + border-radius: var(--radius-sm); +} + +pre { + background: var(--bg-shell); + border: 1px solid var(--border); + border-left: 2px solid var(--gold-dim); + padding: var(--space-group) var(--space-panel); + overflow-x: auto; + color: var(--fg-body); +} + +/* ── LABELS & CAPS ── */ +.label { + font-family: var(--font-condensed); + font-size: var(--text-xs); + font-weight: var(--weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--fg-caption); +} + +.label-mono { + font-family: var(--font-mono); + font-size: var(--text-xs); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--fg-muted); +} + +/* ── FOCUS ── */ +:focus-visible { + outline: 1px solid var(--border-focus); + outline-offset: 2px; +} + +/* ── MONO MODE ── + Flip a surface into fully terminal-styled type: display, body, + and condensed roles all resolve to IBM Plex Mono. Use for + consoles, status dashboards, IDE-like tools, and hardware-grade + hero moments where the terminal aesthetic IS the point. + + … + + Or, scope it programmatically: + :root { --font-body: var(--font-mono); … } +*/ +.mono-mode { + --font-display: var(--font-mono); + --font-body: var(--font-mono); + --font-condensed: var(--font-mono); +} diff --git a/themes/chromium/README.md b/themes/chromium/README.md index 9ee4505..52085ef 100644 --- a/themes/chromium/README.md +++ b/themes/chromium/README.md @@ -13,7 +13,7 @@ single `manifest.json`, no images. ## Token mapping -Every value is lifted from `colors_and_type.css`, matched to the role the +Every value is lifted from `styles.css`, matched to the role the token comments already describe. | Chromium key | Token | Hex | Token's stated role | @@ -66,7 +66,7 @@ inactive colors are set explicitly instead. ## What doesn't carry over -Roughly half of `colors_and_type.css` is the type system — IBM Plex +Roughly half of `styles.css` is the type system — IBM Plex Sans/Mono, the 1.25 modular scale, the Art Deco tracking and uppercase treatments. None of it can reach the browser: Chromium themes accept only `images`, `colors`, `tints`, and `properties`. There is no font capability,