lorem ipsum YCAM ▶ lorem ipsum dolor
lorem ipsum lorem ipsum lorem / lorem ipsum dolor lorem / lorem ipsum dolor lorem ／ English
lorem ipsum lorem ipsum dolor

Design System Preview
lorem ipsum dolor sit［YCAM］

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. computed style lorem(2026-08-20)lorem ipsum.

lorem ipsum dolor sit amet YCAM lorem ipsum dolor sit
01 / Colors

lorem ipsum dolor — teal lorem orange lorem 2 lorem

Brand
YCAM Teal
#176e71
lorem. lorem / lorem ipsum / lorem / lorem
(lorem ipsum)
#176a71
--ycam-color-main lorem ipsum. lorem ipsum #176e71
YCAM Orange
#ba4a00
lorem. lorem / lorem ipsum dolor
Teal Scale(lorem)
Deep Teal
#0f494b
lorem ipsum / lorem ipsum dolor
Teal Text
#0a494b
lorem ipsum dolor sit amet
Pale Teal
#c8eced
lorem ipsum dolor / lorem ipsum dolor
Pale Teal 2
#c8edee
lorem ipsum. 2 lorem ipsum(lorem ipsum)
Faint Teal
#ebf4f4
lorem ipsum dolor
Neutral
Ink
#333333
lorem ipsum dolor. lorem ipsum dolor
Disabled
#666666
“lorem”lorem
Surface Gray
#f1f1f1
lorem ipsum / lorem ipsum dolor
Card Gray
#f8f8f8
lorem ipsum dolor
Card Gray 2
#f7f7f7
lorem ipsum dolor sit
Background
#ffffff
lorem ipsum
External / Scrim
External Blue
#004b9e
lorem ipsum dolor sit amet consectetur
Scrim
rgba(0,0,0,.6)
lorem ipsum dolor sit amet
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor sit amet consecteturYakuHanJPs(lorem ipsum dolor). lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor. lorem ipsum dolor sit amet consectetur.Univers(Linotype)lorem ipsum dolor sit.

lorem ipsum dolor — Page Title(h1)
2.25rem(37.35px @1440) / 400 / line-height: 1.333 / letter-spacing: -0.05em / palt: loremlorem ipsum
lorem ipsum dolor — Section Head
2rem(33.2px @1440) / 400 or 700 / line-height: 1.75 / letter-spacing: -0.05em / palt: loremlorem
lorem ipsum dolor sit — Sub Head
1.875rem(31.125px @1440) / 700 / line-height: 1.333 / letter-spacing: -0.05em / palt: loremlorem ipsum
lorem ipsum — Heading 3
1.5rem(24.9px @1440) / 700 / line-height: 1.75 / letter-spacing: -0.05em / palt: lorem
lorem ipsum(lorem ipsum dolor)
1rem / 700 / lorem #176e71 / border-radius: 3px 3px 0 0 ← lorem ipsum dolor sitlorem ipsum
lorem — Body. lorem ipsum dolor 1.75 lorem, lorem / lorem / lorem ipsum dolor palt lorem letter-spacing: -0.05em lorem ipsum. lorem ipsum dolor sit amet consectetur.
1rem(16.6px @1440) / 500 / line-height: 1.75 / letter-spacing: -0.05em / palt: lorem
lorem ipsum — lorem ipsum dolor palt lorem ipsum. letter-spacing lorem normal lorem, lorem 2.0 lorem ipsum. lorem ipsum dolor, lorem ipsum, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.
1rem / 500 / line-height: 2.0 / letter-spacing: normal / palt: loremlorem ipsum dolor sit
lorem — Caption(0.875rem)
0.875rem（14.525px @1440） / 400 or 500 / letter-spacing: -0.05em
lorem / lorem ipsum — Tiny(0.75rem)
0.75rem(12.45px @1440) / 500 or 700 / letter-spacing: -0.05em(lorem ipsum dolor sit -0.033em)
Root font-size lorem ipsum dolor
ViewportRoot font-size1rem lorem2rem（Section Head）
≤ 1343px16px(lorem)16px32px
1440px16.6px16.6px33.2px
1504px17px17px34px
1680px18px18px36px
≥ 1840px20px(lorem)20px40px
03 / Event — lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

loremlorem

lorem ipsum＋YCAM lorem

lorem!

lorem / lorem ipsum dolor sit amet consectetur. 136 lorem ipsum dolor, lorem / lorem / lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit palt lorem, lorem 2.0 lorem ipsum dolor.

lorem ipsum dolor

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

lorem
lorem 1,200 lorem／lorem 800 lorem／18 lorem ipsum
loremlorem ipsum A
lorem2026 lorem 10 lorem 17 lorem(lorem)–2027 lorem 3 lorem 1 lorem(lorem)
lorem ipsum dolorlorem ipsum dolor
04 / Schedule

lorem ipsum YCAM — lorem ipsum dolor

8 lorem 24 lorem(lorem)
15:10 〜16:48
lorem ipsum dolor sit lorem ipsum dolor
17:10 〜18:27
lorem ipsum／lorem ipsum dolor sit amet lorem ipsum dolor《lorem ipsum dolor》
05 / Buttons & Badges

lorem / lorem / lorem

lorem ipsum dolor / lorem ipsum dolor sit amet consectetur
Primary — #176e71 / radius 3px / padding 1rem
lorem ipsum YCAM lorem
Primary(lorem) — padding 0.85rem
YCAM lorem ipsum dolor sit
Outline — 2px solid / radius 0px
lorem ipsum dolor
External — #004b9e / radius 3px
Badges(lorem radius 0px)
lorem lorem ipsum lorem lorem ipsum dolor lorem 4 lorem lorem ipsum dolor lorem
Tabs
Pagination
1234
06 / Cards

lorem ipsum dolor sit(lorem ipsum dolor)

lorem: lorem ipsum(YCAM)
lorem ipsum＋YCAM lorem“lorem!”lorem ipsum
without records
2026 lorem 7 lorem 24 lorem(lorem)–2027 lorem 3 lorem 1 lorem(lorem)
lorem
lorem ipsum dolor 2026 lorem 7 lorem
YCAM lorem ipsum 2026 lorem ipsum dolor sit amet
lorem ipsum dolor
lorem ipsum dolor
Filament＋YCAM
lorem
07 / Forms

lorem ipsum dolor

lorem ipsum<select> lorem<label>(“lorem ipsum dolor”“lorem ipsum dolor sit amet consectetur adipiscing”)lorem ipsum dolor.

lorem ipsum — border: 1px solid #666666 / radius: 3px
lorem ipsum — 2px solid #176e71 ＋ outline-offset: -2px
1 lorem ipsum dolor sit amet
lorem — 2px solid #ba4a00
08 / Depth — lorem ipsum dolor

lorem ipsum dolor sit(box-shadow: none)

lorem
#ffffff
lorem ipsum
#f8f8f8
lorem ipsum
#f1f1f1
lorem ipsum
#ebf4f4
lorem ipsum dolor
#c8eced
lorem / lorem
#176e71
lorem ipsum
#0f494b
Spacing Scale(rem — lorem ipsum dolor)
0.25rem
4.15px
0.5rem
8.3px
0.8rem
13.28px
1rem
16.6px
1.5rem
24.9px
2rem
33.2px
▲ lorem ipsum dolor