Design System Preview
lorem ipsum MIXI — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. MIXI Red #e5004d lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. computed style lorem ipsum dolor.

lorem ipsum lorem ipsum
01 / Colors

lorem ipsum dolor

Brand
MIXI Red
#e5004d
lorem / lorem ipsum
Gray Badge
#7b7b7b
PDF lorem
Text
Text Primary
#000
lorem ipsum dolor
Text Content
#333
lorem ipsum dolor
Text Light
#666
lorem ipsum dolor
Text Lighter
#888
lorem / lorem ipsum
Text Lightest
#919191
lorem ipsum dolor
Surface & Background
Background
#ffffff
lorem ipsum
Surface Gray
#f7f7f7
lorem ipsum dolor
Footer
#000000
lorem ipsum dolor
Border
#ccc
lorem ipsum dolor
Border Light
#eee
lorem ipsum / lorem ipsum
02 / Typography — lorem

lorem ipsum dolor sit

“lorem”lorem ipsum dolor, lorem“lorem”lorem ipsum dolor
Noto Sans JP / 35px / 600 / line-height: 1.57 / letter-spacing: 0.02emlorem ipsum dolor sit amet
MIXI lorem“lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet”lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.
Noto Sans JP / 15px / 400 / line-height: 1.86 / letter-spacing: 0.02emlorem ipsum
2024.12.25 — lorem ipsum dolor sit amet consectetur
Noto Sans JP / 13px / 400 / line-height: 1.7 / letter-spacing: 0.02emlorem ipsum dolor
lorem ipsum　　lorem ipsum　　lorem ipsum　　IR
Noto Sans JP / 13px / 600 / line-height: 1.15lorem ipsum dolor
lorem ipsum dolor sit　　lorem ipsum　　lorem ipsum dolor
Noto Sans JP / 12px / 400 / line-height: 1.15 / letter-spacing: 0.05emlorem ipsum
03 / Service — lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

MIXI lorem ipsum

MIXI lorem“lorem ipsum dolor sit”lorem ipsum dolor sit amet consectetur adipiscing elit sed, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary (Black)
lorem ipsum
Accent (MIXI Red)
lorem ipsum dolor
Outline
JP EN
Language Switcher
Disabled
05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur

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

lorem ipsum →

lorem ipsum

FC lorem ipsum dolor TIPSTAR lorem, lorem ipsum×lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum →

lorem ipsum dolor

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #ccc, radius: 3px
lorem ipsum — border: #85b7d9 (Blue Glow)
lorem — border: #cc0000
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem / lorem ipsum dolor(lorem / lorem ipsum)
Level 1: Header
0 1px 4px rgba(0,0,0,0.08)
Surface Gray
#f7f7f7 + border #ccc
08 / Layout

lorem ipsum dolor

Main Content 960px
Article 620px