// CSS DESIGN SYSTEM v1.0
Every component is a node in a living, breathing flowchart. Data pulses through animated connection lines. The system is alive.
The neon whiteboard palette. Six signal colors burn against the void, each carrying meaning through the flowchart. High contrast, maximum legibility, zero ambiguity.
Three typefaces serve the flowchart system. Orbitron commands attention at display scale. Inter carries body text with quiet precision. Fira Code renders data and labels in monospaced clarity.
The flowchart system processes information through interconnected nodes. Each node performs a discrete operation, passing its output downstream through animated connection lines. The system never sleeps.
A 4px base unit generates the spatial rhythm. Every gap, margin, and padding maps to a named token. The parallelogram skew reminds you: data is always in transit.
Action nodes in the flowchart. Each button type maps to a flow operation: primary executes, secondary branches, success confirms, warning pauses. Animated gradient borders pulse like live circuit traces.
Data entry nodes. Every input is a decision point in the flow — valid data proceeds downstream, invalid data loops back. Focus states glow magenta to signal an active decision.
Three card types map to flowchart node shapes. Process cards are rectangular and direct. Decision cards carry a diamond indicator. Data cards skew like parallelograms, always suggesting motion and transformation.
Status nodes broadcast system state. Each alert type maps to a flow condition: info passes through, success terminates a branch, warning triggers review, error halts the flow and demands intervention.
Sub-process nodes link to reusable flows. Hexagonal nav items represent modular, encapsulated routines that can be called from any point in the system. Breadcrumbs trace the execution path. Tabs switch between parallel views.