Brand
Kolam is the dot-grid line drawn at thresholds across South and West India every morning, and the rangoli every school draws on 15 August. One continuous line woven round a grid of dots: a rule anyone can follow, a result no two people repeat.
One rule, a different crest for every school
Each crest is generated from the school code at the moment the owner creates the school. Lay a 5 × 5 grid of dots; run one line diagonally between them, turning where the code places a turn; repeat each turn four ways round the centre so the line always comes home. The school chooses its colour; nothing else in the interface uses it.
What we refused
- Navy, orange buttons, device mockupsThe category default: Entab, Fedena, Edunext, MyClassboard.
- Cream, orange and an italic serifEducation's second reflex, where Skolaro already lives.
- Blackboard green and chalkThe obvious anti-reference. Our drench is peacock, not slate.
- Purple claymorphism, Baloo and Comic NeueWhat the design database proposed for "education".
Daftar: in Marathi and Gujarati the school bag, and across India the records office. A working name until the client confirms her own; the crest rule works for any name.
Colour
Restrained in the product, drenched on the landing. One hue, peacock 210, drives every neutral. Contrast figures below are measured live from the tokens in this file, against the light ground.
Ground and ink
Peacock, turmeric, drench
States only
School colours: crests only
Chart ramp
Charts use one peacock ramp. Turmeric marks the single series that matters; status colours never decorate a chart.
Status vocabulary
One set of pills for the whole product. Every state pairs a colour with an icon and a word, so nothing depends on colour alone. Offline is grey and calm: a tablet without signal is working normally.
Typography
Anek Latin, drawn by Ek Type in Mumbai, for names and headings; its width axis lets a long school name sit on one line. Lexend for everything people read, because it was designed for reading fluency and ten-year-olds sit exams on this tablet.
Marketing scale (fluid)
displayNever waits for the internet.h2Every school wears its own mark.h3Tick the class in.leadAttendance, lesson logs, fee receipts and exams are saved on the tablet and sync when the signal comes back.Product scale (fixed)
28 · titleVII-B attendance18 · sectionFees due this week15 · bodySaved on the tablet. It goes home when the signal does.13 · metaTAB-03 · Vaishali Kulkarni · 08:12figures₹1,25,000 · 15/10/2026 · 0412Anek's width axis: one name, any space
Drag to change the width. In the hub's sidebar and on crests, long school names condense instead of truncating.
Space, shape and depth
Rounded like a drawn line, never pillowy. Hairlines tinted to the hue, one soft step of elevation, touch-first heights because the tablet is held in one hand.
Spacing, 4px base
Three radii, never a fourth
Elevation: hairline plus one step
Density
- Control height
- 44px (34 small, 52 large)
- Table row
- 52px, hairline between rows, no cell grid
- Card padding
- 24px
- Headings
- Anek 600, 106% wide, sentence case
Controls
Every variant in every state. Loading never spins: three dots land in turn, the same pulli the crest is drawn on.
Buttons
Fields
Choices
Toggles and segments
Surfaces and data
Tables carry the hub. A hairline between rows, figures in tabular numerals, a bulk bar that appears when you select, and sorting on every column that matters.
| Admission no. | APAAR | Status |
|---|
Tabs, crumbs, pager
Rows and key values
VII-B- UDISE+
- 27341100512
- Board
- Maharashtra SSC
- Session
- 2026-27
Layers
Made for Daftar
The components no template has. Each one works here: generate a crest, tick a class in, lock a tablet, cut a receipt, answer a question.
Crest generator
Owner · create schoolCrest sizes and the seal
32 in table rows, 40 in the tablet app bar, 48 in the hub sidebar, 96 on empty states, 240 on the landing. Below 48px the crest switches to its 3 × 3 form, drawn from the same code, so it stays legible. A locked tablet shows its crest sealed by a ring.
Class dot grid
Each learner is a dot. Saving draws the class kolam round them; offline it stays as grey chalk dots until the hub has it.
Sync status
Seven days as seven dots
Command journey
Lock and wipe reach a tablet at its next check-in. The console shows each step and who issued it.
Period strip
${'book'}Lesson log due: P2Exam terminal
${'timer'}18:42 leftQ7. Which of these fractions is the largest?
Feedback and states
The unhappy paths are designed, not left to chance. Errors say what happened and how to fix it; empty screens say what fills them.
Loading
Space is reserved so nothing jumps when rows arrive.
Overflow
Long names condense on Anek's width axis first, then truncate with the full name in the title and on the detail page.
App shells
Three surfaces, three shapes of navigation: a sidebar for the deep web hub, a top bar for the owner's handful of destinations, and Android's navigation rail on the classroom tablet.
Web hub: principal, admin, teacher
Owner console
Classroom tablet, 1280 × 800
Iconography
One family drawn for Daftar on a 24px grid, 1.75 stroke, rounded ends to match the kolam line. No emoji, no second set.
What Daftar never does
Written down so every screen is checked against it.