design: declutter the studio shell — quiet chrome, one accent moment

Multi-agent UX audit (6 dimensions + adversarial critique) measured ~70
interactive chrome elements before any content, the same datum repeated
2-4x across strips, and 5-6 accent hues competing per viewport.

Shell:
- TopBar 12 items -> 6: cut dead glyphs, PRODUCTION/ONLINE dup, Monitoring
  (gag re-homed in the command palette), version tag
- QueryChrome 5 strips -> 4 bands, 29 interactive -> 8 visible: single RUN
  toolbar, README tab and Query/Copy/SANDBOX/AI controls removed, results
  row trimmed to Results/Explain/History/Autopilot + a real overflow menu
  holding the remaining feature-tease gags, duplicate meta strips deleted
- StatusBar 15 items -> 9: one animated Connected pulse (the only one left
  on the page), real links promoted, single faint identity cluster
- Explorer: count de-pilled, badges quieted, carets dim at rest, footer
  with conflicting v1.2.5 removed, CONNECTIONS label and search placeholder
  dropped

Hero: subtitle rewritten with DB names as green SQL string literals (one
hue instead of five), stats deduped (MIT/OSS merged, AI keeps purple),
family cards neutralized, studio self-link now a div, footnotes trimmed.

A11y bundle: skip-to-content link, :focus-visible ring, aria-labels on
explorer asides, 40px mobile hit areas, honest "Live Demo" mobile CTA,
fake buttons demoted to spans (~66 -> 33 tab stops before the hero CTA),
toast glyph cleanup + keyboard focus pauses auto-dismiss.

Section pages: Features kickers single-hue (AI keeps purple), TechStack/
Reliability stat rainbows flattened, Redis off the error-red token.

Design doc: docs/designs/2026-07-15-declutter-shell-design.md
Before/after: docs/designs/_ref/shots/declutter-*.png

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: cevheri

docs/designs/2026-07-15-declutter-shell-design.md

