WFDASH-WEBAPP/docs/theme-preview/themes.html
SJCoetz bb4233a9f2 feat(dashboard): add multi-theme system and supporting improvements
Add complete multi-theme dashboard system including:
- 8 selectable themes with persistent per-browser preferences
- Theme bootstrap script to prevent FOUC on page load
- 12+ reusable chart components (area, bar, donut, radial gauge, etc)
- Custom checkbox UI component
- New settings page for appearance customization

Other changes:
- Optimize supplier map API payload with getMappableSuppliers helper
- Add aria-label attributes to back buttons on detail pages for better accessibility
- Update next.config.ts to include new local development IP 192.168.1.128
- Update site manifest with all new favicon and PWA assets
- Fix styling and layout spacing in rewrite quote modal
2026-06-26 17:59:40 +02:00

1268 lines
82 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>WFDASH — 7 Theme Preview (Warm × Dark)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;700&family=Playfair+Display:wght@500;600;700&family=Lato:wght@400;700&family=Outfit:wght@500;600;700&family=Nunito:wght@400;600;700&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<style>
:root { color-scheme: light; }
html, body { background:#0B0F1A; }
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
/* ============================================================
BRAND TOKENS — DieselLog palette (now applied to WFDASH)
blue #4C96D7 · gold #F2AF58 · red #E94E49
============================================================ */
.brand-blue { background:#4C96D7; }
.brand-gold { background:#F2AF58; }
.brand-red { background:#E94E49; }
/* ============================================================
THEME TOKENS — warm + dark per theme
============================================================ */
/* 1. Crisp Minimal */
.t1 { --bg:#FFFFFF; --surface:#F8FAFC; --surface-2:#FFFFFF; --border:#E2E8F0; --text:#0F172A; --text-soft:#475569; --primary:#4C96D7; --primary-fg:#FFFFFF; --primary-soft:#E7F1FB; --gold:#F2AF58; --gold-fg:#3D2A0E; --red:#E94E49; --red-soft:#FDECEB; --radius:10px; --font-h:'Inter'; --font-b:'Inter'; --shadow:0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.06); --logo-fg:#FFFFFF; }
.t1.dark { --bg:#0B1220; --surface:#111A2E; --surface-2:#0F1828; --border:#1F2B47; --text:#E6ECF5; --text-soft:#94A3B8; --primary:#6BB0E8; --primary-soft:rgba(76,150,215,.18); --gold:#F2AF58; --red:#FF7A75; --red-soft:rgba(233,78,73,.18); }
/* 2. Midnight Sapphire */
.t2 { --bg:#0B1220; --surface:#111A2E; --surface-2:#0F1828; --border:#1F2B47; --text:#E6ECF5; --text-soft:#94A3B8; --primary:#4C96D7; --primary-fg:#FFFFFF; --primary-soft:rgba(76,150,215,.15); --gold:#F2AF58; --gold-fg:#1A1306; --red:#E94E49; --red-soft:rgba(233,78,73,.18); --radius:12px; --font-h:'Space Grotesk'; --font-b:'DM Sans'; --shadow:0 0 0 1px rgba(76,150,215,.08), 0 8px 32px rgba(76,150,215,.08); --logo-fg:#FFFFFF; }
.t2.dark { --bg:#05080F; --surface:#0A0F1C; --surface-2:#070B16; --border:#172036; --primary:#5FA8E5; }
/* 3. Editorial Premium */
.t3 { --bg:#FBF8F3; --surface:#FFFFFF; --surface-2:#F6F1E8; --border:#E8DFCB; --text:#0F2E4C; --text-soft:#5A6A7E; --primary:#1E5A99; --primary-fg:#FFFFFF; --primary-soft:#E3EDF8; --gold:#B8842C; --gold-fg:#FFFFFF; --red:#C0392B; --red-soft:#F7E3DF; --radius:6px; --font-h:'Playfair Display'; --font-b:'Lato'; --shadow:0 1px 0 rgba(15,46,76,.05); --logo-fg:#FFFFFF; }
.t3.dark { --bg:#0E1A2C; --surface:#152339; --surface-2:#0F1B30; --border:#243750; --text:#E8EEF6; --text-soft:#9FB0C5; --primary:#7BB1E8; --primary-soft:rgba(76,150,215,.18); --gold:#F2AF58; --red:#F08580; --red-soft:rgba(240,133,128,.18); --shadow:none; }
/* 4. Bento Modular */
.t4 { --bg:#F4F6FB; --surface:#FFFFFF; --surface-2:#EEF3FB; --border:#E2E8F0; --text:#0F172A; --text-soft:#475569; --primary:#4C96D7; --primary-fg:#FFFFFF; --primary-soft:#DBE9F7; --gold:#F2AF58; --gold-fg:#3D2A0E; --red:#E94E49; --red-soft:#FBE0DE; --radius:18px; --font-h:'Inter'; --font-b:'Inter'; --shadow:0 1px 0 rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.05); --logo-fg:#FFFFFF; }
.t4.dark { --bg:#0B1220; --surface:#111A2E; --surface-2:#0F1828; --border:#1F2B47; --text:#E6ECF5; --text-soft:#94A3B8; --primary-soft:rgba(76,150,215,.18); --red-soft:rgba(233,78,73,.18); }
/* 5. Glass Aurora */
.t5 { --bg:linear-gradient(135deg,#0B1437 0%,#1B2A6B 35%,#3A2E5F 70%,#7A3E58 100%); --surface:rgba(255,255,255,.10); --surface-2:rgba(255,255,255,.06); --border:rgba(255,255,255,.18); --text:#F5F8FF; --text-soft:#C7D1E6; --primary:#7DBDEF; --primary-fg:#0B1437; --primary-soft:rgba(125,189,239,.18); --gold:#F8C77A; --gold-fg:#1A1306; --red:#F08580; --red-soft:rgba(240,133,128,.18); --radius:16px; --font-h:'DM Sans'; --font-b:'DM Sans'; --shadow:0 8px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.10); --logo-fg:#0B1437; }
/* Aurora is always dark — the "warm" variant uses the same surface strategy on a warmer gradient */
.t5.warm { --bg:linear-gradient(135deg,#FFF6E5 0%,#FCE7C0 35%,#FBD0B0 70%,#F2AF58 100%); --text:#3D2A0E; --text-soft:#7A5B2E; --primary:#1E5A99; --primary-fg:#FFFFFF; --primary-soft:rgba(30,90,153,.14); --gold:#B8842C; --gold-fg:#FFFFFF; --red:#C0392B; --red-soft:rgba(192,57,43,.14); --border:rgba(255,255,255,.55); --surface:rgba(255,255,255,.55); --surface-2:rgba(255,255,255,.35); --shadow:0 12px 40px rgba(120,80,20,.18), inset 0 1px 0 rgba(255,255,255,.55); --logo-fg:#1E5A99; }
/* 6. Tactile Soft */
.t6 { --bg:#EEF1F7; --surface:#EEF1F7; --surface-2:#FFFFFF; --border:transparent; --text:#2A3958; --text-soft:#6B7790; --primary:#6BA6DC; --primary-fg:#FFFFFF; --primary-soft:#D9E9F7; --gold:#EBC384; --gold-fg:#3D2A0E; --red:#E59C97; --red-soft:#F8DAD7; --radius:18px; --font-h:'Outfit'; --font-b:'Nunito'; --shadow:8px 8px 18px rgba(163,177,198,.45), -8px -8px 18px rgba(255,255,255,.9); --logo-fg:#FFFFFF; }
.t6.dark { --bg:#111A2E; --surface:#111A2E; --surface-2:#1A2542; --border:transparent; --text:#E6ECF5; --text-soft:#94A3B8; --primary:#7BB1E8; --primary-soft:rgba(123,177,232,.18); --gold:#F2AF58; --red:#F08580; --red-soft:rgba(240,133,128,.18); --shadow:8px 8px 18px rgba(0,0,0,.45), -8px -8px 18px rgba(255,255,255,.04); }
/* 7. Field Ops */
.t7 { --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5F9; --border:#E2E8F0; --text:#0F172A; --text-soft:#475569; --primary:#0F2E4C; --primary-fg:#FFFFFF; --primary-soft:#E3EDF8; --gold:#F2AF58; --gold-fg:#0F2E4C; --red:#E94E49; --red-soft:#FDECEB; --radius:8px; --font-h:'Inter'; --font-b:'Inter'; --shadow:0 1px 0 rgba(15,23,42,.04); --logo-fg:#0F2E4C; }
.t7.dark { --bg:#0B1220; --surface:#111A2E; --surface-2:#0F1828; --border:#1F2B47; --text:#E6ECF5; --text-soft:#94A3B8; --primary-soft:rgba(76,150,215,.18); --gold:#F2AF58; --gold-fg:#0B1220; --red-soft:rgba(233,78,73,.18); }
/* ============================================================
SHARED THEME STYLES
============================================================ */
.theme {
background: var(--bg);
color: var(--text);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 24px 48px -16px rgba(0,0,0,.45);
font-family: var(--font-b);
border: 1px solid rgba(255,255,255,.05);
}
.theme * { box-sizing: border-box; }
.theme .h-font { font-family: var(--font-h); letter-spacing: -0.01em; }
.theme .b-font { font-family: var(--font-b); }
.theme .surface { background: var(--surface); }
.theme .surface-2 { background: var(--surface-2); }
.theme .border-tk { border-color: var(--border); }
.theme .text-tk { color: var(--text); }
.theme .text-soft { color: var(--text-soft); }
.theme .r-tk { border-radius: var(--radius); }
.theme .shadow-tk { box-shadow: var(--shadow); }
.theme .btn-primary {
background: var(--primary); color: var(--primary-fg);
border-radius: var(--radius);
font-weight: 600;
padding: 9px 14px;
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; border: 1px solid transparent;
transition: filter .15s ease;
font-size: 13px;
}
.theme .btn-primary:hover { filter: brightness(1.08); }
.theme .btn-gold {
background: var(--gold); color: var(--gold-fg);
border-radius: var(--radius);
font-weight: 600;
padding: 9px 14px;
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; border: 1px solid transparent;
font-size: 13px;
}
.theme .btn-danger {
background: var(--red); color: #fff;
border-radius: var(--radius);
font-weight: 600;
padding: 9px 14px;
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; border: 1px solid transparent;
font-size: 13px;
}
.theme .btn-ghost {
background: transparent; color: var(--text);
border-radius: var(--radius);
font-weight: 600;
padding: 9px 14px;
border: 1px solid var(--border);
cursor: pointer;
font-size: 13px;
}
.theme .chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 9px; border-radius: 999px;
font-size: 11px; font-weight: 600;
background: var(--primary-soft); color: var(--primary);
}
.theme .chip-gold { background: var(--gold); color: var(--gold-fg); }
.theme .chip-red { background: var(--red-soft); color: var(--red); }
.theme .chip-neutral { background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); }
.theme label.field-label {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-soft);
margin-bottom: 5px;
}
.theme .input,
.theme .select,
.theme .textarea {
width: 100%;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 9px 12px;
font: inherit;
font-size: 13px;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.theme .input::placeholder { color: var(--text-soft); opacity: .7; }
.theme .input:focus,
.theme .select:focus,
.theme .textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 24%, transparent);
}
.theme .field-row { display: grid; gap: 5px; }
.theme .swatch .chip-c { width: 100%; aspect-ratio: 2/1; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); }
.theme .swatch .nm { font-size: 10px; color: var(--text-soft); font-family: ui-monospace, monospace; }
.theme .swatch .lbl { font-size: 11px; font-weight: 600; color: var(--text); }
.theme .nav-item {
display:flex; align-items:center; gap: 9px;
padding: 8px 10px; border-radius: var(--radius);
color: var(--text-soft); font-weight: 500; font-size: 13px;
cursor: pointer;
}
.theme .nav-item:hover { background: var(--surface-2); color: var(--text); }
.theme .nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.theme .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.theme .kpi .lbl { font-size: 11px; color: var(--text-soft); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.theme .kpi .val { font-family: var(--font-h); font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.1; margin-top: 3px; }
.theme .kpi .delta { font-size: 11px; font-weight: 600; margin-top: 5px; }
.theme .kpi .delta.up { color: #16A34A; }
.theme .kpi .delta.down { color: var(--red); }
.theme .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.theme .card-title { font-family: var(--font-h); font-size: 14px; font-weight: 600; }
/* glass-specific */
.t5 .glass { background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); }
/* neumorphic inputs on t6 */
.t6 .input, .t6 .select { box-shadow: inset 4px 4px 8px rgba(163,177,198,.35), inset -4px -4px 8px rgba(255,255,255,.9); border: none; }
.t6 .btn-primary { box-shadow: 6px 6px 14px rgba(163,177,198,.45), -6px -6px 14px rgba(255,255,255,.9); }
.t6.dark .input, .t6.dark .select { box-shadow: inset 4px 4px 8px rgba(0,0,0,.45), inset -4px -4px 8px rgba(255,255,255,.05); }
.t6.dark .btn-primary { box-shadow: 6px 6px 14px rgba(0,0,0,.55), -6px -6px 14px rgba(255,255,255,.04); }
/* dense t7 */
.t7 .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.t7 .nav-item { padding: 6px 9px; font-size: 12px; }
.t7 .kpi .val { font-size: 20px; }
/* mode badge */
.mode-badge {
position: absolute; top: 10px; right: 10px;
z-index: 5;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
padding: 4px 8px;
border-radius: 999px;
text-transform: uppercase;
}
.theme.warm-mode .mode-badge { background: rgba(255,255,255,.85); color: #0F172A; border: 1px solid #E2E8F0; }
.theme.dark-mode .mode-badge { background: rgba(15,23,42,.85); color: #E2E8F0; border: 1px solid #1F2B47; }
/* pair layout */
.theme-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .theme-pair { grid-template-columns: 1fr; } }
.theme-frame { position: relative; }
/* logo block */
.theme .wfdash-logo {
width: 26px; height: 26px; border-radius: 7px;
background: var(--primary); color: var(--logo-fg);
display:flex; align-items:center; justify-content:center;
font-family: var(--font-h); font-weight: 800; font-size: 13px;
}
/* page chrome */
.topbar {
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand-dot { width: 9px; height: 9px; border-radius: 3px; background: #4C96D7; box-shadow: 0 0 0 3px rgba(76,150,215,.18); }
.gold-dot { width: 9px; height: 9px; border-radius: 3px; background: #F2AF58; }
.red-dot { width: 9px; height: 9px; border-radius: 3px; background: #E94E49; }
</style>
</head>
<body class="min-h-screen text-slate-100">
<!-- Top bar -->
<header class="topbar sticky top-0 z-30 backdrop-blur">
<div class="max-w-[1480px] mx-auto px-6 py-5 flex items-center justify-between gap-6 flex-wrap">
<div class="flex items-center gap-3">
<div class="flex items-center gap-2">
<span class="brand-dot"></span>
<span class="gold-dot"></span>
<span class="red-dot"></span>
</div>
<div>
<div class="text-white text-lg font-semibold tracking-tight">WFDASH — Theme Preview</div>
<div class="text-slate-400 text-xs">7 visual treatments · each shown in warm + dark · blue/gold/red brand palette</div>
</div>
</div>
<div class="flex items-center gap-3 text-xs">
<span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-800/60 border border-slate-700"><span class="brand-dot"></span><span class="font-mono">#4C96D7</span></span>
<span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-800/60 border border-slate-700"><span class="gold-dot"></span><span class="font-mono">#F2AF58</span></span>
<span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-800/60 border border-slate-700"><span class="red-dot"></span><span class="font-mono">#E94E49</span></span>
</div>
</div>
</header>
<main class="max-w-[1480px] mx-auto px-6 pb-24">
<!-- intro card -->
<section class="mt-8 grid lg:grid-cols-3 gap-4">
<div class="lg:col-span-2 p-6 rounded-2xl bg-slate-900/60 border border-slate-800">
<div class="text-xs uppercase tracking-widest text-slate-400 font-semibold">Pick one</div>
<h1 class="h-font text-3xl md:text-4xl font-semibold text-white mt-1 tracking-tight">Seven ways to dress your CRM</h1>
<p class="text-slate-300 mt-3 max-w-2xl text-[15px] leading-relaxed">Each theme is now a <b class="text-white">pair</b> — warm and dark — so you can see both modes side-by-side. Every mock shows WFDASH content (quotes, orders, customers) using your three brand colors. Pick the pair that feels right and I'll build the full design system (Tailwind palette + <code class="text-slate-400">next/font</code> + form spacing rules) for it.</p>
</div>
<div class="p-6 rounded-2xl bg-slate-900/60 border border-slate-800">
<div class="text-xs uppercase tracking-widest text-slate-400 font-semibold">Reading guide</div>
<ul class="mt-3 space-y-2 text-sm text-slate-300">
<li class="flex gap-2"><span class="brand-dot mt-2"></span><span><b class="text-white">Blue</b> → primary actions, links, active nav</span></li>
<li class="flex gap-2"><span class="gold-dot mt-2"></span><span><b class="text-white">Gold</b> → revenue, accent CTAs, highlights</span></li>
<li class="flex gap-2"><span class="red-dot mt-2"></span><span><b class="text-white">Red</b> → destructive, over-budget, problem quotes</span></li>
<li class="text-slate-400 text-xs pt-2">WFDASH already has a <code class="text-slate-300">warm</code> ↔ <code class="text-slate-300">dark</code> toggle via next-themes — these previews mirror that.</li>
</ul>
</div>
</section>
<!-- THEME SECTIONS -->
<section class="mt-8 space-y-12">
<!-- ========== THEME 01 · CRISP MINIMAL ========== -->
<div>
<div class="flex items-end justify-between flex-wrap gap-3 mb-4">
<div>
<div class="text-[11px] uppercase tracking-widest text-slate-400 font-semibold">Theme 01</div>
<h2 class="h-font text-2xl font-semibold text-white">Crisp Minimal</h2>
<p class="text-slate-400 text-sm mt-1">Clean white surface, soft shadows, generous whitespace. Inter throughout. The "boring professional" — calm, scannable, scales to dense CRM tables.</p>
</div>
<div class="text-xs text-slate-400 font-mono">Inter / Inter · radius 10px</div>
</div>
<div class="theme-pair">
<!-- WARM -->
<div class="theme-frame">
<span class="mode-badge">Warm</span>
<article class="theme t1 warm-mode">
<div class="card" style="border:none; box-shadow:none; background:transparent; padding:14px;">
<!-- top bar -->
<div class="flex items-center justify-between border-tk border-b pb-3">
<div class="flex items-center gap-2">
<div class="wfdash-logo">W</div>
<div class="h-font font-semibold text-tk">WFDASH</div>
</div>
<div class="flex items-center gap-2">
<span class="chip">14 open</span>
<button class="btn-ghost" style="padding:6px 9px">Export</button>
<button class="btn-primary" style="padding:6px 9px">+ New quote</button>
</div>
</div>
<div class="grid grid-cols-12 gap-3 mt-4">
<aside class="col-span-3 space-y-1">
<div class="nav-item active">Dashboard</div>
<div class="nav-item">Quotes</div>
<div class="nav-item">Orders</div>
<div class="nav-item">Customers</div>
<div class="nav-item">Suppliers</div>
<div class="nav-item">Map</div>
<div class="nav-item">Settings</div>
</aside>
<div class="col-span-9 space-y-3">
<div class="grid grid-cols-3 gap-2">
<div class="kpi"><div class="lbl">Open quotes</div><div class="val">14</div><div class="delta up">▲ 3</div></div>
<div class="kpi"><div class="lbl">Revenue (mo)</div><div class="val">R 248k</div><div class="delta up">▲ 12.4%</div></div>
<div class="kpi"><div class="lbl">Pending approval</div><div class="val">3</div><div class="delta down">2 aged</div></div>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="surface-2 p-3 rounded-md border-tk border">
<div class="card-title mb-2">New quote</div>
<form class="space-y-2.5">
<div class="field-row">
<label class="field-label" for="t1w-c">Customer</label>
<select id="t1w-c" class="select"><option>CNL Mining Supplies (Pty) Ltd</option></select>
</div>
<div class="grid grid-cols-2 gap-2.5">
<div class="field-row"><label class="field-label" for="t1w-i">Line item</label><input id="t1w-i" class="input" placeholder="Hydraulic hose 1/2&quot;" /></div>
<div class="field-row"><label class="field-label" for="t1w-t">Total (R)</label><input id="t1w-t" class="input" placeholder="12,450.00" /></div>
</div>
<div class="flex gap-2 pt-1">
<button type="button" class="btn-primary">Save draft</button>
<button type="button" class="btn-ghost">Cancel</button>
</div>
</form>
</div>
<div class="space-y-2">
<div class="grid grid-cols-3 gap-1.5">
<div class="swatch"><div class="chip-c brand-blue"></div><div class="lbl">Primary</div><div class="nm">#4C96D7</div></div>
<div class="swatch"><div class="chip-c brand-gold"></div><div class="lbl">Gold</div><div class="nm">#F2AF58</div></div>
<div class="swatch"><div class="chip-c brand-red"></div><div class="lbl">Red</div><div class="nm">#E94E49</div></div>
</div>
<div class="p-2 border-tk border rounded-md text-xs">
<div class="font-semibold text-soft uppercase tracking-widest text-[10px] mb-1">Status pills</div>
<div class="flex flex-wrap gap-1.5">
<span class="chip">New</span>
<span class="chip chip-gold">Approval pending</span>
<span class="chip chip-red">Problem</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<!-- DARK -->
<div class="theme-frame">
<span class="mode-badge">Dark</span>
<article class="theme t1 t1-dark dark-mode">
<div class="card" style="border:none; box-shadow:none; background:transparent; padding:14px;">
<div class="flex items-center justify-between border-tk border-b pb-3">
<div class="flex items-center gap-2">
<div class="wfdash-logo">W</div>
<div class="h-font font-semibold text-tk">WFDASH</div>
</div>
<div class="flex items-center gap-2">
<span class="chip">14 open</span>
<button class="btn-ghost" style="padding:6px 9px">Export</button>
<button class="btn-primary" style="padding:6px 9px">+ New quote</button>
</div>
</div>
<div class="grid grid-cols-12 gap-3 mt-4">
<aside class="col-span-3 space-y-1">
<div class="nav-item active">Dashboard</div>
<div class="nav-item">Quotes</div>
<div class="nav-item">Orders</div>
<div class="nav-item">Customers</div>
<div class="nav-item">Suppliers</div>
<div class="nav-item">Map</div>
<div class="nav-item">Settings</div>
</aside>
<div class="col-span-9 space-y-3">
<div class="grid grid-cols-3 gap-2">
<div class="kpi"><div class="lbl">Open quotes</div><div class="val">14</div><div class="delta up">▲ 3</div></div>
<div class="kpi"><div class="lbl">Revenue (mo)</div><div class="val">R 248k</div><div class="delta up">▲ 12.4%</div></div>
<div class="kpi"><div class="lbl">Pending approval</div><div class="val">3</div><div class="delta down">2 aged</div></div>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="surface-2 p-3 rounded-md border-tk border">
<div class="card-title mb-2">New quote</div>
<form class="space-y-2.5">
<div class="field-row"><label class="field-label" for="t1d-c">Customer</label><select id="t1d-c" class="select"><option>CNL Mining Supplies (Pty) Ltd</option></select></div>
<div class="grid grid-cols-2 gap-2.5">
<div class="field-row"><label class="field-label" for="t1d-i">Line item</label><input id="t1d-i" class="input" placeholder="Hydraulic hose 1/2&quot;" /></div>
<div class="field-row"><label class="field-label" for="t1d-t">Total (R)</label><input id="t1d-t" class="input" placeholder="12,450.00" /></div>
</div>
<div class="flex gap-2 pt-1">
<button type="button" class="btn-primary">Save draft</button>
<button type="button" class="btn-ghost">Cancel</button>
</div>
</form>
</div>
<div class="space-y-2">
<div class="grid grid-cols-3 gap-1.5">
<div class="swatch"><div class="chip-c" style="background:#6BB0E8"></div><div class="lbl">Primary</div><div class="nm">#6BB0E8</div></div>
<div class="swatch"><div class="chip-c brand-gold"></div><div class="lbl">Gold</div><div class="nm">#F2AF58</div></div>
<div class="swatch"><div class="chip-c" style="background:#FF7A75"></div><div class="lbl">Red</div><div class="nm">#FF7A75</div></div>
</div>
<div class="p-2 border-tk border rounded-md text-xs">
<div class="font-semibold text-soft uppercase tracking-widest text-[10px] mb-1">Status pills</div>
<div class="flex flex-wrap gap-1.5">
<span class="chip">New</span>
<span class="chip chip-gold">Approval pending</span>
<span class="chip chip-red">Problem</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<!-- ========== THEME 02 · MIDNIGHT SAPPHIRE ========== -->
<div>
<div class="flex items-end justify-between flex-wrap gap-3 mb-4">
<div>
<div class="text-[11px] uppercase tracking-widest text-slate-400 font-semibold">Theme 02</div>
<h2 class="h-font text-2xl font-semibold text-white">Midnight Sapphire</h2>
<p class="text-slate-400 text-sm mt-1">Deep navy with electric blue accents. Reads like a control-room. Space Grotesk for authority, DM Sans for body.</p>
</div>
<div class="text-xs text-slate-400 font-mono">Space Grotesk + DM Sans · radius 12px</div>
</div>
<div class="theme-pair">
<div class="theme-frame">
<span class="mode-badge">Warm</span>
<article class="theme t2 t2-dark-mode warm-mode">
<div class="card" style="border:none; box-shadow:none; background:transparent; padding:14px;">
<div class="flex items-center justify-between pb-3 border-tk border-b">
<div class="flex items-center gap-2">
<div class="wfdash-logo">W</div>
<div class="h-font font-semibold text-tk">WFDASH</div>
</div>
<div class="flex items-center gap-2">
<span class="chip">14 open</span>
<button class="btn-ghost" style="padding:6px 9px">Export</button>
<button class="btn-primary" style="padding:6px 9px">+ New quote</button>
</div>
</div>
<div class="grid grid-cols-12 gap-3 mt-4">
<aside class="col-span-3 space-y-1">
<div class="nav-item active">Dashboard</div>
<div class="nav-item">Quotes</div>
<div class="nav-item">Orders</div>
<div class="nav-item">Customers</div>
<div class="nav-item">Suppliers</div>
<div class="nav-item">Map</div>
<div class="nav-item">Settings</div>
</aside>
<div class="col-span-9 space-y-3">
<div class="grid grid-cols-3 gap-2">
<div class="kpi"><div class="lbl">Open quotes</div><div class="val">14</div><div class="delta up">▲ 3</div></div>
<div class="kpi"><div class="lbl">Revenue (mo)</div><div class="val">R 248k</div><div class="delta up">▲ 12.4%</div></div>
<div class="kpi"><div class="lbl">Pending approval</div><div class="val">3</div><div class="delta down">2 aged</div></div>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="p-3 rounded-md" style="background:var(--surface-2); border:1px solid var(--border)">
<div class="card-title mb-2">New quote</div>
<form class="space-y-2.5">
<div class="field-row"><label class="field-label" for="t2w-c">Customer</label><select id="t2w-c" class="select"><option>CNL Mining Supplies (Pty) Ltd</option></select></div>
<div class="grid grid-cols-2 gap-2.5">
<div class="field-row"><label class="field-label" for="t2w-i">Line item</label><input id="t2w-i" class="input" placeholder="Hydraulic hose 1/2&quot;" /></div>
<div class="field-row"><label class="field-label" for="t2w-t">Total (R)</label><input id="t2w-t" class="input" placeholder="12,450.00" /></div>
</div>
<div class="flex gap-2 pt-1"><button type="button" class="btn-primary">Save draft</button><button type="button" class="btn-ghost">Cancel</button></div>
</form>
</div>
<div class="space-y-2">
<div class="grid grid-cols-3 gap-1.5">
<div class="swatch"><div class="chip-c brand-blue"></div><div class="lbl">Primary</div><div class="nm">#4C96D7</div></div>
<div class="swatch"><div class="chip-c brand-gold"></div><div class="lbl">Gold</div><div class="nm">#F2AF58</div></div>
<div class="swatch"><div class="chip-c brand-red"></div><div class="lbl">Red</div><div class="nm">#E94E49</div></div>
</div>
<div class="p-2 rounded-md border-tk border text-xs">
<div class="font-semibold text-soft uppercase tracking-widest text-[10px] mb-1">Status</div>
<div class="flex flex-wrap gap-1.5">
<span class="chip">New</span>
<span class="chip chip-gold">Approval pending</span>
<span class="chip chip-red">Problem</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="theme-frame">
<span class="mode-badge">Dark</span>
<article class="theme t2 dark-mode">
<div class="card" style="border:none; box-shadow:none; background:transparent; padding:14px;">
<div class="flex items-center justify-between pb-3 border-tk border-b">
<div class="flex items-center gap-2">
<div class="wfdash-logo">W</div>
<div class="h-font font-semibold text-tk">WFDASH</div>
</div>
<div class="flex items-center gap-2">
<span class="chip">14 open</span>
<button class="btn-ghost" style="padding:6px 9px">Export</button>
<button class="btn-primary" style="padding:6px 9px">+ New quote</button>
</div>
</div>
<div class="grid grid-cols-12 gap-3 mt-4">
<aside class="col-span-3 space-y-1">
<div class="nav-item active">Dashboard</div>
<div class="nav-item">Quotes</div>
<div class="nav-item">Orders</div>
<div class="nav-item">Customers</div>
<div class="nav-item">Suppliers</div>
<div class="nav-item">Map</div>
<div class="nav-item">Settings</div>
</aside>
<div class="col-span-9 space-y-3">
<div class="grid grid-cols-3 gap-2">
<div class="kpi"><div class="lbl">Open quotes</div><div class="val">14</div><div class="delta up">▲ 3</div></div>
<div class="kpi"><div class="lbl">Revenue (mo)</div><div class="val">R 248k</div><div class="delta up">▲ 12.4%</div></div>
<div class="kpi"><div class="lbl">Pending approval</div><div class="val">3</div><div class="delta down">2 aged</div></div>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="p-3 rounded-md" style="background:var(--surface-2); border:1px solid var(--border)">
<div class="card-title mb-2">New quote</div>
<form class="space-y-2.5">
<div class="field-row"><label class="field-label" for="t2d-c">Customer</label><select id="t2d-c" class="select"><option>CNL Mining Supplies (Pty) Ltd</option></select></div>
<div class="grid grid-cols-2 gap-2.5">
<div class="field-row"><label class="field-label" for="t2d-i">Line item</label><input id="t2d-i" class="input" placeholder="Hydraulic hose 1/2&quot;" /></div>
<div class="field-row"><label class="field-label" for="t2d-t">Total (R)</label><input id="t2d-t" class="input" placeholder="12,450.00" /></div>
</div>
<div class="flex gap-2 pt-1"><button type="button" class="btn-primary">Save draft</button><button type="button" class="btn-ghost">Cancel</button></div>
</form>
</div>
<div class="space-y-2">
<div class="grid grid-cols-3 gap-1.5">
<div class="swatch"><div class="chip-c brand-blue"></div><div class="lbl">Primary</div><div class="nm">#4C96D7</div></div>
<div class="swatch"><div class="chip-c brand-gold"></div><div class="lbl">Gold</div><div class="nm">#F2AF58</div></div>
<div class="swatch"><div class="chip-c brand-red"></div><div class="lbl">Red</div><div class="nm">#E94E49</div></div>
</div>
<div class="p-2 rounded-md border-tk border text-xs">
<div class="font-semibold text-soft uppercase tracking-widest text-[10px] mb-1">Status</div>
<div class="flex flex-wrap gap-1.5">
<span class="chip">New</span>
<span class="chip chip-gold">Approval pending</span>
<span class="chip chip-red">Problem</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<!-- ========== THEME 03 · EDITORIAL PREMIUM ========== -->
<div>
<div class="flex items-end justify-between flex-wrap gap-3 mb-4">
<div>
<div class="text-[11px] uppercase tracking-widest text-slate-400 font-semibold">Theme 03</div>
<h2 class="h-font text-2xl font-semibold text-white" style="font-style:italic">Editorial Premium</h2>
<p class="text-slate-400 text-sm mt-1">Warm cream, serif headings, refined gold accents. Reads like a financial quarterly. Premium without being loud.</p>
</div>
<div class="text-xs text-slate-400 font-mono">Playfair Display + Lato · radius 6px</div>
</div>
<div class="theme-pair">
<div class="theme-frame">
<span class="mode-badge">Warm</span>
<article class="theme t3 warm-mode">
<div class="card" style="border:none; box-shadow:none; background:transparent; padding:16px;">
<div class="flex items-center justify-between pb-3" style="border-bottom:1px solid var(--border)">
<div class="flex items-center gap-2">
<div class="wfdash-logo" style="border-radius:4px;">W</div>
<div class="h-font text-lg font-semibold">WFDASH</div>
</div>
<div class="flex items-center gap-2">
<span class="chip">14 open</span>
<button class="btn-ghost" style="padding:6px 9px">Export</button>
<button class="btn-gold" style="padding:6px 9px">+ New quote</button>
</div>
</div>
<div class="grid grid-cols-12 gap-4 mt-4">
<aside class="col-span-3 space-y-1" style="border-right:1px solid var(--border); padding-right:10px;">
<div class="nav-item active">Dashboard</div>
<div class="nav-item">Quotes</div>
<div class="nav-item">Orders</div>
<div class="nav-item">Customers</div>
<div class="nav-item">Suppliers</div>
<div class="nav-item">Map</div>
</aside>
<div class="col-span-9 space-y-3">
<div class="h-font text-xl" style="font-style:italic">November · Sales</div>
<div class="grid grid-cols-3 gap-2">
<div class="kpi"><div class="lbl">Open quotes</div><div class="val">14</div><div class="delta up">▲ 3</div></div>
<div class="kpi"><div class="lbl">Revenue (mo)</div><div class="val">R 248k</div><div class="delta up">▲ 12.4%</div></div>
<div class="kpi"><div class="lbl">Pending</div><div class="val">3</div><div class="delta down">2 aged</div></div>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="p-4" style="background:var(--surface-2); border:1px solid var(--border); border-radius:4px">
<div class="card-title mb-2" style="font-size:15px">New quote</div>
<form class="space-y-3">
<div class="field-row"><label class="field-label" for="t3w-c">Customer</label><select id="t3w-c" class="select"><option>CNL Mining Supplies (Pty) Ltd</option></select></div>
<div class="grid grid-cols-2 gap-3">
<div class="field-row"><label class="field-label" for="t3w-i">Line item</label><input id="t3w-i" class="input" placeholder="Hydraulic hose 1/2&quot;" /></div>
<div class="field-row"><label class="field-label" for="t3w-t">Total (R)</label><input id="t3w-t" class="input" placeholder="12,450.00" /></div>
</div>
<div class="flex gap-2 pt-1"><button type="button" class="btn-gold">Save draft</button><button type="button" class="btn-ghost">Cancel</button></div>
</form>
</div>
<div class="space-y-2">
<div class="grid grid-cols-3 gap-1.5">
<div class="swatch"><div class="chip-c" style="background:#1E5A99"></div><div class="lbl">Primary</div><div class="nm">#1E5A99</div></div>
<div class="swatch"><div class="chip-c" style="background:#B8842C"></div><div class="lbl">Gold</div><div class="nm">#B8842C</div></div>
<div class="swatch"><div class="chip-c" style="background:#C0392B"></div><div class="lbl">Red</div><div class="nm">#C0392B</div></div>
</div>
<div class="p-2" style="border-top:1px solid var(--gold)">
<div class="font-semibold text-soft uppercase tracking-widest text-[10px] mb-1">Status</div>
<div class="flex flex-wrap gap-1.5">
<span class="chip">New</span>
<span class="chip chip-gold">Approval pending</span>
<span class="chip chip-red">Problem</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="theme-frame">
<span class="mode-badge">Dark</span>
<article class="theme t3 t3-dark dark-mode">
<div class="card" style="border:none; box-shadow:none; background:transparent; padding:16px;">
<div class="flex items-center justify-between pb-3" style="border-bottom:1px solid var(--border)">
<div class="flex items-center gap-2">
<div class="wfdash-logo" style="border-radius:4px;">W</div>
<div class="h-font text-lg font-semibold">WFDASH</div>
</div>
<div class="flex items-center gap-2">
<span class="chip">14 open</span>
<button class="btn-ghost" style="padding:6px 9px">Export</button>
<button class="btn-gold" style="padding:6px 9px">+ New quote</button>
</div>
</div>
<div class="grid grid-cols-12 gap-4 mt-4">
<aside class="col-span-3 space-y-1" style="border-right:1px solid var(--border); padding-right:10px;">
<div class="nav-item active">Dashboard</div>
<div class="nav-item">Quotes</div>
<div class="nav-item">Orders</div>
<div class="nav-item">Customers</div>
<div class="nav-item">Suppliers</div>
<div class="nav-item">Map</div>
</aside>
<div class="col-span-9 space-y-3">
<div class="h-font text-xl" style="font-style:italic">November · Sales</div>
<div class="grid grid-cols-3 gap-2">
<div class="kpi"><div class="lbl">Open quotes</div><div class="val">14</div><div class="delta up">▲ 3</div></div>
<div class="kpi"><div class="lbl">Revenue (mo)</div><div class="val">R 248k</div><div class="delta up">▲ 12.4%</div></div>
<div class="kpi"><div class="lbl">Pending</div><div class="val">3</div><div class="delta down">2 aged</div></div>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="p-4" style="background:var(--surface-2); border:1px solid var(--border); border-radius:4px">
<div class="card-title mb-2" style="font-size:15px">New quote</div>
<form class="space-y-3">
<div class="field-row"><label class="field-label" for="t3d-c">Customer</label><select id="t3d-c" class="select"><option>CNL Mining Supplies (Pty) Ltd</option></select></div>
<div class="grid grid-cols-2 gap-3">
<div class="field-row"><label class="field-label" for="t3d-i">Line item</label><input id="t3d-i" class="input" placeholder="Hydraulic hose 1/2&quot;" /></div>
<div class="field-row"><label class="field-label" for="t3d-t">Total (R)</label><input id="t3d-t" class="input" placeholder="12,450.00" /></div>
</div>
<div class="flex gap-2 pt-1"><button type="button" class="btn-gold">Save draft</button><button type="button" class="btn-ghost">Cancel</button></div>
</form>
</div>
<div class="space-y-2">
<div class="grid grid-cols-3 gap-1.5">
<div class="swatch"><div class="chip-c" style="background:#7BB1E8"></div><div class="lbl">Primary</div><div class="nm">#7BB1E8</div></div>
<div class="swatch"><div class="chip-c brand-gold"></div><div class="lbl">Gold</div><div class="nm">#F2AF58</div></div>
<div class="swatch"><div class="chip-c" style="background:#F08580"></div><div class="lbl">Red</div><div class="nm">#F08580</div></div>
</div>
<div class="p-2" style="border-top:1px solid var(--gold)">
<div class="font-semibold text-soft uppercase tracking-widest text-[10px] mb-1">Status</div>
<div class="flex flex-wrap gap-1.5">
<span class="chip">New</span>
<span class="chip chip-gold">Approval pending</span>
<span class="chip chip-red">Problem</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<!-- ========== THEME 04 · BENTO MODULAR ========== -->
<div>
<div class="flex items-end justify-between flex-wrap gap-3 mb-4">
<div>
<div class="text-[11px] uppercase tracking-widest text-slate-400 font-semibold">Theme 04</div>
<h2 class="h-font text-2xl font-semibold text-white">Bento Modular</h2>
<p class="text-slate-400 text-sm mt-1">Tinted cards on a cool base, big rounded corners. Each section feels like its own tile — great for at-a-glance CRM dashboards.</p>
</div>
<div class="text-xs text-slate-400 font-mono">Inter · radius 18px</div>
</div>
<div class="theme-pair">
<div class="theme-frame">
<span class="mode-badge">Warm</span>
<article class="theme t4 warm-mode">
<div style="padding:14px;">
<div class="grid grid-cols-12 gap-3">
<div class="col-span-12 flex items-center justify-between px-4 py-3" style="background:var(--surface); border-radius:var(--radius); border:1px solid var(--border)">
<div class="flex items-center gap-2">
<div class="wfdash-logo">W</div>
<div class="h-font font-semibold">WFDASH</div>
</div>
<div class="flex items-center gap-2">
<span class="chip">14 open</span>
<button class="btn-primary" style="padding:7px 10px">+ New quote</button>
</div>
</div>
<div class="col-span-4 p-3" style="background:var(--primary-soft); border-radius:var(--radius)">
<div class="text-[10px] font-bold uppercase tracking-widest" style="color:var(--primary)">Open quotes</div>
<div class="h-font text-3xl font-bold text-tk mt-1">14</div>
<div class="text-[11px] font-semibold mt-1" style="color:#16A34A">▲ 3 new</div>
</div>
<div class="col-span-4 p-3" style="background:var(--gold); border-radius:var(--radius)">
<div class="text-[10px] font-bold uppercase tracking-widest" style="color:var(--gold-fg)">Revenue (mo)</div>
<div class="h-font text-3xl font-bold mt-1" style="color:var(--gold-fg)">R 248k</div>
<div class="text-[11px] font-semibold mt-1" style="color:var(--gold-fg)">▲ 12.4%</div>
</div>
<div class="col-span-4 p-3" style="background:var(--red-soft); border-radius:var(--radius)">
<div class="text-[10px] font-bold uppercase tracking-widest" style="color:var(--red)">Problem quotes</div>
<div class="h-font text-3xl font-bold text-tk mt-1">2</div>
<div class="text-[11px] font-semibold mt-1" style="color:var(--red)">aged &gt; 7d</div>
</div>
<div class="col-span-7 p-4" style="background:var(--surface); border-radius:var(--radius); border:1px solid var(--border)">
<div class="card-title mb-3">New quote</div>
<form class="space-y-3">
<div class="field-row"><label class="field-label" for="t4w-c">Customer</label><select id="t4w-c" class="select"><option>CNL Mining Supplies (Pty) Ltd</option></select></div>
<div class="grid grid-cols-2 gap-3">
<div class="field-row"><label class="field-label" for="t4w-i">Line item</label><input id="t4w-i" class="input" placeholder="Hydraulic hose 1/2&quot;" /></div>
<div class="field-row"><label class="field-label" for="t4w-t">Total (R)</label><input id="t4w-t" class="input" placeholder="12,450.00" /></div>
</div>
<div class="flex gap-2 pt-1"><button type="button" class="btn-primary">Save draft</button><button type="button" class="btn-ghost">Cancel</button></div>
</form>
</div>
<div class="col-span-5 p-4" style="background:var(--surface-2); border-radius:var(--radius); border:1px solid var(--border)">
<div class="card-title mb-2">Tokens</div>
<div class="grid grid-cols-3 gap-1.5">
<div class="swatch"><div class="chip-c brand-blue"></div><div class="lbl">Primary</div><div class="nm">#4C96D7</div></div>
<div class="swatch"><div class="chip-c brand-gold"></div><div class="lbl">Gold</div><div class="nm">#F2AF58</div></div>
<div class="swatch"><div class="chip-c brand-red"></div><div class="lbl">Red</div><div class="nm">#E94E49</div></div>
</div>
<div class="mt-3 flex flex-wrap gap-1.5">
<span class="chip">New</span>
<span class="chip chip-gold">Approval pending</span>
<span class="chip chip-red">Problem</span>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="theme-frame">
<span class="mode-badge">Dark</span>
<article class="theme t4 t4-dark dark-mode">
<div style="padding:14px;">
<div class="grid grid-cols-12 gap-3">
<div class="col-span-12 flex items-center justify-between px-4 py-3" style="background:var(--surface); border-radius:var(--radius); border:1px solid var(--border)">
<div class="flex items-center gap-2">
<div class="wfdash-logo">W</div>
<div class="h-font font-semibold">WFDASH</div>
</div>
<div class="flex items-center gap-2">
<span class="chip">14 open</span>
<button class="btn-primary" style="padding:7px 10px">+ New quote</button>
</div>
</div>
<div class="col-span-4 p-3" style="background:var(--primary-soft); border-radius:var(--radius)">
<div class="text-[10px] font-bold uppercase tracking-widest" style="color:var(--primary)">Open quotes</div>
<div class="h-font text-3xl font-bold text-tk mt-1">14</div>
<div class="text-[11px] font-semibold mt-1" style="color:#7EE3A0">▲ 3 new</div>
</div>
<div class="col-span-4 p-3" style="background:var(--gold); border-radius:var(--radius)">
<div class="text-[10px] font-bold uppercase tracking-widest" style="color:var(--gold-fg)">Revenue (mo)</div>
<div class="h-font text-3xl font-bold mt-1" style="color:var(--gold-fg)">R 248k</div>
<div class="text-[11px] font-semibold mt-1" style="color:var(--gold-fg)">▲ 12.4%</div>
</div>
<div class="col-span-4 p-3" style="background:var(--red-soft); border-radius:var(--radius)">
<div class="text-[10px] font-bold uppercase tracking-widest" style="color:var(--red)">Problem quotes</div>
<div class="h-font text-3xl font-bold text-tk mt-1">2</div>
<div class="text-[11px] font-semibold mt-1" style="color:var(--red)">aged &gt; 7d</div>
</div>
<div class="col-span-7 p-4" style="background:var(--surface); border-radius:var(--radius); border:1px solid var(--border)">
<div class="card-title mb-3">New quote</div>
<form class="space-y-3">
<div class="field-row"><label class="field-label" for="t4d-c">Customer</label><select id="t4d-c" class="select"><option>CNL Mining Supplies (Pty) Ltd</option></select></div>
<div class="grid grid-cols-2 gap-3">
<div class="field-row"><label class="field-label" for="t4d-i">Line item</label><input id="t4d-i" class="input" placeholder="Hydraulic hose 1/2&quot;" /></div>
<div class="field-row"><label class="field-label" for="t4d-t">Total (R)</label><input id="t4d-t" class="input" placeholder="12,450.00" /></div>
</div>
<div class="flex gap-2 pt-1"><button type="button" class="btn-primary">Save draft</button><button type="button" class="btn-ghost">Cancel</button></div>
</form>
</div>
<div class="col-span-5 p-4" style="background:var(--surface-2); border-radius:var(--radius); border:1px solid var(--border)">
<div class="card-title mb-2">Tokens</div>
<div class="grid grid-cols-3 gap-1.5">
<div class="swatch"><div class="chip-c brand-blue"></div><div class="lbl">Primary</div><div class="nm">#4C96D7</div></div>
<div class="swatch"><div class="chip-c brand-gold"></div><div class="lbl">Gold</div><div class="nm">#F2AF58</div></div>
<div class="swatch"><div class="chip-c brand-red"></div><div class="lbl">Red</div><div class="nm">#E94E49</div></div>
</div>
<div class="mt-3 flex flex-wrap gap-1.5">
<span class="chip">New</span>
<span class="chip chip-gold">Approval pending</span>
<span class="chip chip-red">Problem</span>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<!-- ========== THEME 05 · GLASS AURORA ========== -->
<div>
<div class="flex items-end justify-between flex-wrap gap-3 mb-4">
<div>
<div class="text-[11px] uppercase tracking-widest text-slate-400 font-semibold">Theme 05</div>
<h2 class="h-font text-2xl font-semibold text-white">Glass Aurora</h2>
<p class="text-slate-400 text-sm mt-1">Frosted cards on a gradient mesh. Modern, premium. Warm variant shifts to a cream-to-gold mesh.</p>
</div>
<div class="text-xs text-slate-400 font-mono">DM Sans · radius 16px · backdrop-blur</div>
</div>
<div class="theme-pair">
<div class="theme-frame">
<span class="mode-badge">Warm</span>
<article class="theme t5 t5-warm warm-mode">
<div class="glass" style="margin:14px; padding:16px;">
<div class="flex items-center justify-between pb-3" style="border-bottom:1px solid var(--border)">
<div class="flex items-center gap-2">
<div class="wfdash-logo">W</div>
<div class="h-font font-semibold">WFDASH</div>
</div>
<div class="flex items-center gap-2">
<span class="chip">14 open</span>
<button class="btn-primary" style="padding:6px 10px">+ New quote</button>
</div>
</div>
<div class="grid grid-cols-3 gap-3 mt-4">
<div class="glass p-3"><div class="text-[10px] uppercase tracking-widest font-bold" style="color:var(--text-soft)">Open quotes</div><div class="h-font text-2xl font-bold mt-1">14</div><div class="text-[11px] mt-1" style="color:#16A34A">▲ 3</div></div>
<div class="glass p-3"><div class="text-[10px] uppercase tracking-widest font-bold" style="color:var(--text-soft)">Revenue (mo)</div><div class="h-font text-2xl font-bold mt-1">R 248k</div><div class="text-[11px] mt-1" style="color:var(--gold)">▲ 12.4%</div></div>
<div class="glass p-3"><div class="text-[10px] uppercase tracking-widest font-bold" style="color:var(--text-soft)">Pending</div><div class="h-font text-2xl font-bold mt-1">3</div><div class="text-[11px] mt-1" style="color:var(--red)">2 aged</div></div>
</div>
<div class="grid grid-cols-2 gap-3 mt-4">
<div class="glass p-4">
<div class="card-title mb-2">New quote</div>
<form class="space-y-2.5">
<div class="field-row"><label class="field-label" for="t5w-c">Customer</label><select id="t5w-c" class="select"><option>CNL Mining Supplies (Pty) Ltd</option></select></div>
<div class="grid grid-cols-2 gap-2.5">
<div class="field-row"><label class="field-label" for="t5w-i">Line item</label><input id="t5w-i" class="input" placeholder="Hydraulic hose 1/2&quot;" /></div>
<div class="field-row"><label class="field-label" for="t5w-t">Total (R)</label><input id="t5w-t" class="input" placeholder="12,450.00" /></div>
</div>
<div class="flex gap-2 pt-1"><button type="button" class="btn-primary">Save draft</button><button type="button" class="btn-ghost">Cancel</button></div>
</form>
</div>
<div class="space-y-2">
<div class="glass p-3 grid grid-cols-3 gap-1.5">
<div class="swatch"><div class="chip-c" style="background:#1E5A99"></div><div class="lbl">Primary</div><div class="nm">#1E5A99</div></div>
<div class="swatch"><div class="chip-c" style="background:#B8842C"></div><div class="lbl">Gold</div><div class="nm">#B8842C</div></div>
<div class="swatch"><div class="chip-c" style="background:#C0392B"></div><div class="lbl">Red</div><div class="nm">#C0392B</div></div>
</div>
<div class="glass p-3 flex flex-wrap gap-1.5">
<span class="chip">New</span>
<span class="chip chip-gold">Approval pending</span>
<span class="chip chip-red">Problem</span>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="theme-frame">
<span class="mode-badge">Dark</span>
<article class="theme t5 dark-mode">
<div class="glass" style="margin:14px; padding:16px;">
<div class="flex items-center justify-between pb-3" style="border-bottom:1px solid var(--border)">
<div class="flex items-center gap-2">
<div class="wfdash-logo">W</div>
<div class="h-font font-semibold">WFDASH</div>
</div>
<div class="flex items-center gap-2">
<span class="chip">14 open</span>
<button class="btn-primary" style="padding:6px 10px">+ New quote</button>
</div>
</div>
<div class="grid grid-cols-3 gap-3 mt-4">
<div class="glass p-3"><div class="text-[10px] uppercase tracking-widest font-bold" style="color:var(--text-soft)">Open quotes</div><div class="h-font text-2xl font-bold mt-1">14</div><div class="text-[11px] mt-1" style="color:#7EE3A0">▲ 3</div></div>
<div class="glass p-3"><div class="text-[10px] uppercase tracking-widest font-bold" style="color:var(--text-soft)">Revenue (mo)</div><div class="h-font text-2xl font-bold mt-1">R 248k</div><div class="text-[11px] mt-1" style="color:var(--gold)">▲ 12.4%</div></div>
<div class="glass p-3"><div class="text-[10px] uppercase tracking-widest font-bold" style="color:var(--text-soft)">Pending</div><div class="h-font text-2xl font-bold mt-1">3</div><div class="text-[11px] mt-1" style="color:var(--red)">2 aged</div></div>
</div>
<div class="grid grid-cols-2 gap-3 mt-4">
<div class="glass p-4">
<div class="card-title mb-2">New quote</div>
<form class="space-y-2.5">
<div class="field-row"><label class="field-label" for="t5d-c">Customer</label><select id="t5d-c" class="select"><option>CNL Mining Supplies (Pty) Ltd</option></select></div>
<div class="grid grid-cols-2 gap-2.5">
<div class="field-row"><label class="field-label" for="t5d-i">Line item</label><input id="t5d-i" class="input" placeholder="Hydraulic hose 1/2&quot;" /></div>
<div class="field-row"><label class="field-label" for="t5d-t">Total (R)</label><input id="t5d-t" class="input" placeholder="12,450.00" /></div>
</div>
<div class="flex gap-2 pt-1"><button type="button" class="btn-primary">Save draft</button><button type="button" class="btn-ghost">Cancel</button></div>
</form>
</div>
<div class="space-y-2">
<div class="glass p-3 grid grid-cols-3 gap-1.5">
<div class="swatch"><div class="chip-c" style="background:#7DBDEF"></div><div class="lbl">Primary</div><div class="nm">#7DBDEF</div></div>
<div class="swatch"><div class="chip-c" style="background:#F8C77A"></div><div class="lbl">Gold</div><div class="nm">#F8C77A</div></div>
<div class="swatch"><div class="chip-c" style="background:#F08580"></div><div class="lbl">Red</div><div class="nm">#F08580</div></div>
</div>
<div class="glass p-3 flex flex-wrap gap-1.5">
<span class="chip">New</span>
<span class="chip chip-gold">Approval pending</span>
<span class="chip chip-red">Problem</span>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<!-- ========== THEME 06 · TACTILE SOFT ========== -->
<div>
<div class="flex items-end justify-between flex-wrap gap-3 mb-4">
<div>
<div class="text-[11px] uppercase tracking-widest text-slate-400 font-semibold">Theme 06</div>
<h2 class="h-font text-2xl font-semibold text-white">Tactile Soft</h2>
<p class="text-slate-400 text-sm mt-1">Neumorphic extrusions in soft tints of your brand colors. Calm, friendly, finger-friendly on touch screens.</p>
</div>
<div class="text-xs text-slate-400 font-mono">Outfit + Nunito · radius 18px · neumorphic</div>
</div>
<div class="theme-pair">
<div class="theme-frame">
<span class="mode-badge">Warm</span>
<article class="theme t6 warm-mode">
<div style="padding:14px;">
<div class="flex items-center justify-between pb-3">
<div class="flex items-center gap-2">
<div class="wfdash-logo">W</div>
<div class="h-font font-semibold">WFDASH</div>
</div>
<button class="btn-primary">+ New quote</button>
</div>
<div class="grid grid-cols-3 gap-3 mt-3">
<div class="p-3 rounded-2xl" style="background:var(--surface); box-shadow:var(--shadow)">
<div class="text-[10px] font-bold uppercase tracking-widest text-soft">Open quotes</div>
<div class="h-font text-2xl font-bold mt-1">14</div>
<div class="text-[11px] font-semibold mt-1" style="color:#16A34A">▲ 3</div>
</div>
<div class="p-3 rounded-2xl" style="background:var(--surface); box-shadow:var(--shadow)">
<div class="text-[10px] font-bold uppercase tracking-widest text-soft">Revenue (mo)</div>
<div class="h-font text-2xl font-bold mt-1">R 248k</div>
<div class="text-[11px] font-semibold mt-1" style="color:var(--red)">▲ 12.4%</div>
</div>
<div class="p-3 rounded-2xl" style="background:var(--surface); box-shadow:var(--shadow)">
<div class="text-[10px] font-bold uppercase tracking-widest text-soft">Pending</div>
<div class="h-font text-2xl font-bold mt-1">3</div>
<div class="text-[11px] font-semibold mt-1" style="color:#16A34A">2 aged</div>
</div>
</div>
<div class="grid grid-cols-2 gap-3 mt-4">
<div class="p-4 rounded-2xl" style="background:var(--surface); box-shadow:var(--shadow)">
<div class="card-title mb-2">New quote</div>
<form class="space-y-3">
<div class="field-row"><label class="field-label" for="t6w-c">Customer</label><select id="t6w-c" class="select"><option>CNL Mining Supplies (Pty) Ltd</option></select></div>
<div class="grid grid-cols-2 gap-3">
<div class="field-row"><label class="field-label" for="t6w-i">Line item</label><input id="t6w-i" class="input" placeholder="Hydraulic hose 1/2&quot;" /></div>
<div class="field-row"><label class="field-label" for="t6w-t">Total (R)</label><input id="t6w-t" class="input" placeholder="12,450.00" /></div>
</div>
<div class="flex gap-2 pt-1"><button type="button" class="btn-primary">Save draft</button><button type="button" class="btn-ghost">Cancel</button></div>
</form>
</div>
<div class="space-y-2">
<div class="p-3 rounded-2xl" style="background:var(--surface); box-shadow:var(--shadow)">
<div class="grid grid-cols-3 gap-1.5">
<div class="swatch"><div class="chip-c" style="background:#6BA6DC"></div><div class="lbl">Primary</div><div class="nm">#6BA6DC</div></div>
<div class="swatch"><div class="chip-c" style="background:#EBC384"></div><div class="lbl">Gold</div><div class="nm">#EBC384</div></div>
<div class="swatch"><div class="chip-c" style="background:#E59C97"></div><div class="lbl">Red</div><div class="nm">#E59C97</div></div>
</div>
</div>
<div class="p-3 rounded-2xl flex flex-wrap gap-1.5" style="background:var(--surface); box-shadow:var(--shadow)">
<span class="chip">New</span>
<span class="chip chip-gold">Approval pending</span>
<span class="chip chip-red">Problem</span>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="theme-frame">
<span class="mode-badge">Dark</span>
<article class="theme t6 t6-dark dark-mode">
<div style="padding:14px;">
<div class="flex items-center justify-between pb-3">
<div class="flex items-center gap-2">
<div class="wfdash-logo">W</div>
<div class="h-font font-semibold">WFDASH</div>
</div>
<button class="btn-primary">+ New quote</button>
</div>
<div class="grid grid-cols-3 gap-3 mt-3">
<div class="p-3 rounded-2xl" style="background:var(--surface); box-shadow:var(--shadow)">
<div class="text-[10px] font-bold uppercase tracking-widest text-soft">Open quotes</div>
<div class="h-font text-2xl font-bold mt-1">14</div>
<div class="text-[11px] font-semibold mt-1" style="color:#7EE3A0">▲ 3</div>
</div>
<div class="p-3 rounded-2xl" style="background:var(--surface); box-shadow:var(--shadow)">
<div class="text-[10px] font-bold uppercase tracking-widest text-soft">Revenue (mo)</div>
<div class="h-font text-2xl font-bold mt-1">R 248k</div>
<div class="text-[11px] font-semibold mt-1" style="color:var(--red)">▲ 12.4%</div>
</div>
<div class="p-3 rounded-2xl" style="background:var(--surface); box-shadow:var(--shadow)">
<div class="text-[10px] font-bold uppercase tracking-widest text-soft">Pending</div>
<div class="h-font text-2xl font-bold mt-1">3</div>
<div class="text-[11px] font-semibold mt-1" style="color:#F08580">2 aged</div>
</div>
</div>
<div class="grid grid-cols-2 gap-3 mt-4">
<div class="p-4 rounded-2xl" style="background:var(--surface); box-shadow:var(--shadow)">
<div class="card-title mb-2">New quote</div>
<form class="space-y-3">
<div class="field-row"><label class="field-label" for="t6d-c">Customer</label><select id="t6d-c" class="select"><option>CNL Mining Supplies (Pty) Ltd</option></select></div>
<div class="grid grid-cols-2 gap-3">
<div class="field-row"><label class="field-label" for="t6d-i">Line item</label><input id="t6d-i" class="input" placeholder="Hydraulic hose 1/2&quot;" /></div>
<div class="field-row"><label class="field-label" for="t6d-t">Total (R)</label><input id="t6d-t" class="input" placeholder="12,450.00" /></div>
</div>
<div class="flex gap-2 pt-1"><button type="button" class="btn-primary">Save draft</button><button type="button" class="btn-ghost">Cancel</button></div>
</form>
</div>
<div class="space-y-2">
<div class="p-3 rounded-2xl" style="background:var(--surface); box-shadow:var(--shadow)">
<div class="grid grid-cols-3 gap-1.5">
<div class="swatch"><div class="chip-c" style="background:#7BB1E8"></div><div class="lbl">Primary</div><div class="nm">#7BB1E8</div></div>
<div class="swatch"><div class="chip-c brand-gold"></div><div class="lbl">Gold</div><div class="nm">#F2AF58</div></div>
<div class="swatch"><div class="chip-c" style="background:#F08580"></div><div class="lbl">Red</div><div class="nm">#F08580</div></div>
</div>
</div>
<div class="p-3 rounded-2xl flex flex-wrap gap-1.5" style="background:var(--surface); box-shadow:var(--shadow)">
<span class="chip">New</span>
<span class="chip chip-gold">Approval pending</span>
<span class="chip chip-red">Problem</span>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<!-- ========== THEME 07 · FIELD OPS ========== -->
<div>
<div class="flex items-end justify-between flex-wrap gap-3 mb-4">
<div>
<div class="text-[11px] uppercase tracking-widest text-slate-400 font-semibold">Theme 07</div>
<h2 class="h-font text-2xl font-semibold text-white">Field Ops</h2>
<p class="text-slate-400 text-sm mt-1">Dense, functional, glove-friendly. Dark navy sidebar with gold CTAs. Built for warehouse / depot / yard use on phones or ruggedized tablets.</p>
</div>
<div class="text-xs text-slate-400 font-mono">Inter · radius 8px · dense grid</div>
</div>
<div class="theme-pair">
<div class="theme-frame">
<span class="mode-badge">Warm</span>
<article class="theme t7 warm-mode">
<div style="padding:14px;">
<div class="flex gap-0 rounded-md overflow-hidden" style="border:1px solid var(--border); background:var(--surface)">
<aside class="w-[140px] p-3 space-y-1 text-sm" style="background:var(--primary); color:#fff">
<div class="flex items-center gap-2 pb-3 mb-2" style="border-bottom:1px solid rgba(255,255,255,.12)">
<div class="wfdash-logo" style="background:var(--gold); color:var(--gold-fg)">W</div>
<div class="h-font font-semibold text-white">WFDASH</div>
</div>
<div class="nav-item active" style="color:#fff; background:rgba(255,255,255,.12)">Dashboard</div>
<div class="nav-item" style="color:rgba(255,255,255,.75)">Quotes</div>
<div class="nav-item" style="color:rgba(255,255,255,.75)">Orders</div>
<div class="nav-item" style="color:rgba(255,255,255,.75)">Customers</div>
<div class="nav-item" style="color:rgba(255,255,255,.75)">Suppliers</div>
<div class="nav-item" style="color:rgba(255,255,255,.75)">Map</div>
<div class="mt-3 px-1 text-[9px] uppercase tracking-widest" style="color:rgba(255,255,255,.5)">Live · 14 quotes</div>
</aside>
<div class="flex-1 p-3 space-y-3">
<div class="flex items-center justify-between">
<div>
<div class="text-[10px] uppercase tracking-widest font-bold text-soft">Today</div>
<div class="h-font text-lg font-bold">Nov 26</div>
</div>
<div class="flex items-center gap-2">
<span class="chip">14 synced</span>
<button class="btn-gold">+ New quote</button>
</div>
</div>
<div class="grid grid-cols-4 gap-2">
<div class="kpi"><div class="lbl">Open</div><div class="val">14</div><div class="delta up">▲ 3</div></div>
<div class="kpi"><div class="lbl">Revenue</div><div class="val">R 248k</div><div class="delta up">▲ 12%</div></div>
<div class="kpi"><div class="lbl">Pending</div><div class="val">3</div><div class="delta down">2 aged</div></div>
<div class="kpi"><div class="lbl">Flagged</div><div class="val" style="color:var(--red)">2</div><div class="delta down">problem</div></div>
</div>
<div class="grid grid-cols-2 gap-2">
<div class="card" style="padding:12px">
<div class="card-title mb-1 text-xs">New quote</div>
<form class="space-y-2">
<div class="field-row"><label class="field-label" for="t7w-c">Customer</label><select id="t7w-c" class="select"><option>CNL Mining</option></select></div>
<div class="form-grid">
<div class="field-row"><label class="field-label" for="t7w-i">Item</label><input id="t7w-i" class="input" placeholder="Hose 1/2&quot;" /></div>
<div class="field-row"><label class="field-label" for="t7w-t">Total</label><input id="t7w-t" class="input" placeholder="12,450" /></div>
</div>
<div class="flex gap-1.5"><button type="button" class="btn-gold">Save</button><button type="button" class="btn-ghost">Cancel</button></div>
</form>
</div>
<div class="card" style="padding:12px">
<div class="card-title mb-1 text-xs">Recent</div>
<div class="text-[11px] space-y-1.5">
<div class="flex items-center justify-between"><span class="font-medium">CNL · Q-1042</span><span class="chip">New</span></div>
<div class="flex items-center justify-between"><span class="font-medium">Isherwood · Q-1041</span><span class="chip chip-gold">Approval</span></div>
<div class="flex items-center justify-between"><span class="font-medium">Acme · Q-1037</span><span class="chip chip-red">Problem</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="theme-frame">
<span class="mode-badge">Dark</span>
<article class="theme t7 t7-dark dark-mode">
<div style="padding:14px;">
<div class="flex gap-0 rounded-md overflow-hidden" style="border:1px solid var(--border); background:var(--surface)">
<aside class="w-[140px] p-3 space-y-1 text-sm" style="background:var(--primary); color:#fff">
<div class="flex items-center gap-2 pb-3 mb-2" style="border-bottom:1px solid rgba(255,255,255,.12)">
<div class="wfdash-logo" style="background:var(--gold); color:var(--gold-fg)">W</div>
<div class="h-font font-semibold text-white">WFDASH</div>
</div>
<div class="nav-item active" style="color:#fff; background:rgba(255,255,255,.12)">Dashboard</div>
<div class="nav-item" style="color:rgba(255,255,255,.75)">Quotes</div>
<div class="nav-item" style="color:rgba(255,255,255,.75)">Orders</div>
<div class="nav-item" style="color:rgba(255,255,255,.75)">Customers</div>
<div class="nav-item" style="color:rgba(255,255,255,.75)">Suppliers</div>
<div class="nav-item" style="color:rgba(255,255,255,.75)">Map</div>
<div class="mt-3 px-1 text-[9px] uppercase tracking-widest" style="color:rgba(255,255,255,.5)">Live · 14 quotes</div>
</aside>
<div class="flex-1 p-3 space-y-3">
<div class="flex items-center justify-between">
<div>
<div class="text-[10px] uppercase tracking-widest font-bold text-soft">Today</div>
<div class="h-font text-lg font-bold">Nov 26</div>
</div>
<div class="flex items-center gap-2">
<span class="chip">14 synced</span>
<button class="btn-gold">+ New quote</button>
</div>
</div>
<div class="grid grid-cols-4 gap-2">
<div class="kpi"><div class="lbl">Open</div><div class="val">14</div><div class="delta up">▲ 3</div></div>
<div class="kpi"><div class="lbl">Revenue</div><div class="val">R 248k</div><div class="delta up">▲ 12%</div></div>
<div class="kpi"><div class="lbl">Pending</div><div class="val">3</div><div class="delta down">2 aged</div></div>
<div class="kpi"><div class="lbl">Flagged</div><div class="val" style="color:var(--red)">2</div><div class="delta down">problem</div></div>
</div>
<div class="grid grid-cols-2 gap-2">
<div class="card" style="padding:12px">
<div class="card-title mb-1 text-xs">New quote</div>
<form class="space-y-2">
<div class="field-row"><label class="field-label" for="t7d-c">Customer</label><select id="t7d-c" class="select"><option>CNL Mining</option></select></div>
<div class="form-grid">
<div class="field-row"><label class="field-label" for="t7d-i">Item</label><input id="t7d-i" class="input" placeholder="Hose 1/2&quot;" /></div>
<div class="field-row"><label class="field-label" for="t7d-t">Total</label><input id="t7d-t" class="input" placeholder="12,450" /></div>
</div>
<div class="flex gap-1.5"><button type="button" class="btn-gold">Save</button><button type="button" class="btn-ghost">Cancel</button></div>
</form>
</div>
<div class="card" style="padding:12px">
<div class="card-title mb-1 text-xs">Recent</div>
<div class="text-[11px] space-y-1.5">
<div class="flex items-center justify-between"><span class="font-medium">CNL · Q-1042</span><span class="chip">New</span></div>
<div class="flex items-center justify-between"><span class="font-medium">Isherwood · Q-1041</span><span class="chip chip-gold">Approval</span></div>
<div class="flex items-center justify-between"><span class="font-medium">Acme · Q-1037</span><span class="chip chip-red">Problem</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- selection guide -->
<section class="mt-12 p-6 rounded-2xl bg-slate-900/60 border border-slate-800">
<div class="text-xs uppercase tracking-widest text-slate-400 font-semibold">Which pair fits?</div>
<h2 class="h-font text-2xl font-semibold text-white mt-1">Quick guide</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-3 mt-4 text-sm">
<div class="p-3 rounded-lg bg-slate-800/60 border border-slate-700">
<div class="text-white font-semibold">Calm + scalable</div>
<div class="text-slate-400 mt-1">Pick <b class="text-white">#1 Crisp Minimal</b> — easiest to ship, easiest to maintain, plays well with the existing shadcn/ui components.</div>
</div>
<div class="p-3 rounded-lg bg-slate-800/60 border border-slate-700">
<div class="text-white font-semibold">Night-shift / late work</div>
<div class="text-slate-400 mt-1">Pick <b class="text-white">#2 Midnight Sapphire</b> — dark by default, brand blue glows, low eye-strain.</div>
</div>
<div class="p-3 rounded-lg bg-slate-800/60 border border-slate-700">
<div class="text-white font-semibold">Premium / executive</div>
<div class="text-slate-400 mt-1">Pick <b class="text-white">#3 Editorial Premium</b> — serif headings, warm cream, refined.</div>
</div>
<div class="p-3 rounded-lg bg-slate-800/60 border border-slate-700">
<div class="text-white font-semibold">Tablet in a yard / depot</div>
<div class="text-slate-400 mt-1">Pick <b class="text-white">#7 Field Ops</b> — dense, big touch targets, gold CTAs pop.</div>
</div>
</div>
<p class="text-slate-300 mt-5 text-sm">Tell me the number — or "give me a hybrid of 1+7" or any direction — and I'll lock it in as your Tailwind palette extension + <code class="text-slate-400">next/font</code> setup + form spacing rules.</p>
</section>
</main>
</body>
</html>