PUNK ROCK ENERGY • ZERO RULES • MAXIMUM CHAOS
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.
#FF0055
HOT PINK SCREAM
#00FF00
TOXIC GREEN
#FFFF00
ELECTRIC YELLOW
#FF0000
PURE RED FURY
#9933FF
PURPLE CHAOS
#FFFFFF
PURE ANGEL WHITE
#000000
PURE BLACK CHAOS
#FFFFFF
CONTRAST MAXIMUM
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.
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.
Default white border. Hover for pink glow and chaotic rotation.
Pure black background. Zero transparency. Maximum void.
White border with halo glow. The angels among chaos.
Hot pink border. Pink glow. Rotates clockwise on hover. Pure punk energy.
Toxic green border. Green glow. Counter-clockwise rotation. Rebellion incarnate.
Pure red fury. Red glow. No rotation - just pure aggressive energy.
Electric yellow warning. Yellow glow. Unstable and proud of it.
Hot pink border with pink glow - for messages that need MAXIMUM ATTENTION and refuse to be ignored.
Toxic green border with green glow - for rebellious notifications that break the rules.
Electric yellow border with yellow glow - WARNING: this message is UNSTABLE and DANGEROUS.
Pure red fury border with red glow - for critical errors and ABSOLUTE EMERGENCIES ONLY.
Inline code is TOXIC GREEN with bold weight and aggressive borders because even code deserves to be LOUD.
// 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)';
});| 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 |
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.
/* 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);
}