# 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.

```css
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.

```css
: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` |