Internal showcase Speak Loud · v7 Neo-brutalist

Speak loud,
look sharp.

How the v7 "Speak Loud" 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 "Speak Loud" system. Mascots Pip, Roly and Tia are retired as brand leads (Roly still appears in-product as the tutor).

Legacy — cream / orange

Warm cream base #FAF3E8
Soft orange #F97316
Plus Jakarta Sans + Instrument Serif
Soft shadows, rounded, gentle
Mascot-led identity (Pip · Roly · Tia)

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.

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
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". (Pip and Tia are retired.)

⚠ Marketing tier only

3D art — external use only

These rendered PNGs (particles and props baked in) are for social, decks, campaigns and the app store. Never drop them into the product: a 3D mascot on a v7 neo-brutalist card reads as a sticker from another app. In-product, the app uses flat neo-brutalist SVG art — one per screen, at decision and emotional moments only.

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.

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.