Designs — overview · cartwright

How design and industry work as two orthogonal axes in Cartwright. Pick any design with any industry, mix in a Voice, and import or install new designs from the marketplace, Gemini Stitch, Claude Design, or v0.

Cartwright separates what you sell (industry) from how it looks (design). They are orthogonal axes — any industry-template combines with any design — and both can be swapped without code-deploy.

This is new in v0.7.0. Before that, the homepage component was hardcoded from the industry slug (saas → SaaSHomeClient, studio → StudioHomeClient, everything else → a single fallback). v0.7.0 introduces a first-class designs/ registry, a portable design.md format, and adapters for the three biggest AI design tools.

The two axes

industryTemplate ──→ seed-data (products / categories / pages)

designSlug ────────┬─→ homepage component
                   ├─→ palette tokens (cw-* / sol-* / your-prefix-*)
                   ├─→ typography (fonts.sans / fonts.mono)
                   └─→ optional PDP / category / cart layout overrides

A coffee shop can run the Webshop Bold brutalism layout. A SaaS site can use the warm Studio palette. A vintage clothing shop can pick Webshop Editorial (magazine-style story cards) while seeding from the generic industry template.

The two axes are selected in the same admin step — see Picking a design.

The catalogue

Cartwright ships 26 whole-page design packs out of the box — from the palette-adaptive Aurora defaults to recognizable premium skins (aerospace, halo, flux, drive) and the flagship super-pro apex. The picker is mode-filtered, so you only see the website or webshop designs relevant to your shop. Browse the full, always-current catalogue — with palettes, previews, and the prompt that builds each one — at /designs.

Premium packs are part of the planned Cartwright Plus tier (honor-system today; real Stripe-validation lands in a future release) and stay technically selectable regardless of the flag.

Skin × Voice × Parts — the Page Mixer

A design (the Skin) is one of three orthogonal layers you compose a page from:

Skin — the look (a design pack).
Voice — the tone (a vertical genome preset that re-tones the copy + palette for an industry).
Parts — the structure (swappable sections).

Because they're independent, you can put any Voice on any palette-adaptive Skin and rearrange the Parts — a complete, on-brand page for an industry in minutes.

A design can own every page

A design isn't limited to the homepage. With the shell model a pack can carry its own site-wide chrome (header/footer) and per-page templates (contact, info, 404), and with webshop overrides it can supply a bespoke product card and PDP layout. Every seam is optional and default-safe. See Webshop overrides & the shell model.

How to add more

Four paths, in increasing power:

Install from the marketplace: npx cartwright design install <slug> pulls any catalogue design (e.g. apex, halo) straight into designs/<slug>/. Best for the built-in packs.
Drag-drop a design.md file in /admin/designs → instant install + activate. Best for Stitch / Claude Design exports.
CLI: tsx scripts/design-import.ts <file> [--from stitch | claude-design] — same import pipeline, runs offline. Best for batch operations.
Hand-write a new design under designs/<slug>/ — copy designs/studio/ as a starting point. Best for fully custom designs you want full control over.

See the next pages for each flow.

Backwards compatibility

Existing shops upgraded from v0.6.0 keep working without any action:

BrandingSettings.designSlug defaults to NULL
At render-time, inferDesignFromIndustry(industry, ecommerceEnabled) resolves a sensible default:
- industry=saas + ecommerceEnabled=false → saas-dark
- industry=studio + ecommerceEnabled=false → studio
- ecommerceEnabled=true → webshop-classic
- Anything else → corporate-baseline

This matches the v0.6.0 hardcoded behavior 1:1 — Teloz, Northbound, solbriller all render identically until you actively pick a new design.

Picking a design — the /admin/setup and /admin/designs flows
Webshop overrides & the shell model — when a design owns every page
Voices — re-tone any design for an industry
design.md spec — schema reference for cartwright-design-v1
Import from Gemini Stitch
Import from Claude Design / v0
Writing your own design

Designs — overview