# yothere brand mark · rev 2026.07

> Canonical brand guidelines for the yothere mark. Authored by Oscar (July 2026).
> The visual reference is [brand-mark-rev-2026.07.html](brand-mark-rev-2026.07.html), open it in a browser to see the actual cuts, colours, and misuse examples. This file is the same content transcribed for grep and agent consumption. If they ever disagree, the HTML wins.

## The mark is a terminal, mid-type.

The wordmark is set in the product's own body face, and the block cursor sits flush against the final letter as though the name had just been typed and the machine were waiting for the next keystroke. There is no glyph, no monogram and no icon. The cursor is the mark.

## 01 · Primary wordmark — one lockup, two sizes in use

The mark ships at two sizes today. The footer cut is exactly double the header cut, and because the cursor is measured in `ch` and `em` it scales with the word instead of being redrawn.

| Size | Placement |
|---|---|
| 1.28rem | site header |
| 2.56rem | site footer |

## 02 · Anatomy — four measurements, and nothing else

Every value below is the one in the stylesheet. The cursor's proportions are relative units on purpose: the mark has no fixed pixel size to honour.

| Element | Value | Rationale |
|---|---|---|
| Wordmark | Switzer 600 | Lowercase always, tracked +0.01em. The display face is the body face: the site runs one family, so the logo is not a foreign object on the page. |
| Block cursor | 0.82ch × 1.10em | Slightly narrower than a character and slightly taller than the cap: it reads as a cursor, not as a letter or a full-height bar. |
| Flush | gap: 0 | The cursor touches the final "e". Any gap turns it from a cursor into a punctuation mark sitting beside a word. |
| Baseline | -0.04em | Dropped a hair below the baseline so the block optically sits on the line rather than floating above it. |

## 03 · The two cuts — the cursor changes with the ground it sits on

The mark lives in two places. The marketing pages run the slate theme; the docs run the original dark one. The cursor is cut for each, so it holds the same weight of presence on both.

| Cut | Caret | Ground | Contrast |
|---|---|---|---|
| SLATE · marketing | `#ea580c` | `#edf0f5` | 3.12:1 |
| DOCS · dark | `#f4a58c` | `#0b0d10` | 9.83:1 |

**Open question:** the two cuts are not the same hue. The slate cursor moved to orange when the accent became lilac; the docs cursor is still the coral it was when the accent was teal. Aligning the dark cut to a light orange would make the mark one colour in two values, which is what it should be.

## 04 · Behaviour — it types itself, then waits

The mark is animated where it can be, and static everywhere it cannot. Server-rendered HTML always ships the full word, so a reader without JavaScript, or one who asked for reduced motion, sees "yothere" and a solid cursor.

| Moment | Behaviour |
|---|---|
| On load | types at 62ms/char, then the cursor blinks 4× and holds solid |
| Hover, home only | erases at 42ms/char and types "hello" |
| Leave or click | erases and retypes "yothere" |
| Footer | no hover; the cursor blinks 3× and holds |
| Favicon, first load | blinks 2×, then holds |
| Reduced motion | full word, solid cursor, no animation |

## 05 · App icon & favicon — the cursor alone carries the brand

At tab size the word is unreadable, so the icon drops it and keeps the cursor: a single rounded block, the one element nothing else on the page owns. Its two fills follow the browser's colour scheme, not the site's theme, so the icon stays legible against either chrome.

| Fill | Chrome |
|---|---|
| `#ea580c` | light chrome |
| `#fb923c` | dark chrome |

## 06 · Colour — orange is the counterpoint, not the complement

The cursor is the one warm thing on a cool page, which is the whole point: it is the element that should catch your eye. It is worth being precise about why it is orange, because the obvious explanation is wrong and someone will eventually try to "fix" it.

The accent is a lilac at hue 263. Its true complement is hue 83, a lime, and a lime on a light ground measures 1.28:1: it disappears. Orange sits about 125 degrees from the lilac, which is a triadic relation, and orange is properly the complement of blue. The earlier coral cursor really was complementary, because the accent was then a teal at hue 170. That reasoning ended when the accent moved.

Within orange, the mark takes the brightest value that still clears 3:1 against the slate ground. Brighter oranges are legal, since WCAG exempts logotypes from contrast entirely, but they go weak and chalky on a light grey and stop reading as a cursor.

| Colour | Role | On | Ratio | Verdict |
|---|---|---|---|---|
| `#ea580c` | cursor, slate | `#edf0f5` | 3.12:1 | USED |
| `#f4a58c` | cursor, docs | `#0b0d10` | 9.83:1 | USED |
| `#fb923c` | favicon, dark chrome | `#0b0d10` | 8.60:1 | USED |
| `#ff6b1a` | brighter orange | `#edf0f5` | 2.49:1 | TOO WEAK |
| `#97ec13` | true complement | `#edf0f5` | 1.28:1 | INVISIBLE |
| `#6d28d9` | accent, for reference | `#edf0f5` | 6.22:1 | NOT THE MARK |

## 07 · Clear space & minimum size — the cursor measures its own margin

Keep one cursor width of empty space on every side. The rule scales with the mark for free and needs no table: if the block fits in the margin, the margin is right.

Minimum size is 16px for the wordmark. Below that the cursor thins toward a hairline and the lockup reads as a typo. Where less room than that exists, use the icon.

## 08 · Misuse — four ways to break it

| Rule | Why |
|---|---|
| NO GAP | Detached, the block stops being a cursor and becomes punctuation. |
| NO HAIRLINE | A thin bar is a text caret. This mark is a terminal's block cursor. |
| NO RECOLOURING | The cursor is orange in both cuts. Not the accent, and not its complement. |
| NO RESTYLING | No italic, no caps, no other weight, no other family. Switzer 600, lowercase. |

---

Implementation lives in `website/`: `SiteHeader.astro`, `index.astro`, `favicon.svg`.
