schoo
lorem ipsum lorem ipsum(lorem)

Design System Preview
Schoo — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem(2026-06-22)lorem ipsum.

lorem ipsum dolor sit lorem ipsum dolor sit
01 / Colors

COLOR PALETTE

Brand Orange
Brand Orange
#e29447
CTA / lorem / lorem ipsum
Brand Orange CTA
#d8934e
lorem CTA lorem
Brand Orange Text
#d27a3e
lorem ipsum dolor
Text
Text Primary
#1f1f1f
lorem / lorem
Text Dark
#1e1e1e
lorem ipsum / lorem
Text Secondary
#404044
lorem ipsum dolor
Text Muted
#aaaaaa
lorem / lorem / lorem
Link Blue
#4f9df7
lorem ipsum dolor
Surface & Background
White
#ffffff
lorem ipsum / lorem
Warm Beige Surface
#f5f2ee
lorem ipsum dolor
Input Background
#eeeeee
lorem ipsum
Border / Divider
#e1e1e1
lorem ipsum / lorem
Semantic(lorem ipsum)
Danger
#dc3545
lorem
Success
#28a745
lorem / lorem
02 / Typography — lorem

TYPOGRAPHY

lorem ipsum dolor — Banner H2
Noto Sans JP / 52px / 700 / line-height: 1.3 / letter-spacing: -0.02emlorem ipsum dolor
lorem ipsum dolor — Hero H1
Nunito / 36px / 700 / line-height: 1.44 / letter-spacing: 0.07emlorem ipsum dolor
lorem ipsum dolor — Section H2
Nunito / 24px / 700 / line-height: 1.5 / letter-spacing: 0.07emlorem ipsum dolor sit
INFORMATION
Nunito / 20px / 900 / line-height: 1.25 / letter-spacing: 0.1em — lorem ipsum dolor sitlorem ipsum dolor
lorem ipsum dolor sit — Python lorem ipsum dolor sit amet
Nunito / 13px / 700 / line-height: 1.6 / letter-spacing: 0lorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor, lorem ipsum / lorem ipsum / lorem ipsum dolor sit. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123
Nunito / 14px / 400 / line-height: 1.6 / letter-spacing: 0lorem
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur. 14px lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.
Nunito / 12px / 400 / line-height: 1.8 / letter-spacing: 0Body Description
19:00 〜 20:00
Nunito / 16px / 900 / line-height: 1.3 / color: #aaaaaalorem ipsum
2026.06.22
Nunito / 11px / 700 / line-height: 1.0 / color: #aaaaaalorem / lorem ipsum
03 / Article — lorem ipsum dolor lorem

COURSE CONTENT

NEW 2026.06.22 19:00 〜
lorem ipsum dolor sit amet consectetur — Python lorem ipsum dolor sit

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

lorem ipsum

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

lorem ipsum 12,450 lorem ／ lorem 4.8 ／ lorem 12 lorem ／ lorem 60 lorem

lorem ipsum dolor lorem ipsum dolor
04 / Buttons

BUTTONS

lorem ipsum(lorem)
Primary CTA Pill
#e29447 / 100px / 15px / 700
lorem ipsum
Ghost CTA
2px solid #e29447 / 100px
lorem ipsum dolor sit
Large Primary CTA
#d8934e / 50px / 18px / 700
lorem ipsum dolor sit
Large Ghost CTA
white / #1e1e1e border / 50px
NEW
Badge NEW
#e29447 / 4px / 10px / 700
lorem ipsum
Dark Balloon
#1e1e1e / 50px / shadow
lorem ipsum
Orange Balloon
white / #d8934e border / 50px
05 / Cards

COURSE CARDS

📊
☆
NEW
Python lorem ipsum dolor sit — pandas lorem matplotlib lorem
lorem lorem lorem
2026.06.22 ／ 19:00 〜
🎨
☆
UX lorem ipsum dolor — lorem ipsum dolor sit amet consectetur
lorem lorem lorem
2026.06.23 ／ 20:00 〜
💼
★
lorem ipsum dolor sit 100 — lorem / lorem ipsum dolor sit amet
James Wilson lorem
lorem ipsum ／ lorem 12 lorem
🤖
☆
NEW
lorem AI lorem ipsum dolor — ChatGPT / Claude lorem ipsum dolor sit
lorem lorem lorem
2026.06.25 ／ 19:30 〜

7,000 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit lorem ipsum dolor sit
06 / Forms

FORMS

🔍
lorem ipsum — background: #eeeeee / border: none / radius: 5px
lorem ipsum — box-shadow: 0 0 0 3px rgba(226,148,71,0.35)
8 lorem ipsum dolor sit amet consectetur
lorem — box-shadow: 0 0 0 2px #dc3545
Textarea — background: rgba(0,16,14,0.03) / box-shadow: rgba(0,16,14,0.1) / radius: 4px
07 / Elevation

DEPTH & ELEVATION

Level 0 — Flat
lorem. lorem / lorem ipsum dolor sit.
Level 1 — Header
rgba(30,30,30,0.05) 0px 4px 8px
lorem ipsum dolor
Level 2 — Dropdown
rgba(30,30,30,0.1) 0px 8px 20px
lorem ipsum dolor / lorem ipsum dolor
Level 3 — Modal
rgba(30,30,30,0.15) 0px 16px 40px
lorem ipsum
Balloon
0 2px 8px rgba(30,30,30,0.2)
lorem ipsum dolor pill
Header BG
rgba(255,255,255,0.95)
lorem ipsum + Level 1 shadow
08 / Layout

SPACING & LAYOUT

Spacing Scale (8px lorem ipsum)
XS
4px
S
8px
M
16px
L
24px
XL
40〜48px
XXL
80px
Border Radius Scale
XS
4px — lorem
Small
5px — lorem
Pill Large
50px — lorem CTA
Pill
100px — lorem CTA
Circle
50% — lorem ipsum dolor
Container Widths
Max Container 1200px
lorem ipsum dolor sit
Desktop Padding 24〜32px
lorem ipsum dolor(lorem ipsum dolor)
Mobile Padding 16px
lorem ipsum dolor(lorem ipsum)