Four interface rules
A short reference for the interface rules: where colour is allowed, which controls are hidden until hover, how completed items are styled, and what separates the two themes.
Todoi's interface follows four rules about colour, hidden controls, and contrast. They are written down here so they can be checked against, rather than remembered.
Colour is reserved for state
The palette is a 12-step warm greyscale plus a single accent. Any further colour has to stand for a semantic state - success, warning, error, info - or for a step on the priority scale. Nothing is coloured for decoration. 🎨
Row controls are revealed on hover
Drag handles, row actions, and the add button in a list header are hidden until the pointer is over the element they belong to. At rest, a list row shows its text, its checkbox, and a hairline border.
Completed items are struck through, not dimmed
A completed item gets a strikethrough and the tertiary text colour instead of reduced opacity. The checkbox keeps full contrast, so the row stays legible and easy to click again.
Two themes share one set of token names
Standard uses Inter, warm paper colours, small radii, and soft shadows. Terminal uses Geist Mono, square controls, and borders in place of shadows. Both resolve the same semantic token names, so a component written once renders correctly in either. The Style control in the project header switches between them.