saki brand system
A playful neo-brutalist kit for immersive learning: hard ink borders, tactile depth, joyful VARK colour, and confident classroom-ready product surfaces.
Logo and blossom
The four-petal mark carries Visual, Aural, Read/write and Kinesthetic modes while the lowercase wordmark keeps the product warm.
Primary lockup for navigation, marketing and account moments.
Mono ink mark for compact UI and single-colour applications.
Adaptive VARK petals show learning preference without changing the logo.
Theme
Light, dark and system all ship as first-class: the toggle persists instantly and the tokens below stay legible in either mode.
Switch the whole product
light tokens
dark tokens
Colour tokens
Accents stay bright in dark theme; large tinted surfaces use semantic dark alternatives for legibility.
Type scale
Bricolage Grotesque leads with confident headings. Nunito keeps learning content friendly and readable.
Step inside the bloodstream
The pump, valves and vessels work as one system.
Saki explains the idea with story, motion, practice and reflection so every learner can enter through their strongest mode.
Interface labels are concise, action-oriented and never apologetic.
Buttons, chips and keyboard hints
Controls feel pressable, readable and consistent across learning, teaching and administration surfaces.
Cards and identity
Rounded 16px cards and hard shadows create a classroom-friendly physical feel without sacrificing clarity.
surface
Used for lesson modules, insight blocks and school workflow panels.
cream
Used for lesson modules, insight blocks and school workflow panels.
sakura
Used for lesson modules, insight blocks and school workflow panels.
sun
Used for lesson modules, insight blocks and school workflow panels.
mint
Used for lesson modules, insight blocks and school workflow panels.
violet
Used for lesson modules, insight blocks and school workflow panels.
ink
Used for lesson modules, insight blocks and school workflow panels.
Aarav Mehta
Grade 9 · Sunrise International School, Pune
Forms, tabs and overlays
Interactive primitives use Radix where accessibility matters and keep the Sakura Pop surface treatment.
Learners continue their lesson path, review flashcards and ask Saki for another way in.
Progress and metrics
Learning signals are optimistic and concrete: mastery, streaks, reviews due and class momentum.
Weekly mastery
86%
+14 points
Reviews due
18
Next session ready
Live confidence
72%
Doubt Radar improving
Lesson art
Flagship thumbnails are handcrafted SVG scenes that can sit on the dark lesson stage before live 3D arrives.
Charts and tables
Analytics components use brand colour, explicit chart heights and horizontal wrappers for small screens.
Mastery trend
VARK breakdown
Lesson portfolio
Sparkline signal
| Journey | Owner | Status | Signal |
|---|---|---|---|
| Student lesson | Aarav | Ready | 86% mastery |
| Teacher live class | Ms. Rao | Active | 12 doubts clustered |
| Parent report | Vikram | Shared | 3 goals on track |
Stage
The 3D lesson stage: React Three Fiber host with adaptive quality, an orbit rig and a poster fallback (add ?nowebgl=1 to see it).
Loading 3D stage…
Combustion scene
Nine atoms rearranging on a hob: scrub the swap, spark the igniter and balance the equation on the tray.
Loading the burner…
Heart scene
The procedural beating heart: cardiac cycle, valves, double circulation and Rubi the red blood cell, with a live ECG.
Generic scene modules
Molecule, plot, particles and sandbox: reusable 3D scenes that any lesson can drive through params, cameras and highlights.
Loading 3D stage…
Circle area
The pizza scene: slice it, rearrange the sectors into a near-rectangle, unroll the onion rings and settle the 12-inch question.
Circular motion
The physics flagship scene: the rotor drum, the ball and string with its tangent fly-off, the force arrows, the rider frame and the hairpin.
Loading 3D stage…