Design System Preview
MIKIMOTO

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.

DESIGN.MD PREVIEW
01 / COLORS

Color Palette

BRAND GOLD
Champagne Gold
#e5d3a9
CTA lorem / lorem ipsum dolor
Deep Gold
#b58f36
CTA lorem ipsum
Light Gold
#f2ebdc
lorem ipsum / lorem ipsum
TEXT
Black
#000000
lorem / lorem / CTA lorem
Muted Gray
#595959
lorem ipsum dolor / lorem ipsum dolor
Light Gray
#a7a7a7
lorem ipsum dolor
SURFACE
White
#ffffff
lorem ipsum
Warm White
#fffefe
Cookie lorem
Chat BG
#e6e6e6
lorem ipsum dolor sit
SEMANTIC
Danger
#8b2020
lorem / lorem(lorem)
Success
#2d6a4f
lorem / lorem(lorem)
02 / TYPOGRAPHY

Typography Hierarchy

Hero Heading / Noto Serif JP
Noto Serif JP / 42px / 400 / line-height: 1.33 / letter-spacing: normalH1
Section Heading / Noto Serif JP
Noto Serif JP / 28px / 400 / line-height: 1.36 / letter-spacing: normalH2
Navigation Link / Noto Sans JP
Noto Sans JP / 16px / 400 / line-height: 1.2 / letter-spacing: normalNav
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. line-height: 2.0 lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.
Noto Sans JP / 14px / 400 / line-height: 2.0 / letter-spacing: normalBody
CTA LABEL / WIDE TRACKING
Noto Sans JP / 12px / 400 / line-height: 1.5 / letter-spacing: 2pxCTA
Footer / Caption
Noto Sans JP / 12px / 400 / line-height: 1.92 / color: #595959Footer
03 / ARTICLE

Article Sample

lorem ipsum dolor sit amet

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

lorem ipsum dolor sit

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

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

04 / BUTTONS

Button Variations

COLLECTION
Primary CTA
DETAIL
Secondary
Read More
Text Link
DELETE
Danger
05 / CARDS

Card Components

Pearl Necklace

Jeux de Rubans Collection

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

¥1,100,000
Pearl Ring

Mikimoto Pearl Ring

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

¥550,000
Pearl Earrings

Akoya Pearl Earrings

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

¥330,000
06 / FORMS

Form Elements

Default --- border: 1px solid #595959, radius: 4px
Focus --- border: 1px solid #000000
Error --- border: 1px solid #8b2020
Select --- border: 1px solid #000000, color: #595959, radius: 4px
07 / ELEVATION

Depth & Elevation

Level 0: Flat
shadow: none (default)
Elevation 1
0 2px 8px rgba(0,0,0,0.04)
Elevation 2
0 4px 16px rgba(0,0,0,0.06)
Elevation 3
0 8px 32px rgba(0,0,0,0.08)
08 / LAYOUT

Layout & Spacing

SPACING SCALE
4px
8px
16px
24px
48px
80px
120px
CONTENT WIDTHS
Max Container 1200px
Article Content 620px
Form Content 400px
BORDER RADIUS
0px (Card)
4px (CTA / Input)
8px (Dialog)