Operational design system

Pulseframe

A control-room-grade visual system for status dashboards, AI operator interfaces, deployment surfaces, admin consoles, and incident-aware product UI.

dark-mode first semantic status colors operator-grade density Ready
Preview

Standalone HTML showcase

Static kitchen sink with metrics, alerts, services, timelines, logs, and command surfaces.

Open demo
Styles

Split CSS architecture

tokens
styles/tokens.css
components
styles/components.css
utilities
styles/utilities.css
entrypoint
styles/index.css
Principles

Operational rules

signal
Semantic over decorative
Colors should mean something. State beats styling noise.
rule 01
density
Compact, not cramped
High information density only works when hierarchy stays clean.
rule 02
danger
Red is reserved
Failures, incidents, destructive actions. Nothing else.
rule 03