KKoreaClass
Press Start ▶
🎨 Design System v0.1

KoreaClass DNA.
Cozy RPG × K-Modern.

Brand identity, components, motion, and the mascot (Min in Hanbok 한복) — everything you need to build something that feels like KoreaClass. Updated 2026-05-21.

Foundation

Brand

Meet Min

Min is your shapeshifter scene partner in Hanbok (한복). One character, every Korean role — barista at a Hongdae cafe, HR at Kakao, Dating App match in Itaewon, Korean Air agent. Always friendly, never judges, infinitely patient. Peer-energy, not parent-energy. Thai casual nickname: น้องมิน.

ShapeshifterPeer-energyNever shamesMulti-costume

Brand promise

"พูดเกาหลีได้จริง ใน 30 วัน ด้วยการ Roleplay กับ AI —
Min wears 한복 + every K-scene in your life."

Palette

Colors

Purple Brand
#7C5CFF

Primary action, hero CTA

Teal Brand
#00D4B8

Success, secondary action, AI accent

Coral Brand
#FFB547

Highlight, badges, viral moments

Cream
#FFF8F0

Default background, warm canvas

Ink
#1A1530

Body text, strokes, dark UI

Night
#0F0E1A

Dark mode bg, pricing section

Purple scale

50
100
200
300
400
500
600
700
800
900

Teal scale

50
100
200
300
400
500
600
700
800
900

Coral scale

50
100
200
300
400
500
600
700
800
900

Voice on page

Typography

Display — Sora

Level up.

화이팅 ✨

Press Start to Speak 한국어

Thai — IBM Plex Sans Thai Looped

ฝึกพูดเกาหลีเหมือนเล่นเกม

สวมบทบาทกับ AI พูดในสถานการณ์จริง — สั่งกาแฟ สัมภาษณ์งาน เดทกับโอป้า รู้เลยพูดเป๊ะรึยัง

น้องมินใส่ฮันบกพร้อมเป็น scene partner คนใหม่ของคุณ

Body — Inter / Plex Thai

KoreaClass turns Korean learning into a roleplay game. Pick a scene, press start, speak with an AI scene partner in 한복 that never judges. Get instant pronunciation feedback at the phoneme level — tuned for non-native Korean speakers in Thai-Korean code-switching real-life conversations.

Press to play

Buttons

Surfaces

Cards

Default + Hover

Hover me — lifts and casts a cozy purple shadow.

Purple tone

For brand-leading sections.

Teal tone

For success + AI-speak moments.

Coral tone

For highlights + viral cards.

Night tone

For pricing + Boss-mode sections.

Tiny labels

Badges

PurpleTealCoralInkCreamPurple outlineTeal outlineCoral outlineInk outline🔥 Trending👑 Boss✓ New

Voice on screen

Speech bubbles

안녕하세요! 주문 도와드릴까요?
자기소개 한번 해주세요 ✨
발음 정말 좋아요! 🎯
혹시 연락처 좀… 😏

The Hanbok shapeshifter

Mascot — Min 👘

6 costumes

hanbok
Kbarista
office
traveler
scholar
mic

4 moods

happy
speaking
wow
wink

States

waving
sparkles
animated=false

Roleplay scenarios

World cards

Start here
☕
Easy

K-Cafe Order

สั่งกาแฟในร้าน K-cafe คุยกับบาริสต้า

วอร์มอัพง่ายๆ สั่ง 아이스 아메리카노, ถามเมนู, ตอบ 매장에서 드세요? — scenario ที่ทุก K-tourist เจอ

▶ Play →
🔥 Trending
💕
Medium

Dating App Date

เดทกับโอป้า — เปิดบทสนทนาให้รอด

Match แล้วบน 글램/위피? ทักยังไงไม่เงียบ? เดทจริงพูดอะไรได้บ้าง? ฝึกก่อนเจอจริง

▶ Play →
👑 Boss
💼
👑 Boss

Job Interview

สัมภาษณ์งาน บริษัทเกาหลี

ตอบ 자기소개 해주세요, salary expectation, จุดแข็ง-จุดอ่อนเป็นภาษาเกาหลีแบบ honorific

▶ Play →
🍜
Easy

Korean Restaurant

สั่ง 김치찌개, ขอบันชัน, complain ว่าเผ็ดไป

เมนูไม่มีรูป? สั่ง 안 매워요 ยังไง? ขอ takeaway 포장이요 ขอ refill 반찬 더 주세요 พูดยังไง

▶ Play →

Bring it to life

Motion

.anim-bob

Idle character bob

.anim-float

Drift up + down

.anim-tilt

Lazy wobble

.anim-pulse-ring

Mic / active ring

👋
.anim-wave

Hand wave

✨
⭐
💫
.anim-sparkle

Decorative twinkle

Atoms of design

Tokens

Radius

sm0.5rem
md0.875rem
lg1.125rem
xl1.5rem
2xl2rem
3xl2.5rem

Shadows

shadow-cozy-sm0 2px 8px
shadow-cozy0 8px 24px
shadow-cozy-lg0 16px 48px
shadow-cozy-xl0 24px 64px
shadow-tealTeal-tinted
shadow-coralCoral-tinted

How we speak

Voice & Tone

DO
  • ✅ "가자! 화이팅!" — peer, energetic, casual
  • ✅ "Day 7, 잘 하고 있어요!" — encouraging, present
  • ✅ "다시 한 번 해도 괜찮아요" — no shame
  • ✅ "이태원 데이트 어때요? 😏" — playful, real
  • ✅ Mixed Thai + Korean where natural — code-switch is real life
DON'T
  • ❌ "We miss you 😢 You haven't practiced..." — guilt-trip (Duolingo)
  • ❌ "You lost your streak!" — shame-coded
  • ❌ "วันนี้คุณจะได้เรียนรู้เกี่ยวกับ 받침 종성 หลักการ..." — textbook
  • ❌ "Excellent work, student!" — condescending
  • ❌ Push notifications more than 1×/day