Design System Preview
ASKUL (lorem ipsum) — lorem ipsum

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 sit DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
ASKUL Blue
#1b72e9
lorem / lorem ipsum
ASKUL Navy
#172397
lorem ipsum dolor
ASKUL Orange
#ff8d00
lorem CTA
ASKUL Cyan
#33abee
lorem ipsum dolor
Text
Text Primary
#333333
lorem ipsum dolor
Link Heading
#111184
lorem ipsum dolor
Link
#1b72e9
lorem ipsum dolor
Semantic
Danger
#d90916
lorem / lorem ipsum
Price Red
#d80000
lorem ipsum
Info Light
#ebf3fc
lorem ipsum dolor
Danger Light
#fadfe1
lorem ipsum dolor
Surface & Border
Background
#ffffff
lorem ipsum
Surface
#f2f2f2
lorem / lorem ipsum dolor
Footer
#efefef
lorem ipsum / lorem ipsum
Light
#f5f5f5
lorem ipsum dolor
Border
#cecece
lorem ipsum dolor
Sustainability lorem ipsum
lorem / lorem
#d4dbec
lorem ipsum dolor
#f7e0c8
lorem ipsum dolor
#c4dad4
lorem ipsum dolor
#eaccce
lorem ipsum dolor
#bce0e4
lorem ipsum
#dfe8c7
02 / Typography -- lorem

lorem ipsum dolor sit

lorem ipsum dolor — Page Title (h1)
20px / 400 / line-height: 1.0 / color: #172397 (Navy)lorem ipsum dolor
lorem ipsum dolor — Section Title (h2)
20px / 400 / line-height: 1.6 / letter-spacing: 0.02emlorem ipsum dolor
lorem ipsum 15,766,762 lorem — Sidebar Title (h2)
16px / 400 / line-height: 1.625 / letter-spacing: 0.02emlorem ipsum
Web lorem ipsum dolor sit amet consectetur adipiscing — Sub Heading (h2)
13px / 700 / line-height: 1.54 / color: #111184lorem ipsum dolor
lorem ipsum — Label (p)
14px / 700 / line-height: 1.1lorem
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur, lorem ipsum 1,500 lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.
13px / 400 / line-height: 1.6 / letter-spacing: normallorem
lorem ipsum dolor — Small (12px)
12px / 400 / line-height: 1.33lorem / lorem
lorem / lorem — Nav (10px)
10px / 700 / line-height: 1.3lorem ipsum dolor
¥1,234(lorem)
20px / 700 / color: #d80000 — lorem ipsum dolorlorem ipsum
03 / Product -- lorem ipsum dolor

lorem ipsum dolor sit amet

lorem ipsum dolor

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

lorem ipsum: 2024 lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.
lorem ipsum dolor: lorem ipsum dolor sit amet consectetur, 6 lorem 15 lorem 0:00–6:00 lorem ipsum dolor sit amet consectetur.

lorem ipsum／lorem

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

loremloremlorem(lorem)lorem ipsum
lorem ipsum A4 500 loremASK-A4500¥398lorem
lorem ipsum lorem 10 loremASK-BP10B¥528lorem
lorem ipsum dolor A4 100 loremASK-CF100¥1,280lorem
04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
#ff8d00 / 5px radius
lorem ipsum
Secondary
#f2f2f2 / 4px radius
lorem ipsum dolor sit
Outlined
white / 2px radius
FAX lorem ipsum dolor
FAX User
#6e635f border
lorem ipsum
Cyan Link
#33abee / 4px radius
lorem ipsum >
Text Link
#1b72e9
lorem ipsum
Danger
#d90916 / 5px radius
05 / Cards -- lorem ipsum

lorem ipsum dolor sit

lorem ipsum
lorem

lorem ipsum dolor A4 5 lorem ipsum lorem B5 lorem ipsum

¥548(lorem)
1 lorem ipsum ¥109.6
lorem ipsum
lorem ipsum
lorem ipsum dolor sit

lorem ipsum lorem ipsum 0.7mm lorem 10 lorem

¥528(lorem)
1 lorem ipsum ¥52.8
lorem ipsum
lorem ipsum
lorem

lorem ipsum dolor A4 lorem 100 lorem lorem

¥1,280(lorem)
1 lorem ipsum ¥12.8
lorem ipsum
lorem ipsum
lorem ipsum

lorem ipsum dolor sit 4 lorem ipsum lorem

¥4,380(lorem)
lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: #cecece, radius: 0
lorem ipsum -- border: #1b72e9 (Blue)
lorem -- border: #d90916 (Danger)
lorem ipsum -- border: #767676, radius: 0
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum #cecece lorem. lorem ipsum dolor sit amet
Level 1: Hover
0 1px 3px rgba(0,0,0,0.1) -- lorem ipsum dolor
Focus Ring
#1b72e9 (Blue) -- lorem ipsum dolor
Info Border
#183d9f -- lorem ipsum dolor
08 / Layout

lorem ipsum & lorem ipsum dolor

lorem ipsum dolor
3px
6px
10px
16px
25px
30px
42px
lorem ipsum dolor
Full Width 1440px
Main + Sidebar ~1200px
Main Column ~1000px
Sidebar ~200px