Cyberpunk UI

Stylegeneral

Neon, dark mode, terminal, HUD, sci-fi, glitch, dystopian, futuristic, matrix, tech noir. Best for Gaming platforms, tech products, crypto apps, sci-fi applications, developer tools, entertainment.

Neon dark mode terminal HUD sci-fi glitch dystopian futuristic

#00FF00

#FF00FF

#00FFFF

#0D0D0D

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Cyberpunk UI

Keywords: Neon, dark mode, terminal, HUD, sci-fi, glitch, dystopian, futuristic, matrix, tech noir
Primary colours: #00FF00 (Matrix Green), #FF00FF (Magenta), #00FFFF (Cyan), #0D0D0D (Dark)
Secondary colours: Neon gradients, scanline overlays, glitch colors, terminal green accents
Effects & animation: Neon glow (text-shadow), glitch animations (skew/offset), scanlines (::before overlay), terminal fonts
Best for: Gaming platforms, tech products, crypto apps, sci-fi applications, developer tools, entertainment
Do not use for: Corporate enterprise, healthcare, family apps, conservative brands, elderly users

## Prompt keywords
Design a cyberpunk interface. Use: neon colors on dark (#0D0D0D), terminal/HUD aesthetic, glitch effects, scanlines overlay, matrix green accents, monospace fonts, angular shapes, dystopian tech feel.

## CSS / technical
background: #0D0D0D, color: #00FF00 or #FF00FF, font-family: monospace, text-shadow: 0 0 10px neon, animation: glitch (transform skew), ::before scanlines (repeating-linear-gradient)

## Implementation checklist
☐ Dark background only, ☐ Neon accents visible, ☐ Glitch effect subtle, ☐ Scanlines optional, ☐ Monospace font, ☐ Terminal aesthetic

## Design system variables
--bg-dark: #0D0D0D, --neon-green: #00FF00, --neon-magenta: #FF00FF, --neon-cyan: #00FFFF, --scanline-opacity: 0.1, --glitch-duration: 0.3s

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source