Design system v0.1 working name “Shule”

Ivory & Ink.

Most school systems look like the same dashboard template in a different colour: white cards, a navy sidebar, a blue button. This one is built differently. It sits on warm paper instead of white, uses an editorial serif for things that matter, and moves around the school with a dock instead of a sidebar. The colours come from where our schools are: the Nile, red murram roads, jacaranda trees, the morning sun.

Colour

Paper and ink do most of the work. Nile is the brand. Marigold is used sparingly, for focus and for “look here”. Click any swatch to copy its code.

Roughly how much of each a screen uses
Paper 60 Card 20 Ink 12 Nile 6 2

The school's colour

Each school chooses one colour (Chapter 7.2.6). It replaces Nile on the crest, buttons, links and highlights. Everything else stays the same, so every school looks like itself and the system still feels like one product. Try one, and every page follows.

Type

Three families, each with one job. All are free and open-source. Before launch we will host them ourselves so they also load offline.

Fraunces · display
headlines, big numbers
Good morning, Grace.
Fraunces · stat
94.2%   182.4M
Geist · interface
everything you read and tap
Record a payment
Everyone starts present. Tap a name once for absent, again for late.
Geist Mono · figures
money, dates, IDs
UGX 1,250,000 · 21/10/2026 · JHS/2025/0187 · RC-2026-04412

Components

A small set, used the same way on every page, so someone who learns one screen already knows the next.

Buttons
Hold to confirm: for anything that moves money
Status
Present Absent Late Accent Neutral Outline
Choosing
Inputs
Numbers
Attendance today
94.2%
1.3 vs last week

Rules we keep

From Chapter 9 of the blueprint, turned into design rules every screen follows.

Start with the usual answer.

Everyone is marked present; the teacher only taps the exceptions. Salaries come from the contract; the payroll officer checks what changed.

Show what will happen before it happens.

Before a fee change goes through: how many invoices, how much money, and what stays the same. Then you hold to confirm.

Offline is visible, never a surprise.

The sync pill always says whether your work is on this phone or on the server.

Pick, don't type.

Classes, subjects and fee items are always chosen from a list, never typed in, so reports group correctly.

Fast enough to feel instant.

No framework, no heavy charts. Movement takes under a fifth of a second, and pages change in place instead of flashing white.

Light on data.

Text first, few images. A guardian on a mobile data bundle should be able to open it without worrying about the cost.