Kelas Sekejap · Speak Loud v7 — Screen Highlights

01 · The move

Legacy → v7

From the cream/orange, mascot-led identity to the neo-brutalist "Speak Loud" system. Roly the Pangolin is the mascot — in-product as the tutor and across marketing.

Legacy — cream / orange

Warm cream base #FAF3E8

Soft orange #F97316

Plus Jakarta Sans + Instrument Serif

Soft shadows, rounded, gentle

Mascot-led identity

v7 — Speak Loud

Haze base #efebe1

Electric Blue #2557ff + Flame #e64c09

Archivo Black display, ink outlines

Hard offset shadows · 8px 8px 0 ink

Organic blobs, mono labels, slight rotations

02 · Implementation

Screen by screen

Recreated faithfully from the live component code and real token values. Product is mobile-first, shown at true mobile width.

Good morning, Aina

Up next · 1 of 4Day 1 of practice

Warm-up
with Roly

Roly will ask a few simple questions, just like the real exam.

Part 1 · Interview3 min+10 XP

Start lesson

Streak

1 day

XP today

0 / 80

Mode

SPM

Today's Paper 3 practice0/3 done

Warm-up with Roly

Part 1 · Interview · 3 min · +10 XP

›

Long turn: favourite hobby

Part 2 · 20s prep + 60s talk · +30 XP

›

Home

The signature v7 moment: Electric Blue hero, Archivo Black display, Flame CTA, and ink-outlined stat cards with hard 8px shadows.

blue heroflame CTAshadow-card 8/8Archivo Blackmono tags

‹ HomePart 1

Roly · Question 1 of 5

Hi! Let's start easy. What's your name?

Listen

Hint

Type

Tap to speak

Skip

Part 1 · Interview

Roly bubble with a mono turn label, Lucide Listen / Hint / Type helpers (stroke-2), and the big Flame mic.

flame micLucide iconsmono eyebrowprogress bar

‹ HomePart 2

Roly

I'll give you 20 seconds to plan, then you'll have 60 seconds to speak. Take a breath.

Talk about your favourite hobby.

What is the hobby?
When did you start, and how often?
Why do you enjoy it?

20s prep60s talk

Start 20-second prep →

Part 2 · Long turn

Paper topic card with prompt list and mono prep/talk chips; Flame prep CTA. Timer copy now derives from the lesson.

paper cardmono chipsflame CTAradius-lg 28

‹ HomePart 3

Ways to make the most of school holidays

travellearn a new skill family timerest & reset part-time work

Roly · Turn 1 of 3

I think travelling is the best way to spend a school holiday. What do you think?

Tap to speak

Skip this turn

Part 3 · Discussion

"Mind map" card of haze branch chips (ink outline), a mono turn counter, and the Flame mic.

branch chipshaze fillflame micmono turn

‹ HomeVocab · 5

Roly

Listen once, then tap the mic and repeat it out loud.

In addition

Used to add another point.

I love football. In addition, I play it twice a week.

Listen Say it

On the other hand

Used to introduce a different view.

Travel is fun. On the other hand, it's expensive.

Nice — 92% clear pronunciation

Vocab · Say-it card

The rebuilt v8 card: term → meaning → example, with Listen + Say-it buttons (Flame "ready" cue) and a moss done state. Shipped in PR #31.

say-it readydone · mossink-on-flame (A1)

KS MemberNo. 009

@aina_ks

SMK SEAFIELD

Streak

1 day

Season

Day 1/30

RewardsPhase 1 · Foundations

First words

Welcome

Warming up

3-day streak

In rhythm

7-day streak

Profile · Member card

The Electric Blue "KS Member" card with a Sunflower serial pill, streak / season / XP stats, and reward tiles (active in Sunflower).

blue membersunflower serialreward tiles

Kelas Sekejap

Go to

Home →

League →

My SPM Journey →

Rewards →

Profile →

Settings →

App menu · Drawer

Slide-in drawer over a dimmed backdrop, Lucide icons, a mono "Go to" eyebrow, and the active item in a Flame-tint pill with ink outline.

slide-in drawerflame-tint activeLucide nav

03 · Living reference

Brand tokens

Quoted from the real files: app/spm-ui.css (--ks-*) and ks-design-system/tokens.json.

#2557ff

Blue

Loud brand anchor / hero surfaces. White text.

#e64c09

Flame

The action colour · one CTA per view.

⚠ Ink text (A1) — white fails AA

#101014

Ink

Text, outlines, icons, contrast. White text.

#efebe1

Haze

Warm neutral base / default background.

#f0c84b

Sunflower

Highlights & reward moments. Ink text.

#2fa36b

Moss

Progress, growth, support.

⚠ Ink text (A1) — white fails AA

#f49eaf

Pulse

Social, warmth, campaign emphasis. Ink text.

#f68868

Spark

