STYLEKIT PRESENTS

ANTI-DESIGN

ANTI-

EVERY RULE OF UI DESIGN EXISTS TO BE BROKEN. THICK BORDERS. CLASHING COLORS. ROTATED TEXT. ASYMMETRIC EVERYTHING. THIS IS THE SYSTEM.

∞

RULES BROKEN

8PX

MAX BORDER

NO SOFT SHADOWS

NO GRADIENTS

NO ROUNDED CORNERS

COMPONENTS

ALL WRONG ON PURPOSE

PRIMARY BUTTON

bg-[#FF0000] · border-r-[8px] border-b-[8px] · shadow-[8px_8px_0_#000]

SECONDARY BUTTON

bg-white · border-black · hover: bg-[#FFFF00] · transition-none

DANGER / DESTRUCTIVE

text-xl · shadow-[12px_12px_0_#FF0000] · hover: invert

OUTLINE VARIANT

mousedown state: bg-[#FF00FF] · transition-none

COLOR

PALETTE

8 COLORS. 0 SUBTLETY. 100% SATURATION. NO APOLOGIES.

BLACK

#000000

WHITE

#FFFFFF

RED

#FF0000

BLUE

#0000FF

YELLOW

#FFFF00

MAGENTA

#FF00FF

CYAN

#00FFFF

GREEN

#00FF00

HOW TO USE THESE COLORS (WRONG WAY ONLY)

RED + CYAN

Maximum complementary conflict

BLUE + YELLOW

Classic anti-harmony pair

GREEN + MAGENTA

Visual aggression at 100%

TYPOGRAPHY

TYPE IS A WEAPON

MIXED SCALE (MANDATORY)

tiny context that barely matters

BIG

small label beneath the scream

LOUDER

footnote: this is intentional

ROTATION SCALE

MINUS THREE DEG

MINUS ONE

HORIZONTAL (BORING)

PLUS TWO

PLUS FIVE DEG

WEIGHT: BLACK ONLY

font-black

UPPERCASE ALWAYS

TRACKING-WIDEST FOR LABELS

900

font-weight 900. no 400. no 300. no thin. ever.

ASYMMETRIC LAYOUT

ANTI-DESIGN

ASYMMETRIC

left-heavy · off-balance · intentional

BORDERS THICKER ON RIGHT AND BOTTOM. ALWAYS.

INTERACTION

HOVER STATES: ABRUPT. BINARY. ZERO EASE.

COLOR FLIP

HOVER ME

bg: white → black · text: black → red · shadow: 8px → none

BORDER JUMP

HOVER ME

border: 4px → 8px · shadow: 4px → 16px yellow

ACCENT SWAP

HOVER ME

yellow → magenta · text inverts · no transition

TAG

THE HOVER RULE:

EVERY INTERACTIVE ELEMENT MUST FEEL LIKE FLIPPING A SWITCH. NOT SLIDING A DIAL. NOT FADING A LIGHT. FLIPPING. A. SWITCH. TRANSITION-NONE IS NOT A SHORTCUT — IT IS THE PHILOSOPHY.

DO

—

DON'T

DO THESE THINGS

border-[6px] border-black

Ultra-thick black borders on every single element. 4–8px minimum. No exceptions.

shadow-[8px_8px_0_#000]

Hard offset shadows only. Never blurred. Never soft. Never subtle.

rotate-[-3deg] / rotate-[5deg]

Text and elements rotated at odd angles. Between -3deg and +5deg. Break the grid.

font-black uppercase

Font weight 900. All uppercase. No apologies. No whispering.

asymmetric borders

Borders thicker on right and bottom. border-r-8 border-b-8. Uneven on purpose.

COLOR CONFLICT

Red next to green. Magenta next to yellow. Cyan on red. Visual conflict is the goal.

text-xs next to text-8xl

Wildly mixed font sizes in the same section. Hierarchy is abolished.

hover: abrupt flips

On hover: color inverts, borders jump, shadows disappear or double. transition-none only.

DON'T DO THESE

rounded-lg

Zero border radius. Rounded corners are comfort. Anti-Design rejects comfort.

text-gray-500

No muted tones. No subtle colors. Every color must be at 100% saturation.

shadow-md

No soft drop shadows. No blur. Only hard, offset, pixel-perfect shadows.

bg-gradient-to-r

Gradients are harmony. Anti-Design is conflict. Flat fills only.

transition-all ease-in-out

No smooth easing. No gentle transitions. Abrupt or nothing.

backdrop-blur

No frosted glass. No blurs of any kind. Everything is sharp.

gap-4 (consistent)

No consistent spacing. Rhythm is for music, not Anti-Design.

text-center (global)

No enforced alignment. Centered everything is what bad designers do.

SHADOW

HARD. OFFSET. ZERO BLUR. THAT IS ALL.

SMALL

4px

shadow-[4px_4px_0_#000000]

DEFAULT

8px

shadow-[8px_8px_0_#000000]

LARGE

12px

shadow-[12px_12px_0_#000000]

MASSIVE

16px

shadow-[16px_16px_0_#FF0000]

SHADOW DIRECTION: ALWAYS BOTTOM-RIGHT

THE SHADOW MUST ALWAYS GO TO THE BOTTOM-RIGHT. BOTTOM-LEFT IS A MISTAKE. TOP SHADOW IS FORBIDDEN. CENTERED GLOW IS NOT A SHADOW — IT IS A SIN.

THE ANTI-DESIGN MANIFESTO

BEAUTY IS A LIE.

WHAT IS CALLED BEAUTIFUL IS ONLY WHAT IS FAMILIAR. ANTI-DESIGN MAKES STRANGE.

CONSISTENCY IS CONFORMITY.

CONSISTENT SPACING. CONSISTENT COLOR. CONSISTENT COWARDICE. ANTI-DESIGN REFUSES.

HARMONY IS CONTROL.

COMPLEMENTARY COLORS WERE INVENTED TO SUPPRESS VISUAL CONFLICT. WE RESTORE IT.

THICK BORDERS ARE HONESTY.

A 1PX BORDER PRETENDS TO NOT BE THERE. A 8PX BORDER ANNOUNCES ITSELF PROUDLY.

STYLEKIT PRESENTS

ANTI-DESIGN

ANTI-

EVERY RULE OF UI DESIGN EXISTS TO BE BROKEN. THICK BORDERS. CLASHING COLORS. ROTATED TEXT. ASYMMETRIC EVERYTHING. THIS IS THE SYSTEM.

∞

RULES BROKEN

8PX

MAX BORDER

NO SOFT SHADOWS

NO GRADIENTS

NO ROUNDED CORNERS

COMPONENTS

ALL WRONG ON PURPOSE

PRIMARY BUTTON

bg-[#FF0000] · border-r-[8px] border-b-[8px] · shadow-[8px_8px_0_#000]

SECONDARY BUTTON

bg-white · border-black · hover: bg-[#FFFF00] · transition-none

DANGER / DESTRUCTIVE

text-xl · shadow-[12px_12px_0_#FF0000] · hover: invert

OUTLINE VARIANT

mousedown state: bg-[#FF00FF] · transition-none

COLOR

PALETTE

8 COLORS. 0 SUBTLETY. 100% SATURATION. NO APOLOGIES.

BLACK

#000000

WHITE

#FFFFFF

RED

#FF0000

BLUE

#0000FF

YELLOW

#FFFF00

MAGENTA

#FF00FF

CYAN

#00FFFF

GREEN

#00FF00

HOW TO USE THESE COLORS (WRONG WAY ONLY)

RED + CYAN

Maximum complementary conflict

BLUE + YELLOW

Classic anti-harmony pair

GREEN + MAGENTA

Visual aggression at 100%

TYPOGRAPHY

TYPE IS A WEAPON

MIXED SCALE (MANDATORY)

tiny context that barely matters

BIG

small label beneath the scream

LOUDER

footnote: this is intentional

ROTATION SCALE

MINUS THREE DEG

MINUS ONE

HORIZONTAL (BORING)

PLUS TWO

PLUS FIVE DEG

WEIGHT: BLACK ONLY

font-black

UPPERCASE ALWAYS

TRACKING-WIDEST FOR LABELS

900

font-weight 900. no 400. no 300. no thin. ever.

ASYMMETRIC LAYOUT

ANTI-DESIGN

ASYMMETRIC

left-heavy · off-balance · intentional

BORDERS THICKER ON RIGHT AND BOTTOM. ALWAYS.

INTERACTION

HOVER STATES: ABRUPT. BINARY. ZERO EASE.

COLOR FLIP

HOVER ME

bg: white → black · text: black → red · shadow: 8px → none

BORDER JUMP

HOVER ME

border: 4px → 8px · shadow: 4px → 16px yellow

ACCENT SWAP

HOVER ME

yellow → magenta · text inverts · no transition

TAG

THE HOVER RULE:

EVERY INTERACTIVE ELEMENT MUST FEEL LIKE FLIPPING A SWITCH. NOT SLIDING A DIAL. NOT FADING A LIGHT. FLIPPING. A. SWITCH. TRANSITION-NONE IS NOT A SHORTCUT — IT IS THE PHILOSOPHY.

DO

—

DON'T

DO THESE THINGS

border-[6px] border-black

Ultra-thick black borders on every single element. 4–8px minimum. No exceptions.

shadow-[8px_8px_0_#000]

Hard offset shadows only. Never blurred. Never soft. Never subtle.

rotate-[-3deg] / rotate-[5deg]

Text and elements rotated at odd angles. Between -3deg and +5deg. Break the grid.

font-black uppercase

Font weight 900. All uppercase. No apologies. No whispering.

asymmetric borders

Borders thicker on right and bottom. border-r-8 border-b-8. Uneven on purpose.

COLOR CONFLICT

Red next to green. Magenta next to yellow. Cyan on red. Visual conflict is the goal.

text-xs next to text-8xl

Wildly mixed font sizes in the same section. Hierarchy is abolished.

hover: abrupt flips

On hover: color inverts, borders jump, shadows disappear or double. transition-none only.

DON'T DO THESE

rounded-lg

Zero border radius. Rounded corners are comfort. Anti-Design rejects comfort.

text-gray-500

No muted tones. No subtle colors. Every color must be at 100% saturation.

shadow-md

No soft drop shadows. No blur. Only hard, offset, pixel-perfect shadows.

bg-gradient-to-r

Gradients are harmony. Anti-Design is conflict. Flat fills only.

transition-all ease-in-out

No smooth easing. No gentle transitions. Abrupt or nothing.

backdrop-blur

No frosted glass. No blurs of any kind. Everything is sharp.

gap-4 (consistent)

No consistent spacing. Rhythm is for music, not Anti-Design.

text-center (global)

No enforced alignment. Centered everything is what bad designers do.

SHADOW

HARD. OFFSET. ZERO BLUR. THAT IS ALL.

SMALL

4px

shadow-[4px_4px_0_#000000]

DEFAULT

8px

shadow-[8px_8px_0_#000000]

LARGE

12px

shadow-[12px_12px_0_#000000]

MASSIVE

16px

shadow-[16px_16px_0_#FF0000]

SHADOW DIRECTION: ALWAYS BOTTOM-RIGHT

THE SHADOW MUST ALWAYS GO TO THE BOTTOM-RIGHT. BOTTOM-LEFT IS A MISTAKE. TOP SHADOW IS FORBIDDEN. CENTERED GLOW IS NOT A SHADOW — IT IS A SIN.

THE ANTI-DESIGN MANIFESTO

BEAUTY IS A LIE.

WHAT IS CALLED BEAUTIFUL IS ONLY WHAT IS FAMILIAR. ANTI-DESIGN MAKES STRANGE.

CONSISTENCY IS CONFORMITY.

CONSISTENT SPACING. CONSISTENT COLOR. CONSISTENT COWARDICE. ANTI-DESIGN REFUSES.

HARMONY IS CONTROL.

COMPLEMENTARY COLORS WERE INVENTED TO SUPPRESS VISUAL CONFLICT. WE RESTORE IT.

THICK BORDERS ARE HONESTY.

A 1PX BORDER PRETENDS TO NOT BE THERE. A 8PX BORDER ANNOUNCES ITSELF PROUDLY.