nixos-config/hosts/globalServices/branding

0ff.space design system

The shared visual identity applied across every service on this platform (own repos and third-party apps alike). Nothing here is invented fresh — every value below is copied from wherever it's already live; this file just collects them in one place so a new integration reuses the same values instead of picking new ones.

Backgrounds

0ff-space-background.css in this directory is the canonical source, injected (verbatim or wrapped, see "Where this is used" below) into every branded service.

html, body {
  background-color: ghostwhite;
  background-image: radial-gradient(circle, lightsteelblue 1px, ghostwhite 1px);
  background-size: 15px 15px;
  background-attachment: fixed;
}

@media (prefers-color-scheme: dark) {
  html, body {
    background-color: hsl(0 0% 10%);
    background-image: radial-gradient(circle, hsl(0 0% 14%) 1px, hsl(0 0% 10%) 1px);
  }
}

Services whose own theme switcher is independent of the OS preference (LLDAP's darkmode.js, Forgejo's data-theme) need this reapplied against their own dark/light class or attribute instead of relying on the media query alone — see hosts/blunix/localServices/lldap.nix and hosts/pinix/localServices/branding/forgejo-theme-override.css for the pattern. Services with a fixed (non-OS-reactive) theme, like Dex, use one variant unconditionally rather than the media-query version — see "Fixed-theme services" below.

Palette

Defined once in launcher/style.css (:root), copied identically into every other own repo and into each branded third-party service's override.

:root {
  --palette-1: #ff0026; /* red */
  --palette-2: #d91e4d; /* strawberry */
  --palette-3: #ff0094; /* pink */
  --palette-4: #e000ff; /* violet */
  --palette-5: #ff5a00; /* orange */
}

Resting/hover convention: where a service only has one primary accent slot (a "brand color", not the launcher's five-way rotation), use --palette-2 (strawberry) at rest and --palette-1 (red) for hover/active/focus. This is the same pair the guide tile on 0ff.space itself uses, and what LLDAP's buttons, Forgejo's --color-primary, GoToSocial's --fg-accent/--button-bg, and Phanpy's --blue-color all currently use.

Where a service has its own multi-color semantic system (Bulma's five families in xmpp-web, for instance), the full five-color palette maps onto it instead of collapsing to one accent — see hosts/pinix/localServices/xmpp-web.nix's --replace-warn block for that mapping.

Dark mode: neutral grays, not the launcher's palette

Box/card/panel surfaces in dark mode are not palette-colored — they're neutral gray, matching the resting dark tile background used across the launcher/tasks/dashboard grids (hsla(0, 0%, 18%, 1), see .box in each repo's style.css). Several third-party apps ship their own dark surface scale that isn't neutral (Forgejo's --steel-* is blue-tinted, for example) — replace it with this ramp at matching lightness steps instead of leaving the app's own tint:

8%  10%  12%  15%  18%  21%  25%  30%  35%  41%  47%  54%  61%  68%  74%  81%  88%

(hsl(0 0% N%) for each.) 18% is the anchor — it's the exact tone of the launcher's own dark tile, so a card/box at that step reads as the same material as the rest of the platform. See hosts/pinix/localServices/branding/forgejo-theme-override.css's --steel-* override for the reference implementation (mapped 1:1 onto Forgejo's existing steel scale, same step count, same relative lightness spacing).

Light mode: white/near-white, no separate ramp

Light mode doesn't get an equivalent multi-step scale — surfaces are just white (the resting box/card background already used everywhere in light mode, e.g. .box { background: white; } in launcher/tasks/dashboard), against the ghostwhite/lightsteelblue background above. If a third-party app's light surface scale needs overriding the way Forgejo's dark one did, reuse white/ghostwhite rather than introducing a new near-white tone.

Fixed-theme services

Dex's frontend.theme is a static admin choice, not visitor-driven — unlike everything else here, it doesn't react to the OS preference at all (see hosts/blunix/localServices/dex.nix). Branding it uses the same background/palette/gray values above, just applied unconditionally per theme (whichever one frontend.theme is actually set to) instead of wrapped in prefers-color-scheme/data-theme selectors.

Where this is used

Service	Mechanism	File
launcher, tasks, dashboard, website, calendar-web	own repo, :root palette + .box/a rules	each repo's style.css
LLDAP	injected stylesheet, html.dark/html.light + .btn-primary overrides	hosts/blunix/localServices/lldap.nix
Forgejo	custom/templates/custom/header.tmpl + custom/public/assets/css/*.css, data-theme overrides	hosts/pinix/localServices/forgejo.nix, branding/forgejo-theme-override.css
GoToSocial	admin-set custom_css (DB-stored, not declarative — no Nix file)	pasted manually via Settings → Instance Settings
Phanpy	build-time postPatch, :root variable overrides	hosts/pinix/localServices/phanpy/package.nix
xmpp-web (chat/plaza)	build-time postPatch, full five-color Bulma remap	hosts/pinix/localServices/xmpp-web.nix
data/files (fileservers)	static-web-server source patch (compiled into the binary)	hosts/blunix/localServices/fileserver-external.nix, hosts/pinix/localServices/fileserver-internal.nix
Dex	frontend.dir pointing at a copied+patched web asset tree, unconditional per theme	hosts/blunix/localServices/dex.nix