Visual System · v1

Phantom Technologies
Design System

A restrained, executive visual language for an enterprise transformation firm. Built on a near-black foundation, warm-white contrast, a single controlled accent, and editorial typography. Every element is designed to communicate that Phantom works on consequential operational problems inside established companies.

01 · Color

A controlled palette, derived from the brand.

One near-black foundation. One warm white for contrast. One accent. No decorative secondaries, no neon, no gradients.

Background#0D0F12
var(--background)
Surface (Card)#121519
var(--card)
Foreground#EDE7DA
var(--foreground)
Muted Foreground#8E8A82
var(--muted-foreground)
Primary · Accent#C2965C
var(--primary)
Border#23272E
var(--border)
Inverse Surface#F4F1EA
var(--surface-inverse)
Inverse Foreground#14171C
var(--surface-inverse-foreground)
02 · Typography

Editorial scale. Decisive headlines.

Fraunces for display — a serif with presence and restraint. Inter for body — engineered clarity. Two families, one disciplined hierarchy.

Display XL
Operational leverage at scale.
Display L
Redesigning how work moves.
Display M
From fragmentation to one flow.
Display S
The engagement
Lead
As companies grow, operational complexity grows faster than output.
Body
Phantom redesigns the workflows that control how work moves through an established company — then implements the systems that make execution durable.
Eyebrow
The Approach
03 · Actions

Buttons earn their weight.

One primary. One outline. One ghost. Used sparingly — the primary appears once per view where possible.

04 · Structure

Cards and metrics, architecturally restrained.

Hairline borders. No glass. No glow. No floating shadows. Content leads; the container stays quiet.

01

Handoffs

Where work stalls between teams. We redesign the seams.

02

Systems

Disconnected tools become one execution flow.

03

Visibility

Leadership sees the operation, not just the reports.

04

Manual Work

Effort that doesn't scale is engineered out.

01Engagement phase
02Engagement phase
03Engagement phase
04Engagement phase

Stat values are structural placeholders. Live statistics are populated only from verified engagement data — never fabricated.

05 · Motion

Motion demonstrates concepts, not decoration.

Reveal on scroll, once. Controlled easing. No loops, no parallax tricks. Animation is used to show operational change — fragmentation becoming coordination, friction becoming flow, output rising while overhead grows slowly.

Fragmented → Coordinated

Separate elements converge into alignment — a single, coordinated flow.

Friction → Flow

Resistance removed from the path. Work moves without stalling.

Output ↑ · Overhead →

Capacity rises faster than cost — the definition of operating leverage.

06 · Spacing & Grid

Generous. Architectural. Consistent.

Sections breathe at py-24 md:py-32. Content max-width at max-w-7xl, with narrow (max-w-3xl) for reading and wide for diagrams. The 12-column grid governs layout; hairlines govern separation.

07 · Accessibility

Quietly, rigorously accessible.

WCAG AA contrast across every token pair. Focus rings visible against the dark foundation. Motion respects prefers-reduced-motion. Semantic landmarks, keyboard-reachable actions, no information conveyed by color alone.

Visual system established. The full site builds on these primitives — no page introduces new colors, type, or components without first extending this system.