## THE MANIFESTO

ANARCHIST ANGELS is the design system for rebels, punks, and digital anarchists. Pure black chaos meets angelic white light. No subtle gradients, no corporate BS, no compromises. Just LOUD, PROUD, and IN YOUR FACE design that refuses to play by the rules.

### CHAOS SYSTEM

- HOT PINK RAGE: #ff0055 screaming energy
- ZERO SUBTLETY: Maximum contrast always
- AGGRESSIVE GLOWS: 30px shadows everywhere
- SHARP EDGES: 0-2px radius only

### RIOT ENERGY

- TOXIC GREEN: #00ff00 pure rebellion
- PUNK TYPOGRAPHY: All caps, all attitude
- BOLD BORDERS: 2-6px thick lines
- NO COMPROMISE: Pure white on pure black

### REBEL SPIRIT

- ELECTRIC YELLOW: #ffff00 warning lights
- GRAFFITI VIBES: Street art aesthetic
- CHAOTIC MOTION: Rotations on hover
- PURE ATTITUDE: Unapologetically loud

## PUNK ROCK PALETTE

#### CHAOS

`#FF0055`

HOT PINK SCREAM

#### RIOT

`#00FF00`

TOXIC GREEN

#### REBEL

`#FFFF00`

ELECTRIC YELLOW

#### RAGE

`#FF0000`

PURE RED FURY

#### VOID

`#9933FF`

PURPLE CHAOS

#### HALO

`#FFFFFF`

PURE ANGEL WHITE

#### VOID

`#000000`

PURE BLACK CHAOS

#### ANGEL

`#FFFFFF`

CONTRAST MAXIMUM

## PUNK TYPOGRAPHY

# H1: MAXIMUM CHAOS GRADIENT

## H2: HOT PINK SCREAM

### H3: TOXIC GREEN RIOT

#### H4: ELECTRIC YELLOW REBEL

##### H5: PURE WHITE HALO

###### H6: PURPLE VOID CHAOS

