We Make Noise,
Not Clothes

Design system preview built from DESIGN.md computed style tokens. Ultra-minimal monochromatic palette.

Shop Now Collection
01 / Colors

Color Palette

Core
Black
#000000
CTA, lorem ipsum, lorem
White
#ffffff
lorem, lorem ipsum dolor
Gray Scale
Gray Dark
#222222
lorem ipsum dolor sit
Gray Mid
#666666
lorem, lorem ipsum
Gray Light
#cccccc
lorem ipsum
Functional
Overlay
rgba(0,0,0,0.5)
lorem ipsum dolor
Section BG
#f7f7f7
lorem ipsum dolor
Error
#cc0000
lorem ipsum
02 / Typography

Type Hierarchy

Spring / Summer 2025H2 Display
36px / 600 / line-height: 1.03 / letter-spacing: 0.04em / palt: on
Collection OverviewH3
20px / 400 / line-height: 1.5 / letter-spacing: 0.02em / palt: on
UndercoverH1 / Logo
16px / 400 / line-height: 1.4 / letter-spacing: 0.12em / palt: on
Navigation ItemNav Bold
12px / 600 / line-height: 1.5 / palt: on
Navigation LinkNav Regular
11px / 400 / line-height: 1.5 / palt: on
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit 10px lorem ipsum dolor. ABCabc 123
11px (lorem ipsum: 10px) / 400 / line-height: 1.5 / palt: onBody
lorem ipsum dolor / lorem ipsum dolor — lorem ipsum
10px / 400 / line-height: 1.5 / color: Gray MidSmall / Caption
03 / Collection

Editorial Showcase

Spring / Summer 2025

We Make Noise,
Not Clothes

lorem ipsum dolor 1990 lorem, lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, lorem ipsum dolor. lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing.

Photography / Styling / Direction — Undercover Ltd.
04 / Buttons

Button Variations

Subscribe
Primary / Subscribe
bg: #000, radius: 2px, 600
Top Page
Secondary / Top Page
bg: #000, radius: 0px, 400
Details
Ghost / Outline
bg: transparent, border: #000
Sold Out
Disabled
color: #666, border: #ccc
View
Small
10px, padding: 6px 20px
Shop Now
Primary on Dark
Collection
Ghost on Dark
05 / Cards

Card Components

Product Cards (No Border, No Shadow)
360 x 200

Noise Trench Coat

¥198,000
360 x 200

Chaos Embroidery Hoodie

¥68,000
360 x 200

Printed Silk Shirt

¥88,000
Bordered Cards

Store Information

UNDERCOVER Aoyama
lorem ipsum dolor 5-3-18
Open: 12:00 - 20:00

News

2025 Spring / Summer Collection Look Book lorem ipsum dolor. lorem ipsum dolor sit amet consectetur.

Contact

lorem ipsum dolor sit amet consectetur. info@undercoverism.com

06 / Forms

Form Elements

Default -- border: #cccccc, radius: 2px
Focus -- border: #000000
Invalid email address
Error -- border: #cc0000
07 / Elevation

Depth & Elevation

Level 0: Flat
box-shadow: none (default -- most elements)
Level 1: Subtle
0 1px 2px rgba(0,0,0,0.05) -- barely visible
Border Emphasis
2px solid #000 -- elevation via weight, not shadow
Inverted Surface
bg: #000 -- depth via color contrast
08 / Layout

Content Widths & Spacing

Content Widths
Max Width 1200px
Main Content 940px
Article / Editorial 620px
Product Grid 3-column
Spacing Scale
8px
16px
24px
32px
40px
64px
80px
120px