MyBiz.Fit Configuration Reference

Definitive reference for humans and coding agents. Covers every field, every combination, every theme.

System Overview
Tenant YAML Schema
Theme Configuration
Layout Variants
Business Templates
Prompt Template for Agents
Quick Reference Tables

1. System Overview

MyBiz.Fit is a SaaS landing page platform for SMBs. Each tenant gets a unique landing page at mybiz.fit/<tenant-slug>.

How it works

Tenant signs up via chat widget
        ↓
You (or agent) create two files:
  1. data/tenants/<slug>.yaml    ← tenant config
  2. content/<slug>/_index.md    ← front matter only
        ↓
Hugo builds the site
        ↓
Page is live at mybiz.fit/<slug>

File structure

mybiz/
├── data/
│   ├── themes/                    # 41 theme presets (color + layout)
│   │   │
│   │   ├── # ── Original Themes ──
│   │   ├── dark-amber.yaml
│   │   ├── dark-crimson.yaml
│   │   ├── dark-forest.yaml
│   │   ├── dark-gold.yaml
│   │   ├── dark-lavender.yaml
│   │   ├── dark-lime.yaml
│   │   ├── dark-magenta.yaml
│   │   ├── dark-neon.yaml
│   │   ├── dark-ocean.yaml
│   │   ├── dark-olive.yaml
│   │   ├── dark-orange.yaml
│   │   ├── dark-rose.yaml
│   │   ├── dark-teal.yaml
│   │   ├── dark-violet.yaml
│   │   ├── light-lavender.yaml
│   │   ├── light-minimal.yaml
│   │   ├── light-ocean.yaml
│   │   ├── light-warm.yaml
│   │   │
│   │   ├── # ── OpenCode Themes (authentic palettes) ──
│   │   ├── dark-opencode.yaml
│   │   ├── dark-tokyonight.yaml
│   │   ├── dark-catppuccin.yaml
│   │   ├── dark-nord.yaml
│   │   ├── dark-gruvbox.yaml
│   │   ├── dark-dracula.yaml
│   │   ├── dark-kanagawa.yaml
│   │   ├── dark-one-dark.yaml
│   │   ├── dark-everforest.yaml
│   │   ├── dark-ayu.yaml
│   │   ├── dark-matrix.yaml
│   │   ├── dark-rosepine.yaml
│   │   ├── light-opencode.yaml
│   │   ├── light-tokyonight.yaml
│   │   ├── light-catppuccin.yaml
│   │   ├── light-nord.yaml
│   │   ├── light-gruvbox.yaml
│   │   ├── light-dracula.yaml
│   │   ├── light-kanagawa.yaml
│   │   ├── light-one-dark.yaml
│   │   ├── light-everforest.yaml
│   │   ├── light-ayu.yaml
│   │   └── light-rosepine.yaml
│   ├── templates/                 # 8 business-type presets
│   │   ├── restaurant.yaml
│   │   ├── salon.yaml
│   │   ├── contractor.yaml
│   │   ├── dental.yaml
│   │   ├── real-estate.yaml
│   │   ├── fitness.yaml
│   │   ├── retail.yaml
│   │   └── professional.yaml
│   └── tenants/                   # Per-tenant configs
│       └── rgresidences.yaml
├── prompts/
│   └── tenant-config.yaml         # Coding agent prompt template
├── layouts/
│   ├── _default/
│   │   ├── baseof.html            # Base template (layout detection)
│   │   └── list.html              # Landing page template (theme + sections)
│   └── index.html                 # Homepage template (MyBiz.Fit brand)
├── static/css/
│   └── landing.css                # All styles (tenant + homepage)
└── content/
    └── _index.md                  # Homepage (layout: "home")

2. Tenant YAML Schema

Single file per tenant at data/tenants/<slug>.yaml.

Complete schema

# ══════════════════════════════════════════════
# THEME
# ══════════════════════════════════════════════

theme: "dark-amber"                 # Required. Preset name from data/themes/.
                                    # Options:
                                    # Original:  dark-amber, dark-ocean, dark-forest,
                                    #            dark-rose, dark-crimson, dark-violet, dark-lime,
                                    #            dark-orange, dark-magenta, dark-gold, dark-teal,
                                    #            dark-neon, dark-lavender, dark-olive,
                                    #            light-minimal, light-ocean, light-warm, light-lavender
                                    # OpenCode:  dark-opencode, dark-tokyonight, dark-catppuccin,
                                    #            dark-nord, dark-gruvbox, dark-dracula, dark-kanagawa,
                                    #            dark-one-dark, dark-everforest, dark-ayu, dark-matrix,
                                    #            dark-rosepine,
                                    #            light-opencode, light-tokyonight, light-catppuccin,
                                    #            light-nord, light-gruvbox, light-dracula, light-kanagawa,
                                    #            light-one-dark, light-everforest, light-ayu, light-rosepine

