lorem lorem ipsum lorem ipsum dolor lorem ipsum

10 YEARS
CLOTHING

lorem ipsum dolor sit amet consectetur. 10 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed do.

SHOP NOW ABOUT 10YC
01 / Colors

Color Palette

Dark
Near Black
#141414
lorem ipsum / lorem / CTA lorem
Text Body
#121212
lorem ipsum dolor(lorem)
Gray
Gray 500
#858585
lorem ipsum dolor sit / lorem / lorem
Gray Disabled
rgba(18,18,18,0.55)
lorem ipsum dolor / lorem ipsum dolor
Light
Surface Light
#f5f5f5
lorem ipsum / lorem ipsum dolor
White
#ffffff
lorem ipsum / CTA lorem(outline)
Overlay & Semantic
Overlay
rgba(56,56,56,0.5)
lorem ipsum dolor
Error
#c0392b
lorem / lorem ipsum(lorem ipsum)
02 / Typography

Typography Hierarchy

10 lorem ipsum dolor — Hero Title
Roboto / 44px / 900 / line-height: 1.09 / letter-spacing: 0.05emlorem ipsum
lorem ipsum dolor — H2 Section
Roboto / 16px / 500 / line-height: 1.25 / letter-spacing: 0.05emlorem ipsum
lorem ipsum dolor — H5 / Footer Head
Roboto / 15px / 900 / line-height: 1.4 / letter-spacing: 0.05emlorem ipsum
lorem ipsum dolor — Hero Subtitle / Description lorem ipsum. lorem ipsum dolor sit amet consectetur.
Roboto / 15px / 400 / line-height: 1.53 / letter-spacing: normallorem ipsum
lorem ipsum dolor — Body. 13px lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit(14-16px)lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123
Roboto / 13px / 400 / line-height: 1.31 / letter-spacing: normal / palt: loremlorem
lorem ipsum dolor — Nav Link
Roboto / 13px / 400 / line-height: 1.08 / letter-spacing: 0.05emlorem
lorem ipsum dolor — Small / Copyright (10px)
Roboto / 10px / 400 / line-height: 1.6lorem ipsum
03 / Article

Article Sample

10 lorem ipsum dolor,
lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur adipiscing, 10YC lorem“lorem ipsum dolor sit”lorem ipsum dolor. lorem ipsum dolor sit, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed.

lorem ipsum dolor

10YC lorem T lorem ipsum, lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem ipsum, lorem ipsum dolor sit“10 lorem ipsum dolor sit amet”lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit, lorem ipsum / lorem / lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor

lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur, “lorem ipsum dolor, lorem ipsum dolor sit”lorem ipsum dolor sit. lorem ipsum, lorem ipsum, lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem ipsum dolor sit amet.

04 / Buttons

Button Variants

CART lorem ipsum
Primary Filled (checkout)
SHOP lorem
Secondary Outline
lorem
Back / Link
SOLD OUT
Disabled
SMALL
Small
LARGE ACTION
Large
SHOP NOW
Inverted on Dark
LEARN MORE
Outline on Dark
05 / Cards

Product Cards

PRODUCT IMAGE
MENS lorem ipsum dolor T lorem
¥8,800
PRODUCT IMAGE
UNISEX lorem ipsum dolor T lorem
¥9,900
PRODUCT IMAGE
WOMENS lorem ipsum dolor sit amet
¥14,300
PRODUCT IMAGE
UNISEX lorem ipsum dolor sit
¥16,500
06 / Forms

Form Elements

Default --- bg: #f5f5f5, border: #f5f5f5, radius: 0
Focus --- border: #141414
lorem ipsum dolor sit amet consectetur
Error --- border: #c0392b
Textarea --- lorem ipsum dolor
07 / Elevation

Depth & Elevation (Flat Design)

Level 0: None
lorem. lorem ipsum dolor sit amet. box-shadow lorem ipsum dolor sit amet consectetur
Level 1: Surface Shift
lorem #ffffff → #f5f5f5 lorem. lorem / lorem ipsum dolor
Level 2: Dark
lorem #141414 lorem. lorem ipsum / CTA lorem / lorem ipsum dolor
Level 3: Overlay
rgba(56,56,56,0.5). lorem ipsum / lorem ipsum dolor sit
08 / Layout

Layout & Spacing

Spacing Scale
8px
12px
16px
24px
32px
40px
64px
80px
4-Column Product Grid
Col 1
Col 2
Col 3
Col 4
Content Widths
Page Max Width 1200px
Content Area 960px
Article / Text 620px