Sunny Test design system

Playful outside the exam, calm inside it. Every colour, size and edge below comes from a token; components are the same ones the exam and teacher screens use.

Colour

Components use semantic tokens. Palette tokens exist so the semantics have something to point at. Nothing is red.

  • surface-celebratePage ground outside the exam
  • surface-examPage ground while a test runs
  • surface-teacherTeacher page ground
  • surface-cardCards, options, bars
  • surface-questionThe one warm question card
  • inkAll text and icons
  • ink-mutedSecondary text
  • action-primaryThe one main button
  • action-finishFinish button
  • selectedChosen answer, placed tile
  • accentAnswered dots, tile borders
  • progressProgress and timer warning
  • successCorrect and Saved icons
  • success-softCorrect cell fill
  • attentionNot yet marks (never red)
  • attention-softLast-5-minutes timer fill
  • sky-50
  • sky-100
  • sky-300
  • sky-400
  • sky-700
  • sky-900
  • sun-100
  • sun-400
  • sun-500
  • sun-700
  • tangerine-50
  • tangerine-100
  • tangerine-400
  • tangerine-600
  • tangerine-800
  • mint-100
  • mint-200
  • mint-300
  • cream-100
  • cream-300
  • leaf-100
  • leaf-600
  • leaf-800
  • navy-900
  • navy-600
  • slate-50
  • slate-100
  • slate-200
  • white

Type

Baloo 2 for headings and numbers, Nunito for everything a child reads. Children never read below 16px.

  • display-xlGreat job, Bảo!
  • display-lClass leaderboard
  • titleEnd of Course I Revision – Test 1
  • headingQuestion 6
  • numeral8.0
  • questionLisa has ____ hair and wears ____ because she can’t see well.
  • optionwavy – glasses
  • readingWhen you have a cold, you often sneeze. Why?
  • bodyThe clock starts when you press Start.
  • label35 questions
  • captionPart 2 · Vocabulary

Space, shape and edges

A 4px spacing scale. Rounded everywhere. Elevation is a solid edge under things a child can press; flat things are not pressable.

Spacing

  • space-1
  • space-2
  • space-3
  • space-4
  • space-5
  • space-6
  • space-8
  • space-12

Radius

  • sm
  • md
  • field
  • lg
  • panel
  • xl
  • sheet
  • pill

Edges

  • edge-primary
  • edge-finish
  • edge-outline
  • edge-option
  • edge-tile
  • edge-question
  • edge-card
  • edge-pressed

Exam

Calm mode: mint ground, one cream question card, white options, sun for the chosen answer. Try it: choose, flag, collapse the timer, open the map.

Part 2 · Vocabulary7 of 35 answered
Question 6
Lisa has hair and wears because she can’t see well.
Tip: use the arrow keys to change your answer

Word tiles

Question 32 · tap a word to move it

Reading gaps

Tap a gap to choose its word

His mum is a nurse, so she wanted to his temperature first. “If you have a fever, you feel dizzy,” she said. “You should some medicine twice a day.”

Timer pill

Calm, then warning from 5:00, final in the last minute

25:14
04:50
00:48

Phonics and map dots

tissuesneezemouth

Options on the result page

Only after the test ends

Review mode

Top bar with a back button

Part 4 · ReadingQuestion 26 of 35
Correct

Actions and feedback

Buttons

One primary per screen

Chips

DefaultNot started45 minutesCome back laterDue todayFinishedYou

Banners

role=status, announced once

The clock starts when you press Start.
About 5 minutes left. You’re doing great!
No internet. Keep going, we’ll save when you’re back.
Saved

Text fields

2 to 40 letters
Let’s check this one: type your class, like 4A2.

Results

Celebrate mode: mint-200 ground, full palette, Sunny cheering. First name and class only.

Score

Leaderboard

So far

YouBảo · 4A2
8.0
Rank 2
Minh · 4A2
9.5
Rank 1
Lan · 4A1
7.75
Rank 3
  1. 4An · 4A17.5
  2. =5Huy · 4A27.25
  3. =5Vy · 4A17.25

Teacher

Same tokens, less colour, denser type.

Sunny Test
Ms. Linh

Setup and tabs

  1. Done: Check questions
  2. 2Settings
  3. 3Invite students
  4. 4Send

Settings

If a student starts late
Invited30
Finished12 of 30
Average7.25
Median time31 min
Students
NameClassStatusScoreTime used
Nguyễn Gia Bảo
bao.parent@example.com		4A2Finished8.031 min
Trần Minh
minh@example.com		4A2In progress12 min
Lê Thu Lan
lan@example.com		4A1Not started

Email

A 600px column. No tracking pixels, no remote fonts in the sent version.

From: Ms. Linh via Sunny Test
Subject: Your English test is ready
Sunny Test

Your test is ready, Bảo!

Ms. Linh sent you End of Course I Revision – Test 1.

Time
45 minutes
Open until
Fri 14 Nov, 20:00 (GMT+7)
Tries
One try only
Start the test

Phụ huynh: đây là bài kiểm tra tiếng Anh của con. Con chỉ được làm một lần.

You got this email because your teacher invited you.