# Jino Labs brand assets

Everything here is generated from one set of geometry constants, so it cannot
drift from the site. The live rendering rules are in
[`components/brand-mark.tsx`](../../components/brand-mark.tsx) and the tokens are
in [`app/globals.css`](../../app/globals.css). The customer-facing version of
this document is the `/brand` route.

To regenerate after a brand change:

```bash
python3 scripts/build-brand-assets.py      # vector masters
node scripts/rasterise-brand-assets.mjs    # every PNG
```

**Prefer the SVG.** Every logo here ships as both. The PNGs exist for tools that
cannot take vector (some slide decks, some partner upload forms). Anything that
scales, prints, or gets placed at an unknown size should get the `.svg`.

---

## Which file do I send?

| Situation | File |
|---|---|
| Someone asks for "your logo" | `logo/lockup-on-light.svg` |
| Placing on a white or light background | `logo/lockup-on-light.*` |
| Placing on a dark or photographic background | `logo/lockup-on-dark.*` |
| Space is too tight for the wordmark | `logo/mark-on-*.svg` |
| Wordmark alone, mark used separately nearby | `logo/wordmark-on-*.svg` |
| One-colour print, embroidery, engraving | `logo/lockup-mono-*.svg` (see caveat) |
| Conference programme, sponsor wall | `logo/lockup-on-dark.svg` |
| Profile picture, GitHub org, X, LinkedIn | `social/avatar-1024.png` |
| X / Twitter header | `social/x-banner-1500.png` |
| LinkedIn page cover | `social/linkedin-cover-1128.png` |
| Link preview when the site cannot generate one | `social/og-1200x630.png` |

---

## Contents

### `logo/`

The primary lockup: mark to the **left** of the wordmark, on one line.

| File | Sizes |
|---|---|
| `lockup-on-light.svg` + `.png` | 1600, 800, 400 px wide |
| `lockup-on-dark.svg` + `.png` | 1600, 800, 400 px wide |
| `mark-on-light.svg` + `.png` | 1024, 512, 256 px wide |
| `mark-on-dark.svg` + `.png` | 1024, 512, 256 px wide |
| `wordmark-on-light.svg` + `.png` | 1200, 600 px wide |
| `wordmark-on-dark.svg` + `.png` | 1200, 600 px wide |
| `lockup-mono-black.svg` + `.png` | 1600, 800 px wide |
| `lockup-mono-white.svg` + `.png` | 1600, 800 px wide |
| `mark-mono-black.svg` + `.png` | 512, 256 px wide |
| `mark-mono-white.svg` + `.png` | 512, 256 px wide |

`on-light` means **for use on** a light background, so its wordmark is ink.
`on-dark` is for dark backgrounds and its wordmark is white. All PNGs have a
transparent background.

> **The one-colour versions flatten the orange rule and the 30% bottom rule.**
> All three rules become solid, so the mark loses its tonal step. That
> contradicts the palette rules below and is deliberate: these exist only for
> processes that cannot reproduce a second colour **or a tint**, such as
> embroidery, engraving, and single-plate print. If the medium can carry colour
> or halftone, the mono files are the wrong choice.

### `icon/`

| File | Use |
|---|---|
| `favicon.ico` | Multi-resolution, 16 / 32 / 48 / 64 / 128 / 256 |
| `icon-{16,32,48,64,128,180,192,256,512,1024}.png` | General app and tab icons |
| `apple-touch-icon.png` | 180 px, iOS home screen |
| `android-chrome-{192,512}.png` | Android / PWA manifest |
| `maskable-{192,512}.png` | Android adaptive icons |
| `icon.svg` | The vector tile |

The icon is the mark on an ink tile with a 16/84 corner radius. The **maskable**
variants are full-bleed with no corner radius and the mark scaled to 62%, so
Android can crop them to any shape without clipping the artwork. Do not use a
maskable file as a normal icon: it will look oversized in its padding.

### `social/`

| File | Dimensions |
|---|---|
| `avatar-1024.png`, `avatar-400.png` | Square, full-bleed, safe to crop to a circle |
| `og-1200x630.png` | Link preview card |
| `x-banner-1500.png` | 1500 × 500 |
| `linkedin-cover-1128.png` | 1128 × 191 |

The site generates its own link preview at
[`app/opengraph-image.tsx`](../../app/opengraph-image.tsx). The static
`og-1200x630.png` here is a copy of that output for places you cannot point at a
URL. If the site's card changes, re-export this one.

### `palette/`

`palette-1600.png` is a swatch reference sheet with every token and its hex.

---

## Rules

**Clear space.** Keep free space equal to the **height of the mark** on all four
sides of the lockup. Nothing enters it: no type, no rules, no image edge.

**Minimum size.** The lockup stops being legible below **96 px wide** on screen
or 24 mm in print. Below that, use the mark alone, which holds down to 16 px.

**Backgrounds.** Ink `#0a0a0a` or white are the two intended surfaces. On a
photograph, use `on-dark` over a sufficiently dark area, or place the lockup on a
solid ink panel. Never place it on the orange.

**Palette.**

| Token | Hex | Role |
|---|---|---|
| `ink` | `#0a0a0a` | Page surface |
| `raise` | `#141414` | Hover / raised surface |
| `paper` | `#ffffff` | Primary text and marks |
| `signal` | `#e04e18` | Shapes and fills: the top rule, buttons |
| `signal-ink` | `#f0632a` | Orange **text** on ink, the only accessible orange for type |
| `mist-1` | `#ffffff` @ 65% | Body and secondary text |
| `mist-2` | `#ffffff` @ 50% | Quiet mono labels |
| `mist-3` | `#ffffff` @ 30% | Bottom rule of the mark |
| `line` | `#ffffff` @ 12% | Hairlines and grid rules |
| `line-soft` | `#ffffff` @ 8% | Footer divider |

The mark's ink rule is `#0d0d0d`, very slightly lighter than the page surface.
That is intentional and predates the palette flip. Do not "correct" it.

**Type.** Archivo carries structure (headlines, body). JetBrains Mono is the
evidence voice: labels, numbers, buttons, code, and the wordmark. The wordmark is
JetBrains Mono uppercase at `0.14em` tracking. Mono is never used for a
paragraph.

**Never.**

- Unskew the mark, or change the −12° angle
- Rotate, round, or add effects to the rules
- Recolour the rules, outside the one-colour files above
- Set the wordmark in anything but JetBrains Mono
- Put the mark on the right of, above, or below the wordmark. **There is no
  stacked lockup**, by design. Where a horizontal lockup will not fit, use the
  mark alone.
- Redraw the mark by hand. Take the file.