Site: mark Studio as coming soon

apps/site/content/docs/studio.md

@@ -7,6 +7,8 @@ order: 23
 
 # Studio
 
+> **Coming soon.** The hosted Studio at studio.polyxd.com isn't open yet. This page describes what it will do.
+
 [Studio](https://studio.polyxd.com) is the team's side of Polyxd: source-available (the [Functional Source License](https://fsl.software), in `apps/studio`: free to run for your own team or company, not as a competing hosted service, and each version becomes Apache-2.0 after two years), running on Cloudflare Workers with D1 and R2, and the same code whether you use the hosted one or your own. The hosted Studio has a Free plan and paid ones ([Plans](#plans)); a Studio you run yourself has no plans and no limits.
 
 ## Your design system

apps/site/scripts/build.ts

@@ -194,7 +194,7 @@ function header(current: string) {
 <a class="nav-optional" href="/how-it-works/"${cur("how-it-works")}>Product</a>
 <a class="nav-optional" href="/design-systems/"${cur("design-systems")}>Design systems</a>
 <a class="nav-wide" href="/verify/"${cur("verify")}>Verify</a>
-<a class="nav-wide" href="/studio/"${cur("studio")}>Studio</a>
+<a class="nav-wide" href="/studio/"${cur("studio")}>Studio <span class="soon">Coming soon</span></a>
 <a class="nav-wide" href="/demos/">Demos</a>
 <a href="/docs/"${cur("docs")}>Docs</a>
 <a class="nav-wide" href="${GITHUB}">GitHub</a>
@@ -213,14 +213,14 @@ const footer = `<footer class="site-footer" aria-labelledby="footer-title">
 <canvas class="footer-field" data-field data-rest="#141413" data-rest-alpha=".34" data-active="#F3F1EC" data-density=".8" data-quiet=".footer-line, .footer-actions, .footer-col, .footer-base" data-solid=".footer-giant .footer-mark, .footer-word" aria-hidden="true"></canvas>
 <div class="wrap footer-top">
 <p class="display footer-line" id="footer-title">Every ask gets a screen.</p>
-<div class="footer-actions"><a class="btn footer-btn" href="/docs/quickstart/">Get started</a><a class="footer-quiet" href="https://studio.polyxd.com">Try Studio</a></div>
+<div class="footer-actions"><a class="btn footer-btn" href="/docs/quickstart/">Get started</a><a class="footer-quiet" href="/studio/">Studio <span class="soon">Coming soon</span></a></div>
 </div>
 <div class="wrap footer-cols">
 <nav aria-label="Footer">
-<span class="footer-col"><b>Product</b><a href="/how-it-works/">How it works</a><a href="/design-systems/">Design systems</a><a href="/verify/">Verify</a><a href="/studio/">Studio</a></span>
+<span class="footer-col"><b>Product</b><a href="/how-it-works/">How it works</a><a href="/design-systems/">Design systems</a><a href="/verify/">Verify</a><a href="/studio/">Studio <span class="soon">Coming soon</span></a></span>
 <span class="footer-col"><b>For</b><a href="/designers/">Designers</a><a href="/design-system-teams/">Design-system teams</a><a href="/developers/">Engineers</a><a href="/product-teams/">Product teams</a></span>
 <span class="footer-col"><b>Build</b><a href="/docs/">Docs</a><a href="/docs/quickstart/">Quickstart</a><a href="/gallery/">Gallery</a><a href="/demos/">Demos</a></span>
-<span class="footer-col"><b>Open</b><a href="/open-source/">Open source</a><a href="${GITHUB}">GitHub</a><a href="/docs/roadmap/">Roadmap</a><a href="https://studio.polyxd.com">Try Studio</a></span>
+<span class="footer-col"><b>Open</b><a href="/open-source/">Open source</a><a href="${GITHUB}">GitHub</a><a href="/docs/roadmap/">Roadmap</a><a href="/studio/">Studio <span class="soon">Coming soon</span></a></span>
 </nav>
 </div>
 <div class="footer-giant" aria-hidden="true">${livingMark({ size: 320, mono: "ink", className: "footer-mark" })}<span class="footer-word">polyxd</span></div>
@@ -1187,7 +1187,7 @@ const LANDING_PAGES: LandingPage[] = [
     title: "How Polyxd works", description: "A model, a template or a designer writes a small document. Your product draws it with your design system. A verifier checks it first.",
     eyebrow: "How it works", h1: "Polyxd turns the answer into a screen.",
     lead: "A small document says what the screen means. Your design system draws it. A verifier checks it before anyone sees it.",
-    ctas: [["Get started", "/docs/quickstart/"], ["Try Studio", "https://studio.polyxd.com"]],
+    ctas: [["Get started", "/docs/quickstart/"], ["Studio · coming soon", "/studio/"]],
     art: art.screen(send.intent.document, "material3"),
     blocks: [
       { scene: "gap" }, { scene: "turn" },
@@ -1237,7 +1237,7 @@ const LANDING_PAGES: LandingPage[] = [
     title: "For designers · Polyxd", description: "Decide what every screen must be like, and prove it. Your taste becomes a file the generator follows.",
     eyebrow: "For designers", h1: "Draw the rules, not every screen.",
     lead: "Decide what every screen must be like, and prove it. Author the ones that matter in the same format.",
-    ctas: [["Try Studio", "https://studio.polyxd.com"], ["The designer’s job", "/docs/designers/"]],
+    ctas: [["Studio · coming soon", "/studio/"], ["The designer’s job", "/docs/designers/"]],
     art: art.screen(refund.intent.document, "polaris"),
     blocks: [
       { points: { title: "The same judgement, applied once.", items: [
@@ -1254,7 +1254,7 @@ const LANDING_PAGES: LandingPage[] = [
     title: "For design-system teams · Polyxd", description: "One contract of 87 roles, checked before publishing, used by every generated screen.",
     eyebrow: "For design-system teams", h1: "Adoption you can prove.",
     lead: "One contract of 87 roles, contrast checked before anything publishes, and every generated screen built from your components.",
-    ctas: [["Bring your design system", "/docs/your-design-system/"], ["Try Studio", "https://studio.polyxd.com"]],
+    ctas: [["Bring your design system", "/docs/your-design-system/"], ["Studio · coming soon", "/studio/"]],
     art: art.wall(),
     blocks: [
       { term: { title: "Your tokens, read in one command.", lead: "Every guess written down. Every failing colour pair named.", code: `<span class="dim">$</span> npx polyxd pack ./tokens.css\n--brand-600   → <em>action.primary</em>\n--gray-50     → <em>surface.base</em>\n<span class="dim">…</span>\n<em>2 pairs fail 4.5:1</em>`, link: ["Your design system", "/docs/your-design-system/"] } },

apps/site/src/assets/site.css

@@ -660,3 +660,22 @@ select:focus-visible {
 @media (prefers-reduced-motion: reduce) {
   .theme-options { transition: none; }
 }
+
+/* Studio isn't open yet: a small tag beside every mention, and its buttons shown but not pressable. */
+.soon {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 7px;
+  border: 1px solid currentColor;
+  border-radius: var(--radius-pill);
+  font-size: 0.68em;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 1.5;
+  text-transform: uppercase;
+  vertical-align: middle;
+  white-space: nowrap;
+  opacity: 0.75;
+}
+.nav-wide:has(.soon) { white-space: nowrap; }
+.btn.is-soon { opacity: 0.6; cursor: default; pointer-events: none; }

apps/site/src/index.html

@@ -36,7 +36,7 @@ <h1 class="display hero-title" id="hero-title">Every ask gets a screen.</h1>
 <button class="btn btn-signal" type="submit">Show me</button>
 </form>
 <div class="chips" role="group" aria-label="Pick an ask"><!--HERO_CHIPS--></div>
-<p class="hero-ctas"><a class="btn btn-line" href="/docs/quickstart/">Get started</a><a class="hero-link" href="https://studio.polyxd.com">Try Studio</a></p>
+<p class="hero-ctas"><a class="btn btn-line" href="/docs/quickstart/">Get started</a><a class="hero-link" href="/studio/">Studio <span class="soon">Coming soon</span></a></p>
 </div>
 <div class="hero-stage" data-stage>
 <div class="hero-mark" data-hero-mark><!--MARK:idle:320:big-mark--></div>

apps/site/src/scenes/cta.html

@@ -2,11 +2,11 @@
 <div class="wrap">
 <div class="cta-mark"><!--MARK:looking:112:cta-mark--></div>
 <h2 class="display" id="start-title">Open spec. Any model. Your design system.</h2>
-<p class="cta-buttons"><a class="btn btn-signal" href="/docs/quickstart/">Get started</a><a class="btn btn-line" href="https://studio.polyxd.com">Try Studio</a></p>
+<p class="cta-buttons"><a class="btn btn-signal" href="/docs/quickstart/">Get started</a><a class="btn btn-line" href="/studio/">Studio <span class="soon">Coming soon</span></a></p>
 <ul class="paths">
 <li><a href="/docs/quickstart/"><span class="path-ico"><!--ICON:react:22--></span><code>npm i @polyxd/react</code><b>Render your first screen</b><span>In the app you already have.</span></a></li>
 <li><a href="/docs/your-design-system/"><span class="path-ico"><!--ICON:import:22--></span><code>npx polyxd pack</code><b>Bring your design system</b><span>See what maps, and which colour pairs fail.</span></a></li>
-<li><a href="https://studio.polyxd.com"><span class="path-ico"><!--ICON:layers:22--></span><code>studio.polyxd.com</code><b>Try Studio</b><span>Free for one workspace. Import tokens, write screens.</span></a></li>
+<li><a href="/studio/"><span class="path-ico"><!--ICON:layers:22--></span><code>studio.polyxd.com</code><b>Studio <span class="soon">Coming soon</span></b><span>Import tokens, write screens.</span></a></li>
 <li><a href="/demos/"><span class="path-ico"><!--ICON:phone:22--></span><code>/demos</code><b>Open the demos</b><span>Four products. Ask them for anything.</span></a></li>
 </ul>
 </div>

apps/site/src/scenes/platform.html

@@ -5,7 +5,7 @@
 <h2 class="display scene-title" id="platform-title">More than a screen on demand.</h2>
 <ul class="tools" data-tools>
 <li><button type="button" data-tool="0" aria-pressed="true"><!--ICON:import:20-->Bring your design system</button></li>
-<li><button type="button" data-tool="1" aria-pressed="false"><!--ICON:layers:20-->Studio</button></li>
+<li><button type="button" data-tool="1" aria-pressed="false"><!--ICON:layers:20-->Studio <span class="soon">Coming soon</span></button></li>
 <li><button type="button" data-tool="2" aria-pressed="false"><!--ICON:design:20-->Screens and the shell</button></li>
 <li><button type="button" data-tool="3" aria-pressed="false"><!--ICON:check:20-->Verify on every change</button></li>
 <li><button type="button" data-tool="4" aria-pressed="false"><!--ICON:editor:20-->In your editor</button></li>
@@ -28,7 +28,7 @@ <h2 class="display scene-title" id="platform-title">More than a screen on demand
 <a class="panel-link" href="/docs/your-design-system/">Bring your design system</a>
 </article>
 <article class="tool-panel" data-panel="1" hidden>
-<p class="eyebrow">studio.polyxd.com</p><h3 class="panel-title">Map your tokens to 87 roles. Nothing publishes until every pair passes.</h3>
+<p class="eyebrow">studio.polyxd.com <span class="soon">Coming soon</span></p><h3 class="panel-title">Map your tokens to 87 roles. Nothing publishes until every pair passes.</h3>
 <div class="roles-table">
 <div><code>action.primary</code><i style="background:#2F5BEA"></i><span>5.5:1</span></div>
 <div><code>text.primary</code><i style="background:#151A24"></i><span>16.1:1</span></div>
@@ -39,7 +39,7 @@ <h2 class="display scene-title" id="platform-title">More than a screen on demand
 <a class="panel-link" href="/studio/">Studio</a>
 </article>
 <article class="tool-panel" data-panel="2" hidden>
-<p class="eyebrow">Studio · Screens</p><h3 class="panel-title">Write screens, and the frame around them, in the same format.</h3>
+<p class="eyebrow">Studio · Screens <span class="soon">Coming soon</span></p><h3 class="panel-title">Write screens, and the frame around them, in the same format.</h3>
 <div class="shell-sketch" aria-hidden="true"><i class="shell-bar"></i><div><i class="shell-nav"></i><i class="shell-slot"><span class="mono">Any screen goes here</span></i></div><i class="shell-foot"></i></div>
 <a class="panel-link" href="/docs/shell/">The shell as a document</a>
 </article>

apps/site/src/scenes/studio.html

@@ -2,7 +2,7 @@
 <section class="section hs" id="studio" aria-labelledby="hs-title">
 <div class="wrap hs-grid">
 <div class="hs-copy">
-<p class="eyebrow st-eyebrow"><!--MARK:looking:22-->Polyxd Studio</p>
+<p class="eyebrow st-eyebrow"><!--MARK:looking:22-->Polyxd Studio <span class="soon">Coming soon</span></p>
 <h2 class="display scene-title" id="hs-title">Set up your design system once. Use it everywhere.</h2>
 <p class="hs-lead">The web app where your team keeps the design system Polyxd draws with.</p>
 <ul class="hs-tiles">
@@ -11,7 +11,7 @@ <h2 class="display scene-title" id="hs-title">Set up your design system once. Us
 <li><span class="ico"><!--ICON:design--></span><b>Design</b><span class="hs-sub hs-dev" aria-label="Phone, tablet and desktop"><i style="width:12px;height:20px"></i><i style="width:24px;height:17px"></i><i style="width:34px;height:21px"></i></span></li>
 <li><span class="ico"><!--ICON:export--></span><b>Export</b><span class="hs-sub mono">CSS · Swift · Compose +3</span></li>
 </ul>
-<p class="hs-actions"><a class="btn btn-signal" href="https://studio.polyxd.com">Try Studio, free</a><a class="link-btn" href="/studio/">See how it works</a></p>
+<p class="hs-actions"><span class="btn btn-signal is-soon" aria-disabled="true">Studio is coming soon</span><a class="link-btn" href="/studio/">See how it works</a></p>
 </div>
 <div class="hs-art" aria-hidden="true">
 <!--ST_WINDOW-->

apps/site/src/studio.html

@@ -23,10 +23,10 @@
 <canvas class="field" data-field data-quiet=".site-header .brand, .site-header .site-nav a, [data-quiet] .hero-eyebrow, [data-quiet] .hero-title, [data-quiet] .hero-lead, [data-quiet] .verbs b" data-solid="[data-quiet] .cta-row .btn, [data-quiet] .verbs .ico" aria-hidden="true"></canvas>
 <div class="wrap hero-grid sh-grid">
 <div class="hero-copy" data-quiet>
-<p class="eyebrow hero-eyebrow"><span class="dot" aria-hidden="true"></span>Studio · free for one workspace</p>
+<p class="eyebrow hero-eyebrow"><span class="dot" aria-hidden="true"></span>Studio · coming soon</p>
 <h1 class="display hero-title page-title" id="page-title">Set up your design system once. Use it everywhere.</h1>
 <p class="hero-lead">Bring in your tokens, check them, design with them, ship them.</p>
-<p class="cta-row"><a class="btn btn-signal" href="https://studio.polyxd.com">Try Studio</a><a class="btn btn-line" href="#drift">See how it works</a></p>
+<p class="cta-row"><span class="btn btn-signal is-soon" aria-disabled="true">Studio is coming soon</span><a class="btn btn-line" href="#drift">See how it works</a></p>
 <ul class="verbs" aria-label="What you do in Studio">
 <li><span class="ico"><!--ICON:import--></span><b>Import</b></li>
 <li><span class="ico"><!--ICON:check--></span><b>Check</b></li>
@@ -257,7 +257,7 @@ <h2 class="display scene-title" id="sb-title">What you get.</h2>
 <div class="wrap sb-cta-in">
 <!--MARK:looking:64-->
 <h2 class="display scene-title center" id="sb-cta-title">Bring your design system home.</h2>
-<p class="cta-row"><a class="btn btn-signal" href="https://studio.polyxd.com">Try Studio, free</a><a class="btn btn-line" href="/docs/studio/#run-it-yourself">Run it yourself</a></p>
+<p class="cta-row"><span class="btn btn-signal is-soon" aria-disabled="true">Studio is coming soon</span><a class="btn btn-line" href="/docs/studio/#run-it-yourself">Run it yourself</a></p>
 <p class="sb-soon mono">Coming next, not shipped: reviews, releases, insights. <a href="/docs/roadmap/">Roadmap</a></p>
 </div>
 </section>