Design System Preview: JINS(lorem)

COLORSlorem ipsum dolor

CSS lorem ipsum dolor sit amet. lorem ipsum dolor--main-color-red: #da0024, lorem ipsum gray3–gray90 lorem 7 lorem.

Brand

Brand Red (Token)

#da0024

--main-color-red

Brand Red (Computed)

#ca2029

Link Pink

#eb667c

--link-color

Accent Navy

#27455c

Gray Scale (7 tokens)

gray90

#1b1b1b

gray60

#5e5e5e

gray50

#808080

gray25

#bfbfbf

gray10

#e6e6e6

gray5

#f2f2f2

gray3

#f8f8f8

Card Surface

#fafafa

TYPOGRAPHYlorem ipsum dolor

Tazugane Gothic(lorem)+ JINS Next(lorem / lorem)lorem ipsum. letter-spacing lorem JP 0.01em / EN 0.02em lorem CSS lorem.font-feature-settings: "liga" 0 lorem ipsum dolor sit.

Hero / 31px / 700 / Tazugane
line-height: 1.45 / ls: 0.01em

2,600 lorem ipsum dolor“lorem”lorem, lorem ipsum.

H4 EN / 21px / 500 / JINS Next
line-height: 1.3 / ls: 0.02em

Magnify Life

Footer EN / 17px / 500 / JINS Next
line-height: 1.3 / ls: 0.02em

Products / lorem ipsum

Nav JP / 17px / 700 / Tazugane
line-height: 1.55 / ls: 0.01em

lorem ipsum dolor

Body L / 16.5px / 400 / Tazugane
line-height: 1.66 / ls: 0.01em

JINS lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. Airframe / SCREEN / Combination Titanium lorem, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.

Body S / 12.2px / 400 / Tazugane
line-height: 1.66 / ls: 0.01em

JINS Combination Titanium ［lorem ipsum dolor］

Caption / 11px / 400 / Tazugane

※ lorem ipsum dolor, lorem ipsum dolor sit amet consectetur

PRODUCTSlorem ipsum dolor

♡

Airframe

JINS Airframe Slim

¥5,500

♡

Classic

JINS Classic Boston

¥8,800

♡

Combination

JINS Combination Titanium ［lorem ipsum dolor］

¥13,200

♡

SCREEN

JINS SCREEN lorem ipsum dolor sit

¥5,500

lorem ipsum →

BUTTONSlorem

lorem CTA lorem radius 2px, lorem ipsum "lorem ipsum" lorem radius 10px, lorem ipsum dolor radius 50px lorem. lorem ipsum dolor sit.

Apply lorem ipsum dolor sit amet consectetur lorem ipsum Filter ▼ Clear lorem ipsum dolor

FORMSlorem ipsum

ELEVATIONlorem

lorem ipsum dolor. lorem ipsum 7 lorem ipsum dolor sit amet consectetur. lorem ipsumbrightness(0.97) lorem ipsum dolor sit.

Level 0 — Flat

Level 1 — Hover

Level 2 — Modal

Level 3 — Dialog

LAYOUTlorem ipsum

Container lorem--side-spacing: 48px lorem ipsum dolor. Header lorem--header-height: 70px. lorem ipsum dolor PC 4 lorem.