Theme

One stylesheet for all web applications of confirm IT:

The corporate design colours
A modern CSS reset
Semantic design tokens with a dark & a light theme
Typographic defaults with self-hosted fonts

This page is built with nothing but the theme itself.

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.

Markup	Theme
`<html>`	Dark
`<html data-theme="light">`	Light
`<html data-theme="auto">`	Follows the operating system

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.

Token	Usage
`--theme-error`	Fills, e.g. badges
`--theme-error-contrast`	Text on the fill
`--theme-error-text`	Text & icons on the background
`--theme-error-subtle`	Tinted backgrounds, e.g. 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.

--theme-font-size-3xlHeading 1 --theme-font-size-2xlHeading 2 --theme-font-size-xlHeading 3 --theme-font-size-lgHeading 4 --theme-font-sizeBody text, headings 5 & 6 --theme-font-size-smSmall text

--theme-font-weight-lightLight 300 --theme-font-weight-regularRegular 400 --theme-font-weight-mediumMedium 500 --theme-font-weight-semiboldSemibold 600 – headings & strong --theme-font-weight-boldBold 700

Spacing, radii & shadows

--theme-space-xs

--theme-space-sm

--theme-space

--theme-space-lg

--theme-space-xl

--theme-space-2xl

--theme-radius-sm

--theme-radius

--theme-radius-lg

--theme-radius-round

--theme-shadow

Elements

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

Name	Status
Build	passed
Deploy	running

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 the loaded stylesheet, so it's always up to date.

Token	Light	Dark