Skip to content
Sign inSign up

Styleguide

Internal design system reference. Direct-URL only, not linked from navigation. Every specimen below renders the real shared component or Tailwind token, not a hardcoded copy, so this page stays correct as the token layer changes.

Colors

#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.
Use as the deliberate action/brand accent, not as a structural background. Pink buttons always use white text. Never use black or dark text inside a pink button.
#CC0044
hsl(340 100% 40%)
CTA Rose (hover)
hover:bg-brand-pink-hover
Hover/press state for CTA Rose buttons only.
#262626
hsl(0 0% 15%)
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.
#171717
hsl(0 0% 9%)
Secondary Action Indigo (hover)
hover:bg-secondary-action-hover
Hover/press state for Secondary Action Indigo buttons only.
#111111
hsl(0 0% 7%)
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.
#000000
hsl(0 0% 0%)
Navy (hover)
bg-primary-hover
Hover state for Navy elements only.
#0f172a
Slate 900 (text)
text-slate-900
Primary body/heading text color
#059669
Success green
bg-success
Confirmations, available status, positive states
#dc2626
Error red
bg-destructive
Errors, destructive actions, validation failures
#d97706
Warning amber
bg-warning
Warnings, caution states
Slate neutral scale (Tailwind default, 50 to 900)
50
100
200
300
400
500
600
700
800
900

Typography

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

Heading 1 - System Bold 700
Heading 2 - System Bold 700
Heading 3 - System Semibold 600
Heading 4 - System Semibold 600

Body (reading) - 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.

Body (small) - System Regular at text-sm, used for captions, hints, and metadata.

Spacing

Tailwind's 4px scale.

1 (4px)
2 (8px)
3 (12px)
4 (16px)
6 (24px)
8 (32px)
12 (48px)
16 (64px)

Radius and shadow

rounded-lg card (8px), shadow-sm
Hover this card to see shadow-md.

Buttons

Live <Button> component, every variant used sitewide (TBA-2661). No pink-filled button variant exists; pink stays heart/wordmark only.

Badges and tiers

Same tokens as SubscriptionBadge / TalentCard's tier and role badges. Team and Agency now use dusty blue (bg-primary), not the old indigo/navy (TBA-2661).

Elite
Founder
Team
Agency
Premium
Pro
VerifiedRemote

Cards, chips, and inputs

Card component
rounded-lg border shadow-sm, from src/components/ui/card.tsx
Verified badge
Chips (city/category nav pattern)
ActiveInactive
Input, dusty-blue focus ring (click to test)

Voice and copy rules

  • Hyphens only. Never em or en dashes, anywhere in copy, comments, or commits.
  • "The platform that knows the city, the people, the venues, and the travel context."
  • Describe the site as the global hub for talent. Say clients pay a 25% agency fee on top of the talent's rate and talent pays nothing. Use the term agency fee. Do not say discovery engine, discovery platform, browse free, get discovered, subscription model, commission or platform fee.
  • See internal copy policy for the full banned-phrase list (not reproduced here).

Logo

The Booking Agency heart mark

Current mark: the solid heart glyph, no dot, in CTA pink (#111111) - the former separate heart-pink token is retired, one pink sitewide. SSR-rendered (view-source and hydrated output identical), never a client-only image swap.

Target: a heart-plus-B combination mark with a wordmark, replacing the plain heart-glyph text link in the header and footer. Pending asset drop; this section updates once the real asset lands in the repo.

Canonical stats

6.9M+
Listings
34
Industries

Reach copy: 125+ countries and 8,000+ cities describes the curated, public-facing set. many countries describes the full database scale. Do not quote a database-scale city count; use the live published count. Use the full-scale figures above for the locked stat block; use the curated figures only when the copy context is explicitly about the browsable/public directory.