Design System Preview
RAKSUL (lorem ipsum) — lorem ipsum

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

lorem ipsum dolor lorem / lorem ipsum dolor sit DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand & Action
Primary Blue
#0264bf
lorem ipsum / lorem ipsum dolor
CTA Orange
#e7560d
lorem ipsum / lorem ipsum dolor
Badge Pink
#e4007e
lorem ipsum dolor
Badge Orange
#ee4a0e
NEW lorem
Link Blue
#3fa2f3
lorem ipsum dolor
Text
Text Primary
#222222
lorem ipsum dolor
Text Secondary
#636363
lorem ipsum dolor / lorem
Surface & UI
Background
#ffffff
lorem ipsum
Surface Light
#fafafa
lorem ipsum dolor
Surface Lighter
#f2faff
lorem ipsum dolor
Icon BG
#efefef
lorem ipsum dolor sit
Footer BG
#ecedef
lorem ipsum dolor
Search Gray
#a6afba
lorem ipsum
Divider
#dddddd
lorem / lorem
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor — Section Heading (H2)
20px / 600 / line-height: 1.33 / letter-spacing: normallorem ipsum
lorem ipsum dolor — Footer Heading
16px / 700 / line-height: 1.33 / letter-spacing: 0.05emlorem ipsum
lorem ipsum dolor sit — Nav Body
14px / 600 / line-height: 1.33 / letter-spacing: 0.05em / color: #636363lorem ipsum dolor
lorem ipsum dolor — Category Body (13px)
13px / 600 / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor / lorem ipsum dolor sit amet, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur / lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing.
14px / 400 / line-height: 1.5 / letter-spacing: normallorem
lorem ipsum dolor — Helper (13px)
13px / 400 / line-height: 1.5 / color: #636363lorem
lorem ipsum dolor — Category Label (12px)
12px / 600 / line-height: 1.33 / letter-spacing: 0.02emlorem ipsum
ABCabc 123,456 — Roboto prioritized for European text and numerals
Roboto / lorem / lorem Roboto lorem ipsum
03 / Product — lorem ipsum dolor

lorem ipsum dolor sit amet

lorem / lorem ipsum dolor

lorem ipsum dolor sit amet, lorem 1.1 lorem/lorem. A4, B5 lorem ipsum dolor sit amet, lorem / lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum NEW

lorem / lorem

lorem ipsum
A4 (210 x 297mm) / B5 (182 x 257mm) / A5 (148 x 210mm)
lorem ipsum
lorem / lorem ipsum dolor / lorem / lorem ipsum dolor
lorem
lorem ipsum dolor(lorem ipsum AM10:00)
lorem ipsum
100 lorem–

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

lorem ipsum dolor

PDF, AI, PSD lorem ipsum dolor sit amet. lorem(lorem ipsum dolor)lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary (Login)
bg #0264bf / radius 4px
lorem ipsum
CTA (Signup)
bg #e7560d / radius 4px
lorem ipsum
Search Filter
bg #a6afba / radius 3px
lorem ipsum
Service Menu
text #0264bf / border
🖨️ lorem
Icon Button
bg #efefef
lorem ipsum
Outline
border #dddddd
Badges
lorem ipsum
Recommend Badge
bg #e4007e / 12px
NEW
New Badge
bg #ee4a0e / 10px
05 / Cards

lorem ipsum dolor sit

lorem / lorem ipsum
lorem ipsum

lorem / lorem ipsum dolor

lorem ipsum / A4 lorem 100 lorem. lorem ipsum dolor sit amet consectetur.

¥1,078– (lorem)
lorem ipsum →
lorem ipsum
NEW

lorem ipsum / lorem ipsum

100 lorem 499 lorem. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur.

¥499– (lorem)
lorem ipsum →
lorem ipsum dolor

lorem ipsum dolor

A1 / A2 / B2 lorem ipsum. lorem / lorem ipsum. lorem ipsum dolor sit amet consectetur.

¥1,628– (lorem)
lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #dddddd, radius: 4px
lorem ipsum — border: #0264bf (Primary Blue)
lorem ipsum dolor sit amet consectetur
lorem — border: #c0392b
lorem ipsum: 100 lorem
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, border: #dddddd lorem
Elevation 1
lorem / lorem ipsum
Elevation 2
lorem ipsum dolor / lorem ipsum dolor
Elevation 3
lorem ipsum / lorem ipsum
Focus Ring
#0264bf (Primary Blue)
08 / Layout

lorem ipsum dolor & lorem ipsum

Container Max 1156px
Content Area ~960px
Product Card Grid ~880px
Side Nav ~220px
Design Characteristics