E E-turo
← Back to the gallery View the Markdown source

"Whole and Parts" — the Key Stage 1 visual system

The design system for Grade 1 Mathematics, as DESIGN-PHILOSOPHY.md — "Ten Times" — is for Grade 4.

Same conviction: the mathematics is the organising principle of the design, not something the design decorates. Different mathematics, so a different system.

Why Ten Times does not transfer

Ten Times is built on one idea: each place is worth ten times the one to its right, so colour steps along the spectrum in the direction the places grow, and value bars are drawn to true linear scale so the lopsidedness of 47 205 becomes visible.

A six-year-old is not doing place value. They are doing something more basic and, arguably, more profound: discovering that a quantity can be taken apart and put back together, and it is still the same quantity. Five is five, whether you see it as 4 and 1, 3 and 2, or 5 and 0.

That is the idea the Grade 1 system has to carry.

The movement

The whole stays the same while the parts change.

Everything in the Grade 1 artifacts is built to make that one sentence visible. A bar of fixed length splits at different points. Two groups of counters slide together and the total does not move. A ten-frame fills from different directions and still holds ten.

If a learner leaves the lesson able to say "it is still five" without counting again, the design worked.

The single hardest thing to get right

The whole must be physically the same size every time, in every artifact, on every slide. The moment a "whole" bar is drawn a few pixels shorter because the layout was tight, the argument collapses — the learner's eye is the proof, and the eye is not fooled.

This is the Grade 1 equivalent of Ten Times' rule that value bars are never normalised. Both say: do not lie about quantity to make the layout comfortable.

Who this is for

Six- and seven-year-olds, in a class of forty-five, in front of one shared screen.

Constraint Consequence for the design
They cannot be assumed to read. The curriculum guide says so itself — problems are "given orally or in pictures" No instruction is carried by text. Pictures, numerals, symbols, and the teacher's voice only
One screen for the room Everything is sized to be read from the back. One idea on screen at a time
Numerals arrive before words A digit is safe. A sentence is not. Numerals do double duty as the only "text" a learner reliably decodes
Motor control is still developing Touch targets far larger than the 44 px adult minimum — 88 px and up
Attention is short A round is three or four questions, not sixteen
The mother tongue is the medium Every word a teacher reads aloud is Filipino. No English anywhere in the learner-facing set

Not babyish — but not Grade 4 either

Grade 4's rule was "big kids, not babies" — nine-year-olds read cartoon mascots as an insult. Six-year-olds do not. Warmth is appropriate here in a way it is not three years later.

But warmth is not the same as clutter. A six-year-old is more distractible than a nine-year-old, not less, so decoration competes with the mathematics more dangerously. The rule becomes: friendly shapes and generous colour, and nothing on the screen that is not doing a job.

Colour as the part–whole system

Three roles, and only three. A learner who has met these three colours once should be able to read any diagram in the set without being told again.

Role Filipino Colour Meaning
Whole Buo Deep teal #0f6466 on #d8f0ee The quantity being taken apart. Never changes size.
First part Unang bahagi Warm orange #b4520b on #ffe6d2 One of the two pieces
Second part Ikalawang bahagi Indigo #3b3ba8 on #e6e6fb The other piece

Rules:

  1. The two part colours always meet. They are never separated by a gap or a border thicker than a hairline, because the parts are touching — that is what makes them a whole.
  2. The whole colour never appears inside a part, and vice versa. Colour identity is the vocabulary; contaminating it destroys it.
  3. Orange is always the left/first part, indigo always the right/second. Position and colour agree, so the pair is legible in black and white and to a colour-blind learner.
  4. Every hue clears 4.5:1 against its own tint and against white.

Semantic green means "tama" and semantic red is reserved for "subukan muli" — neither is ever used as a content colour.

Showing quantity truthfully

Carried directly from Ten Times, because it is the part of that system that generalises.

The three representations, always in the same order

Concrete → pictorial → abstract, left to right or top to bottom, never shuffled:

   ● ● ● ● ●            counters          what it is
   ┌──┬──┬──┬──┬──┐     ten-frame         how it is arranged
   5 = 3 + 2            number sentence   how it is written

A learner who loses the thread can always look one step left and find the version they still understand. Reordering these breaks the ladder.

Scale, weight, and rhythm

Element Grade 4 Grade 1
Slide body text 24 px minimum 40 px minimum — and there is very little of it
Numerals on slides Large Enormous — the numeral is often the entire slide
Touch targets 44 px 88 px
Ideas per slide One or two One
Questions per round 5–6 3–4

Numerals are set in a heavy weight and given room. When a slide's job is "this is five", the 5 should be the size of a child's head and nothing else should be on the screen.

Tone

The Filipino in these artifacts is the Filipino a teacher actually speaks to a six-year-old: short sentences, direct address, no curriculum register. "Ilan ang pula?" not "Tukuyin ang bilang ng mga pulang bilog."

Feedback never says only "mali". It says what the learner did and what is true — the Grade 4 principle that feedback names the misconception, translated for an age that cannot read the naming. At Grade 1 this mostly means showing rather than telling: the counters rearrange themselves into the correct grouping and the learner sees why.

No failure state, no lives, no timer, no leaderboard. A six-year-old who feels they have lost at mathematics has learned something, and it is not mathematics.

Craft standard