Cyberpunk Mobile HUD

ui-ux-pro-maxMITFinance · financeGaming · gamingMobile app · mobile-appFuturistic · futuristicDark · darkHigh (data-dense) · highBlue · blueMedium · mediumSerif · serif

Cyberpunk Mobile HUD. Best for Gaming dashboards, crypto/cyberpunk apps, sci-fi companion tools, hacker OS skins, data-heavy monitoring HUDs.

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Cyberpunk Mobile HUD" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#cyberpunk-mobile-hud @ 28b3b8dee8c9.

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill · src/ui-ux-pro-max/data/styles.csv#cyberpunk-mobile-hud · 28b3b8dee8c9 · © Next Level Builder

Do

Chamfered corners used instead of radius
☐ Scanline & CRT flicker implemented
☐ Orbitron + JetBrains Mono typography
☐ Neon glow shadows on primary buttons
☐ Glitch animation on active states
☐ Prompt-style inputs with custom cursor

Don't

Serious enterprise
health/finance requiring calm trust
minimal editorial apps

Prompt

Design a Cyberpunk Mobile HUD mobile interface using cyberpunk, neon, glitch, chamfered, orbitron, jetbrains, scanlines, crt. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.

---
"Cyberpunk Mobile HUD" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#cyberpunk-mobile-hud @ 28b3b8dee8c9.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Cyberpunk Mobile HUD. \"Cyberpunk Mobile HUD\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#cyberpunk-mobile-hud @ 28b3b8dee8c9.",
  "$extensions": {
    "dev.styledex": {
      "id": "uupm-cyberpunk-mobile-hud",
      "license": "MIT",
      "attribution": "\"Cyberpunk Mobile HUD\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#cyberpunk-mobile-hud @ 28b3b8dee8c9.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#0a0a0f"
    },
    "foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "card": {
      "$type": "color",
      "$value": "#0a0a0f"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "primary": {
      "$type": "color",
      "$value": "#0a0a0f"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#12121a"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "accent": {
      "$type": "color",
      "$value": "#12121a"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#19191d"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#a3a3a2"
    },
    "border": {
      "$type": "color",
      "$value": "#2c2c31"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#0a0a0f"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Cyberpunk Mobile HUD" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#cyberpunk-mobile-hud @ 28b3b8dee8c9. */
:root {
  --background: #0a0a0f;
  --foreground: #fafaf9;
  --card: #0a0a0f;
  --card-foreground: #fafaf9;
  --primary: #0a0a0f;
  --primary-foreground: #fafaf9;
  --secondary: #12121a;
  --secondary-foreground: #fafaf9;
  --accent: #12121a;
  --accent-foreground: #fafaf9;
  --muted: #19191d;
  --muted-foreground: #a3a3a2;
  --border: #2c2c31;
  --destructive: #dc2626;
  --ring: #0a0a0f;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Cyberpunk Mobile HUD" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#cyberpunk-mobile-hud @ 28b3b8dee8c9. */
/** Tailwind theme extend for Cyberpunk Mobile HUD (uupm-cyberpunk-mobile-hud) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#0a0a0f",
        "foreground": "#fafaf9",
        "card": "#0a0a0f",
        "primary": "#0a0a0f",
        "primary-foreground": "#fafaf9",
        "secondary": "#12121a",
        "accent": "#12121a",
        "muted": "#19191d",
        "border": "#2c2c31",
        "destructive": "#dc2626",
        "ring": "#0a0a0f"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Cyberpunk Mobile HUD" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#cyberpunk-mobile-hud @ 28b3b8dee8c9. */
@layer base {
:root {
  --background: #0a0a0f;
  --foreground: #fafaf9;
  --card: #0a0a0f;
  --card-foreground: #fafaf9;
  --primary: #0a0a0f;
  --primary-foreground: #fafaf9;
  --secondary: #12121a;
  --secondary-foreground: #fafaf9;
  --accent: #12121a;
  --accent-foreground: #fafaf9;
  --muted: #19191d;
  --muted-foreground: #a3a3a2;
  --border: #2c2c31;
  --destructive: #dc2626;
  --ring: #0a0a0f;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}