cyberpunk-ui

Cyberpunk UI

"High tech, low life. Neon signs cutting through the smog of a dystopian megacity."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Neon on Black: The foundation is absolute black (#000000) or deep charcoal, cut by searingly bright neon accents.
2. Angled Geometries: Clipped corners (chamfers) rather than rounded corners. UI elements often look like they were cut from metal plates.
3. Glitch and Data: Random streams of hexadecimal data, barcode accents, and intentional visual tearing.

Visual DNA

• Colors: Acid Yellow (#FCE205), Cyan (#00FFFF), Hot Pink (#FF003C), against Black.
• Typography: Industrial, squared-off sans-serifs (like Rajdhani, Blender Pro, or Teko), mixed with small monospace fonts for data.
• Styling: Diagonal stripes, warning tape patterns, and heavy outer glows.

Web Implementation

• Rely on clip-path for the angled cuts.
• CSS Example:

body {
  background-color: #050505;
  color: #00FFFF;
  font-family: 'Rajdhani', sans-serif;
  background-image: repeating-linear-gradient(
    45deg,
    #050505,
    #050505 10px,
    #0a0a0a 10px,
    #0a0a0a 20px
  );
}

.cyberpunk-button {
  background-color: #FF003C; /* Cyberpunk