Teleseme brand guide

01 · The story

The teleseme, the PBX, and Teleseme.

The teleseme, 1890s to 1910s

F. Benedict Herzog's electric signalling dial hung in each room of the grand hotels: a metal plate the size of a dinner plate, with 100 to 140 requests printed in rings. The guest turned a pointer to one and pressed a red push button. In the office, a reddish spot appeared on a numbered glass panel, the electrolytic annunciator, and an attendant read the request from a matching dial.

Drawing after Electric Telegraphy (Houston and Kennelly, 1896), Fig. 139. Research and sources: teleseme-research.md.

The PBX, 1910s to now

The private branch exchange put a telephone in every room. Guests could ask for anything, so hotels stopped needing the dial. They also lost what the dial did well: a request that stayed lit until someone dealt with it. A request on the phone lasts as long as the call.

Teleseme, 2026

We are replacing the PBX, and taking the old name with us. Every call gets to the right person; every request gets followed through. The mark is the dial reduced to its idea: rings crossed by columns, and one cell lit.

02 · Logo

The mark, the wordmark and the lockups.

The mark is a dial seen face on: eight request cells in the outer ring, four in the inner ring, a hub, and one cell lit in push-button red. Inner and outer gaps never line up, so no line runs through it; it must never read as a target or a crosshair. The wordmark is custom condensed capitals, after the Gothic lettering on the 1897 dial.

Construction

Outer ring r20 to r30, eight cells; inner ring r11 to r17.6, four cells; hub r8.6. Every gap, ring or radial, is 2.4 units.
The lit cell sits at half past one (22.5° to 67.5° clockwise from the top). It does not move. It is the one red thing in the logo.
Below 24 px, use the small mark: the dial collapses to a hub, one ring and the lit cell, drawn on a 16-pixel grid.

Versions

Primary markteleseme-mark.svg

Wordmarkteleseme-wordmark.svg

Small mark, 24 px and belowfavicon.svg (follows light and dark), favicon-mono.svg

Horizontal lockupThe default. Wordmark cap height is 0.41 of the mark; gap is 0.28 of the mark. SVG

Stacked lockupFor square spaces and signage. SVG

Teleseme Staff app icon1024 × 1024, opaque. The mark is 600 px across (58.6%), inside iOS's safe area. SVG

Colour versions

Full colourInk and red on light grounds.

One colourThe lit cell becomes an outline, so it still reads as selected. Fax, embossing, one-colour print. SVG

ReversedNickel and red on ink. SVG

Reversed, one colourSVG

Every lockup also exists in -mono, -reversed and -reversed-mono versions. All files are hand-built SVG generated from exact geometry by src/build_logos.py.

03 · Clear space and size

Give it a quarter of the dial on every side.

Clear space around any logo is one quarter of the mark's diameter (shown as q). Nothing else, text, edges or other logos, goes inside it.

Mark: 24 px minimum

Horizontal lockup: 96 px wide minimum

Wordmark alone: 72 px wide minimum

Below 24 px: small mark

04 · Logo don'ts

Leave the dial alone.

Don't

Recolour the lit cell. It is always push-button red, or an outline in one-colour work.

Don't

Rotate the mark or move the lit cell. It sits at half past one.

Don't

Stretch or squash it.

Don't

Add shadows, bevels, gradients or glows.

Don't

Set the whole mark in red. Red means one thing: the selected cell, the emergency, the primary action.

Teleseme

Don't

Retype the name in another typeface, or in lower case next to the mark. Use the wordmark file.

Don't

Place it on a mid-tone or busy ground. Use ink on light, the reversed mark on ink.

Don't

Outline the cells or redraw the mark with more or fewer rings.

05 · Colour

Metal, glass, ink, and one red button.

The grounds come from the teleseme's metal dial plate and the annunciator's glass front: cool, not cream. The only accent is the red of the original push button. It is reserved for emergency states and the single primary action on a screen. Colour is never the only signal: every red thing also has a word, a shape or a position that means the same.

Light

Nickel#EDEFEC · 237 239 236Page ground

Plate#F7F8F6 · 247 248 246Cards, inputs

Glass#DCE3E1 · 220 227 225Tinted panels

Ink#121A1F · 18 26 31Text and the mark

Slate#4B5862 · 75 88 98Secondary text

Rule#BFC7CA · 191 199 202Hairlines, decoration only

Control#7D8A92 · 125 138 146Input and control borders

Push-button red#B42318 · 180 35 24Emergency and primary action

Dark

Night#0D1316Page ground

Plate#161E23Cards

Glass#1F2A30Panels

Ink (on night)#E6EAE7Text and the mark

Slate (on night)#9BA7AESecondary text

Control (on night)#5A6872Control borders

