Basics

In Ingot a colour is not written as a value but as a role. The accent has four, and each answers a different question:

• --accent — the colour itself. Actions, filled buttons, icons, the focus ring; it is also a text colour, so it has to stay readable on surfaces.
• --accent-ink — the darker step of the accent. Hover on actions, and the colour of links.
• --accent-bg — the tint under a selected row, a badge and a callout. Never text.
• --accent-border — the accent line, the outline of that tint. Decorative; it carries no information on its own.

A screen reaches for the variable, never the value. That is what makes both the family and the theme swappable without touching screens.

The accent is one of four colour roles a screen takes through a variable — never as a hex. There are five families and they differ only in the values of those four variables; a component never knows which one is in effect.

Every family carries its own light and dark values, so switching the theme re-resolves it on its own — the switcher in the left column shows this in both themes. In the application the family is picked in the account menu and remembered by the account, not by the browser. Inside a shop, that shop's own colour takes precedence.

The values in the column are read at runtime from the palette currently in effect — switching the theme on the left rewrites them. A screen therefore always reaches for the token name, never the value.

Every state also has a tint variant. Without it a badge with a state tint cannot be built: the saturated token is the text in it, and the surface underneath has to be a colour of its own, not a weakened version of the first.

• The neutral scale carries most of the surface — accent and state are guests in it.
• Two accents are never mixed in one view.
• State colours are reserved for the state of the data, never for decoration.
• Colour never carries information on its own — always alongside text or a shape.

The scale has eight steps, each with a name and a fixed value — a size is never picked by eye. The sample on the left is set in exactly the classes the row names.

The sans face carries speech, mono carries facts: numbers, codes, dimensions and identifiers. Tabular figures keep digit above digit, so amounts in a column can be compared by eye.

Spacing runs in four-pixel steps. No smaller step exists — two adjacent values you cannot tell apart by eye are not two values. The square below is exactly the size its label names.

Radius grows with the element: small badges take the smallest, cards and frames the largest. The full circle is reserved for avatars and dots.

A shadow says how high above the page an element sits. Three steps are enough: each has its floor and is not used outside it.

Layers sit at fixed levels so overlays do not outbid each other case by case. The gap between content blocks is 24 px.

Motion has one duration and one curve across the system. A dialog, a drawer, a toast and a menu therefore open at the same speed — and when that speed should change, it changes in one place.

• --dur — 0.22 s. Long enough to show where a panel came from; short enough not to be waited on.
• --ease — a curve that leaves quickly and lands softly. Linear motion reads as mechanical.
• An overlay enters; it does not animate away. Closing should be immediate, because the user already knows what they wanted.
• Under the system's “reduce motion” setting the movement is dropped, not the panel. Dropping the panel would take the content away rather than calm it down.