Design System Preview

DULTON (dulton.jp) - DESIGN.md computed style lorem ipsum dolor
View Products Read DESIGN.md
01 / Colors
Color Palette
lorem ipsum dolor
Brand
DULTON Navy
#001a60
lorem ipsum dolor / lorem ipsum / lorem
DULTON Red
#ce0000
lorem / lorem ipsum
Text
Text Primary
#333333
lorem ipsum dolor
Dark Gray
#444444
lorem / lorem ipsum dolor
Muted Navy
#9da7c2
lorem / lorem ipsum dolor
Surface & Border
White
#ffffff
lorem ipsum
Light Surface
#f5f5f5
lorem ipsum dolor
Light Blue
#eef5f9
lorem ipsum
Border
#cccccc
lorem ipsum
Pagination
#d2d2d2
lorem ipsum dolor sit
Semantic
Danger
#ce0000
lorem / lorem
Success
#2e8b57
lorem / lorem
Warning
#d4a017
lorem / lorem
02 / Typography
Type Scale
lorem ipsum dolor sit - lorem
Section Title — English Heading
Arial Black / 30px / 400 / line-height: 1.4 / letter-spacing: normallorem ipsum dolor
DULTON — Brand Name
Arial Black / 24px / 900 / line-height: 1.6lorem ipsum dolor
Menu
Arial Black / 20px / 400 / line-height: 1.5lorem ipsum
New Arrival  •  Ranking  •  Pick Up
Arial Black / 12px / 900 / line-height: 1.5 / letter-spacing: 1pxlorem ipsum dolor
lorem ipsum dolor / lorem ipsum / lorem ipsum dolor
Noto Sans JP / 14px / 400 / line-height: 1.71lorem ipsum dolor sit
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. 1988 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed.
Noto Sans JP / 12px / 400 / line-height: 1.6 / letter-spacing: normallorem
¥3,850 (lorem)
Noto Sans JP / 14px / 700 / line-height: 2.8lorem
※ lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.
Noto Sans JP / 10px / 400 / line-height: 1.5lorem / lorem ipsum dolor
03 / Products
Product Listing
lorem ipsum dolor
New Arrival lorem ipsum dolor lorem ipsum
DULTON
lorem ipsum lorem ipsum dolor sit 4 lorem ipsum lorem ipsum dolor
¥12,100 (lorem)
DULTON
lorem ipsum dolor sit amet consectetur "lorem ipsum dolor" 2kg lorem
¥5,500 (lorem)
DULTON
lorem ipsum dolor lorem ipsum dolor 170D lorem ipsum
¥8,800 (lorem)
DULTON
lorem ipsum dolor lorem ipsum dolor 12L
¥3,850 (lorem)
04 / Buttons
Buttons
lorem ipsum dolor sit
lorem ipsum dolor
Primary (Navy)
lorem ipsum
Filter (Dark Gray)
lorem ipsum
Ghost (Outline)
lorem ipsum
Text Link
NOTIFICATION BADGE lorem ipsum:
CAROUSEL DOTS lorem ipsum dolor:
05 / Cards
Card Components
lorem ipsum dolor sit
DULTON
Kitchen
lorem ipsum dolor / lorem ipsum dolor
lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.
DULTON
Interior
lorem ipsum / lorem ipsum dolor
lorem ipsum dolor sit amet consectetur adipiscing / lorem ipsum dolor sit amet.
DULTON
Garden
lorem ipsum / lorem ipsum dolor
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.
06 / Forms
Form Elements
lorem ipsum dolor
lorem ipsum — border: #cccccc, radius: 0px
lorem ipsum — border: #001a60 (DULTON Navy)
lorem — border: #ce0000 (DULTON Red)
lorem ipsum dolor — lorem / lorem ipsum dolor
07 / Elevation
Depth & Elevation
lorem ipsum dolor - lorem ipsum dolor
Level 0: Flat
lorem(lorem ipsum)
Level 1
0 2px 4px rgba(0,0,0,0.08)
Level 2
0 4px 12px rgba(0,0,0,0.12)
Level 3
0 8px 24px rgba(0,0,0,0.15)
08 / Layout
Layout & Spacing
lorem ipsum dolor
SPACING SCALE
4px
8px
12px
16px
24px
48px
CONTENT WIDTHS
Container Max 1200px
Product Grid (4-col) 1000px
Mobile (2-col) 100%
BORDER RADIUS
0px (All)
50% (Dots)