Every component styled by this wiki, on one page. Open it in both light and dark mode after changing MediaWiki:Common.css, MediaWiki:Citizen.css or any Template:*/styles.css. Anything that hardcodes a colour will break in exactly one of the two themes — which is the point of looking at both.

Reference: OHC Network Wiki:Design/careui

Colour tokens

Token	Swatch	Token	Swatch
`--ohc-background`		`--ohc-soft-background`
`--ohc-muted-background`		`--ohc-strong-background`
`--ohc-foreground`		`--ohc-muted-foreground`
`--ohc-soft-foreground`		`--ohc-placeholder-foreground`
`--ohc-card`		`--ohc-primary`
`--ohc-primary-foreground`		`--ohc-primary-bg`
`--ohc-border`		`--ohc-strong-border`
`--ohc-destructive`		`--ohc-accent`

Status palette

success

info warning danger accent

neutral

Typography

Figtree Variable

The open operating system for healthcare

Body copy sits at --ohc-foreground. careui derives heading hierarchy from weight rather than colour, so headings and body share a colour and differ in size and weight only.

Heading 1

Heading 2

Heading 3

Heading 4

Body text with a wikilink, an external link, inline code, Ctrl + K, bold and italic.

A blockquote, which takes a primary-tinted left rule and soft foreground.

# a code block — Geist Mono Variable, soft-background, xl radius
care serve --port 9000

Buttons

Primary button Ghost button

Badges

With dot Plain badge mono-badge

Cards

First card

Card body copy at --ohc-soft-foreground, on --ohc-card, with a primary top rule.

Second card

Hover lifts the top rule to --ohc-primary-500 and raises the shadow.

Signal

A pull quote or highlighted statement.

— attribution line

Admonitions

Note — neutral tint.

Info — info tint.

Tip — primary tint.

Warning — warning tint.

Message boxes

ⓘA standard message box.

⚠A "needs source" box, using the warning status token.

Table

Column	Another column	Third
Hairline row rules	A stronger rule under the header	Left-aligned semibold headers
No outer box	careui Table parity	`--ohc-border`
Hover tint	`--ohc-muted-background`	Applies to `.cargoTable` too

Navbox

Navbox title — a link on a primary fill

Group

One · Two · Three

Another

Four · Five