> ## Documentation Index > Fetch the complete documentation index at: https://beta-docs.replo.app/llms.txt > Use this file to discover all available pages before exploring further. # Brand Studio > Build a brand kit of colors, fonts, logos, and voice, and apply it across everything you make. export const TryPromptButton = ({prompt, imageSrc, imageAlt = "Template preview", imageStyles = {}, buttonCta = "Build in Replo"}) => { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const API_BASE = "https://api.replo.app"; const APP_URL = "https://dashboard.replo.app"; const LoaderIcon = ; const ChevronIcon = ; async function postJSON(url, body, headers = {}, timeoutMs = 120000) { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), timeoutMs); try { const response = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json", ...headers }, body: JSON.stringify(body ?? ({})), signal: controller.signal }); const responseText = await response.text(); if (!response.ok) throw new Error(`API Error: ${response.status}`); return responseText ? JSON.parse(responseText) : {}; } finally { clearTimeout(timeoutId); } } async function handleTryPrompt(event) { event.preventDefault(); event.stopPropagation(); setIsLoading(true); setError(null); try { const body = { prompt, file: null }; const {seed} = await postJSON(`${API_BASE}/api/v1/marketing/issue-marketing-site-jwt`, body); if (!seed) throw new Error("No seed returned from API"); const url = new URL(APP_URL); url.searchParams.set("type", "agent"); url.hash = `seed=${encodeURIComponent(seed)}`; window.open(url.toString(), "_blank"); setIsLoading(false); } catch (caughtError) { console.error("Failed to generate prompt:", caughtError); const message = caughtError instanceof Error ? caughtError.message : null; setError(message ?? "Something went wrong. Please try again."); setIsLoading(false); } } return
{} {imageSrc && {imageAlt}} {}
{} {} {error &&
{error}
}
; }; export const Screenshot = ({src, altText, width, shadow = true}) => { const generateAltText = imageSrc => { if (!imageSrc) return "Screenshot"; const filename = imageSrc.split("/").pop() ?? ""; const nameWithoutExt = filename.replace(/\.[^/.]+$/, ""); const readable = nameWithoutExt.replace(/[-_]/g, " ").replace(/\b\w/g, char => char.toUpperCase()); return readable === "" ? "Screenshot" : readable; }; const finalAltText = altText ?? generateAltText(src); const imageWidth = width ? `${width}px` : "100%"; return
{} {}
{finalAltText}
; }; Brand Studio is where your brand lives: your colors, fonts, logos, imagery, and the story of what you sell and who it is for. Set it up once and Replo uses it everywhere, so every page it builds looks like it belongs to the same brand. You can generate a kit from an existing website in seconds, walk through it with Replo, or build one by hand. You can reach Brand Studio from the **+** in the tab bar or the Cmd+K menu. Brand Studio is new and still being refined. The core flow works well, but expect naming and details to keep improving. ## Choose your starting point When you create a brand kit, you pick how you want to begin. Best if you already have a site. Paste a URL and Brand Studio learns your colors, fonts, logo, and imagery from it, then turns that into a kit you can refine. Best if you have ideas or references but no single site to import. Choose **Guide me through it** and Replo asks one question at a time, like your brand name, logo, colors, fonts, and what you sell, then assembles the kit from your answers. Best if you want full control. Start with an empty kit and fill in the name, colors, fonts, and the rest by hand. ## Build a brand from chat You do not have to open Brand Studio first. You can ask Replo to put a kit together for you, and it will generate one and open it in Brand Studio for review. ```text theme={null} Generate a brand kit for https://yourbrand.com using the create-branding skill ``` ## What is in a brand kit However you start, a kit is organized into the same sections: * **Brand assets**: your logo, logomark, and favicon, plus any other marks or icons. Upload your own or let an import pull them in. * **Colors**: your palette, grouped into roles like primary, secondary, and accent. * **Typography**: your fonts and how each one is used. * **Imagery**: the photography and visual style that represents the brand. * **Business brief**: the words behind the brand: what you sell, who it is for, and how you sound. ## The business brief The business brief is the narrative half of your brand, and Replo leans on it when it writes copy. It captures your industry, an elevator pitch, what you sell, who it is for, your positioning and key messages, and your voice and tone. ## Manage multiple brands You can keep more than one brand kit, which is useful for testing a new look or running separate brands. One kit is your **primary** brand: the one Replo actually applies when it builds. Create a new kit to experiment, then **Make primary** when it is ready to take over. ## How it fits together Your primary brand kit is the source of truth for how your store looks. When Replo builds in the [Website Builder](/apps/website-builder), it pulls colors and fonts from your kit so you set the look once instead of styling each page by hand. The same colors and typography also show up in the Website Builder's [Design library](/apps/website-builder#design-library). Update the brand later and the pieces that use it update with it. Want to see it in action? Set up a brand kit, then ask Replo to build with it. ```text theme={null} Build a homepage for my store using my primary brand kit's colors, fonts, and logo ``` ## Related Manage the logos and images your brand uses. See your brand applied across your site.