Brand Kit

Logo files, colors, typography, and component examples for The Booking Agency. For the underlying design tokens, see the styleguide, this page is the practical, shareable version for the team and any partner.

Logo

Current mark: the solid heart glyph, no dot, in #FF0055 (CTA Rose - the heart mark now shares one pink token with the CTA color, no separate value). The SVG sources (favicon.svg, brand-mark.svg, og-default.svg, og-talent.svg) were updated to this value 2026-08-05. Not yet done: the raster PNG tiles above (logo-heart.png, logo-heart-nav.png, favicon-16x16.png, favicon-32x32.png, favicon-192.png, favicon.ico, favicon.jpeg, og-default.png, logo.png) still carry an older hex baked into their pixels - regenerating them needs an image pipeline this pass did not build. Flagged rather than silently left, same as the still-missing logo package below.

Not yet in the repo: a full logo package (primary lockup, wordmark, mono-dark, mono-light, mark-only variants) has not been supplied. The header and footer currently render an interim heart-plus-B monogram (see pages/_ssr/SSRShell.tsx, TBA-2480) rather than a founder-provided asset. Flagging this per this ticket's own instruction rather than recreating the logo from scratch, the founder will supply the master files.

Do not: recolor the mark, stretch it to a non-square aspect ratio, or add a drop shadow. Keep clear space around the mark equal to roughly a quarter of its height on every side. Do not shrink the mark below 16px, it stops reading clearly at small sizes.

Download mark (SVG)Download mark (PNG)

Color

Eight tokens are live today. #1E3A8A (Navy) is the de facto secondary color by volume, appearing in well over a hundred places sitewide. A separate pass is exploring whether a violet token replaces indigo as the formal secondary going forward. This page documents what is live now and leaves room for that entry, it does not pre-empt the decision.

#FF0055

hsl(340 100% 50%)

CTA Rose

bg-brand-pink

The one action colour sitewide: sign up, sign in, dashboard, book. Also the logo heart, the logo icon in the top menu, and the Sign up free button - the three deliberate exceptions that read the same token rather than a separate literal. One pink action per screen; if two things on a page are pink, one is wrong.

MUST be large or bold. White on #FF0055 measures 3.90:1, which FAILS the WCAG AA floor of 4.5:1 for normal text and clears only the 3:1 large-text floor - so a rose button needs at least text-sm font-semibold (or 24px regular). Shrinking a rose label to text-xs makes it non-compliant. Navy is 10.36:1 on white and carries no such constraint.

#CC0044

hsl(340 100% 40%)

CTA Rose (hover)

hover:bg-brand-pink-hover

Hover/press state for CTA Rose buttons only. Tailwind rose-700, not a computed offset.

#4F46E5

hsl(243 75% 59%)

Secondary Action Indigo

bg-secondary-action

Scope frozen 2026-07-27/28 (founder decision) to exactly one place: the talent profile Book/Inquiry/Request buttons. Never pair a pink CTA and an indigo CTA at equal size/weight, the luminance gap does the hierarchy work.

Do not widen this sitewide without a new founder decision, a same-night attempt to do so was reverted.

#2D22E0

hsl(243 75% 51%)

Secondary Action Indigo (hover)

hover:bg-secondary-action-hover

Hover/press state for Secondary Action Indigo buttons only.

#1E3A8A

hsl(224 64% 33%)

Navy

bg-primary

Structure: navigation, headings, secondary surfaces, links, focus rings, active chips/tabs, status badges, and BuildDot. Everything that is NOT the one action a visitor should take.

#152C6B

hsl(224 64% 27%)

Navy (hover)

bg-primary-hover

Hover state for Navy elements only.

#A9812B

Gold

(inline hex, no Tailwind/CSS token)

Elite tier badge only.

Do not use for any other badge or accent.

#12885B

Green

(inline hex, no Tailwind/CSS token)

"Available to book" status only.

Not a general success/confirmation color, that is a separate token, see /styleguide.

Exception: Supabase Edge Functions (Deno) cannot import the site's Tailwind/CSS token layer, so any function that needs CTA Pink for an email or Slack-message accent hardcodes the hex directly (for example supabase/functions/_shared/welcomeTemplates.ts). This is the one sanctioned case for a hardcoded hex outside this file, any other new hardcoded color in frontend code should be treated as a bug.

Typography

Headings and body text both use the device system UI font (TBA-2708), sitewide, no per-page exceptions.

Heading 1, System Bold

Heading 2, System Bold

Heading 3, System Semibold

Heading 4, System Semibold

Body text, System Regular. The platform that knows the city, the people, the venues, and the travel context. This paragraph shows the default body font at reading size, used for descriptions, copy blocks, and general content sitewide.

Components

EliteFounderTeamAvailable to book

Talent name

Category, City

Elite

Voice

We are a discovery platform, subscription model, for booking creative and technical talent, with a travel layer.
We say get discovered, get contacted, get booked. Clients reach talent directly through the platform.
See internal copy policy for the full banned-phrase list (not reproduced here).
Hyphens only, never em or en dashes, in copy, comments, or commits.

Downloads

Logo mark, SVG Logo mark, PNG

A full logo package (wordmark, mono-dark, mono-light) and a single zip download are not available yet, they ship here once the founder-provided master files land.