Design System Preview
LUPICIA — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, Open Sans + lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Text
Text Primary
#0a0a0a
lorem ipsum dolor(lorem)
Text Secondary
#333333
lorem ipsum dolor
Text Tertiary
#666666
lorem ipsum
Text Meta
#999999
lorem / lorem
Surface & Background
Background
#fefefe
lorem ipsum
Surface Card
#fbfbfa
lorem ipsum
Surface Message
#f6f6f4
lorem ipsum dolor sit
Surface Warm
#f4f4f1
lorem ipsum dolor / lorem
Label
Label Default
#eeeeee
lorem ipsum dolor
Label Event
#f0ddd6
lorem ipsum dolor(lorem ipsum dolor)
Border & Footer
Border
#dbdbdb
lorem ipsum / lorem ipsum
Card Border
#f4f4f1
lorem ipsum dolor
Footer BG
#1f1515
lorem ipsum dolor(lorem ipsum dolor)
Semantic(lorem)
Success
#5b8a5b
lorem(lorem ipsum dolor)
Danger
#c44d4d
lorem(lorem ipsum dolor)
Warning
#b8860b
lorem(lorem ipsum dolor)
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Area Title (H2)
22px / 700 / line-height: 1.4 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor sit — Event Headline (H3)
24px / 400 / line-height: 1.4 / letter-spacing: normallorem ipsum / lorem
2026.05.22
18px / 400 / line-height: 1.6 / color: #999999lorem ipsum
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur. lorem, lorem, lorem, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit. ABCabc 123
16px / 400 / line-height: 1.6 / letter-spacing: normallorem ipsum
lorem ipsum — lorem ipsum dolor, lorem(lorem ipsum dolor sit)lorem ipsum(lorem ipsum dolor sit)lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit sed.
16px / 400 / line-height: 1.8 / letter-spacing: normallorem ipsum
lorem ipsum dolor — Body Sub (15px)
15px / 400 / line-height: 1.6 / color: #333333lorem
lorem ipsum dolor — Caption (14px). lorem: lorem / lorem ipsum dolor
14px / 400 / line-height: 1.8 / color: #666666
lorem ipsum dolor — Small/Label (13px)
13px / 700 / line-height: 1.5 / color: #333333lorem / lorem
lorem ipsum dolor — Mincho Accent. lorem ipsum dolor sit amet consectetur.
Noto Serif JP (lorem) / 18px / 500 / line-height: 1.6International Visitors lorem
lorem ipsum dolor — Footer (11px)
11px / 400 / line-height: 1.25 / color: #fffffflorem ipsum
03 / Article

lorem ipsum dolor

lorem ipsum dolor sit

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

lorem ipsum dolor sit

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

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Outlined CTA (18px)
lorem ipsum
Dark CTA
lorem ipsum
Nav Block
NEWS
Label (Default)
EVENT
Label (Event)
lorem ipsum
Danger (lorem)
05 / Cards

lorem ipsum dolor sit

lorem ipsum / lorem ipsum dolor sit 2026

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

2026.05.22 / lorem
lorem ipsum

lorem ipsum dolor sit

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

2026.05.15 / lorem
lorem ipsum

lorem ipsum dolor sit

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

2026.05.10 / lorem ipsum dolor
lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #dbdbdb, radius: 0px
lorem ipsum — border: #0a0a0a
lorem — border: #c44d4d (danger)
lorem ipsum dolor sit amet consectetur
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem(lorem)
Elevation 1
0 2px 8px rgba(0,0,0,0.06)
Elevation 2
0 4px 16px rgba(0,0,0,0.08)
Elevation 3
0 8px 32px rgba(0,0,0,0.12)
08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale
4px
8px
16px
32px
48px
80px
Content Widths
Main Content 940px
Article 620px
Form 400px
Border Radius
0px
lorem / lorem
5px
lorem
8px
lorem ipsum(lorem)