# Huddle Network — brand sheet
Everything here is geometry, tokens, and type specs. Nothing is a raster asset, so the
whole identity can be reproduced exactly from this file plus the SVG sources in this folder.
## Files
| File | Use |
|---|---|
| `logomark.svg` | Icon only — favicons, app tiles, avatars, small stamps |
| `logotype.svg` | Horizontal lockup — mastheads, letterheads, footers |
| `favicon.svg` | Same geometry as `logomark.svg`, wired as the site icon |
## The mark
Six dots on a ring with one solid dot at the centre — a cluster, a huddle. Deliberately
generic: no industry pictogram, no letterform, no metaphor that dates or limits it. It
stays legible down to 16px and works in one colour.
Geometry on a 32×32 grid:
- Ring: 6 dots, radius `8.8` from centre `(16,16)`, dot radius `3.3`, at 0°/60°/120°/180°/240°/300°
- Centre: dot radius `4.1` at `(16,16)`
- Accent: the 300° dot (upper right) is the only coloured element — `#0F5D52`
- Monochrome use: drop the accent, all dots `#0E1214` (or all `#FFFFFF` on dark)
Dot coordinates, if you are redrawing rather than copying the file:
```
(24.80, 16.00) (20.40, 23.62) (11.60, 23.62)
(7.20, 16.00) (11.60, 8.38) (20.40, 8.38) accent
centre: (16.00, 16.00)
```
## Lockups
**Horizontal** (default): mark at 30px + wordmark. `HUDDLE` in 700, letter-spacing `0.06em`;
`NETWORK` in 500, letter-spacing `0.22em`, colour `--muted`, baseline-aligned after a 7px gap.
**Stacked**: mark above, `HUDDLE` over `NETWORK`, both centred — for square and social placements.
Clearspace: at least the width of the centre dot (`4.1` units, ~13% of mark height) on all sides.
Minimum sizes: mark `16px`, lockup `88px` wide.
Never: outline the mark, recolour individual dots, rotate it, add a gradient or shadow,
or place the lockup on a busy photograph without a solid panel behind it.
## Colour
| Token | Value | Use |
|---|---|---|
| `--ink` | `#0E1214` | Primary text, mark |
| `--paper` | `#F7F6F3` | Page background |
| `--surface` | `#FFFFFF` | Cards, panels |
| `--muted` | `#5B5F63` | Secondary text (5.4:1 on paper) |
| `--line` | `rgba(14,18,20,.10)` | Hairlines, borders |
| `--accent` | `#0F5D52` | The one accent — links, focus, active states |
| `--accent-soft` | `#E7F0ED` | Accent tint for fills |
One accent only. If a surface needs a second colour to work, the layout is wrong.
## Type
- **Display / UI — Archivo** (400, 500, 600, 700). Headings tight (`-0.03em`), wordmark tracked open.
- **Technical — IBM Plex Mono** (400, 500). Domains, indices, counts, metadata.
Both from Google Fonts. Fallbacks: `"Helvetica Neue", Arial, sans-serif` and
`ui-monospace, monospace`. Keep it to these two families — more is drift.
## Reuse
```html
```
Drop the `:root` token block from `index.html` into any new property and it inherits the
whole system. The mark is inlined as `