Admin Dashboard - Free HTML/CSS UI Kit
Clean, data-driven dashboard components with professional sidebar navigation, metric cards, data tables, and enterprise-grade form controls.
Download Full Kit (.zip)
Complete kit with all components & styles
Just need one component?
Download base.css and add the following line to your HTML:
<link rel="stylesheet" href="base.css">
Then grab a component below and add it to your HTML.
Color Palette
Navy Slate
#0F172A
Professional Blue
#2563EB
Success Green
#10B981
Light Surface
#F1F5F9
Muted Slate
#64748B
Typography
Hero Sections
Dashboard Overview Strip
HTML
<div class="ad-overview-strip">
<!-- Welcome row -->
<div class="ad-overview-header">
<div>
<h1 class="ad-overview-title">Good morning, Sarah 👋</h1>
<p class="ad-overview-subtitle">Here's what's happening across your platform today.</p>
</div>
<div class="ad-overview-actions">
<button class="ad-btn ad-btn-outline">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Export
</button>
<button class="ad-btn ad-btn-primary">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
New Report
</button>
</div>
</div>
<!-- KPI strip -->
<div class="ad-kpi-strip">
<div class="ad-kpi-card ad-card">
<div class="ad-kpi-header">
<span class="ad-kpi-label">Total Revenue</span>
<div class="ad-kpi-icon" style="background-color: var(--ad-primary-muted); color: var(--ad-primary);">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
</div>
<div class="ad-kpi-value">$128,450</div>
<div class="ad-kpi-trend">
<span class="ad-kpi-delta text-success">↑ 12.5%</span>
<span class="text-muted">vs last month</span>
</div>
</div>
<div class="ad-kpi-card ad-card">
<div class="ad-kpi-header">
<span class="ad-kpi-label">Active Users</span>
<div class="ad-kpi-icon" style="background-color: var(--ad-success-muted); color: var(--ad-success);">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
</div>
<div class="ad-kpi-value">8,290</div>
<div class="ad-kpi-trend">
<span class="ad-kpi-delta text-success">↑ 5.1%</span>
<span class="text-muted">vs last week</span>
</div>
</div>
<div class="ad-kpi-card ad-card">
<div class="ad-kpi-header">
<span class="ad-kpi-label">Churn Rate</span>
<div class="ad-kpi-icon" style="background-color: var(--ad-danger-muted); color: var(--ad-danger);">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg>
</div>
</div>
<div class="ad-kpi-value">2.4%</div>
<div class="ad-kpi-trend">
<span class="ad-kpi-delta text-danger">↑ 0.3%</span>
<span class="text-muted">vs last month</span>
</div>
</div>
<div class="ad-kpi-card ad-card">
<div class="ad-kpi-header">
<span class="ad-kpi-label">Uptime</span>
<div class="ad-kpi-icon" style="background-color: var(--ad-info-muted); color: var(--ad-info);">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
</div>
</div>
<div class="ad-kpi-value">99.98%</div>
<div class="ad-kpi-trend">
<span class="ad-kpi-delta text-success">↑ 0.02%</span>
<span class="text-muted">30-day avg</span>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Dashboard Overview Strip */
/* NOTE: This component requires base.css to be included in your page. */
.ad-overview-strip {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 1100px;
margin: 0 auto;
}
.ad-overview-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.ad-overview-title {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.4rem;
}
.ad-overview-subtitle {
font-size: 0.95rem;
}
.ad-overview-actions {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
/* KPI Strip */
.ad-kpi-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
}
.ad-kpi-card {
padding: 1.5rem !important;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.ad-kpi-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.ad-kpi-label {
font-family: var(--ad-font-heading);
font-size: 0.8rem;
font-weight: 600;
color: var(--ad-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ad-kpi-icon {
width: 32px;
height: 32px;
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-kpi-value {
font-family: var(--ad-font-heading);
font-size: 1.85rem;
font-weight: 700;
color: var(--ad-text);
letter-spacing: -0.02em;
line-height: 1;
}
.ad-kpi-trend {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
font-weight: 500;
}
.ad-kpi-delta {
font-weight: 700;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
/* ===========================
Admin Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Core surfaces */
--ad-bg: #F1F5F9;
--ad-surface: #FFFFFF;
--ad-surface-2: #F8FAFC;
--ad-sidebar-bg: #0F172A;
--ad-sidebar-hover:#1E293B;
/* Brand colors */
--ad-primary: #2563EB;
--ad-primary-hover:#1D4ED8;
--ad-primary-muted:#DBEAFE;
--ad-success: #10B981;
--ad-success-muted:#D1FAE5;
--ad-warning: #F59E0B;
--ad-warning-muted:#FEF3C7;
--ad-danger: #EF4444;
--ad-danger-muted: #FEE2E2;
--ad-info: #6366F1;
--ad-info-muted: #EEF2FF;
/* Text */
--ad-text: #0F172A;
--ad-text-muted: #64748B;
--ad-text-light: #94A3B8;
--ad-sidebar-text: #94A3B8;
--ad-sidebar-active:#FFFFFF;
/* Borders */
--ad-border: #E2E8F0;
--ad-border-strong:#CBD5E1;
/* Radius */
--ad-radius-sm: 6px;
--ad-radius: 10px;
--ad-radius-lg: 14px;
--ad-radius-xl: 20px;
/* Fonts */
--ad-font-heading: 'Inter', sans-serif;
--ad-font-body: 'DM Sans', sans-serif;
/* Shadows */
--ad-shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
--ad-shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 4px 16px rgba(15,23,42,0.04);
--ad-shadow: 0 4px 6px rgba(15,23,42,0.07), 0 10px 32px rgba(15,23,42,0.06);
--ad-shadow-lg: 0 8px 16px rgba(15,23,42,0.10), 0 24px 48px rgba(15,23,42,0.08);
/* Transitions */
--ad-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--ad-font-body);
color: var(--ad-text);
background-color: var(--ad-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card Surface ─────────────── */
.ad-card {
background-color: var(--ad-surface);
border: 1px solid var(--ad-border);
border-radius: var(--ad-radius);
box-shadow: var(--ad-shadow-sm);
padding: 1.75rem;
transition: var(--ad-transition);
}
.ad-card:hover {
box-shadow: var(--ad-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ad-font-heading);
font-weight: 600;
margin: 0;
color: var(--ad-text);
letter-spacing: -0.01em;
line-height: 1.25;
}
p {
font-family: var(--ad-font-body);
color: var(--ad-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.ad-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--ad-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--ad-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ad-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
}
.ad-btn:focus-visible {
outline: 2px solid var(--ad-primary);
outline-offset: 2px;
}
.ad-btn-primary {
background-color: var(--ad-primary);
color: #fff;
border-color: var(--ad-primary);
}
.ad-btn-primary:hover {
background-color: var(--ad-primary-hover);
border-color: var(--ad-primary-hover);
box-shadow: 0 4px 12px rgba(37,99,235,0.35);
transform: translateY(-1px);
}
.ad-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.ad-btn-outline {
background-color: var(--ad-surface);
color: var(--ad-text);
border-color: var(--ad-border-strong);
}
.ad-btn-outline:hover {
background-color: var(--ad-surface-2);
border-color: var(--ad-text-light);
transform: translateY(-1px);
}
.ad-btn-danger {
background-color: var(--ad-danger);
color: #fff;
border-color: var(--ad-danger);
}
.ad-btn-danger:hover {
background-color: #dc2626;
box-shadow: 0 4px 12px rgba(239,68,68,0.35);
transform: translateY(-1px);
}
.ad-btn-ghost {
background-color: transparent;
color: var(--ad-text-muted);
border-color: transparent;
}
.ad-btn-ghost:hover {
background-color: var(--ad-surface-2);
color: var(--ad-text);
}
.ad-btn-sm {
padding: 0.4rem 0.85rem;
font-size: 0.8rem;
}
.ad-btn-lg {
padding: 0.8rem 1.75rem;
font-size: 1rem;
}
.ad-btn-block {
width: 100%;
}
.ad-btn-icon {
width: 36px;
height: 36px;
padding: 0;
border-radius: var(--ad-radius-sm);
}
/* ── Form Controls ────────────── */
.ad-input {
width: 100%;
padding: 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
outline: none;
transition: var(--ad-transition);
line-height: 1.5;
}
.ad-input::placeholder {
color: var(--ad-text-light);
}
.ad-input:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ad-font-heading);
font-weight: 600;
font-size: 0.85rem;
color: var(--ad-text);
}
.ad-select {
width: 100%;
padding: 0.6rem 2rem 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ad-transition);
}
.ad-select:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
/* ── Status Badges ────────────── */
.ad-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.65rem;
border-radius: 20px;
font-family: var(--ad-font-heading);
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.ad-badge-success { background-color: var(--ad-success-muted); color: #065F46; }
.ad-badge-warning { background-color: var(--ad-warning-muted); color: #92400E; }
.ad-badge-danger { background-color: var(--ad-danger-muted); color: #991B1B; }
.ad-badge-info { background-color: var(--ad-info-muted); color: #3730A3; }
.ad-badge-default { background-color: var(--ad-border); color: var(--ad-text-muted); }
/* ── Toggle Switch ────────────── */
.ad-toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.ad-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.ad-toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: var(--ad-border-strong);
border-radius: 24px;
transition: var(--ad-transition);
}
.ad-toggle-slider::before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: #fff;
border-radius: 50%;
transition: var(--ad-transition);
box-shadow: var(--ad-shadow-xs);
}
.ad-toggle input:checked + .ad-toggle-slider {
background-color: var(--ad-primary);
}
.ad-toggle input:checked + .ad-toggle-slider::before {
transform: translateX(20px);
}
/* ── Divider ──────────────────── */
.ad-divider {
border: none;
border-top: 1px solid var(--ad-border);
margin: 0;
}
/* ── Avatar ───────────────────── */
.ad-avatar {
border-radius: var(--ad-radius-sm);
object-fit: cover;
background-color: var(--ad-primary-muted);
color: var(--ad-primary);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ad-font-heading);
font-weight: 700;
flex-shrink: 0;
}
.ad-avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; border-radius: 50%; }
.ad-avatar-md { width: 38px; height: 38px; font-size: 0.9rem; }
.ad-avatar-lg { width: 48px; height: 48px; font-size: 1.1rem; }
/* ── Logo ─────────────────────── */
.ad-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--ad-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: #fff;
letter-spacing: -0.02em;
}
.ad-logo-icon {
width: 32px;
height: 32px;
background-color: var(--ad-primary);
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-logo-icon svg {
display: block;
}
/* ── Utility classes ──────────── */
.text-success { color: var(--ad-success) !important; }
.text-danger { color: var(--ad-danger) !important; }
.text-warning { color: var(--ad-warning) !important; }
.text-muted { color: var(--ad-text-muted) !important; }
.text-light { color: var(--ad-text-light) !important; }
/* --- COMPONENT STYLES --- */
.ad-overview-strip {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 1100px;
margin: 0 auto;
}
.ad-overview-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.ad-overview-title {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.4rem;
}
.ad-overview-subtitle {
font-size: 0.95rem;
}
.ad-overview-actions {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
/* KPI Strip */
.ad-kpi-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
}
.ad-kpi-card {
padding: 1.5rem !important;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.ad-kpi-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.ad-kpi-label {
font-family: var(--ad-font-heading);
font-size: 0.8rem;
font-weight: 600;
color: var(--ad-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ad-kpi-icon {
width: 32px;
height: 32px;
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-kpi-value {
font-family: var(--ad-font-heading);
font-size: 1.85rem;
font-weight: 700;
color: var(--ad-text);
letter-spacing: -0.02em;
line-height: 1;
}
.ad-kpi-trend {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
font-weight: 500;
}
.ad-kpi-delta {
font-weight: 700;
}
Welcome Split Hero
HTML
<div class="ad-split-hero">
<div class="ad-split-main ad-card">
<div class="ad-split-badge ad-badge ad-badge-success">
<svg viewBox="0 0 24 24" width="11" height="11" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
All Systems Operational
</div>
<h2 class="ad-split-title">Welcome back,<br><span style="color: var(--ad-primary);">Sarah Jenkins</span></h2>
<p class="ad-split-desc">Your platform is performing above average this week. Revenue is up 12.5% and user growth is steady at 5.1%. Three new support tickets need your review.</p>
<div class="ad-split-actions">
<button class="ad-btn ad-btn-primary">Go to Dashboard</button>
<button class="ad-btn ad-btn-outline">View Reports</button>
</div>
</div>
<div class="ad-split-sidebar">
<div class="ad-quick-stats ad-card">
<h4 class="ad-quick-stats-title">Quick Snapshot</h4>
<div class="ad-quick-stat-row">
<div class="ad-quick-icon" style="background-color:var(--ad-primary-muted); color:var(--ad-primary);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
</div>
<div class="ad-quick-info">
<span class="ad-quick-label">Open Tickets</span>
<span class="ad-quick-val">3</span>
</div>
<span class="ad-badge ad-badge-warning">Pending</span>
</div>
<hr class="ad-divider">
<div class="ad-quick-stat-row">
<div class="ad-quick-icon" style="background-color:var(--ad-success-muted); color:var(--ad-success);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
</div>
<div class="ad-quick-info">
<span class="ad-quick-label">API Health</span>
<span class="ad-quick-val">Healthy</span>
</div>
<span class="ad-badge ad-badge-success">Live</span>
</div>
<hr class="ad-divider">
<div class="ad-quick-stat-row">
<div class="ad-quick-icon" style="background-color:var(--ad-info-muted); color:var(--ad-info);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
</div>
<div class="ad-quick-info">
<span class="ad-quick-label">New Signups</span>
<span class="ad-quick-val">+142 today</span>
</div>
<span class="ad-badge ad-badge-info">↑ 8%</span>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Welcome Split Hero */
/* NOTE: This component requires base.css to be included in your page. */
.ad-split-hero {
display: grid;
grid-template-columns: 1fr 360px;
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
.ad-split-main {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 2.5rem !important;
}
.ad-split-badge {
align-self: flex-start;
}
.ad-split-title {
font-size: 2.25rem;
font-weight: 700;
line-height: 1.2;
}
.ad-split-desc {
font-size: 1rem;
line-height: 1.7;
max-width: 560px;
}
.ad-split-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
/* Quick Snapshot sidebar */
.ad-quick-stats {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.75rem !important;
}
.ad-quick-stats-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.ad-quick-stat-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.ad-quick-icon {
width: 32px;
height: 32px;
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-quick-info {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.ad-quick-label {
font-family: var(--ad-font-heading);
font-size: 0.78rem;
font-weight: 500;
color: var(--ad-text-muted);
}
.ad-quick-val {
font-family: var(--ad-font-heading);
font-size: 0.92rem;
font-weight: 700;
color: var(--ad-text);
}
@media (max-width: 900px) {
.ad-split-hero {
grid-template-columns: 1fr;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
/* ===========================
Admin Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Core surfaces */
--ad-bg: #F1F5F9;
--ad-surface: #FFFFFF;
--ad-surface-2: #F8FAFC;
--ad-sidebar-bg: #0F172A;
--ad-sidebar-hover:#1E293B;
/* Brand colors */
--ad-primary: #2563EB;
--ad-primary-hover:#1D4ED8;
--ad-primary-muted:#DBEAFE;
--ad-success: #10B981;
--ad-success-muted:#D1FAE5;
--ad-warning: #F59E0B;
--ad-warning-muted:#FEF3C7;
--ad-danger: #EF4444;
--ad-danger-muted: #FEE2E2;
--ad-info: #6366F1;
--ad-info-muted: #EEF2FF;
/* Text */
--ad-text: #0F172A;
--ad-text-muted: #64748B;
--ad-text-light: #94A3B8;
--ad-sidebar-text: #94A3B8;
--ad-sidebar-active:#FFFFFF;
/* Borders */
--ad-border: #E2E8F0;
--ad-border-strong:#CBD5E1;
/* Radius */
--ad-radius-sm: 6px;
--ad-radius: 10px;
--ad-radius-lg: 14px;
--ad-radius-xl: 20px;
/* Fonts */
--ad-font-heading: 'Inter', sans-serif;
--ad-font-body: 'DM Sans', sans-serif;
/* Shadows */
--ad-shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
--ad-shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 4px 16px rgba(15,23,42,0.04);
--ad-shadow: 0 4px 6px rgba(15,23,42,0.07), 0 10px 32px rgba(15,23,42,0.06);
--ad-shadow-lg: 0 8px 16px rgba(15,23,42,0.10), 0 24px 48px rgba(15,23,42,0.08);
/* Transitions */
--ad-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--ad-font-body);
color: var(--ad-text);
background-color: var(--ad-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card Surface ─────────────── */
.ad-card {
background-color: var(--ad-surface);
border: 1px solid var(--ad-border);
border-radius: var(--ad-radius);
box-shadow: var(--ad-shadow-sm);
padding: 1.75rem;
transition: var(--ad-transition);
}
.ad-card:hover {
box-shadow: var(--ad-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ad-font-heading);
font-weight: 600;
margin: 0;
color: var(--ad-text);
letter-spacing: -0.01em;
line-height: 1.25;
}
p {
font-family: var(--ad-font-body);
color: var(--ad-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.ad-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--ad-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--ad-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ad-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
}
.ad-btn:focus-visible {
outline: 2px solid var(--ad-primary);
outline-offset: 2px;
}
.ad-btn-primary {
background-color: var(--ad-primary);
color: #fff;
border-color: var(--ad-primary);
}
.ad-btn-primary:hover {
background-color: var(--ad-primary-hover);
border-color: var(--ad-primary-hover);
box-shadow: 0 4px 12px rgba(37,99,235,0.35);
transform: translateY(-1px);
}
.ad-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.ad-btn-outline {
background-color: var(--ad-surface);
color: var(--ad-text);
border-color: var(--ad-border-strong);
}
.ad-btn-outline:hover {
background-color: var(--ad-surface-2);
border-color: var(--ad-text-light);
transform: translateY(-1px);
}
.ad-btn-danger {
background-color: var(--ad-danger);
color: #fff;
border-color: var(--ad-danger);
}
.ad-btn-danger:hover {
background-color: #dc2626;
box-shadow: 0 4px 12px rgba(239,68,68,0.35);
transform: translateY(-1px);
}
.ad-btn-ghost {
background-color: transparent;
color: var(--ad-text-muted);
border-color: transparent;
}
.ad-btn-ghost:hover {
background-color: var(--ad-surface-2);
color: var(--ad-text);
}
.ad-btn-sm {
padding: 0.4rem 0.85rem;
font-size: 0.8rem;
}
.ad-btn-lg {
padding: 0.8rem 1.75rem;
font-size: 1rem;
}
.ad-btn-block {
width: 100%;
}
.ad-btn-icon {
width: 36px;
height: 36px;
padding: 0;
border-radius: var(--ad-radius-sm);
}
/* ── Form Controls ────────────── */
.ad-input {
width: 100%;
padding: 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
outline: none;
transition: var(--ad-transition);
line-height: 1.5;
}
.ad-input::placeholder {
color: var(--ad-text-light);
}
.ad-input:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ad-font-heading);
font-weight: 600;
font-size: 0.85rem;
color: var(--ad-text);
}
.ad-select {
width: 100%;
padding: 0.6rem 2rem 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ad-transition);
}
.ad-select:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
/* ── Status Badges ────────────── */
.ad-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.65rem;
border-radius: 20px;
font-family: var(--ad-font-heading);
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.ad-badge-success { background-color: var(--ad-success-muted); color: #065F46; }
.ad-badge-warning { background-color: var(--ad-warning-muted); color: #92400E; }
.ad-badge-danger { background-color: var(--ad-danger-muted); color: #991B1B; }
.ad-badge-info { background-color: var(--ad-info-muted); color: #3730A3; }
.ad-badge-default { background-color: var(--ad-border); color: var(--ad-text-muted); }
/* ── Toggle Switch ────────────── */
.ad-toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.ad-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.ad-toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: var(--ad-border-strong);
border-radius: 24px;
transition: var(--ad-transition);
}
.ad-toggle-slider::before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: #fff;
border-radius: 50%;
transition: var(--ad-transition);
box-shadow: var(--ad-shadow-xs);
}
.ad-toggle input:checked + .ad-toggle-slider {
background-color: var(--ad-primary);
}
.ad-toggle input:checked + .ad-toggle-slider::before {
transform: translateX(20px);
}
/* ── Divider ──────────────────── */
.ad-divider {
border: none;
border-top: 1px solid var(--ad-border);
margin: 0;
}
/* ── Avatar ───────────────────── */
.ad-avatar {
border-radius: var(--ad-radius-sm);
object-fit: cover;
background-color: var(--ad-primary-muted);
color: var(--ad-primary);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ad-font-heading);
font-weight: 700;
flex-shrink: 0;
}
.ad-avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; border-radius: 50%; }
.ad-avatar-md { width: 38px; height: 38px; font-size: 0.9rem; }
.ad-avatar-lg { width: 48px; height: 48px; font-size: 1.1rem; }
/* ── Logo ─────────────────────── */
.ad-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--ad-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: #fff;
letter-spacing: -0.02em;
}
.ad-logo-icon {
width: 32px;
height: 32px;
background-color: var(--ad-primary);
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-logo-icon svg {
display: block;
}
/* ── Utility classes ──────────── */
.text-success { color: var(--ad-success) !important; }
.text-danger { color: var(--ad-danger) !important; }
.text-warning { color: var(--ad-warning) !important; }
.text-muted { color: var(--ad-text-muted) !important; }
.text-light { color: var(--ad-text-light) !important; }
/* --- COMPONENT STYLES --- */
.ad-split-hero {
display: grid;
grid-template-columns: 1fr 360px;
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
.ad-split-main {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 2.5rem !important;
}
.ad-split-badge {
align-self: flex-start;
}
.ad-split-title {
font-size: 2.25rem;
font-weight: 700;
line-height: 1.2;
}
.ad-split-desc {
font-size: 1rem;
line-height: 1.7;
max-width: 560px;
}
.ad-split-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
/* Quick Snapshot sidebar */
.ad-quick-stats {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.75rem !important;
}
.ad-quick-stats-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.ad-quick-stat-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.ad-quick-icon {
width: 32px;
height: 32px;
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-quick-info {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.ad-quick-label {
font-family: var(--ad-font-heading);
font-size: 0.78rem;
font-weight: 500;
color: var(--ad-text-muted);
}
.ad-quick-val {
font-family: var(--ad-font-heading);
font-size: 0.92rem;
font-weight: 700;
color: var(--ad-text);
}
@media (max-width: 900px) {
.ad-split-hero {
grid-template-columns: 1fr;
}
}
Forms
Admin Login Panel
HTML
<div class="ad-login-wrapper">
<div class="ad-login-card ad-card">
<div class="ad-login-brand">
<a href="#" class="ad-login-logo">
<div class="ad-logo-icon">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
</div>
<span>AdminKit</span>
</a>
<h2 class="ad-login-title">Sign in to your account</h2>
<p class="ad-login-subtitle">Enter your credentials to access the control panel.</p>
</div>
<form class="ad-login-form" onsubmit="return false;">
<div class="ad-form-group">
<label class="ad-label" for="admin-email">Email address</label>
<div class="ad-input-wrapper">
<svg class="ad-input-icon" viewBox="0 0 24 24" width="15" height="15" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
<input type="email" id="admin-email" class="ad-input ad-input-icon-pad" placeholder="[email protected]" value="[email protected]">
</div>
</div>
<div class="ad-form-group">
<div class="ad-label-row">
<label class="ad-label" for="admin-password">Password</label>
<a href="#" class="ad-link-small">Forgot password?</a>
</div>
<div class="ad-input-wrapper">
<svg class="ad-input-icon" viewBox="0 0 24 24" width="15" height="15" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
<input type="password" id="admin-password" class="ad-input ad-input-icon-pad" placeholder="••••••••••" value="••••••••••">
</div>
</div>
<div class="ad-form-inline">
<label class="ad-checkbox-label">
<input type="checkbox" class="ad-checkbox" checked>
<span>Keep me signed in</span>
</label>
</div>
<button type="submit" class="ad-btn ad-btn-primary ad-btn-block ad-btn-lg">Sign In</button>
</form>
<div class="ad-login-divider">
<span>or continue with SSO</span>
</div>
<button class="ad-btn ad-btn-outline ad-btn-block">
<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12.24 10.285V13.4h6.887C18.2 15.614 15.645 18 12.24 18c-3.86 0-7-3.14-7-7s3.14-7 7-7c1.7 0 3.3.6 4.6 1.8l2.4-2.4C17.3 1.7 14.9 1 12.24 1c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.8 0 9.8-4.1 9.8-10 0-.6 0-1.1-.1-1.7H12.24z"/></svg>
Sign in with Google Workspace
</button>
</div>
</div>
CSS (Component Only)
/* Component: Admin Login Panel */
/* NOTE: This component requires base.css to be included in your page. */
.ad-login-wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 560px;
background-color: var(--ad-bg);
padding: 2rem;
}
.ad-login-card {
width: 100%;
max-width: 420px;
padding: 2.5rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.ad-login-brand {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.ad-login-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--ad-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--ad-text);
letter-spacing: -0.02em;
}
.ad-login-title {
font-size: 1.35rem;
font-weight: 700;
margin-top: 0.25rem;
}
.ad-login-subtitle {
font-size: 0.9rem;
margin-top: -0.25rem;
}
.ad-login-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.ad-form-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.ad-label-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.ad-link-small {
font-family: var(--ad-font-heading);
font-size: 0.8rem;
font-weight: 600;
color: var(--ad-primary);
text-decoration: none;
transition: var(--ad-transition);
}
.ad-link-small:hover {
color: var(--ad-primary-hover);
}
/* Input with icon */
.ad-input-wrapper {
position: relative;
}
.ad-input-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--ad-text-light);
pointer-events: none;
}
.ad-input-icon-pad {
padding-left: 2.35rem;
}
/* Checkbox */
.ad-form-inline {
display: flex;
align-items: center;
}
.ad-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--ad-font-body);
font-size: 0.88rem;
font-weight: 500;
color: var(--ad-text);
cursor: pointer;
user-select: none;
}
.ad-checkbox {
width: 16px;
height: 16px;
accent-color: var(--ad-primary);
cursor: pointer;
border-radius: 4px;
}
/* Divider */
.ad-login-divider {
position: relative;
text-align: center;
}
.ad-login-divider::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background-color: var(--ad-border);
}
.ad-login-divider span {
position: relative;
background-color: var(--ad-surface);
padding: 0 0.85rem;
font-size: 0.8rem;
font-weight: 500;
color: var(--ad-text-light);
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
/* ===========================
Admin Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Core surfaces */
--ad-bg: #F1F5F9;
--ad-surface: #FFFFFF;
--ad-surface-2: #F8FAFC;
--ad-sidebar-bg: #0F172A;
--ad-sidebar-hover:#1E293B;
/* Brand colors */
--ad-primary: #2563EB;
--ad-primary-hover:#1D4ED8;
--ad-primary-muted:#DBEAFE;
--ad-success: #10B981;
--ad-success-muted:#D1FAE5;
--ad-warning: #F59E0B;
--ad-warning-muted:#FEF3C7;
--ad-danger: #EF4444;
--ad-danger-muted: #FEE2E2;
--ad-info: #6366F1;
--ad-info-muted: #EEF2FF;
/* Text */
--ad-text: #0F172A;
--ad-text-muted: #64748B;
--ad-text-light: #94A3B8;
--ad-sidebar-text: #94A3B8;
--ad-sidebar-active:#FFFFFF;
/* Borders */
--ad-border: #E2E8F0;
--ad-border-strong:#CBD5E1;
/* Radius */
--ad-radius-sm: 6px;
--ad-radius: 10px;
--ad-radius-lg: 14px;
--ad-radius-xl: 20px;
/* Fonts */
--ad-font-heading: 'Inter', sans-serif;
--ad-font-body: 'DM Sans', sans-serif;
/* Shadows */
--ad-shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
--ad-shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 4px 16px rgba(15,23,42,0.04);
--ad-shadow: 0 4px 6px rgba(15,23,42,0.07), 0 10px 32px rgba(15,23,42,0.06);
--ad-shadow-lg: 0 8px 16px rgba(15,23,42,0.10), 0 24px 48px rgba(15,23,42,0.08);
/* Transitions */
--ad-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--ad-font-body);
color: var(--ad-text);
background-color: var(--ad-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card Surface ─────────────── */
.ad-card {
background-color: var(--ad-surface);
border: 1px solid var(--ad-border);
border-radius: var(--ad-radius);
box-shadow: var(--ad-shadow-sm);
padding: 1.75rem;
transition: var(--ad-transition);
}
.ad-card:hover {
box-shadow: var(--ad-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ad-font-heading);
font-weight: 600;
margin: 0;
color: var(--ad-text);
letter-spacing: -0.01em;
line-height: 1.25;
}
p {
font-family: var(--ad-font-body);
color: var(--ad-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.ad-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--ad-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--ad-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ad-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
}
.ad-btn:focus-visible {
outline: 2px solid var(--ad-primary);
outline-offset: 2px;
}
.ad-btn-primary {
background-color: var(--ad-primary);
color: #fff;
border-color: var(--ad-primary);
}
.ad-btn-primary:hover {
background-color: var(--ad-primary-hover);
border-color: var(--ad-primary-hover);
box-shadow: 0 4px 12px rgba(37,99,235,0.35);
transform: translateY(-1px);
}
.ad-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.ad-btn-outline {
background-color: var(--ad-surface);
color: var(--ad-text);
border-color: var(--ad-border-strong);
}
.ad-btn-outline:hover {
background-color: var(--ad-surface-2);
border-color: var(--ad-text-light);
transform: translateY(-1px);
}
.ad-btn-danger {
background-color: var(--ad-danger);
color: #fff;
border-color: var(--ad-danger);
}
.ad-btn-danger:hover {
background-color: #dc2626;
box-shadow: 0 4px 12px rgba(239,68,68,0.35);
transform: translateY(-1px);
}
.ad-btn-ghost {
background-color: transparent;
color: var(--ad-text-muted);
border-color: transparent;
}
.ad-btn-ghost:hover {
background-color: var(--ad-surface-2);
color: var(--ad-text);
}
.ad-btn-sm {
padding: 0.4rem 0.85rem;
font-size: 0.8rem;
}
.ad-btn-lg {
padding: 0.8rem 1.75rem;
font-size: 1rem;
}
.ad-btn-block {
width: 100%;
}
.ad-btn-icon {
width: 36px;
height: 36px;
padding: 0;
border-radius: var(--ad-radius-sm);
}
/* ── Form Controls ────────────── */
.ad-input {
width: 100%;
padding: 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
outline: none;
transition: var(--ad-transition);
line-height: 1.5;
}
.ad-input::placeholder {
color: var(--ad-text-light);
}
.ad-input:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ad-font-heading);
font-weight: 600;
font-size: 0.85rem;
color: var(--ad-text);
}
.ad-select {
width: 100%;
padding: 0.6rem 2rem 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ad-transition);
}
.ad-select:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
/* ── Status Badges ────────────── */
.ad-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.65rem;
border-radius: 20px;
font-family: var(--ad-font-heading);
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.ad-badge-success { background-color: var(--ad-success-muted); color: #065F46; }
.ad-badge-warning { background-color: var(--ad-warning-muted); color: #92400E; }
.ad-badge-danger { background-color: var(--ad-danger-muted); color: #991B1B; }
.ad-badge-info { background-color: var(--ad-info-muted); color: #3730A3; }
.ad-badge-default { background-color: var(--ad-border); color: var(--ad-text-muted); }
/* ── Toggle Switch ────────────── */
.ad-toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.ad-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.ad-toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: var(--ad-border-strong);
border-radius: 24px;
transition: var(--ad-transition);
}
.ad-toggle-slider::before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: #fff;
border-radius: 50%;
transition: var(--ad-transition);
box-shadow: var(--ad-shadow-xs);
}
.ad-toggle input:checked + .ad-toggle-slider {
background-color: var(--ad-primary);
}
.ad-toggle input:checked + .ad-toggle-slider::before {
transform: translateX(20px);
}
/* ── Divider ──────────────────── */
.ad-divider {
border: none;
border-top: 1px solid var(--ad-border);
margin: 0;
}
/* ── Avatar ───────────────────── */
.ad-avatar {
border-radius: var(--ad-radius-sm);
object-fit: cover;
background-color: var(--ad-primary-muted);
color: var(--ad-primary);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ad-font-heading);
font-weight: 700;
flex-shrink: 0;
}
.ad-avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; border-radius: 50%; }
.ad-avatar-md { width: 38px; height: 38px; font-size: 0.9rem; }
.ad-avatar-lg { width: 48px; height: 48px; font-size: 1.1rem; }
/* ── Logo ─────────────────────── */
.ad-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--ad-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: #fff;
letter-spacing: -0.02em;
}
.ad-logo-icon {
width: 32px;
height: 32px;
background-color: var(--ad-primary);
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-logo-icon svg {
display: block;
}
/* ── Utility classes ──────────── */
.text-success { color: var(--ad-success) !important; }
.text-danger { color: var(--ad-danger) !important; }
.text-warning { color: var(--ad-warning) !important; }
.text-muted { color: var(--ad-text-muted) !important; }
.text-light { color: var(--ad-text-light) !important; }
/* --- COMPONENT STYLES --- */
.ad-login-wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 560px;
background-color: var(--ad-bg);
padding: 2rem;
}
.ad-login-card {
width: 100%;
max-width: 420px;
padding: 2.5rem !important;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.ad-login-brand {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.ad-login-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--ad-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--ad-text);
letter-spacing: -0.02em;
}
.ad-login-title {
font-size: 1.35rem;
font-weight: 700;
margin-top: 0.25rem;
}
.ad-login-subtitle {
font-size: 0.9rem;
margin-top: -0.25rem;
}
.ad-login-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.ad-form-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.ad-label-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.ad-link-small {
font-family: var(--ad-font-heading);
font-size: 0.8rem;
font-weight: 600;
color: var(--ad-primary);
text-decoration: none;
transition: var(--ad-transition);
}
.ad-link-small:hover {
color: var(--ad-primary-hover);
}
/* Input with icon */
.ad-input-wrapper {
position: relative;
}
.ad-input-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--ad-text-light);
pointer-events: none;
}
.ad-input-icon-pad {
padding-left: 2.35rem;
}
/* Checkbox */
.ad-form-inline {
display: flex;
align-items: center;
}
.ad-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--ad-font-body);
font-size: 0.88rem;
font-weight: 500;
color: var(--ad-text);
cursor: pointer;
user-select: none;
}
.ad-checkbox {
width: 16px;
height: 16px;
accent-color: var(--ad-primary);
cursor: pointer;
border-radius: 4px;
}
/* Divider */
.ad-login-divider {
position: relative;
text-align: center;
}
.ad-login-divider::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background-color: var(--ad-border);
}
.ad-login-divider span {
position: relative;
background-color: var(--ad-surface);
padding: 0 0.85rem;
font-size: 0.8rem;
font-weight: 500;
color: var(--ad-text-light);
}
Account Settings Form
HTML
<div class="ad-settings-panel">
<div class="ad-settings-header">
<div>
<h3 class="ad-settings-title">Account Settings</h3>
<p>Manage your profile, preferences, and security options.</p>
</div>
<div class="ad-settings-header-actions">
<button class="ad-btn ad-btn-outline ad-btn-sm">Discard</button>
<button class="ad-btn ad-btn-primary ad-btn-sm">Save Changes</button>
</div>
</div>
<div class="ad-settings-body">
<!-- Profile Section -->
<section class="ad-settings-section ad-card">
<div class="ad-section-title-row">
<div>
<h4>Profile Information</h4>
<p>Update your name, role, and public profile details.</p>
</div>
<div class="ad-avatar-upload">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=80&h=80&q=80" alt="Profile" class="ad-avatar ad-avatar-lg" style="border-radius:50%; width:64px; height:64px;">
<button class="ad-btn ad-btn-outline ad-btn-sm">Change</button>
</div>
</div>
<hr class="ad-divider">
<div class="ad-settings-grid">
<div class="ad-form-group">
<label class="ad-label" for="s-firstname">First Name</label>
<input type="text" id="s-firstname" class="ad-input" value="Sarah">
</div>
<div class="ad-form-group">
<label class="ad-label" for="s-lastname">Last Name</label>
<input type="text" id="s-lastname" class="ad-input" value="Jenkins">
</div>
<div class="ad-form-group">
<label class="ad-label" for="s-email">Email Address</label>
<input type="email" id="s-email" class="ad-input" value="[email protected]">
</div>
<div class="ad-form-group">
<label class="ad-label" for="s-role">Role</label>
<select id="s-role" class="ad-select">
<option selected>Administrator</option>
<option>Editor</option>
<option>Viewer</option>
</select>
</div>
</div>
</section>
<!-- Notifications Section -->
<section class="ad-settings-section ad-card">
<h4>Notification Preferences</h4>
<p style="margin-bottom:1.5rem;">Control which alerts and digests you receive.</p>
<div class="ad-toggle-list">
<div class="ad-toggle-row">
<div>
<div class="ad-toggle-label">Weekly Revenue Digest</div>
<div class="ad-toggle-desc">Receive a summary of revenue metrics every Monday.</div>
</div>
<label class="ad-toggle">
<input type="checkbox" checked>
<span class="ad-toggle-slider"></span>
</label>
</div>
<hr class="ad-divider">
<div class="ad-toggle-row">
<div>
<div class="ad-toggle-label">New User Alerts</div>
<div class="ad-toggle-desc">Get notified when a new user signs up.</div>
</div>
<label class="ad-toggle">
<input type="checkbox">
<span class="ad-toggle-slider"></span>
</label>
</div>
<hr class="ad-divider">
<div class="ad-toggle-row">
<div>
<div class="ad-toggle-label">Critical System Alerts</div>
<div class="ad-toggle-desc">Immediate alerts for uptime issues or security events.</div>
</div>
<label class="ad-toggle">
<input type="checkbox" checked>
<span class="ad-toggle-slider"></span>
</label>
</div>
</div>
</section>
</div>
</div>
CSS (Component Only)
/* Component: Account Settings Form */
/* NOTE: This component requires base.css to be included in your page. */
.ad-settings-panel {
max-width: 860px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.ad-settings-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.ad-settings-title {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.3rem;
}
.ad-settings-header-actions {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.ad-settings-body {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ad-settings-section {
padding: 2rem !important;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ad-settings-section h4 {
font-size: 1rem;
font-weight: 700;
}
.ad-settings-section > p {
font-size: 0.9rem;
margin-top: -0.75rem;
}
.ad-section-title-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
flex-wrap: wrap;
}
.ad-avatar-upload {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
.ad-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.ad-form-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
/* Toggle list */
.ad-toggle-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.ad-toggle-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
}
.ad-toggle-label {
font-family: var(--ad-font-heading);
font-size: 0.92rem;
font-weight: 600;
color: var(--ad-text);
margin-bottom: 0.2rem;
}
.ad-toggle-desc {
font-family: var(--ad-font-body);
font-size: 0.85rem;
color: var(--ad-text-muted);
line-height: 1.5;
}
@media (max-width: 600px) {
.ad-settings-grid {
grid-template-columns: 1fr;
}
.ad-settings-header {
flex-direction: column;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
/* ===========================
Admin Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Core surfaces */
--ad-bg: #F1F5F9;
--ad-surface: #FFFFFF;
--ad-surface-2: #F8FAFC;
--ad-sidebar-bg: #0F172A;
--ad-sidebar-hover:#1E293B;
/* Brand colors */
--ad-primary: #2563EB;
--ad-primary-hover:#1D4ED8;
--ad-primary-muted:#DBEAFE;
--ad-success: #10B981;
--ad-success-muted:#D1FAE5;
--ad-warning: #F59E0B;
--ad-warning-muted:#FEF3C7;
--ad-danger: #EF4444;
--ad-danger-muted: #FEE2E2;
--ad-info: #6366F1;
--ad-info-muted: #EEF2FF;
/* Text */
--ad-text: #0F172A;
--ad-text-muted: #64748B;
--ad-text-light: #94A3B8;
--ad-sidebar-text: #94A3B8;
--ad-sidebar-active:#FFFFFF;
/* Borders */
--ad-border: #E2E8F0;
--ad-border-strong:#CBD5E1;
/* Radius */
--ad-radius-sm: 6px;
--ad-radius: 10px;
--ad-radius-lg: 14px;
--ad-radius-xl: 20px;
/* Fonts */
--ad-font-heading: 'Inter', sans-serif;
--ad-font-body: 'DM Sans', sans-serif;
/* Shadows */
--ad-shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
--ad-shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 4px 16px rgba(15,23,42,0.04);
--ad-shadow: 0 4px 6px rgba(15,23,42,0.07), 0 10px 32px rgba(15,23,42,0.06);
--ad-shadow-lg: 0 8px 16px rgba(15,23,42,0.10), 0 24px 48px rgba(15,23,42,0.08);
/* Transitions */
--ad-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--ad-font-body);
color: var(--ad-text);
background-color: var(--ad-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card Surface ─────────────── */
.ad-card {
background-color: var(--ad-surface);
border: 1px solid var(--ad-border);
border-radius: var(--ad-radius);
box-shadow: var(--ad-shadow-sm);
padding: 1.75rem;
transition: var(--ad-transition);
}
.ad-card:hover {
box-shadow: var(--ad-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ad-font-heading);
font-weight: 600;
margin: 0;
color: var(--ad-text);
letter-spacing: -0.01em;
line-height: 1.25;
}
p {
font-family: var(--ad-font-body);
color: var(--ad-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.ad-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--ad-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--ad-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ad-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
}
.ad-btn:focus-visible {
outline: 2px solid var(--ad-primary);
outline-offset: 2px;
}
.ad-btn-primary {
background-color: var(--ad-primary);
color: #fff;
border-color: var(--ad-primary);
}
.ad-btn-primary:hover {
background-color: var(--ad-primary-hover);
border-color: var(--ad-primary-hover);
box-shadow: 0 4px 12px rgba(37,99,235,0.35);
transform: translateY(-1px);
}
.ad-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.ad-btn-outline {
background-color: var(--ad-surface);
color: var(--ad-text);
border-color: var(--ad-border-strong);
}
.ad-btn-outline:hover {
background-color: var(--ad-surface-2);
border-color: var(--ad-text-light);
transform: translateY(-1px);
}
.ad-btn-danger {
background-color: var(--ad-danger);
color: #fff;
border-color: var(--ad-danger);
}
.ad-btn-danger:hover {
background-color: #dc2626;
box-shadow: 0 4px 12px rgba(239,68,68,0.35);
transform: translateY(-1px);
}
.ad-btn-ghost {
background-color: transparent;
color: var(--ad-text-muted);
border-color: transparent;
}
.ad-btn-ghost:hover {
background-color: var(--ad-surface-2);
color: var(--ad-text);
}
.ad-btn-sm {
padding: 0.4rem 0.85rem;
font-size: 0.8rem;
}
.ad-btn-lg {
padding: 0.8rem 1.75rem;
font-size: 1rem;
}
.ad-btn-block {
width: 100%;
}
.ad-btn-icon {
width: 36px;
height: 36px;
padding: 0;
border-radius: var(--ad-radius-sm);
}
/* ── Form Controls ────────────── */
.ad-input {
width: 100%;
padding: 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
outline: none;
transition: var(--ad-transition);
line-height: 1.5;
}
.ad-input::placeholder {
color: var(--ad-text-light);
}
.ad-input:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ad-font-heading);
font-weight: 600;
font-size: 0.85rem;
color: var(--ad-text);
}
.ad-select {
width: 100%;
padding: 0.6rem 2rem 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ad-transition);
}
.ad-select:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
/* ── Status Badges ────────────── */
.ad-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.65rem;
border-radius: 20px;
font-family: var(--ad-font-heading);
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.ad-badge-success { background-color: var(--ad-success-muted); color: #065F46; }
.ad-badge-warning { background-color: var(--ad-warning-muted); color: #92400E; }
.ad-badge-danger { background-color: var(--ad-danger-muted); color: #991B1B; }
.ad-badge-info { background-color: var(--ad-info-muted); color: #3730A3; }
.ad-badge-default { background-color: var(--ad-border); color: var(--ad-text-muted); }
/* ── Toggle Switch ────────────── */
.ad-toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.ad-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.ad-toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: var(--ad-border-strong);
border-radius: 24px;
transition: var(--ad-transition);
}
.ad-toggle-slider::before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: #fff;
border-radius: 50%;
transition: var(--ad-transition);
box-shadow: var(--ad-shadow-xs);
}
.ad-toggle input:checked + .ad-toggle-slider {
background-color: var(--ad-primary);
}
.ad-toggle input:checked + .ad-toggle-slider::before {
transform: translateX(20px);
}
/* ── Divider ──────────────────── */
.ad-divider {
border: none;
border-top: 1px solid var(--ad-border);
margin: 0;
}
/* ── Avatar ───────────────────── */
.ad-avatar {
border-radius: var(--ad-radius-sm);
object-fit: cover;
background-color: var(--ad-primary-muted);
color: var(--ad-primary);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ad-font-heading);
font-weight: 700;
flex-shrink: 0;
}
.ad-avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; border-radius: 50%; }
.ad-avatar-md { width: 38px; height: 38px; font-size: 0.9rem; }
.ad-avatar-lg { width: 48px; height: 48px; font-size: 1.1rem; }
/* ── Logo ─────────────────────── */
.ad-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--ad-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: #fff;
letter-spacing: -0.02em;
}
.ad-logo-icon {
width: 32px;
height: 32px;
background-color: var(--ad-primary);
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-logo-icon svg {
display: block;
}
/* ── Utility classes ──────────── */
.text-success { color: var(--ad-success) !important; }
.text-danger { color: var(--ad-danger) !important; }
.text-warning { color: var(--ad-warning) !important; }
.text-muted { color: var(--ad-text-muted) !important; }
.text-light { color: var(--ad-text-light) !important; }
/* --- COMPONENT STYLES --- */
.ad-settings-panel {
max-width: 860px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.ad-settings-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.ad-settings-title {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.3rem;
}
.ad-settings-header-actions {
display: flex;
gap: 0.75rem;
flex-shrink: 0;
}
.ad-settings-body {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ad-settings-section {
padding: 2rem !important;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ad-settings-section h4 {
font-size: 1rem;
font-weight: 700;
}
.ad-settings-section > p {
font-size: 0.9rem;
margin-top: -0.75rem;
}
.ad-section-title-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
flex-wrap: wrap;
}
.ad-avatar-upload {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
.ad-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.ad-form-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
/* Toggle list */
.ad-toggle-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.ad-toggle-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
}
.ad-toggle-label {
font-family: var(--ad-font-heading);
font-size: 0.92rem;
font-weight: 600;
color: var(--ad-text);
margin-bottom: 0.2rem;
}
.ad-toggle-desc {
font-family: var(--ad-font-body);
font-size: 0.85rem;
color: var(--ad-text-muted);
line-height: 1.5;
}
@media (max-width: 600px) {
.ad-settings-grid {
grid-template-columns: 1fr;
}
.ad-settings-header {
flex-direction: column;
}
}
Cards
KPI Metrics Cards
HTML
<div class="ad-stats-grid">
<div class="ad-stat-card ad-card">
<div class="ad-stat-top">
<div class="ad-stat-icon" style="background:var(--ad-primary-muted);color:var(--ad-primary);">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<span class="ad-badge ad-badge-success">↑ 12.5%</span>
</div>
<div class="ad-stat-value">$128,450</div>
<div class="ad-stat-label">Monthly Revenue</div>
<div class="ad-stat-sparkline">
<div class="ad-spark-bar" style="height:30%;"></div>
<div class="ad-spark-bar" style="height:50%;"></div>
<div class="ad-spark-bar" style="height:40%;"></div>
<div class="ad-spark-bar" style="height:70%;"></div>
<div class="ad-spark-bar" style="height:55%;"></div>
<div class="ad-spark-bar" style="height:80%;"></div>
<div class="ad-spark-bar ad-spark-active" style="height:100%;"></div>
</div>
</div>
<div class="ad-stat-card ad-card">
<div class="ad-stat-top">
<div class="ad-stat-icon" style="background:var(--ad-success-muted);color:var(--ad-success);">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<span class="ad-badge ad-badge-success">↑ 5.1%</span>
</div>
<div class="ad-stat-value">8,290</div>
<div class="ad-stat-label">Active Users</div>
<div class="ad-stat-sparkline">
<div class="ad-spark-bar" style="height:45%;"></div>
<div class="ad-spark-bar" style="height:60%;"></div>
<div class="ad-spark-bar" style="height:50%;"></div>
<div class="ad-spark-bar" style="height:75%;"></div>
<div class="ad-spark-bar" style="height:65%;"></div>
<div class="ad-spark-bar" style="height:80%;"></div>
<div class="ad-spark-bar ad-spark-active" style="height:100%;"></div>
</div>
</div>
<div class="ad-stat-card ad-card">
<div class="ad-stat-top">
<div class="ad-stat-icon" style="background:var(--ad-warning-muted);color:var(--ad-warning);">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
</div>
<span class="ad-badge ad-badge-warning">↑ 3 new</span>
</div>
<div class="ad-stat-value">142</div>
<div class="ad-stat-label">Open Tickets</div>
<div class="ad-stat-sparkline" style="--spark-color: var(--ad-warning);">
<div class="ad-spark-bar" style="height:60%;"></div>
<div class="ad-spark-bar" style="height:45%;"></div>
<div class="ad-spark-bar" style="height:70%;"></div>
<div class="ad-spark-bar" style="height:55%;"></div>
<div class="ad-spark-bar" style="height:80%;"></div>
<div class="ad-spark-bar" style="height:75%;"></div>
<div class="ad-spark-bar ad-spark-active" style="height:100%;"></div>
</div>
</div>
<div class="ad-stat-card ad-card">
<div class="ad-stat-top">
<div class="ad-stat-icon" style="background:var(--ad-info-muted);color:var(--ad-info);">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
</div>
<span class="ad-badge ad-badge-info">99.98%</span>
</div>
<div class="ad-stat-value">31ms</div>
<div class="ad-stat-label">Avg Response Time</div>
<div class="ad-stat-sparkline" style="--spark-color: var(--ad-info);">
<div class="ad-spark-bar" style="height:80%;"></div>
<div class="ad-spark-bar" style="height:55%;"></div>
<div class="ad-spark-bar" style="height:70%;"></div>
<div class="ad-spark-bar" style="height:45%;"></div>
<div class="ad-spark-bar" style="height:60%;"></div>
<div class="ad-spark-bar" style="height:50%;"></div>
<div class="ad-spark-bar ad-spark-active" style="height:35%;"></div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: KPI Metrics Cards */
/* NOTE: This component requires base.css to be included in your page. */
.ad-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
max-width: 1100px;
margin: 0 auto;
}
.ad-stat-card {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 1.5rem !important;
}
.ad-stat-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.25rem;
}
.ad-stat-icon {
width: 36px;
height: 36px;
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-stat-value {
font-family: var(--ad-font-heading);
font-size: 1.9rem;
font-weight: 700;
color: var(--ad-text);
letter-spacing: -0.02em;
line-height: 1;
}
.ad-stat-label {
font-family: var(--ad-font-heading);
font-size: 0.8rem;
font-weight: 600;
color: var(--ad-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Sparkline */
.ad-stat-sparkline {
display: flex;
align-items: flex-end;
gap: 3px;
height: 36px;
margin-top: 0.5rem;
--spark-color: var(--ad-primary);
}
.ad-spark-bar {
flex: 1;
background-color: var(--ad-border);
border-radius: 2px;
transition: var(--ad-transition);
}
.ad-spark-active {
background-color: var(--spark-color, var(--ad-primary));
}
.ad-stat-card:hover .ad-spark-bar {
background-color: var(--ad-border-strong);
}
.ad-stat-card:hover .ad-spark-active {
background-color: var(--spark-color, var(--ad-primary));
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
/* ===========================
Admin Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Core surfaces */
--ad-bg: #F1F5F9;
--ad-surface: #FFFFFF;
--ad-surface-2: #F8FAFC;
--ad-sidebar-bg: #0F172A;
--ad-sidebar-hover:#1E293B;
/* Brand colors */
--ad-primary: #2563EB;
--ad-primary-hover:#1D4ED8;
--ad-primary-muted:#DBEAFE;
--ad-success: #10B981;
--ad-success-muted:#D1FAE5;
--ad-warning: #F59E0B;
--ad-warning-muted:#FEF3C7;
--ad-danger: #EF4444;
--ad-danger-muted: #FEE2E2;
--ad-info: #6366F1;
--ad-info-muted: #EEF2FF;
/* Text */
--ad-text: #0F172A;
--ad-text-muted: #64748B;
--ad-text-light: #94A3B8;
--ad-sidebar-text: #94A3B8;
--ad-sidebar-active:#FFFFFF;
/* Borders */
--ad-border: #E2E8F0;
--ad-border-strong:#CBD5E1;
/* Radius */
--ad-radius-sm: 6px;
--ad-radius: 10px;
--ad-radius-lg: 14px;
--ad-radius-xl: 20px;
/* Fonts */
--ad-font-heading: 'Inter', sans-serif;
--ad-font-body: 'DM Sans', sans-serif;
/* Shadows */
--ad-shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
--ad-shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 4px 16px rgba(15,23,42,0.04);
--ad-shadow: 0 4px 6px rgba(15,23,42,0.07), 0 10px 32px rgba(15,23,42,0.06);
--ad-shadow-lg: 0 8px 16px rgba(15,23,42,0.10), 0 24px 48px rgba(15,23,42,0.08);
/* Transitions */
--ad-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--ad-font-body);
color: var(--ad-text);
background-color: var(--ad-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card Surface ─────────────── */
.ad-card {
background-color: var(--ad-surface);
border: 1px solid var(--ad-border);
border-radius: var(--ad-radius);
box-shadow: var(--ad-shadow-sm);
padding: 1.75rem;
transition: var(--ad-transition);
}
.ad-card:hover {
box-shadow: var(--ad-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ad-font-heading);
font-weight: 600;
margin: 0;
color: var(--ad-text);
letter-spacing: -0.01em;
line-height: 1.25;
}
p {
font-family: var(--ad-font-body);
color: var(--ad-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.ad-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--ad-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--ad-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ad-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
}
.ad-btn:focus-visible {
outline: 2px solid var(--ad-primary);
outline-offset: 2px;
}
.ad-btn-primary {
background-color: var(--ad-primary);
color: #fff;
border-color: var(--ad-primary);
}
.ad-btn-primary:hover {
background-color: var(--ad-primary-hover);
border-color: var(--ad-primary-hover);
box-shadow: 0 4px 12px rgba(37,99,235,0.35);
transform: translateY(-1px);
}
.ad-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.ad-btn-outline {
background-color: var(--ad-surface);
color: var(--ad-text);
border-color: var(--ad-border-strong);
}
.ad-btn-outline:hover {
background-color: var(--ad-surface-2);
border-color: var(--ad-text-light);
transform: translateY(-1px);
}
.ad-btn-danger {
background-color: var(--ad-danger);
color: #fff;
border-color: var(--ad-danger);
}
.ad-btn-danger:hover {
background-color: #dc2626;
box-shadow: 0 4px 12px rgba(239,68,68,0.35);
transform: translateY(-1px);
}
.ad-btn-ghost {
background-color: transparent;
color: var(--ad-text-muted);
border-color: transparent;
}
.ad-btn-ghost:hover {
background-color: var(--ad-surface-2);
color: var(--ad-text);
}
.ad-btn-sm {
padding: 0.4rem 0.85rem;
font-size: 0.8rem;
}
.ad-btn-lg {
padding: 0.8rem 1.75rem;
font-size: 1rem;
}
.ad-btn-block {
width: 100%;
}
.ad-btn-icon {
width: 36px;
height: 36px;
padding: 0;
border-radius: var(--ad-radius-sm);
}
/* ── Form Controls ────────────── */
.ad-input {
width: 100%;
padding: 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
outline: none;
transition: var(--ad-transition);
line-height: 1.5;
}
.ad-input::placeholder {
color: var(--ad-text-light);
}
.ad-input:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ad-font-heading);
font-weight: 600;
font-size: 0.85rem;
color: var(--ad-text);
}
.ad-select {
width: 100%;
padding: 0.6rem 2rem 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ad-transition);
}
.ad-select:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
/* ── Status Badges ────────────── */
.ad-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.65rem;
border-radius: 20px;
font-family: var(--ad-font-heading);
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.ad-badge-success { background-color: var(--ad-success-muted); color: #065F46; }
.ad-badge-warning { background-color: var(--ad-warning-muted); color: #92400E; }
.ad-badge-danger { background-color: var(--ad-danger-muted); color: #991B1B; }
.ad-badge-info { background-color: var(--ad-info-muted); color: #3730A3; }
.ad-badge-default { background-color: var(--ad-border); color: var(--ad-text-muted); }
/* ── Toggle Switch ────────────── */
.ad-toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.ad-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.ad-toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: var(--ad-border-strong);
border-radius: 24px;
transition: var(--ad-transition);
}
.ad-toggle-slider::before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: #fff;
border-radius: 50%;
transition: var(--ad-transition);
box-shadow: var(--ad-shadow-xs);
}
.ad-toggle input:checked + .ad-toggle-slider {
background-color: var(--ad-primary);
}
.ad-toggle input:checked + .ad-toggle-slider::before {
transform: translateX(20px);
}
/* ── Divider ──────────────────── */
.ad-divider {
border: none;
border-top: 1px solid var(--ad-border);
margin: 0;
}
/* ── Avatar ───────────────────── */
.ad-avatar {
border-radius: var(--ad-radius-sm);
object-fit: cover;
background-color: var(--ad-primary-muted);
color: var(--ad-primary);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ad-font-heading);
font-weight: 700;
flex-shrink: 0;
}
.ad-avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; border-radius: 50%; }
.ad-avatar-md { width: 38px; height: 38px; font-size: 0.9rem; }
.ad-avatar-lg { width: 48px; height: 48px; font-size: 1.1rem; }
/* ── Logo ─────────────────────── */
.ad-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--ad-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: #fff;
letter-spacing: -0.02em;
}
.ad-logo-icon {
width: 32px;
height: 32px;
background-color: var(--ad-primary);
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-logo-icon svg {
display: block;
}
/* ── Utility classes ──────────── */
.text-success { color: var(--ad-success) !important; }
.text-danger { color: var(--ad-danger) !important; }
.text-warning { color: var(--ad-warning) !important; }
.text-muted { color: var(--ad-text-muted) !important; }
.text-light { color: var(--ad-text-light) !important; }
/* --- COMPONENT STYLES --- */
.ad-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
max-width: 1100px;
margin: 0 auto;
}
.ad-stat-card {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 1.5rem !important;
}
.ad-stat-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.25rem;
}
.ad-stat-icon {
width: 36px;
height: 36px;
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-stat-value {
font-family: var(--ad-font-heading);
font-size: 1.9rem;
font-weight: 700;
color: var(--ad-text);
letter-spacing: -0.02em;
line-height: 1;
}
.ad-stat-label {
font-family: var(--ad-font-heading);
font-size: 0.8rem;
font-weight: 600;
color: var(--ad-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Sparkline */
.ad-stat-sparkline {
display: flex;
align-items: flex-end;
gap: 3px;
height: 36px;
margin-top: 0.5rem;
--spark-color: var(--ad-primary);
}
.ad-spark-bar {
flex: 1;
background-color: var(--ad-border);
border-radius: 2px;
transition: var(--ad-transition);
}
.ad-spark-active {
background-color: var(--spark-color, var(--ad-primary));
}
.ad-stat-card:hover .ad-spark-bar {
background-color: var(--ad-border-strong);
}
.ad-stat-card:hover .ad-spark-active {
background-color: var(--spark-color, var(--ad-primary));
}
Dashboard Data Widget
HTML
<div class="ad-widget-card ad-card">
<div class="ad-widget-header">
<div>
<h4 class="ad-widget-title">Revenue Breakdown</h4>
<p class="ad-widget-subtitle">Current billing cycle — May 2026</p>
</div>
<select class="ad-select" style="width:auto;">
<option>This Month</option>
<option>Last Month</option>
<option>This Quarter</option>
</select>
</div>
<div class="ad-widget-total">
<span class="ad-widget-amount">$128,450</span>
<span class="ad-badge ad-badge-success" style="align-self:center;">↑ 12.5% vs last month</span>
</div>
<!-- Revenue breakdown bar chart (CSS only) -->
<div class="ad-breakdown-list">
<div class="ad-breakdown-item">
<div class="ad-breakdown-label">
<span class="ad-breakdown-dot" style="background:var(--ad-primary);"></span>
<span>Pro Subscriptions</span>
</div>
<div class="ad-breakdown-bar-track">
<div class="ad-breakdown-bar" style="width:68%; background:var(--ad-primary);"></div>
</div>
<span class="ad-breakdown-value">$87,346</span>
</div>
<div class="ad-breakdown-item">
<div class="ad-breakdown-label">
<span class="ad-breakdown-dot" style="background:var(--ad-success);"></span>
<span>Enterprise Seats</span>
</div>
<div class="ad-breakdown-bar-track">
<div class="ad-breakdown-bar" style="width:24%; background:var(--ad-success);"></div>
</div>
<span class="ad-breakdown-value">$30,816</span>
</div>
<div class="ad-breakdown-item">
<div class="ad-breakdown-label">
<span class="ad-breakdown-dot" style="background:var(--ad-warning);"></span>
<span>One-time Add-ons</span>
</div>
<div class="ad-breakdown-bar-track">
<div class="ad-breakdown-bar" style="width:8%; background:var(--ad-warning);"></div>
</div>
<span class="ad-breakdown-value">$10,288</span>
</div>
</div>
<hr class="ad-divider">
<div class="ad-widget-footer">
<span class="text-muted" style="font-size:0.85rem;">Next billing cycle starts June 1, 2026</span>
<button class="ad-btn ad-btn-outline ad-btn-sm">Full Report</button>
</div>
</div>
CSS (Component Only)
/* Component: Dashboard Data Widget */
/* NOTE: This component requires base.css to be included in your page. */
.ad-widget-card {
max-width: 560px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 2rem !important;
}
.ad-widget-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.ad-widget-title {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.2rem;
}
.ad-widget-subtitle {
font-size: 0.85rem;
}
.ad-widget-total {
display: flex;
align-items: baseline;
gap: 1rem;
flex-wrap: wrap;
}
.ad-widget-amount {
font-family: var(--ad-font-heading);
font-size: 2.25rem;
font-weight: 700;
color: var(--ad-text);
letter-spacing: -0.02em;
line-height: 1;
}
/* Breakdown bars */
.ad-breakdown-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.ad-breakdown-item {
display: flex;
align-items: center;
gap: 0.85rem;
}
.ad-breakdown-label {
display: flex;
align-items: center;
gap: 0.5rem;
width: 155px;
flex-shrink: 0;
font-family: var(--ad-font-heading);
font-size: 0.84rem;
font-weight: 600;
color: var(--ad-text);
}
.ad-breakdown-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.ad-breakdown-bar-track {
flex: 1;
height: 8px;
background-color: var(--ad-border);
border-radius: 8px;
overflow: hidden;
}
.ad-breakdown-bar {
height: 100%;
border-radius: 8px;
transition: width 0.6s ease;
}
.ad-breakdown-value {
font-family: var(--ad-font-heading);
font-size: 0.88rem;
font-weight: 700;
color: var(--ad-text);
width: 70px;
text-align: right;
flex-shrink: 0;
}
.ad-widget-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
/* ===========================
Admin Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Core surfaces */
--ad-bg: #F1F5F9;
--ad-surface: #FFFFFF;
--ad-surface-2: #F8FAFC;
--ad-sidebar-bg: #0F172A;
--ad-sidebar-hover:#1E293B;
/* Brand colors */
--ad-primary: #2563EB;
--ad-primary-hover:#1D4ED8;
--ad-primary-muted:#DBEAFE;
--ad-success: #10B981;
--ad-success-muted:#D1FAE5;
--ad-warning: #F59E0B;
--ad-warning-muted:#FEF3C7;
--ad-danger: #EF4444;
--ad-danger-muted: #FEE2E2;
--ad-info: #6366F1;
--ad-info-muted: #EEF2FF;
/* Text */
--ad-text: #0F172A;
--ad-text-muted: #64748B;
--ad-text-light: #94A3B8;
--ad-sidebar-text: #94A3B8;
--ad-sidebar-active:#FFFFFF;
/* Borders */
--ad-border: #E2E8F0;
--ad-border-strong:#CBD5E1;
/* Radius */
--ad-radius-sm: 6px;
--ad-radius: 10px;
--ad-radius-lg: 14px;
--ad-radius-xl: 20px;
/* Fonts */
--ad-font-heading: 'Inter', sans-serif;
--ad-font-body: 'DM Sans', sans-serif;
/* Shadows */
--ad-shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
--ad-shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 4px 16px rgba(15,23,42,0.04);
--ad-shadow: 0 4px 6px rgba(15,23,42,0.07), 0 10px 32px rgba(15,23,42,0.06);
--ad-shadow-lg: 0 8px 16px rgba(15,23,42,0.10), 0 24px 48px rgba(15,23,42,0.08);
/* Transitions */
--ad-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--ad-font-body);
color: var(--ad-text);
background-color: var(--ad-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card Surface ─────────────── */
.ad-card {
background-color: var(--ad-surface);
border: 1px solid var(--ad-border);
border-radius: var(--ad-radius);
box-shadow: var(--ad-shadow-sm);
padding: 1.75rem;
transition: var(--ad-transition);
}
.ad-card:hover {
box-shadow: var(--ad-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ad-font-heading);
font-weight: 600;
margin: 0;
color: var(--ad-text);
letter-spacing: -0.01em;
line-height: 1.25;
}
p {
font-family: var(--ad-font-body);
color: var(--ad-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.ad-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--ad-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--ad-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ad-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
}
.ad-btn:focus-visible {
outline: 2px solid var(--ad-primary);
outline-offset: 2px;
}
.ad-btn-primary {
background-color: var(--ad-primary);
color: #fff;
border-color: var(--ad-primary);
}
.ad-btn-primary:hover {
background-color: var(--ad-primary-hover);
border-color: var(--ad-primary-hover);
box-shadow: 0 4px 12px rgba(37,99,235,0.35);
transform: translateY(-1px);
}
.ad-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.ad-btn-outline {
background-color: var(--ad-surface);
color: var(--ad-text);
border-color: var(--ad-border-strong);
}
.ad-btn-outline:hover {
background-color: var(--ad-surface-2);
border-color: var(--ad-text-light);
transform: translateY(-1px);
}
.ad-btn-danger {
background-color: var(--ad-danger);
color: #fff;
border-color: var(--ad-danger);
}
.ad-btn-danger:hover {
background-color: #dc2626;
box-shadow: 0 4px 12px rgba(239,68,68,0.35);
transform: translateY(-1px);
}
.ad-btn-ghost {
background-color: transparent;
color: var(--ad-text-muted);
border-color: transparent;
}
.ad-btn-ghost:hover {
background-color: var(--ad-surface-2);
color: var(--ad-text);
}
.ad-btn-sm {
padding: 0.4rem 0.85rem;
font-size: 0.8rem;
}
.ad-btn-lg {
padding: 0.8rem 1.75rem;
font-size: 1rem;
}
.ad-btn-block {
width: 100%;
}
.ad-btn-icon {
width: 36px;
height: 36px;
padding: 0;
border-radius: var(--ad-radius-sm);
}
/* ── Form Controls ────────────── */
.ad-input {
width: 100%;
padding: 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
outline: none;
transition: var(--ad-transition);
line-height: 1.5;
}
.ad-input::placeholder {
color: var(--ad-text-light);
}
.ad-input:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ad-font-heading);
font-weight: 600;
font-size: 0.85rem;
color: var(--ad-text);
}
.ad-select {
width: 100%;
padding: 0.6rem 2rem 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ad-transition);
}
.ad-select:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
/* ── Status Badges ────────────── */
.ad-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.65rem;
border-radius: 20px;
font-family: var(--ad-font-heading);
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.ad-badge-success { background-color: var(--ad-success-muted); color: #065F46; }
.ad-badge-warning { background-color: var(--ad-warning-muted); color: #92400E; }
.ad-badge-danger { background-color: var(--ad-danger-muted); color: #991B1B; }
.ad-badge-info { background-color: var(--ad-info-muted); color: #3730A3; }
.ad-badge-default { background-color: var(--ad-border); color: var(--ad-text-muted); }
/* ── Toggle Switch ────────────── */
.ad-toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.ad-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.ad-toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: var(--ad-border-strong);
border-radius: 24px;
transition: var(--ad-transition);
}
.ad-toggle-slider::before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: #fff;
border-radius: 50%;
transition: var(--ad-transition);
box-shadow: var(--ad-shadow-xs);
}
.ad-toggle input:checked + .ad-toggle-slider {
background-color: var(--ad-primary);
}
.ad-toggle input:checked + .ad-toggle-slider::before {
transform: translateX(20px);
}
/* ── Divider ──────────────────── */
.ad-divider {
border: none;
border-top: 1px solid var(--ad-border);
margin: 0;
}
/* ── Avatar ───────────────────── */
.ad-avatar {
border-radius: var(--ad-radius-sm);
object-fit: cover;
background-color: var(--ad-primary-muted);
color: var(--ad-primary);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ad-font-heading);
font-weight: 700;
flex-shrink: 0;
}
.ad-avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; border-radius: 50%; }
.ad-avatar-md { width: 38px; height: 38px; font-size: 0.9rem; }
.ad-avatar-lg { width: 48px; height: 48px; font-size: 1.1rem; }
/* ── Logo ─────────────────────── */
.ad-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--ad-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: #fff;
letter-spacing: -0.02em;
}
.ad-logo-icon {
width: 32px;
height: 32px;
background-color: var(--ad-primary);
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-logo-icon svg {
display: block;
}
/* ── Utility classes ──────────── */
.text-success { color: var(--ad-success) !important; }
.text-danger { color: var(--ad-danger) !important; }
.text-warning { color: var(--ad-warning) !important; }
.text-muted { color: var(--ad-text-muted) !important; }
.text-light { color: var(--ad-text-light) !important; }
/* --- COMPONENT STYLES --- */
.ad-widget-card {
max-width: 560px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 2rem !important;
}
.ad-widget-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.ad-widget-title {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.2rem;
}
.ad-widget-subtitle {
font-size: 0.85rem;
}
.ad-widget-total {
display: flex;
align-items: baseline;
gap: 1rem;
flex-wrap: wrap;
}
.ad-widget-amount {
font-family: var(--ad-font-heading);
font-size: 2.25rem;
font-weight: 700;
color: var(--ad-text);
letter-spacing: -0.02em;
line-height: 1;
}
/* Breakdown bars */
.ad-breakdown-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.ad-breakdown-item {
display: flex;
align-items: center;
gap: 0.85rem;
}
.ad-breakdown-label {
display: flex;
align-items: center;
gap: 0.5rem;
width: 155px;
flex-shrink: 0;
font-family: var(--ad-font-heading);
font-size: 0.84rem;
font-weight: 600;
color: var(--ad-text);
}
.ad-breakdown-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.ad-breakdown-bar-track {
flex: 1;
height: 8px;
background-color: var(--ad-border);
border-radius: 8px;
overflow: hidden;
}
.ad-breakdown-bar {
height: 100%;
border-radius: 8px;
transition: width 0.6s ease;
}
.ad-breakdown-value {
font-family: var(--ad-font-heading);
font-size: 0.88rem;
font-weight: 700;
color: var(--ad-text);
width: 70px;
text-align: right;
flex-shrink: 0;
}
.ad-widget-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
}
Tables
Admin Data Table
HTML
<div class="ad-table-container ad-card">
<div class="ad-table-toolbar">
<div class="ad-table-toolbar-left">
<h4 class="ad-table-title">Users</h4>
<span class="ad-badge ad-badge-default">8,290 total</span>
</div>
<div class="ad-table-toolbar-right">
<div class="ad-table-search ad-input-wrapper">
<svg class="ad-input-icon" viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" class="ad-input ad-input-icon-pad" placeholder="Search users…" style="width:200px;">
</div>
<button class="ad-btn ad-btn-outline ad-btn-sm">
<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
Filter
</button>
<button class="ad-btn ad-btn-primary ad-btn-sm">
<svg viewBox="0 0 24 24" width="13" height="13" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Invite User
</button>
</div>
</div>
<div class="ad-table-wrap">
<table class="ad-data-table">
<thead>
<tr>
<th><input type="checkbox" class="ad-checkbox"></th>
<th>User</th>
<th>Role</th>
<th>Status</th>
<th>Last Active</th>
<th>Revenue</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="ad-checkbox" checked></td>
<td>
<div class="ad-user-cell">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=40&h=40&q=80" class="ad-avatar ad-avatar-sm" alt="Sarah" style="border-radius:50%; width:32px;height:32px;">
<div>
<div class="ad-user-name">Sarah Jenkins</div>
<div class="ad-user-email">[email protected]</div>
</div>
</div>
</td>
<td><span class="ad-badge ad-badge-info">Admin</span></td>
<td><span class="ad-badge ad-badge-success">Active</span></td>
<td class="text-muted">Just now</td>
<td>$12,400</td>
<td>
<button class="ad-btn ad-btn-ghost ad-btn-icon ad-btn-sm">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
</button>
</td>
</tr>
<tr>
<td><input type="checkbox" class="ad-checkbox"></td>
<td>
<div class="ad-user-cell">
<div class="ad-avatar ad-avatar-md" style="width:32px;height:32px;border-radius:50%;background:var(--ad-success-muted);color:var(--ad-success);font-size:0.8rem;">AM</div>
<div>
<div class="ad-user-name">Alex Morgan</div>
<div class="ad-user-email">[email protected]</div>
</div>
</div>
</td>
<td><span class="ad-badge ad-badge-default">Editor</span></td>
<td><span class="ad-badge ad-badge-success">Active</span></td>
<td class="text-muted">2h ago</td>
<td>$8,220</td>
<td>
<button class="ad-btn ad-btn-ghost ad-btn-icon ad-btn-sm">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
</button>
</td>
</tr>
<tr>
<td><input type="checkbox" class="ad-checkbox"></td>
<td>
<div class="ad-user-cell">
<div class="ad-avatar ad-avatar-md" style="width:32px;height:32px;border-radius:50%;background:var(--ad-warning-muted);color:var(--ad-warning);font-size:0.8rem;">DK</div>
<div>
<div class="ad-user-name">Dave Kim</div>
<div class="ad-user-email">[email protected]</div>
</div>
</div>
</td>
<td><span class="ad-badge ad-badge-default">Viewer</span></td>
<td><span class="ad-badge ad-badge-warning">Suspended</span></td>
<td class="text-muted">3 days ago</td>
<td>$1,050</td>
<td>
<button class="ad-btn ad-btn-ghost ad-btn-icon ad-btn-sm">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="ad-table-pagination">
<span class="ad-pagination-info text-muted">Showing 1–3 of 8,290</span>
<div class="ad-pagination-controls">
<button class="ad-btn ad-btn-outline ad-btn-sm" disabled style="opacity:0.45;">← Prev</button>
<button class="ad-btn ad-btn-primary ad-btn-sm">1</button>
<button class="ad-btn ad-btn-outline ad-btn-sm">2</button>
<button class="ad-btn ad-btn-outline ad-btn-sm">3</button>
<button class="ad-btn ad-btn-outline ad-btn-sm">Next →</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Admin Data Table */
/* NOTE: This component requires base.css to be included in your page. */
.ad-table-container {
max-width: 1000px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.ad-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--ad-border);
flex-wrap: wrap;
}
.ad-table-toolbar-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.ad-table-title {
font-size: 1rem;
font-weight: 700;
}
.ad-table-toolbar-right {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.ad-table-search {
display: flex;
align-items: center;
}
/* Table */
.ad-table-wrap {
overflow-x: auto;
}
.ad-data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.ad-data-table thead tr {
background-color: var(--ad-surface-2);
border-bottom: 1px solid var(--ad-border);
}
.ad-data-table th {
padding: 0.75rem 1rem;
font-family: var(--ad-font-heading);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ad-text-muted);
text-align: left;
white-space: nowrap;
}
.ad-data-table td {
padding: 1rem;
border-bottom: 1px solid var(--ad-border);
color: var(--ad-text);
font-weight: 500;
vertical-align: middle;
}
.ad-data-table tbody tr:last-child td {
border-bottom: none;
}
.ad-data-table tbody tr:hover td {
background-color: var(--ad-surface-2);
}
.ad-user-cell {
display: flex;
align-items: center;
gap: 0.75rem;
}
.ad-user-name {
font-family: var(--ad-font-heading);
font-size: 0.88rem;
font-weight: 600;
color: var(--ad-text);
}
.ad-user-email {
font-size: 0.78rem;
color: var(--ad-text-muted);
}
/* Pagination */
.ad-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-top: 1px solid var(--ad-border);
gap: 1rem;
flex-wrap: wrap;
}
.ad-pagination-info {
font-size: 0.85rem;
font-weight: 500;
}
.ad-pagination-controls {
display: flex;
gap: 0.4rem;
align-items: center;
flex-wrap: wrap;
}
/* Input icon (used by table search) */
.ad-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.ad-input-icon {
position: absolute;
left: 0.75rem;
color: var(--ad-text-light);
pointer-events: none;
}
.ad-input-icon-pad {
padding-left: 2.35rem;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
/* ===========================
Admin Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Core surfaces */
--ad-bg: #F1F5F9;
--ad-surface: #FFFFFF;
--ad-surface-2: #F8FAFC;
--ad-sidebar-bg: #0F172A;
--ad-sidebar-hover:#1E293B;
/* Brand colors */
--ad-primary: #2563EB;
--ad-primary-hover:#1D4ED8;
--ad-primary-muted:#DBEAFE;
--ad-success: #10B981;
--ad-success-muted:#D1FAE5;
--ad-warning: #F59E0B;
--ad-warning-muted:#FEF3C7;
--ad-danger: #EF4444;
--ad-danger-muted: #FEE2E2;
--ad-info: #6366F1;
--ad-info-muted: #EEF2FF;
/* Text */
--ad-text: #0F172A;
--ad-text-muted: #64748B;
--ad-text-light: #94A3B8;
--ad-sidebar-text: #94A3B8;
--ad-sidebar-active:#FFFFFF;
/* Borders */
--ad-border: #E2E8F0;
--ad-border-strong:#CBD5E1;
/* Radius */
--ad-radius-sm: 6px;
--ad-radius: 10px;
--ad-radius-lg: 14px;
--ad-radius-xl: 20px;
/* Fonts */
--ad-font-heading: 'Inter', sans-serif;
--ad-font-body: 'DM Sans', sans-serif;
/* Shadows */
--ad-shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
--ad-shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 4px 16px rgba(15,23,42,0.04);
--ad-shadow: 0 4px 6px rgba(15,23,42,0.07), 0 10px 32px rgba(15,23,42,0.06);
--ad-shadow-lg: 0 8px 16px rgba(15,23,42,0.10), 0 24px 48px rgba(15,23,42,0.08);
/* Transitions */
--ad-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--ad-font-body);
color: var(--ad-text);
background-color: var(--ad-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card Surface ─────────────── */
.ad-card {
background-color: var(--ad-surface);
border: 1px solid var(--ad-border);
border-radius: var(--ad-radius);
box-shadow: var(--ad-shadow-sm);
padding: 1.75rem;
transition: var(--ad-transition);
}
.ad-card:hover {
box-shadow: var(--ad-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ad-font-heading);
font-weight: 600;
margin: 0;
color: var(--ad-text);
letter-spacing: -0.01em;
line-height: 1.25;
}
p {
font-family: var(--ad-font-body);
color: var(--ad-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.ad-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--ad-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--ad-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ad-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
}
.ad-btn:focus-visible {
outline: 2px solid var(--ad-primary);
outline-offset: 2px;
}
.ad-btn-primary {
background-color: var(--ad-primary);
color: #fff;
border-color: var(--ad-primary);
}
.ad-btn-primary:hover {
background-color: var(--ad-primary-hover);
border-color: var(--ad-primary-hover);
box-shadow: 0 4px 12px rgba(37,99,235,0.35);
transform: translateY(-1px);
}
.ad-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.ad-btn-outline {
background-color: var(--ad-surface);
color: var(--ad-text);
border-color: var(--ad-border-strong);
}
.ad-btn-outline:hover {
background-color: var(--ad-surface-2);
border-color: var(--ad-text-light);
transform: translateY(-1px);
}
.ad-btn-danger {
background-color: var(--ad-danger);
color: #fff;
border-color: var(--ad-danger);
}
.ad-btn-danger:hover {
background-color: #dc2626;
box-shadow: 0 4px 12px rgba(239,68,68,0.35);
transform: translateY(-1px);
}
.ad-btn-ghost {
background-color: transparent;
color: var(--ad-text-muted);
border-color: transparent;
}
.ad-btn-ghost:hover {
background-color: var(--ad-surface-2);
color: var(--ad-text);
}
.ad-btn-sm {
padding: 0.4rem 0.85rem;
font-size: 0.8rem;
}
.ad-btn-lg {
padding: 0.8rem 1.75rem;
font-size: 1rem;
}
.ad-btn-block {
width: 100%;
}
.ad-btn-icon {
width: 36px;
height: 36px;
padding: 0;
border-radius: var(--ad-radius-sm);
}
/* ── Form Controls ────────────── */
.ad-input {
width: 100%;
padding: 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
outline: none;
transition: var(--ad-transition);
line-height: 1.5;
}
.ad-input::placeholder {
color: var(--ad-text-light);
}
.ad-input:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ad-font-heading);
font-weight: 600;
font-size: 0.85rem;
color: var(--ad-text);
}
.ad-select {
width: 100%;
padding: 0.6rem 2rem 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ad-transition);
}
.ad-select:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
/* ── Status Badges ────────────── */
.ad-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.65rem;
border-radius: 20px;
font-family: var(--ad-font-heading);
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.ad-badge-success { background-color: var(--ad-success-muted); color: #065F46; }
.ad-badge-warning { background-color: var(--ad-warning-muted); color: #92400E; }
.ad-badge-danger { background-color: var(--ad-danger-muted); color: #991B1B; }
.ad-badge-info { background-color: var(--ad-info-muted); color: #3730A3; }
.ad-badge-default { background-color: var(--ad-border); color: var(--ad-text-muted); }
/* ── Toggle Switch ────────────── */
.ad-toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.ad-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.ad-toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: var(--ad-border-strong);
border-radius: 24px;
transition: var(--ad-transition);
}
.ad-toggle-slider::before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: #fff;
border-radius: 50%;
transition: var(--ad-transition);
box-shadow: var(--ad-shadow-xs);
}
.ad-toggle input:checked + .ad-toggle-slider {
background-color: var(--ad-primary);
}
.ad-toggle input:checked + .ad-toggle-slider::before {
transform: translateX(20px);
}
/* ── Divider ──────────────────── */
.ad-divider {
border: none;
border-top: 1px solid var(--ad-border);
margin: 0;
}
/* ── Avatar ───────────────────── */
.ad-avatar {
border-radius: var(--ad-radius-sm);
object-fit: cover;
background-color: var(--ad-primary-muted);
color: var(--ad-primary);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ad-font-heading);
font-weight: 700;
flex-shrink: 0;
}
.ad-avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; border-radius: 50%; }
.ad-avatar-md { width: 38px; height: 38px; font-size: 0.9rem; }
.ad-avatar-lg { width: 48px; height: 48px; font-size: 1.1rem; }
/* ── Logo ─────────────────────── */
.ad-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--ad-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: #fff;
letter-spacing: -0.02em;
}
.ad-logo-icon {
width: 32px;
height: 32px;
background-color: var(--ad-primary);
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-logo-icon svg {
display: block;
}
/* ── Utility classes ──────────── */
.text-success { color: var(--ad-success) !important; }
.text-danger { color: var(--ad-danger) !important; }
.text-warning { color: var(--ad-warning) !important; }
.text-muted { color: var(--ad-text-muted) !important; }
.text-light { color: var(--ad-text-light) !important; }
/* --- COMPONENT STYLES --- */
.ad-table-container {
max-width: 1000px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.ad-table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--ad-border);
flex-wrap: wrap;
}
.ad-table-toolbar-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.ad-table-title {
font-size: 1rem;
font-weight: 700;
}
.ad-table-toolbar-right {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.ad-table-search {
display: flex;
align-items: center;
}
/* Table */
.ad-table-wrap {
overflow-x: auto;
}
.ad-data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.ad-data-table thead tr {
background-color: var(--ad-surface-2);
border-bottom: 1px solid var(--ad-border);
}
.ad-data-table th {
padding: 0.75rem 1rem;
font-family: var(--ad-font-heading);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ad-text-muted);
text-align: left;
white-space: nowrap;
}
.ad-data-table td {
padding: 1rem;
border-bottom: 1px solid var(--ad-border);
color: var(--ad-text);
font-weight: 500;
vertical-align: middle;
}
.ad-data-table tbody tr:last-child td {
border-bottom: none;
}
.ad-data-table tbody tr:hover td {
background-color: var(--ad-surface-2);
}
.ad-user-cell {
display: flex;
align-items: center;
gap: 0.75rem;
}
.ad-user-name {
font-family: var(--ad-font-heading);
font-size: 0.88rem;
font-weight: 600;
color: var(--ad-text);
}
.ad-user-email {
font-size: 0.78rem;
color: var(--ad-text-muted);
}
/* Pagination */
.ad-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-top: 1px solid var(--ad-border);
gap: 1rem;
flex-wrap: wrap;
}
.ad-pagination-info {
font-size: 0.85rem;
font-weight: 500;
}
.ad-pagination-controls {
display: flex;
gap: 0.4rem;
align-items: center;
flex-wrap: wrap;
}
/* Input icon (used by table search) */
.ad-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.ad-input-icon {
position: absolute;
left: 0.75rem;
color: var(--ad-text-light);
pointer-events: none;
}
.ad-input-icon-pad {
padding-left: 2.35rem;
}
Lists
Activity & Notifications
HTML
<div class="ad-activity-card ad-card">
<div class="ad-activity-header">
<h4>Activity Feed</h4>
<button class="ad-btn ad-btn-ghost ad-btn-sm">Mark all read</button>
</div>
<div class="ad-activity-list">
<div class="ad-activity-item ad-activity-unread">
<div class="ad-activity-avatar" style="background:var(--ad-primary-muted); color:var(--ad-primary);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<div class="ad-activity-content">
<p class="ad-activity-text"><strong>Sarah Jenkins</strong> invited <strong>3 new users</strong> to the Enterprise workspace.</p>
<span class="ad-activity-time">4 minutes ago</span>
</div>
<span class="ad-unread-dot"></span>
</div>
<hr class="ad-divider">
<div class="ad-activity-item ad-activity-unread">
<div class="ad-activity-avatar" style="background:var(--ad-success-muted); color:var(--ad-success);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<div class="ad-activity-content">
<p class="ad-activity-text">New <strong>Pro subscription</strong> from <strong>[email protected]</strong> — $299/mo.</p>
<span class="ad-activity-time">1 hour ago</span>
</div>
<span class="ad-unread-dot"></span>
</div>
<hr class="ad-divider">
<div class="ad-activity-item">
<div class="ad-activity-avatar" style="background:var(--ad-warning-muted); color:var(--ad-warning);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
</div>
<div class="ad-activity-content">
<p class="ad-activity-text">High CPU usage alert on <strong>us-east-2</strong> server cluster — 91% utilization.</p>
<span class="ad-activity-time">3 hours ago</span>
</div>
</div>
<hr class="ad-divider">
<div class="ad-activity-item">
<div class="ad-activity-avatar" style="background:var(--ad-info-muted); color:var(--ad-info);">
<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
</div>
<div class="ad-activity-content">
<p class="ad-activity-text"><strong>May Revenue Report</strong> generated and ready for download.</p>
<span class="ad-activity-time">Yesterday, 5:44 PM</span>
</div>
</div>
</div>
<div class="ad-activity-footer">
<button class="ad-btn ad-btn-ghost ad-btn-sm" style="width:100%;">View all activity →</button>
</div>
</div>
CSS (Component Only)
/* Component: Activity & Notifications */
/* NOTE: This component requires base.css to be included in your page. */
.ad-activity-card {
max-width: 520px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.ad-activity-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--ad-border);
}
.ad-activity-header h4 {
font-size: 1rem;
font-weight: 700;
}
.ad-activity-list {
display: flex;
flex-direction: column;
gap: 0.9rem;
padding: 1.25rem 1.5rem;
}
.ad-activity-list .ad-divider {
margin: 0;
}
.ad-activity-item {
display: flex;
align-items: flex-start;
gap: 0.85rem;
position: relative;
padding: 0.1rem 0;
}
.ad-activity-unread {
/* unread items have the dot indicator */
}
.ad-activity-avatar {
width: 32px;
height: 32px;
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-activity-content {
flex: 1;
min-width: 0;
}
.ad-activity-text {
font-size: 0.875rem;
color: var(--ad-text);
font-weight: 500;
line-height: 1.5;
margin-bottom: 0.2rem;
}
.ad-activity-text strong {
font-weight: 700;
color: var(--ad-text);
}
.ad-activity-time {
font-size: 0.77rem;
color: var(--ad-text-light);
font-weight: 500;
}
.ad-unread-dot {
width: 8px;
height: 8px;
background-color: var(--ad-primary);
border-radius: 50%;
flex-shrink: 0;
margin-top: 0.4rem;
}
.ad-activity-footer {
padding: 0.85rem 1.5rem;
border-top: 1px solid var(--ad-border);
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
/* ===========================
Admin Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Core surfaces */
--ad-bg: #F1F5F9;
--ad-surface: #FFFFFF;
--ad-surface-2: #F8FAFC;
--ad-sidebar-bg: #0F172A;
--ad-sidebar-hover:#1E293B;
/* Brand colors */
--ad-primary: #2563EB;
--ad-primary-hover:#1D4ED8;
--ad-primary-muted:#DBEAFE;
--ad-success: #10B981;
--ad-success-muted:#D1FAE5;
--ad-warning: #F59E0B;
--ad-warning-muted:#FEF3C7;
--ad-danger: #EF4444;
--ad-danger-muted: #FEE2E2;
--ad-info: #6366F1;
--ad-info-muted: #EEF2FF;
/* Text */
--ad-text: #0F172A;
--ad-text-muted: #64748B;
--ad-text-light: #94A3B8;
--ad-sidebar-text: #94A3B8;
--ad-sidebar-active:#FFFFFF;
/* Borders */
--ad-border: #E2E8F0;
--ad-border-strong:#CBD5E1;
/* Radius */
--ad-radius-sm: 6px;
--ad-radius: 10px;
--ad-radius-lg: 14px;
--ad-radius-xl: 20px;
/* Fonts */
--ad-font-heading: 'Inter', sans-serif;
--ad-font-body: 'DM Sans', sans-serif;
/* Shadows */
--ad-shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
--ad-shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 4px 16px rgba(15,23,42,0.04);
--ad-shadow: 0 4px 6px rgba(15,23,42,0.07), 0 10px 32px rgba(15,23,42,0.06);
--ad-shadow-lg: 0 8px 16px rgba(15,23,42,0.10), 0 24px 48px rgba(15,23,42,0.08);
/* Transitions */
--ad-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--ad-font-body);
color: var(--ad-text);
background-color: var(--ad-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card Surface ─────────────── */
.ad-card {
background-color: var(--ad-surface);
border: 1px solid var(--ad-border);
border-radius: var(--ad-radius);
box-shadow: var(--ad-shadow-sm);
padding: 1.75rem;
transition: var(--ad-transition);
}
.ad-card:hover {
box-shadow: var(--ad-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ad-font-heading);
font-weight: 600;
margin: 0;
color: var(--ad-text);
letter-spacing: -0.01em;
line-height: 1.25;
}
p {
font-family: var(--ad-font-body);
color: var(--ad-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.ad-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--ad-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--ad-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ad-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
}
.ad-btn:focus-visible {
outline: 2px solid var(--ad-primary);
outline-offset: 2px;
}
.ad-btn-primary {
background-color: var(--ad-primary);
color: #fff;
border-color: var(--ad-primary);
}
.ad-btn-primary:hover {
background-color: var(--ad-primary-hover);
border-color: var(--ad-primary-hover);
box-shadow: 0 4px 12px rgba(37,99,235,0.35);
transform: translateY(-1px);
}
.ad-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.ad-btn-outline {
background-color: var(--ad-surface);
color: var(--ad-text);
border-color: var(--ad-border-strong);
}
.ad-btn-outline:hover {
background-color: var(--ad-surface-2);
border-color: var(--ad-text-light);
transform: translateY(-1px);
}
.ad-btn-danger {
background-color: var(--ad-danger);
color: #fff;
border-color: var(--ad-danger);
}
.ad-btn-danger:hover {
background-color: #dc2626;
box-shadow: 0 4px 12px rgba(239,68,68,0.35);
transform: translateY(-1px);
}
.ad-btn-ghost {
background-color: transparent;
color: var(--ad-text-muted);
border-color: transparent;
}
.ad-btn-ghost:hover {
background-color: var(--ad-surface-2);
color: var(--ad-text);
}
.ad-btn-sm {
padding: 0.4rem 0.85rem;
font-size: 0.8rem;
}
.ad-btn-lg {
padding: 0.8rem 1.75rem;
font-size: 1rem;
}
.ad-btn-block {
width: 100%;
}
.ad-btn-icon {
width: 36px;
height: 36px;
padding: 0;
border-radius: var(--ad-radius-sm);
}
/* ── Form Controls ────────────── */
.ad-input {
width: 100%;
padding: 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
outline: none;
transition: var(--ad-transition);
line-height: 1.5;
}
.ad-input::placeholder {
color: var(--ad-text-light);
}
.ad-input:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ad-font-heading);
font-weight: 600;
font-size: 0.85rem;
color: var(--ad-text);
}
.ad-select {
width: 100%;
padding: 0.6rem 2rem 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ad-transition);
}
.ad-select:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
/* ── Status Badges ────────────── */
.ad-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.65rem;
border-radius: 20px;
font-family: var(--ad-font-heading);
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.ad-badge-success { background-color: var(--ad-success-muted); color: #065F46; }
.ad-badge-warning { background-color: var(--ad-warning-muted); color: #92400E; }
.ad-badge-danger { background-color: var(--ad-danger-muted); color: #991B1B; }
.ad-badge-info { background-color: var(--ad-info-muted); color: #3730A3; }
.ad-badge-default { background-color: var(--ad-border); color: var(--ad-text-muted); }
/* ── Toggle Switch ────────────── */
.ad-toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.ad-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.ad-toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: var(--ad-border-strong);
border-radius: 24px;
transition: var(--ad-transition);
}
.ad-toggle-slider::before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: #fff;
border-radius: 50%;
transition: var(--ad-transition);
box-shadow: var(--ad-shadow-xs);
}
.ad-toggle input:checked + .ad-toggle-slider {
background-color: var(--ad-primary);
}
.ad-toggle input:checked + .ad-toggle-slider::before {
transform: translateX(20px);
}
/* ── Divider ──────────────────── */
.ad-divider {
border: none;
border-top: 1px solid var(--ad-border);
margin: 0;
}
/* ── Avatar ───────────────────── */
.ad-avatar {
border-radius: var(--ad-radius-sm);
object-fit: cover;
background-color: var(--ad-primary-muted);
color: var(--ad-primary);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ad-font-heading);
font-weight: 700;
flex-shrink: 0;
}
.ad-avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; border-radius: 50%; }
.ad-avatar-md { width: 38px; height: 38px; font-size: 0.9rem; }
.ad-avatar-lg { width: 48px; height: 48px; font-size: 1.1rem; }
/* ── Logo ─────────────────────── */
.ad-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--ad-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: #fff;
letter-spacing: -0.02em;
}
.ad-logo-icon {
width: 32px;
height: 32px;
background-color: var(--ad-primary);
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-logo-icon svg {
display: block;
}
/* ── Utility classes ──────────── */
.text-success { color: var(--ad-success) !important; }
.text-danger { color: var(--ad-danger) !important; }
.text-warning { color: var(--ad-warning) !important; }
.text-muted { color: var(--ad-text-muted) !important; }
.text-light { color: var(--ad-text-light) !important; }
/* --- COMPONENT STYLES --- */
.ad-activity-card {
max-width: 520px;
margin: 0 auto;
padding: 0 !important;
overflow: hidden;
}
.ad-activity-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--ad-border);
}
.ad-activity-header h4 {
font-size: 1rem;
font-weight: 700;
}
.ad-activity-list {
display: flex;
flex-direction: column;
gap: 0.9rem;
padding: 1.25rem 1.5rem;
}
.ad-activity-list .ad-divider {
margin: 0;
}
.ad-activity-item {
display: flex;
align-items: flex-start;
gap: 0.85rem;
position: relative;
padding: 0.1rem 0;
}
.ad-activity-unread {
/* unread items have the dot indicator */
}
.ad-activity-avatar {
width: 32px;
height: 32px;
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-activity-content {
flex: 1;
min-width: 0;
}
.ad-activity-text {
font-size: 0.875rem;
color: var(--ad-text);
font-weight: 500;
line-height: 1.5;
margin-bottom: 0.2rem;
}
.ad-activity-text strong {
font-weight: 700;
color: var(--ad-text);
}
.ad-activity-time {
font-size: 0.77rem;
color: var(--ad-text-light);
font-weight: 500;
}
.ad-unread-dot {
width: 8px;
height: 8px;
background-color: var(--ad-primary);
border-radius: 50%;
flex-shrink: 0;
margin-top: 0.4rem;
}
.ad-activity-footer {
padding: 0.85rem 1.5rem;
border-top: 1px solid var(--ad-border);
}
Modals
Admin Confirm Dialog
HTML
<div class="ad-modal-backdrop">
<div class="ad-modal-dialog ad-card">
<div class="ad-modal-header">
<div class="ad-modal-title-row">
<div class="ad-modal-icon-wrap" style="background:var(--ad-danger-muted); color:var(--ad-danger);">
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
</div>
<div>
<h4 class="ad-modal-title">Delete User Account</h4>
<p class="ad-modal-meta">This action cannot be undone.</p>
</div>
</div>
<button class="ad-btn ad-btn-ghost ad-btn-icon" aria-label="Close">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div class="ad-modal-body">
<p>You are about to permanently delete the account for <strong>[email protected]</strong>. All associated data, reports, and billing history will be erased immediately.</p>
<div class="ad-modal-confirm-input">
<label class="ad-label" for="confirm-delete">Type <code>DELETE</code> to confirm</label>
<input type="text" id="confirm-delete" class="ad-input" placeholder="DELETE">
</div>
</div>
<div class="ad-modal-footer">
<button class="ad-btn ad-btn-outline">Cancel</button>
<button class="ad-btn ad-btn-danger">Delete Account</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Admin Confirm Dialog */
/* NOTE: This component requires base.css to be included in your page. */
.ad-modal-backdrop {
background-color: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
border-radius: var(--ad-radius);
max-width: 700px;
margin: 0 auto;
}
.ad-modal-dialog {
width: 100%;
max-width: 480px;
padding: 0 !important;
overflow: hidden;
}
.ad-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
border-bottom: 1px solid var(--ad-border);
}
.ad-modal-title-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.ad-modal-icon-wrap {
width: 40px;
height: 40px;
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-modal-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.15rem;
}
.ad-modal-meta {
font-size: 0.8rem;
font-weight: 500;
}
.ad-modal-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ad-modal-body > p {
font-size: 0.9rem;
line-height: 1.6;
color: var(--ad-text);
font-weight: 500;
}
.ad-modal-body > p strong {
color: var(--ad-text);
font-weight: 700;
}
.ad-modal-confirm-input {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.ad-modal-confirm-input code {
background-color: var(--ad-surface-2);
border: 1px solid var(--ad-border);
border-radius: 4px;
padding: 0.1rem 0.4rem;
font-size: 0.82rem;
font-weight: 700;
color: var(--ad-danger);
font-family: 'Courier New', monospace;
}
.ad-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--ad-border);
background-color: var(--ad-surface-2);
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
/* ===========================
Admin Dashboard Design System
=========================== */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
/* Core surfaces */
--ad-bg: #F1F5F9;
--ad-surface: #FFFFFF;
--ad-surface-2: #F8FAFC;
--ad-sidebar-bg: #0F172A;
--ad-sidebar-hover:#1E293B;
/* Brand colors */
--ad-primary: #2563EB;
--ad-primary-hover:#1D4ED8;
--ad-primary-muted:#DBEAFE;
--ad-success: #10B981;
--ad-success-muted:#D1FAE5;
--ad-warning: #F59E0B;
--ad-warning-muted:#FEF3C7;
--ad-danger: #EF4444;
--ad-danger-muted: #FEE2E2;
--ad-info: #6366F1;
--ad-info-muted: #EEF2FF;
/* Text */
--ad-text: #0F172A;
--ad-text-muted: #64748B;
--ad-text-light: #94A3B8;
--ad-sidebar-text: #94A3B8;
--ad-sidebar-active:#FFFFFF;
/* Borders */
--ad-border: #E2E8F0;
--ad-border-strong:#CBD5E1;
/* Radius */
--ad-radius-sm: 6px;
--ad-radius: 10px;
--ad-radius-lg: 14px;
--ad-radius-xl: 20px;
/* Fonts */
--ad-font-heading: 'Inter', sans-serif;
--ad-font-body: 'DM Sans', sans-serif;
/* Shadows */
--ad-shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
--ad-shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 4px 16px rgba(15,23,42,0.04);
--ad-shadow: 0 4px 6px rgba(15,23,42,0.07), 0 10px 32px rgba(15,23,42,0.06);
--ad-shadow-lg: 0 8px 16px rgba(15,23,42,0.10), 0 24px 48px rgba(15,23,42,0.08);
/* Transitions */
--ad-transition: all 0.18s ease;
}
body {
margin: 0;
font-family: var(--ad-font-body);
color: var(--ad-text);
background-color: var(--ad-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* ── Card Surface ─────────────── */
.ad-card {
background-color: var(--ad-surface);
border: 1px solid var(--ad-border);
border-radius: var(--ad-radius);
box-shadow: var(--ad-shadow-sm);
padding: 1.75rem;
transition: var(--ad-transition);
}
.ad-card:hover {
box-shadow: var(--ad-shadow);
}
/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ad-font-heading);
font-weight: 600;
margin: 0;
color: var(--ad-text);
letter-spacing: -0.01em;
line-height: 1.25;
}
p {
font-family: var(--ad-font-body);
color: var(--ad-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Buttons ──────────────────── */
.ad-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.25rem;
font-family: var(--ad-font-heading);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--ad-radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--ad-transition);
white-space: nowrap;
user-select: none;
line-height: 1.4;
}
.ad-btn:focus-visible {
outline: 2px solid var(--ad-primary);
outline-offset: 2px;
}
.ad-btn-primary {
background-color: var(--ad-primary);
color: #fff;
border-color: var(--ad-primary);
}
.ad-btn-primary:hover {
background-color: var(--ad-primary-hover);
border-color: var(--ad-primary-hover);
box-shadow: 0 4px 12px rgba(37,99,235,0.35);
transform: translateY(-1px);
}
.ad-btn-primary:active {
transform: translateY(0);
box-shadow: none;
}
.ad-btn-outline {
background-color: var(--ad-surface);
color: var(--ad-text);
border-color: var(--ad-border-strong);
}
.ad-btn-outline:hover {
background-color: var(--ad-surface-2);
border-color: var(--ad-text-light);
transform: translateY(-1px);
}
.ad-btn-danger {
background-color: var(--ad-danger);
color: #fff;
border-color: var(--ad-danger);
}
.ad-btn-danger:hover {
background-color: #dc2626;
box-shadow: 0 4px 12px rgba(239,68,68,0.35);
transform: translateY(-1px);
}
.ad-btn-ghost {
background-color: transparent;
color: var(--ad-text-muted);
border-color: transparent;
}
.ad-btn-ghost:hover {
background-color: var(--ad-surface-2);
color: var(--ad-text);
}
.ad-btn-sm {
padding: 0.4rem 0.85rem;
font-size: 0.8rem;
}
.ad-btn-lg {
padding: 0.8rem 1.75rem;
font-size: 1rem;
}
.ad-btn-block {
width: 100%;
}
.ad-btn-icon {
width: 36px;
height: 36px;
padding: 0;
border-radius: var(--ad-radius-sm);
}
/* ── Form Controls ────────────── */
.ad-input {
width: 100%;
padding: 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
outline: none;
transition: var(--ad-transition);
line-height: 1.5;
}
.ad-input::placeholder {
color: var(--ad-text-light);
}
.ad-input:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--ad-font-heading);
font-weight: 600;
font-size: 0.85rem;
color: var(--ad-text);
}
.ad-select {
width: 100%;
padding: 0.6rem 2rem 0.6rem 0.9rem;
border: 1px solid var(--ad-border-strong);
border-radius: var(--ad-radius-sm);
font-family: var(--ad-font-body);
font-size: 0.9rem;
font-weight: 500;
color: var(--ad-text);
background-color: var(--ad-surface);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1rem;
outline: none;
cursor: pointer;
transition: var(--ad-transition);
}
.ad-select:focus {
border-color: var(--ad-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.ad-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
/* ── Status Badges ────────────── */
.ad-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.65rem;
border-radius: 20px;
font-family: var(--ad-font-heading);
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.ad-badge-success { background-color: var(--ad-success-muted); color: #065F46; }
.ad-badge-warning { background-color: var(--ad-warning-muted); color: #92400E; }
.ad-badge-danger { background-color: var(--ad-danger-muted); color: #991B1B; }
.ad-badge-info { background-color: var(--ad-info-muted); color: #3730A3; }
.ad-badge-default { background-color: var(--ad-border); color: var(--ad-text-muted); }
/* ── Toggle Switch ────────────── */
.ad-toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.ad-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.ad-toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: var(--ad-border-strong);
border-radius: 24px;
transition: var(--ad-transition);
}
.ad-toggle-slider::before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: #fff;
border-radius: 50%;
transition: var(--ad-transition);
box-shadow: var(--ad-shadow-xs);
}
.ad-toggle input:checked + .ad-toggle-slider {
background-color: var(--ad-primary);
}
.ad-toggle input:checked + .ad-toggle-slider::before {
transform: translateX(20px);
}
/* ── Divider ──────────────────── */
.ad-divider {
border: none;
border-top: 1px solid var(--ad-border);
margin: 0;
}
/* ── Avatar ───────────────────── */
.ad-avatar {
border-radius: var(--ad-radius-sm);
object-fit: cover;
background-color: var(--ad-primary-muted);
color: var(--ad-primary);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ad-font-heading);
font-weight: 700;
flex-shrink: 0;
}
.ad-avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; border-radius: 50%; }
.ad-avatar-md { width: 38px; height: 38px; font-size: 0.9rem; }
.ad-avatar-lg { width: 48px; height: 48px; font-size: 1.1rem; }
/* ── Logo ─────────────────────── */
.ad-logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
font-family: var(--ad-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: #fff;
letter-spacing: -0.02em;
}
.ad-logo-icon {
width: 32px;
height: 32px;
background-color: var(--ad-primary);
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-logo-icon svg {
display: block;
}
/* ── Utility classes ──────────── */
.text-success { color: var(--ad-success) !important; }
.text-danger { color: var(--ad-danger) !important; }
.text-warning { color: var(--ad-warning) !important; }
.text-muted { color: var(--ad-text-muted) !important; }
.text-light { color: var(--ad-text-light) !important; }
/* --- COMPONENT STYLES --- */
.ad-modal-backdrop {
background-color: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
border-radius: var(--ad-radius);
max-width: 700px;
margin: 0 auto;
}
.ad-modal-dialog {
width: 100%;
max-width: 480px;
padding: 0 !important;
overflow: hidden;
}
.ad-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
border-bottom: 1px solid var(--ad-border);
}
.ad-modal-title-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
.ad-modal-icon-wrap {
width: 40px;
height: 40px;
border-radius: var(--ad-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ad-modal-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.15rem;
}
.ad-modal-meta {
font-size: 0.8rem;
font-weight: 500;
}
.ad-modal-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ad-modal-body > p {
font-size: 0.9rem;
line-height: 1.6;
color: var(--ad-text);
font-weight: 500;
}
.ad-modal-body > p strong {
color: var(--ad-text);
font-weight: 700;
}
.ad-modal-confirm-input {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.ad-modal-confirm-input code {
background-color: var(--ad-surface-2);
border: 1px solid var(--ad-border);
border-radius: 4px;
padding: 0.1rem 0.4rem;
font-size: 0.82rem;
font-weight: 700;
color: var(--ad-danger);
font-family: 'Courier New', monospace;
}
.ad-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--ad-border);
background-color: var(--ad-surface-2);
}