Instructions

Booth runs on color styles, text styles, one CMS collection and four code components. Change those and the whole site follows.

Colors

Open Assets, then Colors. Background, Surface, Line, Text, Muted, Dim and Signal drive every page. Change Signal to rebrand the accent in one move.

Typography

Every text layer uses a text style from Assets. Host Grotesk sets headlines and body, IBM Plex Mono sets labels and data. Each style already has tablet and phone sizes.

Voices CMS

Open the CMS and pick Voices. Each item has a name, description, language, orb image, tone, best for and a sample line. New items appear on the home grid and get their own profile page.

VoiceCard

A code component. Select it to set the orb, name, description, language and colors. Visitors click a card to put that voice on air. Turn on On Air to start it playing on load.

RecordButton

The dial in the closing section. Edit the idle label, timecode, recording and saved labels and every color from the right panel. Click once to record, again to save the take.

PricingConsole

Lives on the Pricing page. Drag the knob or use the arrow keys to change monthly characters. Plan prices and the hours, episodes and calls readout update live. Set prices and allowances in its properties.

CodeSnippet

Powers the code samples on the Features page. Paste your own snippet into Code and pick colors for text, strings and comments. Straight quotes stay straight, so samples copy cleanly.

Hero video

Select the video in the hero and replace the file. Keep it short, muted and looped. Set a poster image so the hero never shows black while loading.

Navigation and footer

Both live in the Booth Layout template, so one edit applies to every page. Connect the footer newsletter form and the sales form to your own destination in the form settings.