Color Palette

Core brand and semantic colors used via CSS custom properties (--pa-* tokens).

--pa-primary
#0075b2

--pa-primary-dark
#005a8c

--pa-bg
#f7fbff

--pa-card
#ffffff

--pa-border
#e2e8f0

--pa-text
#2d3748

--pa-muted
#718096

success
#198754

warning
#ffc107

danger
#dc3545

Typography

MileMinder uses Roboto (loaded via Google Fonts) with Bootstrap 5 type utilities.

Heading 1 — Page title

Heading 2 — Section

Heading 3 — Sub-section

Body text — regular paragraph. Roboto 400 at 16px.

Small body — captions, meta. 14px.

KICKER / LABEL — 11px uppercase 700

Buttons

Bootstrap 5 button variants styled with pro-admin overrides.

Solid

Outline

Sizes

With Icons

Badges & Pills

Status badges for tasks, priorities, and general labels.

Task Status Badges

Backlog To Do In Progress Review Done Unknown

Priority Badges

Critical High Medium Low

Board Pills

Total: 42 Muted pill Good pill Warn pill

Form Controls

Bootstrap 5 form elements as used in MileMinder filters and edit forms.

Text Input

Select

Textarea

Show inactive tasks

Cards

Bootstrap cards used for content sections, lists, and summary panels.

Task Summary

A summary card showing task details, status, and assigned user.

Client Card

Primary-accent card for featured entities like clients and projects.

Empty State Card

No tasks found. Add a task to get started.

Tables

Bootstrap table utilities used in task lists and reports.

#	Subject	Status	Priority	Client	Due Date
1	Fix login redirect bug	In Progress	Critical	Acme Corp	2026-05-01
2	Update invoice template	To Do	High	Beta LLC	2026-05-10
3	Monthly mileage report	Done	Low	Gamma Inc	2026-04-30

Modals

Bootstrap 5 modals used for confirmations, quick views, and forms.

Domain Board Hero

The two-column hero header used on Spreadsheet, Board, and Classic (index) task views. Contains a search/filter form on the left and view controls on the right.

Tasks

Browse your task list, filter by client or project, and use a view to best suit your workflow.

Total: 87

Views

Classic Spreadsheet Board Kanban

.domain-board-hero { display: grid; grid-template-columns: 1.35fr 1fr; }

Board Strip Toolbar

The sticky toolbar strip at the top of the Task Board view (board_view.php). Includes view toggle, zoom, settings, undo/redo, filter input, and navigation links.

Task Board

.card-board-strip — requires board.css

Tabulator Grid

Live Tabulator 6.4 demo using the standard theme. Powered by spreadsheet_tabulator.js + spreadsheet_tabulator.css with sample data. Features: per-column header filters, global search, sort, group-by, zoom, fit-width, auto-fit, column chooser (drag-to-reorder), floating sticky header, and a live row-count chip.

Files: spreadsheet_tabulator.js · spreadsheet_tabulator.css · tabulator.min.css (standard theme CDN)

Status & Priority Chips

HTML badges used inside Tabulator badge formatters and throughout task lists.

Not Started In Progress On Hold Review Complete Closed Cancelled Backlog Critical High Medium Low —

.ss-chip .ss-chip-{status|priority} — defined in spreadsheet_tabulator.css

View Switcher Pills

The .domain-board-pill-row pattern for switching between Classic / Spreadsheet / Board / Kanban views. Appears in both the domain-board-hero and inside the board strip.