> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replo.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Brand Library

> Setting up and using your brand library.

## What is my Brand Library?

Your Brand Library is your central hub for managing all the design elements that define your brand. With your brand library, you can keep your pages consistent, save time when designing, and make global updates effortlessly.

Styles in your Brand Library automatically get applied to all templates and edits made with the AI editor. You can always manually attach a style or override it when editing.

## **Setting Up Your Theme (Colors, Text Styles, Logo)**

When you create a new shop, you’ll be prompted to set up a theme. If you already have an existing theme—or want to pull inspiration from another brand—you can simply enter a URL, and Replo will automatically import those styles.

<img src="https://mintcdn.com/replo/8jjNzdvgfm1fWdh6/images/pullfromurl.png?fit=max&auto=format&n=8jjNzdvgfm1fWdh6&q=85&s=552054bb995553af5ddc1eeb037450d2" alt="Pullfromurl Pn" width="2998" height="1220" data-path="images/pullfromurl.png" />

### **Colors**:

Define your brand's palette. Every palette starts with 4 neutral colors and 2 brand colors (primary and secondary). You can add up to 4 brand colors in total.

<img src="https://mintcdn.com/replo/8jjNzdvgfm1fWdh6/images/BrandLibraryColors.png?fit=max&auto=format&n=8jjNzdvgfm1fWdh6&q=85&s=7ea1602e53cd35524bc06c8c486d3dae" alt="Brand Library Colors Pn" title="Brand Library Colors Pn" style={{ width:"51%" }} width="2864" height="3178" data-path="images/BrandLibraryColors.png" />

To edit a color, click on it to adjust the HEX code, opacity, and name. Naming color styles (e.g., *“Vibrant Lime”*) makes it easier for AI to apply them accurately in prompts like: *“Use Vibrant Lime for the hero background.”*

<img src="https://mintcdn.com/replo/8jjNzdvgfm1fWdh6/images/editingacolor.png?fit=max&auto=format&n=8jjNzdvgfm1fWdh6&q=85&s=5126a41badb68d4ec29bd7cd76c1798a" alt="Editingacolor Pn" title="Editingacolor Pn" style={{ width:"59%" }} width="2720" height="1918" data-path="images/editingacolor.png" />

### **Text Styles**

Every theme includes **4 Header** text styles and **1 Body** text style. For each, you can adjust:

* Font
* Text size
* Font weight
* Line height
* Spacing

<img src="https://mintcdn.com/replo/8jjNzdvgfm1fWdh6/images/textstyles.png?fit=max&auto=format&n=8jjNzdvgfm1fWdh6&q=85&s=733811a2ac161c38f4da84f522faee90" alt="Textstyles Pn" title="Textstyles Pn" style={{ width:"52%" }} width="2852" height="3182" data-path="images/textstyles.png" />

Click on a text style to edit it. Within each text style, you can customize the font, text size, font weight, line height, and spacing.

<img src="https://mintcdn.com/replo/8jjNzdvgfm1fWdh6/images/editingatextstyle.png?fit=max&auto=format&n=8jjNzdvgfm1fWdh6&q=85&s=8adb5be92767cc5bc5e2a5daecfcf83b" alt="Editingatextstyle Pn" width="2724" height="1232" data-path="images/editingatextstyle.png" />

To upload **custom fonts**, click the "Custom Fonts" button in the Brand Library and upload the file for each font weight you would like to use.

Replo currently supports **.otf, .ttf, .woff, .woff2** files for custom font uploads.

After uploading, the font will be available in all font selector menus in your brand library and editor.

<img src="https://mintcdn.com/replo/8jjNzdvgfm1fWdh6/images/customfonts.png?fit=max&auto=format&n=8jjNzdvgfm1fWdh6&q=85&s=6b3656548cdd5f6222c0633de36816ae" alt="Customfonts Pn" width="2720" height="1018" data-path="images/customfonts.png" />

### **Logo**

Upload a **PNG, JPG, or SVG** of your logo. Replo will automatically insert your logo into the page headers on all your pages.

<img src="https://mintcdn.com/replo/8jjNzdvgfm1fWdh6/images/logo.png?fit=max&auto=format&n=8jjNzdvgfm1fWdh6&q=85&s=e2e55997e2ffe0ca67ee588181dbbdb7" alt="Logo Pn" width="2844" height="1214" data-path="images/logo.png" />

## Using Style Presets

Tap the "Presets" button in the top right of your color library or typography library to access a set of pre-defined combinations. Click on one to preview it on your page!

<img style={{ width:"39%" }} />

<img src="https://mintcdn.com/replo/8jjNzdvgfm1fWdh6/images/Textpresets.png?fit=max&auto=format&n=8jjNzdvgfm1fWdh6&q=85&s=c22c81a5c9daa0c4637cd24087088fb8" alt="Textpresets Pn" title="Textpresets Pn" style={{ width:"39%" }} width="1642" height="2416" data-path="images/Textpresets.png" />

## **Editing Your Brand Library**

You can update your Brand Library at any time from:

* The **Brand Library tab** in your dashboard
* The **Settings menu** while editing a page

Before saving, you can **preview changes** across all existing pages. Once saved, **updates will apply globally to every page in the shop** wherever styles are attached. These updates will go live the next time a page is published.

## **Using Styles when Editing**

By default, all templates and generated edits will use your styles unless told otherwise.

Selecting a specific element in Edit Mode allows you to **attach, swap, or detach** style on relevant properties. Detaching a style means that this property will no longer be affected by global updates to your Brand Library.

When editing an element, clicking on a color property opens the **Styles** tab (your palette). Switch to **Custom** to detach and use a one-off color.

<img src="https://mintcdn.com/replo/8jjNzdvgfm1fWdh6/images/colormenu.png?fit=max&auto=format&n=8jjNzdvgfm1fWdh6&q=85&s=2e21de3e896e734892ce40d616c19cfa" alt="Colormenu Pn" title="Colormenu Pn" style={{ width:"60%" }} width="2096" height="1490" data-path="images/colormenu.png" />

Click on a text style to swap it out. Attached styles inherit font, size, weight, line height, and spacing from the Brand Library.

* **Detach a style** → click the “x” on the style property
* **Attach a style** → click the “Aa” icon next to the font selector

<img src="https://mintcdn.com/replo/8jjNzdvgfm1fWdh6/images/detachedtextstyle.png?fit=max&auto=format&n=8jjNzdvgfm1fWdh6&q=85&s=412080c7599c4b7ca297864c1d8580bf" alt="Detachedtextstyle Pn" title="Detachedtextstyle Pn" style={{ width:"60%" }} width="1986" height="900" data-path="images/detachedtextstyle.png" />
