Mohith

Design Realm

Making the interface feel intentional.

Four details I check 1 / 4

Clarity

Show what matters. Hide what doesn't. The user's eye should never have to hunt for the next move.

Signal

Four details I check 2 / 4

Rhythm

8pt grid. Type that scales. Motion timed in beats. Cohesion the user feels but can't name.

  1. 8
  2. 16
  3. 24
  4. 32
  5. 48
  6. 64

Four details I check 3 / 4

Affordance

Buttons that look pressable. Inputs that look fillable. State that updates the second a finger lifts.

Stateidle

Press the surface.

Four details I check 4 / 4

Taste

Spacing, weight, contrast, and timing working together without calling attention to themselves.

Angle137.82°Golden is 137.51°

Motion Motion for feedback and continuity.

Motion

Timed in beats. Eases that feel native, not bolted on.

The curve is the ease. The comet is Anime.js running it. Pick one again to replay.

Palette Mix a palette. Watch it land.

Color

Tap a base, tap an accent. The tokens update live, the way they should.

--color-bg
--color-surface
--color-text
--color-accent

Figma first One master, nine instances

Systems

Designed in Figma first, then brought back to code. Tokens. 8pt grid. Components that scale past the demo.

Master corners

The lit tile is the master. Change its corners and the other eight follow.

Next Two more worlds, each as it already is

Next: the Gallery and the Room

Tab order. Focus rings. Reduced motion respected.