Instruction file imported from frankieokoth/my-bingo-app (.github/instructions/cyberpunk-neon-design.instructions.md). Copyright stays with the author.

Cyberpunk Neon Design Guide

Principles

• Color: Use a dark base (#0f1021, #1a1b2e) with neon accents (cyan, magenta, yellow, electric blue, hot pink). Use gradients and glowing effects for depth and energy.
• Typography: Use a futuristic display font (e.g., Orbitron, Share Tech Mono) for headings and UI. Avoid generic system fonts.
• Glow & Effects: Add glowing borders, text shadows, and animated highlights to interactive elements. Use CSS keyframes for win states and micro-interactions.
• Backgrounds: Layer animated gradients, gridlines, or subtle cityscape silhouettes for atmosphere. Avoid flat, solid backgrounds.
• Motion: Use smooth transitions and animations for feedback (e.g., marking a square, winning a game). Prioritize CSS for performance.
• Buttons & Controls: All buttons should have neon gradients, bold text, and animated hover/focus states.
• Accessibility: Ensure high contrast, readable fonts, and visible focus states.

Completion Criteria

• All UI work must feel energetic, bold, and immersive—never bland or generic.
• No use of system fonts, gray backgrounds, or default button styles.
• All interactive elements have visible neon feedback.
• Theming is consistent and uses CSS variables for easy palette changes.

Example Prompts

• "Redesign the modal to match the Cyberpunk Neon theme."
• "Add a glowing animation to the win state."
• "Create a new button with a neon gradient and animated border."

For general frontend creativity, see frontend-design.instructions.md.