Branding

Customize the look and feel of your venue — name, logo, theme colors, typography, and domain.

The Venue Starter is designed so a venue operator can rebrand the entire app by editing two files and three env vars — no component changes required.

Venue Name

Set the site name via env var; it's picked up by config/venue.config.ts and propagated into <title>, the nav, and social metadata:

NEXT_PUBLIC_VENUE_NAME=Acme Prediction Markets

If unset, the starter falls back to "OddMaki Markets".

For a longer description (used in Open Graph tags and hero copy), edit config/venue.config.ts directly:

branding: {
  name: process.env.NEXT_PUBLIC_VENUE_NAME || 'OddMaki Markets',
  description: 'Your venue tagline here',
  logo: '/logo.svg',
  favicon: '/favicon.ico',
},

Logo and Favicon

Replace the default assets in public/:

public/logo.svg — header logo. SVG preferred so it scales and respects theme colors
public/favicon.ico — browser tab icon

If you rename them, update the branding.logo and branding.favicon paths in venue.config.ts.

Color Theme

Theme colors live in theme.config.json at the repo root. The minimal config is two brand colors:

{
  "brand": {
    "primary": "#00F0FF",
    "secondary": "#FF00E5"
  }
}

At build time, lib/theme/resolve.ts expands each brand color into a full 50–900 shade scale, auto-derives readable foreground colors, and wires them into HeroUI. You can optionally override surface and semantic colors:

{
  "brand": {
    "primary": "#6366F1",
    "secondary": "#EC4899"
  },
  "surfaces": {
    "background": "#0A0A0F",
    "card": "#14141F",
    "foreground": "#FFFFFF"
  },
  "semantic": {
    "success": "#00E68C",
    "warning": "#FFB800",
    "danger": "#FF6B6B"
  }
}

Any field you omit uses a sensible default. The resolver even picks an automatic foreground color based on contrast with the background.

Live Theme Editor

The starter ships with an interactive theme editor for experimenting without restarts. Enable it in any environment (typically staging) with:

NEXT_PUBLIC_ENABLE_THEME_EDITOR=true

Open the editor from the footer — drop in hex values, preview across the app, and export the resulting theme.config.json.

Typography

Fonts are centralized in config/fonts.ts. The starter uses Next.js font optimization, so you can swap in any next/font/google family by editing that file. The exported font variables are wired into app/layout.tsx and applied via Tailwind.

Domain Setup

Deploy the venue starter like any Next.js 15 app:

Vercel — vercel --prod, then add your domain in the dashboard
Self-hosted — pnpm run build && pnpm run start behind your own reverse proxy

Make sure your production env includes:

NEXT_PUBLIC_CHAIN_ID=84532
NEXT_PUBLIC_VENUE_ID=<your-venue-id>
NEXT_PUBLIC_SUBGRAPH_URL=<subgraph-endpoint>
NEXT_PUBLIC_VENUE_NAME=<display-name>

See Deploy the App for the full env list.

What's Next

Custom Features → — toggle or add new feature modules
Custom Access Logic → — ship your own access-control contract
SDK Reference → — build custom flows on top of the SDK