Theme Kit

Introduction

Welcome to the Brand and Theme Kit for the white label version of exoSwap.

This document provides guidelines for customizing the branding and appearance of the white label Exoswap platform to match the branding of your DeFi project. By following these guidelines, you can ensure that the white label Exoswap platform is consistent with the overall look and feel of your project.

The white label exoSwap platform uses a responsive design, which means that it looks great on both desktop and mobile devices. When customizing the theme, make sure to test your changes on both types of devices to ensure that everything looks as intended.

The white label exoSwap platform comes with a default theme that can be customized to match your branding. You can customize the theme by adjusting various design elements.

Theme Guidelines

Page Text:

• Page Title - the name of the page

• Product Tagline - the tagline under the logo in the middle of the page.

Logos: You can customize the logo by changing the image, as long as the overall shape of the logo is maintained. Dimensions below are pixels W x H. Transparent PNG unless specified.

• FavIcon - 192 x 192

• Brand Logo (top left) - 512 x 140 (width is adjustable, height should be fixed)

• Powered By Exo Logo - stays as it is - 450 x 140

• Product Logo (middle center) - 512 x 140 (width is adjustable, height should be fixed)

• Icon (middle center) - 350 x 350

• Footer Logo (bottom of page) - 512 x 140 (width is adjustable, height should be fixed)

Color palette: You can customize the colors of various elements on the platform, such as the background, buttons, and text, to match your branding. You can use the official exoSwap color palette as a starting point and adjust as needed.

• Primary color - #14E1D5 (for buttons)

• Secondy color - #EF7C2F (for accents)

Fonts: You can choose a different font that matches your branding. Just make sure to use web-safe fonts to ensure that the font displays correctly on all devices.

• Primary font - Cerebri Sans Family

• Secondary font - Roboto Family

Images: You can add your own images, such as backgrounds, to the platform to further customize the appearance. Just make sure that the images are optimized for the web and have appropriate dimensions.

• Background Image - 2880 x 1920 (72dpi, compressed JPG, under 1mb recommended)

Links: There are some default links in the app that we need to be able to point your users at for Documentation, Support and Terms of Service.

• Terms of Service - URL Link to your TOS or T&C. This could be linked back to a standard page you already provide for your project or a clone of ours personalized to you.

• Documentation - URL Link to your desired documentation URL. You could develop your own, clone our documentation, or just point at it if you like.

• Support - URL Link to your support process. This could link to your Discord or TG groups, or it could be using a helpdesk/ticket page.

Theme File

Customizing our platform can be optimized with a theme kit file. The theme kit file is a .json file that can be read in by the platform code to apply the theme variables to your deployment.

An example theme file:

{
    "theme": {
      "pagetitle":"exoSwap - A simple, secure solution for swapping & bridging assets cross-chain.",
      "favicon": "/favicon.ico",
      "companyLogo": "/brand.png",
      "productLogo": "/product.png",
      "producttagline": "A simple, secure solution for swapping & bridging assets cross-chain.",
      "companyicon": "/token.png",
      "footerlogo": "/brand.png",
      "background": "/bg.jpg",
      "color1": "#14E1D5",
      "color2": "#EF7C2F",
      "font1": "Cerebri Sans Family",
      "font2": "Roboto Family",
      "docslink": "https://docs.exo.fi/exoswap/readme.md",
      "supportlink": "https://go.exo.fi/exoswap-support",
      "termsOfUseLink": "https://exo.fi/terms-conditions/"
    }
  }

Download Theme Kit JSON File

Conclusion

We hope that these guidelines will help you customize the white label exoSwap platform to match the branding of your DeFi project. By following these guidelines, you can ensure that the platform is consistent with the overall look and feel of your project and provides a seamless experience for your users.