Design System Preview
MOONSTAR

1873 lorem, lorem ipsum dolor sit amet consectetur. 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.

BRANDS ONLINE STORE
01 / Colors

Color Palette

Brand
MOONSTAR Blue
#003b90
lorem ipsum
CTA Black
#262626
lorem / lorem ipsum dolor
Text
Text Primary
#000000
lorem ipsum dolor
Text Secondary
#262626
lorem / lorem
Text Muted
#565656
lorem ipsum dolor
Text Tertiary
#a2a2a2
lorem ipsum dolor / lorem
Surface & Background
Surface White
#ffffff
lorem ipsum dolor
Background Main
#f2f4f5
lorem ipsum dolor sit
Surface Card
#eeeeee
lorem / lorem ipsum dolor
Background Footer
#f0f0f0
lorem ipsum dolor
Search BG
#f2f2f2
lorem ipsum dolor
Pagination Dot
#d5d5d5
lorem ipsum dolor
02 / Typography

Typography Hierarchy

FINE VULCANIZED — lorem ipsum
40px / 700 / line-height: 1.0 / letter-spacing: normalDisplay h1
FINE VULCANIZED
34.56px / 400 / line-height: 1.67 / color: #565656Brand Nav Name
BRANDS
18px / 600 / line-height: 1.0 / letter-spacing: normalSection Header h2
MADE IN KURUME
16px / 600 / line-height: 1.0 / letter-spacing: 0.02emNav Header h3
FINE VULCANIZED / RALY / 810s / OUTLET
14px / 400 / line-height: 1.5 / letter-spacing: 0.05emNav Item h3/h4
lorem ipsum dolor 1873 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. ABCabc 123
14px / 400 / line-height: 2.0 / letter-spacing: normalBody p
NEW ARRIVAL
14px / 600 / line-height: 1.0Category Header
lorem ipsum / lorem ipsum dolor sit / lorem ipsum dolor
12px / 400 / line-height: 1.67 / color: #a2a2a2Brand Label / Subtitle
*lorem ipsum dolor sit amet consectetur adipiscing
11px / 400 / line-height: 1.82Small / lorem
Copyright 2024 MOONSTAR CO., LTD. All Rights Reserved.
9px / 400 / line-height: 1.5 / letter-spacing: 0.02emCopyright
03 / Article

Article / Product

FINE VULCANIZED

Made in Kurume since 1873

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

MADE IN KURUME

lorem ipsum dolor. lorem ipsum 150 lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123

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

04 / Buttons

Button Variations

ONLINE STORE
Outline CTA
BUY NOW
Filled CTA
Search...
Search Pill (r: 20px)
Carousel Arrow
Pagination
05 / Cards

Product Cards

👟

GYM CLASSIC

lorem ipsum dolor sit amet consectetur adipiscing.

FINE VULCANIZED
👟

ALWEATHER

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit.

FINE VULCANIZED
👟

STUDEN

810s lorem ipsum. lorem ipsum dolor sit amet consectetur.

810s
06 / Forms

Form Elements

lorem ipsum — bg: #f2f2f2, border-radius: 20px (pill)
lorem ipsum — border: #d0d0d0, radius: 0px
lorem ipsum — border: #262626
lorem — border: #c0392b
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor. lorem ipsum dolor sit amet
BG Depth: Surface Card
#eeeeee — lorem ipsum dolor sit amet consectetur
Translucent
rgba(255,255,255,0.6) — lorem ipsum dolor
Gray Scale Depth
#fff → #f2f4f5 → #eee → #f0f0f0
08 / Layout

Spacing & Layout

Spacing Scale
8px
16px
24px
32px
48px
64px
Content Widths
Container ~1200px
Main Content 940px
Article Text 620px