Design System
Analysis of Active Theory

A pure-black, fullscreen WebGL stage where one proprietary grotesque carries the whole interface in white — no chrome, no shadow, no rounding. All colour and depth live inside the rendered experience.

01 — Foundations

Colour Palette

Monochrome by construction: an absolute-black canvas with a single white ink dimmed by opacity into a full greyscale ramp. Saturated colour lives only inside the WebGL scenes.

02 — Foundations

Typography

The brand face is NB Architekt Std (Neubau) — a technical, blueprint-grade grotesque in Light / Regular / Bold. It is proprietary, so this showcase substitutes the nearest Google face, Space Grotesk. Visible type on the live site is composed in WebGL, so sizes here express the brand's voice rather than measured DOM values.

03 — Components

Button Variants

button-primary
The inverted CTA: a solid white fill with a black uppercase, wide-tracked label.
button-secondary
1px white outline on the black void, transparent fill — the default action.
button-dark
A barely-lifted dark fill for low-emphasis controls inside panels.
badge-pill
The one rounded shape in the system — a sunken pill for tags and markers.
04 — Components

Cards & Surfaces

Work is shown as edge-to-edge media tiles with hard corners. On the live site the hover state is a WebGL transition; here it is approximated with a white border-on-hover.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

An 8px rhythm with very generous negative space — content floats in a vast black field framed by large margins.

07 — Foundations

Border Radius

Sharp by default. There is no radius in the verifiable styles; full is reserved for the pill-shaped progress bar and circular markers.

08 — Foundations

Elevation & Depth

There are zero box-shadows in the system. Separation is achieved with 1px hairlines and lifted near-black surfaces; real depth is produced inside the 3D scene, never with CSS.

Level 0 — 1px hairline only. The default way panels separate from the void.
Level 1 — a marginally lighter surface fill. No shadow; depth implied by tone.
Level 2 — reserved for modal contexts; still flat, still shadow-free by design.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxCanvas fills viewport; navigation collapses to gesture / drag inside the stage.
Tablet768–1023pxSame single canvas; touch-driven transitions, larger tap targets.
Laptop1024–1279pxPointer + wheel navigation; corner-anchored UI labels appear.
Desktop≥ 1280pxFull immersive stage with maximum negative space around centred content.

No breakpoint grid. The DOM is three elements deep with overflow:hidden and touch-action:none — the WebGL runtime re-composes the experience internally at any viewport, so there is no CSS layout to collapse.

Engagement Tiers

Sample content — Active Theory has no pricing page. These tiers translate the studio model into the component pattern.

Prototype
04weeks
A rapid WebGL proof-of-concept to pressure-test the idea.
  • Concept & tech direction
  • One interactive prototype
  • Performance benchmark
Production● Most engaged
12weeks
Full design and build of a launch-ready immersive experience.
  • Art direction & 3D
  • Custom shader pipeline
  • Cross-device QA & launch
  • Analytics & handover
Partnership
Ongoing
Embedded R&D for brands shipping experiences continuously.
  • Dedicated team
  • Roadmap & experiments
  • Priority support

Project Log

Sample content demonstrating the data-table pattern in the dark system.

IDClientDisciplineStatusWhen
AT-418GoogleWebGL · NarrativeShipped2025
AT-410MetaWebXR · Immersive UIShipped2025
AT-405SonicReal-time 3DIn build2026
AT-399InternalR&D · ShadersExperiment2026
AT-392NikeLaunch experienceShipped2024
1–5 of 412
123

Client Access

Sample content demonstrating the auth-form pattern in the brand's dark, square-edged language.

Sign in

Client portal

OR
Request access

New project

OR