Foundations
Core color primitives. Review the base surfaces, accent ramps, and semantic roles before applying the system.
Base Palette
Background and foreground ramps, default pairings, contextual text, and surface combinations.
Accent Colors
Bright, dim, and muted ramps for gold, red, green, blue, orange, aqua, and purple.
Semantic Colors
Primary, success, danger, warning, info, and disabled roles shown across text and controls.
Typography
IBM Plex Sans carries the primary hierarchy. IBM Plex Mono handles code, logs, aligned data, and opt-in terminal surfaces.
Display Type
Plex Sans display hierarchy across hero, heading, subheading, body, and light text treatments.
Body Type
Readable body sizing, weights, labels, captions, and supporting text within the core type scale.
Mono / Terminal
Plex Mono specimens for terminal output, code, logs, timestamps, and aligned operational data.
Sans vs. Mono Mode
Side-by-side comparison of the default Sans system and the opt-in, fully terminal-styled Mono mode.
Structure & Effects
Layout rhythm and surface construction: the spacing scale, crisp border geometry, radius choices, and flat elevation model.
Spacing Tokens
The complete 4–96px spacing scale, labeled by token and demonstrated in practical layout contexts.
Borders & Radius
Structural and semantic borders plus the radius scale across buttons, cards, inputs, and a loading spinner.
Shadows & Elevation
Flat elevation through background and border changes, with interactive card hover and press behavior.
Components & States
Reusable interface patterns and their behavior. Hover, focus, press, validation, loading, and disabled states are live where marked.
Buttons
Primary, secondary, and danger controls with the three-step default, hover, and press treatment.
Form Inputs
Text and select controls with focus, error, success, validation, and transition behavior.
Cards
Static data surfaces and clickable cards, including stat, alert, deploy, hover, and press treatments.
Badges & Status
System, process, and neutral indicators for online, degraded, running, complete, failed, and labeled states.
Navigation
Top-tab and side-navigation explorations with active selection, divider, and hover behavior.
Component States
Live hover, focus, press, release, disabled, loading, spinner, and timing references in one matrix.