accent: null                        # Optional. Hex color to override theme accent.
                                    # null = use theme default.
                                    # Example: "#e63946"

accent2: null                       # Optional. Secondary accent (lighter variant).
                                    # null = use theme default.
                                    # Example: "#ff6b6b"

# ══════════════════════════════════════════════
# BUSINESS INFO
# ══════════════════════════════════════════════

business:
  name: "string"                    # Required. Displayed in nav, footer, chat widget.
  tagline: "string"                 # Required. Hero headline.
  description: "string"             # Required. Hero body text (1-2 sentences).
  heroImage: "/path/to/image.jpg"   # Optional. Path relative to /static/.
                                    # Example: "/joes-pizza/images/hero.jpg"

# ══════════════════════════════════════════════
# SECTION TOGGLES
# ══════════════════════════════════════════════
# Set each to true/false. Disabled sections won't render.

sections:
  hero: true                        # Always recommended: true
  services: true                    # Service offerings, menu items, etc.
  video: false                      # YouTube video embed
  gallery: false                    # Photo gallery grid
  about: true                       # About section with description + image
  contact: true                     # Contact info cards (address, phone, email, hours)
  testimonials: false               # Customer reviews with star ratings
  branches: false                   # Multiple locations with map links
  products: false                   # Product catalog with images and prices
  cta: true                         # Call-to-action banner

# ══════════════════════════════════════════════
# SECTION DATA
# ══════════════════════════════════════════════
# Only fill in data for sections set to true above.

# ── Services ──
services:
  - name: "Service Name"            # Required per item
    description: "Short description" # Required per item
    icon: "🔧"                      # Emoji icon for the card

# ── Video ──
video:
  youtubeId: "dQw4w9WgXcQ"          # 11-character YouTube video ID
  title: "Video Title"              # Displayed as section headline

# ── Gallery ──
gallery:
  - "/path/to/image1.jpg"           # Array of image paths (relative to /static/)
  - "/path/to/image2.jpg"

# ── About ──
about:
  title: "About Us"                 # Section headline
  description: "Longer description" # Body text
  image: "/path/to/about.jpg"       # Optional. Displayed alongside text.

# ── Branches ──
branches:
  - name: "Main Office"             # Required per item
    address: "123 Main St, City, ST 12345"
    phone: "(555) 123-4567"
    mapUrl: "https://maps.google.com/?q=..."  # Optional. "View on Map →" link.

# ── Products ──
products:
  - name: "Product Name"            # Required per item
    price: "$29.99"                 # Display price (string, supports any format)
    description: "Product description"
    image: "/path/to/product.jpg"   # Optional. Product photo.

# ── CTA ──
cta:
  text: "Ready to Order?"           # CTA headline
  button: "Chat with Us"           # Button label
  action: "chat"                    # "chat" = opens chat widget, or a full URL

# ── Contact ──
contact:
  address: "123 Main St, City, ST 12345"
  phone: "(555) 123-4567"
  email: "hello@business.com"
  hours: "Mon-Fri 9am-5pm, Sat 10am-2pm"

# ── Testimonials ──
testimonials:
  - name: "Customer Name"           # Required per item
    text: "What they said..."       # Required per item
    rating: 5                       # 1-5 stars (integer)

# ══════════════════════════════════════════════
# CHAT WIDGET
# ══════════════════════════════════════════════

chat:
  welcome: "Hi! How can I help you today?"   # Welcome message in chat widget
  companyName: null                           # null = use business.name

# ══════════════════════════════════════════════
# SPECIAL REQUESTS
# ══════════════════════════════════════════════
# Free-form narrative for anything not covered above.
# Agents: Use this field for custom fonts, layout changes, brand guidelines, etc.

specialRequests: |
  null

Minimal tenant example

theme: "dark-amber"
business:
  name: "Joe's Pizza"
  tagline: "Fresh Pizza, Delivered Fast"
  description: "Authentic Italian pizza made with imported ingredients."