Body text is LOUD and CLEAR - pure white (#ffffff) on pure black (#000000). No gray areas, no middle ground, no compromises. Every word matters. Every sentence screams. This is typography that refuses to whisper.

Even muted text (#cccccc) maintains aggressive readability because ACCESSIBILITY IS PUNK ROCK.

### TYPOGRAPHY RULES

- ALL CAPS EVERYTHING: Headers scream in uppercase
- HEAVY WEIGHTS: 700-900 font weight minimum
- TIGHT TRACKING: Compressed letter spacing
- GLOW EFFECTS: 30px text shadows on all headings
- ZERO SUBTLETY: Pure white or pure accent colors

## AGGRESSIVE BUTTONS

### PRIMARY ACTIONS

### ALTERNATIVE STYLES

### BUTTON PHILOSOPHY

Buttons are LOUD, PROUD, and IMPOSSIBLE TO IGNORE. They scale up on hover, glow like neon signs, and demand to be clicked. No subtle hover states - only AGGRESSIVE TRANSFORMATIONS.

## REBELLIOUS CARDS

### STANDARD CARD

Default white border. Hover for pink glow and chaotic rotation.

### SOLID BLACK

Pure black background. Zero transparency. Maximum void.

### ANGELIC LIFT

White border with halo glow. The angels among chaos.

### CHAOS ENERGY

Hot pink border. Pink glow. Rotates clockwise on hover. Pure punk energy.

### RIOT MODE

Toxic green border. Green glow. Counter-clockwise rotation. Rebellion incarnate.

### RAGE STATE

Pure red fury. Red glow. No rotation - just pure aggressive energy.

### REBEL SPIRIT

Electric yellow warning. Yellow glow. Unstable and proud of it.

## AGGRESSIVE ALERTS

### CHAOS ALERT

Hot pink border with pink glow - for messages that need MAXIMUM ATTENTION and refuse to be ignored.

### RIOT ALERT

Toxic green border with green glow - for rebellious notifications that break the rules.

### REBEL ALERT

Electric yellow border with yellow glow - WARNING: this message is UNSTABLE and DANGEROUS.

### RAGE ALERT

Pure red fury border with red glow - for critical errors and ABSOLUTE EMERGENCIES ONLY.

## PUNK CODE

### INLINE CODE

Inline code is `TOXIC GREEN` with `bold weight` and `aggressive borders` because even code deserves to be LOUD.

### CODE BLOCKS

    // ANARCHIST ANGELS COLOR SYSTEM
    const punkRock = {
      chaos: '#ff0055',    // HOT PINK SCREAM
      riot: '#00ff00',     // TOXIC GREEN REBELLION
      rebel: '#ffff00',    // ELECTRIC YELLOW WARNING
      rage: '#ff0000',     // PURE RED FURY
      void: '#9933ff',     // PURPLE CHAOS
      halo: '#ffffff',     // PURE ANGEL WHITE
      abyss: '#000000'     // PURE BLACK VOID
    };

    // NO SUBTLE HOVERS - ONLY AGGRESSIVE TRANSFORMATIONS
    element.addEventListener('hover', () => {
      element.style.transform = 'translateY(-4px) scale(1.05) rotate(1deg)';
      element.style.boxShadow = '0 0 40px rgba(255, 0, 85, 1)';
    });

## DATA REBELLION

### PUNK ROCK COLOR REFERENCE

SYSTEM | COLOR CODE | ATTITUDE
--- | --- | ---
`--accent-chaos-1` | #ff0055 | HOT PINK SCREAM
`--accent-riot-1` | #00ff00 | TOXIC GREEN REBELLION
`--accent-rebel-1` | #ffff00 | ELECTRIC YELLOW WARNING
`--accent-rage-1` | #ff0000 | PURE RED FURY
`--accent-void-1` | #9933ff | PURPLE CHAOS
`--accent-halo-1` | #ffffff | PURE ANGEL WHITE

## THE RULEBOOK (IRONIC)

### DESIGN PRINCIPLES

- ZERO COMPROMISE: Pure black backgrounds, pure white text, no gray areas
- MAXIMUM CONTRAST: Every element screams against the void
- AGGRESSIVE GLOWS: 30px shadows on everything that matters
- SHARP EDGES: 0-2px border radius - no soft corners allowed
- THICK BORDERS: 2-6px borders that can't be ignored
- CHAOTIC MOTION: Rotations, scales, and transformations on hover
- LOUD TYPOGRAPHY: All caps headers, 700-900 font weights
- PURE COLORS: #ff0055, #00ff00, #ffff00, #ff0000 - no mixing

### WHEN TO USE

- PUNK BRANDS: Music, art, counter-culture
- REBEL TECH: Crypto, blockchain, decentralized
- CREATIVE CHAOS: Experimental design studios
- YOUTH MOVEMENTS: Gen Z and beyond
- GAMING: Cyberpunk, dystopian themes
- ATTITUDE REQUIRED: Anywhere rules need breaking

### WHEN NOT TO USE

- CORPORATE: This ain't for suits
- MEDICAL: Too aggressive for healthcare
- FINANCE: Banks hate this
- GOVERNMENT: Too rebellious
- CONSERVATIVE: Literally the opposite
- BORING: If you need "professional," go elsewhere

### ⚠️ WARNING ⚠️

This theme is INTENTIONALLY AGGRESSIVE. It's not for everyone. It's not meant to be. This is design for rebels who refuse to blend in. If you want subtle, elegant, or corporate-friendly - you're in the wrong place. This is ANARCHIST ANGELS - we don't do boring.

## TECHNICAL REBELLION

### GLOW EFFECTS SYSTEM

    /* AGGRESSIVE GLOW SYSTEM - 30PX SHADOWS */
    --glow-pink: 0 0 30px rgba(255, 0, 85, 0.8);
    --glow-green: 0 0 30px rgba(0, 255, 0, 0.8);
    --glow-yellow: 0 0 30px rgba(255, 255, 0, 0.8);
    --glow-white: 0 0 30px rgba(255, 255, 255, 0.6);
    --glow-red: 0 0 30px rgba(255, 0, 0, 0.8);
    --glow-purple: 0 0 30px rgba(153, 51, 255, 0.8);

    /* HOVER STATE INTENSITY */
    .btn-primary:hover {
      box-shadow: 0 0 40px rgba(255, 0, 85, 1);  /* 100% OPACITY */
      transform: translateY(-4px) scale(1.05);
    }

### CONTRAST RATIOS

- WHITE ON BLACK: 21:1 (Maximum possible)
- HOT PINK ON BLACK: 7.2:1 (AAA)
- TOXIC GREEN ON BLACK: 15.3:1 (AAA+)
- YELLOW ON BLACK: 19.6:1 (AAA+)
- NO COMPROMISES: All ratios exceed WCAG AAA

### BORDER SYSTEM

- DEFAULT: 2px solid white
- MEDIUM: 3px for emphasis
- THICK: 4px for cards with accent
- ULTRA: 6px for alerts and borders
- RADIUS: 0-2px only (sharp aesthetic)