Toggle theme:
A cyberpunk-inspired design system featuring electric cyan accents, dark mode dominance, and futuristic UI patterns.
The Tech Noir color palette features a sophisticated gray scale with electric cyan accents.
Type scale and font weights for the Tech Noir design system.
Display Title
Large text (text-lg) — Used for introductory paragraphs and important descriptions.
Base text (text-base) — The standard body text size for most content.
Small text (text-sm) — Used for secondary information and metadata.
Extra small (text-xs) — For fine print, labels, and timestamps.
Thin (100)
Light (300)
Regular (400)
Medium (500)
Semibold (600)
Bold (700)
const techNoir = {
theme: "cyberpunk",
accent: "cyan",
darkMode: true
}Interactive button variants and sizes with Tech Noir styling.
Form controls with various states and configurations.
Various card styles for different use cases.
The default card with header and content areas. Used for general content containers.
A card with a subtle cyan glow effect that adds depth and visual interest.
Card with an animated gradient border that creates a vibrant, dynamic edge.
Interactive card with a spotlight effect that follows your cursor movement.
With pulsing animation
Custom glow color for warnings
Status indicators and labels.
Contextual feedback messages.
Lucide icon library integration with Tech Noir styling.
Special visual effects and animations.
Default Gradient
Purple to Red
Green Emerald
Animated Gradient
Move your cursor over this card to see the spotlight effect in action. It creates an engaging, dynamic feel that draws attention.