Laravel 13Livewire 3 Tailwind 4PostgreSQL MeilisearchStripe Connect

Rebuilding Voxel Guide as a custom Laravel application.

A full product specification, a staged migration plan off WordPress, and three design directions — each rendered across the five pages that carry the site.

Read the spec Migration plan Open the mockups
11Content types modelled
~500Legacy URLs to preserve
17Page mockups
~22 wkEstimated build

Three directions

Same content, same token names, same five screens — Home, Showcase archive, Detail, Profile and Vendor dashboard. Pick one, or take pieces from each. Switching between them inside a mockup is one click in the top bar.

Direction A — Midnight home page

Direction A

Midnight

Dark editorial. A serif display against near-black, hairline rules, wide gutters, and imagery doing all the colour work. Reads like a design annual — the showcase becomes the product rather than a grid of links.

Type: Instrument Serif · Manrope · JetBrains Mono
Best if: you want the site to feel curated and authored, and to stand apart from every other WordPress-adjacent directory.

View 5 screens →
Direction B — Canvas home page

Direction B

Canvas

Light and tactile. Warm paper ground, chunky rounded surfaces, a hot orange against the brand teal, and a search box as the centre of gravity. Filtering moves to a left rail so the grid stays dense.

Type: Bricolage Grotesque · Onest · Chivo Mono
Best if: you want warmth and approachability, and expect most visitors to arrive looking for something specific.

Selected direction — carried furthest, with a snippet page and the four-step submission wizard.

View 7 screens → Submission wizard →
Direction C — Signal home page

Direction C

Signal

A professional tool rather than a brochure. Persistent app-shell sidebar, 1px structure, tabular numbers, and real information density. The product page is a commerce surface with licensing tiers, not a marketing page.

Type: Archivo · Public Sans · IBM Plex Mono
Best if: the marketplace and vendor tooling are the point, and you want the same shell to serve browsing and selling. Ships light and dark — try the toggle.

View 5 screens →

One token contract

All three directions declare the same custom properties under a single :root block. Nothing downstream hard-codes a colour, so a rebrand is one file — and Tailwind 4 reads the same values through @theme, keeping utilities in sync with hand-written CSS.

--brand --brand-ink --brand-soft --brand-strong
--ink --ink-2 --ink-3
--surface --surface-2 --surface-3
--line --line-strong
--accent --ok --warn --danger
--radius --radius-lg --shadow-1 --shadow-2
--font-display --font-body --font-mono

The logo is inline SVG with fill="var(--brand)" on the mark and fill="var(--ink)" on the wordmark, traced from the staging original — so it recolours with the theme instead of needing a PNG export per background.

The written work

Both documents live as markdown in docs/ and render to these pages.

One caveat worth reading first. This work is based on a live audit — both sitemaps, both plugin manifests via the xCloud API, the WordPress REST API, and page-level scraping. Direct database access was not available, so Voxel's exact meta keys and taxonomy IDs are inferred from rendered output rather than read. The structure of the plan holds either way, but the field mappings need verifying against the database before migration code is written. That is Phase 0, and it should not be skipped.