Design System Preview
bape.com

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

Shop Now View Lookbook
01 / Colors

Color Palette

Brand
Black
#000000
lorem ipsum / lorem ipsum / lorem
Dark Gray
#323232
CTA lorem / lorem ipsum
Search Button
#222222
lorem ipsum dolor
Footer Dark
#1d1d1d
lorem ipsum dolor
Logo Icon
Ape Gold
#fecd7a
lorem ipsum dolor
Ape Brown
#693b00
lorem ipsum dolor
Ape Black
#231f20
lorem ipsum
Neutral
Background
#ffffff
lorem ipsum
Border Light
#e6e6e6
lorem ipsum dolor sit
Muted
#acacac
lorem ipsum / lorem ipsum dolor
Semantic
Danger
#cc0000
lorem / lorem
Success
#2e7d32
lorem / lorem ipsum
Warning
#e65100
lorem / lorem ipsum
02 / Typography

Typography Hierarchy

A Bathing Ape --- Logo (24px)
24px / 700 / line-height: 1.5 / letter-spacing: 0.5px (0.02em)lorem ipsum dolor
Search Categories --- Type List (20px)
20px / 700 / line-height: 1.3 / letter-spacing: 0.5px (0.025em)lorem ipsum dolor
New Arrivals --- Section H2 (18px)
18px / 700 / line-height: 1.5 / letter-spacing: 0.5px (0.028em)lorem ipsum dolor
lorem ipsum dolor --- Account Heading (15px)
15px / 400 / line-height: 1.0 / letter-spacing: 0.5px (0.033em)lorem ipsum dolor
lorem ipsum dolor --- 1993 lorem, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.
12px / 400 / line-height: 1.5 / letter-spacing: 0.5px (0.04em)lorem
Navigation Link --- Nav (12px Bold)
12px / 700 / line-height: 1.5 / letter-spacing: 0.5px / color: #323232lorem ipsum dolor
FREE SHIPPING ON ORDERS OVER 30,000 YEN --- Banner (10px)
10px / 400 / line-height: 1.5 / letter-spacing: 0.5px (0.05em)lorem ipsum dolor
03 / Product --- lorem ipsum dolor

Product Detail Page

1st Camo Shark Full Zip Hoodie

BAPE lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing elit, 2000 lorem ipsum dolor sit amet consectetur adipiscing elit sed do. 1st Camo lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum DNA lorem ipsum dolor.

Product Details

Item1st Camo Shark Full Zip Hoodie
MaterialCotton 100%
ColorGreen Camo / Blue Camo / Purple Camo
SizeS / M / L / XL / XXL
Price55,000 yen (tax included)

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

Add to Cart Size Guide
04 / Buttons

Button Variations

Add to Cart
Primary CTA
Size Guide
Secondary CTA
Add to Wishlist
Wishlist CTA

BAPE lorem CTA loremlorem(border-radius: 0px). pill lorem ipsum dolor sit. lorem ipsum dolor(radius: 50%)lorem ipsum dolor sit.

05 / Cards

Product Grid

1ST CAMO

1st Camo Shark Full Zip Hoodie

55,000 yen
Add to Cart
BAPE STA

Bape Sta Low

25,300 yen
Add to Cart
BABY MILO

Baby Milo Tee

12,100 yen
Add to Cart
APE HEAD

Ape Head Pullover Hoodie

38,500 yen
Add to Cart
06 / Forms

Form Elements

Default --- border: #000000, radius: 0px
Focus --- border: #323232, shadow: rgba(50,50,50,0.2)
Please enter a valid phone number
Error --- border: #cc0000
Newsletter --- border: #e6e6e6 (light), font-size: 15px
Subscribe
07 / Elevation

Depth & Elevation

Level 0: Flat
shadow: none (lorem)
Level 1
0 0 25px rgba(0,0,0,0.2) --- Wishlist CTA
Level 2
lorem ipsum dolor(lorem)
Level 3
lorem ipsum / lorem(lorem)

BAPE lorem ipsum dolor sit. lorem shadow lorem ipsum dolor Wishlist CTA lorem. lorem ipsum dolor sit amet consectetur adipiscing.

08 / Layout

Spacing & Layout

Spacing Scale

4px
8px
15px
24px
48px
80px

Container Width

Max Container 1200px
Content Area 940px

Border Radius Scale

0px (lorem UI lorem)
2
50% (Cart Badge)

lorem UI lorem ipsum(0px). lorem ipsum dolor sit amet consectetur(50%)lorem. pill lorem ipsum dolor sit.