Theme

Usage

Include the theme in the <head> of your application.
It already includes colours.css, so you don't need anything else.

<link rel="stylesheet" href="https://assets.confirm.ch/theme.css">

Dark is the default theme. Use the data-theme attribute to change it.
It works on any element, e.g. to render a light card inside a dark application – the panels on this page do exactly that.

Always use the semantic --theme-* tokens instead of the raw --cd-* colours.
They switch automatically with the theme, and every text & background combination meets the WCAG AA contrast ratio (4.5:1) in both themes.

Surfaces & text

Four tokens build the layers of an interface:

• --theme-background for the page itself
• --theme-surface for cards & panels
• --theme-surface-raised with --theme-shadow for popovers & dialogs
• --theme-border to separate them

Primary & accent

The brand colours, for actions & highlights:

• --theme-primary is the orange of our logo, identical in both themes, for fills such as buttons
• --theme-primary-contrast for text on top of it
• --theme-primary-text for orange text on the background, e.g. links, as it stays readable on light backgrounds
• --theme-accent complements it for secondary actions and marks the keyboard focus

Status colours

Each status comes with four tokens: a fill (e.g. badges) with its *-contrast text colour, a *-text colour for text & icons on the background, and a *-subtle tint for alerts.

Typography

Texts are set in Poppins, code in Roboto Mono.
Both are self-hosted and loaded by the theme, so no external font service is involved.

Spacing, radii & shadows

Elements

Plain HTML elements are styled out of the box, without any classes.

Overriding

The whole theme lives in the confirm cascade layer.
Styles outside of a layer always win over layered styles, regardless of their specificity.
So your application's styles override the theme with plain selectors, no !important needed.

/* Customise a token… */
:root {
    --theme-radius: 0;
}

/* …or override an element directly. */
a {
    text-decoration: none;
}

Using cascade layers yourself? Put the theme first: @layer confirm, app;

All tokens

Generated from theme.css at build time, so it's always up to date.

No tokens found.