Docs/Design System
FOUGHT DOCUMENTATION

Design System

Dark Precision V6.0 — Military-grade design system with custom cursor, canvas effects, and glassmorphism cards.

§ 01

Color Tokens

Backgrounds — Deep Blacks

--bg
#02020A
--surface
#07070F
--surface-2
#0C0C16
--surface-3
#111120

Text & Borders

TokenValueUsage
--white#F0EFEDPrimary text
--mutedrgba(240,239,237,0.36)Secondary text
--borderrgba(255,255,255,0.06)Default borders
--border-brgba(255,255,255,0.09)Bright borders
--border-redrgba(201,28,28,0.28)Red-tinted borders
--border-goldrgba(196,150,58,0.32)Gold-tinted borders
§ 02

Typography

Font Stack

RoleFontWeightUsage
DisplayBebas Neue400h1-h4, hero titles
BodyBarlow Condensed300-700p, labels, nav, buttons
Mono/DataDM Mono300-500Section numbers, badges, version
§ 03

Custom Cursor System

5-Element Cursor (Desktop Only)

CORE RULE: cursor: none
ElementSizeMovementLerpz-index
Dot5x5pxZERO LAG1.099999
Ring28x28px (hover: 44x44)Floating0.0999998
Cross H16x0.5pxDirect1.099997
Cross V0.5x16pxDirect1.099997
Mouse Light650x650pxVery slow0.0328
§ 04

Canvas Effects

Background System — Multi-Layer

LayerTypez-indexDescription
Aurora CanvasCanvas25 color blobs, mouse-reactive
Particle CanvasCanvas652 particles, 8 deg drift
Mouse TrailCanvas844-point trail, 420ms fade
Grain OverlayCSS ::after9000SVG feTurbulence
Scan LinesCSS ::before89994px period
VignetteCSS3Radial gradient, 10s breathing
Glow OrbsCSS13 orbs: BL red, TR dark red, BR gold
§ 05

Cards & Buttons

Card — Dark Precision Glassmorphism

.card {
  background: rgba(10, 10, 18, 0.55);
  border: 0.5px solid var(--border);
  border-radius: 3px;                    /* MAX 3px */
  backdrop-filter: blur(24px) saturate(150%);
  padding: 32px;
}

Button System

PRIMARY (RED)

GOLD

FOUGHT — DARK PRECISION V6.0
SYSTEMS ONLINE