lorem, lorem ipsum. lorem

Design System Preview
nitori-net.jp

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum EC lorem ipsum dolor.

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand — lorem ipsum dolor
Nitori Teal
#009e96
--text-Promotional-nitori / lorem CTA
Deco Home Orange
#eb5505
--text-Promotional-deco / lorem ipsum dolor
N+ Warm Gray
#94897d
--text-Promotional-nplus / lorem ipsum dolor
Text
Text Primary
#333333
--text-Primary / lorem
Text Secondary
#6d6d6d
--text-Secondary / lorem
Text Link
#53a4ef
--text-Link
Text Disabled
#dbdbdb
--text-Disabled
Text Destructive
#ff3a2e
--text-Destructive / lorem / lorem ipsum
Background
Base Layer
#ffffff
--background-BaseLayer
Secondary Layer
#ededed
--background-SecondaryLayer
Tertiary Layer
#e1e1e1
--background-TertiaryLayer
Disabled
#f2f2f2
--background-Disabled
Surface Dark
#333333
--background-Black / lorem ipsum
Border
Border Primary
#333333
lorem ipsum dolor
Border Secondary
#dbdbdb
lorem ipsum dolor / lorem
Border Divider
#e7e7e7
lorem ipsum / lorem
Border Focus
#53a4ef
lorem ipsum dolor
Border Destructive
#ff3a2e
lorem ipsum
02 / Typography

lorem ipsum dolor sit

lorem / lorem ipsum dolor sit amet consectetur — h1
30px / 500 / line-height: 1.22 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor sit — h2
24px / 700 / line-height: 1.33 / letter-spacing: normallorem ipsum dolor
lorem / lorem ipsum dolor — h3 (large)
18px / 700 / line-height: 1.33 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor sit amet — h3 (default)
16px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing.
14px / 500 / line-height: 1.43 / letter-spacing: normallorem ipsum dolor
lorem 1 lorem ipsum 550 lorem(lorem). 11,000 lorem ipsum dolor.
13px / 400 / line-height: 1.6 / color: Text Secondarylorem / lorem
※lorem ipsum dolor. lorem / lorem ipsum dolor sit amet consectetur.
11px / 400 / line-height: 1.45 / color: Text Secondarylorem / lorem ipsum dolor
03 / Product — lorem ipsum

lorem ipsum dolor

🛋️
lorem
2 lorem ipsum(N lorem ipsum A15 DR-GY)
49,900lorem(lorem)
🪑
N+
lorem ipsum dolor(lorem ipsum BK)
29,900lorem(lorem)
🛏️
SALE
lorem ipsum dolor sit(N lorem ipsum lorem)
19,900lorem(lorem)
🏠
lorem ipsum
lorem ipsum dolor lorem ipsum(lorem)
1,490lorem(lorem)
04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
#009e96 / radius: 4px
lorem ipsum dolor
Secondary
border: #dbdbdb / radius: 4px
lorem ipsum
Disabled
#dbdbdb / radius: 5px
lorem ipsum
Destructive
border: #ff3a2e
lorem ipsum >
Link
#53a4ef
lorem ipsum CTA lorem
lorem
#009e96
lorem ipsum
#eb5505
N+
#94897d
05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor sit amet

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

lorem ipsum dolor >

lorem ipsum dolor

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

lorem ipsum dolor >

lorem ipsum dolor sit

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

lorem ipsum >
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #dbdbdb, radius: 4px
lorem ipsum — border: #53a4ef (--border-Focus)
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #ff3a2e (--border-Destructive)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, border: #e7e7e7
Elevation 1
lorem ipsum / lorem
Elevation 2
lorem / lorem ipsum dolor
Elevation 3
lorem ipsum dolor / lorem ipsum dolor
Elevation 4
lorem ipsum / lorem ipsum
Focus Ring
#53a4ef + box-shadow
08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale
4px
8px
12px
16px
20px
24px
32px
48px
64px
Border Radius
2px (small)
4px (default)
8px (large)
Content Widths
EC Main Content 1200px
Product Grid (3-column) 940px
Product Detail 800px
Side Navigation 240px
Grid — lorem ipsum
4-column grid / gap: 12–16px / PC lorem