Active Theory. Deep-space command deck where chrome whispers and the rendered world shouts.
- Studio
- Dark theme
- 7 colors
- 3 typefaces
Active Theory operates as a cosmic void stage where the immersive experience is the design and the UI chrome barely exists. The canvas is near-total black (#000000) with UI elements floating as whispered ghost containers — translucent surfaces, hairline borders, and pill-shaped controls that recede into the dark. Typography splits between an architectural geometric sans (nbarchitekt) for navigation and CTAs, and a deliberate editorial serif (Times) for body, creating an unexpected contrast that signals craft over convention. Color is rationed to a single muted violet accent (#343755) and pure white text — the page itself stays monochromatic so the rendered WebGL world carries all chromatic weight. Every UI decision prioritizes invisible-feeling chrome so the 3D scene reads as untethered floating in deep space.

Active Theory design system
Brand1
Primary action fill — filled pill buttons, the only chromatic accent in the system; muted indigo reads as electric against void black without competing with the rendered scene
Neutrals6
Page canvas, immersive background, card surfaces when stacked on dark — the absence of surface, not a color
Card borders, divider hairlines — barely-there separator that defines edges without adding visual weight
Muted borders on ghost buttons, secondary chrome — recedes behind active controls
Medium-contrast borders, control outlines, and structural separators. Do not promote it to the primary CTA color
Tertiary text, link default state, low-priority metadata — sits between white and gray for gentle hierarchy
Primary text, icon strokes, high-contrast labels — used at full opacity against pure black
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Ghost White on Dusk Violet
11.52 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7











