Design System Preview

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

View DESIGN.md
01 / Colors

Color Palette

Text
Text
#3a3a3a
--color-text
Body Text
#333232
--color-body-text
Overlay Title
#ffffff
lorem ipsum dolor
Blankstate
rgba(51,50,50,0.35)
lorem ipsum dolor
Background
Background
#ffffff
--color-bg
Background Alt
rgba(51,50,50,0.05)
--color-bg-alt
Video BG
#f2f2f2
lorem ipsum dolor sit
Button
Primary
#3a3a3a
--color-btn-primary
Primary Darker
#212121
lorem ipsum
Primary Text
#ffffff
lorem ipsum dolor
Border
Border
#ebebeb
--color-border
Form Border
#cccccc
--color-border-form
Form Darker
#b3b3b3
lorem ipsum dolor
Semantic
Sale
#ea0606
lorem ipsum dolor sit amet
Image Overlay
#685858
lorem ipsum dolor
02 / Typography

Type Hierarchy

NEW IN
28px / 400 / line-height: 1.0 / letter-spacing: normallorem ipsum dolor
COLLECTION HEADING
20px / 700 / line-height: 1.0 / letter-spacing: 0.03emlorem ipsum dolor sit
lorem ipsum — Heading 2
20px / 400 / line-height: 1.0 / letter-spacing: normallorem ipsum
VIEW MORE
16px / 400 / line-height: 1.0 / letter-spacing: normallorem ipsum
2026.05.22 THU
14px / 400 / line-height: 1.0 / letter-spacing: normallorem
Navigation Link
13px / 400 / line-height: 1.0 / letter-spacing: 0.03emlorem ipsum dolor
lorem ipsum dolor — Subheading (h3)
12px / 400 / line-height: 1.3 / letter-spacing: 0.03emlorem ipsum dolor
¥38,500 (tax included)
12px / 400 / line-height: 1.4 / letter-spacing: normallorem ipsum
Footer text — Copyright / Legal
10px / 400 / line-height: 1.6 / letter-spacing: normallorem ipsum
03 / Product

Product Cards

Product Image
HYKE
CREW NECK L/S TEE
¥16,500
Product Image
HYKE
MILITARY SHIRT JACKET
¥79,200
Product Image
HYKE
WIDE TAPERED PANTS
¥44,000
Product Image
HYKE
PERTEX SHIELD HOODED COAT
¥92,400¥132,000
04 / Buttons

Button Variations

Add to Cart
Primary
View More
Outline
Size S
Small / Filter
VIEW MORE
Text Link
05 / Cards

Card Components

News

2026 SPRING SUMMER COLLECTION lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing.

Read More

Stockist

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor HYKE lorem ipsum dolor sit amet consectetur.

Read More

About

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

Read More
06 / Forms

Form Elements

Default — border: #cccccc
Focus — border: #b3b3b3
Please enter a valid email address.
Error — border: #ea0606
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. border: 1px solid #ebebeb lorem. HYKE lorem ipsum dolor sit
Form Border
border: 1px solid #cccccc — lorem ipsum dolor
Background Alt
rgba(51,50,50,0.05) — lorem ipsum dolor sit amet consectetur
Image Overlay
#685858 — lorem ipsum dolor sit amet consectetur
08 / Layout

Layout & Grid

Product Grid — 2 columns Full width
Content Area ~960px (estimated)
Navigation Height 56px
Font Size Tokens
65px
mega
35px
h1
26px
header
20px
h2
17px
h4
15px
base
14px
h6
13px
small