--- title: 'Designs — overview' description: '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.' canonical: 'https://cartwright.app/docs/designs/overview' --- # Designs — overview (/docs/designs/overview) {/* Pack count derived from the vendored marketplace manifest (same source as the /designs gallery) so this page stays honest as packs ship. */} 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. ## Start from the blank canvas [#start-from-the-blank-canvas] `blank` is not a design — it is the starting point for a completely unique front, with free hands, in every profile. Activate it with `designSlug: "blank"` in `brand.config.ts` (or `/admin/designs` in the database-backed profiles, or the `design.set_slug` tool), then rewrite the files in `designs/blank/`, each of which carries its own in-file guide: * `homepage.tsx` — the whole homepage, a React Server Component receiving `DesignHomepageProps` (`settings`, `locale`, `featured`/`categories` in webshop mode, `genome`). Render `
`/`
`, never your own `
` — the engine wraps you in one (control it with the optional `layout` field in `index.ts`: `{ mainClassName: "" }` for full-bleed, `{ ownsMain: true }` to render it yourself). * `chrome.tsx` — `BlankHeader` and `BlankFooter`, wired through `siteChrome` in `index.ts`, so they replace the shared chrome on every page. Two components taking `{ locale }`. * `index.ts` — optional `pages: { contact, info, notFound }` and `webshop: { productCard, pdpLayout, categoryLayout }` templates; untemplated pages keep their default bodies in the pack's neutral palette. Any CSS, fonts or Tailwind go — scope styles under `.blank-canvas` or use a CSS Module; the `cw-*`/`sol-*` tokens are optional here. SEO, the sitemap, share cards and locale routing stay wrapped around whatever you render; in the database-backed profiles so do the admin, the database and the AI tools. The in-scaffold `AGENTS.md → Blank canvas` is the long form. See also [Writing your own design](/docs/designs/writing-your-own) for a pack that starts from a copy instead of from bare files. ## The two axes [#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](/docs/designs/picking-a-design). ## The catalogue [#the-catalogue] Cartwright ships **{DESIGNS.length} 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](/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 [#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](/docs/verticals/overview)** — the tone (a vertical genome preset that re-tones the copy + palette for an industry). * **Parts** — the structure (swappable [sections](/docs/features/visual-builder)). 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-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](/docs/designs/webshop-overrides). ## How to add more [#how-to-add-more] Four paths, in increasing power: 1. **Install from the marketplace:** `npx cartwright design install ` pulls any catalogue design (e.g. `apex`, `halo`) straight into `designs//`. Best for the built-in packs. 2. **Drag-drop a `design.md` file** in `/admin/designs` → instant install + activate. Best for Stitch / Claude Design exports. 3. **CLI:** `tsx scripts/design-import.ts [--from stitch | claude-design]` — same import pipeline, runs offline. Best for batch operations. 4. **Hand-write a new design** under `designs//` — 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 [#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. ## Related [#related] * [Picking a design](/docs/designs/picking-a-design) — the `/admin/setup` and `/admin/designs` flows * [Webshop overrides & the shell model](/docs/designs/webshop-overrides) — when a design owns every page * [Voices](/docs/verticals/overview) — re-tone any design for an industry * [design.md spec](/docs/designs/design-md-spec) — schema reference for `cartwright-design-v1` * [Import from Gemini Stitch](/docs/designs/import-from-stitch) * [Import from Claude Design / v0](/docs/designs/import-from-claude-design) * [Writing your own design](/docs/designs/writing-your-own)