Skip to content
ZORC design system for Neo-Tokyo Cyber-Brutalism with neon colors and typography for web development and design Hot
Neo-Tokyo Cyber-Brutalism – screenshot 2
Neo-Tokyo Cyber-Brutalism – screenshot 3
Neo-Tokyo Cyber-Brutalism – screenshot 4
Neo-Tokyo Cyber-Brutalism – screenshot 5
Neo-Tokyo Cyber-Brutalism – screenshot 6
Neo-Tokyo Cyber-Brutalism – screenshot 7
// COLOUR PALETTE
BG Root deep void #09090b
Surface panel #18181b
Neon Pink primary accent #ff007f
Terminal Green success / signal #39ff14
Electric Cyan secondary accent #00ffff
Hazard Yellow warning #fde047
// Neon UI kit

Neo-Tokyo Cyber-Brutalism

Cyberpunk brutalism with neon pink, terminal green and glitch effects. Built for bold products that want to stand out.

50 kr

One-time payment • VAT included • Source code included

Components
10
Tech stack
HTML, Tailwind, Remix Icons
Licence
Commercial
Delivery
Instant access (zip + Git)
Updated

About this kit

Neo-Tokyo is a complete cyber-brutalist design system. Orbitron display, Rajdhani text and Fira Code for terminal feel. Neon pink (#ff007f), terminal green (#39ff14) and electric cyan (#00ffff) against a deep zinc background.

Includes: HUD panels, glitch buttons, scan-line overlays, retro-terminal components, data-tables, forms with glow-states, badges and animated elements. Perfect for gaming, web3, AI products and anything that wants to look like the future.

Paste in your AI and get an entire SaaS, dashboard or product landing built in the exact same cyberpunk aesthetic.

Components included

HUD-paneler Glitch-knappar (4 varianter) Terminal input field Scan-line overlay Data-tabeller med glow Status-badges (online, alert, critical) Toggle-switches Modaler & dialogs Notifikationer Typografi-system (Orbitron + Rajdhani)

Features

  • Machine readable AI comments
  • 1 fil — ingen byggprocess
  • Tailwind CDN
  • Glitch- & scan-effekter
  • Three font families embedded
  • Helt responsiv

When does this kit fit?

saas dashboard admin marketing-site landing-page

Tech stack

HTML Tailwind Remix Icons

How to use this kit

  1. Step 01

    Download

    Sign in to ZORC and fetch the zip from your purchases. All source code and documentation is included.

  2. Step 02

    Copy into your project

    Drop the components/ folder into your project — or install via package.json if the kit is packaged for npm.

  3. Step 03

    Wire up design tokens

    The tokens/ folder holds colours, typography and spacing for your Tailwind config or CSS variables.

  4. Step 04

    Start building

    Import the components and use them straight away. Each one ships with examples, props and variants in the docs.

Example AI prompt

Here is our design system (Neo-Tokyo Cyber-Brutalism). Build a product landing for an AI coding agent.

Requirements: use EXACTLY the same color space (neon-pink, terminal-green, electric cyan against zinc background), Orbitron for headlines, Rajdhani for text. Use HUD panels, glitch buttons and scan-line overlays from the system. Do not add new colors or fonts.

Common questions

What does Neo-Tokyo Cyber-Brutalism include?
Neo-Tokyo Cyber-Brutalism includes 10 components, including HUD-paneler, Glitch-knappar (4 varianter), Terminal input field, Scan-line overlay and more.
What tech stack is Neo-Tokyo Cyber-Brutalism built on?
Neo-Tokyo Cyber-Brutalism is built with HTML, Tailwind, Remix Icons.
Are the components accessible?
Yes. They follow WCAG 2.1 AA where the content allows — focus rings, keyboard support, ARIA and contrast.
What licence do I get?
Commercial. You may use the components across your organisation's paid projects. What you cannot do is resell the kit itself.
How do I get started?
Copy in the components/ folder, add the design tokens and start building. A full guide ships with the kit.
Do I get updates?
Yes. All future versions are included at no extra cost for as long as the kit remains in the catalogue.
// More UI kits

More kits from ZORC