# Branding

## Logos

If you open `core_components.ex` you will find some functional components for your logo. You can use them in your templates like so:

```
<.logo /> <!-- Will adapt to the user's color scheme (light/dark) -->
<.logo variant="light" />
<.logo variant="dark" />
<.logo class="h-20" />

<.logo_icon /> <!-- Display the icon part of your logo  -->
<.logo_icon variant="light" />
<.logo_icon variant="dark" />
<.logo_icon class="h-20" />
```

For this to work with your own logo, you will need to replace the Petal logos:

* `/priv/static/images/logo_dark.svg`
* `/priv/static/images/logo_light.svg`
* `/priv/static/images/logo_icon_dark.svg`
* `/priv/static/images/logo_icon_light.svg`
* `/priv/static/images/favicon.png`
* `/priv/static/images/open-graph.png`

#### Using Figma to create your assets quickly

We created a [Figma file](https://www.figma.com/community/file/1139155923924401853) to easily create and import these assets.

<figure><img src="https://content.gitbook.com/content/ng2vid5a0N74u3tEdCZc/blobs/AvdOYeaqCKrrVhgGUzCk/Xnapper-2023-06-07-17.13.56.jpg" alt=""><figcaption><p>Use Figma to quickly export your assets</p></figcaption></figure>

It's very easy to just replace the icon and text with your own brand, and then it will export all 6 files for you to place straight into your `/priv/static/images` folder.&#x20;

<figure><img src="https://content.gitbook.com/content/ng2vid5a0N74u3tEdCZc/blobs/vnd8i91yeBN4WZhQRDRw/Xnapper-2023-06-07-17.18.34.jpg" alt=""><figcaption><p>Easily export all your assets in one go</p></figcaption></figure>

There are more detailed instructions inside the [Figma file](https://www.figma.com/community/file/1139155923924401853) for you.

## Colors

Petal Pro and Petal Components expects you to define a **primary** and **secondary** color. These typically represent your brand.

In the file `/assets/tailwind.config.js` you will see the primary and secondary colors defined:

```
const colors = require("tailwindcss/colors");

module.exports = {
  content: [
    "../lib/*_web/**/*.*ex",
    "./js/**/*.js",
    "../deps/petal_components/**/*.*ex",
  ],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primary: colors.blue,
        secondary: colors.pink,
      },
    },
  },
  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
};
```

By default the primary color is blue, and the secondary is pink. You can check out a list of Tailwind color options [here](https://tailwindcss.com/docs/customizing-colors). If you want a custom color, you can check out [tailwind.ink](https://tailwind.ink/).