SilkCircuit Design Language

April 19, 2026 · View on GitHub

The complete visual identity system for the electric digital aesthetic

Table of Contents

  1. Brand Identity
  2. Color System
  3. Typography
  4. Spacing & Layout
  5. Motion & Animation
  6. Component Patterns
  7. Iconography
  8. Application Guidelines
  9. Accessibility Standards
  10. Real-world Examples

🎭 Brand Identity

Core Philosophy

"Electric meets elegant"

SilkCircuit embodies the intersection of high-energy digital aesthetics and sophisticated design. We create experiences that energize without overwhelming, guide without distracting.

Brand Personality

Electric ⚡ - Vibrant, energetic, forward-looking

  • High contrast, saturated neon colors
  • Sharp, precise visual elements
  • Dynamic energy that sparks creativity

Elegant 💎 - Refined, purposeful, sophisticated

  • Thoughtful color hierarchy and semantic meaning
  • Clean typography with careful spacing
  • Purposeful design that enhances focus

Purposeful 🎯 - Functional, semantic, intentional

  • Every color carries semantic meaning
  • Form follows function in all decisions
  • Accessibility-first approach (WCAG AA compliance)

Future-forward 🌌 - Modern, progressive, innovative

  • Embraces modern development tools
  • Anticipates developer workflow needs
  • Evolves with the development ecosystem

Focused 💜 - Clear, direct, uncluttered

  • Reduces cognitive load during coding
  • Enhances developer productivity
  • Maintains coding flow state

Voice & Tone

Voice: Confident yet approachable, technical yet accessible Tone:

  • Documentation: Clear, precise, helpful
  • Error Messages: Direct but supportive
  • Success States: Celebratory but professional
  • Marketing: Electric energy with substance

🎨 Color System

Variant-Specific Color Systems

SilkCircuit uses five carefully crafted variants, each with precisely tuned colors:

⚡ Neon (100% intensity)

Background System:

  • Base: #12101a | Dark: #0a0812 | Highlight: #1a162a

