🎨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 to easily create and import these assets.

Use Figma to quickly export your assets

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.

Easily export all your assets in one go

There are more detailed instructions inside the Figma file 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. If you want a custom color, you can check out tailwind.ink.