sections:
  hero: true
  services: true
  contact: true
  cta: true
services:
  - name: "Delivery"
    description: "Hot pizza to your door in 30 minutes"
    icon: "🛵"
cta:
  text: "Ready to Order?"
  button: "Chat with Us"
  action: "chat"
contact:
  phone: "(555) 123-4567"
chat:
  welcome: "Hi! Want to order a pizza?"

Content file

content/<slug>/_index.md — minimal, just front matter:

---
title: "Joe's Pizza"
layout: "landing"
tenantId: "joes-pizza"
---

3. Theme Configuration

Theme YAML schema

name: "Dark Amber"                  # Human-readable name
mode: "dark"                        # "dark" or "light"

colors:
  bg: "#06070b"                     # Primary background
  bg2: "#0a0c13"                    # Secondary/alternating background
  panel: "rgba(255,255,255,0.03)"   # Card/panel background
  line: "rgba(255,255,255,0.09)"    # Border color
  text: "#eceef5"                   # Primary text
  muted: "#8d93a6"                  # Secondary text
  dim: "#5d6273"                    # Tertiary/dimmed text
  accent: "#ffb000"                 # Primary accent color
  accent2: "#ffcf57"                # Secondary accent (lighter)
  accentRGB: "255,176,0"           # RGB triplet for rgba() usage

layout:
  hero: "left"                      # Hero layout variant
  cards: "glass"                    # Card visual style
  spacing: "default"                # Section spacing
  borders: "solid"                  # Border style
  animations: "fade"                # Scroll animation style
  eyebrows: "pill"                  # Eyebrow label style

Color fields explained

Field	Purpose	Dark default	Light default
`bg`	Page background, nav, footer	Near-black `#06070b`	Off-white `#f8f9fa`
`bg2`	Alternating section backgrounds	Slightly lighter `#0a0c13`	White `#ffffff`
`panel`	Card backgrounds	`rgba(255,255,255,0.03)`	`rgba(0,0,0,0.03)`
`line`	All borders	`rgba(255,255,255,0.09)`	`rgba(0,0,0,0.09)`
`text`	Headings, body text	Light `#eceef5`	Dark `#1a1a2e`
`muted`	Secondary text, descriptions	`#8d93a6`	`#4a5568`
`dim`	Footer text, tertiary	`#5d6273`	`#a0aec0`
`accent`	Buttons, links, eyebrows, highlights	Theme-specific	Theme-specific
`accent2`	Gradient endpoints, hover states	Lighter variant	Lighter variant
`accentRGB`	For `rgba(var(--accent-rgb), alpha)`	Comma-separated RGB	Comma-separated RGB

Accent override behavior

If tenant sets accent: "#ff0000", it overrides the theme's accent color. The accent2 and accentRGB still come from the theme unless also overridden.

# Tenant overrides accent only
theme: "dark-amber"
accent: "#ff0000"
# → accent2 stays #ffcf57 (from dark-amber)
# → accentRGB stays "255,176,0" (from dark-amber)

# Tenant overrides both
theme: "dark-amber"
accent: "#ff0000"
accent2: "#ff6666"
# → accentRGB still comes from theme ("255,176,0")
# → This may cause visual mismatch — override accentRGB too if needed

3.5 OpenCode Theme Reference

The OpenCode themes use authentic palettes from the OpenCode project. Each theme's colors are mapped from OpenCode's palette tokens to MyBiz.Fit's color fields.

Color Token Mapping

OpenCode Token	MyBiz.Fit Field	Notes
`neutral` (dark bg)	`colors.bg`	Primary background
`neutral` (light bg)	`colors.bg`	Primary background
`ink` (text)	`colors.text`	Primary text color
`primary`	`colors.accent`	Buttons, links, highlights
`accent`	`colors.accent2`	Secondary accent, hover states
`text-weak`	`colors.muted`	Secondary text
—	`colors.bg2`	Derived: ~8% lighter than `bg`
—	`colors.dim`	Derived: between muted and line
—	`colors.panel`	Derived: `rgba(accentRGB, 0.06)`
—	`colors.line`	Derived: `rgba(255,255,255,0.08)` dark / `rgba(0,0,0,0.08)` light
—	`colors.accentRGB`	Extracted from `primary` hex

Source Palettes (OpenCode → MyBiz.Fit)

dark-opencode