Push-button red#B42318Fills: same in both themes

Red text (on night)#F97066Red words and small marks on dark

Text contrast (WCAG 2.2)

AA needs 4.5:1 for body text and 3:1 for large text (24 px, or 18.66 px bold) and for control borders. Ratios are calculated from the exact values above.

Text	Ground	Sample	Ratio	Result
Ink	Nickel	Room 306	15.2:1	AAA
Ink	Glass	Room 306	13.5:1	AAA
Slate	Nickel	Room 306	6.3:1	AA
Slate	Plate	Room 306	6.9:1	AA
Slate	Glass	Room 306	5.6:1	AA
Red	Nickel	Room 306	5.7:1	AA
White	Red	Room 306	6.6:1	AA
Ink (night)	Night	Room 306	15.4:1	AAA
Ink (night)	Glass (night)	Room 306	12.1:1	AAA
Slate (night)	Night	Room 306	7.6:1	AAA
Slate (night)	Glass (night)	Room 306	6.0:1	AA
Red text (night)	Night	Room 306	6.7:1	AA
White	Acknowledged green `#067647`	Acknowledged	5.7:1	AA
Demo text `#3D2700`	Demo amber `#FEC84B`	Test alert	9.1:1	AAA
Control border	Nickel	Input	3.1:1	AA for controls only
Red `#B42318`	Night		2.9:1	Fails. On dark grounds use red text `#F97066`

Red fills (buttons, alert screens, the lit cell) are #B42318 in both themes, always with white text.
Status colours (acknowledged green, warning orange, demo amber) belong to the product only, and match the Teleseme Staff app's theme. They never decorate marketing.
Tokens: tokens.json and tokens.css, next to this file.

06 · Typography

Dial lettering for headlines. Hyperlegible for everything else.

All three families are open source under the SIL Open Font License 1.1, which allows use, embedding, subsetting and redistribution, including commercially. We self-host subset WOFF2 files; the licence texts ship beside them.

Display: Archivo, width 68, weights 500 to 800

Every call gets to the right person.

Tracked capitals for labels: HOUSEKEEPING · MAINTENANCE · FRONT DESK

Omnibus-Type, 2016 to 2020. Condensed grotesque capitals echo the "Gothic" request lettering on the 1890s dials. Use for headlines and short labels, never for paragraphs or emergency text.

Text: Atkinson Hyperlegible Next, weights 400 to 700

A guest in Room 214 asks for extra towels. The call rings Ana, who is on shift, on her own phone. She taps Acknowledge, and the front desk sees it at once.

Braille Institute of America, 2024. Designed so that easily confused characters (I, l, 1; O, 0; rn, m) stay distinct for readers with low vision. Body copy, interface text and every emergency screen.

Data: Atkinson Hyperlegible Mono, weights 400 to 600

Room 306 · Floor 3 · 02:14:07

Room numbers, times, extensions and codes. Tabular figures, so columns line up.

Scale

h1 48 to 96Headline

h2 36 to 56Section title

h3 28Subsection

lead 22Lead paragraph

body 18Body text, 1.55 line height

label 13Label, tracked 0.1em

Sentence case for everything except labels. No all-caps sentences.
Times are 24-hour in the product (14:03, 02:14:07 on emergency screens); 12-hour is fine in marketing copy written for guests.

07 · Iconography

Plain lines, one lit element at most.

24-unit grid, 2-unit margin. Stroke 1.75 at 24 px, round caps and joins, 2-unit corner radius.
Outline only. A single element may be filled push-button red to show the selected or active state, the way the lit cell does in the mark. Never more than one.
Icons sit beside a word. In emergency screens an icon never replaces the words "911", "Panic" or the location.
No telephone-handset icon as a brand symbol, no bells, no sirens, no shields.

Desk

Staff

Safety, location

Request

Acknowledged

Shift handoff

Room

Message

On shift

Property

08 · Graphic devices

The dial and the annunciator.

Two devices from the original system carry the brand where the logo is too small to say much. The dial explains routing: many requests, one selected. The annunciator explains location: many rooms, one lit.

The dial

Rings run 270°, from nine o'clock round to six. The lower-left quarter stays open for text, as it did for the directions on the 1896 dial.
Requests in the outer ring in display capitals, grouped under arched, letter-spaced headings (the 1891 dial grouped "Eatables", "Sundries" and "Drinkables").
One cell lit at a time, with white lettering. The pointer only ever turns one way.
Never draw it as a clock: no numerals round the rim, no second hand, no ticking.

911 call: Room 306, Floor 3Example only.

The annunciator

A glass panel of round, numbered cells, by floor. One cell lit, as the room's spot was in the 1890s office.
The lit cell has three signals besides colour: bold white numerals, an ink ring around it, and a caption that names the room and floor in words.
Use it to show where something is. Never as wallpaper or a decorative dot pattern.

