Hoppa till innehåll
ZORC designsystem för Neo-Tokyo Cyber-Brutalism med neonfärger och typografi för webbutveckling och design Hot
Neo-Tokyo Cyber-Brutalism – skärmbild 2
Neo-Tokyo Cyber-Brutalism – skärmbild 3
Neo-Tokyo Cyber-Brutalism – skärmbild 4
Neo-Tokyo Cyber-Brutalism – skärmbild 5
Neo-Tokyo Cyber-Brutalism – skärmbild 6
Neo-Tokyo Cyber-Brutalism – skärmbild 7
// FÄRGPALETT
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 med neon-pink, terminal-grön och glitch-effekter. Byggt för djärva produkter som vill sticka ut.

50 kr

Engångsbetalning • Inkl. moms • Källkod ingår

Komponenter
10 st
Tech stack
HTML, Tailwind, Remix Icons
Licens
Kommersiell
Leverans
Direktåtkomst (zip + Git)
Uppdaterad

Om kit:et

Neo-Tokyo är ett komplett cyber-brutalistiskt designsystem. Orbitron-display, Rajdhani-text och Fira Code för terminal-känsla. Neon-pink (#ff007f), terminal-grön (#39ff14) och elektrisk cyan (#00ffff) mot djupt zinc-bakgrund.

Ingår: HUD-paneler, glitch-knappar, scan-line overlays, retro-terminal komponenter, data-tabeller, formulär med glow-states, badges och animerade element. Perfekt för gaming, web3, AI-produkter och allt som vill se ut som framtiden.

Klistra in i din AI och få ett helt SaaS, dashboard eller produktlandning byggt i exakt samma cyberpunk-estetik.

Komponenter som ingår

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

Funktioner

  • Maskinläsbara AI-kommentarer
  • 1 fil — ingen byggprocess
  • Tailwind CDN
  • Glitch- & scan-effekter
  • Tre fontfamiljer inbäddade
  • Helt responsiv

När passar kit:et?

saas dashboard admin marketing-site landing-page

Tech stack

HTML Tailwind Remix Icons

Så använder du kit:et

  1. Steg 01

    Ladda ner

    Logga in på ZORC och hämta zip-filen från dina köp. All källkod och dokumentation finns med.

  2. Steg 02

    Kopiera in i ditt projekt

    Lägg mappen components/ i ditt projekt — eller installera via package.json om kit:et är paketerat för NPM.

  3. Steg 03

    Koppla design tokens

    Mappen tokens/ har färger, typografi och spacing som du lägger till i din Tailwind-config eller som CSS-variabler.

  4. Steg 04

    Börja bygga

    Importera komponenterna och använd dem direkt. Varje komponent har exempel, props och varianter i dokumentationen.

Exempelprompt för AI

Här är vårt designsystem (Neo-Tokyo Cyber-Brutalism). Bygg en produktlandning för en AI-coding-agent.

Krav: använd EXAKT samma färgrymd (neon-pink, terminal-grön, electric cyan mot zinc-bakgrund), Orbitron för rubriker, Rajdhani för text. Använd HUD-paneler, glitch-knappar och scan-line overlays från systemet. Lägg inte till nya färger eller fonter.

Vanliga frågor

Vad innehåller Neo-Tokyo Cyber-Brutalism?
Neo-Tokyo Cyber-Brutalism innehåller 10 komponenter inklusive HUD-paneler, Glitch-knappar (4 varianter), Terminal-input fält, Scan-line overlay och mer.
Vilken teknik bygger kit:et på?
Neo-Tokyo Cyber-Brutalism är byggt med HTML, Tailwind, Remix Icons.
Är komponenterna tillgängliga?
Ja. De följer WCAG 2.1 AA där innehållet tillåter — fokusring, tangentbord, ARIA och kontraster.
Vilken licens får jag?
Kommersiell. Du får använda komponenterna i din organisations betalda projekt. Det enda du inte får är att sälja vidare själva kit:et.
Hur kommer jag igång?
Kopiera in mappen components/, lägg till design tokens och börja bygga. En komplett guide följer med.
Får jag uppdateringar?
Ja. Alla framtida versioner är inkluderade utan extra kostnad så länge kit:et finns kvar i sortimentet.
// Andra UI kits

Fler kits från ZORC