New Release
AI lorem ipsum dolor sit amet →
AI ✕ lorem ipsum
lorem ipsum dolor,
AI lorem.
lorem ipsum dolor sit, lorem ipsum dolor.
lorem ipsum dolor sit amet consectetur adipiscing + font-feature-settings: "palt"(lorem ipsum Noto Sans JP lorem)
Colors
01 — 11 lorem ipsum dolor 6 lorem ipsum dolor. UI lorem ipsum blue lorem orange-6 lorem
Neutral Scale（0 → 10）
012345
678910
Blue Scale(1 → 10)— lorem ipsum dolor 8 lorem
123456
78910ai
Roles
Primary(CTA / lorem)#2352c8 / --color-cta-primary
Primary Hover#1337a1 / --color-cta-primary-hover
Secondary(lorem CTA)#171725 / --color-cta-secondary
Accent(lorem DL lorem)#e77623 / --color-cta-accent
Surface Muted(lorem)#f1f1f5 / --color-bg-muted
Surface Subtle#fafafb / --color-bg-surface
Gradient(lorem / CTA)90deg #2352c8 → #67bcff
Dark Section48deg #000c2a → #02010c
Semantic
Infosurface #f0f7ff / text #026572
Successsurface #eafbe5 / text #108a10
Warningsurface #fff2de / text #c3540a
Errorsurface #ffede9 / text #d3403a
lorem #e77623 lorem“lorem ipsum dolor”lorem ipsum dolor.
lorem ipsum dolor sit amet consectetur adipiscing.
Typography
02 — Noto Sans JP 1 lorem / lorem ipsum 600 / line-height lorem 1.4 / letter-spacing lorem px lorem(0.28px)
Hero Head
60px / 600 / 1.4 / 0.28px
AI ✕ lorem ipsum
Section Head
40px / 600 / 1.4 / 0.28px
lorem ipsum dolor sit amet
Section Head S
32px / 600 / 1.4 / 1.6px
lorem ipsum dolor
Sub Head
24px / 600 / 1.4 / 0.28px
lorem ipsum dolor, lorem ipsum, lorem
Lead
20px / 600 / 1.4 / 0.28px
lorem ipsum / lorem ipsum dolor sit
Card Title
18px / 600 / 1.4 / 0.36px
lorem ipsum dolor sit 5 lorem 1. lorem ipsum dolor
Body
16px / 400 / 1.7 / 0.28px
lorem ipsum dolor sit amet consectetur, “lorem ipsum dolor sit amet consectetur”
“lorem ipsum dolor sit amet consectetur”lorem ipsum dolor sit amet consectetur.
Body Dense
16px / 400 / 1.8 / 0.28px
lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.
Base（body）
14px / 400 / 1.6 / 0.28px
lorem ipsum dolor sit, lorem ipsum / lorem ipsum dolor, AI lorem ipsum dolor sit amet consectetur.
Button
14px / 700 / 1.43 / 0.28px
lorem ipsum dolor
Meta
14px / 500 / 1.8 / 0.36px
1,001–5,000 lorem／lorem
Badge
12px / 500 / 1.33 / normal
lorem ipsum dolor
Caption
12px / 400 / 1.7 / 0.28px
※1 lorem(2025 lorem 10 lorem 31 lorem)lorem ipsum No.1／lorem(2024 lorem)lorem ipsum dolor No.1
Kicker
14px / 900 / italic
New Release
letter-spacing lorem 0.28px lorempx loremlorem. em lorem ipsum dolor,
14px lorem 0.02em, 40px lorem 0.007em lorem, lorem ipsum dolor sit amet consectetur adipiscing.
lorem ipsum line-height lorem ipsum dolor sit 1.4. font-feature-settings lorem normal(palt lorem ipsum dolor).
Case Study
03 — lorem ipsum dolor. lorem Montserrat + tabular-nums lorem ipsum dolor
TOP ／ lorem ipsum ／ lorem
lorem ipsum dolor, lorem ipsum dolor 5 lorem 1 lorem
lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur.
lorem ipsum dolor sit amet 10 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit.
-10,800
-3.68pt
1/5
lorem ipsum dolor sit
lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed.
lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet consectetur adipiscing.
Buttons & Badges
04 — lorem ipsum dolor sit amet consectetur(lorem ipsum 4px / lorem ipsum dolor 8px). lorem ipsum dolor
Header（radius 4px）
Section（radius 8px）
Primary — lorem #2352c8 / lorem #fff / hover #1337a1
Secondary — lorem #171725 / lorem #fff / hover #3f3f4a
Outline — lorem / 1px solid #d5d5dc / lorem #171725
Accent — lorem #e77623 / hover #c3540a.“lorem ipsum dolor”lorem ipsum dolor
lorem ipsum dolor 1 lorem ipsum dolor. lorem ipsum dolor sit amet.
Badges（radius 9999px / letter-spacing normal）
lorem ipsum dolor
lorem ipsum dolor
lorem
lorem ipsum
lorem ipsum dolor, lorem ipsum dolor. lorem 2 lorem ipsum dolor sit amet consectetur adipiscing.
Cards & Chart
05 — lorem ipsum radius 12px. lorem ipsum dolor“lorem / lorem”lorem 11 lorem
case photo
lorem
lorem ipsum dolor sit 5 lorem 1
1,001–5,000 lorem／Loglass lorem ipsum
case photo
lorem
lorem ipsum dolor sit 1 lorem ipsum dolor
501–1,000 lorem／Loglass lorem ipsum
case photo
lorem
30 lorem ipsum Loglass lorem ipsum
lorem ipsum／lorem ipsum 15:00
Benefit Card(lorem + lorem ipsum dolor)
lorem ipsum dolor sit amet consectetur
lorem ipsum dolor, lorem ipsum, lorem. lorem ipsum dolor sit amet consectetur adipiscing.
Chart（categorical 1 → 11）
loremlorem(lorem)
loremlorem(lorem)
lorem ipsumlorem ipsum(lorem)
loremlorem
lorem → lorem ipsum dolor(lorem ipsum dolor sit). lorem ipsum dolor sit amet consectetur.
Forms
06 — lorem ipsum / lorem ipsum / lorem. radius 4px, lorem ipsum dolor #eef5ff lorem ipsum dolor
Elevation
07 — lorem ipsum 20 lorem ipsum. lorem color-mix lorem ipsum dolor sit“lorem”
--shadow-card
0 10px 30px -20px / 0 16px 30px -30px. spread lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.
--shadow-floating
0 0 32px / 0 0 8px. offset lorem ipsum, lorem ipsum dolor sit amet consectetur(lorem ipsum).
--shadow-ai-hero
color-mix(in srgb, #2352c8 30%, transparent) loremlorem. AI lorem ipsum dolor.
Layout
08 — lorem 1200px / lorem ipsum 1280px / lorem ipsum dolor 40px. Tailwind v4 lorem rem lorem ipsum dolor
1280px — --container-header
1200px — --container-max(lorem)
520px — lorem / lorem ipsum
Spacing Scale(8px lorem. 4px lorem ipsum dolor)
Border Radius
sm 4px
md / lg 8px
xl 12px
2xl 16px
full
--radius-md lorem --radius-lg lorem ipsum 8px. lorem ipsum dolor sit amet consectetur adipiscing.
lorem ipsum dolor sit 40rem(640) /48rem(768) / 64rem(1024) /
80rem(1280) / 96rem(1536). lorem ipsum dolor @media (hover: hover) lorem,
@media (prefers-reduced-motion: reduce) lorem ipsum dolor.
lorem ipsum dolor sit amet consectetur Loglass lorem ipsum
lorem ipsum dolor sit amet consectetur adipiscing.