Skip to main content
All CollectionsGetting started
App primary and secondary colors

App primary and secondary colors

Explanation of merchant's app colors

A
Written by ATOM Support
Updated over a month ago

When setting up your app, you’ll be asked to provide two colors in HEX format: a primary color and a secondary color. These colors help us personalize your app’s appearance, including buttons, icons, text, and backgrounds, following a consistent design pattern.

By default, we style your app using the primary color alongside white for a clean and polished look.

If you’d like more control over your app’s design, you can customize individual elements. Below is a list of elements that can be adjusted separately:

  1. Sing up Button:

    • Background color (primary color by default) - green in the example;

    • Text color (white by default);

    • Border color (by default, there is no border at all);

    • Border width (if border color is defined, the width can be adjusted to allow the button background color to be light colors);

  2. Clickable Text:

    • Text Color (primary color by default);

    • Checkbox Color (primary color by default)

  3. Top-Up Menu Color:

    • Fill color for chosen Top-up option (primary by default)

  4. Top Bar:

    • Add Balance Message Background color (primary by default);

    • Reservation Message Background color (primary by default);

  5. Map View Top Buttons

    • Background Color (white by default);

    • Icon Color (black by default);

    • Text Color (black by default);

  6. Start to Ride Button:

    • Background Color (primary by default);

    • Text Color (white by default);

  7. Map View Side Button:

    • Background Color (primary by default) - white in example;

    • Icon Color (white by default) - black in example;

  8. Zone Colors:

    • Parking zone (green by default);

    • No parking zone (red by default);

    • Speed limit zone (blue by default);

    • Bonus zone (yellow by default);

    • No-go zone (black by default);

  9. Map View City Badge:

    • Background Color (dark grey by default);

    • Text Color (white by default);

  10. Sidebar:

    • Background Color (white by default);

    • Text Color (black by default);

    • Icon Color (primary by default) - black in example;

    • Amount Color (primary by default)

  11. Sidebar Bottom bar:

    • Background Color (primary by default);

    • Text Color (white by default);

Did this answer your question?