---
version: alpha
name: Active Theory
description: A pure-WebGL interactive studio where pure black dissolves into deep-space particle fields, neon violet and electric teal light the 3D scenes, and a single bespoke typeface — NBArchitektStd — renders every word as geometry inside a living environment.

colors:
  # Surface / canvas
  background: "#000000"          # pure black — body, stage, scene canvas
  surface: "#161616"             # near-black for elevated surfaces and scene floors
  surface-mid: "#454545"         # mid-dark floor/wall material in CleanRoom scenes

  # Ink / text
  ink: "#ffffff"                 # primary text rendered in 3D scenes
  ink-primary: "#eeeeee"         # near-white display text — work detail metadata
  ink-secondary: "#aaaaaa"       # muted instructional text (Scroll to close)
  ink-tertiary: "#888888"        # lowest-emphasis text in work detail cards
  ink-accent-blue: "#7dc2f0"     # "Scroll down" cue — cool sky-blue on dark canvas

  # Brand accent — neon signals
  primary: "#d600ff"             # electric magenta-violet — home scene screen lights, signature glow
  accent-teal: "#0bed90"         # neon mint/teal — home scene area light, interactive signal
  accent-purple: "#C64DFF"       # particle core primary — brighter violet
  accent-deep-purple: "#422EA3"  # particle core secondary — deep indigo
  accent-cyan: "#84C8C3"         # particle core tertiary — muted teal
  accent-electric-blue: "#61c2ff" # particle emitter tint — electric blue
  accent-ice-blue: "#93e5ff"     # home floor material tint — ice blue
  accent-lensflare: "#cceeff"    # lens streak halo color
  accent-streak: "#c2dcff"       # lens streak body color

  # Scene atmosphere / fog
  fog: "#1a90ad"                 # scene fog color — deep cyan-teal atmospheric haze
  scene-tint: "#e5f1ff"          # PBR mesh tint — cool pale blue for scene geometry

  # Borders / dividers
  border: "#333333"              # safari pinned-tab SVG — darkest visible hairline

  # Shadow tints
  shadow-deep: "#000000"         # was rgba(0,0,0,0.8) — Google format requires hex

typography:
  display-hero:
    fontFamily: "NBArchitektStd-Regular, Helvetica, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  display:
    fontFamily: "NBArchitektStd-Regular, Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.05em
  heading:
    fontFamily: "NBArchitektStd-Regular, Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.05em
  body:
    fontFamily: "NBArchitektStd-Regular, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-light:
    fontFamily: "NBArchitektStd-Light, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0.01em
  label:
    fontFamily: "NBArchitektStd-Regular, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.05em
  nav-link:
    fontFamily: "NBArchitektStd-Regular, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "NBArchitektStd-Bold, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 2.0
    letterSpacing: 0.01em
  code-annotation:
    fontFamily: "NBArchitektStd-Light, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0.01em

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  2xl: 80px
  3xl: 120px
  4xl: 270px

rounded:
  none: 0px
  sm: 4px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.accent-teal}"
    textColor: "{colors.background}"
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
  nav-link:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    padding: 8px 16px
  nav-link-hover:
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  card-work:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-primary}"
    rounded: "{rounded.none}"
    padding: 0px
  card-work-hover:
    textColor: "{colors.ink}"

  scene-caption:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-tertiary}"
    typography: "{typography.display}"
    padding: 0px
  scene-label:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    padding: 0px
  scene-annotation:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.code-annotation}"
    padding: 0px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-accent-blue}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px
---

# Active Theory Design System

## Overview

Active Theory is not a website — it is a 3D world you scroll through. The studio's homepage is a pure-WebGL environment: a pitch-black canvas (`{colors.background}`) that gives way to cinematic particle fields, glass geometry, and volumetric lighting. Navigation is spatial; content is rendered in-scene as 3D text meshes; the "interface" is the environment itself. There are no hero images, no flat illustration systems, no dashboard components. The entire experience is a real-time engine running inside the browser.