09 · Photography and illustration

Real hotels, at work.

Photography

Small independent hotels as they are: the back office, the laundry, a corridor at 6 am, the desk at night.
Staff doing the job, across roles: housekeeping, maintenance, night audit, the manager on duty. Phones in hand, not posed at the lens.
Daylight or the building's own light. Cool, true colour; no orange grading, no lens flare.
Faces and room numbers only with written consent. Never a real guest's name on a screen.
Don't: staged emergencies, injured or frightened people, sirens, police tape, stock models laughing at a tablet.

Illustration

Line drawings in ink at a 2 px stroke, after the period engravings, with ornament removed.
At most one red element, and only where something is selected, active or pressed.
Product screens shown flat and honest, with example data clearly labelled as an example.
Period illustrations may be shown when they are public domain, credited with publication and year. Draw our own versions rather than tracing them.

10 · Voice and tone

Plain, specific, and honest about what's built.

We write the way a good front-desk manager talks: short, clear, and kind without fuss. The teleseme's own directions led with the verb ("GRASP the crank pin", "PRESS the red push button"); so do our instructions.

Plain. Everyday words. "Rings whoever is on shift", not "intelligent omnichannel routing".
Specific. Rooms, floors, times and names of roles. Numbers when we have them; none when we don't.
Honest. Teleseme is pre-launch. Say what it is built to do. No customer counts, certifications, uptime figures or compliance guarantees.
Calm. No exclamation marks, no emoji, no jokes anywhere near safety.
Mechanics. Sentence case. No em dashes. Write "911", never "nine-one-one". Name buttons by what they do, and keep the name through the flow: "Acknowledge" becomes "Acknowledged".

Do

"The call rings whoever is on shift, on their own phone."

Don't

"Revolutionize guest engagement with AI-powered omnichannel routing."

Buzzwords describe nothing a hotel can check.

Do

"Teleseme Safety is built to alert every on-shift phone when 911 is dialled."

Don't

"Guaranteed Kari's Law compliance."

We can't promise a legal outcome, and it isn't shipped.

Do

"Acknowledgement not sent. Check your connection and tap again."

Don't

"Oops! Something went wrong."

Errors say what happened and what to do, without apologising.

Do

"Acknowledged at 14:03. Your colleagues can see that you are responding."

Don't

"Nice! Ana's on it."

Cheer is for marketing, not for someone mid-task.

Do

"Join the pilot."

Don't

"Unlock the future of hospitality."

Say what happens when they click.

11 · Emergency screens

Calm, legible, never cute.

The 911 and panic screens are the most important thing Teleseme shows. They are read at 2 am, half awake, on a phone that has just broken through silent mode. Brand expression stops at the door: no logo, no dial, no display face, no motion beyond the alert arriving. These rules match the Teleseme Staff app's alert and panic screens (apps/mobile/src/screens/AlertScreen.tsx, PanicScreen.tsx).

A 911 alert in its first 1.5 seconds. Buttons are disabled under the banner, so a tap meant for something else can't land on it.

An unacknowledged 911 or panic alert can't be closed in one tap. The confirmation names the alert and the place.

Panic, second step. A second tap confirms, so a pocket press can't send it. The screen says plainly that it alerts colleagues, not 911.

A test says so in its title and again in the body. Demo amber is kept for demo mode, so it never competes with red.

Rules

Order: what happened, where, when, then the one action. Title 34 px bold, location 28 px bold, time 20 px. Atkinson Hyperlegible Next only; numerals tabular.
Location in words: building, floor, then room or area, separated by middle dots. Never a map alone, never GPS coordinates.
Colour is never the only signal. The red ground always comes with the alert type in words, a distinct icon shape, and the full-screen takeover itself. Acknowledged states say "Acknowledged at 14:03" in words.
No personal data. No guest or staff names on the alert screen or in lock-screen previews. The alert carries the event type and location codes only.
Protect against mis-taps. An alert the user did not open shows "NEW ALERT: read before you tap" and disables its buttons for 1.5 seconds. Closing a 911 or panic alert without acknowledging asks first.
Say only what is true. "Sent" only after the server confirms. The panic screen always says it does not call 911.
Motion and sound: the alert slides in once. Nothing flashes, pulses or loops on screen (WCAG 2.3.1). Sound and vibration follow the platform's critical-alert rules.
Words: plain verbs on buttons ("Acknowledge", "Send panic alert", "Yes, send now", "Keep it open"). No exclamation marks, emoji, mascots or brand lines.
Contrast: white on #B42318 is 6.6:1. Minimum touch target 48 × 48 px; primary actions full width at the bottom, within thumb reach.