Integral Design System
The formal architectural guidelines, visual motifs, and interaction patterns that define the Integral Group ecosystem.
01. Typography
Space Grotesk
Primary Display Typeface. Used for massive architectural statements, structural headers, and primary node identifiers.
Inter
Secondary Interface Typeface. Used for long-form reading, metadata, structural data, and interface labels.
02. Visual Motifs
Ecosystem Nodes
Represent specialized departments connected to the central OS.
Tactical Scanlines
Used in dossier cards and active terminals to indicate data processing.
Hardware Brackets
Anchors UI elements to create an aerospace, industrial-hardware feel.
03. Interaction Architecture
Cinematic Transition (Global): All page transitions use a 0.8s bezier curve easing `[0.22, 1, 0.36, 1]` coupled with an opacity crossfade and a 10px blur reduction. This prevents jarring DOM swaps and maintains immersion.
Magnetic System Nodes: Interactive mapping elements trigger atmospheric shifts upon hover. Connecting paths illuminate, peripheral nodes dim, and detailed metadata dynamically expands via `AnimatePresence`.
The Command Terminal (Ctrl+K): Power-user navigation is handled via a global terminal overlay. Executing typed commands creates the highest level of "operating system" perception.