lorem ipsum dolor sit

Design System Preview — lorem ipsum dolor

lorem ipsum dolor sit amet consectetur.lorem ipsum dolorfont-feature-settings: "palt" lorem ipsum dolorlorem ipsum dolor sit amet consectetur, lorem ipsum dolor / lorem / lorem ipsum dolor sit amet consectetur(lorem ipsum dolornormal). lorem ipsum dolor computed style lorem ipsum(2026-08-24 lorem).

lorem ipsum dolor sit lorem ipsum dolor
【lorem ipsum】lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet.
01 / Colors

Color Palette

COLOR
Brand — lorem ipsum dolor 2 lorem
Plum
#551937
lorem. lorem(h2 / h3) / lorem ipsum dolor
Crimson
#aa0046
lorem / lorem / lorem ipsum dolor CTA lorem ipsum
Magenta Deep
#8d075c
“Web lorem ipsum”lorem ipsum 1px lorem
Brown
#5a2d14
lorem ipsum CTA“lorem ipsum dolor sit”lorem ipsum
Tag — lorem ipsum dolor sit
Tag / lorem
#83b7d8
lorem ipsum(lorem)
Tag / lorem
#e397ac
lorem ipsum(lorem)
Tag / lorem ipsum
#b74674
lorem ipsum dolor sit amet(lorem ipsum)
Marker
#ffda6a
lorem ipsum dolor. lorem 20% lorem ipsum
Surface — lorem ipsum dolor sit amet
Background
#ffffff
html lorem
Cream
#fffdf7
lorem ipsum dolor sit.lorem ipsum dolor sit amet
Surface Gray
#f5f5f5
lorem ipsum dolor sit amet. lorem(34 lorem)
Beige
#f0ebde
lorem ipsum dolor sit amet
Linen
#f8f2eb
SNS lorem ipsum dolor
Pale Red
#fceded
“lorem ipsum dolor…”lorem ipsum dolor
Line Pale
#f0efec
LIMITED / TOPICS lorem ipsum 1px lorem
Text / Dark Band
#121212
body lorem ipsum / “lorem”lorem
02 / Typography — lorem

lorem palt ＋ letter-spacing 0.4px

TYPOGRAPHY
SNS / lorem ipsum dolor
32px / 700 / line-height: 48px (1.5) / letter-spacing: 0.4px (0.0125em) ／ loremh2 — lorem ipsum
lorem ipsum dolor sit amet consectetur adipiscing
31px / 400 / line-height: 46.5px (1.5) / letter-spacing: 2px (0.065em) ／ loremh2 — lorem ipsum(lorem ipsum dolor)
lorem ipsum dolor
24px / 700 / line-height: 36px (1.5) / letter-spacing: 1px (0.04em) ／ loremh2 — lorem ipsum dolor
YATSUDOKI
18px / 700 / line-height: 36px (2.0) ／ lorem ipsumh3 — lorem ipsum dolor
lorem
18px / 700 / line-height: 27px (1.5) / letter-spacing: 1px (0.055em)h3 — lorem ipsum
lorem ipsum dolor
14px / 700 / line-height: 21px (1.5) / letter-spacing: 0.4pxh3 — lorem
lorem ipsum dolor sit amet consectetur
16px / 400 / line-height: 24px (1.5)h4 — lorem
lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem, lorem ipsum dolor sit.
14px / 400 / line-height: 21px (1.5) / letter-spacing: 0.4px (0.029em) / color: #121212body lorem
lorem, lorem ipsum dolor. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor. lorem ipsum dolor, lorem ipsum dolor sit, lorem ipsum dolor sit amet.
14px / 400 / line-height: 25.2px (1.8) — lorem ipsum dolor sit ametlorem ipsum
lorem ipsum dolor sit
13px / 700 / line-height: 19.5px (1.5) / letter-spacing: 1px (0.077em) — lorem ipsumnav — lorem ipsum dolor sit amet
lorem ipsum dolor ／ lorem ／ lorem ipsum dolor
12px / 400 / line-height: 18px (1.5)header — lorem ipsum dolor
font-family(lorem)
loremlorem
lorem / lorem / lorem / lorem ipsum"lorem ipsum dolor Pro W6", "Hiragino Kaku Gothic Pro", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
lorem ipsum(h2 / lorem h3)serif ← lorem ipsum dolor sit amet 1 lorem. OS lorem ipsum

※ lorem ipsumlorem ipsum dolor Pro W6 lorem ipsum dolor, lorem ipsum dolor sit amet consecteturlorem ipsum(macOS loremfont-weight: 400 lorem W6 lorem ipsum dolor). Web lorem ipsum dolor sit, lorem ipsum dolor sitNoto Sans JP lorem ipsum.
※ Pro(JIS90)loremProN(JIS2004)lorem ipsum dolorlorem ipsum dolor sit,Pro lorem.
※ lorem ipsum dolorfont-family: serif lorem 1 lorem ipsummacOS = lorem ipsum dolor ProN / Windows = MS lorem lorem ipsum dolor sit, lorem ipsum DESIGN.md lorem ipsum dolor"Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif lorem ipsum dolor.

