# MainsKeeper brand exports

The mark: two interlaced loops around one open cell. The vertical loop (mint) stands for *what watches*: a collector reads a UPS. The horizontal loop (sodium) stands for *what depends*: a UPS powers equipment. They cross four times, alternating over and under, and never merge. All files are SVG; the product uses no raster logo assets.

Construction is a 48-unit grid: loops 16–32 × 5–43 and 5–43 × 16–32, stroke 6, centreline radius 6. Each under-strand stops 2 units short of the strand crossing over it. These gaps are real cuts in the geometry, not ground-coloured paint, so the mark works in one colour on any background. The 16 px favicon is redrawn on a 16-unit grid (stroke 2, radius 1, 1 px cuts, aligned to whole pixels), not scaled down.

## Files

| File | Use | Colours |
|---|---|---|
| `logomark-dark.svg` | Mark on dark grounds (default product theme) | mint `#7FE0C4`, sodium `#FF9F43`, transparent |
| `logomark-light.svg` | Mark on light grounds | mint deep `#0E7F62`, sodium deep `#B85A00`, transparent |
| `logomark-mono.svg` | One colour, `currentColor` (embossing, print, overlays) | inherits |
| `wordmark-dark.svg` | Wordmark alone on dark grounds (Sora 540, outlined, +0.6 tracking) | `#E9EEF2` |
| `wordmark-light.svg` | Wordmark alone on light grounds | `#101418` |
| `lockup-horizontal-dark.svg` | Primary lockup on dark grounds | loops dark + `#E9EEF2` |
| `lockup-horizontal-light.svg` | Primary lockup on light grounds | loops light + `#101418` |
| `lockup-horizontal-mono.svg` | One-colour lockup, `currentColor` | inherits |
| `app-icon.svg` | App / home-screen icon, dark tile (512, radius 112) | tile `#101418`, keyline `#2A343E` |
| `app-icon-light.svg` | App icon, light tile | tile `#F4F6F8`, keyline `#CBD3DB` |
| `favicon.svg` | Browser tab, 16 px redraw; follows `prefers-color-scheme` | dark tile / white tile |
| `favicon-32.svg` | 32 px (bookmarks, pinned tabs); follows `prefers-color-scheme` | as above |
| `mask-icon.svg` | Safari pinned-tab mask, single colour | `#000000` (Safari tints it) |

Lockups and marks have transparent backgrounds. In the app shell the lockup is drawn inline by `MK.shell.lockup()`. The loops use `--mk-logo-loop-a` and `--mk-logo-loop-b`, and the wordmark uses `currentColor`, so the lockup follows the theme without swapping files.

Pages link the favicon relatively: `<link rel="icon" href="../brand/favicon.svg" type="image/svg+xml">`.

## Clear space

- Logomark: keep at least **8 units of the 48-unit grid** clear on every side (1/6 of the mark's height). At 24 px that is 4 px.
- Lockup: keep clear space equal to the **height of the cell opening**, 10 units, which is 0.21 × the lockup's height, on every side. Never place the lockup closer than this to text, borders or other marks.

## Minimum sizes

| Asset | Minimum | Below the minimum |
|---|---|---|
| Logomark (48-grid file) | 20 px | use `favicon.svg` (16 px redraw) |
| Favicon (16-grid) | 16 px | — |
| Horizontal lockup | 22 px tall (about 122 px wide) | use the logomark alone |
| Wordmark alone | 12 px cap height (about 16 px tall) | use the lockup or the mark |
| App icon | 32 px | use `favicon-32.svg` |

## Rules

- Do not recolour the loops with status colours. Mint stands for monitored or live relationships, and sodium for selection and brand. Neither is a severity colour.
- Do not rotate the mark, add a ring or tile behind it (except on the app icon), or fill the centre cell.
- Use the mark at least as large as the wordmark. Never set the wordmark larger than the lockup.
- The product name is always "MainsKeeper". The CLI and daemon are `mainskeeper` and `mainskeeperd`.
- Fonts: Sora (variable, OFL) and DM Mono 400/500 (OFL) live in `product/app/fonts/`, with `OFL.txt`.