Curiosity is Life

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

01 / Category Tiles — KOKUYO lorem

lorem ipsum dolor(OKLCH lorem ipsum dolor)

Stationery

lorem ipsum dolor, lorem ipsum.
Furniture

lorem ipsum dolor, lorem ipsum dolor.
Space

lorem ipsum, lorem ipsum dolor.
Mail Order

lorem ipsum dolor, lorem ipsum.
About

lorem / lorem / lorem ipsum
Magazine

lorem ipsum dolor
02 / Colors — OKLCH lorem ipsum dolor

lorem ipsum dolor

Brand Category
--brand_blue
#5dadd1
lorem / oklch(0.79 0.14 221)
--brand_green
#3eb088
lorem / oklch(0.73 0.17 159)
--brand_pink
#e08bbf
lorem / oklch(0.84 0.12 337)
--brand_red
#e76654
lorem / oklch(0.72 0.16 20)
Surface Pastel
--sand
#ecf5d5
lorem ipsum dolor
--cloud
#dde5e7
lorem ipsum dolor
--lemon
#f0e89a
lorem ipsum
--cream
#f0e9d4
lorem ipsum
--mint
#9fd9c1
lorem ipsum
--violet
#c5a5e0
lorem ipsum
--apricot
#f5b896
lorem ipsum
--sea
#7ec5d4
lorem ipsum
Text & Surface
--black100
#313131
lorem / oklch(0.27 0 0)
--gray_text
#7a7a7a
lorem ipsum dolor
--gray_line
#d4d4d4
lorem ipsum
--gray_bg
#eeeeee
lorem ipsum
--white100
#ffffff
lorem ipsum
03 / Typography — lorem

lorem ipsum dolor sit

Curiosity is Life
Hero — 56px / 700 / lh 1.3 / ls +1px / paltlorem
lorem ipsum dolor — Heading 2
Section h2 — 28px / 700 / lh 1.4 / ls +0.5px / paltlorem ipsum
lorem ipsum dolor — Heading(lorem 19px / weight 500)
Heading — 19px / 500 / lh 1.47 (28/19) / paltlorem ipsum
lorem ipsum dolor — KOKUYO lorem ipsum 17px / weight 400 / line-height 1.41(24/17). HelveticaNowText + lorem ipsum dolor StdN(Morisawa)lorem ipsum, lorem ipsum dolor sit amet consectetur. font-feature-settings: "palt" lorem ipsum dolor sit amet consectetur.
Body — 17px / 400 / lh 1.41 (24/17) / paltlorem
lorem ipsum dolor — Body Muted(lorem / lorem / lorem ipsum)
Body Muted — 17px / 400 / lh 1.41 / color #7a7a7a / palt
lorem ipsum dolor sit amet — Card Label (white on color) / weight 500
Card Label — 17px / 500 / color #ffffff / lorem ipsum dolor / palt
lorem ipsum dolor ON / OFF
Toggle Caption — 11px / 500 / lh 1.82
04 / Article — lorem ipsum

lorem ipsum dolor sit amet

lorem ipsum dolor 120 lorem, 25 lorem ipsum dolor sit amet consectetur

lorem ipsum dolor

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

lorem HelveticaNowText + lorem ipsum dolor StdN(Morisawa)lorem ipsum, line-height 1.41–1.7 lorem ipsum. letter-spacing lorem normal lorem, palt lorem ipsum dolor sit.

05 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary (--brand_blue)
lorem ipsum
Furniture (--brand_green)
lorem
Mail (--brand_red)
lorem ipsum
Outline
Toggle Pill
06 / Cards

lorem ipsum dolor sit

lorem ipsum dolor(2 lorem ipsum)lorem ipsum dolor sit

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

lorem ipsum

lorem ipsum dolor sit amet“lorem ipsum dolor sit amet”

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

lorem ipsum

CI/VI lorem ipsum dolor sit amet

“Curiosity is Life — lorem ipsum dolor”lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum
07 / Forms

lorem ipsum dolor

lorem ipsum — border #d4d4d4 / radius 0px
lorem ipsum — 2px border #5dadd1 (--brand_blue)
lorem — 2px border #e76654 (--brand_red)
08 / Spacing — CSS Custom Properties lorem

8px lorem ipsum dolor

--space8
--space16
--space24
--space32
--space48
--space64
--space80
--space96
--space112
--space144