Cyberpunk Visual Style × Glitch Art

Add signal tearing and scan-line breakup to suggest a failing, overloaded network.

From the research on Cyberpunk Visual Style

Mix them and make something Cyberpunk Visual Style Glitch Art

A sample layout drawn from the recipe: shapes from Glitch Art, their arrangement from Cyberpunk Visual Style, the finish from Glitch Art. Not a real work, and not an image of either style.

What each style brings

Each part of the design comes from the style with the stronger say in it, and each style gives at least two.

Cyberpunk Visual Style Glitch Art & Datamosh Graphics

Type from Cyberpunk Visual Style: Eclectic mixing
All caps
Colour from Cyberpunk Visual Style: Dark ground
Fluorescent & neon
Form from Glitch Art: Rectilinear
Non-representational
Composition from Cyberpunk Visual Style: Horror vacui
Layered information
Surface from Glitch Art: Glitch
Grain & noise

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Cyberpunk Visual Style

Loud

Monoton, standing in for Japanese and Chinese neon signage characters beside Latin lettering

Text · Glitch Art

An art and design practice that makes digital failure the picture. Artists deliberately corrupt image and video files or short-circuit hardware: they edit a JPEG's bytes (databending), delete a video's keyframes so one shot smears into the next (datamoshing) or sort pixels into streaks. Compression blocks, torn scanlines, shifted colour channels and raw code replace drawing, and the colour comes from the fault. Rosa Menkman and GLI.TC/H framed it as a critique of seamless technology; designers took it onto record sleeves and fonts, music videos onto MTV in 2009, and it became a stock filter.

Space Mono; Glitch Art used Raw file bytes opened as text (databending in a text editor) and Operating-system interface fonts caught in error messages and cascading windows, as in JODI's My%Desktop

The colours

The ground and leading colours come from Cyberpunk Visual Style, with a counter-accent from Glitch Art. The ink reads on the ground at 4.5:1 or more.

Cyberpunk Visual Style Glitch Art & Datamosh Graphics

#0b0c14 ground · 36%
#39ff14 ink · 14%
#05d9e8 accent · 18%
#ff00ff accent · 14%
#ff2a6d accent · 10%
#d1a516 accent · 8%

As CSS

:root {
  --ground: #0b0c14;
  --ink: #39ff14;
  --accent-1: #05d9e8;
  --accent-2: #ff00ff;
  --accent-3: #ff2a6d;
  --accent-4: #d1a516;
  --font-display: "Monoton", sans-serif;
  --font-text: "Space Mono", monospace;
}

Use it with care

Cyberpunk Visual Style: Cyberpunk's East Asian cityscapes are often criticised as techno-Orientalism, which casts Asia as futuristic yet cold and dehumanising; Blade Runner and Neuromancer are both critiqued on these grounds. Do not use Japanese or Chinese script as exotic decoration or set meaningless characters on every sign; use real, correct text, and do not make Asian people or places the faceless backdrop of a dystopia.

Glitch Art & Datamosh Graphics: Glitch video and animated glitch effects often flicker: keep flashes to three or fewer in any one second, and be stricter with saturated red, to meet WCAG 2.3.1 and protect people with photosensitive epilepsy. Datamoshing and databending usually start from someone else's footage or photographs, so clear the rights before corrupting them for commercial work. When a datamosh or pixel-sort look follows a particular artist's process, credit it; the 2009 music videos overtook the artists who developed the technique.

The two styles

1982–present · Global / networked, North America, East Asia Cyberpunk Visual Style A dystopian urban look of high technology and low life: night-city scenes in which neon signs, rain-slicked surfaces and glowing screens crowd a dark ground. Bilingual Latin and East Asian signage, grimy overload and green-cyan terminal glyphs mark it. It grew from Blade Runner, Akira and Neuromancer.

A grainy monochrome close-up of a face looking upward is repeated and overlapped beneath dense neon pink, green, cyan and orange digital interference. Large distressed lettering across the top reads “SIGNAL.”

2001–present · Global / networked, Western Europe, Central Europe, Northern Europe, North America Glitch Art & Datamosh Graphics An art and design practice that makes digital failure the picture. Artists deliberately corrupt image and video files or short-circuit hardware: they edit a JPEG's bytes (databending), delete a video's keyframes so one shot smears into the next (datamoshing) or sort pixels into streaks. Compression blocks, torn scanlines, shifted colour channels and raw code replace drawing, and the colour comes from the fault. Rosa Menkman and GLI.TC/H framed it as a critique of seamless technology; designers took it onto record sleeves and fonts, music videos onto MTV in 2009, and it became a stock filter.