Maverix DS — Maverix Studio

Maverix DS Design System

A production-grade dark-theme component library for Maverix Studio applications.

Explore Components Get CSS

Colors

Design tokens for backgrounds, text, and semantic colors.

Backgrounds

bg

#090E25

surface

#0D1530

surface-alt

#070B1E

elevated

#0F1735

Primary (Purple)

primary-50

#EEE6F6

primary-100

#DDCDED

primary-200

#BA9CDB

primary-400

#7539B7

primary-500

#5307A5

Accents

indigo-400

#818CF8

indigo-500

#6366F1

success-500

#22C55E

danger-600

#E11C48

Grey Scale

grey-300

#D1D5DB

grey-400

#9CA3AF

grey-500

#6B7280

grey-slate

#64748B

grey-gull

#94A3B8

Typography

Inter font with a consistent scale from 12px to 36px.

.text-4xl 36px Bold

.text-3xl 30px Regular

.text-2xl 24px Medium

.text-xl 20px Semi-bold

.text-base 16px Regular body text

.text-sm 14px Small text

.text-xs 12px Extra small caption

Font Weights

400 Regular 500 Medium 600 Semi-bold 700 Bold

Icons

Tabler Icons via webfont CDN. Use <i class="ti ti-{name}"></i>

home

search

settings

user

bell

plus

edit

trash

check

x

download

filter

phone

chart-line

bitcoin

trending-up

Spacing

8px grid system with utility classes for padding, margin, and gap.

--space-1 (4px)

--space-2 (8px)

--space-3 (12px)

--space-4 (16px)

--space-6 (24px)

--space-8 (32px)

--space-12 (48px)

Badges

Status pills for categorization and state indication.

Semantic Badges

Success Danger Warning Primary Indigo Muted Default

Status Badges

New Queued Calling QA Approved Merged Rejected Conflict Human Review Failed DNC

Buttons

Primary actions, secondary alternatives, and destructive operations.

Variants

Sizes

States

Cards

Content containers with optional header and footer.

Card Title Active

This is a standard card with a header, body, and footer. It uses the surface background with a subtle border and shadow.

Simple Card

A card without header/footer, just body content. Useful for simple content blocks.

Stat Cards

Metric displays for dashboards with optional trends and accent borders.

Total Leads

12,847

12.5%

Conversions

1,284

8.2%

Churn Rate

3.2%

0.4%

Revenue

$48.2k

22.1%

Tables

Data tables with dark styling, hover rows, and optional striping.

Name	Status	Role	Last Active
Sarah Chen	Active	Admin	2 min ago
James Wilson	Away	Agent	1 hour ago
Maria Garcia	Offline	Agent	3 days ago
Alex Thompson	Suspended	Viewer	2 weeks ago

Forms

Inputs, selects, textareas, and form layout components.

Email Address

Password Must be at least 8 characters.

Role

Notes

Invalid Input Please enter a valid email address.

Disabled Input

Sizes

Alerts

Contextual feedback messages with icons and accent borders.

Successfully deployed to production. All systems operational.

Build failed. Check the logs for more details.

Your API key expires in 3 days. Please rotate credentials.

A new version of Maverix DS is available. Update now

Tabs

Horizontal tab navigation with content panels. Uses data-tab-target.

This is the Overview panel. Click other tabs to switch views.

Analytics data would appear here — charts, metrics, and reports.

Settings panel with configuration options and preferences.

Modals

Overlay dialogs for confirmations, forms, and detail views.

Dropdowns

Positioned menus triggered by buttons.

Steps

Horizontal progress indicator for multi-step workflows.

Details

02 Review

03 Confirm

04 Complete

Progress Bars

Visual indicators of completion percentage.

Upload progress 72%

Build status 100%

Disk usage 89%

API calls 45%

Avatars

User identity indicators with initials or images.

S

DI

MX

L2

Skeleton Loaders

✦ v2 Additions

Nine new components added in Maverix DS v2.0. Use the sidebar to jump to each.

Toggle / Switch

Styled <input type="checkbox"> with .toggle or .toggle-sm. Pure CSS — no JS required. Checked color: --primary-500.

Default Size (44×24px)

On (checked) Off (unchecked) Disabled off Disabled on

Small Size (.toggle-sm, 32×18px)

Small on Small off

Campaign Type & Scrub Mode Badges

Extend the existing .badge pill with campaign and scrub modifier classes.

Campaign Type Badges

Loop Specific

Scrub Mode Badges

Lenient Strict

Compact Progress Bar

6px tall progress bar. Use .progress-sm as wrapper and .progress-fill as fill. Set width via inline style.

25%

60%

90%

Empty State

Use .empty-state for zero-data views. Optional CTA via .empty-action.

No campaigns yet

Create your first campaign to start reaching leads.

No records found

Try adjusting your filters or search query.

Compact Stat Card

Half-height stat card using .stat-card-sm. Fits 3-per-row in a 6-column grid. Label is 11px, value is 20px bold. No trend indicator.

Queued

1,240

Called

847

Approved

312

Failed

54

DNC

18

Human Review

9

Calling Window Indicator

Inline dot-badge for table cells. .badge-window-active (green) and .badge-window-inactive (grey). Dot is rendered via ::before pseudo-element.

08:00–17:00 SAST 08:00–17:00 SAST

In Context (table)

Campaign	Calling Window
Summer Outreach	08:00–17:00 SAST
Q4 Closures	08:00–17:00 SAST

Timeline / Activity Log

Vertical event log. Use .timeline as wrapper, .timeline-item for each row with modifier classes: .timeline-success, .timeline-warning, .timeline-error, .timeline-neutral.

Import Complete

247 new records added to the pipeline