EEngClass
🎨 Design System v0.1

EngClass DNA.
Cozy RPG × Bangkok Modern.

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

Foundation

Brand

Meet Eng

Eng is your shapeshifter scene partner. One character, every role — barista, recruiter, Tinder 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

EngClass 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

Coffee Shop

สั่งกาแฟ คุยกับบาริสต้า

วอร์มอัพง่ายๆ สั่ง latte, ถามเมนู, scenario ที่ทุกคนเจอ

▶ Play →
🔥 Trending
💕
Medium

Tinder Date

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

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

▶ Play →
👑 Boss
💼
👑 Boss

Job Interview

สัมภาษณ์งาน บริษัทอินเตอร์

ตอบ Tell me about yourself, salary expectation, ตัวเก่ง-ตัวอ่อนเป็นภาษาอังกฤษ

▶ Play →
🍜
Easy

Restaurant Order

สั่งอาหาร, ขอเช็คบิล, complain เมนู

เมนูไม่มีรูป? สั่ง medium-rare ยังไง? ขอ takeaway ขอ ผัด-ไม่-เผ็ด พูดยังไง

▶ 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