EKoreaClass
Press Start ▶
🎨 Design System v0.1

KoreaClass DNA.
Cozy RPG × Bangkok Modern.

Brand identity, components, motion, and the mascot — everything you need to build something that feels like KoreaClass. Updated 2026-05-16.

Foundation

Brand

Meet Eng

Eng is your shapeshifter scene partner. One character, every role — barista, recruiter, Dating App match, airline staff. Always friendly, never judges, infinitely patient. Peer-energy, not parent-energy. Thai casual nickname: น้องอิงค์.

ShapeshifterPeer-energyNever shamesMulti-costume

Brand promise

"พูดเกาหลีได้จริง ใน 30 วัน ด้วยการ Roleplay กับ AI —
Eng wears every 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 English learning into a roleplay game. Pick a scene, press start, speak with an AI scene partner that never judges. Get instant pronunciation feedback at the phoneme level — like ELSA, but inside 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

Hi! What can I get for you?
Tell me about yourself ✨
Nice pronunciation! 🎯
Can I get your number? 😏

The shapeshifter

Mascot — Eng

6 costumes

base
Ebarista
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, you got this!" — encouraging, present
  • ✅ "พูดอีกครั้งได้ ไม่ต้องกลัวพูดผิด" — no shame
  • ✅ "ลองสนิทกับเขาดู — เปิดบทไง" — playful, real
  • ✅ Mixed Thai + English where natural — Thais code-switch
DON'T
  • ❌ "We miss you 😢 You haven't practiced..." — guilt-trip (Duolingo)
  • ❌ "You lost your streak!" — shame-coded
  • ❌ "วันนี้คุณจะได้เรียนรู้เกี่ยวกับ Present Perfect..." — textbook
  • ❌ "Excellent work, student!" — condescending
  • ❌ Push notifications more than 1×/day