Design System

Visual language, color palette, typography, spacing, and component patterns for the Leadmetrics platform.

Implementation: Tailwind CSS v4 + shadcn/ui + CSS custom properties. Token definitions: packages/ui/src/globals.css Theming (dark/light mode toggle): theming.md

Brand Identity

Logo

🎁 leadmetrics

• Icon: gift-box / cube icon in gold/amber (#F5A623)
• Wordmark: lead in white (or dark), metrics in violet (#7C5CFC)
• Used in: auth screens (centered), sidebar/nav (top-left)

Tagline

“Transform Your Digital Marketing Strategy” Powered by cutting-edge Agentic AI, delivering intelligent automation and real-time insights.

“Agentic AI” always rendered in amber/yellow (#FBBF24) bold.

Color Palette

Core Brand Colors

Background Scale (Dark UI)

The auth and register screens use a layered dark background system. These tokens apply globally to the dark theme.

Semantic Color Tokens

These map to CSS custom properties consumed by shadcn/ui components.

Left Panel Gradient (Auth Screens)

All three apps share the same left-panel gradient pattern and dot-particle overlay. The gradient values below are the implemented values (verified in code):

background: linear-gradient(
  135deg,
  #1a0033 0%,    /* deepest purple-black */
  #4c1d95 100%   /* violet */
);

Overlaid with 20 scattered circular dot particles (opacity 20%, variable radius 4–16px, white) using absolute-positioned divs for depth.

Per-App Auth Shell Tokens

Each app uses the shared dark surface palette plus a small per-app identity accent applied to the sidebar badge, icon, and focus ring. All other colors (backgrounds, borders, text) are identical across apps.

All three badges intentionally share the same violet colors — the visual distinction comes from the label text, not the badge color.

Auth Form Card Tokens (all apps)

Status Colors

Typography

Font Family

Primary: Inter (Google Fonts / self-hosted) Fallback: ui-sans-serif, system-ui, -apple-system, sans-serif

font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;

Inter is used for all UI text — headings, body, labels, inputs, buttons.

Type Scale

Letter Spacing

• Headings: -0.01em to -0.02em (slightly tight for a polished feel)
• Body: 0em (default)
• Badge / uppercase labels: 0.04em
• Buttons: -0.01em

Spacing & Layout

Base Unit

4px (Tailwind default: 1 = 4px). All spacing uses multiples of 4px.

Common spacing values

Border Radius

Components

Buttons

Primary Button

Violet background. Used for the main action on every screen.

┌──────────────────────────────────────────┐
│            Login  →                      │  height: 44px
└──────────────────────────────────────────┘
bg: #7C5CFC  text: white  radius: 8px
hover: #5B3FD4  active: #4A32C0

• Full-width within form cards on auth/register screens
• Fixed width (min-w-[140px]) on in-app screens
• Disabled state: opacity: 70%, cursor: not-allowed
• Loading state: spinner replaces arrow icon, text remains

Secondary Button

Dark outline. Used for “Back” and secondary actions.

┌────────────────────┐
│   ← Back           │  height: 44px
└────────────────────┘
bg: #161B27  border: #2A3347  text: #F9FAFB
hover: #252D40

Ghost Button / Link Button

No background. Used for “Forgot password?”, “Sign up →”, “Sign in” links.

Forgot password?    text: #7C5CFC  underline on hover

Danger Button

Red. Used for destructive actions (delete, reject, cancel subscription).

bg: #EF4444  text: white  hover: #DC2626

Button Sizes

Form Inputs

All inputs share the same visual treatment on dark backgrounds:

Label (14px, medium, white)
┌─────────────────────────────────────────┐
│  [icon]  Placeholder text               │  height: 44px
└─────────────────────────────────────────┘
Helper text (12px, gray-500, optional)

Input with Prefix Icon

┌──────────────────────────────────────────┐
│  ✉  Enter your email                     │
└──────────────────────────────────────────┘
Icon: 16px, color: #6B7280 (gray-500)
Icon-to-text gap: 8px

Password Input

┌──────────────────────────────────── [👁] ┐
│  🔒  Enter your password                 │
└──────────────────────────────────────────┘
Eye icon right-aligned: toggles type="password" / type="text"

Input with Suffix Button (Generate)

┌──────────────────────────────── [👁] ┐  ┌─────────────┐
│  Enter password                      │  │  Generate   │
└──────────────────────────────────────┘  └─────────────┘
Generate: sm button, violet, right of input

Select / Dropdown

Same visual treatment as text inputs. Caret icon right-aligned.

┌─────────────────────────────────────── ▾┐
│  Select your country                    │
└─────────────────────────────────────────┘

Error State

┌──────────────────────────────────────────┐
│  Enter your email                        │  border: red-500
└──────────────────────────────────────────┘
⚠ Please enter a valid email address       (12px, red-400)

Cards

Form Card

Used as the container for auth forms and registration wizard steps.

background: #161B27;
border: 1px solid #2A3347;
border-radius: 16px;
padding: 32px;

On auth screens: max-width: 400px, centered within the right panel. On register screens: max-width: 780px, centered on page.

Plan Card

┌──────────────────────────────┐
│  [ Popular badge (optional)] │
│                              │  min-height: 340px
│  Plan Name                   │  padding: 24px
│  Tagline                     │
│  Price                       │
│                              │
│  What's included             │
│  ✓ Feature                   │
│  ✓ Feature                   │
│                              │
└──────────────────────────────┘

Selected plan shows a checkmark badge (white ✓ on violet circle) top-right. “Popular” badge: small pill above the card, violet gradient, 11px 600 uppercase.

Toast Notifications

Toasts appear bottom-right. Auto-dismiss after 4 seconds.

Success Toast

┌────────────────────────────┐
│  ● Success                 │
│  Your progress has been    │
│  saved                     │
└────────────────────────────┘
bg: #0F2A1A  border-left: 4px solid #22C55E
icon: green dot  title: 14px 600 green-400
body: 13px gray-300

Error Toast

bg: #2A0F0F  border-left: 4px solid #EF4444

Info Toast / Banner (inline)

┌──────────────────────────────────────────────────┐
│ ✨ This is how your company name will appear     │
│    throughout the platform                       │
└──────────────────────────────────────────────────┘
bg: #1C1A00  border: 1px solid #4A3500
icon: ✨ (amber)  text: 13px, amber-200
border-radius: 8px  padding: 12px 16px

Step Progress Bar

Used in the 4-step registration wizard.

  ①──────②──────③──────④

Step Circle

Circle size: 48px. Icon size: 22px.

Connector Line

Line height: 2px. Stretches between circle edges.

Labels

Step name: 14px 600, white (active) / gray-400 (future) / white (completed) Step subtitle: 12px 400, gray-500

Toggle Button Pair

Used for binary choices (e.g. GST selection, boolean preferences).

┌──────────────────────┐  ┌──────────────────────┐
│   Yes, I have GST    │  │  ✓ No GST number     │
└──────────────────────┘  └──────────────────────┘
   unselected                   selected

Height: 48px. Equal width, side by side. border-radius: 8px.

Badges & Status Chips

┌──────────────┐
│  ● Active    │  height: 22px  padding: 4px 10px
└──────────────┘

Font: 11px 600 uppercase with letter-spacing: 0.04em.

Feature Showcase Carousel (Auth Left Panel)

The left panel of auth screens shows a rotating feature carousel.

Screenshot frame:

• Dark rounded frame: bg: #0D1117, border-radius: 16px, border: 1px solid #2A3347
• Subtle inner shadow to simulate depth
• Wave/hill SVG shape at the bottom of the screenshot area (violet, low opacity)

Carousel pagination:

• Dot indicators below the screenshot
• Active dot: 8px wide, 8px tall, rounded-full, violet
• Inactive dot: 8px wide, 8px tall, rounded-full, gray-600
• Auto-advances every 4 seconds; respects prefers-reduced-motion

Particle overlay:

• Scattered dots across the left panel background
• Sizes: 2–5px radius, rgba(255,255,255,0.3) to rgba(124,92,252,0.4)
• Static (no animation) or subtle float animation if reduced-motion is off

Iconography

See icons.md for the full icon reference — every icon in use, its exact import, and every file that uses it.

Motion & Animation

Guiding principle: Purposeful, subtle. No decorative animations that don’t communicate state.

prefers-reduced-motion: All animations disabled or replaced with instant state change. Carousel auto-advance paused.

Responsive Breakpoints

Inherited from Tailwind v4 defaults, consistent with responsive-design.md.

Dark / Light Mode

The platform defaults to dark mode (as shown in all screenshots). Light mode is available via the toggle in the app header.

Auth and registration screens are always dark — they do not respond to the light/light toggle. The feature showcase left panel is always the purple gradient regardless of mode.

In-app screens (Dashboard, DM Portal, Manage) support both modes. See theming.md for the full CSS variable definitions and the next-themes setup.

CSS Variable Quick Reference

/* Auth / Register screen specific variables */
:root {
  --auth-bg:            #0D1117;
  --auth-bg-register:   #080D1A;
  --auth-card-bg:       #161B27;
  --auth-input-bg:      #1E2435;
  --auth-border:        #2A3347;
  --auth-accent:        #7C5CFC;
  --auth-accent-hover:  #5B3FD4;
  --auth-success:       #22C55E;
  --auth-panel-from:    #3B0066;
  --auth-panel-to:      #6B21A8;
 
  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
 
  /* Radii */
  --radius-input:  6px;
  --radius-card:   16px;
  --radius-button: 8px;
}