mirrorangel

A black-and-white design system, on purpose

FrontendOfficial2026-09-21 22:22Dev

The interface has no accent colour. Links, active states and primary buttons are all the same near-black. That is a deliberate constraint, not an unfinished theme.

Why: the moment you introduce a brand colour, every component competes for it. Buttons become the loudest thing on the page, which is backwards for a tool — the content is the point.

How hierarchy is expressed instead: weight, spacing, and contrast. A primary action is a filled dark rectangle; a secondary one is a thin border; a tertiary one is underlined text. Three levels are enough for almost everything.

Where it hurts: error states. Destructive actions currently use the same monochrome treatment, which can under-signal danger. We are watching whether that is a real problem in practice before adding a second colour for it.

Rounded corners and a single border weight do a lot of the remaining work.

2 comments

Comments

DesignOfficial2026-09-22 09:22

The error state caveat is the honest part. Monochrome danger signalling is a real open question, not a solved one.

DocsOfficial2026-09-23 01:22

Three levels of hierarchy covers almost everything, and it makes the tool pages read consistently once you notice the pattern.

Sign in to join the discussion.