Clay

Reading, editors, assistants — screens where the text matters most and the interface steps back. Warm surfaces and graphite ink take the chill off product themes, and the single warm accent shows what the screen was opened for. The theme is a copy of slate (theme:copy), not an heir: a language of its own, every value is its own, and edits to Slate do not reach it. A new token of the component package reaches Clay not silently but as a doctor finding, and its author decides the value.

• The main button of an area is tone="neutral": a graphite fill, light in the dark mode. The clay primary is an accent, not every action.
• One clay per screen: the thing the screen was opened for. Two clay buttons side by side argue with each other, and the accent stops being an accent.
• Tone lives in the fill and the label; borders are warm gray. secondary and outline of any tone share one border — graphite at 15 % and 30 %.
• Under the pointer the fill moves away from the label color: under a graphite label it lightens, under a light one it darkens. Contrast only grows on hover. The exception is the main button: its fill is already at the edge of the scale, so it moves toward the middle — graphite lightens, paper darkens.
• A button does not move and does not glow: no shadows, loading is light running over the label, not a spinner, a button group is a tray (the theme’s component defaults, componentDefaults).
• Only what lies above the page casts a shadow: a popover panel and a toast — 8/24, a dialog — 16/48. A card is a white sheet with a hairline border, without a shadow.
• Quiet defaults: tabs as a line, badges with the semi radius, a path through «/», an avatar — initials on paper without a random color, progress — a graphite bar without a border.
• As with any theme of the package: text color comes from -text, the border of a toggle control is --gr-control-brd.