Design System Preview
Spiral

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

01 / Colors

lorem ipsum dolor

Core
Text Primary
#111111
lorem / lorem / lorem ipsum
Text Black
#000000
body lorem ipsum dolor
Background
#ffffff
lorem ipsum
Muted & Tags
Text Muted
#999999
lorem ipsum dolor / lorem ipsum dolor
Tag Text
#eeeeee
lorem ipsum dolor sit
Overlay
rgba(0,0,0,0.5)
lorem ipsum / lorem ipsum dolor
02 / Typography -- computed style lorem

lorem ipsum dolor sit

Section Heading
48px / 700 / line-height: 1.0 / letter-spacing: 0.02emh2 lorem ipsum dolor
Page Title
38px / 400 / line-height: 1.3 / letter-spacing: 0.02emh2 lorem ipsum
Dropdown Menu Title
35px / 700 / line-height: 1.5 / letter-spacing: 0.01emlorem ipsum dolor
Spiral Market / CAFE AALTO
19px / 300 / line-height: 1.0 / letter-spacing: 0.02emlorem ipsum
Nav Primary Link
16px / 700 / line-height: 1.2 / letter-spacing: 0.01emlorem ipsum dolor
lorem ipsum dolor -- Spiral lorem ipsum dolor sit amet consectetur. 1985 lorem ipsum dolor, lorem, lorem ipsum, lorem, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit.
14px / 400 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor -- lorem ipsum dolor sit amet consectetur. lorem, lorem, lorem ipsum dolor sit amet consectetur.
13px / 400 / line-height: 1.69 / letter-spacing: 0.02em / color: #999999lorem
Tagline -- SPIRAL IS A MULTI-PURPOSE CULTURAL COMPLEX
12px / 400 / line-height: 1.5 / letter-spacing: 0.04emlorem ipsum dolor
SPIRAL GARDEN
10px / 700 / line-height: 1.5 / letter-spacing: 0.05em / tag stylelorem ipsum dolor
Weight Variety
300 Light
Spiral Market -- lorem ipsum dolor
400 Regular
Spiral Market -- lorem ipsum dolor
500 Medium
Spiral Market -- lorem ipsum dolor
700 Bold
Spiral Market -- lorem ipsum dolor
03 / Article -- lorem ipsum

lorem ipsum dolor sit amet

lorem ipsum dolor sit

SPIRAL GARDEN 2026.05.08 -- 2026.06.30

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

lorem ipsum dolor sit

Spiral Garden lorem, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. ABCabc 123 lorem ipsum dolor sit amet consectetur adipiscing, Roboto lorem Noto Sans JP lorem ipsum dolor sit amet consectetur.

CAFE AALTO lorem, lorem ipsum / lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor sit amet consectetur Spiral lorem ipsum.

04 / Tags & Badges

lorem ipsum dolor sit

SPIRAL GARDEN
lorem ipsum
SPIRAL HALL
lorem
CAFE AALTO
lorem
SPIRAL MARKET
lorem ipsum
SPIRAL ONLINE STORE
lorem ipsum
Tag Specs
bg: #111111 / text: #eeeeee / 10px / weight: 700 / letter-spacing: 0.05em / padding: 2px 10.5px / border-radius: 0px
05 / Cards

lorem ipsum dolor sit

Exhibition Image
SPIRAL GARDEN

lorem ipsum dolor sit

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

2026.05.01 -- 2026.05.31
Product Image
SPIRAL MARKET

lorem ipsum dolor sit 2026

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

2026.06.01 -- 2026.06.15
Event Image
SPIRAL HALL

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur adipiscing. Spiral Hall lorem ipsum dolor sit amet consectetur.

2026.07.10 -- 2026.07.20
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: none, border-bottom: 1px solid #e0e0e0
lorem ipsum -- border-bottom-color: #111111
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum dolor sit amet. lorem ipsum dolor
Border Only
1px solid #e0e0e0 lorem. lorem ipsum dolor
Overlay
rgba(0,0,0,0.5) lorem ipsum dolor
08 / Layout

lorem ipsum

Full Width100%
Content Area~960px
Article Text~640px
Grid: Event Cards
1/3
1/3
1/3
3-column grid / gap: 16-32px / lorem ipsum / lorem ipsum