WFDASH-WEBAPP/docs/theme-preview/themes.html

1269 lines
82 KiB
HTML
Raw Normal View History

<!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>