// DESIGN_SYSTEM.v2.0

RETRO-DIGITAL
AESTHETIC

A comprehensive design system blending 8-bit pixel art with modern web design. High contrast, bold typography, and electric accents define this retro-futuristic visual language.

01 // COLORS

COLOR PALETTE

ELECTRIC

#4772FF

BLACK

#0A0A0A

CHARCOAL

#1A1A1A

WHITE

#FFFFFF

CYAN

#00FFFF

MAGENTA

#FF00FF

ELECTRIC GLOW EFFECT

02 // TYPOGRAPHY

TYPE SCALE

SPACE GROTESK BOLD — HEADINGS

HERO TEXT

heading-hero / clamp(3rem, 10vw, 7rem)

Display Heading

heading-display / clamp(2.5rem, 8vw, 5rem)

Heading Level 1

heading-1 / 4rem (64px)

Heading Level 2

heading-2 / 3rem (48px)

Heading Level 3

heading-3 / 2.5rem (40px)

SPACE MONO — SUBHEADINGS & LABELS

SUBHEADING LARGE

subheading-lg / 1.25rem (20px) / uppercase

SUBHEADING MEDIUM

subheading-md / 1rem (16px) / uppercase

SUBHEADING SMALL

subheading-sm / 0.875rem (14px) / uppercase

LABEL TEXT

label / 0.75rem (12px) / uppercase / widest tracking

DM SANS — BODY TEXT

Body Large — The quick brown fox jumps over the lazy dog. Perfect for lead paragraphs and important content that needs emphasis.

body-lg / 1.25rem (20px)

Body Medium — The quick brown fox jumps over the lazy dog. Standard body text for comfortable reading across all devices and screen sizes.

body-md / 1.125rem (18px)

Body Small — The quick brown fox jumps over the lazy dog. Used for secondary information and supporting text content.

body-sm / 1rem (16px)

GLOW

text-glow class

UNDERLINE

text-pixel-underline class

03 // ICONOGRAPHY

PIXEL ICONS

LIGHTBULB

CURSOR

COMPASS

TOOLBOX

ROCKET

CODE

CHART

SHIELD

ZAP

HEART

ICON SIZES

SM (24px)

MD (32px)

LG (48px)

XL (64px)

04 // INTERACTIVE

BUTTONS

VARIANTS

SIZES

WITH ICONS

05 // IMAGERY

HALFTONE EFFECTS

Technology workspace

ELECTRIC OVERLAY

Circuit board

CYAN OVERLAY

Modern laptop

MAGENTA OVERLAY

Matrix code

GREEN OVERLAY

Server room

RED OVERLAY

Robot

NO OVERLAY (B&W)

DOT SIZE VARIATIONS

Code on screen

FINE DOTS (3px)

Code on screen

MEDIUM DOTS (4px)

Code on screen

COARSE DOTS (6px)

06 // CONTAINERS

CARDS

Standard Card

Default pixel card with shadow offset. Hovers up and increases shadow depth on interaction.

Electric Card

Glowing card variant with electric border and shadow glow effect.

FEATURE

Feature Card

Card with icon badge and additional styling for feature highlights.

LEARN MORE →

07 // BACKGROUNDS

TEXTURES & EFFECTS

PIXEL GRID

SCANLINES

NOISE TEXTURE

CRT VIGNETTE

08 // MOTION

ANIMATIONS

PIXEL FADE

SLIDE UP

FLOAT

PULSE GLOW

FLICKER

PIXEL BLINK

STAGGERED DELAYS