Fork Guide Customization

Fork Guide: Customization

Everything visual and community-specific in ZAO OS is controlled through community.config.ts and Tailwind. This guide covers every knob you can turn.

---

Branding

Name & Tagline

name: 'YOUR COMMUNITY',
tagline: 'Your tagline here',

These appear in the header, landing page, metadata, and throughout the UI.

Colors

colors: {
  primary: '#f5a623',        // Gold — buttons, links, highlights, accents
  primaryHover: '#ffd700',   // Lighter gold — hover states
  background: '#0a1628',     // Deep navy — main page background
  surface: '#0d1b2a',        // Slightly lighter — cards, panels, modals
  surfaceLight: '#1a2a3a',   // Lightest dark — hover states on surfaces
},

ZAO OS is a dark-theme-first app. The color system assumes a dark background with a bright accent. If you want a light theme, you'll need to modify the Tailwind config and component classes more extensively.

Tips for choosing colors:

• primary should contrast well against background — this is your brand color
• surface should be close to background but visually distinct — it's for cards and panels
• Keep surfaceLight subtle — it's for hover states, not standalone elements

Tailwind Theme

Colors from community.config.ts are used directly in component classes. The Tailwind v4 config extends the default theme. You can further customize in tailwind.config.ts:

• Font families
• Border radius
• Spacing scale
• Animation/transition defaults
• Breakpoints

---

Navigation Pillars

The app is organized into 5 pillars, each a top-level section:

pillars: {
  social: { label: 'Social', icon: 'chat' },
  governance: { label: 'Governance', icon: 'star' },
  library: { label: 'Library', icon: 'book' },
  tools: { label: 'Tools', icon: 'wrench' },
  contribute: { label: 'Contribute', icon: 'code' },
},

To rename a pillar: Change the label. The routing doesn't change — /chat is still /chat — but the sidebar and home page cards will show your label.

To reorder pillars: Reorder the keys. The sidebar renders them in object order.

To hide a pillar: You can't remove it from config alone (the routes still exist), but you can hide it from the sidebar by modifying src/components/navigation/Sidebar.tsx. See Fork Guide: Features for disabling entire feature areas.

---

Farcaster Channels

farcaster: {
  appFid: 19640,                                    // Your app's Farcaster ID
  channels: ['zao', 'zabal', 'cocconcertz', 'wavewarz'],  // Channels to monitor
  defaultChannel: 'zao',                            // Default channel in chat
},

• appFid — the Farcaster FID your app posts as. Create a new Farcaster account for your community if needed.
• channels — Farcaster channels your app monitors for casts. These appear as tabs in the chat view.
• defaultChannel — which channel loads first when users open chat.

---

Voice Channels (Spaces)

voiceChannels: [
  { id: 'general-hangout', name: 'General Hangout', emoji: '💬', description: 'Casual conversation' },
  { id: 'fractal-call', name: 'Fractal Call', emoji: '📞', description: 'Monday 6pm EST weekly fractal' },
  { id: 'music-lounge', name: 'Music Lounge', emoji: '🎵', description: 'Always-on listening room' },
  { id: 'tech-talk', name: 'Tech Talk', emoji: '💻', description: 'Technical discussions' },
  { id: 'coworking', name: 'Coworking', emoji: '🏢', description: 'Silent cowork with ambient presence' },
],

Add, remove, or rename channels. Each needs:

• id — unique slug (used in URLs and database)
• name — display name
• emoji — shown in channel list
• description — shown below the name

---

Radio Stations

music: {
  radioName: 'ZAO Radio',
  radioPlaylists: [
    {
      name: 'Ambition',
      artist: 'Stilo World',
      url: 'https://audius.co/dopestilo/album/ambition',
    },
    // Add more Audius playlists/albums...
  ],
},

Radio pulls from Audius playlists. Replace these with playlists that match your community's taste. Any public Audius playlist or album URL works.

---

Ecosystem Partners

partners: [
  {
    name: 'MAGNETIQ',
    description: 'Proof of Meet hub — verify real-world connections.',
    url: 'https://app.magnetiq.xyz',
    icon: 'magnet',
  },
  // ... add your own partners
],

Replace with your community's ecosystem. These show up on the /ecosystem page as cards with links.

---

Cross-Posting Channels

crossPosting: {
  telegram: {
    channelName: 'YOUR COMMUNITY',
    channelUrl: 'https://t.me/yourchannel',
  },
  discord: {
    serverName: 'YOUR COMMUNITY',
    inviteUrl: 'https://discord.gg/yourinvite',
  },
},

---

Snapshot Governance

snapshot: {
  space: 'your-ens.eth',
  hub: 'https://hub.snapshot.org',
  graphqlUrl: 'https://hub.snapshot.org/graphql',
  weeklyPollChoices: [
    'Initiative 1 — Description',
    'Initiative 2 — Description',
    // ... your community's priorities
  ],
},

You'll need a Snapshot space (free) at snapshot.org. The weeklyPollChoices are the options presented in weekly governance polls.

---

Contracts (Advanced)

If your community has on-chain contracts:

// Respect tokens on Optimism
respect: {
  ogContract: '0x...' as `0x${string}`,
  zorContract: '0x...' as `0x${string}`,
  chain: 'optimism' as const,
},

// Hats Protocol roles on Optimism
hats: {
  contractAddress: '0x...' as `0x${string}`,
  treeId: YOUR_TREE_ID,
  chain: 'optimism' as const,
},

// Nouns DAO on Base
zounz: {
  tokenContract: '0x...' as `0x${string}`,
  chain: 'base' as const,
  nounsBuilderUrl: 'https://nouns.build/dao/base/0x...',
},

// Arweave
arweave: {
  gateway: 'https://arweave.net',
  appName: 'YOUR-APP',
  // ... license and file size config
},

If you don't have these contracts, the features will gracefully degrade — no errors, just empty states. See Fork Guide: Features for how to disable features entirely.