themx
← Back to themes

Cyberpunk

bold Visual style

High tech meets low life

Reference year: 2023

Compare this theme

Best for

Games & entertainment, Developer tools, Brand & events

Less suitable for

  • Long reading sessions with bright neon text on every surface.

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Cyberpunk preview

Examples

Cyberpunk — Hero Section
Hero Section
Cyberpunk — Card Grid
Card Grid
Cyberpunk — Form
Form
Cyberpunk — Dashboard Layout
Dashboard Layout

Color Palette

Primary #00FF41
Secondary #FF0090
Accent #00D4FF
Background #0D0D0D
Text #C0C0C0

Typography

Heading: Rajdhani
Body: Share Tech Mono

Key Characteristics

  • Neon glow effects on text and borders
  • Dark backgrounds with high-contrast neon accents
  • Glitch and distortion visual effects
  • Terminal and monospace typography elements
  • Angular geometric shapes and hard edges
  • Scanline and CRT screen effects

Tags

neon tech dystopian hacker

Cyberpunk design draws from the literary and cinematic genre that imagines high-technology futures layered over societal decay. In interface design, it translates to dark, moody backgrounds pierced by vivid neon accents — electric greens, hot pinks, and cyan blues that evoke holographic displays and rain-slicked city streets. The aesthetic surged in web design alongside the release of the Cyberpunk 2077 game and the broader retro-futurism revival.

When to Use

Cyberpunk is a natural fit for gaming interfaces, hacker-themed tools, music production software, cryptocurrency dashboards, and any brand that wants to project a cutting-edge, counter-culture identity. It works well for dark-first experiences where atmosphere and immersion matter. Avoid it for contexts requiring trust and calm, such as healthcare or banking, where the aggressive palette can feel alienating.

Key Visual Elements

Neon glow is the signature effect: text-shadow and box-shadow stacks in the primary neon color create a luminous halo around headings, borders, and interactive elements. Backgrounds are nearly black with subtle noise or scanline overlays that mimic CRT monitors. Angular, clipped shapes and slanted edges evoke futuristic machinery. Glitch effects — offset color channels, flickering elements, and horizontal tearing — add kinetic energy. Thin neon lines serve as dividers and decorative accents.

Typography

Use condensed, technical-looking typefaces like Rajdhani for headings — its angular letterforms feel engineered. Body text in Share Tech Mono reinforces the terminal/hacker aesthetic while remaining legible at paragraph sizes. Apply neon glow sparingly to headings; body text should remain clean to preserve readability against the dark background.

Export style

Choose a library mapping or use the CSS variables in your own components. JSON includes the same mapping. Load the listed fonts separately.

:root {
  --tx-surface-bg: #0D0D0D;
  --tx-font-heading: "Rajdhani", sans-serif;
  --tx-font-body: "Share Tech Mono", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: rgba(0,255,65,0.03);
  --tx-card-border: rgba(0,255,65,0.3);
  --tx-card-border-width: 1px;
  --tx-card-radius: 0;
  --tx-card-shadow: 0 0 8px rgba(0,255,65,0.15);
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: rgba(0,255,65,0.6);
  --tx-card-shadow-hover: 0 0 16px rgba(0,255,65,0.3);
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: rgba(192,192,192,0.8);
  --tx-text-subtle: rgba(192,192,192,0.5);
  --tx-link-color: #00FF41;
  --tx-button-radius: 0;
  --tx-input-bg: rgba(0,255,65,0.05);
  --tx-input-border: rgba(0,255,65,0.3);
  --tx-text: #C0C0C0;
  --tx-primary: #00FF41;
  --tx-secondary: #FF0090;
  --tx-accent: #00D4FF;
  --tx-media-filter: none;
}

Prompt Builder

Choose your project, UI library, and output. Prompts, documents, and exports use the same resolved theme values.

Example projects:

Use your own components with the exported CSS variables.

Components

Changing the page purpose selects suggested components. You can adjust them below.

Optional design layers

Apply a layout, then a surface effect, then a color mode. Fonts stay with the base theme. The output contains one final token set.

Cyberpunk

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Optional skills

Include skill references and installation instructions for your coding agent. Selecting a skill here does not install it.

Choose daisyUI or shadcn/ui to include its official skill.

Copy this prompt into your coding assistant. The task mode applies to the UI prompt.

Generated prompt

You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Games & entertainment
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Cyberpunk (visual-style)
- Neon glow effects on text and borders
- Dark backgrounds with high-contrast neon accents
- Glitch and distortion visual effects
- Terminal and monospace typography elements
- Angular geometric shapes and hard edges
- Scanline and CRT screen effects

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #00FF41, secondary #FF0090, accent #00D4FF, background #0D0D0D, text #C0C0C0
Typography: Rajdhani for headings, Share Tech Mono for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #0D0D0D;
  --tx-font-heading: "Rajdhani", sans-serif;
  --tx-font-body: "Share Tech Mono", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: rgba(0,255,65,0.03);
  --tx-card-border: rgba(0,255,65,0.3);
  --tx-card-border-width: 1px;
  --tx-card-radius: 0;
  --tx-card-shadow: 0 0 8px rgba(0,255,65,0.15);
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: rgba(0,255,65,0.6);
  --tx-card-shadow-hover: 0 0 16px rgba(0,255,65,0.3);
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: rgba(192,192,192,0.8);
  --tx-text-subtle: rgba(192,192,192,0.5);
  --tx-link-color: #00FF41;
  --tx-button-radius: 0;
  --tx-input-bg: rgba(0,255,65,0.05);
  --tx-input-border: rgba(0,255,65,0.3);
  --tx-text: #C0C0C0;
  --tx-primary: #00FF41;
  --tx-secondary: #FF0090;
  --tx-accent: #00D4FF;
  --tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Use dark surfaces with limited neon accents and a clear content hierarchy.

## Interaction
- Keep glitch effects decorative and brief. Never animate essential text continuously.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Cyberpunk: Long reading sessions with bright neon text on every surface.

## Components
Generate the following components in this style:
- Hero
- Navbar
- Cards
- Footer

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.