Streetwear / Hype

---
name: streetwear-hype
description: Apply the Streetwear / Hype visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Streetwear / Hype, mentions hypebeast, drop culture, sneaker drop, or describes black plus one hot accent, heavy condensed all-caps type, countdown timers and drop calendars — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Streetwear / Hype Design System

Bold drop-culture energy: black ground, one hot accent (volt or safety orange), heavy condensed all-caps type at poster scale, countdown timers, marquees, and SOLD OUT states. The design is a queue outside the store, translated to pixels.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Streetwear / Hype.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (hypebeast, drop culture, sneaker drop, street brand), or describes its traits: black plus one hot accent; heavy condensed all-caps type; countdown timers and drop calendars; marquee tickers; box-logo branding; zero radius, zero decoration.

## Design tokens

### Color palette

- Near-black page background: `#0a0a0a` (--color-bg)
- Product tile and panel background: `#161616` (--color-surface)
- Primary text, pure white: `#ffffff` (--color-text)
- Secondary text and metadata: `#a3a3a3` (--color-text-muted)
- Volt — the one hot accent for CTAs, tickers, and live states: `#ccff00` (--color-accent)
- Safety orange — alternate heat; use volt OR orange per page, never both: `#ff5c00` (--color-accent-alt)
- Sold-out and error states: `#ff2b2b` (--color-sold-out)
- Grid seams and tile borders: `#2e2e2e` (--color-border)

### Typography

- Display / headings: Anton (fallback: Arial Narrow, Impact, sans-serif) (ideal: Druk Condensed, premium — use Anton as the free substitute)
- Body: Archivo (fallback: Helvetica, Arial, sans-serif) (ideal: Helvetica Neue, premium — use Archivo as the free substitute)
- Mono / data: IBM Plex Mono (fallback: Courier New, monospace)
- Type scale: 1.414 ratio, base 15px — computed steps: 15px / 21px / 30px / 42px / 60px / 85px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1, letter-spacing 0.02em, uppercase
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64 — Dense and pressurized; product grids pack tight with hairline seams, and type runs edge to edge like a flyposted wall.
- Border radius: none 0px — Zero radius everywhere. Softness reads as weakness in this style.
- Border treatment: 1px solid #2e2e2e — Hairline grid seams; the accent color appears as a 2px border only on live/active drops.

### Shadows

- none: `none` — Default — the style is flat; hierarchy comes from scale and the accent

### Layout

- Max content width: 1440px
- Edge-to-edge product grid with visible 1px seams, 3–4 columns
- Full-bleed poster headlines that crop off the viewport edge
- Marquee ticker strips between sections
- Fixed countdown bar for the next drop
- Product tiles carry status chips: LIVE, SOON, SOLD OUT

### Effects

- Scrolling marquee text strips
- Diagonal caution-tape banners for launches
- Stark duotone or flash-photography product shots
- Glitch-free, flat rendering — no gradients, no glow

### Motion

- Easing: cubic-bezier(0.85, 0, 0.15, 1); durations 100ms / 200ms / 400ms
- Marquees scroll continuously at a fixed speed
- Hover inverts a tile: black flips to accent with black text — instant
- Countdown digits flip hard with no ease
- Page transitions cut, never fade

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0a0a0a;
  --color-surface: #161616;
  --color-text: #ffffff;
  --color-text-muted: #a3a3a3;
  --color-accent: #ccff00;
  --color-accent-alt: #ff5c00;
  --color-sold-out: #ff2b2b;
  --color-border: #2e2e2e;
  --radius-none: 0px;
  --border-default: 1px solid #2e2e2e;
  --font-display: Anton, "Arial Narrow", Impact, sans-serif;
  --font-body: Archivo, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --text-base: 15px;
  --leading-heading: 1;
  --leading-body: 1.5;
  --tracking-heading: 0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.85, 0, 0.15, 1);
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Anton:wght@400&family=Archivo:wght@400;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** 56px black bar, box logo left in Anton caps, sparse right-aligned links; cart count in a volt square badge
- **Hero:** Viewport-height poster: Anton headline at 10–15vw cropping off-edge, mono countdown beneath, single accent CTA, product shot flash-lit on black
- **Card:** Flat #161616 tile, 1px seam border, product on neutral ground, condensed caps name, mono price, status chip top-left; hover inverts to accent
- **Button (primary):** Volt fill, black Anton caps text, 0 radius, full-width in context; instant invert to white on hover
- **Button (secondary):** 1px white border, white caps text on black; inverts to white fill with black text on hover
- **Form fields:** Black field, 1px #2e2e2e border, 0 radius, mono input text; focus swaps border to the accent, no glow

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The drop mechanic made visual: a mono countdown timer, a grid of product tiles that flip to a stark SOLD OUT overlay, and a scrolling marquee ticker shouting the next release in condensed caps. Spend boldness here; keep everything else quiet.

## Do

- Commit to one accent per page — volt or safety orange, never both
- Push display type to poster scale and let it crop off the edge
- Make scarcity visible: countdowns, LIVE chips, sold-out overlays
- Keep everything flat and hard-edged; contrast is the decoration

## Don't

- No rounded corners, gradients, or soft shadows
- No more than one accent color per view
- Don't fill space for its own sake — density and crop are the point
- Never fake scarcity with a countdown that resets; the audience notices

## Accessibility notes

- Volt #ccff00 on black passes at ~17:1, but black text on volt buttons is the required pairing — never white on volt
- Continuous marquees must pause on hover/focus and honor prefers-reduced-motion
- All-caps condensed type hurts readability at length — keep body copy in mixed-case Archivo
- Sold-out red on black is ~5:1; pair with the text label, never color alone

## Reference sites

- Supreme: https://www.supremenewyork.com
- Nike SNKRS: https://www.nike.com/launch
- Off-White: https://www.off---white.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip streetwear-hype.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/streetwear-hype.json

Settings → Capabilities → Skills → Upload skill → streetwear-hype.zip