The color identity is built on neon restraint. The scene canvas is absolute black, and two chromatic signals punctuate it: an electric magenta-violet (`{colors.primary}` — the glow of in-scene screen lights) and a neon mint-teal (`{colors.accent-teal}` — the scene's dominant area light). These are not UI colors in the conventional sense; they are scene lighting values that happen to be the brand's most memorable visual. Supporting the deep-space palette are cool particle tones — brighter violet (`{colors.accent-purple}`), deep indigo (`{colors.accent-deep-purple}`), and hazy cyan (`{colors.accent-cyan}`) — which give particle effects a nebula-quality gradient range. The result reads less like a tech product and more like a rendered spacecraft interior.

The type system is built entirely on NBArchitektStd, a bespoke architectural grotesque (light, regular, bold weights) that Active Theory renders as geometry inside WebGL scenes. Text is literally a mesh — sized, positioned, and colored as a 3D object with its own lineHeight and letterSpacing in scene units. There are no web fonts in the conventional sense; NBArchitektStd is self-hosted and used exclusively. For any external implementation, the closest substitutes are Neue Haas Grotesk or Aktiv Grotesk: neutral, constructed, slightly cold. The brand writes in capitals and fragments — "Creative / Digital / Experiences", "// THE LAB ->" — giving copy a command-line, engineering quality.

**Key Characteristics:**
- Pure-black WebGL canvas (`{colors.background}`) — the interface IS the 3D scene, not a page with content on it
- Neon magenta-violet (`{colors.primary}`) and electric mint-teal (`{colors.accent-teal}`) as the two signature light sources — never flat fills
- NBArchitektStd (architectural grotesque, 3 weights) is the single typeface — rendered as 3D mesh geometry
- Particle systems use a nebula palette: violet-purple-teal (`{colors.accent-purple}`, `{colors.accent-deep-purple}`, `{colors.accent-cyan}`)
- Volumetric light and fog (`{colors.fog}`) create depth; there are no drop shadows
- Scene text uses aggressive letter-spacing (0.05em) for a wide, spacious display quality
- Sequential light/heavy weight contrast — Regular for display, Light for supporting copy (`{typography.body-light}`), Bold for system labels
- Copy style is architectural and terse: fragments, slashes, arrows ("// THE LAB ->")
- No border radius — all geometry is sharp-edged (WebGL objects + CSS alike)
- Motion is physics-based; camera lerp speeds (0.07–0.1) define the inertia signature

## Colors

### Surface & Canvas
- **Pure Black** (`{colors.background}`): The universal base — HTML body, WebGL stage background, all scenes. Total absence of surface.
- **Scene Floor** (`{colors.surface}`): Near-black PBR material for scene floor geometry — barely distinguishable from black, but lit by scene lights.
- **Mid Dark** (`{colors.surface-mid}`): CleanRoom scene floor/wall material — the darkest visible "room" tone.

### Ink / Text
- **White** (`{colors.ink}`): Primary text in 3D scenes and any HTML overlay — full-brightness on black.
- **Near-White** (`{colors.ink-primary}`): Work detail metadata — slightly softer than pure white, easier to read at speed.
- **Muted Gray** (`{colors.ink-secondary}`): Secondary scene text ("Scroll to close"), nav links at rest — recedes against the black.
- **Low-Emphasis Gray** (`{colors.ink-tertiary}`): Tertiary work detail captions — deepest gray before vanishing into background.
- **Ice Blue** (`{colors.ink-accent-blue}`): The one non-neutral text color — used for the "Scroll down" instructional cue, evoking depth and directionality.

### Brand Accent — Neon Signals
- **Electric Violet** (`{colors.primary}`): The dominant scene light color — magenta-violet. Home scene screen glow and dramatic lighting. The emotional signature of the brand.
- **Mint Teal** (`{colors.accent-teal}`): The home scene's area light — an electric green-teal that fills the environment with cool energy. Used at high intensity (3.44 scene units).
- **Particle Violet** (`{colors.accent-purple}`): Primary particle core color — brighter than the scene violet, used in particle swarms.
- **Deep Indigo** (`{colors.accent-deep-purple}`): Secondary particle core — provides purple-to-indigo depth gradient in particle effects.
- **Soft Teal** (`{colors.accent-cyan}`): Tertiary particle core — a gentler, less saturated teal used for particle variation.
- **Electric Blue** (`{colors.accent-electric-blue}`): Particle emitter tint — a high-key cyan-blue for fast-moving particles.
- **Ice Teal** (`{colors.accent-ice-blue}`): Home floor material tint — cool reflective surface.

### Atmosphere
- **Scene Fog** (`{colors.fog}`): Deep cyan-teal volumetric haze — used with density/decay parameters to create the sense of infinite dark space receding behind the 3D scene.
- **Lens Halo** (`{colors.accent-lensflare}`) / **Lens Streak** (`{colors.accent-streak}`): Post-processing colors for lens flare and light streak effects — very pale cold blue.

## Typography

### Font Family
- **Primary (and only)**: `NBArchitektStd-Regular`, with fallbacks: `Helvetica, Arial, sans-serif`. A bespoke geometric architectural grotesque — self-hosted in woff2/woff/otf formats. Three weights: Light (300), Regular (400), Bold (700).
- For external implementation: Neue Haas Grotesk, Aktiv Grotesk, or IBM Plex Sans approximate the constructed, neutral quality. Space Grotesk is a free alternative.
- **No web fonts** from Google Fonts or Adobe Fonts are used. The site is self-hosted exclusively.

### Hierarchy

The type scale is declared in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 72px Regular — "Creative Digital Experiences" in 3D space |
| `display` | 40px Regular, 0.05em tracking — work detail titles, section labels |
| `heading` | 28px Regular, 0.05em tracking — section headings |
| `body` | 16px Regular — about section descriptive paragraphs |
| `body-light` | 14px Light, 0.01em tracking — supporting copy, Lab page annotations |
| `label` | 13px Regular, 0.05em tracking — UI metadata, timestamps |
| `nav-link` | 18px Bold — the only heavy-weight label in the system |
| `caption` | 11px Bold, 2.0 line-height — system annotation copy ("// THE LAB ->") |
| `code-annotation` | 12px Light, 0.01em tracking — inline annotation text in 3D scenes |

### Principles
- **One family, three weights**: NBArchitektStd does everything. Regular for story, Light for detail, Bold for navigation anchors.
- **Wide tracking on display**: 0.05em letter-spacing at heading scales creates an architectural, expansive feeling — not condensed tech.
- **Fragments and slashes**: Copy is written in architectural notation — "// THE LAB ->", "2017 / VICE / INSTALLATION". Never full sentences in display positions.
- **3D geometry, not HTML**: Display text lives as mesh objects in the WebGL scene with explicit lineHeight, letterSpacing, and width in scene units — a unique constraint.
- **Minimal type scale**: Fewer steps than conventional systems. Size communicates location-in-depth, not content hierarchy.

## Layout

### Spacing System
Base unit is **8px**, scaling up to 270px for large section gaps. The 270px value (`{spacing.4xl}`) is the dominant structural measurement — found repeatedly in scene positioning, suggesting full-viewport section intervals.

### Grid & Container
- Full-viewport canvas: the scene fills 100% width and height at all times
- HTML elements float over the WebGL canvas — never in a traditional document flow
- No traditional grid system; positions are absolute or scene-relative
- Content width is viewport-dependent; the 3D perspective defines "layout"

### Whitespace Philosophy
- **Space IS the content**: The black void between scene elements IS the design. There is no "empty" space — only scene depth.
- **Vertical rhythm is scroll distance**: Spacing between content moments is measured in scroll travel and camera lerp inertia, not CSS padding.
- **Float above, not beside**: All text and UI elements float over a living 3D environment — they exist in Z-space, not X-Y grid space.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; pure black canvas | Base scene layer |
| Scene Depth | 3D perspective + volumetric fog (`{colors.fog}`) | Infinite recession behind objects |
| Volumetric (Level 1) | `fDensity:0.22, fExposure:0.86, fDecay:0.8` | Home scene atmospheric haze |
| Lit Surface (Level 2) | PBR materials with lightmap bake | Scene geometry — floors, walls, glass |
| Lens Post-FX (Level 3) | Lens streak + halo (`{colors.accent-lensflare}`) | Post-processing glow on bright light sources |
| Focus Ring | `outline: 2px solid {colors.accent-teal}` | /* estimated */ keyboard focus |

**Shadow Philosophy**: Active Theory uses **no CSS box shadows**. Depth is entirely a function of real-time 3D rendering — PBR materials, scene lighting (point lights, area lights at intensity 2.19–3.44), and volumetric fog with tuned density and decay. Glass objects use Fresnel shading for edge luminance. The effect is photorealistic spatial depth, not simulated depth with blurred offsets.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All UI elements — buttons, inputs, cards, nav items |
| `sm` | 4px | Scrollbar thumb (CSS) — the sole rounded element in the system |
| `pill` | 9999px | Reserved; not used in current implementation |

The system is strictly sharp-cornered. WebGL geometry has no border radius (it's mesh-based); HTML UI elements inherit the same zero-radius philosophy. The single exception is the custom scrollbar thumb (`border-radius: 10px`), which is a browser affordance, not a design choice.

## Components

The complete component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Flat fill using `{colors.primary}` (electric violet), white text, sharp corners, no border. Used for primary CTAs when they appear. Hover shifts to `{colors.accent-teal}` with dark text — a neon color swap.
- **`button-ghost`** — Transparent black background, white text, sharp corners. The default navigation interaction state.
- The button philosophy is minimal: shape and color do the work, not border or shadow.

### Navigation
- **`nav-bar`** — Pure black, floating over the WebGL scene. White NBArchitektStd-Bold at 18px. Transparent, so the living scene shows through.
- **`nav-link`** — At rest: muted gray (`{colors.ink-secondary}`). Active/hover: white. No underline, no indicator — just luminosity change.

### Work Cards
- **`card-work`** — Full-viewport work showcase. Pure black ground with near-white display title. On hover: full white. The card IS the scene — no container border or shadow.
- Work metadata renders at work detail level: year / client / type, uppercase, NBArchitektStd-Regular at small size with 0.05em tracking.

### Scene Text
- **`scene-caption`** — 3D mesh text for work titles in the scene (e.g., "MUSEUM OF WEED"). Gray (`{colors.ink-tertiary}`) at display scale — intentionally de-emphasized against the dark.
- **`scene-label`** — Instructional 3D text ("Scroll to close", "Scroll down"). Muted gray (`{colors.ink-secondary}`) at small scale.
- **`scene-annotation`** — Annotation copy in the Lab/CleanRoom scene ("// THE LAB ->"). NBArchitektStd-Light, white, right-aligned.

### Inputs
- **`input`** — Near-black fill, white text, sharp corners. No border at rest. Focus state lifts to `{colors.surface-mid}` — a subtle tone shift, no ring color.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the universal canvas — pure black, no tints, no gradients
- Keep `{colors.primary}` (electric violet) as a scene LIGHT color — it glows onto surfaces, it doesn't fill them
- Use `{colors.accent-teal}` as the interactive signal — the mint that says "this is alive"
- Render text in NBArchitektStd-Regular at all display sizes; switch to Light for annotations, Bold only for navigation
- Apply 0.05em letter-spacing to heading and display type — the open tracking is the architectural character
- Write copy as fragments: uppercase, slashes, arrows, code-notation style ("// THE LAB ->")
- Simulate depth through fog, lighting, and Fresnel shading — never box-shadow
- Keep all HTML UI elements at `{rounded.none}` — sharp geometry matches the WebGL objects they float over
- Use particle color palettes (violet → indigo → teal) for generative or data-visualization contexts

### Don't
- Don't introduce a second typeface — NBArchitektStd handles every text role
- Don't use the violet or teal as flat surface fills — they work as light, not as background color
- Don't add border radius to interactive elements beyond the 4px scrollbar exception
- Don't use warm grays or warm neutrals anywhere — the entire system is cool-toned (ice blue, slate gray, neutral white)
- Don't add drop shadows to float elements — depth comes from the 3D engine below
- Don't use condensed tracking (negative letter-spacing) — the wide-open spacing at display sizes is the brand
- Don't place content in traditional HTML document flow — all UI should float absolute over the living canvas
- Don't use gradients as backgrounds — gradients are the property of the 3D scene's lighting, not the HTML layer

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | WebGL scene renders at reduced resolution; touch-based scroll navigation replaces mouse parallax; text scale reduces |
| Tablet | 640–1024px | Standard layout maintained; reduced camera depth of field |
| Desktop | 1024–1440px | Full scene complexity; volumetric lighting at full intensity |
| Large Desktop | >1440px | Maximum scene fidelity; camera at full depth |

### Touch Targets
- Navigation links: generous padding for touch via `touch-action: none` on the WebGL stage
- Site disables default browser scrolling (`overflow: hidden` on html/body); scroll is captured and routed to scene camera movement
- Minimum interactive areas: 44px touch target for any HTML UI overlay elements (/* estimated */)

### Collapsing Strategy
- **Navigation**: Horizontal nav persists on mobile; reduced font size
- **Scene**: WebGL renders at device-appropriate resolution (DPR-aware); particle counts reduce on mobile for performance
- **Text in scene**: 3D text meshes remain but scale proportionally to the viewport perspective
- **Interaction model**: Mouse parallax (moveXY) reduces or disables on touch; scroll becomes the primary navigation axis

### Image Behavior
- No traditional images in the primary experience — everything is real-time WebGL
- Work showcase imagery is rendered as textures on 3D planes within the scene
- Compressed KTX2 format used for production-grade texture performance (`useCompressed: true`)

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Pure Black (`{colors.background}`)
- Primary text: White (`{colors.ink}`)
- Secondary text: Muted gray (`{colors.ink-secondary}`)
- Signature glow: Electric violet (`{colors.primary}`)
- Interactive signal: Mint teal (`{colors.accent-teal}`)
- Particle palette: Violet → Indigo → Teal (`{colors.accent-purple}`, `{colors.accent-deep-purple}`, `{colors.accent-cyan}`)
- Atmospheric fog: Deep cyan (`{colors.fog}`)

### Example Component Prompts

- "Build a hero overlay: pure black (`{colors.background}`) full-viewport canvas. Display headline 'Creative Digital Experiences' in 72px NBArchitektStd-Regular (`{typography.display-hero}`), white (`{colors.ink}`), line-height 1.1, letter-spacing 0px. Float a secondary line 'Scroll down' at 16px in cool sky-blue (`{colors.ink-accent-blue}`) below. All text positioned absolute, centered horizontally."
- "Create a work detail caption: 40px NBArchitektStd-Regular (`{typography.display}`), letter-spacing 0.05em, color `{colors.ink-tertiary}` (#888888). Uppercase. No background, no border — text floats on pure black. Below it: metadata line (year / client / type) at 12px NBArchitektStd-Light (`{typography.code-annotation}`), white, right-aligned, letter-spacing 0.01em."
- "Design a minimal nav bar: `{colors.background}` base, transparent background so the WebGL scene bleeds through. Nav links in NBArchitektStd-Bold 18px (`{typography.nav-link}`), color `{colors.ink-secondary}` at rest. Hover: `{colors.ink}` (white). No underline, no indicator, no border. Padding 16px 24px."
- "Build a neon accent button: sharp corners (`{rounded.none}`), background `{colors.primary}` (electric violet #d600ff), white text (`{colors.ink}`), NBArchitektStd-Regular 13px (`{typography.label}`), padding 12px 24px. Hover: background transitions to `{colors.accent-teal}` (#0bed90), text color to `{colors.background}` (black). Transition: 200ms ease."
- "Create a particle effect color palette: primary emitter tint `{colors.accent-purple}` (#C64DFF), secondary `{colors.accent-deep-purple}` (#422EA3), tertiary `{colors.accent-cyan}` (#84C8C3). Use these as color stops across particle lifetime, fading from violet through indigo to teal. Canvas: pure black (`{colors.background}`)."
- "Render a lab-style annotation: NBArchitektStd-Light 12px (`{typography.code-annotation}`), color white (`{colors.ink}`), right-aligned. Text: '// THE LAB ->'. Letter-spacing 0.01em, line-height 1.2. No background, no border. Floats over the dark environment on pure black (`{colors.background}`)."

### Iteration Guide

1. Start on pure black (`{colors.background}`). If you reached for a gradient or surface color, revert.
2. Place NBArchitektStd-Regular (`{typography.display-hero}`) for all display text — never a second typeface. If NBArchitektStd is unavailable, substitute Space Grotesk or Neue Haas Grotesk.
3. Verify 0.05em letter-spacing on all heading and display type — the open tracking is load-bearing for the architectural feel.
4. Use `{colors.primary}` (electric violet) and `{colors.accent-teal}` (mint) as light sources or hover signals — not as filled backgrounds.
5. Apply particle palette in depth order: `{colors.accent-purple}` → `{colors.accent-deep-purple}` → `{colors.accent-cyan}` for generative effects.
6. Keep all corners sharp (`{rounded.none}`). The single exception — scrollbar thumb at 4px — is a browser affordance.
7. Write copy in architectural fragments: uppercase, slashes, code notation. Never full marketing sentences in display positions.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Active Theory. Brand names and trademarks belong to their respective owners.