# Source: OpenCode default theme
source:
  palette:
    neutral: "#0a0a0a"     # → bg
    ink: "#eeeeee"         # → text
    primary: "#fab283"     # → accent (peach)
    accent: "#9d7cd8"      # → accent2 (purple)
    success: "#7fd88f"
    warning: "#f5a742"
    error: "#e06c75"
    info: "#56b6c2"
  overrides:
    text-weak: "#808080"   # → muted

dark-tokyonight

# Source: Tokyonight theme
source:
  palette:
    neutral: "#1a1b26"     # → bg
    ink: "#c0caf5"         # → text
    primary: "#7aa2f7"     # → accent (blue)
    accent: "#ff9e64"      # → accent2 (orange)
    success: "#9ece6a"
    warning: "#e0af68"
    error: "#f7768e"
    info: "#7dcfff"
  overrides:
    text-weak: "#565f89"   # → muted

dark-catppuccin

# Source: Catppuccin Mocha theme
source:
  palette:
    neutral: "#1e1e2e"     # → bg
    ink: "#cdd6f4"         # → text
    primary: "#b4befe"     # → accent (mauve)
    accent: "#f38ba8"      # → accent2 (pink)
    success: "#a6d189"
    warning: "#f4b8e4"
    error: "#f38ba8"
    info: "#89dceb"
  overrides:
    text-weak: "#6c7086"   # → muted

dark-nord

# Source: Nord theme
source:
  palette:
    neutral: "#2e3440"     # → bg
    ink: "#e5e9f0"         # → text
    primary: "#88c0d0"     # → accent (frost)
    accent: "#d57780"      # → accent2 (red)
    success: "#a3be8c"
    warning: "#d08770"
    error: "#bf616a"
    info: "#81a1c1"
  overrides:
    text-weak: "#616e88"   # → muted

dark-gruvbox

# Source: Gruvbox Dark theme
source:
  palette:
    neutral: "#282828"     # → bg
    ink: "#ebdbb2"         # → text
    primary: "#83a598"     # → accent (green)
    accent: "#fb4934"      # → accent2 (red)
    success: "#b8bb26"
    warning: "#fabd2f"
    error: "#fb4934"
    info: "#d3869b"
  overrides:
    text-weak: "#928374"   # → muted

dark-dracula

# Source: Dracula theme
source:
  palette:
    neutral: "#1d1e28"     # → bg
    ink: "#f8f8f2"         # → text
    primary: "#bd93f9"     # → accent (purple)
    accent: "#ff79c6"      # → accent2 (pink)
    success: "#50fa7b"
    warning: "#ffb86c"
    error: "#ff5555"
    info: "#8be9fd"
  overrides:
    text-weak: "#6272a4"   # → muted

dark-kanagawa

# Source: Kanagawa theme
source:
  palette:
    neutral: "#1f1f28"     # → bg
    ink: "#dcd7ba"         # → text
    primary: "#7e9cd8"     # → accent (blue)
    accent: "#d27e99"      # → accent2 (pink)
    success: "#98bb6c"
    warning: "#d7a657"
    error: "#e82424"
    info: "#76946a"
  overrides:
    text-weak: "#727169"   # → muted

dark-one-dark

# Source: Atom One Dark theme
source:
  palette:
    neutral: "#282c34"     # → bg
    ink: "#abb2bf"         # → text
    primary: "#61afef"     # → accent (blue)
    accent: "#56b6c2"      # → accent2 (cyan)
    success: "#98c379"
    warning: "#e5c07b"
    error: "#e06c75"
    info: "#d19a66"
  overrides:
    text-weak: "#5c6370"   # → muted

dark-everforest

# Source: Everforest Dark theme
source:
  palette:
    neutral: "#2d353b"     # → bg
    ink: "#d3c6aa"         # → text
    primary: "#a7c080"     # → accent (green)
    accent: "#d699b6"      # → accent2 (pink)
    success: "#a7c080"
    warning: "#e69875"
    error: "#e67e80"
    info: "#83c092"
  overrides:
    text-weak: "#7a8478"   # → muted

dark-ayu

# Source: Ayu Dark theme
source:
  palette:
    neutral: "#0f1419"     # → bg
    ink: "#d6dae0"         # → text
    primary: "#3fb7e3"     # → accent (cyan)
    accent: "#f2856f"      # → accent2 (orange)
    success: "#78d05c"
    warning: "#e4a75c"
    error: "#f58572"
    info: "#66c6f1"
  overrides:
    text-weak: "#5a6673"   # → muted

