Baseline UI — Design System Reference

When invoked, read and reference these canonical source files before answering any design question:

• frontend/src/styles/global.css — design tokens (CSS custom properties)

• frontend/src/styles/responsive.css — breakpoints, accessibility rules

• frontend/src/components/Layout/AdminLayout.tsx — admin shell layout

Color Palette (CSS Custom Properties)

Token Value Usage

--color-primary

#1a365d

Navy — headings, primary buttons, brand

--color-primary-light

#2b6cb0

Links, hover states, focus outlines

--color-secondary

#e53e3e

Red — CTAs, warnings, destructive actions

--color-accent

#38a169

Green — success states, positive indicators

--color-bg

#ffffff

Page background

--color-bg-alt

#f7fafc

Alternate section backgrounds

--color-text

#2d3748

Body text

--color-text-light

#718096

Muted/secondary text

--color-border

#e2e8f0

Card borders, dividers

Rule: Never hardcode hex values. Always use var(--color-*) in CSS or reference Bootstrap utility classes that map to these values.

Typography

• Font stack: 'Segoe UI', system-ui, -apple-system, sans-serif

• Headings: font-weight: 700 , line-height: 1.2 , color: var(--color-primary)

• Body: line-height: 1.6 , color: var(--color-text)

• Links: color: var(--color-primary-light) , underline on hover

Spacing & Layout

• Max width: --max-width: 1200px

• Section padding: 4rem 0 (desktop), 2.5rem 0 (mobile), 3rem 0 (tablet)

• Container: max-width: var(--max-width) , padding: 0 1rem

• Admin shell: Dark navbar (navbar-dark bg-dark ), bg-light main area, container py-4 content wrapper

Bootstrap 5 Component Patterns

These are the canonical patterns used throughout the admin UI:

Cards

<div class="card border-0 shadow-sm mb-4"> <div class="card-header bg-white fw-semibold">Title</div> <div class="card-body">Content</div> </div>

KPI Stat Cards

<div class="col-md-3"> <div class="card border-0 shadow-sm"> <div class="card-body text-center p-3"> <div class="fs-4 fw-bold text-primary">42</div> <div class="text-muted small">Metric Label</div> </div> </div> </div>

Data Tables

<div class="table-responsive"> <table class="table table-hover mb-0"> <thead class="table-light">...</thead> <tbody>...</tbody> </table> </div>

Tab Navigation

<ul class="nav nav-tabs mb-4"> <li class="nav-item"> <button class="nav-link active" onClick={...}>Tab Label</button> </li> </ul>

Badges

<span class="badge bg-success">active</span> <span class="badge bg-warning">paused</span> <span class="badge bg-info">completed</span> <span class="badge bg-secondary">draft</span> <span class="badge bg-danger">TEST MODE</span>

Filter Bars

<div class="d-flex gap-2 mb-3 flex-wrap align-items-center"> <input class="form-control form-control-sm" style="max-width: 250px" placeholder="Search..." /> <select class="form-select form-select-sm" style="max-width: 150px">...</select> <div class="ms-auto d-flex gap-2"> <button class="btn btn-outline-primary btn-sm">Action</button> </div> </div>

Buttons

<button class="btn btn-primary btn-sm">Primary</button> <button class="btn btn-outline-secondary btn-sm">Secondary</button> <button class="btn btn-outline-danger btn-sm">Danger</button> <button class="btn btn-success btn-sm">Success</button>

Form Controls

<label class="form-label small fw-medium">Label</label> <input class="form-control form-control-sm" /> <div class="form-text">Helper text</div>

<!-- Toggle switch --> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="sw-id" /> <label class="form-check-label small" for="sw-id"> <span class="fw-medium">Title</span><br /> <span class="text-muted">Description</span> </label> </div>

Modal Overlays

<div class="modal show d-block" style="backgroundColor: 'rgba(0,0,0,0.5)'"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Title</h5> <button class="btn-close" onClick={onClose} /> </div> <div class="modal-body" style="max-height: 500px; overflow: auto">...</div> <div class="modal-footer">...</div> </div> </div> </div>

Custom CSS Classes (from global.css)

Class Purpose

.card-lift

Hover: translateY(-4px) + deeper shadow

.fade-in-section

Scroll-triggered fade + slide-up animation

.badge-label

Small-caps uppercase label badge

.agent-card

Bordered card with hover lift for agent/feature cards

.callout-box

Left-bordered gradient callout for emphasis

.timeline-horizontal

Horizontal step timeline

.skip-nav

Skip navigation link for accessibility

.hero-bg

Hero section with gradient overlay

.btn-accent

Secondary red CTA button

Responsive Breakpoints

Breakpoint Range Key adjustments

Mobile < 576px

Smaller headings, reduced padding, stacked layouts

Tablet 576px – 992px

Medium headings, intermediate padding

Desktop

992px

Full layout, default spacing

Touch targets < 992px

Min 44px height/width on buttons, inputs, links

iOS zoom prevention < 992px

font-size: 16px on form controls

Accessibility Patterns

• Focus: outline: 3px solid var(--color-primary-light) , outline-offset: 2px on :focus-visible

• Reduced motion: All animations/transitions → 0.01ms when prefers-reduced-motion: reduce

• High contrast: Cards get 2px solid borders, .text-muted becomes full contrast, outline buttons get 2px borders

Existing Reusable Components

Component Path Usage

TemperatureBadge

frontend/src/components/TemperatureBadge.tsx

Color-coded lead temperature pill (cold/cool/warm/hot/qualified)

LeadDetailModal

frontend/src/components/campaign/LeadDetailModal.tsx

Per-lead drill-down with timeline + temperature history

AdminLayout

frontend/src/components/Layout/AdminLayout.tsx

Admin page shell with dark navbar