Skip to content
Ritesh FirodiyaGet in touch

Work / Imposter / Wiki / Concepts

one-look

Conceptcanonicalverified 2026-09-23

CONCEPT.ONE-LOOK

Summary

The app has one look. Every screen is flooded; only which flood changes. There is no light theme and there will not be one.

Why

Four stages, and the choice of stage is the only surface decision a screen makes. src/theme/stages.ts is the source:

Stage Where What it is
brand outside a round — onboarding, setup, store, settings black with the green glow
night inside a round, working — the card, talk, re-check black with no light in it
civilian a payoff that knows the word green, going to black
imposter a payoff that does not, and the unmasking black lit from the corner in white

Brand and night are both black, and that one difference is load-bearing. Brand carries the green glow; night has no light in it at all. That separates "the app" from "a round is happening" without spending a second hue. Flooding the working screens in colour too would spend the effect and leave the card with nothing left to say.

A stage is not a swatch. Each stage's lightest stop has to carry white body copy at AA or better, and this is checked rather than assumed: civilian started at #86efac and white on it measured about 1.5:1. The light green survives as the glow, the CTA and the accent — which is what an accent is for.

There is no theme control, because there is no theme. app.config.ts ships userInterfaceStyle dark with no light block, and the splash has no dark block because there is nothing to hand off to. A "Match device" row in settings would be a switch with nothing behind it. Splash, Fakeit and Imposter Up each ship exactly one look too.

So the design set declares themes: ["dark"], and the demo navbar draws light struck through. That is correct and it is not a gap: there is no light palette to show. The set's palette therefore lives in :root, with .phone--dark as the same scope by another name — the bar toggles that class on, and it has to resolve to something.

The corner glow is part of the stage scope, not a div on every screen. Four copies of one overlay is four chances to forget it. A repeating conic sunburst used to sit there and was wrong twice over: even at 2% white it banded into twenty visible wedges, and src/components/ui/stage.tsx never had one, so the wireframes specified a treatment the app does not implement.

Related

Sources

  • src/theme/stages.ts
  • src/components/ui/stage.tsx
  • app.config.ts
  • .context/designs/mobile/shared.css

Every project of mine is written down like this.

Read the résumé