# 03 · Logo and mark

> The `//`, the wordmark, and the rules that keep them the same shape wherever
> they land. Every file is downloadable from the [downloads page](/downloads/);
> using them is governed by the [brand asset terms](/legal/).

---

## 3.1 The double slash

The Since Labs identity mark is **`//`** — two forward slashes, italic, set in
terracotta.

It is doing three jobs at once, which is why it works:

1. **A comment marker.** `//` opens a comment in every C-family language. The mark says *written by people who write code* without a single circuit board.
2. **A forward slash, twice.** Motion, and a directory path — the command center is a place things live under.
3. **A wordmark abbreviation.** At 16px in a browser tab, `//` is still legible where "Since Labs" is a smudge.

The mark is **never explained on-surface**. No tagline under it, no "the double
slash represents…". It earns its meaning by repetition.

---

## 3.2 The asset set

Everything below is generated from the vendor masters in
[`../assets/logo/source/`](../assets/logo/source/) by `npm run assets`, which
measures each master's real ink and crops the art board away. **Every file is
trimmed to its own artwork.** Align to the edge of the image and add the clear
space in § 3.3 — there is no hidden padding to compensate for.

### Lockups

| File | What it is | Use |
|---|---|---|
| `since-wordmark.svg` | `//` + "Since Labs", one line, ink text | The primary lockup, light grounds |
| `since-wordmark-on-ink.svg` | Same, paper text | Dark grounds |
| `since-wordmark-adaptive.svg` | Same, inverts with `prefers-color-scheme` | Grounds we do not control — the repo README, npm, editor previews |
| `since-wordmark-mono-ink.svg` | All ink | One-colour print, embossing |
| `since-wordmark-mono-paper.svg` | All paper | One-colour on dark |
| `since-wordmark-stacked.svg` | `//` beside "Since" over "Labs" | Space closer to square than to a strip |
| `since-wordmark-stacked-on-ink.svg` | Same, paper text | Dark grounds |
| `since-wordmark-stacked-adaptive.svg` | Same, self-inverting | Unknown grounds |
| `since-wordmark-stacked-mono-ink.svg`, `-mono-paper.svg` | One-colour | Print |

### Mark and tiles

| File | What it is | Use |
|---|---|---|
| `since-mark.svg` | Terracotta `//`, transparent | Default mark on any light surface |
| `since-mark-ink.svg` | Ink `//` | Monochrome, one-colour print, embossing |
| `since-mark-paper.svg` | Paper `//` | Monochrome on dark or photographic grounds |
| `since-mark-currentcolor.svg` | `stroke="currentColor"` | Inline in code — inherits the text colour |
| `since-tile-ink.svg` | Terracotta `//` on an ink rounded square | Avatars, app icons, favicons at ≥32px, social profile images |
| `since-tile-cream.svg` | Terracotta `//` on cream | Light-ground avatar |
| `since-tile-terracotta.svg` | Paper `//` on terracotta | High-emphasis app icon, sticker, merch |
| `favicon.svg` | The bare mark | Browser tab |

### Renders

`assets/logo/png/` carries transparent PNGs of every lockup (800 / 1600 / 3200 px
wide, 600 / 1200 / 2400 for the stacked one), the mark (256 / 512 / 1024) and the
ink tile at 180, 192, 512 and 1024 — the sizes iOS, Android and social profiles
ask for. `png/since-social-card.png` is the 1200 × 630 Open Graph card.

`since-labs-logo-kit.zip` is all of it, plus the terms, in one download.

### ✅ The wordmark is outlined

The lockups are **outlined paths, not live text**. They render identically with
no fonts installed — in Canva, in a PDF, on a printer's RIP. This supersedes the
old DM Sans `<text>` files, which needed the font present and fell back silently
to a system serif when it was not.

The wordmark's letterforms are a **serif**, not DM Sans. That is the artwork.
Do not rebuild the lockup by typing "Since Labs" in DM Sans beside the mark;
§ 3.6 covers this.

### The mark, twice

The distributable `since-mark.svg` and the inline `components/brand/Mark.tsx`
are the same geometry expressed two ways: two round-capped strokes on a 34 × 60
box, fitted to the vendor master and re-checked against it on every asset build.
The component exists because the nav needs the mark to inherit `currentColor`,
which a file behind an `<img>` cannot do. If the mark changes, both change.

---

## 3.3 Construction and clear space

The mark is drawn on a **34 × 60 box**: two strokes 6.07 units across, sheared
0.18 units horizontally for every unit of drop, with round caps struck at the
stroke's half-width. It is taller than it is wide — close to 17:30 — which is
why it never sits in a square without a tile around it.

