Design Aesthetic — Style Guide
A visual language rooted in 1990s Acid House and rave flyer art, revived in mid-2010s design communities. It expresses visual dissonance and confusion to convey subjective emotions and unique, individualized identity.
Use black as the dominant background color so that saturated, fluorescent accent colors appear
significantly more vibrant through contrast. The dark base acts as a void that amplifies every
neon hue placed upon it. Backgrounds should be near-black or pure black
(#000000,
#0A0A0A,
#111111).
// Avoid: Pastels, muted tones, earth tones, or large expanses of white
Experimental, geometric, jagged letterforms with layered text-shadow creating a neon bloom effect. Multiple shadows at increasing blur radius simulate the light bleed of actual neon signage.
text-shadow: multi-layer neon bloomLinear gradients alternating between white, gray, and dark gray simulate reflective metal surfaces. Applied via background-clip: text, the type appears to have physical materiality -- futuristic and tactile.
background-clip: text + metallic gradientHue-rotate animations on gradient backgrounds create color-shifting, holographic effects. The surface appears to change like oil on water or a holographic sticker -- liquid and otherworldly.
hue-rotate animation + gradient background-clipRapid, short-duration shifts in position and color channels using pseudo-elements with clip-path regions. The effect suggests digital corruption -- data breaking down, signal interference.
::before/::after + clip-path + translate animationCheckerboards, warped stripes, moiré patterns, spiral distortions. Visual noise that overwhelms and hypnotizes.
3D wireframe globes, geometric solids, grid planes receding into perspective. The skeleton of digital reality exposed.
Reflective, mercurial textures on text and shapes. Surfaces that appear molten, shifting, alive with reflected light.
Translucent, refractive materials with specular highlights. Objects that bend light and reveal layered depth.
Sharp beams of colored light cutting across compositions. High-energy lines that slice through the visual field.
The iconic 90s rave smiley, often distorted or deconstructed. A symbol of ecstatic culture turned ironic emblem.
Rendered as wireframes or with technological overlays. The planet as data object, networked and surveilled.
Circuit-like patterns, data visualization motifs, HUD-style overlays. The visual language of machine intelligence.
Fill the entire composition. Avoid large areas of negative space. Every pixel is contested territory.
dense layouts maximalismElements should overlap and stack, appearing random or chaotic but creating continuous visual flow.
z-index stacking absolute positioningBreak layouts into angular, overlapping sections rather than clean grids. Shatter the expected structure.
clip-path: polygon() transform: skew()The composition should feel energetic and restless, not calm or orderly. Perpetual visual motion.
transform: rotate() mix-blend-modeText over images, shapes over text, layers upon layers. Use CSS Grid with overlapping grid-row/grid-column, mix-blend-mode (screen, overlay, difference) for layered color interactions, and z-index stacking to create depth.
CSS Grid overlap mix-blend-mode: screen mix-blend-mode: differenceAlternating white-gray-dark gradients simulate reflective metal
Animated hue-rotate on gradient backgrounds for color-shifting
Thin repeating horizontal lines via repeating-linear-gradient
SVG noise filters or CSS pseudo-elements with grain textures
| Technique | CSS Property / Approach |
|---|---|
| Neon Glow | Multiple text-shadow or box-shadow with same-hue colors at increasing blur |
| Chrome Text | background-clip: text with metallic linear gradient |
| Overlapping Layout | CSS Grid with overlapping grid-row / grid-column, or absolute positioning |
| Color Blending | mix-blend-mode: screen, difference, overlay |
| Angular Clipping | clip-path: polygon(...) |
| Warped Patterns | SVG feTurbulence + feDisplacementMap filters |
| Scanlines | repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.3) 2px, rgba(0,0,0,0.3) 4px) |
| Noise Grain | SVG filter with feTurbulence as overlay |
| Holographic Shift | Animated hue-rotate filter on gradient background |
| Geometric Rotation | transform: rotate() with animation |
Rapid, short-duration shifts in position, color channels, or clip regions. Digital corruption made visible.
Intermittent opacity changes on text or decorative elements. The pulse of a dying CRT monitor.
Slow, continuous rotation on geometric decorative elements. Hypnotic, perpetual orbital motion.
CSS or SVG filter-based displacement effects. Reality bending and warping under digital pressure.
Infinite scrolling backgrounds using @keyframes with background-position or transform: translate().
Typographic and identity work with distorted, chrome-treated letterforms. A master of metallic surface and alien geometry.
Dense, layered compositions with rave and cyberpunk motifs. Horror vacui embodied -- every surface vibrating with information.
Jagged, angular custom typography with metallic textures. Letterforms that look forged in chrome and shattered glass.
1990s Acid House and rave flyer art -- born in underground club culture, photocopied and wheat-pasted on city walls.
Mid-2010s Instagram design communities -- digital natives rediscovering and remixing the raw energy of rave visual culture.