Skip to content
Larasby Kotek

Principle 1 of 4

Consistency

A kotekan only works when both players are tuned to the same scale. The app is the same: every screen draws from the same ground, the same tokens and the same components, so moving between them never feels like moving between apps.

Guidelines

  1. 1

    One surface

    Everything sits on the same warm brown ground with the carved pattern behind it. The app used to switch between a light "paper" world and a dark "stage" world, and flashed between them mid-flow. Now the camera screens are simply the ones where the ground happens to be a live image.

  2. 2

    Tokens, not values

    Colors live in the asset catalog and are read through Theme by name, so a designer can change a color without a code edit. A view never writes a hex value of its own.

  3. 3

    Name the job, not the paint

    Tokens are named for what they do: onButtonFill is only correct on top of buttonFill, and the pair moves together. A name like "lightBrown" says nothing about where it is safe to use.

  4. 4

    Same color, same meaning, everywhere

    Polos is blue and sangsih is purple on the score, the picker cards and the mixer chips alike. A color that means a voice never also means a state.

  5. 5

    Shared components can't drift

    Button weight and tracking are held once in Theme. Buttons are the most repeated element in the app and the place an inconsistency is most obvious, so no call site sets its own.

In practice

Do

  • Reach for Theme tokens and the shared components first.
  • Add a new color to the asset catalog, with a name for its job.

Don't

  • Write a hex value or a font size into a feature view.
  • Reuse a voice color (polos, sangsih) to mean a state.
Next principleUsability →