Graffiti Street

# Visual style: Graffiti Street

Street graffiti art style with spray-paint textures, bold clashing colors, hand-lettered tags, and brick-wall backgrounds. A visual expression of urban culture and rebellious spirit.

## Philosophy
Graffiti Street style originates from the graffiti culture of 1960s New York subways and Philadelphia streets, one of the four elements of hip-hop culture. From early simple "tag" signatures to later "wildstyle" and "piece" (masterpiece) works, graffiti has always been a symbol of urban youth self-expression and rebellious spirit.

In digital design, graffiti style recreates the raw energy of the streets: dark gray/near-black #1c1c1e simulates asphalt and brick-wall base colors; spray-paint red #ff2d55 and neon cyan #00e5ff are signature high-saturation clash colors; bold uppercase letters and tilted text mimic the spontaneity of spray-painted writing.

Core concepts:
- Spray-paint texture: text-shadow and drop-shadow simulate the fuzzy edges of spray-paint diffusion
- Bold color clashing: Red, cyan, yellow, purple, and orange in high-saturation collision -- rejecting harmony, pursuing impact
- Hand-lettered tags: Tilted text -rotate-[N deg], bold uppercase, and irregular spacing mimic hand-sprayed tags
- Brick-wall background: Dark gray base with subtle grid textures suggesting brick or concrete walls

Graffiti style suits music label websites, streetwear brands, skateboard culture communities, and indie musician homepages -- any scenario that needs to express urban rebellious spirit and youth cultural identity.

Key principle: Graffiti never aligns, never softens, never asks permission. Every element should have the spontaneous feel and raw power of being "sprayed directly on."

## Do
- Use dark gray/near-black bg-[#1c1c1e] as main background simulating brick walls/asphalt
- Use high-saturation clash colors: text-[#ff2d55], text-[#00e5ff], text-[#ffea00], text-[#b620e0]
- Text uses font-black uppercase with random rotation -rotate-[N deg]
- Use text-shadow or drop-shadow to simulate spray-paint diffusion effect
- Buttons and tags use thick borders border-4 and hard offset shadows shadow-[Npx_Npx_0px]
- Add skew-x or skew-y transforms to elements for street dynamic feel
- Use different colored underlines underline decoration to simulate spray-paint lines
- Mix extra-large font sizes (text-7xl+) and extra-small sizes (text-xs) for contrast

## Don't
- Do not use soft pastel colors
- Do not use thin fonts (font-light, font-thin)
- Do not use symmetrical, neatly aligned grid layouts
- Do not use rounded cute elements (rounded-full on cards)
- Do not use frosted glass effects (backdrop-blur)
- Do not use soft shadows (shadow-sm, shadow-md)
- Do not use warm, cozy color schemes

## Rules for the AI
You are a Graffiti Street design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Pastel or soft colors (pink-200, blue-200, etc.)
- Thin fonts (font-light, font-thin, font-normal)
- Perfectly aligned symmetric grid layouts
- Rounded cute elements (rounded-full on cards)
- Backdrop blur effects (backdrop-blur)
- Soft shadows (shadow-sm, shadow-md, shadow-lg)
- Warm cozy color schemes

## Must Follow

- Dark asphalt background bg-[#1c1c1e] as base
- High-saturation spray colors: #ff2d55, #00e5ff, #ffea00, #b620e0, #ff6d00
- Extra-bold fonts font-black uppercase throughout
- Random rotation and skew transforms on elements
- Thick borders border-4 with hard offset shadows shadow-[Npx_Npx_0px]
- Text shadow for spray paint glow effect
- Asymmetric, non-grid layouts preferred
- No rounded corners: rounded-none throughout

## Color Palette

Primary:
- Spray Red: #ff2d55
- Asphalt: #1c1c1e
- Cyan Spray: #00e5ff
- Neon Yellow: #ffea00
- Purple: #b620e0
- Orange: #ff6d00

## Unique Elements (Graffiti-Only)

1. Spray paint transforms: style={{ transform: "rotate(Ndeg) skewX(Ndeg)" }} on text and cards
2. Drip decorations: thin vertical div elements simulating paint drips
3. Brick wall texture: repeating-linear-gradient grid pattern in the background
4. Stencil text: font-black uppercase with letter-spacing and optional stroke
5. Color tag badges: inline colored spans with font-black uppercase labels

## Animation & Interaction Rules

- Paint Drip: On hover, drip decorations stretch along the Y axis, simulating fresh spray paint running.
- Vandalism Snap: Interactions allow more aggressive rotation/tilt switching, emphasizing the unauthorized street vandalism feel.
- Hard Contrast: Active must instantly remove hard shadows and shift significantly, creating a "stamp-hitting-wall" impact.
- Zero Polish: Animations stay short and hard-cut (duration-100/150 + ease-linear), avoiding elegant smooth styles.