The Tellby logo, and how to use it
The official logo is only the files on this page. Don't redraw it or fake it with a font — use the files as they are. Video end screens, thumbnails and partner material alike.
Logos
Dark letters on light backgrounds, white letters on dark ones. The orange dot is the same orange everywhere.
Orange square, white pin with a black outline, play triangle. Profile pictures, favicons, shortcuts.
The main logo. End screens, documents, web headers.
On photos, video and dark screens.
When the icon and the wordmark appear together. Spacing and proportions are fixed.
The lockup for dark backgrounds.
Only where space is very tight (phone menus, small watermarks).
The short form for dark backgrounds.
How the wordmark is built
Exactly the app header (Wordmark.tsx). Values are for a 26 type size; everything scales together.
- Letters
- TELLBY · Inter Bold 700 · capitals · outlined (looks the same without the font)
- Tracking
- 1.5 (0.058 × type size)
- Dot
- 8 across (0.31 × type size) · orange #FF6933
- Dot position
- 3 after the last letter · 4 from the top — the dot sits just above the cap line, top right
Clear space and minimum size
The unit is the dot's diameter (D). Keep D × 3 clear on every side — no text, pictures or screen edges.
| Logo | Screen (min.) | Print (min.) |
|---|---|---|
| Wordmark · lockup | 80 px wide | 20 mm wide |
| Short form T• | 16 px tall | 5 mm tall |
| App icon | 24 px | 8 mm |
Give the app icon at least 1/8 of its side as clear space. Corners may follow the place it sits in (iOS rounded square, round avatars); the drawing inside never changes.
Don'ts
Changed like this, it is no longer the Tellby logo.
Colour
The app (frontend/constants/theme.ts) and the web (theme.css) share these values. Contrast is WCAG (4.5 or more works for body text).
| Colour | Code | Use | Contrast |
|---|---|---|---|
| Orange (accent) | #FF6933 | The dot, primary buttons, selected things. Text on orange is always ink. | Aa6.19:1 on #16181D · Body text OKAa2.76:1 on #FCFAF8 · No text |
| Ink (text on orange) | #16181D | Text and icons on orange. ★Never white text. | Aa6.19:1 on #FF6933 · Body text OK |
| Background | #FCFAF8 | Light screen background. | Aa17.15:1 on #0F172A · Body text OK |
| Text | #0F172A | Body text and the wordmark on light backgrounds. | Aa17.15:1 on #FCFAF8 · Body text OK |
| Secondary text | #475569 | Descriptions, dates, small print. | Aa7.28:1 on #FCFAF8 · Body text OK |
| Outline · shadow | #111111 | 2 px outlines on cards and buttons, hard shadows. | Aa18.14:1 on #FCFAF8 · Body text OK |
| Dark background | #0B0B0D | Dark screens — text is white. | Aa19.66:1 on #FFFFFF · Body text OK |
AaWhite text on orange 2.87:1 · No text
Type
Inter for Latin, Noto Sans KR for Korean. Both are free (SIL OFL). Headings 700 · 800, body 400.
Hear the city
TELLBY 0123456789
도시를 소리로 듣다
지나치는 곳마다 이야기가 있어요
Size steps (app Typography)
display · 48 · 700Hear the cityh1 · 26 · 700Hear the cityh2 · 20 · 700Hear the citybody · 16 · 400Hear the citysmall · 14 · 400Hear the citymicro · 12 · 500Hear the city
Shape
Black outlines and hard, unblurred shadows are Tellby's face. No soft shadows, no gradients.
- Outline
- 2 px #111111 (1.5 px on high-density phones) · white on dark screens
- Shadow
- small 2px 2px 0 · cards 4px 4px 0 · blur 0
- Corner radius
- 8 · 12 · cards 14 · 16 · 24 · chips 10 · pill buttons fully round
- Touch size
- 44 px minimum
Taglines
Use them as written — don't shorten or reword. Korean where the page is Korean, English where it is English.
Addresses
- Websitetellby.us
- App Storeapps.apple.com/app/id6761290781
- Google Playplay.google.com/store/apps/details?id=com.humblekim.cased
- Contentscontent.tellby.us
- YouTuber placeslink.tellby.us
- Trip bookbook.tellby.us
- Squaregrnd.tellby.us
In video descriptions and end screens, one address (tellby.us) is enough — it sends each device to its store.