**Clear space = the height of one slash stem (¼ of the mark's height) on every
side.** Nothing enters that box — no text, no rule, no image edge, no other logo.

```
        ┌─────────────────────┐
        │      clear space     │   clear space = 0.25 × mark height
        │   ┌─────────────┐   │
        │   │    / /      │   │   ← the mark
        │   │   / /       │   │
        │   └─────────────┘   │
        │                     │
        └─────────────────────┘
```

For the **wordmark**, the gap between the mark and the "S" of "Since" is fixed at
one slash-stem width. Do not re-space it by eye.

### Minimum sizes

| Asset | Screen | Print |
|---|---|---|
| Mark alone | 16px tall | 5mm |
| Tile | 24px | 8mm |
| Wordmark | 96px wide | 25mm |

Below the wordmark minimum, **drop to the mark**. Never shrink the lockup until
"Labs" closes up.

---

## 3.4 Placement

- **Top-left** in an app shell or a document. **Centred** only on an auth screen, a cover, or a sticker.
- On the dark auth panel the lockup sits top-left with a 48px margin — see `AuthLayout`.
- One logo per surface. A slide does not need it on every page; a footer credit is enough.
- Against a photograph: use the tile, never the bare mark. A bare `//` on a busy image is unreadable.

---

## 3.5 Colour rules

| Ground | Mark | Wordmark text |
|---|---|---|
| Paper `#F7F5F2` / white | Terracotta `#C4602A` | Ink `#1A1917` |
| Ink `#1A1917` / dark | Terracotta `#C4602A` *or* lift `#E07A38` | On-ink `#F5F1EA` |
| Cream `#F0E4DA` | Terracotta | Ink |
| Terracotta `#C4602A` | Paper `#F5F1EA` | Paper |
| Photograph | Use a tile | — |
| One-colour print | All ink, or all paper | Same |

On the dark auth panel the mark is rendered at **80% opacity** so it recedes
behind the wordmark — this is intentional and is the one sanctioned opacity
change.

### Grounds we do not control

A GitHub README, an npm page or an editor preview picks its own background, and
most people read them dark. A transparent ink wordmark disappears there. Use
`since-wordmark-adaptive.svg`: it carries a `prefers-color-scheme` rule and
serves the light row of the table above by default, the ink row on dark — mark
in `#E07A38`, text in `#F5F1EA`, both already sanctioned. Everywhere the ground
is known, keep using the deterministic files.

---

## 3.6 Misuse

Never:

- ❌ Rotate, skew, or change the slash angle
- ❌ Change the gap between the slashes, or between mark and wordmark
- ❌ Recolour to anything outside § 3.5 — no blue, no purple, no gradient, no rainbow
- ❌ Apply a drop shadow, glow, bevel, or outline
- ❌ Re-set the wordmark in any typeface — the lockup is outlines, not text
- ❌ Use Title Case variants — "Since labs", "SINCE LABS", "SinceLabs"
- ❌ Add a tagline, a ™, or a strapline inside the clear space
- ❌ Place on a busy photo without a tile
- ❌ Stretch, condense, or scale non-uniformly
- ❌ Reconstruct it by typing `//` in a different font and calling it the logo
- ❌ Generate, upscale, restyle or "redraw" it with a model — see [the terms](/legal/) § 5

---

## 3.7 The `//` as a typographic device

Distinct from the logo: `//` is also a **texture** the brand uses in running
material. Set in **Geist Mono, terracotta**, it can:

- prefix an eyebrow label — `// AI NATIVE LAB`
- open a section in a deck
- mark a pull-quote or a stat callout
- act as a bullet in a list of proof points

This is not the logo, so clear space does not apply. But keep it to **one
per surface** — the device stops meaning anything if it is decoration.

---

## 3.8 Favicon and app icons

| Context | Asset | Notes |
|---|---|---|
| Browser tab | `favicon.svg` | Bare terracotta mark, transparent |
| iOS / Android home screen | `png/since-tile-ink-180.png`, `-192`, `-512` | Tile — a bare mark disappears in the OS's own rounded square |
| Social profile (LinkedIn, X) | `png/since-tile-ink-512.png` | Generous padding, never tight to the edge |
| Slack / Notion workspace icon | `since-tile-terracotta.svg` | Reads at 20px in a sidebar |

**Product apps do not get bespoke icons.** They get an emoji (Sora is `🏗️`) on a
`surface-mist` or `accent-soft` rounded tile. See `01-foundation.md` § 1.5.