Brand

Design system

tailthat

The logo, colors, type and pieces Tailthat is built from. Everything on this page is rendered with the same tokens and classes as the rest of the site, so what you see here is what ships.

Logo

The wordmark splits the name with color: “tail” in Tail green, “that” in ink. The mark is the same idea as a monogram, one green t and one ink t.

Mark sizes

On a light page

tailthat

The mark keeps its dark square. In the wordmark, “that” turns Night and “tail” darkens to #17a35c so it stays readable.

Write it “Tailthat” in sentences. Page titles, copy and legal text keep the single capital. Only the logo is lowercase and two-tone.
Mark alone under 24px. Favicons, avatars and badges use the tt mark without the wordmark.
Leave room. Keep at least half the mark’s width clear around the logo.
Don’t restyle it. No other colors, outlines, rotation or effects. Use <Brand /> or <BrandMark />.

Color

A dark, slightly blue night with one green. Green and red mean Tail and Fade everywhere on the site, so never use them for decoration.

Surfaces

Night#0b0f14

bg

Page background. Also the field fill, so inputs sit below the card they are on.

Panel#121820

panel

Cards, sheets and dialogs.

Raised#18212b

panel-2

Buttons, hover rows and anything raised inside a card.

Line#233040

line

Borders and dividers.

Text

Ink#e6edf3

ink

Headings, body text and "that" in the wordmark.

16.3:1 on Night

Ink 2#9fb0c0

ink-2

Secondary text and long paragraphs.

8.6:1 on Night

Ink 3#718395

ink-3

Timestamps, labels and hints. The dimmest text that still passes 4.5:1 on Night and Panel.

4.9:1 on Night

Signals

Tail green#35d07f

accent

Primary buttons, links, focus, "tail" in the wordmark and the first t in the mark.

9.6:1 on Night

Deep green#062a17

accent-ink

Text on a green fill.

Tail#35d07f

tail

The Tail action and won picks. The same green as accent, named for what it means.

9.6:1 on Night

Fade red#ff6b6b

fade

The Fade action, lost picks, live games and errors.

6.9:1 on Night

Pending gold#f5c451

gold

Ungraded picks and notices.

11.8:1 on Night

Use a token as a Tailwind class (bg-panel, text-ink-3, border-line) or a CSS variable (var(--color-accent)). Tints use opacity, like bg-tail/15.

Type

Inter for everything, in four weights (400 to 700). Numbers that line up, like odds and records, use the mono face with tabular digits.

Page titletext-2xl font-bold

How Tailthat works

Sectiontext-lg font-bold

Tonight’s slate

Picktext-base font-semibold

Liberty −4.5 vs Aces

Bodytext-sm text-ink-2

Post a bet in ten seconds. Others tail it, fade it, or reply.

Labellabel

Odds

Numbersnum text-sm

+145 −110 12-7 +4.20u

Components

Shared classes from styles.css. Reach for these before writing new styles.

.btn .btn-primary .btn-sm

.btn-active-tail .btn-active-fade

WonLostPushPendingLive

.pill .pill-won .pill-lost .pill-push .pill-pending .pill-live

On $NYL tonight #WNBA at −110

.tag .num

OddsAmerican odds, like −110 or +145.

.label .field .hint

Market

select.field

That username is taken. Try another.

Grades land after the final whistle.

.alert .notice

LibertyAces

.segs .seg-opt .seg

HotLatestFollowing

.tab [aria-selected]

Dana R. @danapicks · 12m

Liberty −4.5 −110

.card

Words

Short, plain and friendly. Say what happens, in the words bettors already use.

Tail: I’m on it too. Always green, with ↗.
Fade: I’m taking the other side. Always red, with ↘.
Pick: One bet someone posted. Not “prediction” or “tip”.
Record: Wins, losses and pushes, graded by the site, like 12-7-1.
Units: Stake size, so records compare without dollar amounts.
21+: Shown wherever we invite someone to post. We never take bets.