lorem lorem lorem lorem lorem

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

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Brown Accent
#93806f
lorem ipsum dolor sit / lorem
Text
Text Primary
#3a3a3a
lorem / lorem
Text Body
#4e4e4e
lorem ipsum dolor
Text Caption
#93806f
lorem ipsum dolor / lorem
Footer Text
rgba(58,58,58,0.75)
lorem ipsum dolor
Surface
Background
#ffffff
lorem ipsum
Background Alt
#f5f6f7
lorem ipsum dolor sit
Background Alt 2
#f3f3f3
CSS lorem background-2
Tag Surface
#f4efef
lorem ipsum dolor
Accent Surface
Yellow Section
#f9f971
lorem ipsum dolor sit
Pink-beige
#fcf7f7
lorem ipsum dolor
Border
Border Default
#cdcfd4
lorem ipsum dolor
Border Accent
#93806f
lorem / lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor
Display H2 — Shippori Mincho (= yu-mincho-pr6) / 30px / 400 / line-height: 2.0 / letter-spacing: 0.5emlorem ipsum
lorem ipsum dolor — Section Heading
Section H2 — Shippori Mincho / 24px / 400 / line-height: 2.0 / letter-spacing: 0.08emlorem ipsum dolor
IPPODO TEA — Latin Heading
Latin H2 — Helvetica, Arial / 22px / 500 / line-height: 2.0 / letter-spacing: 0.17emlorem ipsum
lorem ipsum dolor — lorem ipsum dolor line-height 2.0 lorem letter-spacing 0.1em lorem ipsum dolor sit amet. weight 300(Light)lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit. ABCabc 123
Body — Noto Sans JP (= source-han-sans-japanese) / 16px / 300 / line-height: 2.0 / letter-spacing: 0.1emlorem
lorem ipsum dolor sit — Nav Caption
Nav Caption — Noto Sans JP / 14px / 500 / letter-spacing: 0.18emlorem
lorem ipsum
Pill CTA — Shippori Mincho / 16px / 400 / line-height: 58px / letter-spacing: 0.08em / border 1px solid #4e4e4e / radius 60pxCTA
#_lorem ipsum #_lorem #_lorem
Tag — Noto Sans JP / 12px / 500 / letter-spacing: 0.1em / bg #f4efef / radius 16pxlorem ipsum
2026 lorem 5 lorem 21 lorem — lorem ipsum dolor / lorem
Small Caption — Noto Sans JP / 10-11px / 300-700 / color: #93806florem ipsum dolor
03 / Article

lorem ipsum dolor sit amet consectetur

2026 lorem 5 lorem 21 lorem / lorem ipsum dolor

lorem ipsum, lorem ipsum dolor

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 adipiscing. lorem ipsum dolor sit amet consectetur. lorem, lorem ipsum dolor sit.

lorem ipsum dolor

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

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

#_lorem #_lorem ipsum #_lorem #_lorem #_lorem
Accent Section Sample

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur adipiscing(#f9f971). lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.

Accent Section Sample

lorem ipsum

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod(#fcf7f7). lorem ipsum dolor sit amet consectetur.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Pill CTA(lorem)
lorem ipsum dolor
Pill CTA(lorem)
lorem
Newsletter Submit
Icon Button
#_lorem ipsum
Tag Pill
#_lorem
Tag Pill
#_lorem
Tag Pill
#_lorem
Tag Pill
05 / Cards

lorem ipsum dolor sit

lorem

lorem lorem

1,620 lorem(lorem)
lorem / 200g lorem
lorem

lorem ipsum dolor

1,080 lorem(lorem)
lorem ipsum / 100g lorem
lorem

lorem lorem ipsum

3,240 lorem(lorem)
lorem / 40g lorem
lorem ipsum dolor sit
06 / Forms

lorem ipsum dolor

lorem — border: #93806f / radius: 16px / font-size: 10px
lorem ipsum — border: #cdcfd4 / radius: 4px
lorem ipsum — border: #93806f(lorem ipsum dolor)
lorem — border: #c53d3d(lorem)
lorem ipsum dolor — lorem + lorem ipsum dolor sit(bg: #93806f)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum dolor
Level 1: Subtle
0 2px 8px rgba(0,0,0,0.06) — lorem(lorem)
Level 2: Elevated
0 8px 24px rgba(0,0,0,0.08) — lorem ipsum dolor(lorem)
Focus Ring
#93806f(lorem ipsum dolor)
lorem ipsum dolor sit
lorem
#ffffff
Alt
#f5f6f7
Tag
#f4efef
Yellow
#f9f971
Pink
#fcf7f7
08 / Layout

lorem ipsum & lorem ipsum dolor

Spacing Scale
4px
8px
16px
32px
64px
120px
Content Widths
Max Container 1200px (--page-width: 120rem)
Content Area 1000px
Article / Text Block 680px
Border Radius Scale
0px
lorem
4px
lorem
16px
lorem / lorem
60px
Pill CTA