Merchant Aid Design System & Style Guide

Brand Identity & Vision

Merchant Aid is a service dedicated to enabling success and driving commerce for merchants. The design system translates this vision into clean, professional, and growth-oriented design patterns.

The Shopping Bag

Represents merchant commerce, operations, and transaction stability. It uses a rich Forest Green base color to establish trustworthiness, stability, and professionalism.

The Double Arrow

Represents aid, growth, acceleration, and double-digit business expansion. The light olive-green represents new beginnings/potential, while the primary dark forest green represents solid, enduring success.

Serif Headings & Modern UI

Combining structural serif typography for logos/headings with clean geometric sans-serif fonts for data displays builds a blend of brand heritage and modern speed.

Design Tokens

Design tokens are the visual atoms of our design system. These variables hold defined colors, fonts, spacing, shadows, and radii constants.

Color Palette

Click on any swatch card to copy the HSL/HEX value.

Primary Forest

var(--brand-primary)

Accent Olive

var(--brand-secondary)

Background Primary

var(--bg-primary)

Text Primary

var(--text-primary)

Semantic Success

var(--color-success)

Semantic Warning

var(--color-warning)

Semantic Error

var(--color-error)

Semantic Info

var(--color-info)

Typography

Variable	Token Size	Preview & Sample Text
--fs-4xl	2.5rem (40px)	Merchant Aid serif title
--fs-3xl	2.0rem (32px)	Large Editorial Header
--fs-2xl	1.5rem (24px)	Section Label Head
--fs-xl	1.25rem (20px)	Sub-heading UI element
--fs-md	1.0rem (16px)	Standard interface paragraphs and general body layouts.
--fs-sm	0.875rem (14px)	Helper texts, buttons, description cards.
--fs-xs	0.75rem (12px)	Badges and category micro labels

Spacing Scale

Consistent spatial rhythms drive clean layouts. We use a base-4 grid.

--space-3xs (4px)

--space-2xs (8px)

--space-xs (12px)

--space-md (16px)

--space-lg (24px)

--space-xl (32px)

--space-2xl (48px)

--space-3xl (64px)

Component Library

Interactive, production-ready custom interface elements modeled on the Merchant Aid style rules.

Primary & Secondary Actions

<!-- Button variants -->
<button class="btn btn-primary">Primary Action</button>
<button class="btn btn-secondary">Secondary Action</button>
<button class="btn btn-outline">Outline Action</button>
<button class="btn btn-ghost">Ghost Link</button>

Button Scales & Loading states

<!-- Button sizes -->
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-primary">Default Size</button>
<button class="btn btn-primary btn-sm">Small Action</button>

<!-- Spinner Loading state (adds loader and makes text invisible) -->
<button class="btn btn-outline btn-loading" disabled>Loading State</button>

Standard Input Elements

Merchant Email Address

Industry Segment

<!-- Text Input Field -->
<div class="form-group">
  <label class="form-label" for="email">Merchant Email Address</label>
  <input type="email" id="email" class="form-input" placeholder="name@merchant.com">
</div>

<!-- Styled Dropdown Select -->
<div class="form-group">
  <label class="form-label" for="segment">Industry Segment</label>
  <select id="segment" class="form-input">
    <option>E-commerce Retail</option>
    <option>Hospitality & Food Services</option>
  </select>
</div>

Checkboxes & Slider Switches

Send weekly payout reports

Enable Instant Payouts

<!-- Custom Styled Checkbox -->
<label class="checkbox-container">
  <input type="checkbox" checked>
  <span class="checkmark"></span>
  <span>Send weekly payout reports</span>
</label>

<!-- Rounded Pill Switch Toggle -->
<label class="switch">
  <input type="checkbox" checked>
  <span class="slider"></span>
</label>

Card Types & Elevation styles

Product Service

Billing Aid

Automate invoices, chargeback resolution, and recurring subscriptions from one unified hub.

Learn more →

Metrics Overview

$142,840

Gross volumes processed this month.

+12.4% vs Last Month

<!-- Elevated Hover Card -->
<div class="card card-hover">
  <div class="card-meta">Product Service</div>
  <h3 class="card-title">Billing Aid</h3>
  <p>Automate invoices, chargeback resolution, and subscriptions...</p>
  <a href="#">Learn more &rarr;</a>
</div>

<!-- Translucent Glassmorphic Card (Supports dark mode blur) -->
<div class="card card-glass">
  <div class="card-meta">Metrics Overview</div>
  <h3 class="card-title">$142,840</h3>
  <div class="badge badge-success">+12.4% vs Last Month</div>
</div>

Alert Banners & Status Badges

Primary Success Warning Failed Processing

Payout Successful

An amount of $1,200.00 has been successfully deposited to your linked bank account ending in *4242.

Verification Failed

We were unable to verify your merchant tax identifier. Please recheck your credentials and resubmit.

<!-- Badge pills -->
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>

<!-- Alert Block Banner (Success) -->
<div class="alert alert-success">
  <svg>...</svg>
  <div>
    <h4>Payout Successful</h4>
    <p>An amount of $1,200.00 has been successfully deposited...</p>
  </div>
</div>

Modals & Toast Triggers

<!-- Modal Markup structure (controlled via JS class activation) -->
<div class="modal-overlay" id="modal">
  <div class="modal-box">
    <div class="modal-header">
      <h3>Confirm Action</h3>
      <button class="modal-close">&times;</button>
    </div>
    <div class="modal-body">
      <p>Are you sure you want to approve this merchant profile?</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-ghost">Cancel</button>
      <button class="btn btn-primary">Approve</button>
    </div>
  </div>
</div>

Live Sandbox Playground

Experiment with brand colors, spacing scales, and curves in real-time. The code playground translates your modifications straight to the custom CSS layout engine.

Tokens Override

Primary Color Hue (Forest) 142

Secondary Color Hue (Olive) 84

Border Radius (Standard) 12px

Layout Spacing Factor 1

Live Preview

Dynamic Component

Interactive Sandbox Card

All elements inside this preview frame adjust dynamically to the slider configuration parameters in real-time.