Kelas SekejapSPEAK LOUD · V7
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 · icons are Lucide, stroke-2, sizes 16/20/24.