Design System Preview
TANITA — tanita.co.jp

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

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Primary
#004198
CTA / lorem ipsum dolor
Primary Light
rgba(0,65,152,0.1)
lorem ipsum
Text
Text Primary
#333333
lorem ipsum dolor
Text Disabled
#999999
lorem / lorem ipsum dolor
Text on Dark
#ffffff
lorem ipsum dolor sit
Surface & Background
Background
#ffffff
lorem ipsum
Surface Gray
#f0f3f5
lorem ipsum dolor
Surface Warm
#f7f3e5
lorem ipsum dolor sit
Surface Dark
#333333
lorem ipsum dolor
Border
Border Default
#dddddd
lorem / lorem ipsum
Border Light
#cccccc
lorem ipsum dolor
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor — Heading 3 (h3)
22px / 700 / line-height: 1.5 / letter-spacing: 0.06em / palt: loremc-ttl-3
lorem ipsum dolor — Heading 4 (h4)
18px / 700 / line-height: 1.5 / letter-spacing: 0.06em / palt: loremc-cassette-1__cat-ttl
lorem ipsum dolor sit — Heading 2 (h2)
16px / 400 / line-height: 1.5 / letter-spacing: 0.06em / palt: loremc-ttl-1(lorem ipsum dolor)
lorem ipsum dolor — Nav Title
20px / 700 / line-height: 1.2 / letter-spacing: normall-global-nav__ttl
lorem ipsum dolor(lorem) — Tile Title
22px / 700 / line-height: 1.44 / letter-spacing: 0.06em / lorem / loremc-tile-1__ttl (large)
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor“lorem ipsum”lorem, lorem ipsum dolor sit amet consectetur. line-height: 2.0 lorem ipsum dolor sit amet consectetur.
16px / 400 / line-height: 2.0 / letter-spacing: 0.06em / palt: loremc-txt-1
lorem ipsum dolor — Body Small (15px). lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum. lorem ipsum dolor sit amet consectetur adipiscing.
15px / 400 / line-height: 2.0 / letter-spacing: 0.06emc-tile-3__txt
lorem ipsum dolor — Caption (14px)
14px / 400 / line-height: 1.5 / letter-spacing: normall-global-nav__txt
lorem ipsum dolor — Bold Body (16px)
16px / 700 / line-height: 1.5 / letter-spacing: 0.06emc-box-1__head-txt
03 / Article — lorem ipsum dolor

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor sit

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

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA (pill)
lorem ipsum dolor
Outlined (pill)
lorem ipsum dolor
Dark (error page)
lorem ipsum dolor sit amet
Shop Link (header)
05 / Cards

lorem ipsum dolor sit

Box Card

lorem ipsum dolor sit amet

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

lorem ipsum dolor

lorem ipsum

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

lorem ipsum

lorem ipsum

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

lorem ipsum
Tile Card
PICK UP

lorem ipsum dolor sit amet consectetur 15 lorem

lorem

lorem ipsum dolor sit amet consectetur adipiscing elit

lorem

lorem ipsum dolor sit amet consectetur

06 / Forms

lorem ipsum dolor

lorem ipsum — border: #cccccc, radius: 80px(pill lorem ipsum dolor)
lorem ipsum — border: #004198 (primary)
lorem — border: #cc0000, radius: 5px(lorem ipsum dolor sit)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor. lorem ipsum
Elevation 1
0 2px 4px rgba(0,0,0,0.1) — lorem ipsum dolor
Elevation 2
0 4px 12px rgba(0,0,0,0.12) — lorem ipsum / lorem ipsum dolor
Focus Ring
#004198 (primary) — lorem ipsum dolor
08 / Layout

lorem ipsum dolor & lorem ipsum dolor

Spacing Scale
8px
10px
16px
20px
24px
30px
37px
50px
Content Widths
Max Container 1200px
Content Area 940px
Article Body 640px