Designing a Dark Futuristic Theme with Tailwind v4

The brief

We wanted a dark theme that felt premium but not corporate, futuristic but not gaudy. The result is the DevFlare design system — a dark canvas with warm orange accents, purple and blue secondary tones, and glassmorphism surfaces.

Tailwind v4 theme tokens

Tailwind v4 introduced the @theme directive, which lets you define custom design tokens at the CSS level. Our entire theme lives in tokens.css:

@theme {
  --color-background: #0a0a0f;
  --color-primary: #0a0a0a;
  --color-accent-purple: #a855f7;
  --color-accent-blue: #3b82f6;
  --color-border: #class="tok-number">23243380;
  --shadow-glow: class="tok-number">0 class="tok-number">0 40px -10px var(--color-primary);
}

Every color, shadow, radius, and font is defined here. Components reference bg-surface, text-muted, border-border — never raw hex values.

Glassmorphism system

We have three glass layers:

• .glass — subtle 4% white gradient, 12px blur. Used for cards and panels.
• .glass-strong — 6% gradient, 20px blur, inner highlight. Used for the navbar and hero CTAs.
• .glass-dark — darker base with 30% black. Used for overlays.

Each is a reusable utility class, not a per-component style.

The gradient orb effect

The background uses three radial gradients positioned at different corners — orange at top-left, purple at top-right, blue at bottom — creating a subtle ambient glow that shifts as you scroll. The GlowOrb component adds animated floating orbs on top for the hero section.

Motion philosophy

• Fade-up on scroll — cards and sections animate once when they enter the viewport.
• Reduced motion respected — a @media (prefers-reduced-motion: reduce) block kills all animations.
• No gratuitous motion — we animate reveals, not decorations. If it doesn't communicate something, it doesn't move.