This is a living preview of the tokens and components used across the Kelas Sekejap app, extracted from ks-home-minimalist.jsx. Pair this page with design-system.md for engineering-ready specs.
Stack: React + TailwindScope: Home + Talk-with-AvaLast updated: 2026-04-20
Principles
The design voice is warm and encouraging, not gamified. Hero-first density, platform-native feel, serif italic accents for emotional beats.
Warm, not loud
Soft corners (14–28 px), floating mascots, low-contrast shadows. Never neon, never busy.
iOS-native feel
54 px status bar · 82 px tab bar · 0.5 px separators · translucent blur surfaces.
One hero, one CTA
A single clear action per screen. Supporting content lives below, never above.
Color
One brand tint, a neutral iOS-grey family, and an illustration-only accent palette. Never use accent colors as UI chrome.
Brand + system
TINT
--tint
#F97316
PRESSED
--tint-pressed
#EA580C
TINT BG
--tint-bg
rgba(249,115,22,.12)
SUCCESS
--green
#34C759
DANGER
--red
#FF3B30
GROUPED
--bg-grouped
#F2F2F7
SECONDARY
--bg-secondary
#FFFFFF
FILL 3
--fill-tertiary
#E5E5EA
Text (labels)
PRIMARY
--label
#000000
SECONDARY
--label-secondary
rgba(60,60,67,.60)
TERTIARY
--label-tertiary
rgba(60,60,67,.30)
Illustration palette (never UI chrome)
YELLOW
#FCD34D
PINK
#FF79A6
CYAN
#22D3EE
EMERALD
#4ADE80
INDIGO
#6366F1
USER BUBBLE
#DCF8C6
Typography
System sans for UI. Instrument Serif italic for emotional beats — never body copy. Tracking tightens as size grows.
eyebrow
10/1.2 · 700 · +1.4
UP NEXT · 1 OF 4
overline
11/1.2 · 700 · +0.8
GOOD AFTERNOON, BEKAH · 3 TO GO
caption
12/1.3 · 500
Timestamp · 2:31 PM
footnote
13/1.35 · 500
Speak Phrases · 3 min · 10 XP
body
14/1.4 · 400 · -0.16
Quite good! I just had nasi lemak for lunch.
body-lg
15/1.4 · 500 · -0.24
Ordering at a Restaurant
button
17/1.0 · 700 · -0.3
Start lesson
display-sm
18/1.35 · 400 · italic
You'll be ready for lunch in no time.
display
32/1.1 · 500 · italic
cozy
display-lg
34/1.15 · 500 · italic
You made it, Bekah.
display-xl
38/1.05 · 700 · -1.0
Talk about your weekend plans
Spacing
4 px base. Use the scale — don't invent arbitrary values.
space-0.5 · 2px
space-1 · 4px
space-1.5 · 6px
space-2 · 8px
space-2.5 · 10px
space-3 · 12px
space-3.5 · 14px
space-4 · 16px
space-5 · 20px
space-6 · 24px
space-7 · 28px
space-8 · 32px
Radius
Cards are 14 px (iOS grouped default). Heroes and sheets get 28 px. CTAs are fully rounded pills.
4 · xs
8 · sm
14 · md (card)
16 · lg (bubble)
24 · xl
28 · 2xl (hero)
999 · pill
50% · full
Shadow / elevation
Shadows are warm and soft. Primary CTAs get a colored shadow that matches the tint — this is intentional, not decorative.
bubble
card
button
cta (colored)
Motion
Five named keyframes. Everything else is 120–300 ms utility transitions. Honor prefers-reduced-motion.
float4s ease-in-out · mascots
pulse1s · recording dot
fadeUp450 ms · hero reveal
popIn500 ms · celebration
slideUp300 ms · sheet enter
blink3.5s · mascot eyes
Components
Live previews of each component. All interactive pieces render as real buttons with hover / active states.
Button
Pill CTA. Three variants: primary (tint + colored shadow), onTint (white on orange hero), ghost (inline).
variant · size · icon · loading · disabled
Chip / Badge
Small pill for status. Always icon + label. Four semantic variants.
variant · icon · label
⚡ +75 XP✓ Day 27 · 7 streak◉ +8 coins○ Locked
Card · ListRow
iOS grouped card with tappable rows. Rows flip to 50% opacity + strikethrough when checked.
leading · title · meta · trailing · checked
🍽
Ordering at a Restaurant
Speak Phrases · 3 min · 10 XP
💬
Talk about your weekend plans
Guided Talk · 5 min · ◉ 5
☕
Review: Coffee & Tea phrases
Review · 2 min · 4 phrases due
😊
Something that made you smile
Free Talk · 3 min · ◉ 3
StatsRow
Fixed three-up: streak · XP ring · Ava shortcut. The XP ring is a 2-circle SVG with animated stroke-dashoffset.
xpEarned · xpGoal · onOpenAva
7
STREAK
7 days 🔥
45
OF 75 XP
A
Talk with Ava
Hero card
Two variants: UpNext (tint, action-oriented) and AllDone (white, celebratory).
variant · lesson · index · total · onOpenAva
⚡ UP NEXT · 1 OF 4FRI · 17 APR
Ordering at a Restaurant
Speak Phrases · 3 min · ◉ 10
You'll be ready for lunch in no time.
▶ Start lesson
ALL 4 DONEFRI · 17 APR
You made it, Bekah. What's on your mind?
Keep the momentum — talk freely for 2 minutes and we'll find your next step.
⚡ +75 XP✓ Day 27◉ +8
🎙 Talk with Ava
Bubble (chat message)
Three types: text, voice (adds play button + waveform + duration), hint (dashed tint border + "Ava suggests" eyebrow).
from · type · text · translation · duration
Hey Bekah! I'm Ava 👋2:31 PM
How's your day been so far — hari ini macam mana?2:31 PM
Quite good! I just had nasi lemak for lunch.2:32 PM
✨ AVA SUGGESTS
"I got it from the mamak near my office."
Saya beli dekat kedai mamak berhampiran pejabat.
2:33 PM
TabBar
Fixed bottom nav, 82 px tall, translucent white + 20 px backdrop blur. Active item uses --tint.
Contrast warning.--tint (#F97316) on white is ~3.2:1 — fails WCAG AA for small text. Only use tint as text at ≥17 px / 700 ("large text" qualifies at 3:1). For small text use --label or --label-secondary.
Hit targets ≥ 44×44
Applies to every row, button, tab item, avatar-as-navigation.