dark-matrix

# Source: Matrix theme
source:
  palette:
    neutral: "#0a0e0a"     # → bg
    ink: "#62ff94"         # → text
    primary: "#2eff6a"     # → accent (green)
    accent: "#c770ff"      # → accent2 (purple)
    success: "#62ff94"
    warning: "#e6ff57"
    error: "#ff4b4b"
    info: "#30b3ff"
  overrides:
    text-weak: "#8ca391"   # → muted

dark-rosepine

# Source: Rose Pine theme
source:
  palette:
    neutral: "#191724"     # → bg
    ink: "#e0def4"         # → text
    primary: "#9ccfd8"     # → accent (teal)
    accent: "#ebbcba"      # → accent2 (rose)
    success: "#31748f"
    warning: "#f6c177"
    error: "#eb6f92"
    info: "#9ccfd8"
  overrides:
    text-weak: "#6e6a86"   # → muted

light-opencode

# Source: OpenCode Light theme
source:
  palette:
    neutral: "#ffffff"     # → bg
    ink: "#1a1a1a"         # → text
    primary: "#3b7dd8"     # → accent (blue)
    accent: "#d68c27"      # → accent2 (amber)
    success: "#3d9a57"
    warning: "#d68c27"
    error: "#d1383d"
    info: "#318795"
  overrides:
    text-weak: "#8a8a8a"   # → muted

light-tokyonight

# Source: Tokyonight Light theme
source:
  palette:
    neutral: "#e1e2e7"     # → bg
    ink: "#273153"         # → text
    primary: "#2e7de9"     # → accent (blue)
    accent: "#b15c00"      # → accent2 (orange)
    success: "#587539"
    warning: "#8c6c3e"
    error: "#c94060"
    info: "#007197"
  overrides:
    text-weak: "#6b6f7a"   # → muted

light-catppuccin

# Source: Catppuccin Latte theme
source:
  palette:
    neutral: "#f5e0dc"     # → bg
    ink: "#4c4f69"         # → text
    primary: "#7287fd"     # → accent (blue)
    accent: "#d20f39"      # → accent2 (red)
    success: "#40a02b"
    warning: "#df8e1d"
    error: "#d20f39"
    info: "#04a5e5"
  overrides:
    text-weak: "#6c7086"   # → muted

light-nord

# Source: Nord Light theme
source:
  palette:
    neutral: "#eceff4"     # → bg
    ink: "#2e3440"         # → text
    primary: "#5e81ac"     # → accent (blue)
    accent: "#bf616a"      # → accent2 (red)
    success: "#8fbcbb"
    warning: "#d08770"
    error: "#bf616a"
    info: "#81a1c1"
  overrides:
    text-weak: "#6b7282"   # → muted

light-gruvbox

# Source: Gruvbox Light theme
source:
  palette:
    neutral: "#fbf1c7"     # → bg
    ink: "#3c3836"         # → text
    primary: "#076678"     # → accent (teal)
    accent: "#9d0006"      # → accent2 (red)
    success: "#79740e"
    warning: "#b57614"
    error: "#9d0006"
    info: "#8f3f71"
  overrides:
    text-weak: "#928374"   # → muted

light-dracula

# Source: Dracula Light theme
source:
  palette:
    neutral: "#f8f8f2"     # → bg
    ink: "#1f1f2f"         # → text
    primary: "#7c6bf5"     # → accent (purple)
    accent: "#d16090"      # → accent2 (pink)
    success: "#2fbf71"
    warning: "#f7a14d"
    error: "#d9536f"
    info: "#1d7fc5"
  overrides:
    text-weak: "#7d7f97"   # → muted

light-kanagawa

# Source: Kanagawa Light theme
source:
  palette:
    neutral: "#f2e9de"     # → bg
    ink: "#54433a"         # → text
    primary: "#2d4f67"     # → accent (blue)
    accent: "#d27e99"      # → accent2 (pink)
    success: "#98bb6c"
    warning: "#d7a657"
    error: "#e82424"
    info: "#76946a"
  overrides:
    text-weak: "#9e9389"   # → muted

light-one-dark

# Source: Atom One Dark Light theme
source:
  palette:
    neutral: "#fafafa"     # → bg
    ink: "#383a42"         # → text
    primary: "#4078f2"     # → accent (blue)
    accent: "#0184bc"      # → accent2 (cyan)
    success: "#50a14f"
    warning: "#c18401"
    error: "#e45649"
    info: "#986801"
  overrides:
    text-weak: "#a0a1a7"   # → muted

