Colors¶

MetrePay's color system is built around two primary brand colors that carry semantic meaning in the payment context, supported by a gradient system and a clean neutral palette.

Brand Colors¶

The two primary colors define the payment type context across all MetrePay products:

Blue Primary --mp-color-blue #6E96FF

Blue Hover --mp-color-blue-hover #6687DC

Blue Light --mp-color-blue-light #EBF0FF

Purple Primary --mp-color-purple #5C0390

Purple Hover --mp-color-purple-hover #3A005C

Purple Light --mp-color-purple-light #F9EEFF

Violet (AI/Landing) --mp-color-violet #7E5FFA

Semantic Usage¶

Color	Context	Usage
`--mp-color-blue`	Single / one-time payments	Hero headers, primary buttons, active states
`--mp-color-purple`	Recurrent / subscription payments	Hero headers, primary buttons, active states
`--mp-color-violet`	AI features, landing page	Chat widget, marketing accents

Color meaning matters

Blue and purple are not interchangeable. Blue signals a single payment flow. Purple signals a recurrent/subscription flow. This distinction must be maintained across all products.

Gradient System¶

MetrePay's signature gradient blends blue into purple, representing the full payment spectrum.

--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%)

Token	Value	Usage
`--mp-gradient-hero`	`linear-gradient(73deg, #6E96FF 20%, #5C0390 100%)`	Hero headers, split checkout left panel
`--mp-gradient-btn`	`linear-gradient(90deg, #6E96FF 0%, #84a7ff 75%, #adc5ff 100%)`	Submit buttons, CTAs
`--mp-gradient-accent`	`linear-gradient(to right, #5D0391 0%, #FFFFFF 100%)`	Dashboard section dividers

Gradient usage rules

Use --mp-gradient-hero for full-width hero sections and split checkout panels
Use --mp-gradient-btn sparingly — only for the most important CTA
Avoid gradients on body backgrounds or large content areas
Never stack multiple gradients in the same view

Neutral Colors¶

Text Dark --mp-color-text-dark #333333

Text Input --mp-color-text-input #555555

Text Body --mp-color-text #666666

Text Muted --mp-color-text-muted #999999

Border --mp-color-border #E5ECFB

Border Input --mp-color-border-input #92A3C8

BG Page --mp-color-bg-page #F1F1F1

BG Card --mp-color-bg-card #FAFAFA

BG White --mp-color-bg-white #FFFFFF

Semantic Colors¶

Used for feedback states — errors, success, warnings, and informational messages.

Error --mp-color-error #c80000

Error BG --mp-color-error-bg rgba(248,215,218,1)

Success --mp-color-success #1a7f4b

Success BG --mp-color-success-bg #d1fae5

Warning --mp-color-warning #92400e

Warning BG --mp-color-warning-bg #fef3c7

CSS Usage¶

/* Using CSS variables */
.my-button {
  background: var(--mp-color-blue);
  color: white;
}

.my-button:hover {
  background: var(--mp-color-blue-hover);
}

.my-hero {
  background: var(--mp-gradient-hero);
}

.my-card {
  background: var(--mp-color-bg-card);
  border: 1px solid var(--mp-color-border);
}

Deprecated Colors¶

The following colors appear in legacy code and should not be used in new implementations:

Color	Value	Reason
Legacy red	`#BD0033`	Old catalog login button — not part of current identity
Legacy blue	`#004e93`	Old catalog focus color — replaced by `#6E96FF`
Legacy dark blue	`#002547`	Old gradient stop — not in current system
Lato/Roboto accent	`#34aadc`	Portal admin legacy — not MetrePay brand