Skip to content
Khelo खेलो
touch everything

Components

Everything on this page is safe to press. Nothing here counts you.

Actions

Buttons are stickers

Button

Marigold is the primary action; rani is the one loud “go”. Use at most one rani button per view. Disabled goes dashed and flat, not grayed into invisibility.

<button class="kh-btn">Let’s play</button>
<button class="kh-btn kh-btn--play">Shabash!</button>
<button class="kh-btn kh-btn--ghost">Maybe later</button>

Chip

A choice among a few. aria-pressed carries the state, and selection also thickens the outline, so it never relies on color alone.

<button class="kh-chip" aria-pressed="true">Samosa</button>

Link

Read the rules of the game first.

<a class="kh-link" href="…">the rules</a>

Choosing

Tiles

Tile

One big choice. A selected tile turns haldi yellow and gains a drawn check beside its label, so the state reads without color.

<button class="kh-tile kh-tile--rani" aria-pressed="true">
  <span class="kh-tile__glyph"><svg class="kh-icon" …>…</svg></span>
  <span class="kh-tile__title">Gaana</span>
  <span class="kh-tile__mark">Songs</span>
</button>

Surfaces

Cards, panels, bands and stickers

.kh-card

A sticker card

Ink outline, hard shadow, big round corners.

.kh-panel

A truck panel

Framed top and bottom in the kangura temple border.

.kh-band--rani

A poster band

Carries its own measured ink.

Sticker

Naya!ShabashThandaHo gayaदोस्त

A label slapped on at a slight angle. The tilt is fixed, never animated. Stickers name things. They never count things: there is no unread badge in Khelo.

<span class="kh-sticker kh-sticker--rani">Shabash</span>

Input

Forms

Only shown to your friends.
Not quite. Have another go, or peek at the answer.

A wrong answer goes dashed saffron and says something kind. No red, no shake, no buzzer.

Feedback

Notices that wait where you left them

Saved. Your rangoli is in your sketchbook.
A new set of riddles is ready. Open it whenever you like. It will be here.
That one didn’t save. Nothing is lost. Try again when you’re ready.

Notices live in the page where the person caused them. They are never toasts, never modals and never announced assertively.

Finite play

Progress that ends

.kh-steps shows where you are in a finite set, with the total always in view. .kh-end is the ending: rest, not loss. Try it.

  1. Word 1
  2. Word 2
  3. Word 3
  4. Word 4
  5. Word 5
1 of 5

आम · Mango

Word 1 of 5

<ol class="kh-steps" aria-label="Progress">
  <li data-done></li><li aria-current="step"></li><li></li>
</ol>
<span class="kh-steps__label">2 of 3</span>
<div class="kh-end">…That’s all…</div>

Playground

A rangoli, for nothing

Tap dots to paint them. There is no score, no timer and no “share to unlock”. When it looks nice, you’re done.