light-everforest

# Source: Everforest Light theme
source:
  palette:
    neutral: "#fdf6e3"     # → bg
    ink: "#5c6a72"         # → text
    primary: "#8da101"     # → accent (green)
    accent: "#df69ba"      # → accent2 (pink)
    success: "#8da101"
    warning: "#f57d26"
    error: "#f85552"
    info: "#35a77c"
  overrides:
    text-weak: "#a6b0a0"   # → muted

light-ayu

# Source: Ayu Light theme
source:
  palette:
    neutral: "#fdfaf4"     # → bg
    ink: "#4f5964"         # → text
    primary: "#4aa8c8"     # → accent (cyan)
    accent: "#ef7d71"      # → accent2 (orange)
    success: "#5fb978"
    warning: "#ea9f41"
    error: "#e6656a"
    info: "#2f9bce"
  overrides:
    text-weak: "#6e7681"   # → muted

light-rosepine

# Source: Rose Pine Light theme
source:
  palette:
    neutral: "#faf4ed"     # → bg
    ink: "#575279"         # → text
    primary: "#31748f"     # → accent (teal)
    accent: "#d7827e"      # → accent2 (rose)
    success: "#286983"
    warning: "#ea9d34"
    error: "#b4637a"
    info: "#56949f"
  overrides:
    text-weak: "#9893a5"   # → muted

4. Layout Variants

Layout block schema

layout:
  hero: "left"          # Hero section layout
  cards: "glass"        # Card visual style
  spacing: "default"    # Section vertical spacing
  borders: "solid"      # Border style across all elements
  animations: "fade"    # Scroll-triggered animation style
  eyebrows: "pill"      # Section label/eyebrow style

Hero variants

Value	Visual	CSS class
`left`	Text left, image right (2-column grid)	`.theme-hero-left` (default)
`centered`	Text centered, no image or image below	`.theme-hero-centered`
`full-image`	Full-width background image with text overlay	`.theme-hero-full`
`no-image`	Text only, no hero image	`.theme-hero-no-image`

Card variants

Value	Visual	CSS class
`glass`	Translucent panel, subtle border, lift + shadow on hover	`.theme-cards-glass` (default)
`flat`	Solid background, no border, no shadow	`.theme-cards-flat`
`solid`	Solid background with border, subtle lift on hover	`.theme-cards-solid`
`glow`	Accent-colored glow shadow on hover	`.theme-cards-glow`
`outlined`	Border only, transparent background	`.theme-cards-outlined`

Spacing variants

Value	Section padding	CSS class
`compact`	48px top/bottom	`.theme-spacing-compact`
`default`	80px top/bottom	`.theme-spacing-default`
`spacious`	112px top/bottom	`.theme-spacing-spacious`

Border variants

Value	Visual	CSS class
`solid`	`1px solid var(--line)`	`.theme-borders-solid` (default)
`dashed`	`1px dashed var(--line)`	`.theme-borders-dashed`
`none`	No borders on cards/sections	`.theme-borders-none`
`glow`	Accent-colored glow border on hover	`.theme-borders-glow`

Animation variants

Value	Visual	CSS class
`fade`	Fade up on scroll (translateY + opacity)	`.theme-anim-fade` (default)
`slide`	Slide in from left on scroll	`.theme-anim-slide`
`scale`	Scale up from 0.95 on scroll	`.theme-anim-scale`
`none`	No scroll animations	`.theme-anim-none`

Eyebrow variants

Value	Visual	CSS class
`pill`	Rounded pill badge, accent border, mono font	`.theme-eyebrows-pill` (default)
`underline`	Text with accent underline, no border	`.theme-eyebrows-underline`
`text`	Plain text, no decoration, no border	`.theme-eyebrows-text`
`none`	Hidden entirely	`.theme-eyebrows-none`

5. Business Templates

Templates are reference YAML files in data/templates/. They pre-fill sections and defaults for a specific business type.

Usage workflow

# 1. Copy a template
cp data/templates/restaurant.yaml data/tenants/joes-pizza.yaml

# 2. Edit the YAML (fill in name, description, services, etc.)
vim data/tenants/joes-pizza.yaml

