Design Intelligence Archive // v5.0

STYLE.GUIDE

Strategic architectural guidelines for the visual and linguistic identity of the Tactical Suite.

Contrast LevelPLATINUM

Render EngineREACT_19

01. Visual_Philosophy

CYBER-LUXURY_TACTICAL

The interface is designed to evoke a sense of high-stakes, mission-critical technology found in private military or advanced defense sectors. It prioritizes data-density, high-contrast readability, and visceral visual feedback.

NOISE_GRAIN
A 4% opacity fractal noise overlay is mandatory for organic texture.
GLITCH_AESTHETIC
Subtle chromatic aberration on headers provides 'signal drift'.
LUXURY_DARK
Black is never #000, it is #050505 for a matte finish.

02. Color_Manifest

Luxury Black

#050505var(--luxury-black)

Primary Pink

#FF2D7Dvar(--primary-pink)

Accent Cyan

#00F0FFvar(--accent-cyan)

Slate Lead

#0A0A0Avar(--bg-secondary)

Emerald Success

#10B981var(--status-ok)

Amber Warning

#F59E0Bvar(--status-alert)

03. Typography_Logic

Primary Heading // vibe-text

THE_QUICK_BROWN_FOX

Font Family: 'Plus Jakarta Sans', font-weight: 900, italic, tracking: -0.06em

Data Display // technical

0x7F_PROTOCOL_INITIATED

Font Family: 'Space Mono', font-weight: 400

Vibe Text Implementation

.vibe-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.06em;
  line-height: 0.85;
}

04. Motion_SOP

Previewing Spring Physics

All animations must use high-damping springs. Staggered children transitions should have a delay of 0.15s per node to ensure clarity during synchronization.

Stagger Context (Framer)

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15,
      delayChildren: 0.2
    }
  }
};

const itemVariants = {
  hidden: { y: 20, opacity: 0 },
  visible: { 
    y: 0, 
    opacity: 1,
    transition: { duration: 0.6, ease: "easeOut" }
  }
};

05. Utility_Manifest

Luxury Pink Glow

.pink-glow {
  box-shadow: 0 0 50px -10px rgba(255, 45, 125, 0.5);
}

Glass Card Ingest

.glass-card {
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}