Skip to main content

ᚦ Color Palette

The Lilith v2.0 identity uses a carefully crafted cyberpunk neon palette that balances cold cyan energy with vibrant magenta accents against deep dark backgrounds.

Primary Colors​

Cyan — The Signal​

Cyan#38bdf8

The primary interaction color. Used for:

  • Links and interactive elements
  • Headings and section titles
  • Active states and hover effects
  • Code syntax highlights
  • Primary buttons and CTAs

Magenta — The Pulse​

Magenta#d946ef

The accent color that creates visual rhythm. Used for:

  • Secondary actions and highlights
  • Warning and important callouts
  • Gradient endpoints (cyan → magenta)
  • Hover state accents
  • Brand emphasis

Supporting Colors​

Aurora — The Whisper​

Aurora#7dd3fc

Lighter cyan for subtle emphasis. Used for:

  • Secondary text on dark backgrounds
  • Hover states on cyan elements
  • Subtle borders and dividers
  • Disabled states (when cyan is too strong)

Gold — The Rune​

Gold#fbbf24

Warm accent for special elements. Used for:

  • Tips and pro-tips admonitions
  • Important milestones and badges
  • Runic decorative elements
  • Warning borders (combined with amber)

Pale — The Frost​

Pale#e2e8f0

Primary text color. Used for:

  • Body text on dark backgrounds
  • Paragraph content
  • List items and descriptions
  • Form labels

Hel — The Void-Purple​

Hel#c026d3

Deep purple for dark emphasis. Used for:

  • Helheim realm identifiers
  • Danger/destructive actions
  • Error states and admonitions
  • Emphasis on deprecated items

Background Hierarchy​

Void — The Deepest Dark​

Void#060810

The absolute darkest background. Used for:

  • Hero sections and landing pages
  • Modal overlays
  • Maximum contrast backgrounds
  • Footer background

Abyss — The Primary Dark​

Abyss#0f172a

The standard dark background. Used for:

  • Main page backgrounds
  • Card backgrounds
  • Sidebar backgrounds
  • Code block backgrounds

Usage Rules​

:::tip Runic Color Rule Never use magenta for primary actions. Cyan is action. Magenta is emphasis. Gold is special. Pale is text. Void and Abyss are structure. :::

Gradient Patterns​

The ecosystem uses specific gradient patterns:

GradientUsageCSS
Cyan → SkyPrimary buttons, CTAslinear-gradient(135deg, #38bdf8, #0ea5e9)
Cyan → MagentaAccent gradients, hero glowslinear-gradient(135deg, #38bdf8, #d946ef)
Void → AbyssBackground transitionslinear-gradient(180deg, #060810, #0f172a)
Void → Deep PurpleHero backgroundslinear-gradient(135deg, #060810, #0f172a 50%, #1a1040)

Glow Effects​

For neon glow effects, use these patterns:

/* Cyan glow */
box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);

/* Magenta glow */
box-shadow: 0 0 20px rgba(217, 70, 239, 0.3);

/* Combined glow (signature) */
box-shadow: 0 0 30px rgba(56, 189, 248, 0.4), 0 0 60px rgba(217, 70, 239, 0.2);

/* Text glow */
text-shadow: 0 0 10px rgba(56, 189, 248, 0.5), 0 0 20px rgba(56, 189, 248, 0.2);