OHC Network Wiki:Design/careui

Design system — the maintainer's single source of truth for how the wiki expresses the ohc.network brand (teal #0f8b6c · deep ink #173d34 · lime #b8f36f) and the Care·ui typography (Switzer, Figtree, Geist Mono).

Palette

Role	Light	Dark	Used for
Primary accent	#0f8b6c	#14a980	Links, buttons, badges, active states
Accent (hover / gradient)	#12806a	#0f8b6c	Hover states, button gradients
Ink (deep green)	#173d34	#e6efe9	Title bars, headings, infobox/navbox headers
Lime (highlight)	#b8f36f	#a3e635	Section-underline accents, hover pop
Sage (muted line)	#d8e1db	#1b2f28	Borders, dividers
Surface (off-white)	#f7f9f6 / #fbfcfb	#052e24-tinted	Page + card backgrounds

Typography

Role	Family	Source
Body	Switzer (400–700)	Fontshare, same link as ohc.network
Display / headings	Figtree (400–800)	Google Fonts
Code / data	Geist Mono (400–600)	Google Fonts

Font stacks live in MediaWiki:Citizen.css; the actual @font-face stylesheets are injected by the ohc-fonts gadget.

Skin tokens (MediaWiki:Citizen.css)

Citizen builds its whole palette from the progressive OKLCH hue. Rebinding the knobs re-colors links, hover, search, TOC and the sage surface tints across both themes:

--color-progressive-oklch__h: 169;
--color-progressive-oklch__c: 0.11;
--color-progressive-oklch__l: 56.8%;
--color-progressive-hsl__h: 165; /* HSL fallback: 165, 80%, 31% */
--color-surface-0-oklch__l: 97.5%; /* airy sage page background */
--border-radius-base: 8px;        /* Care·ui roundness (default 4px) */
--width-layout: 1120px;           /* slightly wider docs column */

The sage surface (--color-surface-0-oklch__l) is intentionally a plain :root (specificity 0,1,0): Citizen's night rules (:root.skin-theme-clientpref-night, 0,2,0) must win the cascade or dark mode renders white. Both dark variants (explicit night + OS-follow) restore the dark surface and neutral chroma.

Dark theme (skin-theme-clientpref-night) lifts the accent lightness to 62% so teal links keep contrast on the deep-green surfaces.

Component-to-file map

Component	Where the CSS lives
Hero, buttons, badges, cards, signal, infobox, navbox, sidebar, message boxes	Template:OHC/styles.css
Admonitions, doc meta badges, version pills	Template:Docs/styles.css
Main Page landing blocks (search pill, navgrid, statsbar, showcase, quicklinks)	Template:Main page/styles.css
Deployment sidebar, infra table, plugin grid	Template:Deployment/styles.css
Deployment catalog cards	Template:Deployment catalog row/styles.css
Care plugin cards	Template:Plugin row/styles.css
Skin chrome (header, links, search, radius, fonts)	MediaWiki:Citizen.css
Cargo data tables (table.cargoTable, Care·ui Table parity), keyboard keys (kbd), copy button, back-to-top, version-switcher select	MediaWiki:Common.css

Gadgets

Gadget	Purpose
ohc-fonts	Injects Switzer / Figtree / Geist Mono stylesheets
ohc-copy-code	Copy button on every code block
ohc-search-hotkey	Press / to focus search anywhere
ohc-back-to-top	Floating back-to-top pill
ohc-version-switcher	CARE 3.x version dropdown on doc pages

Registration lives in MediaWiki:Gadgets-definition.

Open Healthcare Network's flagship product: an open-source, FHIR-native electronic medical record (EMR) and healthcare operating system.