Skip to content
Ritesh FirodiyaGet in touch

Work / Imposter / Wiki / Concepts

two-roles

Conceptcanonicalverified 2026-09-23

CONCEPT.TWO-ROLES

Summary

The light green is Civilian and black is Imposter. Nothing else in the product may resolve to either.

Why

A player reads the reveal in two seconds across a noisy table. With one hue in the whole palette, the two roles get the only two values that carry meaning. If green can also mean "Food & Drink" then the one colour carrying the whole game carries nothing — which is why a pack tile is a white plate with a line icon and an avatar is a neutral disc, in both cases letting the drawing carry the meaning instead.

There were three roles once. Mr. White was a third value in a palette that owns two, a whole extra screen for the steal, and a win condition that beat everybody — a lot of machinery for a role that only mattered in the minority of rounds where he was caught. He is gone, and --role-mrwhite went with him.

No red, including for destructive actions. Every other product in this house reserves rose for delete; here there is no rose to reserve, so a destructive action is a white outline and a plain word. That is a deliberate trade: the convention is older than this palette, and it loses. It is also why the clock's last ten seconds go white rather than red — see last-ten.

The role tokens are named again even though they duplicate ramp values. --role-civilian is the same #86efac as --brand-700, and --role-imposter the same #0a0a0a as --coal-800. The role is the meaning and the ramp is not: rename or re-tune the ramp and the roles must not move with it.

-fg is the readable weight, and type uses it. #86efac at body size on white measures about 1.5:1. --role-civilian-fg is what the secret word is set in, which is what the fg tokens exist for.

Where it is enforced

  • .context/designs/mobile/shared.css — the RESERVED banner at the top of the PALETTE block
  • .context/designs/mobile/tailwind.config.js — the role group
  • src/global.css — the same tokens, @theme

Related

Sources

  • .context/designs/mobile/shared.css
  • src/global.css
  • src/theme/stages.ts

Every project of mine is written down like this.

Read the résumé