Every lesson is a case
The Detective Noir design system for conan.school. Four detectives whose eyes follow you, icons with three states, buttons and boxes that answer every touch.
Designed by Thông PhanMove the pointer to aim the lamp. Click a character.
One light source, the rest is shadow
Amber is the street lamp, used only for what must be seen. Neon red is reserved for suspects, signs and warnings.
--color-n2-ink--color-n2-ink-2--color-n2-coal--color-n2-coal-2--color-n2-coal-3--color-n2-smoke--color-n2-ivory--color-n2-ivory-dim--color-n2-amber--color-n2-amber-ink--color-n2-neon--color-n2-rain--color-n2-okEvery swatch is painted with the token class itself and labelled with the token name, never a colour code: change the token in theme.css and every page follows.
Four typefaces
You do not need to guess. You need one right clue, then follow it to the end.
Customers abandon the cart at checkout because the delivery fee only shows at the end. Move the fee onto the product page and measure again in a week.
Type effects
The culprit is a delivery fee that shows up late, not the cake price.
File 08. Ngoc Lan bakery, district 3. Customers drop the cart at the last step.
Noir 2.0 for Conan School. Designed by Thông Phan (Conan CMO), rebuilt by Conan School with React, Tailwind and shared tokens.
Designed by Thông Phan, view the original