# 3. Create the content file
mkdir content/joes-pizza
cat > content/joes-pizza/_index.md << 'EOF'
---
title: "Joe's Pizza"
layout: "landing"
tenantId: "joes-pizza"
---
EOF

# 4. Build
hugo

Template reference

Template	Default Sections	Best For
`restaurant`	hero, services, gallery, about, contact, testimonials, cta	Restaurants, cafes, food trucks, catering
`salon`	hero, services, gallery, about, contact, testimonials, cta	Hair salons, barbershops, nail studios, beauty
`contractor`	hero, services, about, contact, testimonials, cta	Contractors, handymen, plumbers, electricians
`dental`	hero, services, about, contact, testimonials, cta	Dental offices, orthodontists, medical practices
`real-estate`	hero, services, gallery, about, contact, branches, cta	Real estate agents, brokers, property management
`fitness`	hero, services, video, about, contact, testimonials, cta	Gyms, personal trainers, yoga studios
`retail`	hero, products, gallery, about, contact, cta	Retail shops, boutiques, e-commerce
`professional`	hero, services, about, contact, testimonials, cta	Consultants, accountants, lawyers

Template vs tenant: what overrides what

# Template has:
theme: "dark-amber"

# Tenant changes:
theme: "dark-crimson"
# → Tenant wins. Template's theme is ignored.

Templates provide defaults. Tenant YAML always overrides.

6. Prompt Template for Agents

Location: prompts/tenant-config.yaml

Agent workflow

1. User describes their business
2. Agent reads prompts/tenant-config.yaml
3. Agent fills in all fields:
   - businessType → determines template
   - theme → user's preference or suggested based on business type
   - business.* → from user description
   - sections.* → enable/disable based on business needs
   - services/products → from user description
   - cta.* → from business type defaults
   - contact.* → from user
   - chat.* → auto-generated welcome message
4. Agent writes:
   - data/tenants/<slug>.yaml (filled-in config)
   - content/<slug>/_index.md (front matter only)
5. Page is live at mybiz.fit/<slug>

Agent decision matrix

Business Type	Original Themes	OpenCode Themes	Sections to Enable
Restaurant	dark-amber, dark-orange	dark-opencode, dark-gruvbox	hero, services, gallery, about, contact, testimonials, cta
Salon	dark-rose, dark-magenta	dark-dracula, dark-catppuccin	hero, services, gallery, about, contact, testimonials, cta
Contractor	dark-ocean, dark-teal	dark-nord, dark-one-dark	hero, services, about, contact, testimonials, cta
Dental	light-ocean, dark-teal	light-tokyonight, light-opencode	hero, services, about, contact, testimonials, cta
Real Estate	dark-amber, dark-gold	dark-kanagawa, dark-opencode	hero, services, gallery, about, contact, branches, cta
Fitness	dark-forest, dark-lime	dark-matrix, dark-everforest	hero, services, video, about, contact, testimonials, cta
Retail	dark-magenta, dark-rose	dark-dracula, dark-rosepine	hero, products, gallery, about, contact, cta
Professional	light-minimal, dark-gold	light-nord, light-one-dark	hero, services, about, contact, testimonials, cta

7. Quick Reference Tables

Theme × Layout Matrix (all 41 themes)

Original Themes

Theme	Mode	Accent	Hero	Cards	Spacing	Borders	Anim	Eyebrows
`dark-amber`	dark	`#ffb000`	left	glass	default	solid	fade	pill
`dark-ocean`	dark	`#00b4d8`	left	glass	default	solid	fade	pill
`dark-forest`	dark	`#2ee6a6`	centered	flat	spacious	none	slide	underline
`dark-rose`	dark	`#ff6b9d`	left	glass	default	solid	fade	pill
`dark-crimson`	dark	`#e63946`	centered	glow	compact	glow	scale	pill
`dark-violet`	dark	`#a855f7`	centered	glass	spacious	dashed	slide	underline
`dark-lime`	dark	`#84cc16`	left	flat	compact	none	scale	text
`dark-orange`	dark	`#f97316`	left	solid	default	solid	fade	pill
`dark-magenta`	dark	`#ec4899`	centered	glow	default	glow	slide	pill
`dark-gold`	dark	`#d4a574`	left	glass	spacious	solid	fade	underline
`dark-teal`	dark	`#14b8a6`	centered	flat	default	none	fade	pill
`dark-neon`	dark	`#06b6d4`	left	glow	compact	glow	scale	text
`dark-lavender`	dark	`#c084fc`	centered	glass	default	dashed	slide	underline
`dark-olive`	dark	`#84a98c`	left	flat	spacious	none	fade	text
`light-minimal`	light	`#1a1a2e`	centered	flat	spacious	none	fade	text
`light-ocean`	light	`#0077b6`	left	glass	default	solid	fade	pill
`light-warm`	light	`#e07a5f`	left	solid	default	solid	fade	pill
`light-lavender`	light	`#7b2cbf`	centered	glass	spacious	dashed	slide	underline

