First Splash
Before KG
Ages 2–3
Before nursery even starts. Pointing, naming, listening, and the very first crayon marks that are not scribbles.
Kogia Kids
Free printable activities for KG2 and under. You print them. You teach them. It costs nothing.
This page is the design system, not the site. Everything the real site will be built from is here: the mark, the colour engine, the parts and the page shapes. Nothing below is a mock-up, these are the actual components.
Download freeBrowse the reef
01
One mark, five colours
There is no mascot. Every surface that used to carry an illustrated whale now carries the company mark, tinted to the module it belongs to. The mark is a single inline SVG filled with currentColor, so the colour is the navigation and there is never a second copy of the file. This replaced 15MB of PNG characters, which is both faster on a phone and consistent with the loudest promise on the site: ink-light.
Arabic
#7C6BF5
Stories
#FF5D8F
Math
#FFB020
Science
#12C2B0
Tasks
#FF7A3D
02
Depth is the navigation
Kogia is a deep diver, so the site dives. A parent picks a depth instead of an age dropdown, and a child gets a place instead of a filter, the same click does both jobs. This is the one structural idea the whole product hangs on.
Sunlight Shallows
KG1
Ages 3–4
First year of kindergarten. Sounds start attaching to letters, quantities start attaching to numbers, and they want to do it themselves.
Coral Garden
KG2
Ages 4–5
The year before Grade 1. Writing their name, reading short words, adding small numbers, and explaining why they think so.
03
Why cartoon colour looks like cartoon colour
A photograph shades a colour by darkening it. Animation does not, it rotates the hue toward blue-violet for shadow and toward gold for light, and keeps the chroma high. That warm-light / cool-shadow split is what your eye reads as drawn rather than photographed. It is a function in lib/colour.ts, so every surface in this product shades identically and nothing is eyeballed.
The engine, on one hue
light ×1
#80eaf2
base
#3FC1F0
shade ×1
#085cdb
shade ×1.7
#031fa9
outline
#203d5a
Notice the shadow is not the base with the lights off, it has swung toward violet and its saturation went up. Desaturating a shadow is the single most common way to make flat art look muddy, and muddy is the opposite of what we are selling.
Every category, shaded by the same function
Arabic
Letter Kelp
#7C6BF5 · text 12.38:1 ✓ AA
Stories
The Story Reef
#FF5D8F · text 9.03:1 ✓ AA
Math
Number Rocks
#FFB020 · text 7.11:1 ✓ AA
Science
The Bubble Lab
#12C2B0 · text 5.45:1 ✓ AA
Tasks
The Ink Studio
#FF7A3D · text 9.05:1 ✓ AA
04
The parts
One button shape, one card shape, one shadow. The shadow is a hard 4px offset with no blur: flat art wants a flat shadow, and the moment you add a soft gaussian the whole thing stops looking drawn and starts looking like a web app again.
Buttons, press one, they travel 2px
Badges
PDFA4 + LetterFree8 pagesAges 4–6
Loading, the ink cloud, doing its actual job
Making your PDF…
Two pages, A4, ready to print.
05
What a resource card looks like
The whole product is one action: find a sheet, print it. So the card shows only what a parent decides with, what it is, what age, how many pages, and a button. No stars, no counts, no account.
Arabic
Letter Kelp pack 1
Listening, letters, sounds, words, sentences. The full language path, not just tracing.
PDF4 pagesAges 2–3
Stories
The Story Reef pack 2
Little printable books with a picture walk, vocabulary and comprehension.
PDF6 pagesAges 3–4
Math
Number Rocks pack 3
Concrete first, then drawing, then the equation. Never columns with no meaning.
PDF8 pagesAges 4–5
Science
The Bubble Lab pack 4
Ask, predict, observe, explain. Experiments where the child actually learns something.
PDF10 pagesAges 2–3
Tasks
The Ink Studio pack 5
Projects and printable packs with a clear goal, a model and a rubric.
PDF12 pagesAges 3–4