Phantom Digital's visual identity is a technical, precise, and quietly luminous system — designed around a near-black canvas with cool blue-gray typography and a single electric iris violet accent.
A restrained, monochromatic system anchored on Midnight Ink. The single violet accent — Electric Iris — carries every primary call to action.
Three families govern hierarchy: Aeonik Pro for display, Untitled Sans for body, and Dot Digital for structural labels.
Interactive elements use a 2px radius. Informational surfaces use 10–16px. Only Electric Iris appears on primary calls to action.
For highlighting featured or interactive content blocks.
Default elevated surface with inset hairline.
Depth is conveyed through soft blue glows and inset hairlines — never drop shadows. Elevation reads as light, not as weight.
:root {
/* Colors */
--color-midnight-ink: #05060f;
--color-graphite-plate: #2f343e;
--color-steel-border: #3f4959;
--color-fog: #81899b;
--color-pebble: #9da7ba;
--color-moonlight: #c7d3ea;
--color-ice: #d1e4fa;
--color-glacier: #d8ecf8;
--color-frost-link: #b6d9fc;
--color-electric-iris: #663af3;
--color-ember: #e46d4c;
--color-azure: #027dea;
--color-cipher-mint: #269684;
/* Typography */
--font-untitled-sans: 'Untitled Sans', sans-serif;
--font-aeonikpro: 'Aeonik Pro', sans-serif;
--font-dotdigital: 'Dot Digital', monospace;
/* Spacing */
--spacing-unit: 4px;
--spacing-120: 120px;
/* Radius */
--radius-sm: 2px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-2xl: 16px;
--radius-full: 999px;
/* Shadows */
--shadow-sm: rgba(186, 207, 247, 0.32) 0 0 6px 0;
--shadow-md: rgba(238, 186, 247, 0.24) 0 0 12px 0;
--shadow-subtle: rgba(186, 215, 247, 0.12) 0 0 0 1px inset;
}Use only Electric Iris as the primary accent. Ember, Azure, and Cipher Mint serve as secondary accents but never for primary CTAs.
Display font for headers above 28px. Workhorse font for body and caption. Label font reserved for structural eyebrows only.
Apply border radius and shadows uniformly. Interactive elements at 2px, informational surfaces at 10–16px. No drop shadows — only glows.
Layout remains centered, clean, and vertically rhythmic with a 1200px max width and 120px section gaps.