OpenCode Themes (authentic palettes)

Theme	Mode	Accent	Hero	Cards	Spacing	Borders	Anim	Eyebrows
`dark-opencode`	dark	`#fab283`	left	glass	default	solid	fade	pill
`dark-tokyonight`	dark	`#7aa2f7`	left	glass	spacious	solid	slide	pill
`dark-catppuccin`	dark	`#b4befe`	centered	glass	default	solid	fade	pill
`dark-nord`	dark	`#88c0d0`	left	flat	spacious	solid	fade	text
`dark-gruvbox`	dark	`#83a598`	left	solid	default	dashed	fade	underline
`dark-dracula`	dark	`#bd93f9`	centered	glow	default	glow	scale	pill
`dark-kanagawa`	dark	`#7e9cd8`	full-image	solid	spacious	solid	slide	none
`dark-one-dark`	dark	`#61afef`	left	glass	default	solid	fade	pill
`dark-everforest`	dark	`#a7c080`	no-image	flat	spacious	solid	fade	text
`dark-ayu`	dark	`#3fb7e3`	left	glass	compact	solid	slide	pill
`dark-matrix`	dark	`#2eff6a`	centered	outlined	default	glow	scale	none
`dark-rosepine`	dark	`#9ccfd8`	left	glass	spacious	solid	fade	pill
`light-opencode`	light	`#3b7dd8`	left	glass	default	solid	fade	pill
`light-tokyonight`	light	`#2e7de9`	left	glass	default	solid	fade	pill
`light-catppuccin`	light	`#7287fd`	centered	glass	default	solid	fade	pill
`light-nord`	light	`#5e81ac`	left	flat	spacious	solid	fade	text
`light-gruvbox`	light	`#076678`	left	solid	default	dashed	fade	underline
`light-dracula`	light	`#7c6bf5`	centered	glow	default	glow	scale	pill
`light-kanagawa`	light	`#2d4f67`	full-image	solid	spacious	solid	slide	none
`light-one-dark`	light	`#4078f2`	left	glass	default	solid	fade	pill
`light-everforest`	light	`#8da101`	no-image	flat	spacious	solid	fade	text
`light-ayu`	light	`#4aa8c8`	left	glass	compact	solid	slide	pill
`light-rosepine`	light	`#31748f`	left	glass	spacious	solid	fade	pill

Section toggle reference

Section	What it renders	Data required
`hero`	Hero banner with tagline + description + image	`business.*`
`services`	Grid of service cards with icons	`services: [...]`
`video`	YouTube embed	`video: {...}`
`gallery`	Image grid	`gallery: [...]`
`about`	About section with text + image	`about: {...}`
`contact`	Contact info cards	`contact: {...}`
`testimonials`	Customer review cards with stars	`testimonials: [...]`
`branches`	Location cards with map links	`branches: [...]`
`products`	Product cards with images + prices	`products: [...]`
`cta`	CTA banner with button	`cta: {...}`

CSS variable mapping

Theme YAML field        → CSS variable          → Used in
─────────────────────────────────────────────────────────
colors.bg               → --bg                  → body, nav, sections
colors.bg2              → --bg2                 → alternating sections
colors.panel            → --panel               → card backgrounds
colors.line             → --line                → borders
colors.text             → --text                → headings, body
colors.muted            → --muted               → descriptions
colors.dim              → --dim                 → footer, tertiary
colors.accent (or tenant override) → --accent   → buttons, links, highlights
colors.accent2 (or tenant override) → --accent2 → gradients, hovers
colors.accentRGB        → --accent-rgb          → rgba() in 15 places

Front matter reference

content/<slug>/_index.md:

---
title: "Business Name"          # Page title
layout: "landing"               # Required. Triggers landing page template.
tenantId: "slug"                # Required. Maps to data/tenants/<tenantId>.yaml
---

Uh oh!

FilesExpand file tree

config.md

Latest commit

History