Customize the Look of Moov Drops to Match Your Brand

Moov Drops are custom web components you can add to your page the same way you would add any HTML tag. Moov Drops are defined in the Moov.js package. After initializing Moov.js, you will have access to our full library of Drops.

Add Bank Account

Provide your bank details to add this payment method to your account. We'll send a small deposit, which will show up instantly, if eligible, or take up to 1-2 days to appear. You'll enter the code in the next step.

Account type

• Checking
• Savings
• Loan

Account holder type

• Business
• Individual

Account holder name

Routing number

Account number

Confirm account number

Back Save & continue

Moov Midnight Blueprint

Every Moov Drop shares a color palette defined through a handful of CSS variables. You can edit these variables to alter the look of any Drop on the page, and create a seamless visual experience for your users.

Moov Drops require a secure HTTPS connection. If you don't have a test environment with HTTPS enabled, we suggest setting up a hosting environment with ngrok, Netlify, or Vercel.

How to Use

To override the Moov Drops color palette, add a style or link tag within the body of your webpage.

Example:

<html>
  <head></head>
  <body>
    <style>
      :root {
        /* Moov theme overrides */
      }
    </style>
    <moov-payment-methods></moov-payment-methods>
  </body>
</html>

The default Drops palette is defined in the head of the document. To ensure that your custom colors override the default palette, they must be placed in the body tag or with greater specificity.

In your style tag, target the :root and provide custom values for any or all of our predefined CSS variables.

Example CSS Overrides:

:root {
  --moov-color-background: #111111;
  --moov-color-background-secondary: #222222;
  --moov-color-background-tertiary: #333333;
  --moov-color-primary: #77d656;
  --moov-color-secondary: #79f0aa;
  --moov-color-tertiary: #4f4f4f;
  --moov-color-info: #94cbff;
  --moov-color-warn: #f2994a;
  --moov-color-danger: #eb5757;
  --moov-color-success: #77d656;
  --moov-color-low-contrast: #969696;
  --moov-color-medium-contrast: #e0e0e0;
  --moov-color-high-contrast: #ffffff;
  --moov-color-graphic-1: #79f0aa;
  --moov-color-graphic-2: #d194e9;
  --moov-color-graphic-3: #68b2fd;
  --moov-radius-small: 0.25rem;
  --moov-radius-large: 0.5rem;
}

:root {
  --moov-color-background: #14151b;
  --moov-color-background-secondary: #26282d;
  --moov-color-background-tertiary: #3a3c45;
  --moov-color-primary: #6171f9;
  --moov-color-secondary: #828ffe;
  --moov-color-tertiary: #494a57;
  --moov-color-info: #94cbff;
  --moov-color-warn: #eea05a;
  --moov-color-danger: #ed655c;
  --moov-color-success: #62e599;
  --moov-color-low-contrast: #9294a0;
  --moov-color-medium-contrast: #ebebef;
  --moov-color-high-contrast: #ffffff;
  --moov-color-graphic-1: #62e599;
  --moov-color-graphic-2: #62e599;
  --moov-color-graphic-3: #62e599;
  --moov-radius-small: 0.25rem;
  --moov-radius-large: 0.5rem;
}

:root {
  --moov-color-background: #ffffff;
  --moov-color-background-secondary: #f5f6f9;
  --moov-color-background-tertiary: #e7e7f1;
  --moov-color-primary: #4a5cf5;
  --moov-color-secondary: #3d50ec;
  --moov-color-tertiary: #b9bbc3;
  --moov-color-info: #94cbff;
  --moov-color-warn: #bc5900;
  --moov-color-danger: #dc1142;
  --moov-color-success: #37cd76;
  --moov-color-low-contrast: #5b5d6a;
  --moov-color-medium-contrast: #494a57;
  --moov-color-high-contrast: #000000;
  --moov-color-graphic-1: #3d50ec;
  --moov-color-graphic-2: #3d50ec;
  --moov-color-graphic-3: #3d50ec;
  --moov-radius-small: 0.25rem;
  --moov-radius-large: 0.5rem;
}