A proposed brand, specified to the same depth as the current one so the two can be read side by side. Same structure, same level of detail, live specimens, one copy button. This is version 0.1 of something unbuilt, not a decision.
The principle
The product is called Lightkeepers and the mark is a lantern. This system takes that literally. The screen is dark, and the thing you should do next is the brightest thing on it. Hierarchy is carried by light rather than by size or saturation, which means the interface can stay quiet and still be obvious.
Everything on this page is rendered live in the real typefaces. Hover and press the buttons.
Two, both already vendored in the repo. Fraunces carries display, Nunito carries everything else. Fraunces runs at SOFT 80 and WONK 1, which is what gives it warmth without becoming a children's face; it stays serious enough for a thirteen year old.
Eyebrow
Body copy on night sits at just over seventeen pixels with line height 1.7, a little looser than the current system, because light text on a dark ground needs more air to stay comfortable.
Long-form reading moves to a warm cream surface at 1.15rem and line height 1.75. Cream rather than white is deliberate: it is one of the few things the legibility research actually supports, alongside spacing and size. Anything past roughly forty words of continuous text belongs here, not on night.
Three brand groups, then two reserved sets that carry meaning and are never used decoratively.
Dashboards, quest map, navigation, celebration. Everything that is not long-form reading.
Lesson bodies, documents, forms. Anything with more than about forty words.
The single focal accent. It marks what to do next and nothing else.
Five hues that mean something. They never appear as decoration, never as a brand colour, and never as a ground for body text.
Six hues, borrowed as an idea from how Yoto codes content. A subject colour is a spine, a chip, a rule or an icon. It never becomes a large fill behind text, and it is never amber, because amber belongs to the lantern.
The main criticism of restrained palettes is that they fail on contrast. These ratios are computed from the token values above, not estimated.
| Pairing | Ratio | WCAG AA body (4.5:1) |
|---|---|---|
| Body text on night | 14.8:1 | Pass |
| Secondary text on night | 8.7:1 | Pass |
| Text on a night card | 13.1:1 | Pass |
| Body text on paper | 15.3:1 | Pass |
| Secondary text on paper | 5.9:1 | Pass |
| Night text on the flame button | 10.3:1 | Pass |
| Flame as text on night | 10.3:1 | Pass |
| Ember as a link on paper | 5.7:1 | Pass |
20px radius. On night a card is a lift in tone with a hairline border and no shadow, because shadows do not read on dark. On paper it keeps a whisper of shadow.
Week 4 of 12. Two lessons left this week.
Week 4 of 12. Finished for the week.
Week 3 of 12. One lesson behind, no rush.
Subject colour as a spine, not a fill. Note the English card: behind is stated calmly and never in red.
This section exists because of who the audience is, and it is as binding as the colour rules.
| Rule | Value |
|---|---|
| Transition duration | 180ms or less, ease-out |
| Looping animation | None, anywhere |
| Autoplay | None. Nothing moves before a user acts |
| Parallax | Not permitted |
| Celebration | A single 600ms fade and settle, once, then it stops |
| prefers-reduced-motion | Removes all non-essential movement; celebration becomes static |
| Sound | Off by default, opt-in only |
--lk-flame as a fill, and it is the thing to do next. Everything else is text, border or state. If two things glow, neither does.prefers-reduced-motion removes all non-essential movement, and the celebration degrades to a static state.Against the current system, side by side.
| Now | The Lantern | |
|---|---|---|
| Ground | White, with saturated blocks | Night for chrome, warm paper for reading |
| Accent | Sun #FFB703 on buttons and chips throughout | Flame #FFB454, exactly one per screen |
| Display type | Nunito doing every job | Fraunces for display, Nunito for body and UI |
| Button | Hard bottom edge, plastic press | Lit surface, soft halo, 1px settle |
| Child treatment | 1.5rem type, 56px min height | 1.25rem type, 56px min target |
| Subject colour | Not systematised | Six coded hues, never amber, never a fill |
| State colour | Shares the brand palette | Five reserved hues that do nothing else |
| Motion | Confetti on completion | Reduced by default, static fallback |
| Progress | XP, streak, badges, quest map | Same mechanics, framed as distance not score |
| Parent vs child | Carried mostly by size | Carried by surface, density and tone |
Ready to paste into another platform.
LIGHTKEEPERS: THE LANTERN
A proposed brand system. Not built. Not validated. Version 0.1.
=== THE IDEA ===
A warm light held up in a dark place. The product is called Lightkeepers and the mark is a
lantern; this system takes that literally. The screen is dark, and the thing you should do next
is the brightest thing on it. Hierarchy is carried by light rather than by size or saturation.
=== WHY IT IS BUILT THIS WAY ===
The audience is largely reactive: most families were pushed into homeschooling rather than drawn
to it, and in Australian data roughly 28-30% of home-ed families cite autism or ADHD. Saturated
colour, constant motion and competitive mechanics are sensory and emotional load aimed at the
cohort least able to carry it. This system treats restraint as an accessibility requirement.
=== TYPEFACES ===
Display: Fraunces (variable: opsz, wght, SOFT, WONK). Headlines and the wordmark only.
Body and UI: Nunito Variable, weight axis 200-1000. Everything else.
No third face. Both are already vendored in the repo.
Fraunces is used at SOFT 60-100 and WONK 1 for warmth. It carries character at display sizes
and stays serious for a thirteen year old, which a rounded display face does not.
=== COLOUR: NIGHT (chrome) ===
--lk-night #0E1626 Page ground
--lk-dusk #16213A Raised surface, cards on night
--lk-dusk-2 #1F2C49 Hover and elevated state
--lk-on-night #EFE8DA Primary text on night. Warm, never pure white
--lk-on-night-soft #AAB4C6 Secondary text on night
=== COLOUR: PAPER (reading) ===
--lk-paper #FBF6EC Reading ground. Warm cream, never pure white
--lk-paper-2 #F2EADC Inset panels, quotes
--lk-ink #1A1F2B Body text on paper
--lk-ink-soft #555F76 Secondary text on paper
=== COLOUR: LANTERN (the light) ===
--lk-flame #FFB454 The primary action. Exactly one per screen
--lk-flame-deep #D9862B Pressed state and edges ONLY. Never text (2.6:1 on paper)
--lk-glow #FFD9A0 Halo, highlight, lit edges
--lk-ember #8C5516 Amber as TEXT on paper (links, eyebrows). See contrast note
=== COLOUR: STATE (reserved, never decorative) ===
--lk-correct #3FBF87 Right, complete, on track
--lk-revisit #F2845C Worth another look. Never framed as failure
--lk-locked #6B7590 Not reached yet
--lk-celebrate #FFD447 Milestone reached
--lk-info #5BA8D9 Neutral information, help
=== COLOUR: SUBJECT CODING (a spine, a chip or a rule; never a fill) ===
English #E8836F
Maths #6FA8DC
Science #63BF95
Humanities #C58FD8
The Arts #E9779F
Health & PE #7FC5C8
=== CONTRAST (measured, not assumed) ===
Body text on night 14.8:1
Secondary text on night 8.7:1
Text on a night card 13.1:1
Body text on paper 15.3:1
Secondary text on paper 5.9:1
Night text on flame button 10.3:1
Flame as text on night 10.3:1
Ember link on paper 5.7:1
All pairings above meet WCAG AA for body text (4.5:1) or better.
IMPORTANT: --lk-flame-deep is a NON-TEXT token. It is for pressed states and edges only.
It measures 2.6:1 on paper, so it must never carry text. Amber text on paper uses --lk-ember.
=== TYPE SCALE ===
h1 Fraunces clamp(2.25rem, 5vw, 3.5rem) weight 600, line-height 1.1, SOFT 80, WONK 1
h2 Fraunces clamp(1.6rem, 3.2vw, 2.25rem) weight 600, line-height 1.2
h3 Nunito 1.15rem weight 800, letter-spacing -0.01em
body Nunito 1.0625rem / 1.7 weight 500, max-width 66ch
reading Nunito 1.15rem / 1.75 weight 500, max-width 62ch, on paper only
eyebrow Nunito 0.8125rem weight 800, uppercase, letter-spacing 0.1em
small Nunito 0.875rem / 1.5 weight 600
Display face is for h1 and h2 only. Everything smaller is Nunito.
=== BUTTONS ===
No hard bottom edge. The primary button is a lit surface, not a plastic key.
Primary background --lk-flame, text --lk-night, radius 14px, padding 16px 32px, weight 800
halo: 0 0 0 1px rgba(255,180,84,.30), 0 10px 30px rgba(255,180,84,.22)
hover: halo widens. active: translateY(1px), halo tightens to 0 4px 14px
Secondary transparent, 1.5px border rgba(239,232,218,.30), text --lk-on-night
hover: border to rgba(239,232,218,.55)
On paper background --lk-flame, text --lk-night, no halo (halo only reads on night)
Ghost text --lk-ember, no fill, underline on hover
Child same primary, min-height 56px, font-size 1.25rem, padding 18px 34px, radius 16px
Minimum tap target 44px everywhere, 56px on any child surface.
=== SHAPE AND SPACE ===
Radius: cards 20px, buttons 14px, chips 999px, inset panels 12px.
Spacing scale (8pt): 4, 8, 12, 16, 24, 32, 48, 64, 96.
Container: min(100% - 40px, 1080px).
Section rhythm: 88px desktop, 56px at 768px and below.
Card on night: background --lk-dusk, 1px border rgba(239,232,218,.08), no shadow.
Card on paper: background --lk-paper, 1px border rgba(26,31,43,.10), shadow 0 1px 2px rgba(26,31,43,.04).
=== MOTION ===
All transitions 180ms or less, ease-out.
Nothing loops. Nothing autoplays. No parallax.
prefers-reduced-motion: reduce removes all non-essential movement; the celebration becomes a
static state with no scale or fade.
Celebration is a single 600ms fade and settle, once, then it stops.
=== CONTENT RULES ===
Praise names the specific thing the child did. Generic approval is banned outright.
Behind is never framed as failure; the tone for behind is calm and forward-looking.
Never red for a child's own work.
Nothing about money, plans or tiers appears on a child surface.
=== TEN LAWS ===
1. One light per screen. Exactly one flame-filled element, and it is the next action.
2. Two surfaces, never nested. Night is chrome, paper is reading. Long text always on paper.
3. Amber belongs to the lantern. No subject or state may use the flame hues.
4. State colours are reserved for state, never decorative, never a text ground.
5. Subject colour codes, it does not fill. Spine, chip, rule or icon only.
6. Illustration is silhouette and light. No mascot in persistent UI.
7. Motion is small, fast and interruptible. Reduced motion is fully honoured.
8. Praise names the work.
9. Progress is distance, not score. No leaderboards, no peer comparison, no streak penalty.
10. Nothing commercial renders on a child surface.
=== HARD BANS ===
A mascot living permanently in the interface.
Leaderboards or any peer comparison.
Streak-loss warnings, guilt copy, countdown pressure.
Looping confetti or autoplaying celebration.
Pure black or pure white as a text ground.
Body text over illustration or photography.
A third typeface.
A subject colour as a large fill behind text.
Gradients as decoration.
More than one flame-filled element on a screen.
=== KNOWN OPEN RISKS ===
1. No proven exemplar exists for a restrained aesthetic with 10-14 year olds. This system has not
been tested on the older half of the age range.
2. Dark chrome plus light reading means two surfaces to maintain rather than one.
3. The system is unbuilt. Every value here is specified, none is validated with a real user.
4. Fraunces previously appeared in an older Lightkeepers brand that was explicitly retired. Reusing
it is a deliberate choice, not an oversight, but it needs to be a conscious decision.