DropZone

DropZone mockup preview
Click to expand

DropZone is a design system for streetwear drops and limited-edition product launches where scarcity creates demand and bold visuals fuel the hype. Built on a dark foundation, the system uses high-contrast neon accents to punch through the darkness with red-orange fire, electric cyan, and signal yellow. Standard density maintains a high-impact visual hierarchy where every element fights for attention in controlled, deliberate ways. Sharp corners and colored glow shadows channel the raw energy of street culture.

Primary#FF3D00
Secondary#00E5FF
Tertiary#FFEA00
Background#121212
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayBebas Neue · 64px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headlineBebas Neue · 44px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

subheadBebas Neue · 32px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyLargeWork Sans · 18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyWork Sans · 15px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodySmallWork Sans · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

captionWork Sans · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

overlineWork Sans · 11px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

codeSpace Mono · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Corner Radius

0px
2px
8px
12px
20px
9999px

Spacing

Base: 8px
4px
8px
12px
16px
24px
32px
48px
64px
96px

DropZone is a design system for streetwear drops and limited-edition product launches where scarcity creates demand and bold visuals fuel the hype. Built on a dark foundation, the system uses high-contrast neon accents to punch through the darkness with red-orange fire, electric cyan, and signal yellow. Standard density maintains a high-impact visual hierarchy where every element fights for attention in controlled, deliberate ways. Sharp corners and colored glow shadows channel the raw energy of street culture.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Elevation & Depth

Subtle
Medium
Large
Overlay
Glow Orange
Glow Cyan

Do's & Don'ts

Do

use countdown timers prominently for upcoming drops; the secondary cyan glow makes them impossible to miss.
lean into bold, oversized Bebas Neue headlines with generous tracking for maximum impact.
display stock quantities ("12 left") in real-time near the buy button to drive urgency.
use the orange glow shadow on the primary CTA during active drops to create visual heat.
design for mobile-first; most drop traffic comes from social media links on phones.

Don't

use rounded corners on product cards; the sharp 0px radius is core to the streetwear edge.
soften the dark background with grays lighter than #2A2A2A; maintain the high-contrast dramatic feel.
use the primary red-orange for body text or passive elements; it must always signal action or urgency.
add playful animations or bounce effects; transitions should be fast (150ms) and sharp, not cute.
fabricate scarcity or fake countdown timers; the hype must be authentic or trust collapses instantly.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.5 KB
Downloads 0
bold dark ecommerce fashion landing-page

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/dropzone and implement it in my code

Don't have the MCP? Install it here