# Brand & Design Guide

> **In one sentence:** this is the public brand guide for nstop — the voice, colors, type, logos, spacing, and iconography used across every surface, and the source of the downloadable brand kit.

**Design direction:** Quiet Glass Transit. Calm, grounded, plain, concise. The colors, logos, and type that carry one voice across every surface.

---

## Voice

**Voice statement:** nstop sounds like a well-informed friend who happens to live here. Not a brand, not a bot, not a tour guide. Calm, direct, honest about what it knows and doesn't, and uninterested in being clever when you just need to catch a bus.

### Principles — Do vs. Don't

| Principle | Do | Don't |
|---|---|---|
| **Calm** | Tram 19 is cancelled. Take Tram 17 instead — one stop longer, arrives the same time. | ⚠️ SERVICE ALERT!!! Tram 19 has been CANCELLED. Please find alternate transport immediately. |
| **Grounded** | Leave in 4 min for Bus 30 to Schiphol. On time. | Your journey will commence shortly via a suitable transport option. |
| **Plain** | Platform changed to 5b. Same train, same time. | Spoorwijziging: afwijkend vertrekspoor 5b. |
| **Concise** | +3 min. Still your best option. | Please be advised that the scheduled service is currently experiencing a three-minute delay; however, it continues to be the optimal choice for your travel needs. |

### Other voice rules

- The brand is lowercase **nstop** — one word, always. Even at the start of a sentence.
- **No emoji** in app copy or official brand copy. Marketing social may use sparingly.
- **24-hour time** (`14:32`), zero-padded hours (`09:04`).
- **Durations:** `4 minutes` (running copy) or `4 min` (tight). Never `4m`.
- **Dates:** short `19/04` (same-year), long `April 19` or `April 19, 2026`. ISO `2026-04-19` is data/debug only.
- **Sentence case everywhere.** Not Title Case. Not ALL CAPS (except overline).
- **Proper nouns stay Dutch** (Amsterdam Centraal, NS, OV-chipkaart).

### Banned words

`Oops`, `Whoops`, `Oh no`, `We're sorry` as standalone, `Please` as filler, `Fetching…`, `Loading your…`, `Try again` as the whole message, `Something went wrong`, `Awesome`, `Great!`, `Nice!`. No exclamation marks except celebratory social posts.

---

## Logo

The brand mark is a rail-line letter **N** with a Brand Orange stop-dot. Four asset families, each with a `_Dark` and `_Light` variant. The variant name describes the *ink color*, not the background. The pairing rule is inversion: `_Dark` goes on light backgrounds, `_Light` goes on dark backgrounds. The orange brand dot is the only element that never inverts.

### Asset families

| Family | Form | Contents |
|---|---|---|
| **Wordmark** | Transparent, text + dot | `nstop` with the counter of the `p` filled Brand Orange |
| **Symbol** | Transparent, mark only | N + stop-dot, no background |
| **Logo** | Squircle (iOS app icon form factor) | Symbol on a filled squircle ground |
| **Round Icon** | Circle | Symbol on a filled circular ground |

### File index

```
Wordmark_Dark.png      — "nstop" in purple, orange counter-dot in the p
Wordmark_Light.png     — "nstop" in gray, orange counter-dot in the p
Symbol_Dark.png        — Purple N on transparent
Symbol_Light.png       — Gray N on transparent
Logo_Dark.png          — Purple squircle + gray N
Logo_Light.png         — Gray squircle + purple N
RoundIcon_Dark.png     — Purple circle + gray N
RoundIcon_Light.png    — Gray circle + purple N
```

All assets available at `/brand/assets/`. Full kit: [/brand/assets/nstop-brand-kit.zip](/brand/assets/nstop-brand-kit.zip).

---

## Color

Every token is semantic, not hue-descriptive.

### Brand

| Token | Role | Hex |
|---|---|---|
| Brand Purple | Primary ink and accent | `#2E1332` |
| Brand Orange | Signal — live-dot, accents, brand dot, focus ring. Never text. | `#DB4F1A` |
| Brand Snow | Raised structural color; dark-mode brand ink | `#E8E6ED` |

### Base

