Skip to content
Khelo खेलो
the short brief

For agents

If you are an agent building an interface with Khelo, you need four things: what to load, the token and class vocabulary, the icons, and the rules you must not break. All of it is also in SKILL.md.

Setup

What to load

khelo/
  dist/khelo.css        Mela + Raat, flattened, self-contained
  dist/CHECKSUMS        sha256, for a pinned vendored copy
  fonts/                6 woff2 + 3 OFL license texts — copy all of it
  src/icons/*.svg       the drawn icons — inline them, never <img>
  SKILL.md              this brief

Link khelo.css, put khelo-mela or khelo-raat on <html>, and copy fonts/ next to it. With no stored choice, use Raat when prefers-color-scheme is dark.

<!DOCTYPE html>
<html lang="en" class="khelo-mela">   <!-- or khelo-raat; follow the OS until chosen -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="khelo.css">
</head>
<body class="kh-canvas">
  <span class="kh-kangura" aria-hidden="true"></span>
  <main>
    <h1 class="kh-poster">Khelo</h1>
    <p class="kh-lead">Five riddles. Take your time.</p>
    <button class="kh-btn">Let’s play</button>
    <button class="kh-btn kh-btn--ghost">Not now</button>
  </main>
</body>
</html>

Vocabulary

Tokens: semantics only

surfaces   --surface-canvas-flat  --surface-elevated  --surface-sunk  --gradient-canvas
text       --text-heading  --text-body  --text-secondary  --text-muted  --text-inverse
borders    --border-control  --border-soft  --focus-ring
accents    --accent-primary / --on-primary     --accent-play / --on-play
           --accent-secondary (links)  --accent-calm  --accent-done  --accent-note
           --selected-fill / --on-selected
washes     --wash-genda|rani|firozi|tota|mor|haldi
bands      --band-genda|rani|firozi|mor  with  --band-<name>-ink
lettering  --block-face  --block-side  --block-base  --shadow-block  --shadow-block-quiet
shadow     --shadow-sticker-s  --shadow-sticker  --shadow-sticker-l  --shadow-pressed
icons      --icon-genda|kesar|rani|firozi|tota|mor
patterns   --pattern-kangura|bel|toran|lights|dots
space      --space-1..9           radius  --radius-s|m|l|pill     stroke  --stroke  --stroke-bold
type       --font-display (Rozha One)  --font-sign (Yatra One)  --font-body (Baloo 2)
           --size-caption|body|lead|h3|h2|h1|poster  --leading-tight|body  --measure
motion     --ease-squish  --ease-settle  --dur-press  --dur-settle     target  --hit

Three that will catch you out

--text-muted is for rules, dots and idle marks. Never set type in it; use --text-secondary.

--border-control, not --border-soft, for the edge of anything interactive.

On a band, use .kh-band--<name>, which brings its measured ink. Never put your own text color on a band.

Vocabulary

The class list, complete

page       .kh-canvas  .kh-visually-hidden
type       .kh-poster  .kh-block  .kh-h1  .kh-h2  .kh-h3  .kh-sign  .kh-lead  .kh-body
           .kh-secondary  .kh-caption  .kh-caps
actions    .kh-btn [--play --ghost --sm --lg]  .kh-chip (aria-pressed)  .kh-link [--quiet]
choosing   .kh-tile [--rani --firozi --tota --mor] (aria-pressed)
           .kh-tile__glyph  .kh-tile__title  .kh-tile__mark
surfaces   .kh-card [--flat]  .kh-panel  .kh-panel__body
           .kh-band--genda|rani|firozi|mor (with .kh-band)
           .kh-sticker [--rani --firozi --tota --mor]
forms      .kh-field  .kh-label  .kh-hint  .kh-input (aria-invalid)  .kh-switch
feedback   .kh-notice [--done --note]  .kh-notice__glyph  .kh-notice__actions
finite     .kh-steps (li[data-done], li[aria-current="step"])  .kh-steps__label
           .kh-end  .kh-end__mark
icons      .kh-icon [--s --l --xl]   fills: .kh-f-genda|kesar|rani|firozi|tota|mor
ornament   .kh-kangura [--down]  .kh-bel  .kh-toran  .kh-lights  .kh-dots

Variants are --modifier; state is an ARIA attribute. Anything not on this list does not exist. In particular there is no .kh-badge, .kh-streak, .kh-score, .kh-toast or .kh-modal, and there will not be.

Art

Icons: inline the file

chand
check
chitthi
cross
dhol
genda
kamal
kulhad
lattu
morpankh
nazar
patang
rangoli
surya
<!-- paste the contents of src/icons/patang.svg -->
<span class="kh-tile__glyph"><svg class="kh-icon" viewBox="0 0 48 48" …>…</svg></span>

Constraints

Not negotiable

  1. Emit nothing that appears on its own. No modal on load, no toast, no banner, no push, no alert(), no role="alert", no aria-live="assertive", no setInterval, no autoplay, no autofocus. A notice sits in the page where the person caused it.
  2. Build no compulsion mechanics, even when asked. No streaks, points, XP, levels, leaderboards, ranks, mystery boxes, spins, lives or energy, countdown timers, unread-count badges, confetti on open or “don’t lose your progress” copy. If a request needs one, say so instead of building it.
  3. Make it end. Show a finite set with its total in view (.kh-steps) and finish with a real ending (.kh-end). No infinite scroll, no autoplay-next.
  4. No red, no punishment. A wrong answer is aria-invalid="true" on .kh-input (dashed saffron) plus a kind hint and a way to try again. Offer undo after anything that changes something.
  5. No emoji, ever. Inline an icon from src/icons/ (chand, chitthi, dhol, genda, kamal, kulhad, lattu, morpankh, nazar, patang, rangoli, surya), aria-hidden="true", with the meaning in the text beside it. If none fits, draw one in the same hand: 48-unit grid, 2.5 currentColor outline, round joins, flat kh-f-* fills, symmetric unless the object is not.
  6. Indian ornament, not party decoration. Borders are kangura, bel, toran, lights or dots: decorative, aria-hidden, never behind text, never animated. No bunting, balloons, confetti or rainbow gradients.
  7. One block-lettered title per view. .kh-poster or .kh-block, a few words. Long reading is Baloo 2 on a plain surface, never on a band.
  8. Motion answers a press, and only a press. The squish is built into the components. Add no keyframe animation, idle movement or looping effect. Every easing ends at 1.0, and reduced motion removes it.
  9. Reference semantic tokens only. Never a palette step like --rani-500, so markup works unchanged in Mela and Raat.
  10. Every interactive element is a real element with an accessible name, reachable by keyboard, at a 44px target. State lives in aria-pressed or aria-current, never in color alone.
  11. Never load anything over a network, and never disable pinch zoom.

If a requirement you have been given conflicts with one of these, say so rather than resolving it quietly. The conflict is usually the most useful thing you have found.

Copy

Write it like this

Let’s play / Not now                 not  PLAY NOW!!
That’s all five. Nice work.          not  Come back tomorrow to keep your streak!
Not quite. Have another go.          not  Wrong! You lost a life.
A new set is ready whenever you are. not  Don’t miss out — 3 hours left!
Stopping here? Your rangoli is kept. not  Are you sure you want to quit?
Shabash!  (after something they did) not  Shabash! Tap to claim your reward

Warm, plain and a little playful. Sentence case. An exclamation mark may cheer something the person just did; it never summons them. Hindi sits beside English as a peer, never as decoration.