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.