03 / Product — lorem ipsum dolor

lorem ipsum dolor

LIMITED
product image
#loremLIMITED
【lorem ipsum】lorem ipsum lorem ipsum dolor 20 lorem
¥3,200(lorem)
product image
#loremTOPICS
lorem ipsum dolor sit amet consectetur 5 lorem
¥3,850(lorem)
product image
#lorem ipsum
YATSUDOKI lorem ipsum dolor sit 6 lorem
¥1,620(lorem)
lorem ipsum
Article — lorem ipsum dolor sit

lorem / lorem

YATSUDOKI

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

lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor.lorem ipsum dolor, lorem ipsum dolorlorem ipsum, lorem ipsum dolor sit amet.

04 / Buttons

lorem ipsum dolor, lorem ipsum dolor

COMPONENTS
lorem ipsum dolor sit
Primary(lorem ipsum)
#5a2d14 / lorem 12px
radius 100px / padding 9px
lorem ipsum dolor
Secondary
lorem ＋ 1px solid #aa0046
radius 30px / padding 8px 10px
Web lorem ipsum
Secondary Wide
lorem #aa0046 / lorem #8d075c
radius 30px / padding 16px 0 14px
lorem / lorem
Nav Pill
lorem / lorem #551937 14px / 700
radius 30px / padding 10px 24px
Keyword Chips — radius 2px lorem“lorem ipsum”
#lorem #lorem ipsum dolor #lorem ipsum #lorem / lorem ipsum #lorem
#f5f5f5 lorem ／ lorem #aa0046 ／ 14px / 700 ／ radius 2px ／ padding 10px 20px
Tags ＆ Badges
#lorem #lorem #lorem ipsum LIMITED TOPICS
tag: radius 2px / padding 4px 6px 2px(lorem ipsum)／ 11px / 700 ／ badge: radius 10px / padding 4px 23px 4px 25px(lorem ipsum)／ 10px / 700
Menu Category Bar
lorem ipsum dolor sit
#f0ebde lorem ／ lorem #551937 13px / 700 ／ letter-spacing 1px ／radius 0px ／ padding 11px 0 10px
Marker

lorem 20% lorem ipsum #ffda6a lorem ipsum dolor

background-image: linear-gradient(transparent 80%, #ffda6a 20%) ／ lorem #aa0046 16px
05 / Cards

News ＆ Problem

NEWS
2026.08.21＼lorem ipsum dolor sit amet 8/28(lorem)lorem ipsum dolor／
2026.08.15【lorem】lorem ipsum dolor sit amet consectetur
2026.08.02lorem ipsum dolor sit amet consectetur
Problem Block

lorem ipsum dolor sit amet consectetur

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

06 / Forms

lorem ipsum dolor / lorem

FORM
Default — lorem / border lorem / radius 30px / padding 0 15px / 12px ／ font-feature-settings: normal
Focus — #aa0046 lorem 1px lorem ipsum dolor
lorem ipsum dolor sit amet.
Error — #aa0046 lorem ipsum ＋ #fceded lorem
07 / Elevation

lorem 2 lorem ipsum, lorem ipsum dolor

DEPTH
Level 0
none — lorem / lorem / lorem
Level 1
0 1px 3px rgba(0,0,0,.03)
Level 2
0 4px 12px rgba(37,28,41,.06)
lorem ipsum dolor sit
Surface — lorem ipsum dolor
Background
#ffffff
Cream
#fffdf7
Linen
#f8f2eb
Surface Gray
#f5f5f5
Beige
#f0ebde
08 / Layout

Spacing ／ Radius ／ Container

LAYOUT
Spacing Scale
XS 2
S 6
M 11
L 16
XL 24
Radius — lorem ipsum dolor
loremlorem
0pxlorem ipsum dolor sit amet
2pxlorem / lorem ipsum dolor(lorem ipsum)
4pxlorem ipsum dolor
9pxlorem ipsum dolor / lorem ipsum
10pxLIMITED / TOPICS lorem
30pxlorem / lorem(lorem)
100px“lorem ipsum dolor sit”lorem
Container / Grid / Breakpoints
loremlorem
Max Width1280px / padding-x 20px
lorem ipsum3 lorem
lorem ipsum4 lorem
Mobile≤ 767px — 1 lorem. lorem ipsum dolor(“lorem”lorem #121212)
Tablet768–1023px — lorem 2 lorem
Desktop≥ 1024px — lorem 3–4 lorem ＋ lorem ipsum dolor