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.
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.
#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."
Frame the model as a discovery platform and a subscription model. Do not describe fee, commission, or payment-flow mechanics in copy until the fee model is finalized.
See internal copy policy for the full banned-phrase list (not reproduced here).
Logo
Current mark: the solid heart glyph, no dot, in CTA pink (#FF0055) - 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
340K+
Cities
34
Industries
163
Countries
Reach copy: 125+ countries and 8,000+ cities describes the curated, public-facing set. 163 countries and 340K+ cities describes the full database scale. 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.
