Brand
The tokens, components, and motifs that make up the Event Parlour visual language. Colors and type pull live from the same CSS variables used across product and docs.
01
Foundations
Palette, typography, radius, and elevation. Click a swatch to copy its resolved value.
Color
Typography
Bricolage · H1
Events, better.
Page titles, h1–h6, navigation section labels, sheet headers.
font-heading · --font-bricolage
Figtree · Body
The quick brown fox jumps over the lazy dog. Sell tickets with clarity.
Paragraphs, forms, buttons, tables, dashboard copy.
font-body / font-sans · --font-figtree
Geist Mono · Data
KES 12,450 · 860 tickets · ep_live_7f3a
Prices, stats, ticket counts, IDs, OTP fields, charts — always tabular-nums.
font-numbers / font-geist-mono · --font-geist-mono
Geist Pixel · Label
Payout ready
Short uppercase micro-labels (1–4 words): eyebrows, table headers, status chips. Use line for sections, square for badges. Never body copy or h1–h6.
font-pixel-square | grid | circle | triangle | line · --font-geist-pixel-square
Radius
Default (sharp)
--radius → 0
Event Parlour uses zero radius on cards, buttons, and inputs — crisp and editorial.
sm / md / lg / xl
calc(var(--radius) ± n) → 0
Tailwind radius tokens resolve to 0. Code blocks and inline snippets stay square.
Shadow
Shadows are sparse — borders carry most elevation. Use shadow only to lift interactive affordances.
02
Motifs
Edge mesh, columnar grids, and dashed rules. Full-bleed noise is out — atmosphere lives at the edges.
Hero and large editorial panels. Soft radial light leaks + column grids at edges only — keep the center clear for type.
Contained cards and motif previews. Prefer mask-faded or edge-cropped grids over full-bleed.
Fine texture inside feature panels. Keep contrast very low.
Empty states, upload targets, card meta footers.
Optional film grain under mesh. Felt more than seen — low opacity, editorial surfaces only.
Border language
solid
Default for cards, panels, inputs, tables, setup status blocks, and navigation chrome.
border border-border
dashed
Empty states, file dropzones, avatar upload placeholders, optional marketing bands. Signals “waiting for content”.
border border-dashed border-border
dotted
Avoid in product UI. Do not use as decorative grid backgrounds.
border border-dotted border-border
03
Components
Live examples from the product component library.
Buttons
Inputs
Card
Status panels
Set up payout before selling paid tickets
Action neededKenya organizers register Paybill, Till, or bank in Billing.
Tabs
createEvent({ pricing: "PAID", currency: "KES" })Badges
04
Logo
Use the mark at 20px minimum. Prefer the wordmark when the brand needs to read at a distance.
05
Voice
How Event Parlour communicates across docs, product copy, and marketing.
Clear over clever
Name things what they are. Payout, KYC, ticket tier — not abstract product jargon.
Terse, but warm
Short sentences. Organizers are busy. Sound helpful, not salesy.
Show the status
Tell people when they are ready, blocked, or done. Setup panels beat mystery errors.
Sharp, not loud
Zero radius, solid borders, mono for data, pixel for micro-labels. Precision over decoration.
Token source: lib/brand/guidelines.ts