diff --git a/README.md b/README.md
index e8f7c01..76df7c4 100644
--- a/README.md
+++ b/README.md
@@ -2,9 +2,14 @@
 
 Coder workspace template for DDEV-based development with Docker-in-Docker support, Node.js, and Git.
 
-**Get started with Drupal core development:**
+**Get started (recommended paths):**
 
-[![Open in Coder](https://coder.ddev.com/open-in-coder.svg)](https://coder.ddev.com/templates/coder/drupal-core/workspace?mode=manual)
+- **Drupal.org issue or project** → [Drupal Issue Picker](https://start.coder.ddev.com/drupal-issue) (auto-detects core vs contrib and prefills sensible defaults)
+- **Multiple DDEV projects in one workspace** → [DDEV Freeform](https://coder.ddev.com/templates/coder/freeform/workspace?mode=manual)
+- **Clean Drupal core without an issue fork** → [Guided Drupal core](https://start.coder.ddev.com/drupal-core) (short context page, then the same manual template)
+- **Browse all templates** → [coder.ddev.com/templates](https://coder.ddev.com/templates)
+
+**Advanced:** open the [manual Drupal core template](https://coder.ddev.com/templates/coder/drupal-core/workspace?mode=manual) directly if you already know every parameter you need.
 
 ## Features
 
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index c24f816..5a0f0f2 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -4,143 +4,19 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ page.title }} — DDEV Coder Workspaces</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #0e0e10;
-      color: #e0e0e0;
-      line-height: 1.7;
-    }
-
-    nav {
-      padding: 1rem 2rem;
-      border-bottom: 1px solid #1c1c1e;
-    }
-
-    nav a {
-      color: #a78bfa;
-      text-decoration: none;
-      font-size: 0.9rem;
-    }
-
-    nav a:hover { text-decoration: underline; }
-
-    main {
-      max-width: 720px;
-      margin: 0 auto;
-      padding: 3rem 2rem 6rem;
-    }
-
-    h1 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.02em; }
-    h2 { font-size: 1.35rem; font-weight: 600; margin: 2.5rem 0 0.75rem; color: #e8e8e8; }
-    h3 { font-size: 1.1rem; font-weight: 600; margin: 1.75rem 0 0.5rem; color: #ddd; }
-
-    p { margin-bottom: 1rem; color: #ccc; }
-
-    a { color: #a78bfa; text-decoration: none; }
-    a:hover { text-decoration: underline; }
-
-    ul, ol { margin: 0 0 1rem 1.5rem; color: #ccc; }
-    li { margin-bottom: 0.35rem; }
-
-    code {
-      background: #1a1a1f;
-      border: 1px solid #2a2a30;
-      padding: 0.15em 0.45em;
-      border-radius: 4px;
-      font-family: 'SF Mono', Consolas, 'Courier New', monospace;
-      font-size: 0.87em;
-      color: #c4b5fd;
-    }
-
-    pre {
-      background: #111115;
-      border: 1px solid #2a2a30;
-      border-radius: 8px;
-      padding: 1.25rem 1.5rem;
-      overflow-x: auto;
-      margin-bottom: 1.25rem;
-    }
-
-    pre code {
-      background: none;
-      border: none;
-      padding: 0;
-      font-size: 0.9rem;
-      color: #c9d1d9;
-    }
-
-    hr {
-      border: none;
-      border-top: 1px solid #1c1c1e;
-      margin: 2rem 0;
-    }
-
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      margin-bottom: 1.25rem;
-      font-size: 0.95rem;
-    }
-
-    th {
-      text-align: left;
-      padding: 0.6rem 0.75rem;
-      border-bottom: 2px solid #2a2a30;
-      color: #999;
-      font-weight: 600;
-      font-size: 0.85rem;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-
-    td {
-      padding: 0.6rem 0.75rem;
-      border-bottom: 1px solid #1c1c1e;
-      color: #ccc;
-    }
-
-    strong { color: #e8e8e8; }
-
-    blockquote {
-      border-left: 3px solid #3b2f6e;
-      padding-left: 1rem;
-      color: #999;
-      margin-bottom: 1rem;
-    }
-
-    img { max-width: 100%; }
-
-    /* Skip link — visually hidden until focused; lets keyboard users bypass the site nav.
-       WCAG 2.4.1 Bypass Blocks (Level A) */
-    .skip-link {
-      position: absolute;
-      top: -100%;
-      left: 1rem;
-      background: #7c5af0;
-      color: #fff;
-      padding: 0.5rem 1rem;
-      border-radius: 0 0 6px 6px;
-      font-size: 0.9rem;
-      font-weight: 600;
-      text-decoration: none;
-      z-index: 999;
-    }
-    .skip-link:focus { top: 0; }
-  </style>
+  <link rel="icon" type="image/svg+xml" href="{{ '/favicon.svg' | relative_url }}">
+  <link rel="stylesheet" href="{{ '/coder-ddev-start.css' | relative_url }}">
 </head>
-<body>
+<body class="cds-body">
   <!-- WCAG 2.4.1 Bypass Blocks (Level A): skip link lets keyboard users jump past the site nav -->
-  <a class="skip-link" href="#main-content">Skip to main content</a>
+  <a class="cds-skip-link" href="#main-content">Skip to main content</a>
   <!-- aria-label distinguishes this nav landmark when multiple <nav> elements exist on a page.
        WCAG 2.4.6 Headings and Labels (Level AA) -->
-  <nav aria-label="Site">
-    <a href="/">← DDEV Coder Workspaces</a>
+  <nav class="cds-doc-nav" aria-label="Site">
+    <a class="cds-link" href="{{ '/' | relative_url }}">← DDEV Coder Workspaces</a>
   </nav>
   <!-- id="main-content" is the skip link target (WCAG 2.4.1) -->
-  <main id="main-content">
+  <main id="main-content" class="cds-doc-main">
     {{ content }}
   </main>
 </body>
diff --git a/docs/access-denied.html b/docs/access-denied.html
index 9210df4..61ec4a1 100644
--- a/docs/access-denied.html
+++ b/docs/access-denied.html
@@ -5,167 +5,33 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Access Required — DDEV Coder Workspaces</title>
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #0e0e10;
-      color: #e8e8e8;
-      line-height: 1.6;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
-      padding: 2rem;
-    }
-
-    .card {
-      background: #161619;
-      border: 1px solid #30303a;
-      border-radius: 14px;
-      padding: 2.5rem 2.5rem;
-      max-width: 520px;
-      width: 100%;
-    }
-
-    .icon {
-      font-size: 2.5rem;
-      margin-bottom: 1.25rem;
-    }
-
-    h1 {
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: #e8e8e8;
-      margin-bottom: 0.75rem;
-    }
-
-    .subtitle {
-      font-size: 1rem;
-      color: #999;
-      margin-bottom: 2rem;
-      line-height: 1.7;
-    }
-
-    .who-qualifies {
-      background: #0e0e10;
-      border: 1px solid #2a2a32;
-      border-radius: 10px;
-      padding: 1.25rem 1.5rem;
-      margin-bottom: 2rem;
-      text-align: left;
-    }
-
-    .who-qualifies h2 {
-      font-size: 0.85rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.07em;
-      color: #666;
-      margin-bottom: 0.85rem;
-    }
-
-    .who-qualifies ul {
-      list-style: none;
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-
-    .who-qualifies li {
-      display: flex;
-      align-items: flex-start;
-      gap: 0.6rem;
-      color: #ccc;
-      font-size: 0.95rem;
-    }
-
-    .who-qualifies li::before {
-      content: '✓';
-      color: #7c5af0;
-      font-weight: 700;
-      flex-shrink: 0;
-      margin-top: 0.05rem;
-    }
-
-    .who-qualifies a {
-      color: #a78bfa;
-      text-decoration: none;
-    }
-
-    .who-qualifies a:hover { text-decoration: underline; }
-
-    .actions {
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-    }
-
-    .btn-primary {
-      background: #7c5af0;
-      color: #fff;
-      border: none;
-      border-radius: 8px;
-      padding: 0.75rem 1.5rem;
-      font-size: 1rem;
-      font-weight: 600;
-      text-decoration: none;
-      cursor: pointer;
-      transition: background 0.15s;
-    }
-
-    .btn-primary:hover { background: #6d4de0; }
-
-    .btn-secondary {
-      color: #a78bfa;
-      font-size: 0.9rem;
-      text-decoration: none;
-    }
-
-    .btn-secondary:hover { text-decoration: underline; }
-
-    .footer-links {
-      margin-top: 2rem;
-      font-size: 0.85rem;
-      color: #555;
-    }
-
-    .footer-links a {
-      color: #666;
-      text-decoration: none;
-    }
-
-    .footer-links a:hover { color: #a78bfa; }
-  </style>
+  <link rel="stylesheet" href="coder-ddev-start.css">
 </head>
-<body>
-  <div class="card">
-    <div class="icon">🔒</div>
+<body class="cds-body cds-access-denied">
+  <div class="cds-gate-card">
+    <div class="cds-emoji-hero" aria-hidden="true">🔒</div>
     <h1>Access Required</h1>
-    <p class="subtitle">
+    <p class="cds-gate-subtitle">
       Your GitHub account doesn't currently have access to coder.ddev.com.
       Access is restricted to members of specific GitHub organizations.
     </p>
 
-    <div class="who-qualifies">
-      <h2>Who qualifies</h2>
-      <ul>
-        <li>Members of the <a href="https://github.com/ddev">ddev</a> GitHub org</li>
-        <li>Members of a <a href="https://ddev.com/support-ddev/">$100+/month DDEV sponsor org</a></li>
-        <li>Individuals approved via the <a href="https://github.com/coder-ddev-com/access-requests">access requests</a> repo</li>
+    <div class="cds-callout">
+      <div class="cds-callout__title">Who qualifies</div>
+      <ul class="cds-checklist">
+        <li><p>Members of the <a href="https://github.com/ddev">ddev</a> GitHub org</p></li>
+        <li><p>Members of a <a href="https://ddev.com/support-ddev/">$100+/month DDEV sponsor org</a></p></li>
+        <li><p>Individuals approved via the <a href="https://github.com/coder-ddev-com/access-requests">access requests</a> repo</p></li>
       </ul>
     </div>
 
-    <div class="actions">
-      <a class="btn-primary" href="https://github.com/coder-ddev-com/access-requests/issues/new?template=access-request.yml">Request Access on GitHub</a>
-      <a class="btn-secondary" href="https://coder.ddev.com/login">Try signing in again</a>
+    <div class="cds-stack">
+      <a class="cds-btn cds-btn--primary cds-btn--block" href="https://github.com/coder-ddev-com/access-requests/issues/new?template=access-request.yml">Request Access on GitHub</a>
+      <a class="cds-link" href="https://coder.ddev.com/login">Try signing in again</a>
     </div>
   </div>
 
-  <div class="footer-links">
+  <div class="cds-access-footer">
     <a href="https://start.coder.ddev.com">← Back to start.coder.ddev.com</a>
     &nbsp;·&nbsp;
     <a href="https://ddev.com/s/discord">DDEV Discord</a>
diff --git a/docs/coder-ddev-start.css b/docs/coder-ddev-start.css
new file mode 100644
index 0000000..52ea608
--- /dev/null
+++ b/docs/coder-ddev-start.css
@@ -0,0 +1,1511 @@
+/**
+ * Shared design tokens + components for start.coder.ddev.com
+ * Used on static HTML landing pages and Jekyll docs markdown pages.
+ * See /components.html for example usage.
+ * See DDEV brand guide https://docs.ddev.com/en/stable/developers/brand-guide/
+ * for primary color definitions.
+ */
+:root {
+  --bg-dark: #131318;
+  --bg-page: #1e2127;
+  --bg-elevated: #262c35;
+  --bg-elevated-hover: #2e3540;
+  --border: #3d4550;
+  --border-subtle: #2a3039;
+  --text: #e1ded8;
+  --text-secondary: #b5b1ab;
+  /* Lighter than old #8a8680: meets WCAG 1.4.3 AA normal text contrast. */
+  --text-muted: #a09993;
+  /* Brand blue — links, focus, borders, non–white-on-blue accents */
+  --action: #02a8e2;
+  --action-pressed: #0184b4;
+  /* Filled button controls use a darker blue so white on blue meets WCAG 1.4.3 AA contrast. */
+  --btn-primary-bg: #01729d;
+  --btn-primary-bg-hover: #01658a;
+  --btn-primary-bg-disabled: color-mix(in srgb, var(--btn-primary-bg) 42%, var(--border));
+  --btn-primary-fg: #ffffff;
+  --btn-primary-fg-disabled: color-mix(in srgb, var(--btn-primary-fg) 58%, var(--text-muted));
+  --link: #35c5f4;
+  --link-hover: #7ddbfc;
+  --focus: #7ddbfc;
+  --danger: #f07178;
+  --radius: 12px;
+  --radius-sm: 8px;
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.cds-body {
+  font-family: var(--font);
+  background: var(--bg-page);
+  color: var(--text);
+  line-height: 1.6;
+}
+
+.cds-link {
+  color: var(--link);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.cds-link:hover {
+  color: var(--link-hover);
+  text-decoration: underline;
+}
+
+/* Card / tile — one pattern everywhere */
+.cds-tile-grid {
+  display: grid;
+  gap: 1rem;
+  width: min(100%, 720px);
+  margin-bottom: 1.25rem;
+}
+
+@media (min-width: 560px) {
+  .cds-tile-grid--2 {
+    grid-template-columns: 1fr 1fr;
+  }
+  .cds-tile-grid--3 {
+    width: min(100%, 960px);
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+.cds-tile {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.35rem 1.4rem;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  text-align: left;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.cds-tile:hover {
+  background: var(--bg-elevated-hover);
+  border-color: #525a66;
+}
+
+.cds-tile--featured {
+  border-color: rgba(2, 168, 226, 0.5);
+  box-shadow: inset 0 1px 0 0 rgba(2, 168, 226, 0.18);
+}
+
+.cds-tile__eyebrow {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  margin: 0 0 0.45rem;
+  color: var(--text-muted);
+}
+
+.cds-tile--featured .cds-tile__eyebrow {
+  color: var(--action);
+}
+
+.cds-tile__eyebrow a {
+  color: inherit;
+  border-bottom: 1px dotted transparent;
+  text-decoration: none;
+}
+
+.cds-tile__eyebrow a:hover {
+  border-bottom: 1px dotted currentColor;
+  text-decoration: none;
+}
+
+.cds-tile__title {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--text);
+  margin: 0 0 0.4rem;
+  letter-spacing: -0.01em;
+}
+
+.cds-tile__desc {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  line-height: 1.55;
+  margin: 0 0 1.1rem;
+  flex: 1;
+}
+
+.cds-tile__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  margin-top: auto;
+}
+
+.cds-tile__actions .cds-btn {
+  width: 100%;
+  justify-content: center;
+  text-align: center;
+}
+
+/* Buttons — DDEV blue primary */
+.cds-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  text-decoration: none;
+  border-radius: var(--radius-sm);
+  padding: 0.65rem 1.1rem;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.cds-btn:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+.cds-btn--primary {
+  background: var(--btn-primary-bg);
+  color: var(--btn-primary-fg);
+}
+
+.cds-btn--primary:hover {
+  background: var(--btn-primary-bg-hover);
+}
+
+/* Secondary — DDEV surface + border; quieter than primary, still on-brand on hover */
+.cds-btn--secondary {
+  background: var(--bg-dark);
+  color: var(--text);
+  border-color: var(--border);
+  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
+}
+
+.cds-btn--secondary:hover {
+  background: var(--bg-elevated);
+  border-color: var(--action);
+  color: #fff;
+}
+
+.cds-btn--outline {
+  background: transparent;
+  color: var(--text);
+  border-color: var(--border);
+}
+
+.cds-btn--outline:hover {
+  border-color: var(--action);
+  color: #fff;
+}
+
+.cds-btn__badge {
+  height: 36px;
+  width: auto;
+  display: block;
+}
+
+.cds-btn--outline .cds-btn__badge {
+  margin-left: 0.25rem;
+}
+
+.cds-footnote-link {
+  color: inherit;
+  border-bottom: 1px dotted transparent;
+  text-decoration: none;
+}
+
+.cds-footnote-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.cds-footnote-list li a {
+  color: inherit;
+  border-bottom: 1px dotted currentColor;
+  text-decoration: none;
+}
+
+.cds-footnote-list li a:hover {
+  border-bottom: 1px solid currentColor;
+  text-decoration: none;
+}
+
+.cds-footnote-list li code  {
+  color: inherit;
+}
+
+.cds-footnote-list li {
+  margin: 0;
+  padding: 0;
+  scroll-margin-block-start: 6rem;
+}
+
+.cds-footnote-list li:target {
+  animation: footnote-flash 1.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cds-footnote-list li:target {
+    animation: none;
+  }
+}
+
+@keyframes footnote-flash {
+  0%, 50% {
+    box-shadow: inset 0 0 0 999px rgb(255 230 120 / 0.25);
+  }
+
+  100% {
+    box-shadow: inset 0 0 0 999px rgb(255 230 120 / 0);
+  }
+}
+
+
+
+/* Muted note / footnote strip */
+.cds-note {
+  width: min(100%, 720px);
+  margin: 1.25rem 0;
+  padding: 1rem 1.15rem;
+  font-size: 0.88rem;
+  color: var(--text-secondary);
+  line-height: 1.55;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+}
+
+.cds-note:first-child {
+  margin-top: 0;
+}
+
+.cds-note:last-child {
+  margin-bottom: 0;
+}
+
+/* Hero subtitle → cross-link intro (drupal-core / drupal-issue): same rhythm on both */
+.cds-note--intro {
+  margin-top: 0.35rem;
+  margin-bottom: 1.75rem;
+}
+
+.cds-note a {
+  color: var(--link);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.cds-note a:hover {
+  text-decoration: underline;
+  color: var(--link-hover);
+}
+
+.cds-note strong {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.cds-note__sep {
+  color: var(--text-muted);
+  margin: 0 0.25rem;
+}
+
+/* Inline muted link row (advanced) */
+.cds-muted-row {
+  margin-top: 0.85rem;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  text-align: center;
+  max-width: 720px;
+}
+
+.cds-muted-row a {
+  color: var(--text-secondary);
+  text-decoration: underline;
+}
+
+.cds-muted-row a:hover {
+  color: var(--text);
+}
+
+/* ---------------------------------------------------------------------------
+ * Global doc reset + skip link (index, drupal-core, drupal-issue)
+ * --------------------------------------------------------------------------- */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body.cds-body {
+  min-height: 100vh;
+}
+
+.cds-skip-link {
+  position: absolute;
+  top: -100%;
+  left: 1rem;
+  background: var(--btn-primary-bg);
+  color: var(--btn-primary-fg);
+  padding: 0.5rem 1rem;
+  border-radius: 0 0 6px 6px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-decoration: none;
+  z-index: 999;
+}
+
+.cds-skip-link:hover {
+  background: var(--btn-primary-bg-hover);
+}
+
+.cds-skip-link:focus {
+  top: 0;
+}
+
+.cds-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ---------------------------------------------------------------------------
+ * Form subpages: drupal-core, drupal-issue (top chrome + shared controls)
+ * --------------------------------------------------------------------------- */
+.cds-page-header {
+  padding: 1.25rem 2rem;
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.cds-page-header a {
+  font-size: 0.9rem;
+}
+
+.cds-page-header a:hover {
+  text-decoration: underline;
+}
+
+.cds-page-header__sep {
+  color: var(--text-muted);
+}
+
+.cds-page-header__title {
+  color: var(--text);
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.cds-page {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 3rem 2rem 5rem;
+}
+
+.cds-page > h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-bottom: 0.5rem;
+  color: var(--text);
+}
+
+.cds-page__subtitle {
+  color: var(--text-secondary);
+  font-size: 1rem;
+  line-height: 1.5;
+  margin-bottom: 1.35rem;
+}
+
+/* Form field captions — drupal-core (.cds-field__label) + drupal-issue (.cds-field > label) */
+.cds-page .cds-field__label,
+.cds-page .cds-field > label {
+  display: block;
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--text-muted);
+  margin-bottom: 0.42rem;
+}
+
+.cds-page .cds-field .cds-hint--url {
+  margin-top: 0.4rem;
+  line-height: 1.45;
+}
+
+code {
+  font-family: "SF Mono", Consolas, monospace;
+  font-size: 0.84em;
+  color: var(--link);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  padding: 0.12em 0.35em;
+  border-radius: 4px;
+  word-break: break-all;
+}
+
+pre {
+  background: var(--bg-dark);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 1.25rem 1.5rem;
+  overflow-x: auto;
+  margin-bottom: 1.25rem;
+}
+
+pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 0.9rem;
+  color: #c9d1d9;
+}
+
+.cds-hint {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  margin-top: 0.3rem;
+}
+
+.cds-field__label + .cds-hint {
+  margin-bottom: 0.5rem;
+}
+
+/* #636377 on #161619 ~3.5:1 — WCAG 1.4.11 non-text contrast (AA) */
+.cds-field input[type="text"],
+.cds-field select,
+.cds-input-row input {
+  width: 100%;
+  background: #161619;
+  border: 1px solid #636377;
+  border-radius: 8px;
+  padding: 0.65rem 1rem;
+  color: #e8e8e8;
+  font-size: 0.95rem;
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.cds-input-row input {
+  flex: 1;
+  width: auto;
+  padding: 0.7rem 1rem;
+}
+
+.cds-input-row input::placeholder {
+  /* #888 on #161619 ~5.9:1 — WCAG 1.4.3 (AA) */
+  color: #888;
+}
+
+.cds-field select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a09993' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  padding-right: 2.5rem;
+}
+
+.cds-field input[type="text"][readonly] {
+  color: #aaa;
+  cursor: default;
+}
+
+.cds-field input[type="text"]:focus,
+.cds-field select:focus,
+.cds-input-row input:focus {
+  border-color: var(--action);
+  outline: 2px solid var(--action);
+  outline-offset: 2px;
+}
+
+.cds-field input[type="text"][aria-invalid="true"] {
+  border-color: var(--danger);
+}
+
+.cds-field input[type="text"][aria-invalid="true"]:focus {
+  border-color: var(--danger);
+  outline-color: var(--danger);
+}
+
+.cds-field-error {
+  margin-top: 0.35rem;
+  font-size: 0.85rem;
+  color: var(--danger);
+}
+
+.cds-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 1.15rem;
+  margin-bottom: 1.35rem;
+}
+
+.cds-radio-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+.cds-launch-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1.15rem;
+}
+
+.cds-btn-open {
+  flex: 1 1 14rem;
+  min-width: min(100%, 14rem);
+  width: auto;
+  background: var(--btn-primary-bg);
+  color: var(--btn-primary-fg);
+  border: none;
+  border-radius: 8px;
+  padding: 0.85rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.cds-btn-open:hover {
+  background: var(--btn-primary-bg-hover);
+}
+
+.cds-btn-open:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+.cds-btn-load {
+  background: var(--btn-primary-bg);
+  color: var(--btn-primary-fg);
+  border: none;
+  border-radius: 8px;
+  padding: 0.7rem 1.25rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s ease;
+}
+
+.cds-btn-load:hover {
+  background: var(--btn-primary-bg-hover);
+}
+
+.cds-btn-load:disabled {
+  background: var(--btn-primary-bg-disabled);
+  color: var(--btn-primary-fg-disabled);
+  cursor: not-allowed;
+}
+
+.cds-btn-load:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+.cds-launch-note {
+  flex: 1 1 12rem;
+  margin: 0;
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+  line-height: 1.45;
+  max-width: 22rem;
+}
+
+.cds-status {
+  font-size: 0.9rem;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  display: none;
+}
+
+.cds-status--loading {
+  display: block;
+  background: #161619;
+  border: 1px solid #636377;
+  color: #999;
+}
+
+.cds-status--error {
+  display: block;
+  background: #1f0f0f;
+  border: 1px solid #5a1a1a;
+  color: #f87171;
+}
+
+.cds-status--info {
+  display: block;
+  background: #0f1a1f;
+  border: 1px solid #1a4a5a;
+  color: #7dd3fc;
+}
+
+.cds-status--sample.cds-status--loading,
+.cds-status--sample.cds-status--error,
+.cds-status--sample.cds-status--info {
+  display: block;
+}
+
+.cds-notes {
+  font-size: 0.92rem;
+  color: var(--text-secondary);
+  line-height: 1.55;
+}
+
+:where(.cds-notes) h2 {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-muted);
+  margin-bottom: 0.65rem;
+}
+
+.cds-notes h2:not(:first-child) {
+  margin-top: 1.35rem;
+}
+
+.cds-notes p,
+.cds-notes ol,
+.cds-notes ul {
+  margin: 0 0 1.25rem;
+}
+
+.cds-notes :last-child {
+  margin-bottom: 0;
+}
+
+:where(.cds-notes) ul {
+  padding-left: 1.1rem;
+}
+
+:where(.cds-notes) li {
+  margin-bottom: 0.35rem;
+}
+
+:where(.cds-notes) a {
+  color: var(--link);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+:where(.cds-notes) a:hover {
+  text-decoration: underline;
+  color: var(--link-hover);
+}
+
+.cds-feedback {
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+  line-height: 1.65;
+}
+
+.cds-divider {
+  border: 0;
+  border-top: 1px solid var(--border-subtle);
+  margin: 2.25rem 0;
+  height: 0;
+}
+
+.cds-input-row {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 1.35rem;
+}
+
+.cds-issue-panel[hidden] {
+  display: none !important;
+}
+
+.cds-issue-title {
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--link);
+  margin-bottom: 1.75rem;
+  padding: 0.75rem 1rem;
+  background: rgba(2, 168, 226, 0.06);
+  border: 1px solid rgba(2, 168, 226, 0.22);
+  border-radius: 8px;
+}
+
+.cds-issue-title__label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: #888;
+  margin-bottom: 0.2rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.cds-issue-title__link {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.cds-template-badge {
+  display: inline-block;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 0.15rem 0.5rem;
+  border-radius: 4px;
+  margin-top: 0.4rem;
+}
+
+.cds-template-badge--core {
+  background: #1a2a1a;
+  color: #86efac;
+  border: 1px solid #166534;
+}
+
+.cds-template-badge--contrib {
+  background: rgba(2, 168, 226, 0.1);
+  color: var(--link);
+  border: 1px solid rgba(2, 168, 226, 0.45);
+}
+
+.cds-manual-notice {
+  font-size: 0.85rem;
+  color: #888;
+  margin-bottom: 1.25rem;
+  padding: 0.65rem 0.9rem;
+  background: #111114;
+  border: 1px solid #222228;
+  border-radius: 6px;
+}
+
+.cds-share-intro {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  line-height: 1.4;
+  margin: 0 0 0.45rem;
+  max-width: 38rem;
+}
+
+/* Full-width primary CTA (stacked forms, access gate) */
+.cds-btn--block {
+  width: 100%;
+  justify-content: center;
+  text-align: center;
+}
+
+/* ---------------------------------------------------------------------------
+ * Documentation shell (Jekyll default layout) + markdown prose
+ * --------------------------------------------------------------------------- */
+.cds-doc-nav {
+  padding: 1rem 2rem;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.cds-doc-nav a {
+  font-size: 0.9rem;
+  color: var(--link);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.cds-doc-nav a:hover {
+  color: var(--link-hover);
+  text-decoration: underline;
+}
+
+.cds-doc-main {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 3rem 2rem 6rem;
+}
+
+.cds-doc-main--demo-top {
+  padding-top: 1.5rem;
+}
+
+:where(.cds-doc-main) h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  letter-spacing: -0.02em;
+  line-height: 1.25;
+  color: var(--text);
+}
+
+:where(.cds-doc-main) h2 {
+  font-size: 1.35rem;
+  font-weight: 600;
+  margin: 2.5rem 0 0.75rem;
+  color: var(--text);
+}
+
+:where(.cds-doc-main) h3 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 1.75rem 0 0.5rem;
+  color: var(--text);
+}
+
+:where(.cds-doc-main) p {
+  margin-bottom: 1rem;
+  color: var(--text-secondary);
+}
+
+:where(.cds-doc-main) a {
+  color: var(--link);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+:where(.cds-doc-main) a:hover {
+  color: var(--link-hover);
+  text-decoration: underline;
+}
+
+:where(.cds-doc-main) ul,
+:where(.cds-doc-main) ol {
+  margin: 0 0 1rem 1.5rem;
+  color: var(--text-secondary);
+}
+
+:where(.cds-doc-main) li {
+  margin-bottom: 0.35rem;
+}
+
+:where(.cds-doc-main) hr {
+  border: none;
+  border-top: 1px solid var(--border-subtle);
+  margin: 2rem 0;
+}
+
+.cds-doc-main table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1.25rem;
+  font-size: 0.95rem;
+}
+
+.cds-doc-main th {
+  text-align: left;
+  padding: 0.6rem 0.75rem;
+  border-bottom: 2px solid var(--border-subtle);
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.cds-doc-main td {
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text-secondary);
+}
+
+.cds-doc-main strong {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.cds-doc-main blockquote,
+.cds-blockquote {
+  margin: 0 0 1rem;
+  border-left: 3px solid var(--action);
+  padding: 0.2rem 0 0.2rem 1rem;
+  color: var(--text-muted);
+  font-size: 0.95rem;
+  line-height: 1.55;
+}
+
+.cds-doc-main blockquote p,
+.cds-blockquote p {
+  margin: 0 0 0.5rem;
+}
+
+.cds-doc-main blockquote p:last-child,
+.cds-blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+.cds-doc-main blockquote cite,
+.cds-blockquote cite {
+  display: block;
+  margin-top: 0.65rem;
+  font-size: 0.85rem;
+  font-style: normal;
+  color: var(--text-secondary);
+}
+
+.cds-doc-main img {
+  max-width: 100%;
+}
+
+.cds-doc-cta {
+  margin: 1.25rem 0 1.75rem;
+}
+
+.cds-doc-main a.cds-btn {
+  color: var(--btn-primary-fg);
+  text-decoration: none;
+}
+
+.cds-doc-main a.cds-btn:hover {
+  text-decoration: none;
+}
+
+.cds-doc-main a.cds-btn--secondary {
+  color: var(--text);
+}
+
+.cds-doc-main a.cds-btn--secondary:hover {
+  color: #fff;
+}
+
+.cds-doc-main a.cds-btn--outline {
+  color: var(--text);
+}
+
+.cds-doc-main a.cds-btn--outline:hover {
+  color: #fff;
+}
+
+/* ---------------------------------------------------------------------------
+ * Access gate + callouts (access-denied.html)
+ * --------------------------------------------------------------------------- */
+.cds-access-denied {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 2rem;
+  gap: 2rem;
+}
+
+.cds-gate-card {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 2.5rem;
+  max-width: 520px;
+  width: 100%;
+}
+
+.cds-emoji-hero {
+  font-size: 2.5rem;
+  margin-bottom: 1.25rem;
+  line-height: 1;
+}
+
+.cds-gate-card h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 0.75rem;
+}
+
+.cds-gate-card .cds-gate-subtitle {
+  font-size: 1rem;
+  color: var(--text-muted);
+  margin-bottom: 2rem;
+  line-height: 1.7;
+}
+
+.cds-callout {
+  background: var(--bg-page);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 1.25rem 1.5rem;
+  margin-bottom: 2rem;
+  text-align: left;
+}
+
+.cds-callout--with-icon {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.85rem 1.2rem;
+  margin-bottom: 1.75rem;
+  font-size: 0.95rem;
+}
+
+.cds-callout--narrow {
+  max-width: 36rem;
+}
+
+.cds-callout--elevated {
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+  border-color: var(--border-subtle);
+}
+
+.cds-callout--naked {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+}
+
+.cds-callout--muted {
+  color: var(--text-muted);
+  background: transparent;
+}
+
+:where(.cds-callout--muted) a {
+  color: var(--action);
+}
+
+:where(.cds-callout--muted) a:hover {
+  color: var(--action-pressed);
+}
+
+.cds-callout--with-icon svg {
+  flex-shrink: 0;
+  margin-top: 0.1rem;
+}
+
+.cds-callout__title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--text-muted);
+  margin-bottom: 0.85rem;
+}
+
+.cds-checklist {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/*
+ * Rows use padding + an absolutely positioned check — not flex on <li> — so mixed
+ * inline content does not become separate flex items. Wrap each row’s copy in a block
+ * (typically <p>) especially when a row has multiple paragraphs or rich markup.
+ */
+.cds-checklist > li {
+  position: relative;
+  display: block;
+  padding-left: calc(0.65rem + 1.05em);
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+}
+
+.cds-checklist > li::before {
+  content: "\2713";
+  position: absolute;
+  left: 0;
+  top: 0.12em;
+  color: var(--action);
+  font-weight: 700;
+  line-height: 1.35;
+  width: 1em;
+  text-align: center;
+}
+
+.cds-checklist > li > p {
+  margin: 0 0 0.45rem;
+}
+
+.cds-checklist > li > p:last-child {
+  margin-bottom: 0;
+}
+
+.cds-checklist a {
+  color: var(--link);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.cds-checklist a:hover {
+  text-decoration: underline;
+  color: var(--link-hover);
+}
+
+.cds-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.cds-access-footer {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.cds-access-footer a {
+  color: var(--text-secondary);
+  text-decoration: none;
+}
+
+.cds-access-footer a:hover {
+  color: var(--link-hover);
+}
+
+/* Numbered step list (homepage “How it works”, etc.) — use on <ol> */
+.cds-steps {
+  list-style: none;
+  counter-reset: cds-step;
+  padding: 0;
+  margin: 0;
+}
+
+.cds-steps > li {
+  counter-increment: cds-step;
+  position: relative;
+  display: block;
+  padding: 1rem 0 1rem calc(1.75rem + 1rem);
+  margin: 0;
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+}
+
+.cds-steps > li p {
+  margin: 0 0 0.75rem;
+}
+
+.cds-steps > li p:last-child {
+  margin-bottom: 0;
+}
+
+.cds-steps > li::before {
+  content: counter(cds-step);
+  position: absolute;
+  left: 0;
+  top: 0.85rem;
+  width: 1.75rem;
+  height: 1.75rem;
+  background: rgba(2, 168, 226, 0.12);
+  border: 1px solid rgba(2, 168, 226, 0.4);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--action);
+}
+
+.cds-steps a,
+.cds-steps .cds-link {
+  color: var(--link);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.cds-steps a:hover,
+.cds-steps .cds-link:hover {
+  text-decoration: underline;
+  color: var(--link-hover);
+}
+
+/* Pattern gallery (components.html) */
+.cds-pattern-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text);
+  margin: 2.25rem 0 1rem;
+}
+
+.cds-preview-box {
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 2rem;
+}
+
+.cds-preview-box--dashed {
+  border-style: dashed;
+  padding: 1rem;
+}
+
+.cds-preview-box--dashed .cds-gate-card {
+  margin: 0 auto;
+}
+
+/* Max width helpers */
+.cds-mw-40 {
+  max-width: 40rem;
+}
+
+.cds-mw-28 {
+  max-width: 28rem;
+}
+
+.cds-demo-gap-top {
+  margin-top: 1rem;
+}
+
+.cds-demo-gap-section {
+  margin-top: 2.5rem;
+}
+
+/* ---------------------------------------------------------------------------
+ * Homepage hero (index.html)
+ * --------------------------------------------------------------------------- */
+.cds-hero {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 2rem 1.25rem;
+  position: relative;
+}
+
+.cds-hero__logos {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3rem;
+  margin: 0 2rem 2rem;
+}
+
+@media (max-width: 560px) {
+  .cds-hero__logos {
+    gap: 1rem;
+    flex-direction: column;
+  }
+}
+
+.cds-hero__logo--ddev {
+  height: 60px;
+}
+
+.cds-hero__logo--coder {
+  height: 30px;
+}
+
+.cds-hero h1 {
+  font-size: clamp(2rem, 5vw, 3rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-bottom: 0.75rem;
+  color: var(--text);
+}
+
+.cds-hero__tagline {
+  font-size: 1.1rem;
+  color: var(--text-secondary);
+  max-width: 34rem;
+  margin-bottom: 1.75rem;
+  line-height: 1.55;
+}
+
+.cds-announce {
+  max-width: 36rem;
+  margin-bottom: 1.75rem;
+  padding: 0.9rem 1.15rem;
+  text-align: left;
+  font-size: 0.95rem;
+  color: var(--text-secondary);
+  line-height: 1.55;
+  background: rgba(2, 168, 226, 0.06);
+  border: 1px solid rgba(2, 168, 226, 0.22);
+  border-radius: var(--radius-sm);
+}
+
+.cds-hero__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 760px;
+  padding-bottom: 3.5rem;
+}
+
+.cds-scroll-hint {
+  position: absolute;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+  animation: cds-bob 2s ease-in-out infinite;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.cds-scroll-hint::after {
+  content: "↓";
+  font-size: 1rem;
+  color: var(--text-secondary);
+}
+
+@keyframes cds-bob {
+  0%, 100% { transform: translateX(-50%) translateY(0); }
+  50% { transform: translateX(-50%) translateY(6px); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cds-scroll-hint {
+    animation: none;
+  }
+}
+
+.cds-details {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 5rem 1.25rem 6rem;
+}
+
+.cds-details section {
+  margin-bottom: 3.25rem;
+}
+
+.cds-details h2 {
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-muted);
+  margin-bottom: 1.1rem;
+}
+
+.cds-link-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.cds-link-list a {
+  font-size: 0.95rem;
+}
+
+/* ---------------------------------------------------------------------------
+ * Radio pick cards (drupal-core.html)
+ * --------------------------------------------------------------------------- */
+.cds-pick-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.4rem;
+  text-align: center;
+  flex: 1 1 5.75rem;
+  min-width: 5.5rem;
+  max-width: 8.5rem;
+  min-height: 7.65rem;
+  padding: 0.5rem 0.55rem 0.6rem;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
+}
+
+.cds-pick-card:hover {
+  border-color: #484f58;
+  background: var(--bg-elevated-hover);
+}
+
+.cds-pick-card:has(.cds-pick-card__input:checked) {
+  border-color: var(--action);
+  box-shadow: inset 0 0 0 1px rgba(2, 168, 226, 0.35);
+  background: rgba(2, 168, 226, 0.07);
+}
+
+.cds-pick-card:has(.cds-pick-card__input:focus-visible) {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+.cds-pick-card__check {
+  flex-shrink: 0;
+  width: 2.1rem;
+  height: 2.1rem;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.18rem;
+  margin-bottom: 0.2rem;
+  background: transparent;
+  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
+}
+
+.cds-pick-card__check svg {
+  width: 1.05rem;
+  height: 1.05rem;
+  stroke: #fff;
+  stroke-width: 2.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+  opacity: 0;
+  transform: scale(0.65);
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.cds-pick-card:has(.cds-pick-card__input:checked) .cds-pick-card__check {
+  background: var(--btn-primary-bg);
+  border-color: var(--btn-primary-bg);
+}
+
+.cds-pick-card:has(.cds-pick-card__input:checked) .cds-pick-card__check svg {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.cds-pick-card__text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  gap: 0.12rem;
+  width: 100%;
+  min-height: 0;
+}
+
+.cds-pick-card__title {
+  font-weight: 700;
+  font-size: 1rem;
+  color: var(--text);
+  line-height: 1.2;
+}
+
+.cds-pick-card__sub {
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  line-height: 1.35;
+  max-width: 100%;
+}
diff --git a/docs/coder-workspace-name.js b/docs/coder-workspace-name.js
new file mode 100644
index 0000000..87333e8
--- /dev/null
+++ b/docs/coder-workspace-name.js
@@ -0,0 +1,153 @@
+/**
+ * Shared workspace name helpers for start.coder.ddev.com (drupal-core + drupal-issue).
+ */
+(function (global) {
+  'use strict';
+
+  const MAX_WORKSPACE_NAME_LENGTH = 32;
+  const WORKSPACE_NAME_TOO_LONG_MESSAGE = 'Workspace Name cannot be longer than 32 characters';
+
+  const PROFILE_SLUG = {
+    demo_umami: 'umami',
+    minimal: 'minimal',
+    standard: 'standard',
+  };
+
+  const VERSION_SLUG = {
+    10: '10x',
+    11: '11x',
+    12: '12x',
+  };
+
+  function sanitizeWorkspaceName(name) {
+    return String(name)
+      .toLowerCase()
+      .replace(/[^a-z0-9-]/g, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '');
+  }
+
+  /**
+   * Plain Drupal core workspace (no issue fork): {major}x-{profileSlug}, e.g. 12x-umami.
+   *
+   * @param {string} drupalMajor
+   * @param {string} installProfile machine value (e.g. demo_umami)
+   * @returns {string}
+   */
+  function workspaceNameFromCoreChoices(drupalMajor, installProfile) {
+    const verKey = String(drupalMajor);
+    const verSlug = VERSION_SLUG[verKey] || (verKey + 'x');
+    const slug = PROFILE_SLUG[installProfile] || String(installProfile).replace(/_/g, '-');
+    return verSlug + '-' + slug;
+  }
+
+  /**
+   * Issue picker: version + profile + (branch name if multiple branch options, else issue NID).
+   * Falls back to the issue NID when a branch-based name exceeds MAX_WORKSPACE_NAME_LENGTH.
+   *
+   * @param {string} drupalMajor
+   * @param {string} installProfile
+   * @param {string|number} issueNid
+   * @param {string} branchName selected branch
+   * @param {number} branchOptionCount branches shown in the picker (>1 means disambiguate with branch)
+   * @returns {string}
+   */
+  function suggestedIssueForkWorkspaceName(drupalMajor, installProfile, issueNid, branchName, branchOptionCount) {
+    const base = workspaceNameFromCoreChoices(drupalMajor, installProfile);
+    const nidSeg = String(issueNid);
+    const withNid = sanitizeWorkspaceName(base + '-' + nidSeg);
+
+    if (branchOptionCount > 1 && branchName) {
+      const withBranch = sanitizeWorkspaceName(base + '-' + branchName);
+      if (withBranch.length > MAX_WORKSPACE_NAME_LENGTH) {
+        return withNid;
+      }
+      return withBranch;
+    }
+
+    return withNid;
+  }
+
+  /**
+   * @param {string} name raw or sanitized workspace name candidate
+   * @returns {{ valid: boolean, sanitized: string, message: string }}
+   */
+  function validateWorkspaceName(name) {
+    const sanitized = sanitizeWorkspaceName(name);
+    if (sanitized.length > MAX_WORKSPACE_NAME_LENGTH) {
+      return {
+        valid: false,
+        sanitized: sanitized,
+        message: WORKSPACE_NAME_TOO_LONG_MESSAGE,
+      };
+    }
+    return {
+      valid: true,
+      sanitized: sanitized,
+      message: '',
+    };
+  }
+
+  /**
+   * Show or clear inline validation on a workspace name field.
+   *
+   * @param {string} inputId
+   * @param {string} errorId
+   * @returns {{ valid: boolean, sanitized: string, message: string }|null}
+   */
+  function applyWorkspaceNameFieldValidation(inputId, errorId) {
+    const input = document.getElementById(inputId);
+    const errorEl = document.getElementById(errorId);
+    if (!input || !errorEl) {
+      return null;
+    }
+
+    const result = validateWorkspaceName(input.value.trim());
+    if (result.valid) {
+      input.removeAttribute('aria-invalid');
+      errorEl.textContent = '';
+      errorEl.hidden = true;
+    } else {
+      input.setAttribute('aria-invalid', 'true');
+      errorEl.textContent = result.message;
+      errorEl.hidden = false;
+    }
+
+    return result;
+  }
+
+  /**
+   * @param {string} inputId
+   * @param {string} errorId
+   * @param {function(): void} [onChange]
+   */
+  function bindWorkspaceNameFieldValidation(inputId, errorId, onChange) {
+    const input = document.getElementById(inputId);
+    if (!input) {
+      return;
+    }
+
+    const run = function () {
+      applyWorkspaceNameFieldValidation(inputId, errorId);
+      if (onChange) {
+        onChange();
+      }
+    };
+
+    input.addEventListener('input', run);
+    input.addEventListener('change', run);
+  }
+
+  global.CoderWorkspace = {
+    MAX_WORKSPACE_NAME_LENGTH: MAX_WORKSPACE_NAME_LENGTH,
+    WORKSPACE_NAME_TOO_LONG_MESSAGE: WORKSPACE_NAME_TOO_LONG_MESSAGE,
+    PROFILE_SLUG: PROFILE_SLUG,
+    VERSION_SLUG: VERSION_SLUG,
+    sanitizeWorkspaceName: sanitizeWorkspaceName,
+    workspaceNameFromCoreChoices: workspaceNameFromCoreChoices,
+    suggestedIssueForkWorkspaceName: suggestedIssueForkWorkspaceName,
+    validateWorkspaceName: validateWorkspaceName,
+    applyWorkspaceNameFieldValidation: applyWorkspaceNameFieldValidation,
+    bindWorkspaceNameFieldValidation: bindWorkspaceNameFieldValidation,
+  };
+})(typeof window !== 'undefined' ? window : this);
diff --git a/docs/components.html b/docs/components.html
new file mode 100644
index 0000000..fd008cb
--- /dev/null
+++ b/docs/components.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Component reference — DDEV Coder Workspaces</title>
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="stylesheet" href="coder-ddev-start.css">
+</head>
+<body class="cds-body">
+  <a class="cds-skip-link" href="#main-content">Skip to main content</a>
+
+  <header class="cds-page-header">
+    <a class="cds-link" href="/">DDEV Coder Workspaces</a>
+    <span class="cds-page-header__sep" aria-hidden="true">/</span>
+    <span class="cds-page-header__title">Component reference</span>
+  </header>
+
+  <div class="cds-page" id="main-content">
+    <h1>Component reference</h1>
+    <p class="cds-page__subtitle">Patterns from <code>coder-ddev-start.css</code> used across start.coder.ddev.com static pages, the Jekyll docs layout, and access-denied. Keep one source of truth here; use page-local styles only for layout quirks.</p>
+
+    <hr class="cds-divider">
+
+    <h2 class="cds-pattern-title">Documentation nav + prose</h2>
+    <p class="cds-note">Jekyll guides use <code>.cds-doc-nav</code> + <code>.cds-doc-main</code> (see <code>_layouts/default.html</code>).</p>
+    <div class="cds-preview-box">
+      <nav class="cds-doc-nav" aria-label="Example site nav">
+        <a class="cds-link" href="/">← DDEV Coder Workspaces</a>
+      </nav>
+      <div class="cds-doc-main cds-doc-main--demo-top">
+        <h1>Sample guide title</h1>
+        <p>Body copy uses <code>var(--text-secondary)</code>. <a href="#">Inline link</a> matches brand.</p>
+        <h2>Section</h2>
+        <ul>
+          <li>List item one</li>
+          <li>List item two</li>
+        </ul>
+        <p><code>inline code</code> and a block:</p>
+        <pre><code>ddev start
+ddev describe</code></pre>
+        <blockquote>
+          <p>Blockquotes in Markdown render as <code>&lt;blockquote&gt;</code> inside <code>.cds-doc-main</code> — no extra class needed.</p>
+          <cite>Example citation</cite>
+        </blockquote>
+      </div>
+    </div>
+
+    <h2 class="cds-pattern-title">Blockquote</h2>
+    <p class="cds-note">Guides: plain <code>&lt;blockquote&gt;</code> under <code>.cds-doc-main</code>. Other pages: add <code>class="cds-blockquote"</code> so the same rules apply outside the doc shell.</p>
+    <blockquote class="cds-blockquote cds-mw-40">
+      <p>Standalone quote — tips, asides, or short excerpts you author by hand on static pages.</p>
+      <cite>Optional attribution or source</cite>
+    </blockquote>
+
+    <h2 class="cds-pattern-title">Tiles + buttons</h2>
+    <div class="cds-tile-grid cds-tile-grid--2">
+      <article class="cds-tile">
+        <p class="cds-tile__eyebrow">Eyebrow</p>
+        <h2 class="cds-tile__title">Tile title</h2>
+        <p class="cds-tile__desc">Short description with secondary text color.</p>
+        <div class="cds-tile__actions">
+          <a class="cds-btn cds-btn--primary" href="#">Primary</a>
+          <a class="cds-btn cds-btn--secondary" href="#">Secondary</a>
+        </div>
+      </article>
+      <article class="cds-tile cds-tile--featured">
+        <p class="cds-tile__eyebrow">Featured</p>
+        <h2 class="cds-tile__title">Outline</h2>
+        <p class="cds-tile__desc">Featured border accent.</p>
+        <div class="cds-tile__actions">
+          <a class="cds-btn cds-btn--outline" href="#">Outline</a>
+        </div>
+      </article>
+    </div>
+
+    <h2 class="cds-pattern-title">Numbered steps</h2>
+    <p class="cds-note">Ordered procedures with circular step counters — apply <code>.cds-steps</code> to an <code>&lt;ol&gt;</code> (homepage “How it works”).</p>
+    <ol class="cds-steps cds-mw-40">
+      <li>First step with <a href="#">a link</a> and <strong>strong</strong> text.</li>
+      <li>Second step with nested copy.
+        <p>Paragraph inside the step (e.g. from Markdown).</p>
+      </li>
+      <li>Third step — <code>inline code</code> and a <a class="cds-link" href="#">cds-link</a>.</li>
+    </ol>
+
+    <h2 class="cds-pattern-title">Notes + feedback strip</h2>
+    <section class="cds-notes" aria-labelledby="access">
+      <h2 id="access">Note #1 section title</h2>
+      <p>Notes use <code>&lt;section&gt;</code> + <code>.cds-notes</code> + <code>aria-labelledby</code> with uppercase small <code>&lt;h2&gt;</code>.</p>
+    </section>
+    <hr class="cds-divider">
+    <section class="cds-notes" aria-labelledby="feedback">
+      <h2 id="feedback">Note #2 section title</h2>
+      <p>Notes make be separated by <code>&lt;hr class="cds-divider"&gt;</code> to add a horizontal rule and visually separate the sections.</p>
+    </section>
+
+    <h2 class="cds-pattern-title">Checklist</h2>
+    <p class="cds-note">Bullets with leading check marks — <code>.cds-checklist</code>. Wrap each row in a block element (usually <code>&lt;p&gt;</code>) so multi-line rows stay grouped. Often nested in <code>.cds-callout</code> (see <code>access-denied.html</code>).</p>
+    <div class="cds-callout cds-mw-28">
+      <div class="cds-callout__title">Example qualifier block</div>
+      <ul class="cds-checklist">
+        <li><p>Item with <a href="#">linked detail</a></p></li>
+        <li><p>Plain item</p></li>
+        <li>
+          <p>Third item — lead sentence.</p>
+          <p>Supporting detail in a second paragraph (same row).</p>
+        </li>
+      </ul>
+    </div>
+    <p class="cds-note cds-demo-gap-top">Same list pattern without the callout shell:</p>
+    <ul class="cds-checklist cds-mw-28">
+      <li><p>Docker installed on the host</p></li>
+      <li><p>Sysbox or rootless runtime configured</p></li>
+    </ul>
+
+    <h2 class="cds-pattern-title">Status + launch row</h2>
+    <div class="cds-status cds-status--sample cds-status--loading">Loading example…</div>
+    <div class="cds-status cds-status--sample cds-status--error">Error example.</div>
+    <div class="cds-status cds-status--sample cds-status--info">Info example.</div>
+    <div class="cds-launch-row">
+      <button type="button" class="cds-btn-open">Launch DDEV Coder environment</button>
+      <p class="cds-launch-note">Opens in a new tab.</p>
+    </div>
+
+    <h2 class="cds-pattern-title">Access gate</h2>
+    <p class="cds-note">Used on <code>access-denied.html</code> — centered with <code>.cds-access-denied</code>; card uses <code>.cds-gate-card</code>, checklist <code>.cds-checklist</code>.</p>
+    <div class="cds-preview-box cds-preview-box--dashed">
+      <div class="cds-gate-card">
+        <div class="cds-emoji-hero" aria-hidden="true">🔒</div>
+        <h1>Access Required</h1>
+        <p class="cds-gate-subtitle">Subtitle in muted tone.</p>
+        <div class="cds-callout">
+          <div class="cds-callout__title">Callout title</div>
+          <ul class="cds-checklist">
+            <li><p>Checklist item with <a href="#">link</a></p></li>
+          </ul>
+        </div>
+        <div class="cds-stack">
+          <a class="cds-btn cds-btn--primary cds-btn--block" href="#">Primary block</a>
+          <a class="cds-link" href="#">Text link</a>
+        </div>
+      </div>
+    </div>
+
+    <h2 class="cds-pattern-title">Field + URL hint</h2>
+    <div class="cds-fields cds-mw-28">
+      <div class="cds-field">
+        <label for="demo-ws">Workspace name</label>
+        <input id="demo-ws" type="text" value="12x-umami" readonly>
+        <div class="cds-hint cds-hint--url">URL pattern: <code>https://ddev-web--<span>12x-umami</span>--username.coder.ddev.com/</code></div>
+      </div>
+    </div>
+
+    <p class="cds-muted-row cds-demo-gap-section">
+      <a href="/">← Home</a> · <a href="https://github.com/ddev/coder-ddev">ddev/coder-ddev</a> · <a href="components.html">This page</a>
+    </p>
+  </div>
+
+</body>
+</html>
diff --git a/docs/drupal-core.html b/docs/drupal-core.html
new file mode 100644
index 0000000..024ec45
--- /dev/null
+++ b/docs/drupal-core.html
@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Drupal core — DDEV Coder Workspaces</title>
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="stylesheet" href="coder-ddev-start.css">
+</head>
+<body class="cds-body">
+  <a class="cds-skip-link" href="#main-content">Skip to main content</a>
+
+  <header class="cds-page-header">
+    <a class="cds-link" href="/">DDEV Coder Workspaces</a>
+    <span class="cds-page-header__sep" aria-hidden="true">/</span>
+    <span class="cds-page-header__title">Drupal core</span>
+  </header>
+
+  <div class="cds-page" id="main-content">
+    <h1>Drupal core</h1>
+    <p class="cds-page__subtitle">Choose a major version and install profile, then open your workspace in Coder.</p>
+
+    <div class="cds-note cds-note--intro">
+      If working on a Drupal core or contrib issue fork or need to test the mainline branch of a contrib project, try the <a class="cds-link" href="drupal-issue">Drupal Issue Picker</a>.
+    </div>
+
+    <div class="cds-status" id="status" role="alert" aria-live="polite"></div>
+
+    <div class="cds-fields">
+      <div>
+        <span class="cds-field__label" id="label-version">Drupal version</span>
+        <div class="cds-radio-row" role="radiogroup" aria-labelledby="label-version">
+          <label class="cds-pick-card">
+            <input class="cds-pick-card__input cds-sr-only" type="radio" name="drupal_version" value="12" checked>
+            <span class="cds-pick-card__check" aria-hidden="true">
+              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+            </span>
+            <span class="cds-pick-card__text">
+              <span class="cds-pick-card__title">12.x</span>
+              <span class="cds-pick-card__sub">Main branch</span>
+            </span>
+          </label>
+          <label class="cds-pick-card">
+            <input class="cds-pick-card__input cds-sr-only" type="radio" name="drupal_version" value="11">
+            <span class="cds-pick-card__check" aria-hidden="true">
+              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+            </span>
+            <span class="cds-pick-card__text">
+              <span class="cds-pick-card__title">11.x</span>
+              <span class="cds-pick-card__sub">Current stable</span>
+            </span>
+          </label>
+          <label class="cds-pick-card">
+            <input class="cds-pick-card__input cds-sr-only" type="radio" name="drupal_version" value="10">
+            <span class="cds-pick-card__check" aria-hidden="true">
+              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+            </span>
+            <span class="cds-pick-card__text">
+              <span class="cds-pick-card__title">10.x</span>
+              <span class="cds-pick-card__sub">Previous stable</span>
+            </span>
+          </label>
+        </div>
+      </div>
+
+      <div>
+        <span class="cds-field__label" id="label-profile">Install profile</span>
+        <div class="cds-radio-row" role="radiogroup" aria-labelledby="label-profile">
+          <label class="cds-pick-card">
+            <input class="cds-pick-card__input cds-sr-only" type="radio" name="install_profile" value="demo_umami" checked>
+            <span class="cds-pick-card__check" aria-hidden="true">
+              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+            </span>
+            <span class="cds-pick-card__text">
+              <span class="cds-pick-card__title">Demo Umami</span>
+              <span class="cds-pick-card__sub">Fastest on 12.x (snapshot)</span>
+            </span>
+          </label>
+          <label class="cds-pick-card">
+            <input class="cds-pick-card__input cds-sr-only" type="radio" name="install_profile" value="minimal">
+            <span class="cds-pick-card__check" aria-hidden="true">
+              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+            </span>
+            <span class="cds-pick-card__text">
+              <span class="cds-pick-card__title">Minimal</span>
+              <span class="cds-pick-card__sub">Lean install</span>
+            </span>
+          </label>
+          <label class="cds-pick-card">
+            <input class="cds-pick-card__input cds-sr-only" type="radio" name="install_profile" value="standard">
+            <span class="cds-pick-card__check" aria-hidden="true">
+              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+            </span>
+            <span class="cds-pick-card__text">
+              <span class="cds-pick-card__title">Standard</span>
+              <span class="cds-pick-card__sub">Default extras</span>
+            </span>
+          </label>
+        </div>
+      </div>
+
+      <div>
+        <span class="cds-field__label" id="label-site-visibility">Site visibility</span>
+        <p class="cds-share-intro">Who can open the Drupal site URL. Switch to <strong>Public</strong> in Coder later if you need a shareable link.</p>
+        <div class="cds-radio-row" role="radiogroup" aria-labelledby="label-site-visibility">
+          <label class="cds-pick-card">
+            <input class="cds-pick-card__input cds-sr-only" type="radio" name="share_drupal_site" value="owner" checked>
+            <span class="cds-pick-card__check" aria-hidden="true">
+              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+            </span>
+            <span class="cds-pick-card__text">
+              <span class="cds-pick-card__title">Private</span>
+              <span class="cds-pick-card__sub">Owner only</span>
+            </span>
+          </label>
+          <label class="cds-pick-card">
+            <input class="cds-pick-card__input cds-sr-only" type="radio" name="share_drupal_site" value="authenticated">
+            <span class="cds-pick-card__check" aria-hidden="true">
+              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+            </span>
+            <span class="cds-pick-card__text">
+              <span class="cds-pick-card__title">Authenticated</span>
+              <span class="cds-pick-card__sub">Any Coder user</span>
+            </span>
+          </label>
+          <label class="cds-pick-card">
+            <input class="cds-pick-card__input cds-sr-only" type="radio" name="share_drupal_site" value="public">
+            <span class="cds-pick-card__check" aria-hidden="true">
+              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+            </span>
+            <span class="cds-pick-card__text">
+              <span class="cds-pick-card__title">Public</span>
+              <span class="cds-pick-card__sub">Anyone with the link</span>
+            </span>
+          </label>
+        </div>
+      </div>
+
+      <div class="cds-field">
+        <label class="cds-field__label" for="workspace-name">Workspace name</label>
+        <input type="text" id="workspace-name" value="" autocomplete="off" spellcheck="false" maxlength="128" aria-describedby="workspace-name-hint workspace-name-error">
+        <div class="cds-hint" id="workspace-name-hint">Used to generate the URL. Must be lowercase letters, numbers, and hyphens only.</div>
+        <div class="cds-field-error" id="workspace-name-error" role="alert" hidden></div>
+        <div class="hint cds-hint--url">E.g. <code>https://ddev-web--<span id="core-workspace-url-slug"></span>--username.coder.ddev.com/</code></div>
+      </div>
+    </div>
+
+    <div class="cds-launch-row">
+      <button type="button" class="cds-btn-open" id="open-btn" aria-describedby="launch-tab-hint-core">Launch DDEV Coder environment</button>
+      <p class="cds-launch-note" id="launch-tab-hint-core">Opens Coder in a new tab — confirm creation when prompted.</p>
+    </div>
+
+    <hr class="cds-divider">
+
+    <section class="cds-notes" aria-labelledby="access">
+      <h2 id="access">Access</h2>
+      <p>Requires a GitHub account — <a class="cds-link" href="https://coder.ddev.com/login">sign in at coder.ddev.com</a> first.</p>
+
+      <h2 id="install-profiles">Install profiles</h2>
+      <p><strong>Demo Umami on Drupal 12</strong> can use a pre-built snapshot for a quicker first boot. <strong>Minimal</strong>, <strong>Standard</strong>, and Drupal 11.x and 10.x always run a full site install.</p>
+
+      <h2 id="workspace-names">Workspace name</h2>
+      <p>A suggested workspace name is auto-generated from the parameters above. It may be changed before clicking launch.</p>
+    </section>
+
+    <hr class="cds-divider">
+
+    <section class="cds-notes" aria-labelledby="feedback">
+      <h2 id="feedback">Feedback &amp; Community</h2>
+      <p class="cds-feedback">Problems or ideas? <a class="cds-link" href="https://github.com/ddev/coder-ddev/issues">ddev/coder-ddev issues</a> · Drupal Slack <strong>#ddev</strong> · <a class="cds-link" href="https://ddev.com/s/discord">DDEV Discord</a>.</p>
+    </section>
+  </div>
+
+  <script src="coder-workspace-name.js"></script>
+  <script>
+    const CODER_BASE = 'https://coder.ddev.com';
+    const CODER_TEMPLATE_CORE = 'coder/drupal-core';
+    const { sanitizeWorkspaceName, workspaceNameFromCoreChoices, applyWorkspaceNameFieldValidation, bindWorkspaceNameFieldValidation } = window.CoderWorkspace;
+
+    function suggestedWorkspaceName() {
+      const ver = document.querySelector('input[name="drupal_version"]:checked').value;
+      const profile = document.querySelector('input[name="install_profile"]:checked').value;
+      return workspaceNameFromCoreChoices(ver, profile);
+    }
+
+    function syncWorkspaceNameFromChoices() {
+      document.getElementById('workspace-name').value = suggestedWorkspaceName();
+      updateCoreWorkspaceUrlSlug();
+      applyWorkspaceNameFieldValidation('workspace-name', 'workspace-name-error');
+    }
+
+    function updateCoreWorkspaceUrlSlug() {
+      const input = document.getElementById('workspace-name');
+      const span = document.getElementById('core-workspace-url-slug');
+      if (!input || !span) return;
+      const v = input.value.trim();
+      span.textContent = v ? sanitizeWorkspaceName(v) : '\u2026';
+    }
+
+    const CORE_DISABLE_PARAMS = 'issue_fork,issue_branch,drupal_version,install_profile,share_drupal_site';
+
+    function buildCorePlainUrl(drupalVersion, installProfile, workspaceName, shareDrupalSite) {
+      const base = CODER_BASE + '/templates/' + CODER_TEMPLATE_CORE + '/workspace';
+      const params = new URLSearchParams({
+        mode: 'auto',
+        name: sanitizeWorkspaceName(workspaceName),
+        disable_params: CORE_DISABLE_PARAMS,
+        'param.issue_fork': '',
+        'param.issue_branch': '',
+        'param.install_profile': installProfile,
+        'param.drupal_version': drupalVersion,
+        'param.share_drupal_site': shareDrupalSite,
+      });
+      return base + '?' + params.toString();
+    }
+
+    function setError(msg) {
+      const el = document.getElementById('status');
+      if (!msg) {
+        el.textContent = '';
+        el.classList.remove('cds-status--error');
+        return;
+      }
+      el.textContent = msg;
+      el.classList.add('cds-status--error');
+    }
+
+    function openDevEnvironment() {
+      const drupalVersion = document.querySelector('input[name="drupal_version"]:checked').value;
+      const installProfile = document.querySelector('input[name="install_profile"]:checked').value;
+      const rawShare = document.querySelector('input[name="share_drupal_site"]:checked');
+      const shareVal = rawShare ? rawShare.value : '';
+      const shareDrupalSite = ['owner', 'authenticated', 'public'].includes(shareVal) ? shareVal : 'owner';
+      const rawName = document.getElementById('workspace-name').value.trim();
+      let workspaceName = rawName ? sanitizeWorkspaceName(rawName) : suggestedWorkspaceName();
+
+      if (!workspaceName || workspaceName.length < 2) {
+        workspaceName = suggestedWorkspaceName();
+        document.getElementById('workspace-name').value = workspaceName;
+        updateCoreWorkspaceUrlSlug();
+      }
+
+      const validation = applyWorkspaceNameFieldValidation('workspace-name', 'workspace-name-error');
+      if (validation && !validation.valid) {
+        setError('');
+        return;
+      }
+
+      setError('');
+      const url = buildCorePlainUrl(drupalVersion, installProfile, workspaceName, shareDrupalSite);
+      window.open(url, '_blank');
+    }
+
+    document.getElementById('open-btn').addEventListener('click', openDevEnvironment);
+
+    document.getElementById('workspace-name').addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        openDevEnvironment();
+      }
+    });
+
+    bindWorkspaceNameFieldValidation('workspace-name', 'workspace-name-error', updateCoreWorkspaceUrlSlug);
+
+    document.querySelectorAll('input[name="drupal_version"], input[name="install_profile"]').forEach(function(radio) {
+      radio.addEventListener('change', syncWorkspaceNameFromChoices);
+    });
+
+    syncWorkspaceNameFromChoices();
+  </script>
+</body>
+</html>
diff --git a/docs/drupal-issue.html b/docs/drupal-issue.html
index a9bda2a..1ae487a 100644
--- a/docs/drupal-issue.html
+++ b/docs/drupal-issue.html
@@ -5,578 +5,616 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Drupal Issue Picker — DDEV Coder Workspaces</title>
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #0e0e10;
-      color: #e8e8e8;
-      line-height: 1.6;
-      min-height: 100vh;
-    }
-
-    header {
-      padding: 1.25rem 2rem;
-      border-bottom: 1px solid #1c1c1e;
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-    }
-
-    header a {
-      color: #a78bfa;
-      text-decoration: none;
-      font-size: 0.9rem;
-    }
-
-    header a:hover { text-decoration: underline; }
-
-    /* Separator is aria-hidden (decorative), but still needs visible contrast for sighted users.
-       #666 on #0e0e10 gives ~3.6:1, meeting WCAG 1.4.3 (Level AA) for UI text.
-       Previous #444 yielded ~2.3:1 and failed. */
-    header .sep { color: #666; }
-
-    header .title { color: #e8e8e8; font-weight: 600; font-size: 0.9rem; }
-
-    .page {
-      max-width: 640px;
-      margin: 0 auto;
-      padding: 3rem 2rem 5rem;
-    }
-
-    h1 {
-      font-size: 1.75rem;
-      font-weight: 700;
-      letter-spacing: -0.02em;
-      margin-bottom: 0.5rem;
-    }
-
-    .subtitle {
-      color: #777;
-      font-size: 1rem;
-      margin-bottom: 2.5rem;
-    }
-
-    /* ── Input section ───────────────────────────────── */
-    .input-row {
-      display: flex;
-      gap: 0.75rem;
-      margin-bottom: 2rem;
-    }
-
-    .input-row input {
-      flex: 1;
-      background: #161619;
-      /* #636377 on #161619 gives ~3.5:1, meeting WCAG 1.4.11 Non-text Contrast (Level AA) minimum 3:1.
-         Previous #2a2a32 yielded ~1.3:1 and failed. */
-      border: 1px solid #636377;
-      border-radius: 8px;
-      padding: 0.7rem 1rem;
-      color: #e8e8e8;
-      font-size: 0.95rem;
-      outline: none;
-      transition: border-color 0.15s;
-    }
-
-    /* #888 on #161619 gives ~5.9:1 contrast, meeting WCAG 1.4.3 (Level AA) minimum 4.5:1.
-       Previous #555 yielded ~2.4:1 and failed. */
-    .input-row input::placeholder { color: #888; }
-    /* Combined border+outline focus indicator meets WCAG 2.4.11 Focus Appearance (Level AA).
-       outline: none was an anti-pattern; replaced with a visible 2px offset outline. */
-    .input-row input:focus {
-      border-color: #7c5af0;
-      outline: 2px solid #7c5af0;
-      outline-offset: 2px;
-    }
-
-    .btn-load {
-      background: #7c5af0;
-      color: #fff;
-      border: none;
-      border-radius: 8px;
-      padding: 0.7rem 1.25rem;
-      font-size: 0.95rem;
-      font-weight: 600;
-      cursor: pointer;
-      white-space: nowrap;
-      transition: background 0.15s;
-    }
-
-    .btn-load:hover { background: #6d4de0; }
-    .btn-load:disabled { background: #3a3050; color: #777; cursor: not-allowed; }
-    /* WCAG 2.4.11 Focus Appearance (Level AA): explicit focus outline prevents relying on the
-       dim browser default (#21397f) which fails contrast requirements. */
-    .btn-load:focus-visible {
-      outline: 2px solid #c4b5fd;
-      outline-offset: 2px;
-    }
-
-    /* ── Status / error ──────────────────────────────── */
-    .status {
-      font-size: 0.9rem;
-      padding: 0.75rem 1rem;
-      border-radius: 8px;
-      margin-bottom: 1.5rem;
-      display: none;
-    }
-
-    .status.loading {
-      display: block;
-      background: #161619;
-      /* #636377 on #161619 gives ~3.5:1, meeting WCAG 1.4.11 Non-text Contrast (Level AA) minimum 3:1.
-         Previous #2a2a32 yielded ~1.3:1 and failed. */
-      border: 1px solid #636377;
-      color: #999;
-    }
-
-    .status.error {
-      display: block;
-      background: #1f0f0f;
-      border: 1px solid #5a1a1a;
-      color: #f87171;
-    }
-
-    .status.info {
-      display: block;
-      background: #0f1a1f;
-      border: 1px solid #1a4a5a;
-      color: #7dd3fc;
-    }
-
-    /* ── Result form ─────────────────────────────────── */
-    #result-form { display: none; }
-    #plain-dev-form { display: none; }
-
-    .issue-title {
-      font-size: 1.05rem;
-      font-weight: 600;
-      color: #c4b5fd;
-      margin-bottom: 1.75rem;
-      padding: 0.75rem 1rem;
-      background: #13101f;
-      border: 1px solid #2a2040;
-      border-radius: 8px;
-    }
-
-    .issue-title span {
-      display: block;
-      font-size: 0.75rem;
-      font-weight: 400;
-      /* #888 on #13101f gives ~4.9:1, meeting WCAG 1.4.3 (Level AA) minimum 4.5:1 for normal text.
-         Previous #666 yielded ~3.4:1 and failed. */
-      color: #888;
-      margin-bottom: 0.2rem;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-    }
-
-    .template-badge {
-      display: inline-block;
-      font-size: 0.7rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      padding: 0.15rem 0.5rem;
-      border-radius: 4px;
-      margin-top: 0.4rem;
-    }
-
-    .template-badge.core {
-      background: #1a2a1a;
-      color: #86efac;
-      border: 1px solid #166534;
-    }
-
-    .template-badge.contrib {
-      background: #1a1a2a;
-      color: #a78bfa;
-      border: 1px solid #3730a3;
-    }
-
-    .fields {
-      display: flex;
-      flex-direction: column;
-      gap: 1.25rem;
-      margin-bottom: 2rem;
-    }
-
-    .field label {
-      display: block;
-      font-size: 0.8rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.07em;
-      color: #777;
-      margin-bottom: 0.4rem;
-    }
-
-    .field select,
-    .field input[type="text"] {
-      width: 100%;
-      background: #161619;
-      /* #636377 on #161619 gives ~3.5:1 — WCAG 1.4.11 Non-text Contrast (Level AA) requires 3:1.
-         Previous #2a2a32 yielded ~1.3:1 and failed. */
-      border: 1px solid #636377;
-      border-radius: 8px;
-      padding: 0.65rem 1rem;
-      color: #e8e8e8;
-      font-size: 0.95rem;
-      outline: none;
-      transition: border-color 0.15s;
-      appearance: none;
-    }
-
-    .field select {
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23777' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
-      background-repeat: no-repeat;
-      background-position: right 1rem center;
-      padding-right: 2.5rem;
-    }
-
-    .field input[type="text"][readonly] {
-      color: #aaa;
-      cursor: default;
-    }
-
-    /* WCAG 2.4.11 Focus Appearance (Level AA): visible focus indicator with 3:1 contrast.
-       Combined border + outline replaces the single border-color change that was easy to miss. */
-    .field select:focus,
-    .field input[type="text"]:focus {
-      border-color: #7c5af0;
-      outline: 2px solid #7c5af0;
-      outline-offset: 2px;
-    }
-
-    .field .hint {
-      font-size: 0.8rem;
-      /* #888 on #161619 gives ~5.9:1, meeting WCAG 1.4.3 (Level AA) minimum 4.5:1.
-         Previous #555 yielded ~2.5:1 and failed. */
-      color: #888;
-      margin-top: 0.3rem;
-    }
-
-    .btn-open {
-      width: 100%;
-      background: #7c5af0;
-      color: #fff;
-      border: none;
-      border-radius: 8px;
-      padding: 0.85rem 1.5rem;
-      font-size: 1rem;
-      font-weight: 600;
-      cursor: pointer;
-      transition: background 0.15s;
-    }
-
-    .btn-open:hover { background: #6d4de0; }
-    /* WCAG 2.4.11 Focus Appearance (Level AA) */
-    .btn-open:focus-visible {
-      outline: 2px solid #c4b5fd;
-      outline-offset: 2px;
-    }
-
-    /* ── Manual fallback ─────────────────────────────── */
-    #manual-form { display: none; }
-
-    .manual-notice {
-      font-size: 0.85rem;
-      color: #888;
-      margin-bottom: 1.25rem;
-      padding: 0.65rem 0.9rem;
-      background: #111114;
-      border: 1px solid #222228;
-      border-radius: 6px;
-    }
-
-    /* ── Notes ───────────────────────────────────────── */
-    .notes {
-      margin-top: 2.5rem;
-      border-top: 1px solid #1c1c1e;
-      padding-top: 2rem;
-    }
-
-    .notes h2 {
-      font-size: 0.8rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      /* #888 on #0e0e10 gives ~5.9:1, meeting WCAG 1.4.3 (Level AA) minimum 4.5:1 for normal text.
-         Previous #555 yielded ~2.6:1 and failed. */
-      color: #888;
-      margin-bottom: 0.9rem;
-    }
-
-    .notes ul {
-      list-style: none;
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-
-    .notes li {
-      font-size: 0.88rem;
-      /* #888 on #0e0e10 gives ~5.9:1 contrast ratio, meeting WCAG 2.2 §1.4.3 (Level AA) minimum 4.5:1 for normal text.
-         Previous value #666 yielded ~3.6:1 and failed. */
-      color: #888;
-      padding-left: 1rem;
-      position: relative;
-    }
-
-    .notes li::before {
-      content: '·';
-      position: absolute;
-      left: 0;
-      color: #444;
-    }
-
-    code {
-      background: #1a1a1f;
-      border: 1px solid #2a2a30;
-      padding: 0.1em 0.35em;
-      border-radius: 4px;
-      font-family: 'SF Mono', Consolas, monospace;
-      font-size: 0.85em;
-      color: #c4b5fd;
-    }
-
-    /* Visually hidden but available to assistive technology.
-       Use for labels that would be redundant visually but are required for AT.
-       WCAG 1.3.1 Info and Relationships (Level A) */
-    .sr-only {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      border: 0;
-    }
-
-    /* Skip link — visually hidden until focused; lets keyboard users bypass the header nav.
-       WCAG 2.4.1 Bypass Blocks (Level A) */
-    .skip-link {
-      position: absolute;
-      top: -100%;
-      left: 1rem;
-      background: #7c5af0;
-      color: #fff;
-      padding: 0.5rem 1rem;
-      border-radius: 0 0 6px 6px;
-      font-size: 0.9rem;
-      font-weight: 600;
-      text-decoration: none;
-      z-index: 999;
-    }
-    .skip-link:focus { top: 0; }
-  </style>
+  <link rel="stylesheet" href="coder-ddev-start.css">
 </head>
-<body>
+<body class="cds-body">
   <!-- WCAG 2.4.1 Bypass Blocks (Level A): skip link lets keyboard users jump past the site header -->
-  <a class="skip-link" href="#main-content">Skip to main content</a>
+  <a class="cds-skip-link" href="#main-content">Skip to main content</a>
 
-  <header>
-    <a href="/">DDEV Coder Workspaces</a>
+  <header class="cds-page-header">
+    <a class="cds-link" href="/">DDEV Coder Workspaces</a>
     <!-- Decorative separator — hidden from AT to avoid noise; WCAG 1.3.1 Info and Relationships (Level A) -->
-    <span class="sep" aria-hidden="true">/</span>
-    <span class="title">Drupal Issue Picker</span>
+    <span class="cds-page-header__sep" aria-hidden="true">/</span>
+    <span class="cds-page-header__title">Drupal Issue Picker</span>
   </header>
 
   <!-- id="main-content" is the skip link target (WCAG 2.4.1) -->
-  <div class="page" id="main-content">
+  <div class="cds-page" id="main-content">
     <h1>Drupal Issue Picker</h1>
-    <p class="subtitle">Enter a Drupal issue URL or number to launch a workspace. Also accepts a project URL or machine name for plain contrib development (no specific issue).</p>
+    <p class="cds-page__subtitle">Paste a drupal.org core or contrib issue URL or number, or a contrib project URL or machine name. We load issue metadata and fork branches when applicable.</p>
 
-    <div class="input-row">
+    <div class="cds-note cds-note--intro">
+      To create a clean Drupal core environment without contrib modules or issue forks, try the <a class="cds-link" href="drupal-core">Guided Drupal core</a> form.
+    </div>
+
+    <div class="cds-input-row">
       <!-- Explicit <label> associates the field name with the input for screen readers.
            Visually hidden because the heading and subtitle already describe the field.
            WCAG 1.3.1 Info and Relationships / 3.3.2 Labels or Instructions (Level A) -->
-      <label for="issue-input" class="sr-only">Issue number, URL, or project name</label>
+      <label for="issue-input" class="cds-sr-only">Issue number, URL, or project name</label>
       <input type="text" id="issue-input"
         placeholder="e.g. 3568144 · drupal.org/project/drupal/issues/3568144 · drupal.org/project/token"
         autofocus>
-      <button class="btn-load" id="load-btn" onclick="loadInput()">Load</button>
+      <button class="cds-btn-load" id="load-btn" onclick="loadInput()">Load</button>
     </div>
 
     <!-- role="status" announces dynamic updates to screen readers without interrupting current speech.
          WCAG 4.1.3 Status Messages (Level AA) -->
-    <div class="status" id="status" role="status" aria-live="polite"></div>
+    <div class="cds-status" id="status" role="status" aria-live="polite"></div>
 
     <!-- Auto-populated form (issues: both core and contrib) -->
-    <div id="result-form">
-      <div class="issue-title">
-        <span id="result-label">Issue</span>
+    <div id="result-form" class="cds-issue-panel" hidden>
+      <div class="cds-issue-title">
+        <span id="result-label" class="cds-issue-title__label">Issue</span>
         <span id="issue-title-text"></span>
-        <span id="template-badge" class="template-badge"></span>
+        <span id="template-badge" class="cds-template-badge"></span>
       </div>
 
-      <div class="fields">
+      <div class="cds-fields">
         <!-- Branch selector (issues only) -->
-        <div class="field">
+        <div class="cds-field">
           <label for="branch-select">Branch</label>
           <select id="branch-select"></select>
         </div>
 
-        <div class="field">
-          <label for="profile-select">Install Profile</label>
-          <select id="profile-select">
-            <option value="demo_umami">demo_umami</option>
-            <option value="minimal">minimal</option>
-            <option value="standard">standard</option>
-          </select>
-          <div class="hint" id="profile-hint">demo_umami uses a pre-built database snapshot. Issue fork workspaces always run a full site install regardless of profile.</div>
+        <div>
+          <span class="cds-field__label" id="label-result-version">Drupal version</span>
+          <p class="cds-hint" id="result-version-hint">Auto-detected from the issue. Sets the DDEV project type (drupal10/11/12). Changing manually may prevent the workspace from starting.</p>
+          <div class="cds-radio-row" role="radiogroup" aria-labelledby="label-result-version">
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="result_drupal_version" value="12">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">12.x</span>
+                <span class="cds-pick-card__sub">Main branch</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="result_drupal_version" value="11" checked>
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">11.x</span>
+                <span class="cds-pick-card__sub">Current stable</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="result_drupal_version" value="10">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">10.x</span>
+                <span class="cds-pick-card__sub">Previous stable</span>
+              </span>
+            </label>
+          </div>
+        </div>
+
+        <div>
+          <span class="cds-field__label" id="label-result-profile">Install profile</span>
+          <p class="cds-hint" id="profile-hint">Issue fork workspaces always run a full <code>ddev drush si</code>; profile still controls the install choice.</p>
+          <div class="cds-radio-row" role="radiogroup" aria-labelledby="label-result-profile">
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="result_install_profile" value="demo_umami" checked>
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Demo Umami</span>
+                <span class="cds-pick-card__sub">Full install</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="result_install_profile" value="minimal">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Minimal</span>
+                <span class="cds-pick-card__sub">Lean install</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="result_install_profile" value="standard">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Standard</span>
+                <span class="cds-pick-card__sub">Default extras</span>
+              </span>
+            </label>
+          </div>
         </div>
 
-        <div class="field">
-          <label for="drupal-version-select">Drupal Version</label>
-          <select id="drupal-version-select">
-            <option value="12">12.x (HEAD / upcoming)</option>
-            <option value="11">11.x (stable)</option>
-            <option value="10">10.x (stable)</option>
-          </select>
-          <div class="hint">Auto-detected from the issue. Sets the DDEV project type (drupal10/11/12).</div>
+        <div>
+          <span class="cds-field__label" id="label-result-site-visibility">Site visibility</span>
+          <p class="cds-share-intro">Who can open the Drupal site URL. Switch to <strong>Public</strong> in Coder later if you need a shareable link.</p>
+          <div class="cds-radio-row" role="radiogroup" aria-labelledby="label-result-site-visibility">
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="result_share_drupal_site" value="owner" checked>
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Private</span>
+                <span class="cds-pick-card__sub">Owner only</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="result_share_drupal_site" value="authenticated">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Authenticated</span>
+                <span class="cds-pick-card__sub">Any Coder user</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="result_share_drupal_site" value="public">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Public</span>
+                <span class="cds-pick-card__sub">Anyone with the link</span>
+              </span>
+            </label>
+          </div>
         </div>
 
-        <div class="field">
+        <div class="cds-field">
           <label for="workspace-name">Workspace Name</label>
-          <input type="text" id="workspace-name" placeholder="issue-3568144">
-          <div class="hint">Must be lowercase letters, numbers, and hyphens only.</div>
+          <input type="text" id="workspace-name" placeholder="12x-umami-3568144" maxlength="128" autocomplete="off" spellcheck="false" aria-describedby="issue-result-workspace-name-hint workspace-name-error">
+          <div class="cds-hint" id="issue-result-workspace-name-hint">Used to generate the URL. Must be lowercase letters, numbers, and hyphens only.</div>
+          <div class="cds-field-error" id="workspace-name-error" role="alert" hidden></div>
+          <div class="hint cds-hint--url">E.g. <code>https://ddev-web--<span id="issue-result-workspace-url-slug"></span>--username.coder.ddev.com/</code></div>
         </div>
       </div>
 
-      <button class="btn-open" onclick="openWorkspace()">Open Dev Environment</button>
+      <div class="cds-launch-row">
+        <button type="button" class="cds-btn-open" onclick="openWorkspace()" aria-describedby="launch-tab-hint-issue">Launch DDEV Coder environment</button>
+        <p class="cds-launch-note" id="launch-tab-hint-issue">Opens Coder in a new tab — confirm creation when prompted.</p>
+      </div>
     </div>
 
     <!-- Plain contrib dev form (project URL or machine name, no issue) -->
-    <div id="plain-dev-form">
-      <div class="issue-title">
-        <span>Contrib Project</span>
+    <div id="plain-dev-form" class="cds-issue-panel" hidden>
+      <div class="cds-issue-title">
+        <span class="cds-issue-title__label">Contrib Project</span>
         <span id="plain-project-display"></span>
-        <span class="template-badge contrib">drupal-contrib template</span>
+        <span class="cds-template-badge cds-template-badge--contrib">drupal-contrib template</span>
       </div>
 
-      <div class="fields">
-        <div class="field">
-          <label for="plain-drupal-version">Drupal Version</label>
-          <select id="plain-drupal-version">
-            <option value="11">11.x (stable)</option>
-            <option value="12">12.x (HEAD / upcoming)</option>
-            <option value="10">10.x (stable)</option>
-          </select>
-          <div class="hint">Sets the Drupal version installed as a dev dependency.</div>
+      <div class="cds-fields">
+        <div>
+          <span class="cds-field__label" id="label-plain-version">Drupal version</span>
+          <p class="cds-hint">Sets the Drupal version installed as a dev dependency.</p>
+          <div class="cds-radio-row" role="radiogroup" aria-labelledby="label-plain-version">
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="plain_drupal_version" value="12">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">12.x</span>
+                <span class="cds-pick-card__sub">Main branch</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="plain_drupal_version" value="11" checked>
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">11.x</span>
+                <span class="cds-pick-card__sub">Current stable</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="plain_drupal_version" value="10">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">10.x</span>
+                <span class="cds-pick-card__sub">Previous stable</span>
+              </span>
+            </label>
+          </div>
         </div>
 
-        <div class="field">
-          <label for="plain-profile">Install Profile</label>
-          <select id="plain-profile">
-            <option value="minimal">minimal</option>
-            <option value="standard">standard</option>
-            <option value="demo_umami">demo_umami</option>
-          </select>
-          <div class="hint">minimal is recommended for contrib development.</div>
+        <div>
+          <span class="cds-field__label" id="label-plain-profile">Install profile</span>
+          <p class="cds-hint">Minimal is recommended for contrib development.</p>
+          <div class="cds-radio-row" role="radiogroup" aria-labelledby="label-plain-profile">
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="plain_install_profile" value="demo_umami">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Demo Umami</span>
+                <span class="cds-pick-card__sub">Full install</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="plain_install_profile" value="minimal" checked>
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Minimal</span>
+                <span class="cds-pick-card__sub">Lean install</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="plain_install_profile" value="standard">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Standard</span>
+                <span class="cds-pick-card__sub">Default extras</span>
+              </span>
+            </label>
+          </div>
         </div>
 
-        <div class="field">
+        <div>
+          <span class="cds-field__label" id="label-plain-site-visibility">Site visibility</span>
+          <p class="cds-share-intro">Who can open the Drupal site URL. Switch to <strong>Public</strong> in Coder later if you need a shareable link.</p>
+          <div class="cds-radio-row" role="radiogroup" aria-labelledby="label-plain-site-visibility">
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="plain_share_drupal_site" value="owner" checked>
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Private</span>
+                <span class="cds-pick-card__sub">Owner only</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="plain_share_drupal_site" value="authenticated">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Authenticated</span>
+                <span class="cds-pick-card__sub">Any Coder user</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="plain_share_drupal_site" value="public">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Public</span>
+                <span class="cds-pick-card__sub">Anyone with the link</span>
+              </span>
+            </label>
+          </div>
+        </div>
+
+        <div class="cds-field">
           <label for="plain-workspace-name">Workspace Name</label>
-          <input type="text" id="plain-workspace-name" placeholder="my-token-dev">
-          <div class="hint">Must be lowercase letters, numbers, and hyphens only.</div>
+          <input type="text" id="plain-workspace-name" placeholder="11x-minimal-token" maxlength="128" autocomplete="off" spellcheck="false" aria-describedby="issue-plain-workspace-name-hint plain-workspace-name-error">
+          <div class="cds-hint" id="issue-plain-workspace-name-hint">Used to generate the URL. Must be lowercase letters, numbers, and hyphens only.</div>
+          <div class="cds-field-error" id="plain-workspace-name-error" role="alert" hidden></div>
+          <div class="hint cds-hint--url">E.g. <code>https://ddev-web--<span id="issue-plain-workspace-url-slug"></span>--username.coder.ddev.com/</code></div>
         </div>
       </div>
 
-      <button class="btn-open" onclick="openPlainDevWorkspace()">Open Dev Environment</button>
+      <div class="cds-launch-row">
+        <button type="button" class="cds-btn-open" onclick="openPlainDevWorkspace()" aria-describedby="launch-tab-hint-plain">Launch DDEV Coder environment</button>
+        <p class="cds-launch-note" id="launch-tab-hint-plain">Opens Coder in a new tab — confirm creation when prompted.</p>
+      </div>
     </div>
 
     <!-- Manual fallback form (shown on API error) -->
-    <div id="manual-form">
-      <div class="manual-notice">
+    <div id="manual-form" class="cds-issue-panel" hidden>
+      <div class="cds-manual-notice">
         Could not fetch issue data automatically. Enter values manually below.
       </div>
 
-      <div class="fields">
-        <div class="field">
+      <div class="cds-fields">
+        <div class="cds-field">
           <label for="manual-fork">Issue Fork Name</label>
           <input type="text" id="manual-fork" placeholder="drupal-3568144">
-          <div class="hint">For core: drupal-{issue}. For contrib: {module}-{issue}</div>
+          <div class="cds-hint">For core: drupal-{issue}. For contrib: {module}-{issue}</div>
         </div>
 
-        <div class="field">
+        <div class="cds-field">
           <label for="manual-branch">Issue Branch</label>
           <input type="text" id="manual-branch" placeholder="3568144-editorfilterxss-11.x">
         </div>
 
-        <div class="field">
-          <label for="manual-profile">Install Profile</label>
-          <select id="manual-profile">
-            <option value="demo_umami">demo_umami</option>
-            <option value="minimal">minimal</option>
-            <option value="standard">standard</option>
-          </select>
+        <div>
+          <span class="cds-field__label" id="label-manual-version">Drupal version</span>
+          <div class="cds-radio-row" role="radiogroup" aria-labelledby="label-manual-version">
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="manual_drupal_version" value="12" checked>
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">12.x</span>
+                <span class="cds-pick-card__sub">Main branch</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="manual_drupal_version" value="11">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">11.x</span>
+                <span class="cds-pick-card__sub">Current stable</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="manual_drupal_version" value="10">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">10.x</span>
+                <span class="cds-pick-card__sub">Previous stable</span>
+              </span>
+            </label>
+          </div>
         </div>
 
-        <div class="field">
-          <label for="manual-drupal-version">Drupal Version</label>
-          <select id="manual-drupal-version">
-            <option value="12">12.x (HEAD / upcoming)</option>
-            <option value="11">11.x (stable)</option>
-            <option value="10">10.x (stable)</option>
-          </select>
+        <div>
+          <span class="cds-field__label" id="label-manual-profile">Install profile</span>
+          <div class="cds-radio-row" role="radiogroup" aria-labelledby="label-manual-profile">
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="manual_install_profile" value="demo_umami" checked>
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Demo Umami</span>
+                <span class="cds-pick-card__sub">Full install</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="manual_install_profile" value="minimal">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Minimal</span>
+                <span class="cds-pick-card__sub">Lean install</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="manual_install_profile" value="standard">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Standard</span>
+                <span class="cds-pick-card__sub">Default extras</span>
+              </span>
+            </label>
+          </div>
         </div>
 
-        <div class="field">
+        <div>
+          <span class="cds-field__label" id="label-manual-site-visibility">Site visibility</span>
+          <p class="cds-share-intro">Who can open the Drupal site URL. Switch to <strong>Public</strong> in Coder later if you need a shareable link.</p>
+          <div class="cds-radio-row" role="radiogroup" aria-labelledby="label-manual-site-visibility">
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="manual_share_drupal_site" value="owner" checked>
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Private</span>
+                <span class="cds-pick-card__sub">Owner only</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="manual_share_drupal_site" value="authenticated">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Authenticated</span>
+                <span class="cds-pick-card__sub">Any Coder user</span>
+              </span>
+            </label>
+            <label class="cds-pick-card">
+              <input class="cds-pick-card__input cds-sr-only" type="radio" name="manual_share_drupal_site" value="public">
+              <span class="cds-pick-card__check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 12.5L10.5 17 18 8"/></svg>
+              </span>
+              <span class="cds-pick-card__text">
+                <span class="cds-pick-card__title">Public</span>
+                <span class="cds-pick-card__sub">Anyone with the link</span>
+              </span>
+            </label>
+          </div>
+        </div>
+
+        <div class="cds-field">
           <label for="manual-workspace-name">Workspace Name</label>
-          <input type="text" id="manual-workspace-name" placeholder="issue-3568144">
+          <input type="text" id="manual-workspace-name" placeholder="12x-umami-3568144" maxlength="128" autocomplete="off" spellcheck="false" aria-describedby="issue-manual-workspace-name-hint manual-workspace-name-error">
+          <div class="cds-hint" id="issue-manual-workspace-name-hint">Used to generate the URL. Must be lowercase letters, numbers, and hyphens only.</div>
+          <div class="cds-field-error" id="manual-workspace-name-error" role="alert" hidden></div>
+          <div class="hint cds-hint--url">E.g. <code>https://ddev-web--<span id="issue-manual-workspace-url-slug"></span>--username.coder.ddev.com/</code></div>
         </div>
       </div>
 
-      <button class="btn-open" onclick="openManualWorkspace()">Open Dev Environment</button>
+      <div class="cds-launch-row">
+        <button type="button" class="cds-btn-open" onclick="openManualWorkspace()" aria-describedby="launch-tab-hint-manual">Launch DDEV Coder environment</button>
+        <p class="cds-launch-note" id="launch-tab-hint-manual">Opens Coder in a new tab — confirm creation when prompted.</p>
+      </div>
     </div>
 
-    <div class="notes">
-      <h2>Notes</h2>
-      <ul>
-        <li>Requires a GitHub account — <a href="https://coder.ddev.com/login" style="color:#a78bfa">sign in at coder.ddev.com</a> first</li>
-        <li>Core issues use the <strong>drupal-core</strong> template; contrib issues use the <strong>drupal-contrib</strong> template — detected automatically</li>
-        <li>Issue fork workspaces always run a full <code>ddev drush si</code> (branch code may differ from the cached database)</li>
-        <li>The <code>demo_umami</code> fast path (about a minute) is only used for standard Drupal core without an issue fork</li>
-        <li>Issue fork must exist on <a href="https://git.drupalcode.org" style="color:#a78bfa">git.drupalcode.org</a> — click "Get push access" on the issue page to create one</li>
-        <li>Contrib dev without an issue: enter a project URL like <code>drupal.org/project/token</code> or just the machine name <code>token</code></li>
-      </ul>
-    </div>
+    <hr class="cds-divider">
 
-    <div class="notes" style="margin-top:1.5rem;">
-      <h2>Feedback &amp; Community</h2>
-      <p style="color:#999;font-size:0.95rem;line-height:1.7;">Any problems or friction? Create an issue at <a href="https://github.com/ddev/coder-ddev/issues" style="color:#a78bfa;">ddev/coder-ddev</a> or join us for conversation on Drupal Slack <strong>#ddev</strong> or <a href="https://ddev.com/s/discord" style="color:#a78bfa;">DDEV Discord</a>.</p>
-    </div>
+    <section class="cds-notes" aria-labelledby="access">
+      <h2 id="access">Access</h2>
+      <p>Requires a GitHub account — <a class="cds-link" href="https://coder.ddev.com/login">sign in at coder.ddev.com</a> first.</p>
+
+      <h2 id="install-profiles">Install profiles</h2>
+      <p><strong>Demo Umami on Drupal 12</strong> can use a pre-built snapshot for a quicker first boot. <strong>Minimal</strong>, <strong>Standard</strong>, and Drupal 11.x and 10.x always run a full site install.</p>
+
+      <h2 id="templates">Coder Workspace Templates</h2>
+      <p>Core issues use the <strong>drupal-core</strong> template; contrib issues and project-only dev use <strong>drupal-contrib</strong>. The picker chooses automatically from the issue or project you load.</p>
+
+      <h2 id="workspace-names">Workspace name</h2>
+      <p>A suggested workspace name is auto-generated from the parameters above. It may be changed before clicking launch.</p>
+
+      <h2 id="issue-forks">Issue forks</h2>
+      <p>An issue fork must already exist on <a class="cds-link" href="https://git.drupalcode.org">git.drupalcode.org</a> — use <strong>Get push access</strong> on the drupal.org issue to create one, then reload here.</p>
+      <p>Issue fork workspaces always run a full <code>ddev drush si</code> so the checked-out branch matches the running site (not a stale snapshot).</p>
+    </section>
+
+    <hr class="cds-divider">
+
+    <section class="cds-notes" aria-labelledby="feedback">
+      <h2 id="feedback">Feedback &amp; Community</h2>
+      <p class="cds-feedback">Problems or ideas? <a class="cds-link" href="https://github.com/ddev/coder-ddev/issues">ddev/coder-ddev issues</a> · Drupal Slack <strong>#ddev</strong> · <a class="cds-link" href="https://ddev.com/s/discord">DDEV Discord</a>.</p>
+    </section>
   </div>
 
+  <script src="coder-workspace-name.js"></script>
   <script>
     const CODER_BASE = 'https://coder.ddev.com';
     const CODER_TEMPLATE_CORE   = 'coder/drupal-core';
     const CODER_TEMPLATE_CONTRIB = 'coder/drupal-contrib';
+    const { sanitizeWorkspaceName, workspaceNameFromCoreChoices, suggestedIssueForkWorkspaceName, applyWorkspaceNameFieldValidation, bindWorkspaceNameFieldValidation } = window.CoderWorkspace;
+
+    function updateWorkspaceUrlSlug(inputId, spanId) {
+      const input = document.getElementById(inputId);
+      const span = document.getElementById(spanId);
+      if (!input || !span) return;
+      const v = input.value.trim();
+      span.textContent = v ? sanitizeWorkspaceName(v) : '\u2026';
+    }
+
+    function bindWorkspaceUrlSlugLive(inputId, spanId, errorId) {
+      const input = document.getElementById(inputId);
+      if (!input) return;
+      const go = function () {
+        updateWorkspaceUrlSlug(inputId, spanId);
+        if (errorId) {
+          applyWorkspaceNameFieldValidation(inputId, errorId);
+        }
+      };
+      input.addEventListener('input', go);
+      input.addEventListener('change', go);
+      go();
+    }
 
     // State for the current loaded result
     let currentIssueFork = '';   // fork name: 'drupal-NID' for core, '{module}-NID' for contrib
     let currentNid = '';
     let currentProjectName = ''; // 'drupal' for core, module machine name for contrib
     let currentIsContrib = false;
+    let currentProjectType = 'module'; // 'module' or 'theme' for drupal-contrib template
+
+    function normalizeProjectType(rawType) {
+      const t = String(rawType || '').toLowerCase();
+      if (t === 'theme' || t === 'project_theme' || t.indexOf('theme') !== -1) {
+        return 'theme';
+      }
+      return 'module';
+    }
+
+    async function fetchDrupalOrgProjectType(projectName) {
+      try {
+        const resp = await fetch(
+          'https://www.drupal.org/api-d7/node.json?field_project_machine_name='
+            + encodeURIComponent(projectName)
+        );
+        if (!resp.ok) return 'module';
+        const data = await resp.json();
+        const project = data.list && data.list[0];
+        if (!project) return 'module';
+        // field_project_type is "full" for both modules and themes; node type is reliable.
+        return normalizeProjectType(project.type);
+      } catch (_) {
+        return 'module';
+      }
+    }
+
+    function getResultBranchOptionCount() {
+      const sel = document.getElementById('branch-select');
+      return sel && sel.options ? sel.options.length : 0;
+    }
+
+    function getCheckedRadioValue(name) {
+      const el = document.querySelector('input[name="' + name + '"]:checked');
+      return el ? el.value : '';
+    }
+
+    function setCheckedRadioValue(name, value) {
+      const el = document.querySelector('input[name="' + name + '"][value="' + value + '"]');
+      if (el) el.checked = true;
+    }
+
+    function syncResultWorkspaceName() {
+      if (!currentNid) return;
+      const dv = getCheckedRadioValue('result_drupal_version');
+      const profile = getCheckedRadioValue('result_install_profile');
+      const branch = document.getElementById('branch-select').value;
+      const n = getResultBranchOptionCount();
+      document.getElementById('workspace-name').value = suggestedIssueForkWorkspaceName(
+        dv, profile, currentNid, branch, n
+      );
+      updateWorkspaceUrlSlug('workspace-name', 'issue-result-workspace-url-slug');
+      applyWorkspaceNameFieldValidation('workspace-name', 'workspace-name-error');
+    }
+
+    function syncPlainWorkspaceName() {
+      if (!currentProjectName) return;
+      const dv = getCheckedRadioValue('plain_drupal_version');
+      const profile = getCheckedRadioValue('plain_install_profile');
+      document.getElementById('plain-workspace-name').value = sanitizeWorkspaceName(
+        workspaceNameFromCoreChoices(dv, profile) + '-' + currentProjectName
+      );
+      updateWorkspaceUrlSlug('plain-workspace-name', 'issue-plain-workspace-url-slug');
+      applyWorkspaceNameFieldValidation('plain-workspace-name', 'plain-workspace-name-error');
+    }
+
+    function syncManualWorkspaceName() {
+      if (!currentNid) return;
+      const dv = getCheckedRadioValue('manual_drupal_version');
+      const prof = getCheckedRadioValue('manual_install_profile');
+      document.getElementById('manual-workspace-name').value = sanitizeWorkspaceName(
+        workspaceNameFromCoreChoices(dv, prof) + '-' + currentNid
+      );
+      updateWorkspaceUrlSlug('manual-workspace-name', 'issue-manual-workspace-url-slug');
+      applyWorkspaceNameFieldValidation('manual-workspace-name', 'manual-workspace-name-error');
+    }
 
     function setStatus(msg, type) {
       const el = document.getElementById('status');
       el.textContent = msg;
-      el.className = 'status ' + type;
+      el.className = 'cds-status cds-status--' + type;
     }
 
     function clearStatus() {
       const el = document.getElementById('status');
-      el.className = 'status';
+      el.className = 'cds-status';
     }
 
     function hideAllForms() {
-      document.getElementById('result-form').style.display = 'none';
-      document.getElementById('plain-dev-form').style.display = 'none';
-      document.getElementById('manual-form').style.display = 'none';
+      document.getElementById('result-form').hidden = true;
+      document.getElementById('plain-dev-form').hidden = true;
+      document.getElementById('manual-form').hidden = true;
+      currentProjectType = 'module';
     }
 
     // Returns { type: 'issue'|'project', nid, project } or null
@@ -600,10 +638,6 @@ <h2>Feedback &amp; Community</h2>
       return null;
     }
 
-    function sanitizeWorkspaceName(name) {
-      return name.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
-    }
-
     async function loadInput() {
       const raw = document.getElementById('issue-input').value;
       const parsed = parseInput(raw);
@@ -646,9 +680,10 @@ <h2>Feedback &amp; Community</h2>
 
       clearStatus();
       document.getElementById('plain-project-display').textContent = projectName;
-      document.getElementById('plain-workspace-name').value = sanitizeWorkspaceName(projectName + '-dev');
       currentProjectName = projectName;
-      document.getElementById('plain-dev-form').style.display = 'block';
+      currentProjectType = await fetchDrupalOrgProjectType(projectName);
+      syncPlainWorkspaceName();
+      document.getElementById('plain-dev-form').hidden = false;
     }
 
     async function loadIssue(nid, hintedProject) {
@@ -661,7 +696,6 @@ <h2>Feedback &amp; Community</h2>
         let projectName = hintedProject;
         let title = 'Issue #' + nid;
         let drupalMajor = '11';
-        let projectType = 'module'; // used later for contrib template hint
 
         try {
           const issueResp = await fetch('https://www.drupal.org/api-d7/node/' + nid + '.json');
@@ -671,10 +705,6 @@ <h2>Feedback &amp; Community</h2>
             // Resolve project name from API (overrides URL-hinted project)
             const apiProject = issue.field_project && issue.field_project.machine_name;
             if (apiProject) projectName = apiProject;
-            // Detect project type (module vs theme)
-            if (issue.field_project && issue.field_project.field_project_type) {
-              projectType = issue.field_project.field_project_type;
-            }
             // Detect Drupal major version from field_issue_version — core issues only.
             // For contrib, field_issue_version is the MODULE version (e.g. "8.x-1.x"
             // means module 1.x, not Drupal 8), so we leave drupalMajor at its default.
@@ -692,8 +722,13 @@ <h2>Feedback &amp; Community</h2>
 
         currentProjectName = projectName;
         currentIsContrib = (projectName !== 'drupal');
+        if (currentIsContrib) {
+          currentProjectType = await fetchDrupalOrgProjectType(projectName);
+        } else {
+          currentProjectType = 'module';
+        }
 
-        // Issue fork name: 'drupal-{nid}' for core, '{module}-{nid}' for contrib
+        // Issue fork name: 'drupal-{nid}' for core, '{module}-NID' for contrib
         const issueFork = currentIsContrib ? (projectName + '-' + nid) : ('drupal-' + nid);
         currentIssueFork = issueFork;
 
@@ -770,146 +805,203 @@ <h2>Feedback &amp; Community</h2>
         issueLink.href = issuePageUrl;
         issueLink.target = '_blank';
         issueLink.textContent = '#' + nid + ': ' + title;
-        issueLink.style.cssText = 'color: inherit; text-decoration: underline;';
+        issueLink.className = 'cds-issue-title__link';
         titleEl.appendChild(issueLink);
 
         // Template badge and form customization
         const badge = document.getElementById('template-badge');
         const resultLabel = document.getElementById('result-label');
         const profileHint = document.getElementById('profile-hint');
-        const profileSelect = document.getElementById('profile-select');
 
         if (currentIsContrib) {
-          badge.textContent = 'drupal-contrib template · ' + projectName;
-          badge.className = 'template-badge contrib';
+          const typeLabel = currentProjectType === 'theme' ? 'theme' : 'module';
+          badge.textContent = 'drupal-contrib template · ' + projectName + ' (' + typeLabel + ')';
+          badge.className = 'cds-template-badge cds-template-badge--contrib';
           resultLabel.textContent = 'Contrib Issue (' + projectName + ')';
-          // Default to minimal for contrib
-          profileSelect.value = 'minimal';
-          profileHint.textContent = 'minimal is recommended for contrib development.';
+          setCheckedRadioValue('result_install_profile', 'minimal');
+          profileHint.textContent = 'Minimal is recommended for contrib; all profiles run a full install here.';
         } else {
           badge.textContent = 'drupal-core template';
-          badge.className = 'template-badge core';
+          badge.className = 'cds-template-badge cds-template-badge--core';
           resultLabel.textContent = 'Issue';
-          profileSelect.value = 'demo_umami';
-          profileHint.textContent = 'demo_umami uses a pre-built database snapshot. Issue fork workspaces always run a full site install regardless of profile.';
+          setCheckedRadioValue('result_install_profile', 'demo_umami');
+          profileHint.textContent = 'Issue fork workspaces always run a full ddev drush si; profile still controls the install choice.';
         }
 
-        document.getElementById('drupal-version-select').value = drupalMajor;
-        document.getElementById('workspace-name').value = 'issue-' + nid;
+        setCheckedRadioValue('result_drupal_version', drupalMajor);
+        syncResultWorkspaceName();
 
         clearStatus();
-        document.getElementById('result-form').style.display = 'block';
+        document.getElementById('result-form').hidden = false;
 
       } catch (err) {
         console.error(err);
         setStatus('Could not load issue data automatically (' + err.message + '). Enter values below.', 'error');
-        document.getElementById('manual-workspace-name').value = 'issue-' + nid;
+        syncManualWorkspaceName();
         document.getElementById('manual-fork').value = (currentIsContrib && currentProjectName)
           ? (currentProjectName + '-' + nid) : ('drupal-' + nid);
-        document.getElementById('manual-form').style.display = 'block';
+        document.getElementById('manual-form').hidden = false;
       }
     }
 
-    function buildCoreUrl(issueFork, issueBranch, installProfile, drupalVersion, workspaceName) {
+    const CORE_DISABLE_PARAMS = 'issue_fork,issue_branch,drupal_version,install_profile,share_drupal_site';
+    const CONTRIB_DISABLE_PARAMS = 'project_name,project_type,issue_fork,issue_branch,drupal_version,install_profile,share_drupal_site';
+
+    function getShareDrupalSite(fieldName) {
+      const raw = document.querySelector('input[name="' + fieldName + '"]:checked');
+      const shareVal = raw ? raw.value : '';
+      return ['owner', 'authenticated', 'public'].includes(shareVal) ? shareVal : 'owner';
+    }
+
+    function buildCoreUrl(issueFork, issueBranch, installProfile, drupalVersion, workspaceName, shareDrupalSite) {
       const base = CODER_BASE + '/templates/' + CODER_TEMPLATE_CORE + '/workspace';
       const params = new URLSearchParams({
-        mode: 'manual',
+        mode: 'auto',
         name: sanitizeWorkspaceName(workspaceName),
+        disable_params: CORE_DISABLE_PARAMS,
         'param.issue_fork': issueFork,
         'param.issue_branch': issueBranch,
         'param.install_profile': installProfile,
         'param.drupal_version': drupalVersion,
+        'param.share_drupal_site': shareDrupalSite,
       });
       return base + '?' + params.toString();
     }
 
-    function buildContribIssueUrl(projectName, issueNumber, issueBranch, installProfile, drupalVersion, workspaceName) {
+    function buildContribIssueUrl(projectName, issueNumber, issueBranch, installProfile, drupalVersion, workspaceName, shareDrupalSite, projectType) {
       const base = CODER_BASE + '/templates/' + CODER_TEMPLATE_CONTRIB + '/workspace';
       const params = new URLSearchParams({
-        mode: 'manual',
+        mode: 'auto',
         name: sanitizeWorkspaceName(workspaceName),
+        disable_params: CONTRIB_DISABLE_PARAMS,
         'param.project_name': projectName,
-        'param.project_type': 'module', // will be overridden manually for themes
+        'param.project_type': projectType || 'module',
         'param.issue_fork': issueNumber,
         'param.issue_branch': issueBranch,
         'param.install_profile': installProfile,
         'param.drupal_version': drupalVersion,
+        'param.share_drupal_site': shareDrupalSite,
       });
       return base + '?' + params.toString();
     }
 
-    function buildContribPlainUrl(projectName, drupalVersion, installProfile, workspaceName) {
+    function buildContribPlainUrl(projectName, drupalVersion, installProfile, workspaceName, shareDrupalSite, projectType) {
       const base = CODER_BASE + '/templates/' + CODER_TEMPLATE_CONTRIB + '/workspace';
       const params = new URLSearchParams({
-        mode: 'manual',
+        mode: 'auto',
         name: sanitizeWorkspaceName(workspaceName),
+        disable_params: CONTRIB_DISABLE_PARAMS,
         'param.project_name': projectName,
-        'param.project_type': 'module',
+        'param.project_type': projectType || 'module',
         'param.issue_fork': '',
         'param.issue_branch': '',
         'param.install_profile': installProfile,
         'param.drupal_version': drupalVersion,
+        'param.share_drupal_site': shareDrupalSite,
       });
       return base + '?' + params.toString();
     }
 
     function openWorkspace() {
       const branch = document.getElementById('branch-select').value;
-      const profile = document.getElementById('profile-select').value;
-      const drupalVersion = document.getElementById('drupal-version-select').value;
-      const wsName = document.getElementById('workspace-name').value || ('issue-' + currentNid);
+      const profile = getCheckedRadioValue('result_install_profile');
+      const drupalVersion = getCheckedRadioValue('result_drupal_version');
+      const shareDrupalSite = getShareDrupalSite('result_share_drupal_site');
+      const wsField = document.getElementById('workspace-name').value.trim();
+      const wsName = wsField
+        ? sanitizeWorkspaceName(wsField)
+        : suggestedIssueForkWorkspaceName(drupalVersion, profile, currentNid, branch, getResultBranchOptionCount());
 
       if (!currentIssueFork || !branch) {
         setStatus('Please load an issue first.', 'error');
         return;
       }
 
+      const validation = applyWorkspaceNameFieldValidation('workspace-name', 'workspace-name-error');
+      if (validation && !validation.valid) {
+        clearStatus();
+        return;
+      }
+
       let url;
       if (currentIsContrib) {
-        url = buildContribIssueUrl(currentProjectName, currentNid, branch, profile, drupalVersion, wsName);
+        url = buildContribIssueUrl(
+          currentProjectName, currentNid, branch, profile, drupalVersion, wsName, shareDrupalSite, currentProjectType
+        );
       } else {
-        url = buildCoreUrl(currentIssueFork, branch, profile, drupalVersion, wsName);
+        url = buildCoreUrl(currentIssueFork, branch, profile, drupalVersion, wsName, shareDrupalSite);
       }
       window.open(url, '_blank');
     }
 
     function openPlainDevWorkspace() {
-      const drupalVersion = document.getElementById('plain-drupal-version').value;
-      const profile = document.getElementById('plain-profile').value;
-      const wsName = document.getElementById('plain-workspace-name').value || (currentProjectName + '-dev');
+      const drupalVersion = getCheckedRadioValue('plain_drupal_version');
+      const profile = getCheckedRadioValue('plain_install_profile');
+      const shareDrupalSite = getShareDrupalSite('plain_share_drupal_site');
+      const wsField = document.getElementById('plain-workspace-name').value.trim();
+      const wsName = wsField
+        ? sanitizeWorkspaceName(wsField)
+        : sanitizeWorkspaceName(
+            workspaceNameFromCoreChoices(drupalVersion, profile) + '-' + currentProjectName
+          );
 
       if (!currentProjectName) {
         setStatus('No project loaded. Enter a project URL or machine name first.', 'error');
         return;
       }
 
-      const url = buildContribPlainUrl(currentProjectName, drupalVersion, profile, wsName);
+      const validation = applyWorkspaceNameFieldValidation('plain-workspace-name', 'plain-workspace-name-error');
+      if (validation && !validation.valid) {
+        clearStatus();
+        return;
+      }
+
+      const url = buildContribPlainUrl(
+        currentProjectName, drupalVersion, profile, wsName, shareDrupalSite, currentProjectType
+      );
       window.open(url, '_blank');
     }
 
-    function openManualWorkspace() {
+    async function openManualWorkspace() {
       const fork = document.getElementById('manual-fork').value.trim();
       const branch = document.getElementById('manual-branch').value.trim();
-      const profile = document.getElementById('manual-profile').value;
-      const drupalVersion = document.getElementById('manual-drupal-version').value;
-      const wsName = document.getElementById('manual-workspace-name').value || ('issue-' + currentNid);
+      const profile = getCheckedRadioValue('manual_install_profile');
+      const drupalVersion = getCheckedRadioValue('manual_drupal_version');
+      const shareDrupalSite = getShareDrupalSite('manual_share_drupal_site');
+      const wsField = document.getElementById('manual-workspace-name').value.trim();
+      const wsName = wsField
+        ? sanitizeWorkspaceName(wsField)
+        : sanitizeWorkspaceName(
+            workspaceNameFromCoreChoices(drupalVersion, profile) + '-' + currentNid
+          );
 
       if (!fork || !branch) {
         setStatus('Issue fork name and branch are required.', 'error');
         return;
       }
 
+      const validation = applyWorkspaceNameFieldValidation('manual-workspace-name', 'manual-workspace-name-error');
+      if (validation && !validation.valid) {
+        clearStatus();
+        return;
+      }
+
       // Detect if this is a core fork (drupal-NID) or contrib (MODULE-NID)
       const isCoreManual = fork.startsWith('drupal-');
       let url;
       if (isCoreManual) {
-        url = buildCoreUrl(fork, branch, profile, drupalVersion, wsName);
+        url = buildCoreUrl(fork, branch, profile, drupalVersion, wsName, shareDrupalSite);
       } else {
         // Extract project name from fork name (MODULE-NID → MODULE)
         const forkParts = fork.match(/^([a-z][a-z0-9_]*)-(\d+)$/);
         const project = forkParts ? forkParts[1] : 'unknown';
         const nidFromFork = forkParts ? forkParts[2] : currentNid;
-        url = buildContribIssueUrl(project, nidFromFork, branch, profile, drupalVersion, wsName);
+        const projectType = (currentProjectName === project && currentProjectType)
+          ? currentProjectType
+          : await fetchDrupalOrgProjectType(project);
+        url = buildContribIssueUrl(
+          project, nidFromFork, branch, profile, drupalVersion, wsName, shareDrupalSite, projectType
+        );
       }
       window.open(url, '_blank');
     }
@@ -918,6 +1010,21 @@ <h2>Feedback &amp; Community</h2>
     document.getElementById('issue-input').addEventListener('keydown', function(e) {
       if (e.key === 'Enter') loadInput();
     });
+
+    document.getElementById('branch-select').addEventListener('change', syncResultWorkspaceName);
+    document.querySelectorAll('input[name="result_drupal_version"], input[name="result_install_profile"]').forEach(function (radio) {
+      radio.addEventListener('change', syncResultWorkspaceName);
+    });
+    document.querySelectorAll('input[name="plain_drupal_version"], input[name="plain_install_profile"]').forEach(function (radio) {
+      radio.addEventListener('change', syncPlainWorkspaceName);
+    });
+    document.querySelectorAll('input[name="manual_drupal_version"], input[name="manual_install_profile"]').forEach(function (radio) {
+      radio.addEventListener('change', syncManualWorkspaceName);
+    });
+
+    bindWorkspaceUrlSlugLive('workspace-name', 'issue-result-workspace-url-slug', 'workspace-name-error');
+    bindWorkspaceUrlSlugLive('plain-workspace-name', 'issue-plain-workspace-url-slug', 'plain-workspace-name-error');
+    bindWorkspaceUrlSlugLive('manual-workspace-name', 'issue-manual-workspace-url-slug', 'manual-workspace-name-error');
   </script>
 
 </body>
diff --git a/docs/index.html b/docs/index.html
index 9f39f5c..ba9e57d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,333 +3,114 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>DDEV Coder Workspaces — Drupal Core Development</title>
+  <title>DDEV Coder Workspaces — Get started</title>
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #0e0e10;
-      color: #e8e8e8;
-      line-height: 1.6;
-    }
-
-    /* ── Above the fold ─────────────────────────────── */
-    .hero {
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
-      padding: 2rem;
-      position: relative;
-    }
-
-    .hero .logo {
-      height: 60px;
-      margin-bottom: 2rem;
-    }
-
-    .hero h1 {
-      font-size: clamp(2rem, 5vw, 3rem);
-      font-weight: 700;
-      letter-spacing: -0.02em;
-      margin-bottom: 0.75rem;
-    }
-
-    .hero .tagline {
-      font-size: 1.15rem;
-      color: #999;
-      max-width: 480px;
-      margin-bottom: 2rem;
-    }
-
-    .auth-callout {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      background: #161619;
-      border: 1px solid #30303a;
-      border-radius: 10px;
-      padding: 0.85rem 1.25rem;
-      margin-bottom: 1.75rem;
-      font-size: 1rem;
-      color: #bbb;
-      max-width: 500px;
-    }
-
-    .auth-callout svg { flex-shrink: 0; }
-
-    .auth-callout a {
-      color: #c4b5fd;
-      font-weight: 600;
-      text-decoration: none;
-    }
-
-    .auth-callout a:hover { text-decoration: underline; }
-
-    .open-btn img {
-      height: 52px;
-      display: block;
-    }
-
-    .scroll-hint {
-      position: absolute;
-      bottom: 2rem;
-      left: 50%;
-      transform: translateX(-50%);
-      color: #444;
-      font-size: 0.8rem;
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 0.4rem;
-      animation: bob 2s ease-in-out infinite;
-    }
-
-    .scroll-hint::after { content: '↓'; font-size: 1.1rem; }
-
-    @keyframes bob {
-      0%, 100% { transform: translateX(-50%) translateY(0); }
-      50%       { transform: translateX(-50%) translateY(6px); }
-    }
-
-    /* WCAG 2.2 §2.3.3 (AAA) / best practice: disable animation for users who prefer reduced motion */
-    @media (prefers-reduced-motion: reduce) {
-      .scroll-hint { animation: none; }
-    }
-
-    /* Skip link — visually hidden until focused; gives keyboard users a way to bypass the hero
-       WCAG 2.4.1 Bypass Blocks (Level A) */
-    .skip-link {
-      position: absolute;
-      top: -100%;
-      left: 1rem;
-      background: #7c5af0;
-      color: #fff;
-      padding: 0.5rem 1rem;
-      border-radius: 0 0 6px 6px;
-      font-size: 0.9rem;
-      font-weight: 600;
-      text-decoration: none;
-      z-index: 999;
-    }
-    .skip-link:focus { top: 0; }
-
-    /* ── Below the fold ─────────────────────────────── */
-    .details {
-      max-width: 660px;
-      margin: 0 auto;
-      padding: 5rem 2rem 6rem;
-    }
-
-    .details section { margin-bottom: 3.5rem; }
-
-    .details h2 {
-      font-size: 1.1rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      color: #777;
-      margin-bottom: 1.25rem;
-    }
-
-    .steps {
-      list-style: none;
-      counter-reset: step;
-    }
-
-    .steps li {
-      counter-increment: step;
-      display: flex;
-      gap: 1rem;
-      align-items: flex-start;
-      padding: 0.9rem 0;
-      border-bottom: 1px solid #1c1c1e;
-      color: #ccc;
-    }
-
-    .steps li::before {
-      content: counter(step);
-      flex-shrink: 0;
-      width: 1.75rem;
-      height: 1.75rem;
-      background: #3b2f6e;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.8rem;
-      font-weight: 700;
-      color: #c4b5fd;
-      margin-top: 0.1rem;
-    }
-
-    code {
-      background: #1a1a1f;
-      border: 1px solid #2a2a30;
-      padding: 0.1em 0.4em;
-      border-radius: 4px;
-      font-family: 'SF Mono', Consolas, monospace;
-      font-size: 0.88em;
-      color: #c4b5fd;
-    }
-
-    /* ── Template cards ─────────────────────────────── */
-    .template-cards {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-    }
-
-    .template-card {
-      background: #161619;
-      border: 1px solid #2a2a32;
-      border-radius: 10px;
-      padding: 1.25rem 1.5rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 1.5rem;
-    }
-
-    .template-card .info h3 {
-      font-size: 1rem;
-      font-weight: 600;
-      color: #e8e8e8;
-      margin-bottom: 0.25rem;
-    }
-
-    .template-card .info p {
-      font-size: 0.9rem;
-      color: #777;
-    }
-
-    .template-card .btn img {
-      height: 40px;
-      display: block;
-      flex-shrink: 0;
-    }
-
-    /* ── Resources ──────────────────────────────────── */
-    .links {
-      display: flex;
-      flex-direction: column;
-      gap: 0.6rem;
-    }
-
-    .links a {
-      color: #a78bfa;
-      text-decoration: none;
-      font-size: 0.95rem;
-    }
+  <link rel="stylesheet" href="coder-ddev-start.css">
+</head>
+<body class="cds-body">
+  <a class="cds-skip-link" href="#main-content">Skip to main content</a>
+
+  <section class="cds-hero">
+    <div class="cds-hero__inner">
+      <div class="cds-hero__logos">
+        <img class="cds-hero__logo cds-hero__logo--ddev" src="logo-ddev-on-dark.svg" alt="DDEV">
+        <img class="cds-hero__logo cds-hero__logo--coder" src="logo-coder-on-dark.svg" alt="Coder">
+      </div>
+      <h1>Coder Workspaces</h1>
+      <p class="cds-hero__tagline">Browser-based environments with DDEV and Docker — full stack, ready in about a minute, no local install required.</p>
 
-    .links a:hover { text-decoration: underline; }
+      <div class="cds-announce">
+        <p>New here? Read the <a class="cds-link" href="https://ddev.com/blog/coder-ddev-com-announcement/">DDEV Coder Workspaces announcement</a> on ddev.com for background on the service and two demo videos.</p>
+      </div>
 
-    .divider {
-      border: none;
-      border-top: 1px solid #1c1c1e;
-      margin-bottom: 3.5rem;
-    }
-  </style>
-</head>
-<body>
-  <!-- WCAG 2.4.1 Bypass Blocks (Level A): skip link lets keyboard users jump past the hero -->
-  <a class="skip-link" href="#main-content">Skip to main content</a>
+      <div class="cds-tile-grid cds-tile-grid--3">
+        <article class="cds-tile cds-tile--featured">
+          <p class="cds-tile__eyebrow"><a class="cds-footnote-link" href="#fn-1-stability">Recommended</a> <sup>1</sup></p>
+          <h2 class="cds-tile__title">Drupal Issue</h2>
+          <p class="cds-tile__desc">Launch into an issue fork or contrib project workspace. No manual setup required.</p>
+          <div class="cds-tile__actions">
+            <a class="cds-btn cds-btn--primary" href="/drupal-issue">Open  issue picker</a>
+          </div>
+        </article>
+
+        <article class="cds-tile">
+          <p class="cds-tile__eyebrow"><a class="cds-footnote-link" href="#fn-1-stability">Demo-ready</a> <sup>1</sup></p>
+          <h2 class="cds-tile__title">Drupal Core</h2>
+          <p class="cds-tile__desc">Create a core development workspace. Manage issue forks manually.</p>
+          <div class="cds-tile__actions">
+            <a class="cds-btn cds-btn--secondary" href="/drupal-core">Open core picker</a>
+          </div>
+        </article>
 
-  <section class="hero">
-    <img class="logo" src="https://raw.githubusercontent.com/ddev/ddev/main/docs/content/developers/logos/SVG/Logo_w_text_dark.svg" alt="DDEV">
-    <h1>Coder Workspaces</h1>
-    <p class="tagline">Cloud-hosted development environments powered by DDEV. Full stack, ready in about a minute — no local setup required.</p>
+        <article class="cds-tile">
+          <h2 class="cds-tile__title">DDEV Freeform</h2>
+          <p class="cds-tile__desc">Manage multiple and/or custom DDEV projects in a single workspace.</p>
+          <div class="cds-tile__actions">
+            <a class="cds-btn cds-btn--outline" href="https://coder.ddev.com/templates/coder/freeform/workspace?mode=manual">Configure freeform</a>
+          </div>
+        </article>
+      </div>
 
-    <div class="auth-callout">
-      <!-- GitHub mark — decorative; label context is provided by adjacent text
-           WCAG 1.1.1 Non-text Content (Level A): aria-hidden removes decorative icon from the accessibility tree -->
-      <svg width="22" height="22" viewBox="0 0 98 96" fill="#ccc" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/>
-      </svg>
-      <span>Requires GitHub membership in the <strong>ddev org</strong> or a <strong>sponsor org</strong> — <a href="https://github.com/coder-ddev-com/access-requests">request access</a> · <a href="https://coder.ddev.com/login">sign in</a></span>
+      <div class="cds-callout cds-callout--naked cds-callout--muted cds-callout--narrow cds-callout--with-icon">
+        <svg width="22" height="22" viewBox="0 0 98 96" fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+          <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
+        </svg>
+        <span>Requires authorized access. <a class="cds-link" href="https://coder.ddev.com/login">Sign in</a> via GitHub OAuth.<a class="cds-footnote-link" href="#fn-2-access"><sup>2</sup></a></span>
+      </div>
     </div>
 
-    <a class="open-btn" href="https://coder.ddev.com/templates/coder/drupal-core/workspace?mode=manual">
-      <img src="https://coder.ddev.com/open-in-coder.svg" alt="Open in Coder">
-    </a>
-    <!-- Decorative scroll hint — hidden from AT since it conveys no information beyond visual affordance
-         WCAG 1.1.1 Non-text Content (Level A) -->
-    <span class="scroll-hint" aria-hidden="true">more</span>
+    <span class="cds-scroll-hint" aria-hidden="true">More below</span>
   </section>
 
-  <hr class="divider">
+  <hr class="cds-divider">
 
-  <!-- id="main-content" is the skip link target (WCAG 2.4.1) -->
-  <div class="details" id="main-content">
+  <div class="cds-details" id="main-content">
 
-    <section>
-      <h2>How it works</h2>
-      <ol class="steps">
-        <li>Sign in with GitHub at <a href="https://coder.ddev.com/login" style="color:#a78bfa">coder.ddev.com</a> — access requires the <a href="https://github.com/ddev" style="color:#a78bfa">ddev org</a>, a $100+/mo sponsor org, or an <a href="https://github.com/coder-ddev-com/access-requests" style="color:#a78bfa">approved request</a></li>
-        <li>Click <strong>Create Workspace</strong> — your environment sets up automatically</li>
-        <li>Click <strong>DDEV Web</strong> to open the running site, or <strong>VS Code</strong> to edit code</li>
+    <section class="cds-notes" aria-labelledby="how-it-works">
+      <h2 id="how-it-works">How it works</h2>
+      <ol class="cds-steps">
+        <li><p>Sign in with GitHub at <a class="cds-link" href="https://coder.ddev.com/login">coder.ddev.com</a> (see access note above).</p></li>
+        <li><p>Create a workspace from a <a class="cds-link" href="drupal-core">Drupal core version</a>, an <a class="cds-link" href="drupal-issue">issue fork or contrib project name</a>, or a <a class="cds-link" href="https://coder.ddev.com/templates">DDEV freeform template</a>.</p></li>
+        <li><p>Open <strong>DDEV Web</strong> for the site or <strong>VS Code</strong> for the editor.</p></li>
       </ol>
     </section>
 
-    <section>
-      <h2>What you get</h2>
-      <ol class="steps">
-        <li>Drupal core git clone at <code>~/drupal-core/repos/drupal/</code> — clean, ready for patches</li>
-        <li>Running Drupal site with Umami demo profile — login <code>admin</code> / <code>admin</code>, or <code>ddev drush uli</code></li>
-        <li>PHP 8.5, DDEV, Composer, drush, VS Code for Web — all pre-installed</li>
+    <section class="cds-notes" aria-labelledby="drupal-core">
+      <h2 id="drupal-core">Drupal core template includes</h2>
+      <ol class="cds-steps">
+        <li><p>Git clone of Drupal core under <code>~/drupal-core/repos/drupal/</code></p></li>
+        <li><p>Running site (often Umami demo) — <code>admin</code> / <code>admin</code> or <code>ddev drush uli</code></p></li>
+        <li><p>DDEV, Composer, Drush, VS Code for Web — pre-installed</p></li>
       </ol>
+      <p>More details in the <a class="cds-link" href="user/quickstart">quickstart guide</a>.</p>
     </section>
 
-    <section>
-      <h2>Drupal issue development</h2>
-      <div class="template-cards">
-        <div class="template-card">
-          <div class="info">
-            <h3>Drupal Issue Picker</h3>
-            <p>Enter a Drupal.org issue URL or number — launches a workspace with the issue fork checked out. Supports both Drupal core and contrib modules/themes.</p>
-          </div>
-          <a class="btn" href="drupal-issue" style="background:#7c5af0;color:#fff;border-radius:8px;padding:0.6rem 1rem;font-size:0.9rem;font-weight:600;text-decoration:none;white-space:nowrap;">Open Picker</a>
-        </div>
+    <section class="cds-notes" aria-labelledby="resources">
+      <h2 id="resources">Resources</h2>
+      <div class="cds-link-list">
+        <a class="cds-link" href="user/quickstart">Quickstart guide</a>
+        <a href="https://docs.ddev.com/">DDEV documentation</a>
+        <a href="https://www.drupal.org/contribute/development">Drupal core contribution</a>
+        <a href="https://github.com/ddev/coder-ddev">Source on GitHub</a>
       </div>
     </section>
 
-    <section>
-      <h2>Other templates</h2>
-      <div class="template-cards">
-        <div class="template-card">
-          <div class="info">
-            <h3>DDEV Freeform</h3>
-            <p>Run multiple DDEV projects in one workspace, each accessible via its own subdomain through ddev-router</p>
-          </div>
-          <a class="btn" href="https://coder.ddev.com/templates/coder/freeform/workspace?mode=manual">
-            <img src="https://coder.ddev.com/open-in-coder.svg" alt="Open in Coder">
-          </a>
-        </div>
-      </div>
+    <section class="cds-notes" aria-labelledby="feedback">
+      <h2 id="feedback">Feedback &amp; Community</h2>
+      <p class="cds-feedback">Problems or ideas? <a class="cds-link" href="https://github.com/ddev/coder-ddev/issues">ddev/coder-ddev issues</a> · Drupal Slack <strong>#ddev</strong> · <a class="cds-link" href="https://ddev.com/s/discord">DDEV Discord</a>.</p>
     </section>
 
-    <section>
-      <h2>Resources</h2>
-      <div class="links">
-        <a href="user/quickstart">Quickstart guide</a>
-        <a href="https://docs.ddev.com/">DDEV documentation</a>
-        <a href="https://www.drupal.org/contribute/development">Drupal core contribution guide</a>
-        <a href="https://github.com/ddev/coder-ddev">Source code (GitHub)</a>
-      </div>
-    </section>
+    <hr class="cds-divider">
 
-    <section>
-      <h2>Feedback &amp; Community</h2>
-      <p style="color:#999;font-size:0.95rem;line-height:1.7;">Any problems or friction? Create an issue at <a href="https://github.com/ddev/coder-ddev/issues" style="color:#a78bfa;">ddev/coder-ddev</a> or join us for conversation on Drupal Slack <strong>#ddev</strong> or <a href="https://ddev.com/s/discord" style="color:#a78bfa;">DDEV Discord</a>.</p>
+    <section class="cds-notes" aria-labelledby="footnotes">
+      <h2 id="footnotes">Footnotes</h2>
+      <ul class="cds-footnote-list">
+        <li id="fn-1-stability"><p><sup>1.</sup> <em>Drupal core and contrib projects aim to keep main branches working. If needed, you can use DDEV workspace git controls to manually check out a stable tag or issue fork.</em></p></li>
+        <li id="fn-2-access"><p><sup>2.</sup> <em>To use DDEV Coder Workspaces, you must be a member of a sponsoring GitHub organization, or of the <a class="cds-link" href="https://github.com/ddev"><code>ddev</code></a> or <a class="cds-link" href="https://github.com/coder-ddev-com"><code>coder-ddev-com</code></a> org. Organizations gain access by <a class="cds-link" href="https://ddev.com/support-ddev/">sponsoring DDEV</a> at the $100+/month level. Individuals may <a class="cds-link" href="https://github.com/coder-ddev-com/access-requests/issues/new?template=access-request.yml">request contributor access</a>.</em></p></li>
+      </ul>
     </section>
-
   </div>
-
 </body>
 </html>
diff --git a/docs/logo-coder-on-dark.svg b/docs/logo-coder-on-dark.svg
new file mode 100644
index 0000000..5d30a91
--- /dev/null
+++ b/docs/logo-coder-on-dark.svg
@@ -0,0 +1,8 @@
+<svg width="264" height="40" viewBox="0 0 264 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.265625 19.9096C0.265625 7.7486 10.5971 0 24.8029 0C39.0086 0 46.9725 6.72621 47.2415 16.6272L34.9729 17.0039C34.65 11.5153 29.7803 7.91003 24.8029 8.01765C17.969 8.15217 12.9109 12.6991 12.9109 19.9096C12.9109 27.1201 17.969 31.5863 24.8029 31.5863C29.7803 31.5863 34.5424 28.1425 35.0805 22.6539L47.3491 22.9229C47.0263 32.9854 38.5781 39.8192 24.8029 39.8192C11.0276 39.8192 0.265625 32.0168 0.265625 19.9096Z" fill="#e1ded8"/>
+<path d="M160.888 8.87866H180.26V1.07625H148.619V38.7431H180.636V30.6716H160.888V23.2459H177.838V16.0892H160.888V8.87866Z" fill="#e1ded8"/>
+<path d="M230.921 1.07625H263.207V38.7431H230.921V1.07625Z" fill="#e1ded8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.6805 19.9096C51.6805 7.91003 61.3932 0 75.3568 0C89.3204 0 99.0331 7.85622 99.0331 19.9096C99.0331 31.963 89.3204 39.8192 75.3568 39.8192C61.3932 39.8192 51.6805 31.9092 51.6805 19.9096ZM64.3258 19.9096C64.3258 26.9049 68.8727 31.6939 75.3568 31.6939C81.8947 31.6939 86.3878 27.0125 86.3878 19.9096C86.3878 12.8067 81.8408 7.91003 75.3568 7.91003C68.8727 7.91003 64.3258 12.9143 64.3258 19.9096Z" fill="#e1ded8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M103.365 38.7431V1.07625H118.969C134.09 1.07625 144.26 8.12532 144.26 19.9097C144.26 31.694 134.09 38.7431 118.969 38.7431H103.365ZM115.741 31.2097H118.431C126.395 31.2097 131.722 27.1202 131.722 19.9097C131.722 12.6991 126.395 8.5558 118.431 8.5558H115.741V31.2097Z" fill="#e1ded8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M211.549 21.2549C219.002 21.7392 222.526 25.5866 223.979 31.4787L225.486 38.7431H211.334L210.15 32.0168C209.128 27.6582 205.63 26.0978 201.702 26.0978H198.419V38.7431H186.043V1.07625H205.684C216.984 1.07625 223.871 5.2196 223.871 11.9458C223.871 17.4882 219.19 20.932 211.549 20.932V21.2549ZM198.419 19.4792H204.608C208.859 19.4792 211.495 17.3268 211.495 13.883C211.495 10.4391 208.859 8.34056 204.608 8.34056H198.419V19.4792Z" fill="#e1ded8"/>
+</svg>
diff --git a/docs/logo-ddev-on-dark.svg b/docs/logo-ddev-on-dark.svg
new file mode 100644
index 0000000..dcc9f03
--- /dev/null
+++ b/docs/logo-ddev-on-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 848.61 199.3"><defs><style>.cls-1{fill:#02a8e2;}.cls-1,.cls-2{fill-rule:evenodd;}.cls-2{fill:#e1ded8;}</style></defs><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><g id="Ebene_2-2" data-name="Ebene 2"><g id="Ebene_1-2-2" data-name="Ebene 1-2"><path class="cls-1" d="M116.77,18.59h84.55l45.32,45.33v71.47l-45.32,45.32H125.2a11.84,11.84,0,0,0-8.72-4.07,11.33,11.33,0,1,0,8.72,18.59h82.22l53.74-53.74V57.81L207.42,4.07H116.77A11.82,11.82,0,0,0,108.06,0a11.33,11.33,0,0,0,0,22.66A11.82,11.82,0,0,0,116.77,18.59Zm-8.71-12.2a4.59,4.59,0,0,1,4.64,4.54V11a4.65,4.65,0,0,1-9.29.43,3.09,3.09,0,0,1,0-.43A4.78,4.78,0,0,1,108.06,6.39Zm8.71,176.93a4.65,4.65,0,1,1-4.65,4.65h0a4.58,4.58,0,0,1,4.53-4.65Z"/><path class="cls-1" d="M195.5,33.12H87.43v.29a10.58,10.58,0,0,0-8.14-3.49,11.34,11.34,0,1,0,9.3,18H189.4L217.59,76.1v47.35L189.4,151.64H86.85a11.84,11.84,0,0,0-8.72-4.07,11.33,11.33,0,1,0,8.72,18.59H195.21l36.61-36.6V69.73ZM79.29,36.61a4.65,4.65,0,1,1-4.64,4.66v0C74.36,38.64,76.68,36.61,79.29,36.61ZM78.42,154a4.65,4.65,0,1,1-4.65,4.65h0C73.48,156,75.81,154,78.42,154Z"/><path class="cls-1" d="M178.65,136.55H47.34a10.75,10.75,0,0,1-7.85,3.19,11.33,11.33,0,1,1,0-22.66,11.59,11.59,0,0,1,9.3,4.94h36l-15.1-15.11H20A11.82,11.82,0,0,1,11.31,111,11.33,11.33,0,1,1,20,92.41H75.81L105.73,122H177.2L188,111.27v-23L177.2,77.57H110.67l15.11,15.11h29.34a11.84,11.84,0,0,1,8.72-4.07,11.33,11.33,0,1,1-8.72,18.59H119.68L90,77.28H50.82a11.85,11.85,0,0,1-8.71,4.07,11.33,11.33,0,1,1,8.71-18.6H183.3l19.47,19.47v35.15L183.3,136.55ZM163.84,94.71a4.65,4.65,0,1,0,4.65,4.65h0C168.78,97,166.45,94.71,163.84,94.71ZM42.4,65.08a4.65,4.65,0,1,0,4.65,4.65A4.78,4.78,0,0,0,42.4,65.08Zm-2.91,58.68a4.65,4.65,0,1,0,4.65,4.65C44.43,125.8,42.11,123.76,39.49,123.76ZM11.6,94.71a4.65,4.65,0,1,0,0,9.3,4.6,4.6,0,0,0,4.65-4.53v-.12A4.78,4.78,0,0,0,11.6,94.71Z"/><path class="cls-2" d="M323.34,66.82h66.24A20.7,20.7,0,0,1,410.2,87.45v24.4a20.7,20.7,0,0,1-20.62,20.63H323.34ZM389.87,49.1H305.61V150.49h84.26a38.81,38.81,0,0,0,38.64-38.64V87.45A38.75,38.75,0,0,0,389.87,49.1ZM593,90.64V150.2H697.83v-18H611V108.66h72.34v-18H593ZM467.73,66.82H534a20.71,20.71,0,0,1,20.63,20.63v24.4A20.71,20.71,0,0,1,534,132.48H467.73ZM534,49.1H449.72V150.49H534a38.81,38.81,0,0,0,38.64-38.64V87.45A38.57,38.57,0,0,0,534,49.1Zm183,0L772.49,145l2.91,5.23h14.52l3.2-5.23,55.49-95.9H827.69l-45,77.86-45-77.86Z"/><path class="cls-1" d="M611,66.82h86.87V49.1H593V66.82Z"/></g></g></g></g></svg>
diff --git a/docs/user/quickstart.md b/docs/user/quickstart.md
index 9a34cf3..f54fc78 100644
--- a/docs/user/quickstart.md
+++ b/docs/user/quickstart.md
@@ -1,20 +1,43 @@
-# Quickstart: Drupal Core Development on coder.ddev.com
+# Quickstart: Drupal Development Workspace Setup on coder.ddev.com
 
-Cloud-hosted DDEV workspaces for Drupal core development. Full environment — Drupal core clone, running site, drush — ready when the startup script completes.
-
-[![Open in Coder](https://coder.ddev.com/open-in-coder.svg)](https://coder.ddev.com/templates/coder/drupal-core/workspace?mode=manual)
+Cloud-hosted DDEV workspaces for Drupal core and contrib development. Full environment — Drupal core clone, running site, drush — ready when the startup script completes.
 
 ---
 
-## 1. Log in
+## 1. Log in or request access
 
-Go to **[coder.ddev.com](https://coder.ddev.com)** and sign in with GitHub.
+Go to **[coder.ddev.com](https://coder.ddev.com)** and sign in with GitHub. You must belong to an approved GitHub organization to use coder.ddev.com.
 
 ---
 
 ## 2. Create a workspace
 
-Click the button above, or go to **Create Workspace** → select the **drupal-core** template → click **Create Workspace**.
+Pick one of the following two guided forms to either load a clean Drupal install, or work on an issue or contrib project.
+
+<div class="cds-tile-grid cds-tile-grid--2">
+  <article class="cds-tile cds-tile--featured">
+    <div class="cds-tile__eyebrow">Recommended</div>
+    <h2 class="cds-tile__title">Guided Drupal Issue picker</h2>
+    <p class="cds-tile__desc">Get started from an issue fork or contrib project using <a href="https://github.com/amateescu/ddev-drupal-contrib"><code>ddev-drupal-contrib</code></a> (or <a href="https://github.com/amateescu/ddev-drupal-dev"><code>ddev-drupal-dev</code></a> for core issues).</p>
+    <div class="cds-tile__actions">
+      <a class="cds-btn cds-btn--primary" href="/drupal-issue">Drupal issue picker</a>
+    </div>
+  </article>
+
+  <article class="cds-tile">
+    <h2 class="cds-tile__title">Vanilla Drupal Core</h2>
+    <p class="cds-tile__desc">Launch into Drupal core on a mainline 10.x, 11.x, or 12.x branch (no contrib modules or issue fork) using <a href="https://github.com/amateescu/ddev-drupal-dev"><code>ddev-drupal-dev</code> </a>conventional project structure.</p>
+    <div class="cds-tile__actions">
+      <a class="cds-btn cds-btn--secondary" href="/drupal-core">Drupal core picker</a>
+    </div>
+  </article>
+</div>
+
+<br>
+
+On the form, select the appropriate Drupal version and install profile, then launch your workspace in Coder.
+
+Inside Coder, you may be asked to "Confirm and Create" to proceed. Clicking "Cancel" drops you into a copy of the selected Coder Workspace template with read-only parameters. Modifying these parameters manually can result in unexpected behaviors and should be avoided. Instead start over on the guided form.
 
 Wait for the startup script to complete. Watch progress in the **Logs** tab.
 
@@ -24,12 +47,17 @@ Wait for the startup script to complete. Watch progress in the **Logs** tab.
 
 Once the workspace is running, click **DDEV Web** in the dashboard to open the Drupal site, or **VS Code** to open the editor (VS Code for Web, pre-pointed at `~/drupal-core`).
 
-The running site has the Umami demo profile installed. Admin credentials: `admin` / `admin`.
+The running site has the profile you selected in step 2 pre-installed.
+
+Admin credentials: `admin` / `admin`  (<em>Please modify if site is shared publicly.</em>)
 
 ---
 
 ## Code layout
 
+
+### Drupal core development
+
 ```
 ~/drupal-core/           # Drupal core git clone — edit files here
 ├── core/                # Drupal core source
@@ -40,6 +68,25 @@ The running site has the Umami demo profile installed. Admin credentials: `admin
 
 Edit files directly in `~/drupal-core/` — changes are immediately reflected in the running site.
 
+<div class="cds-announce">
+Read more about the core development workflow and conventions in the <a href="https://github.com/amateescu/ddev-drupal-dev">amateescu/ddev-drupal-dev</a> add-on documentation.
+</div>
+
+### Drupal contrib development
+
+```
+~/module_or_theme_name/  # Drupal contrib project repo — edit files here
+├── web/                 # Drupal docroot.
+├── web/core/            # Drupal core source. (installed via composer)
+├── web/index.php        # Entry point
+├── .ddev/               # DDEV config
+└── composer.json        # Contrib project dependencies
+```
+
+<div class="cds-announce">
+Read more about contrib folder structure and custom ddev contrib commands in the <a href="https://github.com/ddev/ddev-drupal-contrib">ddev/ddev-drupal-contrib</a> add-on documentation.
+</div>
+
 ---
 
 ## Common commands (run in VS Code terminal or `coder ssh <workspace>`)
@@ -68,7 +115,7 @@ ddev ssh
 
 ## Working on a Drupal issue
 
-The fastest way: use the **[Drupal Issue Picker](https://start.coder.ddev.com/drupal-issue)**. Paste a drupal.org issue URL, issue number, or project URL — it auto-detects whether the issue is for Drupal core or a contrib module/theme, fetches the available branches, and opens a pre-configured workspace with the issue branch already checked out. Entering a project URL (e.g. `drupal.org/project/token`) or bare machine name launches a plain contrib dev workspace without a specific issue.
+On the [Guided Drupal Issue Picker](/drupal-issue), paste a drupal.org issue URL, issue number, or project URL — it auto-detects whether the issue is for Drupal core or a contrib module/theme, fetches the available branches, and opens a pre-configured workspace with the issue branch already checked out. Entering a project URL (e.g. `drupal.org/project/token`) or bare machine name launches a plain contrib dev workspace without a specific issue.
 
 When working on an issue, the workspace surfaces issue info in several places:
 
@@ -79,7 +126,7 @@ When working on an issue, the workspace surfaces issue info in several places:
 To push your changes back:
 
 ```bash
-cd ~/drupal-core
+cd ~/drupal-core  # or ~/module_or_theme_name
 
 # ... make changes ...
 
@@ -87,11 +134,11 @@ cd ~/drupal-core
 git push issue HEAD
 ```
 
-Then create or update the merge request on [drupal.org](https://www.drupal.org/project/drupal).
+Then create or update the issue’s associated merge request.
 
 ## First contribution workflow (manual)
 
-If you prefer to set up manually:
+If you prefer to set up a core feature branch manually:
 
 ```bash
 # In the workspace terminal:
@@ -107,7 +154,7 @@ git remote add fork https://git.drupalcode.org/issue/drupal-NNNNN.git
 git push fork my-fix
 ```
 
-Then create a merge request on [drupal.org](https://www.drupal.org/project/drupal).
+Then create a merge request using the link from the output of the prior command.
 
 ---
 
diff --git a/drupal-core/template.tf b/drupal-core/template.tf
index dccd3ae..6fc059f 100644
--- a/drupal-core/template.tf
+++ b/drupal-core/template.tf
@@ -117,21 +117,21 @@ data "coder_parameter" "drupal_version" {
 data "coder_parameter" "install_profile" {
   name         = "install_profile"
   display_name = "Install Profile"
-  description  = "Drupal install profile. demo_umami uses a pre-built database snapshot (12.x only); other profiles and non-12.x versions always run a full site install."
+  description  = "Drupal install profile. Demo Umami on Drupal 12 can use a pre-built snapshot for quicker first boot; Standard, Minimal and Drupal 11.x and 10.x always run a full site install."
   type         = "string"
   default      = "demo_umami"
   mutable      = true
   order        = 3
   option {
-    name  = "demo_umami"
+    name  = "Demo Umami"
     value = "demo_umami"
   }
   option {
-    name  = "minimal"
+    name  = "Minimal"
     value = "minimal"
   }
   option {
-    name  = "standard"
+    name  = "Standard"
     value = "standard"
   }
 }