Internal showcase Say it with confidence · v7 Neo-brutalist

Say it with
confidence.

How the v7 "Say it with confidence" rebrand actually lands across the shipped app: Electric Blue, Flame actions, ink outlines, hard offset shadows, and heavy display type, recreated here from the real design tokens and screen components.

10 screens · recreated from spm-ui.css + ks-design-system/tokens.json · mobile-first product · desktop board
01 · The move

Legacy → v7

From the cream/orange, mascot-led identity to the neo-brutalist "Say it with confidence" 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 — Say it with confidence

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.

Kelas
Sekejap
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

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

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)
Kelas
Sekejap
KS MemberNo. 009

@aina_ks

SMK SEAFIELD
Streak
1 day
Season
Day 1/30
XP
0
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
Say it with confidence 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 · Mascot

Roly, from curled to confident

Kelas Sekejap's mascot is a pangolin on purpose — the creature whose first instinct is to curl up is the exact learner we build for. Below: the story behind the choice, and the sixteen state-bound expressions Roly wears as he unrolls — meanings and usage 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".

Roly is every learner who knows more than they can say — and the story of Kelas Sekejap is the story of unrolling: a little braver, a little louder, one word at a time.

Why a pangolin

The pangolin is the only creature whose defining instinct is the exact thing our learners have to overcome. When a pangolin feels exposed, it curls into a tight, armoured ball and waits for the danger to pass. It is not weak — those scales are real armour, and it is quietly capable — but its first reflex to the unfamiliar is to close.

That is the person we build for: someone who has the English inside them but curls up the moment they have to use it out loud. The knowledge is there. The armour is there. What's missing is the nerve to unroll.

And there's a local truth in it too. The Sunda pangolin is native to Malaysia — shy, nocturnal, rarely seen, and easy to overlook. Choosing it as our animal is a quiet way of saying: this story is from here, for people who have often been taught to keep their voice down.

What the pangolin teaches us about learning

The armour isn't the enemy.

A learner's caution is protective, not a flaw. We never shame the curl. We make it safe to open — a low-stakes room where a wrong word costs nothing. Roly's scales stay on; they just stop being a wall.

You unroll a little at a time.

No one goes from silent to fluent in one leap, and we don't ask them to. This is the whole logic of Say It → Say More → Say Better: one word, then a sentence, then a better sentence. Progress is measured in millimetres of unrolling, and every millimetre counts.

Practice happens in the dark, in private.

Pangolins are nocturnal — they do their moving when no one's watching. That's the app: the safe, unobserved place to fumble, repeat, and try again before the real conversation. You get brave in private so you can be confident in public.

Listening was never the problem.

Roly already understood the world. Most Malaysian learners aren't starting from zero — they've absorbed English for years. The gap is the leap from comprehension to voice. We're not filling an empty head; we're helping a full one speak.

Being rare doesn't mean being small.

The pangolin is overlooked, underestimated, quietly remarkable. So is the learner who's been told their English "isn't good enough." Roly's growth is proof that the quiet ones have plenty to say — the moment they decide to unroll.

The celebration ladder — escalation only means something if the top stays rare
Roly celebrating, fists up
Tier 1 · Celebrating

Fists up

A single correct answer or exercise.

Roly jubilant, confetti jump
Tier 2 · Jubilant

Confetti jump

Lesson complete, streak milestone.

Roly triumphant, holding a trophy
Tier 3 · Triumphant

Trophy

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

The sixteen expressions — one face per product moment
Grab the assets

Every Roly expression as a transparent PNG — tap ↓ PNG on any card for a single pose, or take the whole set. Sized for web & social (~440px); ask design for print-res masters.

↓ Download all · ZIP
Roly greeting
greeting

Greeting

Warm hello, a wave.
UseOnboarding welcome, first home visit, class-code success.
Roly encouraging
encouraging

Encouraging

Go on, give it a try.
UseBefore an action — a CTA, retry after a slip, motivation.
Roly studying
studying

Studying

Head down, learning.
UseLesson in progress, SPM practice.
NotAdult Speak Phrases flows — reads too academic.
Roly speaking, holding a mic
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.
Roly thinking
thinking

Thinking

Evaluating, mic just closed.
UseAI processing or evaluating, after the user stops speaking.
NotThe mic-hot state — that's speaking.
Roly giving a tip
tip

Tip

Here's a pointer.
UseHints, coaching, Say Better suggestions, first-run tooltips.
Roly cheering
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.
Roly correcting gently
correcting

Correcting

A gentle fix, never a scold.
UseSpeech correction, mistake review — only alongside encouraging copy.
NotFailure or error states — use encouraging.
Roly celebrating
celebrating · tier 1

Celebrating

Nice one — a small win.
UseA single correct answer or exercise.
NotLesson completion — that's jubilant.
Roly jubilant
jubilant · tier 2

Jubilant

Confetti jump, lesson done.
UseLesson complete, streak milestone.
NotRoutine answers. Confetti inflation kills confetti.
Roly triumphant
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.
Roly presenting premium
premium

Premium

The upgrade ask.
UseThe ask — paywall, upsell, trial offer, locked feature.
NotPost-conversion — that's grateful.
Roly 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.
Roly resting
resting

Resting

Taking a breather.
UseEmpty states, breaks, paused streak.
NotOffline — that's offline.
Roly offline, worried
offline

Offline

Connection's gone.
UseConnection lost, sync failed, generic error. (App pairs it with the Lucide wifi-off icon.)
Roly, streak broken
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.