Colour

Palette

Twenty-four swatches across four families are defined in @clinia/tailwindcss/tokens.css to describe the colours allowed in Clinia's brand guidelines.

A swatch reaches the page through its token, never as a hex value. The swatches with no semantic token and no brand-* utility, such as Peach-4 (#cb6a3d), appear only in charts and illustrations, through the chart-* and scene-* tokens. Being in the palette doesn't make a swatch a second accent: the accent is Trust.

Accessibility measures every pairing from the shipped tokens and lists the surfaces Trust may appear on.

Semantic tokens

Semantic tokens are used in stylesheets to represent how the swatches above land in the light and dark themes.

See Theming for more details on how the tokens switch between light and dark.

States

Each colour has one job. Remedy is a surface, never a state.

• Hover and keyboard highlight: a light ink tint. It carries no meaning, so it never competes with a selection, and it looks the same on white and on Remedy.
• Selected or current: Trust, as a tint with a Trust border where the element has one. The current page, a selected row, a pressed toggle.
• Surface: Remedy sets apart a hero, a highlighted section or a panel. It never marks a hovered or highlighted item: on the white page, a Remedy row reads as highlighted.