Generate bold, colorful maximalist UI designs and code

Vibrant Maximalism is a design-it sub-style built on deliberate sensory overload - patterns layered on gradients layered on photos, clashing color pairs (neon green with hot pink, orange with electric blue) instead of harmonious palettes, and 3-4 completely different typefaces mixed in one layout (a massive serif headline, a bubble-letter subhead, monospace body text). It is a child reference of design-it, applied when a request matches this maximalist aesthetic specifically.

Use this sub-style when a design should feel loud and deliberately excessive - every color highly saturated with no calm neutrals, visuals crowded with stickers, repeating patterns, emojis, and marquee scrolling text. Its own rules invert typical restraint: break the grid and let elements overlap awkwardly, and never leave whitespace - any empty area should be filled with a pattern, marquee, or giant emoji. A design calling for calm, minimal, or harmonious color use is the opposite of this sub-style.

The signature effects are hard-offset, unblurred multi-color shadows (text-shadow: 4px 4px 0 #000, 8px 8px 0 #00FFFF, 12px 12px 0 #FF00FF) and asymmetrical border radii (0 40px 0 40px) on rotated, tilted elements. Platform support for these effects varies: CSS and Flutter's BorderRadius.only support per-corner radii natively, but SwiftUI has no built-in per-corner radius and needs a custom cornerRadius(_:corners:) extension to replicate it. Hard, non-blurred shadows follow a similar pattern - SwiftUI and Flutter/React Native can set shadow blur/radius to zero directly for a crisp offset shadow, but Jetpack Compose's default shadow modifier always blurs edges, so a true brutalist hard shadow there requires manually rendering an identical shape offset behind the main one in a solid color rather than using the shadow modifier at all. Radial-gradient color blobs are native CSS/SwiftUI/Compose (RadialGradient/Brush.radialGradient) but React Native has no built-in radial gradient, so the skill approximates one with an absolutely-positioned blurred View.

.max-headline {
  text-shadow: 4px 4px 0px #000, 8px 8px 0px #00FFFF, 12px 12px 0px #FF00FF;
  transform: rotate(-3deg);
}

As a design-it sub-style, it's applied through the parent skill's aesthetic matching, with the same clashing-blob-background, hard-shadow-headline, and asymmetrical-card pattern expected across web CSS and the four listed native frameworks, working around each platform's shadow and corner-radius capability differences.

Designers and developers building a deliberately loud, maximalist interface - clashing colors, hard brutalist shadows, mixed typography, and asymmetrical shapes - who need the same chaotic energy reproduced consistently across web and native platforms despite real differences in each platform's native support for per-corner radii and true hard (unblurred) shadows.