Design System Preview

V-Drums 5 Series

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.

Explore Now DESIGN.md lorem
01 / Colors

Color Palette

Brand
Roland Orange
#ff5a00
CTA / lorem / lorem ipsum
Orange Hover
#e65100
lorem(lorem)
Navigation & Footer
Black
#000000
lorem ipsum / lorem ipsum dolor
Near Black
#141414
lorem ipsum dolor
Text
Dark Gray
#333333
lorem ipsum dolor
Mid Gray
#454545
lorem ipsum dolor
Nav Label
#666666
lorem ipsum
Muted
#808080
lorem / lorem ipsum dolor sit
Footer Muted
#999999
lorem ipsum dolor sit
Footer Light
#cccccc
lorem ipsum dolor / lorem ipsum
Surface & Background
Page Background
#e5e5e5
lorem ipsum(lorem ipsum)
White
#ffffff
lorem ipsum / lorem ipsum dolor
Semantic(lorem)
Danger
#cc0000
lorem / lorem
Success
#228b22
lorem / lorem ipsum
Warning
#cc7700
lorem / lorem ipsum
02 / Typography

Typography

V-Drums TD-50X
Montserrat (proxima-nova alt) / 80px / weight 100 / line-height: 1.0 / letter-spacing: 0Hero Display
FANTOM
Montserrat / 105px / weight 100 / line-height: 1.0 — ultra-thin displayHero Display Alt
Pianos
Noto Sans JP (Kozuka Gothic alt) / 44px / weight 100 / line-height: 1.0 / letter-spacing: 3pxCategory H2
lorem ipsum V-Drums lorem ipsum
Noto Sans JP / 22px / weight 600 / line-height: 1.2Subcategory H2
FEATURED PRODUCTS
14.4px / weight 400 / line-height: 1.0 / letter-spacing: 1px / color: #333Section Label H3
Discover our latest instruments
Montserrat / 16px / weight 300 / line-height: 1.0 / color: #808080Lead P
lorem ipsum dolor — Roland lorem ipsum dolor sit amet consectetur adipiscing. 12px lorem ipsum dolor sit amet, line-height 1.8 lorem letter-spacing 1px lorem ipsum dolor sit amet consectetur adipiscing.
12px / weight 400 / line-height: 1.8 / letter-spacing: 1px / color: #454545Body P
NEW ARRIVAL
13.6px / weight 600 / letter-spacing: 1px / color: #808080Featured Label H5
Products   Support   Community
Montserrat / 13px / weight 400 / letter-spacing: -0.5px / color: #666Nav Link
03 / Article

Article

Digital Piano Design

Roland lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor. SuperNATURAL lorem PHA-50 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.

lorem ipsum dolor

SuperNATURAL Piano Modeling lorem, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum, lorem ipsum dolor sit, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. 88 lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor

PHA-50 lorem, lorem ABS lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet, lorem ipsum dolor / lorem ipsum dolor. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit amet consectetur.

04 / Buttons

Buttons

Explore Now
Primary CTA
Learn More
Secondary
Explore →
Explore Chip
Delete
Danger
Buy Now
Primary on Dark
Details
Ghost on Dark
05 / Cards

Cards

FP-90X
DIGITAL PIANOS

FP-90X lorem ipsum / lorem

SuperNATURAL Piano Modeling lorem PHA-50 lorem ipsum. lorem ipsum dolor sit amet consectetur adipiscing / lorem ipsum dolor.

¥253,000 Explore →
TD-50X
V-DRUMS

TD-50X lorem ipsum dolor

Prismatic Sound Modeling lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.

¥330,000 Explore →
FANTOM-08
SYNTHESIZERS

FANTOM-08 lorem ipsum dolor

ZEN-Core lorem ipsum dolor sit amet consectetur. 88 lorem ipsum dolor sit amet consectetur adipiscing elit sed.

¥374,000 Explore →
06 / Forms

Forms

lorem ipsum — border: #cccccc, radius: 2px
lorem ipsum — border: #ff5a00 (Roland Orange)
lorem — border: #cc0000 (Danger)
07 / Elevation

Elevation

Level 0: Flat
lorem. lorem ipsum dolor sit amet consectetur
Level 1: Hover
0 2px 8px rgba(0,0,0,0.08)
Level 2: Dropdown
0 4px 16px rgba(0,0,0,0.12)
Level 3: Modal
0 8px 32px rgba(0,0,0,0.16)
08 / Layout

Layout

Spacing Scale (8px grid)
4px
8px
16px
24px
48px
80px
Border Radius
0px — Card
2px — Button
Content Widths
Max Container 1200px
Article Content 680px
Form Width 400px