Celebrations, friendly alerts. Ink text.

#ffffff

Paper

Cards, modals, content surfaces. Ink text.

Display · Archivo Black · uppercase · tracking -.075em · leading .82

Speak loud v7

UI · Plus Jakarta Sans · 400–900

Your voice grows every time you speak.

Labels · JetBrains Mono · uppercase · tracking .07em

Part 1 · Interview · +10 XP

Button · shadow-btn 5/5 · press-down

Start lesson →

Tag · rotate(-2deg)

20s prep

Card · border 2px ink · shadow 8/8 · radius-lg 28

Firm ink outline on every surface.

Blob · organic shape

Form language: 2px ink border on every surface · shadows sm 4/4 · button 5/5 · card 8/8 · hover 7/7 (never blurred; soft blur reserved for marketing) · radii sm 14 / md 20 / lg 28 / xl 36 / pill · hover lifts translate(-2px,-2px) and grows the shadow.

Iconography · Lucide

Every UI icon in the product is Lucide (stroke-2, sizes 16 / 20 / 24). Marketing can browse the full set and download any icon as SVG or PNG, straight from the source.

Browse & download at lucide.dev

04 · Marketing

Roly, expression by expression

One mascot, sixteen state-bound expressions. Meanings and usage are quoted from the design system's MASCOT.md (source of truth: mascot.manifest.json).

Meet Roly

KS has one mascot: Roly the Pangolin (a Sunda pangolin). Gentle, careful, patient — the patient one. He encourages without pressure, notices small efforts and names them, never rushes, never scolds. He speaks slowly and says "we", not "you".

The celebration ladder — escalation only means something if the top stays rare

Tier 1 · Celebrating

Fists up

A single correct answer or exercise.

Tier 2 · Jubilant

Confetti jump

Lesson complete, streak milestone.

Tier 3 · Triumphant

Trophy

Level up, achievement, course complete, SPM mock passed.

greeting

Greeting

Warm hello, a wave.

UseOnboarding welcome, first home visit, class-code success.

encouraging

Encouraging

Go on, give it a try.

UseBefore an action — a CTA, retry after a slip, motivation.

studying

Studying

Head down, learning.

UseLesson in progress, SPM practice.

NotAdult Speak Phrases flows — reads too academic.

speaking

Speaking

Mic is live, listening to you.

UseThe mic is hot — the user is talking right now.

NotAnything else. This is the recording state.

thinking

Thinking

Evaluating, mic just closed.

UseAI processing or evaluating, after the user stops speaking.

NotThe mic-hot state — that's speaking.

tip

Tip

Here's a pointer.

UseHints, coaching, Say Better suggestions, first-run tooltips.

cheering

Cheering

Keep going, you've got this.

Use"Keep going" mid-effort — mid-lesson, mid-progress.

NotThe mic-hot state, or pre-action CTAs.

correcting

Correcting

A gentle fix, never a scold.

UseSpeech correction, mistake review — only alongside encouraging copy.

NotFailure or error states — use encouraging.

celebrating · tier 1

Celebrating

Nice one — a small win.

UseA single correct answer or exercise.

NotLesson completion — that's jubilant.

jubilant · tier 2

Jubilant

Confetti jump, lesson done.

UseLesson complete, streak milestone.

NotRoutine answers. Confetti inflation kills confetti.

triumphant · tier 3

Triumphant

Trophy moment, kept rare.

UseLevel up, achievement, course complete, SPM mock passed.

NotAnything routine. If it fires weekly, the ladder's broken.

premium

Premium

The upgrade ask.

UseThe ask — paywall, upsell, trial offer, locked feature.

NotPost-conversion — that's grateful.

grateful

Grateful

Thank you for saying yes.

UseAfter they say yes — thank-you, referral, win-back, feedback.

NotRoutine success, and never to sell. Spend it sparingly.

resting

Resting

Taking a breather.

UseEmpty states, breaks, paused streak.

NotOffline — that's offline.

offline

Offline

Connection's gone.

UseConnection lost, sync failed, generic error. (App pairs it with the Lucide wifi-off icon.)

streakBroken

Streak broken

Sad with you, not at you.

UseStreak broken or lost, streak reminder — always with a recovery CTA.

State-bound

Pick by product state, not by vibe. A new expression only earns a place if a real state needs it.

One per screen

Never two mascot expressions on the same screen.

Keep product calm

Roly shows up at decision and emotional moments, not on every screen. That's how we hold the loud-brand / calm-product line.

Never scold

correcting is a gentle fix, never failure. streakBroken is sad with the learner, not at them — always with a way back.

Ladder discipline

Don't promote a win to a louder tier because it feels nice. The top tier only lands if it's rare.

Props vs particles vs live UI

Props (mic, trophy) are baked in. Particles and real UI (waveforms, wifi-off) are separate layers, never drawn into product art.

Speak loud,look sharp.