@@ -0,0 +1,98 @@
+# Declutter the studio shell — design
+
+**Date:** 2026-07-15 · **Branch:** `design/declutter-shell`
+
+## Problem
+
+The IDE-shell concept is loved, but the page is overloaded. Measured on the
+desktop homepage (multi-agent audit, 6 dimensions + adversarial critique):
+
+- ~70 interactive chrome elements render before any marketing content
+  (~66 tab stops before the first CTA for keyboard users).
+- 19 buttons are `data-action="notice"` no-ops occupying tab order.
+- The same datum repeats: row count ×3, exec time ×2, `home.sql` ×3,
+  Connected/Online ×4, version ×3 (`v0.9.29` twice + a conflicting `v1.2.5`),
+  GitHub reachable from 4 chrome slots, open-source/MIT stated 4×.
+- 5–6 accent hues compete in one viewport (rainbow DB names, 4-color stats,
+  multi-color badges); no single accent moment.
+- QueryChrome stacks 5 horizontal strips above the H1 (~y=395px).
+
+## Principles
+
+1. **One strip, one job.** No datum appears twice in the shell.
+2. **Semantic color budget.** Blue = interactive/CTA (filled blue on exactly
+   two elements: Live Demo + RUN). Green = connection state, one animated
+   pulse total (StatusBar). Amber = warning/pre-alpha only. Purple = AI only.
+   Red = errors only. Everything else zinc.
+3. **Progressive disclosure, not deletion.** The console-notice gags are demo
+   funnels — they survive one click deeper (Query menu, `⋯` overflow, ⌘K
+   palette) or become non-focusable spans. The IDE fiction stays.
+4. **Chrome type scale:** 11 / 12 / 13 / 15 px only (no half-pixel steps).
+5. Mono stays everywhere (spec: mono-first). Body copy gets reading
+   ergonomics (measure/leading), not a sans face.
+
+## Changes
+
+### TopBar (12 items → 7)
+Cut: `▤ ＋` dead glyphs, `PRODUCTION • ONLINE` caps, separate Online pill,
+Monitoring button, `v0.9.29`. Connection chip gets one static green dot.
+Monitoring gag re-homed as a ⌘K palette entry. Keep: brand, connection chip,
+★ GitHub, Playground, ⌘K, Live Demo (filled).
+
+### QueryChrome (5 strips → 4 bands, 29 interactive → 8 visible)
+Owner-directed final form (tightened beyond the audit consensus):
+- Tab bar: `{table}.sql` + ✕ (kept gag), `＋` demoted to span. README.md tab
+  removed — GitHub lives in TopBar + StatusBar.
+- Toolbar strips 2+3 replaced by ONE strip holding only **RUN** + ⌘+Enter
+  chip. Query/Save/Copy/BEGIN/SANDBOX/EDIT/IMPORT/Format/Clear/Lines/AI all
+  removed from chrome (Copy/Export/AI remain reachable via ⌘K palette).
+- Results row: Results, ✦ Explain (single trigger), History (span),
+  Autopilot, and a `⋯` overflow with Saved/Charts/NL2SQL/Pivot/Diff/Dashboard
+  (notices intact). Docs tab and the `{rows} · {cols} · {ms}` + Export meta
+  removed — RUN's console toast still reports rows/ms in-fiction.
+- Result-meta strip (strip 5) deleted — it was 100 % duplicate data.
+
+### StatusBar (15 items → 9)
+Keep: Connected (the one animated pulse), 5 real links (promoted to
+`text-muted`), one faint identity cluster `Ln 1, Col 1 · UTF-8 · SQL · ◆ v0.9.29`.
+Cut: `LibreDB:latest`, `public`, `{table}.sql`, `{rows} rows`, duplicate brand.
+
+### Explorer
+Count pill de-pilled (plain faint text). Schema badges quieted to lowercase
+`text-dim`, no border/accent. Row counts stay (core "table = page" loop) but
+carets dim at rest and brighten on hover/active. Rows default `text-muted`,
+active bright (Railway dim pattern). Column `◆` icons → `text-dim`.
+Sidebar footer deleted (duplicate Connected + conflicting `v1.2.5`).
+Toggles: `tabindex="-1"`, ≥24 px hit area (36 px in drawer).
+
+### HomeSection
+- Badge pill kept (fastest open-source signal), dot static.
+- Subtitle rewritten (~20 words, "IDE" matches H1, no adjective stack); the
+  7 DB names render as **quoted green SQL string literals** — one hue,
+  in-fiction, replacing the 5-hue rainbow.
+- Stats: `7+ Databases`/`100% Open Source`/`MIT License` dedup →
+  `1-click Deploy anywhere · MIT Open source & free · AI Native Copilot ·
+  SSO Enterprise sign-on`; numerals `text-bright`, AI tile keeps `text-ai`.
+- Tip comments 2 → 1 line; family heading → "one core, three products";
+  studio card no longer a self-link (div, keeps ring + "you are here");
+  footnote 3 lines → 1, sponsor line dropped (StatusBar link covers it).
+
+### Accessibility bundle
+Skip-to-content link (in-character), `aria-label="Explorer"` on asides,
+global `:focus-visible` ring in primary, mobile drawer ✕ and Explain ≥40 px
+hit areas, mobile CTA relabeled `▶ Live Demo` (was a dishonest `RUN`),
+toast NOTICES lose leading glyphs (SR noise) and pause on keyboard focus,
+~15 fake buttons demoted to spans (delegated handler works on any Element).
+
+### Section-page color discipline (cheap, systemic)
+Features kickers: 7-color map → `text-dim` (AI keeps `text-ai`; SECURITY no
+longer error-red). TechStack layer headers + Reliability stat numbers →
+`text-bright`. Providers keeps its syntax-mimicry colors, but Redis moves off
+the `text-bad` error token.
+
+## Out of scope (follow-ups)
+- Deploy page: collapse 26 "planned" targets into chips; one-color summary.
+- Docker-compose page: `<details>` per env-var group; nest under deploy in tree.
+- Hero "one live moment" (query types itself once, VT-safe).
+- Trust row under stats (GitHub stars / quote as SQL comment).
+- Tokenized type scale in `@theme` + CI guard against new `text-[..px]` in chrome.

src/components/sections/DatabaseReliabilitySection.astro

