Brand guidelines · v1.0 · October 2026
The Tickline brand.
How Tickline looks and sounds: the logo and how to use it, the colours and type, and the voice we write in. Everything here is drawn from the same files the product uses.
01 · Essence
The steady line under a noisy market.
The name
A tick is the smallest move a price can make. A line is the price a market trades on. Tickline watches every one of them and passes on a clean, consistent stream.
Written Tickline in running text — one word, capital T. The lower-case tickline belongs to the logo only.
Personality
- Preciseexact figures, exact times
- Calmthe steady line, never the noise
- Livealways showing what is happening now
- Plaina trader's words, not ours
02 · Logo
A price, stepping tick by tick, ending on the live print.
The logo is the badge and the wordmark together. Use the files; never redraw or retype it.
Anatomy
- The badge. A 32-unit square, corner radius 8, in Signal Violet. It holds its shape at 16px.
- The tick line. Six steps on whole and half units — down, up, a dip, the break-out — stroked at 2.75 with round ends, in white.
- The live print. A Live Lime dot, radius 3, where the line ends: the last traded price.
- The wordmark. tickline in Geist SemiBold, tracked −2%, outlined. Its two i-dots are round and take the accent: Signal Violet on light, Live Lime on dark. The wordmark's x-height is 42% of the badge; the gap between them is 30%.
Clear space
A quarter of the badge's height on every side. Nothing enters it — not text, edges or other marks.
Minimum size
Logo 20px tall (80px wide). Mark 16px. Below 16px use the glyph without its badge.
Versions
Don't
03 · Colour
Violet leads. Lime means live.
Two brand colours on a cool ink-and-paper ground. Hex is canonical; the product uses the OKLCH values.
HEX#6D4AFF
RGB109 74 255
OKLCHoklch(0.562 0.251 283.7)
The brand colour. Primary actions, the badge, links, the wordmark's dots on light.
HEX#A895FF
RGB168 149 255
OKLCHoklch(0.730 0.151 290.4)
Signal Violet's partner on dark surfaces, where it carries Ink text.
HEX#C9FF3D
RGB201 255 61
OKLCHoklch(0.930 0.214 124.6)
Live, and only live: the mark's dot, live indicators, the wordmark's dots on dark.
HEX#0B0C10
RGB11 12 16
OKLCHoklch(0.155 0.009 274.3)
Dark ground of the public site; text on light.
HEX#14151B
RGB20 21 27
OKLCHoklch(0.197 0.012 277.8)
Raised surfaces on Ink: cards, panels, code.
HEX#FAFAFC
RGB250 250 252
OKLCHoklch(0.986 0.003 286.4)
Light ground of the desk and of print.
Proportion
Mostly ground. Violet for the one thing to do next. Lime in small doses, only where something is live — if everything glows, nothing does.
Reserved: market state
These colours say what state a market is in, everywhere we show one. Never use them for decoration, and never use violet to mean a state. Back and lay keep their blue and pink.
Contrast
| Pairing | Ratio | WCAG | Use |
|---|---|---|---|
| Aa 123 | 5.2:1 | AA | Button label on Signal Violet |
| Aa 123 | 7.8:1 | AAA | Button label on Violet Light |
| Aa 123 | 16.6:1 | AAA | Ink on Live Lime |
| Aa 123 | 19.6:1 | AAA | Text on Ink |
| Aa 123 | 3.8:1 | Large only | Signal Violet text on Ink — use Violet Light |
| Aa 123 | 1.2:1 | Never | Live Lime on white or Paper |
04 · Type
Geist for words. Geist Mono for numbers.
One family in two cuts, both open source (SIL OFL). Mono carries every figure, time, label and code sample, always with tabular numerals so columns line up.
Geist
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Regular 400 · Medium 500 · SemiBold 600
Geist Mono
01
0123456789 +−×÷=.,:%
Regular 400 · Medium 500
Display
Geist SemiBold · 60 / 62 · −4.5%
Tick by tick.
Heading 1
Geist SemiBold · 36 / 40 · −3%
What's trading right now.
Heading 2
Geist SemiBold · 18 / 26 · −2%
Exchange ladders
Body
Geist Regular · 16 / 26
Every market lands in the same tree with one canonical state.
Small
Geist Regular · 14 / 20
Refreshed every 30 seconds.
Label
Geist Mono Medium · 11 · +22% · uppercase
Market state · last hour
Data
Geist Mono · tabular figures
14:02:31 1,284 0.25
05 · Voice
Precise, calm, plain.
We write for people who read prices for a living. Respect their time: say the true thing, in their words, once.
Say what is real.
Every figure we publish is live or labelled as an example. If we don't carry it, we don't imply it.
1,284 markets open now.
Thousands of markets, always on!
Numbers over adjectives.
Our readers trade. A count, a time or a state beats a superlative.
Suspended at 14:02:31 UTC.
Lightning-fast, real-time updates.
Plain words, short sentences.
Name the thing the way a trader would. No jargon we invented.
The desk freezes a runner while the ball is bowled.
Leveraging dynamic runner-suspension orchestration.
Calm, never loud.
We are the steady line under a noisy market. No exclamation marks, no countdowns, no urgency.
The feed is opening to a first set of trading teams.
Don't miss out — sign up today!
06 · Data
Show the data the way traders read it.
Most of what Tickline shows is numbers. These rules keep them honest and scannable.
Tabular figures, right-aligned.
Every number column lines up digit for digit.
Time is UTC, to the second.
14:02:31 UTC for anything live. Dates as 10 Oct 2026.
No currency symbols.
Amounts are plain numbers; the currency belongs to the client's book.
Group thousands.
1,284 — never 1284 or 1.3k in a table.
State is a chip, in its reserved colour.
Lower-case words: open, suspended, closed, settled.
Empty means say so.
“No market is open this minute” — never a blank panel or a zero that might be an error.
| Soccer | Club A v Club B | 1,284 | suspended |
| Tennis | Player C v Player D | 312 | open |
| Basketball | Team E v Team F | 48 | closed |
Example values.
07 · Files
Logo files.
Vector SVGs with the wordmark outlined — no font needed. Use the reversed versions on dark backgrounds.
LogoLight backgrounds SVG
Logo, reversedDark backgrounds SVG- Stacked logoLight backgrounds, square spaces SVG
- Stacked logo, reversedDark backgrounds, square spaces SVG
Logo, one colour blackPrint, single-ink SVG- Logo, one colour whiteSingle-ink on dark SVG
Stacked, one colour blackPrint, single-ink SVG
Stacked, one colour whiteSingle-ink on dark SVG
MarkAvatars, favicons, app tiles SVG
Mark, one colour blackSingle-ink SVG
Mark, one colour whiteSingle-ink on dark SVG
GlyphInline, below 16px SVG
App icon, 512pxStores, social avatars PNG