Foundations
Seven truck-art hues, two grounds, three faces, block lettering, drawn art, one kind of shadow, five borders and one motion.
Color
Seven hues, painted twice
Each hue has a Hindi name and a ramp. In Mela, 100 is a pale wash and 700 is a deep shade that holds text on paper. In Raat the ramp turns over: 100 is a dim wash for a night surface and 500 is the lamp-lit glow. Components never use a step directly; they read semantic tokens such as --accent-primary and --wash-genda.
--marigold-*The garland. The primary sticker.
#fae2b2#f8c662#f5a300#a36b10#3e2f3b#95703c#ffbe3d#785a2d--haldi-*Selection: what you picked.
#faeab7#f9de72#f7cf1d#a48622#3e3643#958354#ffe16a#786a41--kesar-*A thing that needs a look. Never alarm.
#f9d8b7#f5a671#f06a1c#9f4721#3e263d#955344#ff8a4c#784334--rani-*The loud voice: “let’s go”.
#f5cac9#e87ba8#d81b7f#91165f#3e1e4f#953b7b#ff5fb0#782f61--firozi-*Calm, cool panels.
#d1e3cf#7ac8bc#11a8a4#156e76#1c3555#2c828d#3fe0d0#22696f--tota-*Done. Finished, not “winning”.
#dce3ba#9cc879#4fa82a#3c6e2a#2b3541#5a824f#93e060#48693d--mor-*Links and focus.
#d2d6d2#7da1c2#1660b0#18417d#252d5d#4869a6#72b2ff#395484Mela: paper and kajal (aubergine, not black). Raat: lamplight on neel sky (not white on black).
#fff9ee#fbf0d9#f4e4c4#e8d2a8#a796ab#75637f#4a3a5c#2a1840#fbefd6#e9e2f4#c9c0e2#8e86b8#2b2566#1e1950#14103a#0c0928Every pair of ink and ground, every filled control and every poster band at every gradient stop is measured by tools/check-contrast.mjs. Loud is allowed. Unreadable is not.
Poster bands
Big fields of color, ink included
A band is a large, still poster surface that carries its own measured ink. Use one behind a headline or a short line, not behind long reading.
Genda
.kh-band--genda
Rani
.kh-band--rani
Firozi
.kh-band--firozi
Mor
.kh-band--mor
Type
The poster, the sign painter and the reader
Rozha One · display · --font-display
Dil Se Khelo
दिल से खेलो
A Bollywood-poster serif from the Indian Type Foundry. For a few words, large, in block lettering: a solid face on a painted extrusion that runs down and right (--shadow-block). Mela paints a kajal face on a marigold side with a burnt-saffron base; Raat lights the face and paints the side pink.
Yatra One · lettering · --font-sign
Horn OK Please · धीरे चलें
A sign painter’s hand, for stickers, tile titles and labels. Short, and never for paragraphs.
Baloo 2 · reading · --font-body
Everything you actually read is set in Baloo 2: rounded, warm, Devanagari-native.
जो कुछ भी आप पढ़ते हैं, वह बालू में है — गोल, गरम, और देवनागरी में सहज।
Hindi is set as a peer of English, never as a translation footnote. The scale is in rem, so a person’s own text size setting always wins.
Illustration
Draw it. Never an emoji.
An emoji is drawn by someone else’s platform. It looks different on every device and brings that platform’s voice into yours. Khelo’s art is drawn in one hand: a 48-unit grid, an ink outline that follows the text color, round joins, and flat fills from the seven hues. The motifs come from everyday Indian play and life.
patanglattukulhadgendakamalmorpankhdholrangolinazarchitthisuryachandFills come from --icon-genda, --icon-rani and the rest, so the same file is painted by day and lamplit by night. Decorative art is aria-hidden; meaning lives in the words next to it. Drawing a new one? Keep the outline, keep the fills flat, keep it to two or three hues, and draw something a person in India would have played with or seen today.
<svg class="kh-icon" viewBox="0 0 48 48" fill="none" stroke="currentColor"
stroke-width="2.5" stroke-linejoin="round" aria-hidden="true">
<path class="kh-f-rani" d="M24 4 L40 22 H8 Z"/>
<path class="kh-f-genda" d="M8 22 H40 L24 40 Z"/>
</svg>Shadow
Stickers, not clouds
Khelo has one kind of shadow: a hard offset with no blur, like a sticker on a truck panel. A blurred shadow says “floating, look at me”. A sticker says “here, solid, yours”. In Raat a dark shadow would vanish on the sky, so the offset glows pink like neon on a wall.
--shadow-sticker-s--shadow-sticker--shadow-sticker-l--shadow-pressedOrnament
Painted edges
Borders from Indian ornament, as static SVG inlined as tokens. They frame edges and fill empty grounds. They never sit behind body text, they never move, and they drop out in forced colors.
.kh-kangura · the stepped temple border of a Kanjeevaram sari’s edge and a truck’s roofline
.kh-bel · the flowering vine on a truck’s side panels
.kh-toran · mango leaves and marigolds strung over a doorway
.kh-lights · bulbs on a wire, made for Raat
.kh-dots · the grid a rangoli is drawn on
Motion
The squish
Press any button on this page. It sinks into its shadow in 110ms and comes back when you let go. That is the whole motion vocabulary: it answers a touch, it is over before you notice it, and the curve ends at exactly 1.0. Nothing bounces, wobbles, pulses or loops. With reduced motion turned on, it simply doesn’t move.
--ease-squish: cubic-bezier(0.25, 0.8, 0.3, 1);
--dur-press: 110ms;
--dur-settle: 220ms;