Design System Preview
1616 / arita japan

lorem 400 lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor sit amet consectetur.

Discover the collection
01 / Colors

lorem ipsum dolor

Accent
Accent Yellow
#fff100
Horve Journal lorem
Text
Text Dark
#231f20
lorem / lorem ipsum
Text Primary
#595757
lorem ipsum dolor
Text Muted
#a6a8ab
lorem ipsum dolor / lorem ipsum dolor
Surface
Background
#ffffff
lorem ipsum
Surface Footer
#f5f5f3
lorem ipsum / lorem ipsum dolor
Surface Dark
#231f20
lorem ipsum dolor
Link
Link Default
#0000ee
lorem ipsum dolor sit(lorem ipsum)
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor, lorem ipsum dolor
42px / 400 / line-height: 1.15 / letter-spacing: -0.015em / Yu MinchoHero Title
lorem ipsum dolor sit amet consectetur
30px / 400 / line-height: 1.55 / letter-spacing: -0.015em / Yu MinchoCollection Intro
lorem ipsum dolor — Section Title
24px / 400 / line-height: 1.55 / letter-spacing: -0.015em / Yu Minchoh2
lorem ipsum dolor sit — Sub Title
21px / 400 / line-height: 1.55 / letter-spacing: -0.015em / Yu Minchoh3/h5
Collection   About   Journal   Stockist
19px / 400 / line-height: 1.55 / letter-spacing: 0.025em / Arial, YuGothicNav Link
lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed do. 400 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. Body text at 16px with negative letter-spacing.
16px / 400 / line-height: 1.55 / letter-spacing: -0.015em / Yu MinchoBody
lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. Article body text at 15px.
15px / 400 / line-height: 1.55 / letter-spacing: -0.015em / Yu MinchoBody (article)
© 2024 1616 / arita japan Inc. All rights reserved.
16px / 400 / line-height: 1.55 / Arial, YuGothicLegal (footer)
03 / Article

lorem / lorem ipsum dolor sit amet

1616 / arita japan --- Product Photography

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing 1616 / arita japan lorem. lorem ipsum dolor“1616”lorem, lorem ipsum dolor sit 1616 lorem ipsum dolor sit.

Founded in Arita, Saga Prefecture, 1616 / arita japan reinterprets over four centuries of porcelain craftsmanship through the lens of contemporary design.

lorem ipsum

lorem ipsum dolor sit amet consectetur, 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 sit amet consectetur, lorem ipsum dolor sit amet consectetur.

lorem ipsum
04 / Text Links

lorem ipsum dolor(lorem ipsum dolor)

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

lorem ipsum
Text Link --- 16px / border-bottom 1px
Discover the TY collection
Text Link Dark --- #231f20
lorem ipsum
Text Link Small --- 14.4px
lorem ipsum dolor
Text Link Thick --- border-bottom 2px
Collection
Nav Active --- Gothic / 19px / border-bottom 2px
05 / Cards

lorem ipsum dolor sit

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

TY Standard

TY Standard

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

lorem ipsum
TY Palace

TY Palace

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

lorem ipsum
S&B Series

S&B Series

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

lorem ipsum
06 / Forms

lorem ipsum(lorem ipsum dolor)

lorem ipsum dolor sit amet. lorem ipsum dolor sit, lorem ipsum.

lorem ipsum --- border-bottom: 1px solid #a6a8ab
lorem ipsum --- border-bottom: 1px solid #231f20
lorem ipsum dolor sit amet consectetur adipiscing
lorem --- border-bottom: 1px solid #c44
lorem ipsum dolor sit amet consectetur
07 / Elevation

Depth & Elevation

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

Level 0: Flat
lorem. lorem ipsum dolor sit
Surface Shift
lorem ipsum dolor sit amet
Overlay
lorem ipsum dolor sit amet
08 / Layout

lorem ipsum

Spacing Scale

8px / XS
16px / S
32px / M
64px / L
80px / XL
120px / XXL

Content Widths

Full Width (Photo)100%
Text Content~800px
Article Body~680px