Use the "Neon Aurora" design system. A cyberpunk night-city system glowing under aurora skies. Tokyo-dark neon palette, monospace terminal typography, neon glow shadows, northern-lights gradients and celebratory micro-interactions — maximum atmosphere for AI tools, media and creative products.

Use a cyberpunk palette with a deep black background (#08080D). Primary actions in electric cyan (#18FFDC), secondary in hot magenta (#FF2D78), and accents in neon lime (#B8FF57). Cards and surfaces use dark indigo-charcoal (#12121E) with deep purple borders (#23233A). Body text is cool silver (#EEEEF2), secondary text in muted steel (#6E6E84). Use neon glow sparingly on primary CTAs — apply box-shadow 0 0 20px rgba(24,255,220,0.25) for the signature glowing effect. This palette conveys raw futurism, maximum energy, and neon-drenched nightlife.

Use a monochrome developer sandbox typography system built entirely on JetBrains Mono. Headings (700 weight, 1.875rem) simulate bash prompt logs or JSON keys, while body text (400 weight, 1.7 line height) feels like indented code blocks. Keep all font sizing relatively uniform, relying on indentation, colors, and brackets for hierarchy rather than massive font scales.

Implement a neon glow shadow system for dark-themed UIs. Use three shadow layers to simulate realistic neon light: a tight core glow (0 0 10px rgba(0,255,224,0.2)), a medium diffuse ring (0 0 30px rgba(0,255,224,0.08)), and a wide atmospheric halo (0 0 60px rgba(0,255,224,0.03)). Pair with a luminous border (rgba(0,255,224,0.2)). On hover, all three layers intensify: core to (0 0 15px, 0.5 opacity), ring to (0 0 40px, 0.2), halo to (0 0 80px, 0.08), with the border vivid at 0.5 opacity. Scale to 1.02 on hover over 400ms ease. The three-layer structure is critical — it creates a realistic light falloff curve that a single shadow cannot achieve. Perfect for gaming UIs, AI dashboards, and music platforms.

Use the Mixed Modern radius system — the balanced SaaS standard. Border radii: 4px for buttons and small inputs, 8px for cards and dropdowns, 12px for modals and large containers, 9999px for badges and avatars only. This system creates hierarchy through corner treatment — larger elements get more rounding, small elements stay crisp. Sections and page-level containers use 0px.

Use a northern lights gradient flowing from emerald green (#10B981) through indigo (#6366F1) to purple (#A855F7) at a 120-degree angle. Apply to hero section backgrounds, feature showcase areas, and promotional banners. For subtle usage, reduce opacity to 8-10% as a background wash. Use full-strength on primary CTAs and accent elements. Consider animating the gradient direction for dynamic hero backgrounds. This gradient conveys innovation, wonder, and cutting-edge technology.

Use the Modular 8pt Grid spacing system — strict 8px multiples for perfect visual rhythm. Scale: 8, 16, 24, 32, 40, 48, 56, 64, 80, 96. Every spacing value MUST be a multiple of 8. No exceptions. Button padding: 8px 16px. Card padding: 16px or 24px. Section spacing: 48px or 64px. Page margin: 32px. This creates mechanical precision and perfect alignment across all breakpoints.

Use the Snappy Responsive easing system for performance-focused interfaces. Primary curve: cubic-bezier(0.2, 0, 0, 1) at 200ms — extremely fast with an aggressive deceleration that makes UI feel instant. Use 100ms for hover states, 200ms for toggles and tabs, 300ms for panels. This system prioritizes responsiveness — every interaction should feel like zero latency. Apply to tab switches, accordion toggles, filter animations, and real-time data updates.

Create an AI action button inspired by Cursor:
1. Base: Dark background (#08080D), white text, subtle dark border (#23233A).
2. Hover State: Border transitions to a bright blue (#B8FF57).
3. Glow Effect: When hovered, add both an outer drop shadow and an inner shadow using the same blue color to create a distinct pulsating/glowing effect.
4. Icon: Include a small Sparkles icon inside the button, colored blue.

Create an AI chat message block identical to Cursor IDE. The layout needs:
1. An outer container with a dark background (#12121E) and subtle border (#23233A).
2. A header row showing the AI avatar/icon and 'Cursor' name in muted gray (#6E6E84).
3. A content area that is indented left, featuring a 2px blue solid left border (#B8FF57) spanning the height of the response.
4. The text inside the response should be highly legible light gray (#EEEEF2).

Build a GitHub-style dual-layer contextual navigation bar.

Design philosophy — predictable scalability:
1. Global bar (top): bg #08080D, height 48px. Contains: logo (left), search bar (center, 45% width), profile/notifications (right).
2. Search bar: bg #08080D, border #23233A, rounded-md, placeholder text "Type / to search" in #6E6E84. 14px input text.
3. Context tab bar (below): bg #08080D, height 48px, border-bottom #23233A. Contains horizontal tabs that change per section.
4. Tab styling: 14px, font-weight 400, color #6E6E84, padding-bottom 12px. Active tab: color #EEEEF2 with a 2px bottom border in #B8FF57 (orange) or #B8FF57 (blue).
5. Tab icons: 16px icons before each tab label. Counters (issue count, PR count) as rounded-full badges in bg #23233A.
6. Logo: GitHub mark (Octocat silhouette) in #EEEEF2, 32px. Positioned left with a breadcrumb after it (org / repo).
7. Profile section: Avatar circle (20px) + dropdown chevron.

The dual-layer eliminates the need for complex mega-menus — hierarchy is spatial, not nested.

Build a Spotify-style vibrant hero section.

Design philosophy — culture over convention:
1. Background: Full-bleed gradient from #18FFDC (Spotify green) to #08080D (near-black), 135deg angle. The gradient should feel immersive, wrapping the user in color.
2. Headline: 64-96px (clamp(4rem, 7vw, 6rem)), font-weight 900 (extra bold), tracking -0.02em, pure white. Line-height 0.95 — the lines should almost touch. Use text-transform: uppercase on the first line for typographic contrast.
3. Subtitle: 18px, font-weight 400, #FFFFFFB3, line-height 1.6, max-width 480px.
4. CTA: Pill-shaped (rounded-full), bg #18FFDC, black text, px-8 py-4, text-base, font-weight 700. On hover: scale(1.05) and brightness(1.1). The button should feel like it's asking to be pressed.
5. Layout: Left-aligned content on desktop. The text block sits at 40% width, leaving 60% as negative space that lets the gradient breathe.
6. Animation: Headline slides up from 40px with opacity fade, staggered by line (150ms delay). CTA bounces in with a spring curve after content settles.

The hero should make you want to turn up the volume.

Implement an aurora background using two large radial gradients (Teal-400 and Sky-400 at 20% opacity) positioned on opposite sides of a pure black canvas.

Build a GitHub-style merge celebration micro-interaction.

Design philosophy — reward completion:
1. Pre-merge button: bg #238636 (GitHub green), white text "Merge pull request", rounded-md, 14px font-weight 600. Subtle hover: brightness(1.1).
2. Click → Merge animation (600ms total):
   a. Button shrinks slightly (scale 0.95) for 100ms (press feedback)
   b. Background color transitions from green (#238636) to purple (#8957e5) over 300ms
   c. Text crossfades: "Merge pull request" → "Merged" with a checkmark icon sliding in from the left
   d. Button scales back to 1.0 with a slight overshoot (scale 1.05 → 1.0, 200ms spring)
3. Confetti burst (triggers at 300ms):
   - 12-16 small circles (3-5px) in purple (#8957e5), green (#238636), and white scatter outward from the button center
   - Each particle: random angle, random velocity (40-80px travel), opacity 1→0 over 500ms, slight gravity (translateY +10px)
   - Use CSS animations, not canvas — keeps it lightweight and accessible
4. Post-merge state: Button stays purple (#8957e5) with checkmark + "Merged" text. No further animation. Disabled state.
5. Border: The PR card's border briefly flashes purple (box-shadow: 0 0 0 2px #8957e5, fades out over 300ms).

The celebration should feel earned, not gratuitous. One burst, then calm.