# MNW Frontend
Server-rendered HTML via Askama templates, HTMX for interactivity, hand-authored CSS. No build step, no JS framework.
## Design System
Typography and brand colors come from the cross-project brand system (three-tier type system, base palette, diamond mark rule). The server extends the base palette with CSS custom properties:
### Extended Colors (CSS Variables)
| Variable | Value | Usage |
|----------|-------|-------|
| `--background` | `#ede8e1` | Page background (brand beige) |
| `--detail` | `#3d3530` | Body text (brand charcoal-brown) |
| `--highlight` | `#6c5ce7` | Diamond mark only (brand violet) |
| `--light-background` | `#f4f0eb` | Cards, elevated surfaces |
| `--surface-muted` | `#ddd7c5` | Secondary buttons, status boxes |
| `--border` | `#d0cbb8` | Borders, dividers |
| `--text-muted` | `#8a8480` | Tertiary text |
| `--success` | `#2d5016` | Positive states |
| `--warning` | `#8b7355` | Caution states |
| `--danger` | `#d62828` | Destructive actions, errors |
| `--focus-ring` | `#6c5ce7` | Keyboard focus indicator |
### Rules
- **No pure white/black.** Use `--background` and `--detail` instead.
- **Accent color is for the dot only.** Do not use `--highlight` for buttons, links, or borders.
## Template Structure
```
templates/
base.html Base layout (head, nav, footer, HTMX/CSRF)
index.html Landing page
pages/ Full page templates (extend base.html)
login.html, join.html, discover.html, item.html, project.html, ...
dashboards/ Dashboard pages (extend base.html, tabbed)
dashboard-user.html User dashboard (Account, Payments, Projects, Analytics, Creator, SyncKit)
dashboard-project.html Project dashboard (Overview, Content, Analytics, Blog, Promotions, Subscriptions, Settings)
dashboard-item.html Item dashboard (versions, license keys, promo codes)
admin-*.html Admin panels (waitlist, users, uploads, appeals)
partials/ HTMX fragments (no base.html, returned directly)
tabs/ Dashboard tab content (loaded via hx-get)
user_details.html Account settings, links, SSH keys, sessions
user_payments.html Stripe status, transactions, contacts
user_projects.html Project list
user_analytics.html Aggregated analytics
user_creator.html Waitlist/invite system
user_synckit.html SyncKit app management
project_overview.html Project stats
project_content.html Item list with bulk actions
project_blog.html Blog post management
project_analytics.html Per-project analytics
project_settings.html Project config, git repos
project_subscriptions.html Subscription tiers
project_promotions.html Promo codes
admin_*.html Admin table rows (HTMX swap targets)
alert.html, form_status.html, save_status.html Status feedback fragments
```
### Conventions
- Full pages extend `base.html` and define `{% block content %}`.
- Tab content is loaded via HTMX (`hx-get="/dashboard/tabs/details"` etc).
- Partials are standalone HTML fragments — no `{% extends %}`.
- Template structs live in `src/templates/dashboard.rs` (pages) and `src/templates/partials.rs` (fragments).
## CSS Architecture
Single file: `static/style.css` (~3100 lines). No preprocessor, no minification pipeline.
### Section Order
1. **Fonts** (`@font-face` declarations)
2. **Variables** (`:root` custom properties)
3. **Reset + Base** (global element styles)
4. **Layout** (`.padded-page`, `.centered-page`, `.container`)
5. **Buttons** (`.btn-primary`, `.btn-secondary`, `.btn-danger`, `.small` modifier)
6. **Forms** (`.form-group`, `.form-section`, `.checkbox-group`)
7. **Tables** (`.data-table`, `.compact-table`)
8. **Utilities** (`.text-sm`, `.muted`, `.scroll-x`, etc.)
9. **Badges** (`.badge`, `.badge-success`, `.badge-danger`)
10. **Cards** (`.card`, `.stat-card`, `.project-card`)
11. **Navigation** (`.tabs`, `.tab`, header/footer)
12. **Components** (modals, toasts, progress bars, onboarding)
13. **Page-specific** (discover, pricing, git browser, docs, splash)
14. **Responsive** (`@media` queries at the end)
### Utility Classes
| Class | Styles | Use for |
|-------|--------|---------|
| `.text-sm` | `font-size: 0.85rem` | Secondary text (emails, dates) |
| `.text-xs` | `font-size: 0.8rem` | Tertiary text (IDs, annotations) |
| `.muted` | `opacity: 0.7` | De-emphasized content |
| `.dimmed` | `opacity: 0.6` | Further de-emphasized |
| `.meta` | `font-size: 0.85rem; opacity: 0.7` | Labels, captions |
| `.nowrap` | `white-space: nowrap` | Dates, status badges |
| `.scroll-x` | `overflow-x: auto; -webkit-overflow-scrolling: touch` | Horizontal scroll wrappers |
| `.text-center` | `text-align: center` | Centered blocks |
| `.small` | `padding: 0.25rem 0.6rem; font-size: 0.8rem` | Compact buttons in tables |
| `.empty-state` | `text-align: center; padding: 2rem; opacity: 0.6` | Empty list messages |
### Table Classes
**`.data-table`** — Full-featured tables with alternating row backgrounds, hover states, and sortable headers. Used for transactions, blog posts, content items.
**`.compact-table`** — Lighter admin/dashboard tables. Provides `width: 100%`, `border-collapse`, cell padding, header styling (`0.85rem`, muted), and row borders. Used for admin user/waitlist/upload tables, invite codes, wave history.
### Button Variants
Buttons use the `.btn-*` family. See `design-system.md` § Buttons for the current class names, colors, and modifiers. The bare `.primary` / `.secondary` / `.danger` classes were retired; use `.btn-primary`, `.btn-secondary`, `.btn-danger` instead.
## HTMX Patterns
### Tab Navigation
Dashboard pages use HTMX tabs. Each tab button triggers `hx-get` to load content into `#tab-content`:
```html
```
Tab content is a partial template — the handler returns raw HTML, not a full page.
### Admin Table Updates
Admin actions (suspend, approve, trust) return the full table partial to replace the table body:
```html
```
### Form Feedback
Form submissions target a status element for inline feedback:
```html