| Token | Role | Light | Dark |
|---|---|---|---|
| Base 1 | App background (baseline) | `#F4F3F7` | `#0F0612` |
| Base 2 | Cards, sunken regions | `#EAEAF1` | `#1C0F20` |
| Base 3 | Hairlines, skeletons, stroke color | `#D9D4E0` | `#261432` |
| Action Orange | CTA fill, paired with white label text | `#B53C14` | `#B53C14` |

### Type

| Token | Light | Dark |
|---|---|---|
| Primary | `#1A0A1E` | `#F5F2F8` |
| Secondary | `#4A3B4E` | `#C6BDCB` |
| Tertiary | `#716376` | `#948A99` |
| Quaternary | `#ADA3B1` | `#6B5E71` |

### Semantic

| Token | Role | Light | Dark |
|---|---|---|---|
| Success | On time, confirmation | `#0E7A42` | `#4ECB86` |
| Caution | Minor delay, uncertainty | `#8A660D` | `#E0B94A` |
| Danger | Disruption, cancelled | `#B02E22` | `#F58478` |
| Info | Neutral system message | `#632F93` | `#BC8FE0` |

### Transit · Urban

| Mode | Light | Dark |
|---|---|---|
| Bus | `#4A2540` | `#B892B0` |
| Tram | `#6B1F3E` | `#DB84A4` |
| Metro | `#382848` | `#A37FA8` |
| Trolley | `#7A2E5A` | `#D088B8` |

### Transit · Other

| Mode | Light | Dark |
|---|---|---|
| Train | `#002F8E` | `#82ABFF` |
| Ferry | `#0A7570` | `#3DC8BD` |
| Walking | `#595F44` | `#AEB49A` |
| Cycling | `#557218` | `#B8D05B` |

### Cancelled service pattern

Cancelled services use the full layered treatment:

1. **Strikethrough** on the departure time and line name.
2. **Desaturated tone** via a pre-computed per-mode token (`--mode-<name>-cancelled`, derived as HSL saturation × 0.55, dark mode lightness + 0.12).
3. **Semantic Danger chip or icon** accompanying the entry.
4. **Explicit "Cancelled" copy** — never an em-dash, blank state, or abbreviation.

---

## Type

**DM Sans** for headlines and copy. **IBM Plex Mono** for numbers — tabular, slashed zero, `tnum · lnum · zero` always on.

### Scale

| Token | Size / line-height | Tracking | Role |
|---|---|---|---|
| display | 40 / 44 | −0.025em | Hero, marketing headline |
| h1 | 30 / 36 | −0.02em | Section headline |
| h2 | 24 / 30 | −0.015em | Subsection |
| h3 | 20 / 26 | −0.01em | Grouping, card headline |
| body | 17 / 22 | 0 | Primary running text |
| body-sm | 15 / 20 | 0 | Secondary, compact cells |
| caption | 13 / 18 | 0 | Metadata, labels |
| overline | 11 / 14 | +0.08em uppercase | Section labels (mono) |

### Mono · numbers

| Token | Size / line-height | Role |
|---|---|---|
| hero | 56 / 60 | Countdowns in primary position |
| time | 24 / 28 | Departure times in rows |
| data | 15 / 20 | Inline deltas, line codes, stop IDs |

**Rule:** DM Sans never renders numbers in product context. Times, deltas, line codes, stop IDs, countdowns — always Plex Mono (or SF tnum on Apple system surfaces).

---

## Spacing

6 tokens. Nothing above 24 px is a token — larger values are composed as multiples at layout time.

| Token | px |
|---|---|
| xs | 4 |
| sm | 8 |
| md | 12 |
| lg | 16 |
| xl | 20 |
| 2xl | 24 |

---

## Radii

| Token | Value | Role |
|---|---|---|
| chip | 12 px | Chips, mode pills, `Cancelled` chip |
| card | 16 px | Cards, sheets, modal panels |
| pill | 9999 px | CTA buttons, circular indicators |

---

## Iconography

Lucide on web at stroke-width 1.5. No emoji in official brand copy. Mode glyphs: bus, tram, metro, train, ferry, trolley, walking, cycling.

---

## Resources

- Full brand kit (zip): [/brand/assets/nstop-brand-kit.zip](/brand/assets/nstop-brand-kit.zip)
- Press & partnerships: [hello@nstop.app](mailto:hello@nstop.app)
- Site-wide machine-readable index: [/llms.txt](/llms.txt)

Version 1.0 · April 2026.