Primary Colors:

  • Electric Purple (#e135ff) - Keywords, control flow, importance
  • Pure Pink (#ff00ff) - Tags, booleans, emphasis
  • Neon Cyan (#80ffea) - Functions, methods, interaction
  • Coral (#ff6ac1) - Numbers, constants
  • Electric Yellow (#f1fa8c) - Classes, types, warnings

⚡ Vibrant (85% intensity)

Background System:

  • Base: #0f0c1a | Dark: #08060f | Highlight: #0a0614

Primary Colors:

  • Pure Magenta (#ff00ff) - Maximum intensity purple
  • Electric Pink (#ff00cc) - Vibrant but controlled
  • Electric Cyan (#00ffcc) - High-energy interaction color
  • Coral (#F78C6C) - Warm accent for numbers
  • Electric Yellow (#ffcc00) - Strong type highlighting

🌸 Soft (70% intensity)

Background System:

  • Base: #1a1626 | Dark: #141220 | Highlight: #3e3456

Primary Colors:

  • Soft Purple (#e892ff) - Gentle keywords
  • Soft Pink (#ff99ff) - Comfortable string colors
  • Soft Cyan (#99ffee) - Easy-on-eyes functions
  • Soft Coral (#ff99dd) - Muted numbers
  • Soft Yellow (#ffe699) - Gentle type highlighting

🌌 Glow (Maximum contrast)

Background System:

  • Base: #0a0816 | Dark: #000000 | Highlight: #1a0033

Primary Colors:

  • Pure Magenta (#ff00ff) - Maximum contrast keywords
  • Pure Pink (#ff00ff) - Ultra-bright emphasis
  • Pure Cyan (#00ffff) - Electric function highlighting
  • Bright Pink (#ff66ff) - High-contrast numbers
  • Pure Yellow (#ffff00) - Maximum visibility types

🌅 Dawn (Light theme)

Background System:

  • Base: #faf8ff | Dark: #f1ecff | Highlight: #e8e0ff

Primary Colors:

  • Deep Purple (#7e2bd5) - Keywords with strong contrast
  • Magenta (#b40077) - Tags, booleans, emphasis
  • Teal (#007f8e) - Functions, methods, interaction
  • Coral (#c74a8c) - Numbers, constants
  • Golden Yellow (#a88600) - Classes, types, warnings

Text System:

  • Foreground: #2b2540 (dark purple-gray)
  • Muted: #8e84a8 (gray-purple for comments)
  • Emphasized: #1a1318 (near-black)

Universal Supporting Colors

Success Green (#50fa7b / Soft: #66ff99 / Glow: #00ff00 / Dawn: #2d8659)

  • Success states, git additions, confirmations
  • Semantic: Growth, positive actions, validation
  • Applications: Success messages, add buttons, valid states

Warning Yellow (#f1fa8c / Soft: #ffe699 / Glow: #ffff00 / Dawn: #a88600)

  • Caution, attention, modification
  • Semantic: Alert, change, pending
  • Applications: Warning messages, modified indicators

Error Red (#ff6363 / Soft: #ff6677 / Glow: #ff0066 / Dawn: #c1272d)

  • Errors, deletions, danger
  • Semantic: Stop, danger, removal
  • Applications: Error messages, delete buttons, invalid states

Semantic Color Mapping (All Variants)

Code Syntax:

Keywords     → Purple (bold)
Functions    → Cyan (bold + italic)
Strings      → Pink Soft (italic)
Numbers      → Coral
Booleans     → Pink
Types        → Yellow
Comments     → Purple Muted (italic)
Operators    → Foreground Dark
Properties   → Cyan Bright

Interactive States:

  • Hover: Add 10% brightness to base color
  • Active: Invert foreground/background
  • Focus: Add cyan glow (0 0 0 2px #80ffea40)
  • Disabled: 50% opacity
  • Selection: Variant-specific with transparency

📝 Typography

Font Stacks

Primary (UI Text):

font-family:
  "Inter",
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  "Helvetica Neue",
  Arial,
  sans-serif;

Code/Monospace:

font-family:
  "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", "Monaco", "Menlo", "Roboto Mono",
  monospace;

Display (Headlines):

font-family:
  "Inter",
  -apple-system,
  BlinkMacSystemFont,
  sans-serif;

Type Scale

Mobile (320px+)

--sc-text-xs: 0.75rem (12px) --sc-text-sm: 0.875rem (14px) --sc-text-base: 1rem (16px)
  --sc-text-lg: 1.125rem (18px) --sc-text-xl: 1.25rem (20px) --sc-text-2xl: 1.5rem (24px)
  --sc-text-3xl: 1.875rem (30px) --sc-text-4xl: 2.25rem (36px);

Desktop (1024px+)

--sc-text-xs: 0.75rem (12px) --sc-text-sm: 0.875rem (14px) --sc-text-base: 1rem (16px)
  --sc-text-lg: 1.125rem (18px) --sc-text-xl: 1.25rem (20px) --sc-text-2xl: 1.5rem (24px)
  --sc-text-3xl: 2rem (32px) --sc-text-4xl: 2.5rem (40px) --sc-text-5xl: 3rem (48px);

Code Typography

Syntax Styling:

.sc-keyword {
  font-weight: 700;
  color: var(--sc-purple);
}

.sc-function {
  font-weight: 700;
  font-style: italic;
  color: var(--sc-cyan);
}

.sc-string {
  font-style: italic;
  color: var(--sc-pink-soft);
}

.sc-comment {
  font-style: italic;
  color: var(--sc-purple-muted);
  opacity: 0.8;
}

📐 Layout & Spacing

Grid System

Base Unit: 4px (follows modern design system standards)

Spacing Scale:

/* SilkCircuit spacing tokens */
--sc-space-xs: 4px (0.25rem) /* Micro spacing */ --sc-space-sm: 8px (0.5rem) /* Small gaps */
  --sc-space-md: 16px (1rem) /* Base spacing */ --sc-space-lg: 24px (1.5rem) /* Section spacing */
  --sc-space-xl: 32px (2rem) /* Large gaps */ --sc-space-2xl: 48px (3rem) /* Major sections */
  --sc-space-3xl: 64px (4rem) /* Page sections */;

Grid Layout:

/* Mobile-first responsive grid */
.sc-grid {
  display: grid;
  gap: var(--sc-space-md);
  grid-template-columns: repeat(4, 1fr); /* Mobile */
}

@media (min-width: 768px) {
  .sc-grid {
    grid-template-columns: repeat(8, 1fr);
  } /* Tablet */
}

@media (min-width: 1024px) {
  .sc-grid {
    grid-template-columns: repeat(12, 1fr);
  } /* Desktop */
}

Responsive Breakpoints:

--sc-breakpoint-xs: 320px /* Mobile portrait */ --sc-breakpoint-sm: 768px /* Tablet portrait */
  --sc-breakpoint-md: 1024px /* Tablet landscape/Small desktop */ --sc-breakpoint-lg: 1440px
  /* Desktop */ --sc-breakpoint-xl: 1920px /* Large desktop */;

⚡ Motion & Animation

Timing Functions

--sc-ease-linear: linear --sc-ease-in: cubic-bezier(0.4, 0, 1, 1)
  --sc-ease-out: cubic-bezier(0, 0, 0.2, 1) --sc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
  --sc-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1)
  --sc-ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

Duration Scale

--sc-duration-fast: 150ms --sc-duration-normal: 250ms --sc-duration-slow: 350ms
  --sc-duration-slower: 500ms;

Signature Animations

Neon Glow:

@keyframes neonGlow {
  from {
    filter: drop-shadow(0 0 10px var(--sc-purple) 40);
  }
  to {
    filter: drop-shadow(0 0 20px var(--sc-purple) 80);
  }
}

Electric Pulse:

@keyframes electricPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

Cyber Slide:

@keyframes cyberSlide {
  from {
    transform: translateX(-100%) skewX(25deg);
  }
  to {
    transform: translateX(0) skewX(0);
  }
}

🧩 Component Patterns

Buttons

Primary Button:

.sc-btn-primary {
  background: linear-gradient(45deg, var(--sc-purple), var(--sc-pink));
  color: white;
  border: none;
  padding: var(--sc-space-sm) var(--sc-space-lg);
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--sc-duration-normal) var(--sc-ease-out);
}

.sc-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--sc-purple) 40;
  filter: brightness(1.1);
}

Ghost Button:

.sc-btn-ghost {
  background: transparent;
  color: var(--sc-cyan);
  border: 1px solid var(--sc-cyan);
  padding: var(--sc-space-sm) var(--sc-space-lg);
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--sc-duration-normal) var(--sc-ease-out);
}

.sc-btn-ghost:hover {
  background: var(--sc-cyan);
  color: var(--sc-bg);
  box-shadow: 0 0 20px var(--sc-cyan) 30;
}

Cards

.sc-card {
  background: var(--sc-bg-highlight);
  border: 1px solid var(--sc-cyan) 20;
  border-radius: 8px;
  padding: var(--sc-space-lg);
  transition: all var(--sc-duration-normal) var(--sc-ease-out);
}

.sc-card:hover {
  border-color: var(--sc-cyan) 60;
  box-shadow: 0 4px 20px var(--sc-cyan) 10;
  transform: translateY(-2px);
}

Form Inputs

.sc-input {
  background: var(--sc-bg-dark);
  border: 1px solid var(--sc-purple) 30;
  color: var(--sc-fg);
  padding: var(--sc-space-sm);
  border-radius: 4px;
  font-family: inherit;
  transition: all var(--sc-duration-fast) var(--sc-ease-out);
}

.sc-input:focus {
  outline: none;
  border-color: var(--sc-cyan);
  box-shadow: 0 0 0 2px var(--sc-cyan) 20;
}

🎯 Iconography

Icon Style Principles

  • Line weight: 2px stroke
  • Corner radius: 2px for rounded elements
  • Grid: 24px base, scalable
  • Style: Outline with selective fills

Preferred Symbols

Navigation:   →  ←  ↑  ↓  ↗  ↙  ⟶  ⟵
Bullets:      •  ▪  ▫  ◦  ●  ○  ▲  ▼
Status:       √  ×  !  ?  ✓  ✗  ⚠  ℹ
Code:         ⟨  ⟩  ❮  ❯  ‹  ›  «  »
Electric:     ⚡  ⭐  ✨  💎  💜  🌟  ⭑

Icon Color Usage

  • Active state: Primary variant color (purple/cyan)
  • Inactive state: 60% opacity
  • Success: Green
  • Warning: Yellow
  • Error: Red
  • Info: Cyan

📱 Application Guidelines

Code Editors

  • Background: Use variant-specific background system
  • Syntax: Follow semantic color mapping precisely
  • UI Chrome: Muted backgrounds with electric accents
  • Selections: Translucent overlays with variant colors

Web Applications

  • Layout: Clean, spacious, focus-driven
  • Navigation: Electric accents guide user flow
  • Cards/Panels: Subtle borders with hover effects
  • Forms: Clear validation with color-coded feedback

Mobile Applications

  • Touch Targets: Minimum 44px tap areas
  • Contrast: Enhanced for outdoor visibility
  • Typography: Larger base sizes for readability
  • Gestures: Visual feedback with electric animations

Marketing Materials

  • Hero Sections: Gradient backgrounds with glow effects
  • CTAs: High-energy gradient buttons
  • Typography: Bold headlines with electric colors
  • Imagery: High contrast with neon accents

♿ Accessibility Standards

WCAG AA Compliance

All SilkCircuit color combinations meet or exceed WCAG AA standards:

Contrast Ratios:

  • Normal text: 4.5:1 minimum ✓
  • Large text (18pt+): 3:1 minimum ✓
  • UI elements: 3:1 minimum ✓
  • Graphics: 3:1 minimum ✓

Variant Accessibility

  • Neon: Full WCAG AA compliance
  • Vibrant: Enhanced contrast for bright environments
  • Soft: Optimized for extended use, reduces eye strain
  • Glow: Maximum contrast for low-light conditions
  • Dawn: Light theme optimized for bright environments and daytime use

Testing Tools

# Neovim command for contrast validation
:SilkCircuitContrast

# Web accessibility testing
npm install -g @axe-core/cli
axe-cli --tags wcag2a,wcag2aa

Keyboard Navigation

  • Focus indicators use cyan glow (#80ffea)
  • Tab order follows logical content flow
  • All interactive elements keyboard accessible
  • Skip links available for screen readers

Screen Reader Support

  • Semantic HTML structure
  • Proper ARIA labels and roles
  • Color information never conveyed through color alone
  • Alternative text for all meaningful graphics

🌍 Real-world Examples

Variant-Aware Code Editor Implementation

/* SilkCircuit base editor styles */
.silkcircuit-editor {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.2s ease;
}

/* Neon variant */
.silkcircuit-editor[data-variant="neon"] {
  background-color: #12101a;
  color: #f8f8f2;
}

.silkcircuit-editor[data-variant="neon"] .sc-keyword {
  color: #e135ff;
  font-weight: bold;
}
.silkcircuit-editor[data-variant="neon"] .sc-string {
  color: #ff99ff;
  font-style: italic;
}
.silkcircuit-editor[data-variant="neon"] .sc-function {
  color: #80ffea;
  font-weight: bold;
  font-style: italic;
}

/* Vibrant variant */
.silkcircuit-editor[data-variant="vibrant"] {
  background-color: #0f0c1a;
  color: #f8f8f2;
}

.silkcircuit-editor[data-variant="vibrant"] .sc-keyword {
  color: #ff00ff;
  font-weight: bold;
}
.silkcircuit-editor[data-variant="vibrant"] .sc-string {
  color: #ff99ff;
  font-style: italic;
}
.silkcircuit-editor[data-variant="vibrant"] .sc-function {
  color: #00ffcc;
  font-weight: bold;
  font-style: italic;
}

/* Soft variant */
.silkcircuit-editor[data-variant="soft"] {
  background-color: #1a1626;
  color: #f8f8f2;
}

.silkcircuit-editor[data-variant="soft"] .sc-keyword {
  color: #e892ff;
  font-weight: bold;
}
.silkcircuit-editor[data-variant="soft"] .sc-string {
  color: #ffc2ff;
  font-style: italic;
}
.silkcircuit-editor[data-variant="soft"] .sc-function {
  color: #99ffee;
  font-weight: bold;
  font-style: italic;
}

/* Glow variant */
.silkcircuit-editor[data-variant="glow"] {
  background-color: #0a0816;
  color: #ffffff;
}

.silkcircuit-editor[data-variant="glow"] .sc-keyword {
  color: #ff00ff;
  font-weight: bold;
  text-shadow: 0 0 5px #ff00ff40;
}
.silkcircuit-editor[data-variant="glow"] .sc-string {
  color: #ff99ff;
  font-style: italic;
}
.silkcircuit-editor[data-variant="glow"] .sc-function {
  color: #00ffff;
  font-weight: bold;
  font-style: italic;
  text-shadow: 0 0 5px #00ffff40;
}

/* Dawn variant (light theme) */
.silkcircuit-editor[data-variant="dawn"] {
  background-color: #faf8ff;
  color: #2b2540;
}

.silkcircuit-editor[data-variant="dawn"] .sc-keyword {
  color: #7e2bd5;
  font-weight: bold;
}
.silkcircuit-editor[data-variant="dawn"] .sc-string {
  color: #9c4a88;
  font-style: italic;
}
.silkcircuit-editor[data-variant="dawn"] .sc-function {
  color: #007f8e;
  font-weight: bold;
  font-style: italic;
}

Web Dashboard with Variant Support

.silkcircuit-dashboard {
  min-height: 100vh;
  color: #f8f8f2;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

/* Neon variant dashboard */
.silkcircuit-dashboard[data-variant="neon"] {
  background: linear-gradient(135deg, #12101a 0%, #0a0812 100%);
}

.silkcircuit-dashboard[data-variant="neon"] .sc-card {
  background: #1a162a;
  border: 1px solid #80ffea40;
  border-radius: 8px;
  padding: var(--sc-space-lg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.silkcircuit-dashboard[data-variant="neon"] .sc-card:hover {
  border-color: #80ffea;
  box-shadow: 0 4px 20px #80ffea20;
  transform: translateY(-2px);
}

/* Glow variant dashboard */
.silkcircuit-dashboard[data-variant="glow"] {
  background: linear-gradient(135deg, #0a0816 0%, #000000 100%);
  color: #ffffff;
}

.silkcircuit-dashboard[data-variant="glow"] .sc-card {
  background: #1a0033;
  border: 1px solid #00ffff40;
  box-shadow: 0 0 10px #ff00ff20;
}

.silkcircuit-dashboard[data-variant="glow"] .sc-card:hover {
  border-color: #00ffff;
  box-shadow:
    0 0 20px #ff00ff40,
    0 4px 20px #00ffff20;
  transform: translateY(-2px);
}

React Native Multi-Variant Theme

// SilkCircuit React Native theme system
const variantColors = {
  neon: {
    primary: "#e135ff",
    secondary: "#ff99ff",
    accent: "#80ffea",
    background: "#12101a",
    surface: "#1a162a",
    text: "#f8f8f2"
  },
  vibrant: {
    primary: "#ff00ff",
    secondary: "#ff99ff",
    accent: "#00ffcc",
    background: "#0f0c1a",
    surface: "#0a0614",
    text: "#f8f8f2"
  },
  soft: {
    primary: "#e892ff",
    secondary: "#ffc2ff",
    accent: "#99ffee",
    background: "#1a1626",
    surface: "#3e3456",
    text: "#f8f8f2"
  },
  glow: {
    primary: "#ff00ff",
    secondary: "#ff99ff",
    accent: "#00ffff",
    background: "#0a0816",
    surface: "#1a0033",
    text: "#ffffff"
  },
  dawn: {
    primary: "#7e2bd5",
    secondary: "#9c4a88",
    accent: "#007f8e",
    background: "#faf8ff",
    surface: "#f1ecff",
    text: "#2b2540"
  }
}

export const createSilkCircuitTheme = (variant = "neon") => ({
  colors: {
    ...variantColors[variant],
    success: variant === "glow" ? "#00ff00" : variant === "dawn" ? "#2d8659" : "#50fa7b",
    warning: variant === "glow" ? "#ffff00" : variant === "dawn" ? "#a88600" : "#f1fa8c",
    error: variant === "glow" ? "#ff0066" : variant === "dawn" ? "#c1272d" : "#ff6363"
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
    xxl: 48
  },
  typography: {
    h1: {
      fontSize: 28,
      fontWeight: "700",
      color: variantColors[variant].primary,
      lineHeight: 32
    },
    body: {
      fontSize: 16,
      fontWeight: "400",
      color: variantColors[variant].text,
      lineHeight: 22
    },
    code: {
      fontFamily: Platform.OS === "ios" ? "SF Mono" : "monospace",
      fontSize: 14,
      color: variantColors[variant].accent
    }
  }
})

Terminal Configuration (All Variants)

// Neon variant terminal theme
{
  "name": "SilkCircuit Neon",
  "background": "#12101a",
  "foreground": "#f8f8f2",
  "cursor": "#80ffea",
  "selection": "#44475a",
  "black": "#12101a",
  "red": "#ff99ff",
  "green": "#50fa7b",
  "yellow": "#f1fa8c",
  "blue": "#e135ff",
  "magenta": "#ff00ff",
  "cyan": "#80ffea",
  "white": "#f8f8f2"
}

// Glow variant terminal theme
{
  "name": "SilkCircuit Glow",
  "background": "#0a0816",
  "foreground": "#ffffff",
  "cursor": "#00ffff",
  "selection": "#ff00ff44",
  "black": "#000000",
  "red": "#ff0066",
  "green": "#00ff00",
  "yellow": "#ffff00",
  "blue": "#0099ff",
  "magenta": "#ff00ff",
  "cyan": "#00ffff",
  "white": "#ffffff"
}

// Dawn variant terminal theme (light)
{
  "name": "SilkCircuit Dawn",
  "background": "#faf8ff",
  "foreground": "#2b2540",
  "cursor": "#7e2bd5",
  "selection": "#d4c8f0",
  "black": "#2b2540",
  "red": "#c1272d",
  "green": "#2d8659",
  "yellow": "#a88600",
  "blue": "#2563eb",
  "magenta": "#7e2bd5",
  "cyan": "#007f8e",
  "white": "#faf8ff"
}

Marketing Hero Section with Variant Theming

/* Base hero styles */
.silkcircuit-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

/* Neon variant hero */
.silkcircuit-hero[data-variant="neon"] {
  background:
    radial-gradient(circle at center, #e135ff20 0%, transparent 50%),
    linear-gradient(135deg, #12101a 0%, #0a0812 100%);
}

.silkcircuit-hero[data-variant="neon"] .hero-title {
  background: linear-gradient(45deg, #e135ff, #ff99ff, #80ffea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: neonGlow 2s ease-in-out infinite alternate;
}

@keyframes neonGlow {
  from {
    filter: drop-shadow(0 0 20px #e135ff40);
  }
  to {
    filter: drop-shadow(0 0 40px #e135ff80);
  }
}

/* Glow variant hero */
.silkcircuit-hero[data-variant="glow"] {
  background:
    radial-gradient(circle at center, #ff00ff30 0%, transparent 50%),
    linear-gradient(135deg, #0a0816 0%, #000000 100%);
}

.silkcircuit-hero[data-variant="glow"] .hero-title {
  background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ultraGlow 2s ease-in-out infinite alternate;
}

@keyframes ultraGlow {
  from {
    filter: drop-shadow(0 0 30px #ff00ff60) drop-shadow(0 0 60px #00ffff40);
  }
  to {
    filter: drop-shadow(0 0 50px #ff00ff80) drop-shadow(0 0 80px #00ffff60);
  }
}

/* Responsive hero title */
.hero-title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 800;
  margin-bottom: var(--sc-space-lg);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

🎯 Best Practices

DO ✓

  • Use semantic colors consistently across all applications
  • Maintain WCAG AA contrast ratios in all variants
  • Apply glow effects sparingly for maximum impact
  • Follow the 4px spacing scale for all layouts
  • Test across all five variants before shipping
  • Use CSS custom properties for easy variant switching

DON'T ✗

  • Mix semantic meanings between contexts
  • Use more than 3 electric colors in one interface section
  • Apply bright backgrounds to large text areas
  • Override contrast ratios for aesthetic reasons
  • Use animations that distract from content
  • Forget to test keyboard navigation

🚀 Implementation Checklist

When creating new SilkCircuit implementations:

Planning Phase

  • Define which variants will be supported
  • Map design elements to semantic color meanings
  • Plan responsive breakpoints and scaling
  • Consider accessibility requirements

Development Phase

  • Implement CSS custom properties for variant switching
  • Add semantic class names (.sc-keyword, .sc-function, etc.)
  • Test all interactive states (hover, focus, active, disabled)
  • Validate contrast ratios with automated tools

Testing Phase

  • Test across all supported variants
  • Validate keyboard navigation paths
  • Run automated accessibility tests
  • Test on different devices and screen sizes
  • Verify performance with animations enabled

Launch Phase

  • Document variant usage in user guides
  • Provide easy variant switching mechanism
  • Monitor user feedback on color preferences
  • Plan iteration based on usage analytics

Remember: SilkCircuit is about enhancing focus through purposeful electric energy. Every glow should serve the user's workflow.