Skip to content

CSS Variables

Complete reference for all MetrePay CSS custom properties. Include this in your project's root stylesheet.

Full Token Set

:root {
  /* =============================================
     BRAND COLORS
     ============================================= */
  --mp-color-blue:          #6E96FF;   /* Single payment primary */
  --mp-color-blue-hover:    #6687DC;   /* Single payment hover */
  --mp-color-blue-light:    #EBF0FF;   /* Blue tint background */
  --mp-color-purple:        #5C0390;   /* Recurrent payment primary */
  --mp-color-purple-hover:  #3A005C;   /* Recurrent payment hover */
  --mp-color-purple-light:  #F9EEFF;   /* Purple tint background */
  --mp-color-violet:        #7E5FFA;   /* AI / landing accent */

  /* =============================================
     GRADIENTS
     ============================================= */
  --mp-gradient-hero:    linear-gradient(73deg, #6E96FF 20%, #5C0390 100%);
  --mp-gradient-btn:     linear-gradient(90deg, #6E96FF 0%, #84a7ff 75%, #adc5ff 100%);
  --mp-gradient-accent:  linear-gradient(to right, #5D0391 0%, #FFFFFF 100%);

  /* =============================================
     NEUTRALS
     ============================================= */
  --mp-color-text:          #666666;   /* Body text */
  --mp-color-text-dark:     #333333;   /* Headings, labels */
  --mp-color-text-muted:    #999999;   /* Secondary text, placeholders */
  --mp-color-text-input:    #555555;   /* Input values */
  --mp-color-border:        #E5ECFB;   /* Card borders, dividers */
  --mp-color-border-input:  #92A3C8;   /* Input borders */
  --mp-color-bg-page:       #F1F1F1;   /* Page background */
  --mp-color-bg-card:       #FAFAFA;   /* Default card background */
  --mp-color-bg-white:      #FFFFFF;   /* White card, form background */

  /* =============================================
     SEMANTIC COLORS
     ============================================= */
  --mp-color-error:         #c80000;
  --mp-color-error-bg:      rgba(248, 215, 218, 1);
  --mp-color-error-border:  rgba(220, 53, 69, 1);
  --mp-color-success:       #1a7f4b;
  --mp-color-success-bg:    #d1fae5;
  --mp-color-warning:       #92400e;
  --mp-color-warning-bg:    #fef3c7;

  /* =============================================
     TYPOGRAPHY
     ============================================= */
  --mp-font-base:           'Cabin', sans-serif;
  --mp-font-size-xs:        12px;
  --mp-font-size-sm:        13px;
  --mp-font-size-base:      14px;
  --mp-font-size-md:        15px;
  --mp-font-size-lg:        18px;
  --mp-font-size-xl:        20px;
  --mp-font-size-2xl:       24px;
  --mp-font-size-3xl:       32px;
  --mp-font-size-4xl:       40px;
  --mp-line-height-body:    1.7;
  --mp-line-height-heading: 1.2;

  /* =============================================
     SPACING
     ============================================= */
  --mp-space-1:   4px;
  --mp-space-2:   8px;
  --mp-space-3:   12px;
  --mp-space-4:   16px;
  --mp-space-5:   20px;
  --mp-space-6:   24px;
  --mp-space-8:   32px;
  --mp-space-10:  40px;
  --mp-space-12:  48px;
  --mp-space-16:  64px;

  /* =============================================
     BORDER RADIUS
     ============================================= */
  --mp-radius-sm:   4px;
  --mp-radius-md:   8px;
  --mp-radius-lg:   10px;
  --mp-radius-xl:   16px;
  --mp-radius-2xl:  20px;
  --mp-radius-full: 9999px;

  /* =============================================
     SHADOWS
     ============================================= */
  --mp-shadow-card:   0px 0px 6px 3px rgba(127, 146, 189, 0.1);
  --mp-shadow-form:   0px 10px 16px rgba(0, 14, 45, 0.1);
  --mp-shadow-hover:  0 8px 16px -4px rgba(10, 10, 10, 0.1);
  --mp-shadow-btn:    0px 3px 2px 0px rgba(221, 221, 221, 1);

  /* =============================================
     MOTION
     ============================================= */
  --mp-transition-fast:   0.2s ease;
  --mp-transition-base:   0.3s ease;
  --mp-transition-slow:   0.4s ease;

  /* =============================================
     LAYOUT
     ============================================= */
  --mp-container-max:     1280px;
  --mp-container-form:    720px;
  --mp-container-narrow:  480px;
}

Minimal Starter

If you only need the most commonly used tokens:

:root {
  /* Colors */
  --mp-color-blue:       #6E96FF;
  --mp-color-blue-hover: #6687DC;
  --mp-color-blue-light: #EBF0FF;
  --mp-color-purple:     #5C0390;
  --mp-color-text-dark:  #333333;
  --mp-color-text:       #666666;
  --mp-color-text-muted: #999999;
  --mp-color-border:     #E5ECFB;
  --mp-color-bg-page:    #F1F1F1;
  --mp-color-bg-card:    #FAFAFA;

  /* Gradient */
  --mp-gradient-hero: linear-gradient(73deg, #6E96FF 20%, #5C0390 100%);

  /* Typography */
  --mp-font-base: 'Cabin', sans-serif;

  /* Spacing */
  --mp-space-4:  16px;
  --mp-space-6:  24px;
  --mp-space-8:  32px;

  /* Radius */
  --mp-radius-md:   8px;
  --mp-radius-lg:   10px;
  --mp-radius-full: 9999px;

  /* Shadows */
  --mp-shadow-card:  0px 0px 6px 3px rgba(127, 146, 189, 0.1);
  --mp-shadow-hover: 0 8px 16px -4px rgba(10, 10, 10, 0.1);

  /* Motion */
  --mp-transition-base: 0.3s ease;
}

How to Use

/* Reference tokens in your component styles */
.my-card {
  background: var(--mp-color-bg-card);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-card);
  padding: var(--mp-space-6);
  font-family: var(--mp-font-base);
  transition: all var(--mp-transition-base);
}

.my-card:hover {
  background: var(--mp-color-bg-white);
  box-shadow: var(--mp-shadow-hover);
  transform: translateY(-2px);
}

.my-button {
  background: var(--mp-color-blue);
  color: white;
  border-radius: var(--mp-radius-md);
  font-family: var(--mp-font-base);
  font-size: var(--mp-font-size-md);
  transition: all var(--mp-transition-base);
}