Blacksite Protocol
Design Direction
This system is designed for interfaces that exist inside the fiction of the world, not outside it. A surveillance dashboard, a black-market exchange, a corporate intranet from a company that owns three governments. The mesh texture underneath every surface reads as a circuit substrate. Flat elevation is rejected entirely; dramatic layered shadows with coloured glows make depth feel dangerous rather than material. Nothing here is comfortable or neutral. Every token is pushed toward an extreme.
Colour Strategy
The primary is an overdriven acid cyan — the colour of corrupted terminal text and flooded street reflections at 3am. Its split-complement is a hot magenta-pink, maximum chromatic tension, the kind that reads as broken neon tubing on wet concrete. A third color, a toxic sulfur yellow, functions as the warning accent: it sits far enough from both to feel like interference, not harmony. All three are pushed to near-maximum saturation because this system is not calm. The dark surfaces are near-black with a slight cool tilt, keeping the neons from bleeding into each other.
Typography Strategy
Orbitron at weight 900 with wide tracking is the visual equivalent of a stamped serial number on contraband hardware. The uppercase geometry is rigid and institutional, which is exactly right for a world where corporations name things in acronyms. IBM Plex Mono for the body is not a stylistic choice, it is a functional one: mono spacing enforces a data-terminal reading texture, every line feels like a log entry. The 1.414 scale creates sharp size jumps between levels so hierarchy is unmissable even on noise-heavy dark surfaces.
Colour Palette
primary
#3ccfdd
secondary
#d54480
accent
#eede2b
neutral
#889091
success
#4ace60
warning
#daa13e
error
#ce4a60
info
#4a8cce
Typography
Design is intelligence made visible
Great typography is the foundation of great design. The pairing of heading and body typefaces creates a visual hierarchy that guides the reader through content with clarity and purpose, while expressing personality at every level.
Selection colour · highlighted text looks like this · try selecting any text on this page
Spacing
2px base unit · compact density
Border radius
none
0px
sm
2px
md
5px
lg
10px
xl
16px
full
9999px
Elevation
Shadows
0 2px 8px rgba(0, 0, 0, 0.4), 0 0 4px rgba(60, 207, 221, 0.1)
0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(60, 207, 221, 0.15)
0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(60, 207, 221, 0.2)
Texture
mesh · opacity 1 · normal blend
Grid
dense · 16 columns · 12px gutter · 16px margin · 1440px max
Motion
Hover, click, and interact to see the motion tokens in action.
50ms
100ms
180ms
250ms
400ms
Easings
Hover states, colour changes, most transitions
cubic-bezier(0.2, 0, 0, 1)
Elements appearing - modals, dropdowns, toasts
cubic-bezier(0, 0, 0.2, 1)
Elements leaving - dismissals, close animations
cubic-bezier(0.4, 0, 1, 1)
Playful feedback - toggles, badges, confirmations
cubic-bezier(0.34, 1.56, 0.64, 1)
Physics-based - drag, gestures, elastic effects
cubic-bezier(0.22, 1.2, 0.36, 1)
Iconography
Icon style derived from the system's personality, mood, and visual tokens.
Recommended library
Tabler Icons
Developer-friendly icons with a consistent grid system
Browse Tabler Icons ↗Also consider Radix Icons — Minimal, precise icons for component-driven design systems
Stroke weight
1.5px
Matches border width (1px)
Corner rounding
2px
Use for icon containers
Icon set preview (edgy) — 1.5px stroke
Size scale
xs
12px
sm
16px
md
20px
lg
24px
xl
32px
On colour
primary
secondary
accent
muted
error
success
ComponentsPro
Component showcase is a Pro feature
Upgrade to see fully themed buttons, inputs, cards, badges, and more - all wired to this system's tokens.
PatternsPro
Patterns are a Pro feature
Upgrade to see fully themed form layouts, empty states, loading skeletons, and error handling - all built with this system's tokens.
Export
:root {
/* ─── Colors: Primary ─── */
--color-primary-50: #f6f9f9;
--color-primary-100: #e9f0f1;
--color-primary-200: #d0e9ec;
--color-primary-300: #a0e8ee;
--color-primary-400: #74dde7;
--color-primary-500: #3ccfdd;
--color-primary-600: #22b6c3;
--color-primary-700: #1c95a1;
--color-primary-800: #2b6469;
--color-primary-900: #2a3f41;
--color-primary-950: #1c2a2b;
/* ─── Colors: Secondary ─── */
--color-secondary-50: #f9f6f7;
--color-secondary-100: #f1eaed;
--color-secondary-200: #ead1dc;
--color-secondary-300: #eaa3c1;
--color-secondary-400: #e17aa5;
--color-secondary-500: #d54480;
--color-secondary-600: #bb2a67;
--color-secondary-700: #9a2354;
--color-secondary-800: #662e45;
--color-secondary-900: #402b34;
--color-secondary-950: #2a1d23;
/* ─── Colors: Accent ─── */
--color-accent-50: #f9f9f5;
--color-accent-100: #f2f1e9;
--color-accent-200: #efeccd;
--color-accent-300: #f7ef97;
--color-accent-400: #f3e768;
--color-accent-500: #eede2b;
--color-accent-600: #d4c411;
--color-accent-700: #afa10e;
--color-accent-800: #706924;
--color-accent-900: #434128;
--color-accent-950: #2d2b1b;
/* ─── Colors: Neutral ─── */
--color-neutral-50: #f7f8f8;
--color-neutral-100: #eceeee;
--color-neutral-200: #dddfdf;
--color-neutral-300: #c5c9c9;
--color-neutral-400: #aab0b1;
--color-neutral-500: #889091;
--color-neutral-600: #6e7777;
--color-neutral-700: #5b6162;
--color-neutral-800: #474c4d;
--color-neutral-900: #333738;
--color-neutral-950: #222525;
/* ─── Colors: Semantic ─── */
--color-success: #4ace60;
--color-success-light: #202d22;
--color-warning: #daa13e;
--color-warning-light: #2e281e;
--color-error: #ce4a60;
--color-error-light: #2d2022;
--color-info: #4a8cce;
--color-info-light: #20262d;
/* ─── Colors: Surface ─── */
--color-background: #0e1111;
--color-foreground: #e4e6e7;
--color-card: #1a1e1e;
--color-card-foreground: #e4e6e7;
--color-muted: #242828;
--color-muted-foreground: #909798;
--color-border: #2c3030;
--color-input: #222525;
--color-ring: #47c6d1;
/* ─── Typography ─── */
--font-heading: Orbitron, sans-serif;
--font-body: IBM Plex Mono, monospace;
--font-mono: JetBrains Mono, monospace;
/* ─── Spacing ─── */
--space-lg: 14px;
--space-md: 10px;
--space-sm: 5px;
--space-xl: 19px;
--space-xs: 2px;
--space-2xl: 29px;
--space-3xl: 38px;
--space-4xl: 58px;
/* ─── Border Radius ─── */
--radius-lg: 10px;
--radius-md: 5px;
--radius-sm: 2px;
--radius-xl: 16px;
--radius-full: 9999px;
--radius-none: 0px;
/* ─── Shadows ─── */
--shadow-low: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 4px rgba(60, 207, 221, 0.1);
--shadow-mid: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(60, 207, 221, 0.15);
--shadow-high: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(60, 207, 221, 0.2);
--shadow-glow: 0 0 40px rgba(60, 207, 221, 0.3), 0 0 80px rgba(60, 207, 221, 0.15);
/* ─── Motion ─── */
--duration-micro: 50ms;
--duration-fast: 100ms;
--duration-normal: 180ms;
--duration-slow: 250ms;
--duration-glacial: 400ms;
--easing-default: cubic-bezier(0.2, 0, 0, 1);
--easing-entrance: cubic-bezier(0, 0, 0.2, 1);
--easing-exit: cubic-bezier(0.4, 0, 1, 1);
--easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--easing-spring: cubic-bezier(0.22, 1.2, 0.36, 1);
/* ─── Elevation ─── */
--elevation-sunken: #050506;
--elevation-base: #0c0e0e;
--elevation-raised: #1c2121;
--elevation-floating: #2a3132;
--elevation-overlay: #3d4748;
/* ─── Component Scale (compact) ─── */
--comp-padding-x: 8px;
--comp-padding-y: 4px;
--comp-gap: 4px;
--comp-border-width: 1px;
--comp-font-size: 12px;
--comp-input-height: 28px;
--comp-button-height: 28px;
--comp-icon-size: 14px;
/* ─── Grid (dense) ─── */
--grid-columns: 16;
--grid-gutter: 12px;
--grid-margin: 16px;
--grid-max-width: 1440px;
/* ─── Selection ─── */
--selection-bg: #2b6469;
--selection-fg: #e9f0f1;
}Brand Guidelines
Standalone HTML, print to PDF. Colours, typography, spacing, all in one page.
Presentation Deck
PPTX template with palette, typography, and blank slides in your brand.
Figma Tokens
JSON for Tokens Studio plugin. Import colours, type, spacing straight into Figma.
PDF Brand Guide
Full brand guidelines as a real PDF file. Colours and typography rendered exactly.
AI Skill
System prompt you can paste into Cursor or any AI tool to generate on-brand UI instantly.