@@ -3,10 +3,10 @@ import SectionHeader from './SectionHeader.astro';
 import DatabaseCtaFooter from './DatabaseCtaFooter.astro';
 
 const numbers = [
-  { n: '~712', l: 'lines of shipped code', cls: 'text-primary' },
-  { n: '0', l: 'runtime dependencies', cls: 'text-ok' },
-  { n: '2.83 kB', l: 'bundled (min+brotli)', cls: 'text-ai' },
-  { n: '100%', l: 'core line coverage', cls: 'text-warn' },
+  { n: '~712', l: 'lines of shipped code', cls: 'text-bright' },
+  { n: '0', l: 'runtime dependencies', cls: 'text-bright' },
+  { n: '2.83 kB', l: 'bundled (min+brotli)', cls: 'text-bright' },
+  { n: '100%', l: 'core line coverage', cls: 'text-bright' },
 ];
 
 const notForYet = [

src/components/sections/FeaturesSection.astro

@@ -3,14 +3,15 @@ import SectionHeader from './SectionHeader.astro';
 
 type Cat = 'EDITOR' | 'AI' | 'CORE' | 'DATA' | 'SCHEMA' | 'SECURITY' | 'TOOLING';
 
+// Color budget: purple marks the AI differentiator; every other category stays quiet.
 const catColor: Record<Cat, string> = {
   AI: 'text-ai',
-  EDITOR: 'text-primary',
-  CORE: 'text-ok',
-  DATA: 'text-warn',
-  SCHEMA: 'text-primary',
-  SECURITY: 'text-bad',
-  TOOLING: 'text-muted',
+  EDITOR: 'text-dim',
+  CORE: 'text-dim',
+  DATA: 'text-dim',
+  SCHEMA: 'text-dim',
+  SECURITY: 'text-dim',
+  TOOLING: 'text-dim',
 };
 
 interface Feature {

src/components/sections/HomeSection.astro

@@ -2,19 +2,21 @@
 const DEMO = 'https://app.libredb.org';
 
 const stats = [
-  { n: '7+', l: 'Databases', cls: 'text-primary' },
-  { n: '100%', l: 'Open Source', cls: 'text-ok' },
-  { n: 'AI', l: 'Native', cls: 'text-ai' },
-  { n: 'MIT', l: 'License', cls: 'text-warn' },
+  { n: '1-click', l: 'Deploy anywhere', cls: 'text-bright' },
+  { n: 'MIT', l: 'Open source & free', cls: 'text-bright' },
+  { n: 'AI', l: 'Native Copilot', cls: 'text-ai' },
+  { n: 'SSO', l: 'Enterprise sign-on', cls: 'text-bright' },
 ];
+
+const databases = ['PostgreSQL', 'MySQL', 'Oracle', 'SQL Server', 'SQLite', 'MongoDB', 'Redis'];
 ---
 
 <div class="mx-auto max-w-5xl px-1">
   <!-- Badge -->
   <span
-    class="inline-flex items-center gap-2 rounded-full border border-ok/30 bg-ok-tint px-3 py-1 text-[12.5px] text-ok"
+    class="inline-flex items-center gap-2 rounded-full border border-ok/30 bg-ok-tint px-3 py-1 text-[12px] text-ok"
   >
-    <span class="h-1.5 w-1.5 animate-pulse-dot rounded-full bg-ok" aria-hidden="true"></span>
+    <span class="h-1.5 w-1.5 rounded-full bg-ok" aria-hidden="true"></span>
     Open Source &amp; Free Forever · MIT
   </span>
 
@@ -23,15 +25,18 @@ const stats = [
     The Modern, <span class="text-primary">AI-Powered</span><br class="hidden sm:block" /> SQL IDE
   </h1>
 
-  <!-- Subtitle -->
+  <!-- Subtitle: the seven engines read as SQL string literals — one hue, in-fiction -->
   <p class="mt-6 max-w-2xl text-[15px] leading-relaxed text-muted sm:text-base">
-    A lightweight, high-performance, and enterprise-secure web-based SQL editor with SSO for cloud-native teams. Connect
-    to <strong class="font-semibold text-primary">PostgreSQL</strong>,
-    <strong class="font-semibold text-ok">MySQL</strong>, <strong class="font-semibold text-warn">Oracle</strong>,
-    <strong class="font-semibold text-primary">SQL Server</strong>, <strong class="font-semibold text-ai">SQLite</strong
-    >,
-    <strong class="font-semibold text-ok">MongoDB</strong>, or <strong class="font-semibold text-bad">Redis</strong>
-    &mdash; from anywhere.
+    The open-source SQL IDE for the web — speaks{' '}
+    {
+      databases.map((db, i) => (
+        <>
+          <span class="sql-str">'{db}'</span>
+          {i < databases.length - 1 ? ', ' : '. '}
+        </>
+      ))
+    }
+    SSO built in, runs anywhere.
   </p>
 
   <!-- CTAs -->
@@ -74,54 +79,43 @@ const stats = [
 
   <!-- Hint (only meaningful on desktop where the explorer drives navigation) -->
   <p class="mt-8 hidden text-[13px] leading-relaxed text-faint lg:block">
-    <span class="sql-com">-- tip: pick a page from the explorer on the left.</span><br />
-    <span class="sql-com">-- each menu item runs a query and returns its content below.</span>
+    <span class="sql-com">-- tip: every item in the explorer runs a query. pick one.</span>
   </p>
 
   <!-- The LibreDB family / open-core (secondary; Studio stays the hero above) -->
   <div class="mt-12 border-t border-edge pt-8">
-    <p class="text-[11px] tracking-wider text-faint uppercase">The LibreDB family — one spine, three faces</p>
+    <p class="text-[11px] tracking-wider text-faint uppercase">The LibreDB family — one core, three products</p>
     <div class="mt-4 grid grid-cols-1 gap-px overflow-hidden border border-edge bg-edge sm:grid-cols-3">
       <a href="/database" class="flex flex-col bg-panel p-5 transition-colors hover:bg-raised">
         <div class="flex items-baseline justify-between gap-2">
-          <h3 class="text-[15px] font-bold text-fg">database</h3>
-          <span class="text-[10.5px] text-warn">OSS · pre-alpha</span>
+          <h3 class="text-[15px] font-bold text-bright">database</h3>
+          <span class="text-[11px] text-dim">OSS · pre-alpha</span>
         </div>
-        <p class="mt-2 text-[12.5px] leading-relaxed text-dim">
+        <p class="mt-2 text-[12px] leading-relaxed text-dim">
           The plain core — an embedded, multimodal engine you can read in one sitting.
         </p>
       </a>
-      <a href="/" class="flex flex-col bg-raised p-5 ring-1 ring-primary/40 ring-inset">
+      <div class="flex flex-col bg-raised p-5 ring-1 ring-primary/40 ring-inset">
         <div class="flex items-baseline justify-between gap-2">
-          <h3 class="text-[15px] font-bold text-primary">studio</h3>
-          <span class="text-[10.5px] text-ok">OSS · stable</span>
+          <h3 class="text-[15px] font-bold text-bright">studio</h3>
+          <span class="text-[11px] text-ok">OSS · stable</span>
         </div>
-        <p class="mt-2 text-[12.5px] leading-relaxed text-dim">
-          The readable face — the AI-powered SQL IDE for every database. <span class="text-primary">← you are here</span
-          >
+        <p class="mt-2 text-[12px] leading-relaxed text-dim">
+          The readable face — the AI-powered SQL IDE for every database. <span class="text-dim">← you are here</span>
         </p>
-      </a>
+      </div>
       <a href="/platform" class="flex flex-col bg-panel p-5 transition-colors hover:bg-raised">
         <div class="flex items-baseline justify-between gap-2">
-          <h3 class="text-[15px] font-bold text-ai">platform</h3>
-          <span class="text-[10.5px] text-ai">beta</span>
+          <h3 class="text-[15px] font-bold text-bright">platform</h3>
+          <span class="text-[11px] text-dim">beta</span>
         </div>
-        <p class="mt-2 text-[12.5px] leading-relaxed text-dim">
+        <p class="mt-2 text-[12px] leading-relaxed text-dim">
           Managed for teams — Database Access Governance: authorized, audited, multi-tenant.
         </p>
       </a>
     </div>
     <p class="mt-4 text-[13px] leading-relaxed text-dim">
-      <span class="sql-com">-- open core: Studio is free &amp; open; Platform funds the open-source work.</span><br />
-      <span class="sql-com"
-        >-- Studio opens live with a ready-to-use LibreDB sample across all three lenses, zero setup.</span
-      ><br />
-      <span class="sql-com">-- love the open-source work? </span><a
-        href="https://github.com/sponsors/libredb"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="text-ok hover:underline">sponsor us ♥</a
-      >
+      <span class="sql-com">-- open core: Studio is free &amp; open; Platform funds the work.</span>
     </p>
   </div>
 </div>

src/components/sections/ProvidersSection.astro

@@ -58,7 +58,7 @@ const databases: DB[] = [
     name: 'Redis',
     type: 'key-value',
     driver: 'redis',
-    color: 'text-bad',
+    color: 'text-keyword',
     summary: 'Key-value store support with key browser, TTL management, and memory monitoring.',
   },
   {

src/components/sections/TechStackSection.astro

@@ -10,7 +10,7 @@ interface Layer {
 const layers: Layer[] = [
   {
     layer: 'FRONTEND',
-    color: 'text-primary',
+    color: 'text-bright',
     tools: [
       { name: 'Next.js 16', role: 'App Router' },
       { name: 'React 19', role: 'Server Components' },
@@ -20,7 +20,7 @@ const layers: Layer[] = [
   },
   {
     layer: 'EDITOR & DATA',
-    color: 'text-ok',
+    color: 'text-bright',
     tools: [
       { name: 'Monaco Editor', role: 'VS Code Engine' },
       { name: 'TanStack Table', role: 'Data Grid' },
@@ -30,7 +30,7 @@ const layers: Layer[] = [
   },
   {
     layer: 'AI & AUTH',
-    color: 'text-ai',
+    color: 'text-bright',
     tools: [
       { name: 'Gemini 2.5', role: 'Default LLM' },
       { name: 'OpenAI / Claude', role: 'Alternatives' },
@@ -40,7 +40,7 @@ const layers: Layer[] = [
   },
   {
     layer: 'DEVOPS',
-    color: 'text-warn',
+    color: 'text-bright',
     tools: [
       { name: 'Docker', role: 'Container' },
       { name: 'Kubernetes', role: 'Orchestration' },