Design System Preview
Hasami Porcelain

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing. Univers Bold Condensed lorem B101 lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

01 / Colors

Monochrome Palette

Black
#000000
lorem ipsum / lorem ipsum dolor / lorem ipsum dolor
White
#ffffff
lorem / lorem ipsum dolor

lorem ipsum dolor / lorem ipsum dolor sit / lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur.

02 / Typography

Type Hierarchy

Hasami Porcelain — Hero Title
Roboto Condensed 700 (Univers BoldCn) / 26px / weight 400* / line-height: 1.8 / letter-spacing: 0.07emHero
Section Heading — Large Text
22px / weight 400* / line-height: 1.8 / letter-spacing: 0.05emSection
Navigation Primary — 14px
14px / weight 400* / line-height: 1.8 / letter-spacing: 0.07emNav
lorem ipsum dolor sit amet consectetur 400 lorem ipsum dolor sit. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet, lorem ipsum / lorem / lorem / lorem ipsum dolor sit amet consectetur adipiscing.
Noto Sans JP (lorem B101) / 13px / 400 / line-height: 2.0 / letter-spacing: 0.03emBody JP
Subnav Items — 12px
12px / weight 400* / line-height: 1.42 / letter-spacing: 0.07emSub Nav
lorem ipsum dolor — Base/Default 12px. lorem ipsum dolor sit amet consectetur.
12px / 400 / line-height: 1.8 / letter-spacing: 0.03emBase
Subnav / Small — 10.2px
10.2px / weight 400* / line-height: 1.8 / letter-spacing: 0.035emSmall
© 2024 Hasami Porcelain. All Rights Reserved.
10px / weight 400* / line-height: 1.8 / letter-spacing: 0.1emCopyright

* weight 400 lorem ipsum dolor sit, UniversLTStd-BoldCn lorem ipsum dolor sit amet consectetur Bold Condensed lorem ipsum. lorem ipsum dolor sit amet. preview lorem Roboto Condensed 700 lorem.

03 / Article

Porcelain Catalogue

Modular Tableware

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

Material & Process

lorem ipsum dolor sit amet, lorem 1300 lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur. HASAMI PORCELAIN lorem ipsum dolor sit amet, lorem ipsum / lorem / lorem / lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet.

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

05 / Cards

Product Cards

Photo

Plate

lorem 85mm / 145mm / 220mm lorem 3 lorem ipsum. lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet.

Detail
Photo

Bowl

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit.

Detail
Photo

Mug

lorem ipsum dolor sit amet consectetur. lorem ipsum 375ml. lorem ipsum dolor sit amet consectetur.

Detail
06 / Layout

Spacing & Rhythm

8px
XS
16px
S
32px
M
64px
L
96px
XL
128px
XXL

Key Metrics

Line Height (Body) 2.0
Line Height (Default) 1.8
Line Height (Sub Nav) 1.42
Letter Spacing (Copyright) 0.1em
Letter Spacing (Heading / Nav) 0.07em
Letter Spacing (Large Text) 0.05em
Letter Spacing (Body) 0.03em

lorem ipsum dolor: lorem. lorem ipsum / lorem ipsum dolor / lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur.