docs: DOC-1463: Add html diagrams to improve look of docs

docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/styles.css

@@ -0,0 +1,7 @@
+/* Deephaven Design System — global entry point.
+   Consumers link this single file. Import order only; no rules here. */
+@import "./tokens/fonts.css";
+@import "./tokens/colors.css";
+@import "./tokens/typography.css";
+@import "./tokens/spacing.css";
+@import "./tokens/effects.css";

docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/colors.css

@@ -0,0 +1,175 @@
+/* Deephaven color palette
+   Scales run 100 (darkest / most saturated) -> 1100 (lightest).
+   Sampled from the official brand color reference. */
+:root {
+  /* Primary — deep indigo/blue (brand core) */
+  --dh-primary-100: #031055;
+  --dh-primary-200: #011568;
+  --dh-primary-300: #00197e;
+  --dh-primary-400: #011e93;
+  --dh-primary-500: #0121a9;
+  --dh-primary-600: #0824c1;
+  --dh-primary-700: #243aca;
+  --dh-primary-800: #384dd5;
+  --dh-primary-900: #485fe0;
+  --dh-primary-1000: #5a70e8;
+  --dh-primary-1100: #6b81f1;
+
+  /* Secondary — cyan / teal */
+  --dh-secondary-100: #20454f;
+  --dh-secondary-200: #356270;
+  --dh-secondary-300: #4e8290;
+  --dh-secondary-400: #64a4b4;
+  --dh-secondary-500: #7ec5da;
+  --dh-secondary-600: #98e9ff;
+  --dh-secondary-700: #aaecff;
+  --dh-secondary-800: #b8f2ff;
+  --dh-secondary-900: #c8f4ff;
+  --dh-secondary-1000: #d7f7ff;
+  --dh-secondary-1100: #e4fbff;
+
+  /* Negative — red / magenta (errors, sell, down) */
+  --dh-negative-100: #7a0d28;
+  --dh-negative-200: #901634;
+  --dh-negative-300: #a91d40;
+  --dh-negative-400: #c2254c;
+  --dh-negative-500: #d92e59;
+  --dh-negative-600: #f23766;
+  --dh-negative-700: #f54b71;
+  --dh-negative-800: #f5597e;
+  --dh-negative-900: #f66888;
+  --dh-negative-1000: #f77794;
+  --dh-negative-1100: #f7829f;
+
+  /* Positive — green (success, buy, up) */
+  --dh-positive-100: #29780d;
+  --dh-positive-200: #368e16;
+  --dh-positive-300: #40a61f;
+  --dh-positive-400: #4cc024;
+  --dh-positive-500: #59d92f;
+  --dh-positive-600: #63f337;
+  --dh-positive-700: #72f548;
+  --dh-positive-800: #7ef758;
+  --dh-positive-900: #88fa66;
+  --dh-positive-1000: #92fb70;
+  --dh-positive-1100: #9dfc7d;
+
+  /* Warn — amber / gold */
+  --dh-warn-100: #997915;
+  --dh-warn-200: #ab8a1e;
+  --dh-warn-300: #c09c27;
+  --dh-warn-400: #d3ac2f;
+  --dh-warn-500: #e8bd36;
+  --dh-warn-600: #fdd042;
+  --dh-warn-700: #fed455;
+  --dh-warn-800: #feda66;
+  --dh-warn-900: #ffdd74;
+  --dh-warn-1000: #ffe083;
+  --dh-warn-1100: #ffe490;
+
+  /* Info — purple / magenta */
+  --dh-info-100: #792a88;
+  --dh-info-200: #8c2c9d;
+  --dh-info-300: #a32fb1;
+  --dh-info-400: #b632c6;
+  --dh-info-500: #cd35dd;
+  --dh-info-600: #e336f2;
+  --dh-info-700: #e64df3;
+  --dh-info-800: #e960f5;
+  --dh-info-900: #ec6ff7;
+  --dh-info-1000: #ee7ef8;
+  --dh-info-1100: #ef8df9;
+
+  /* Foreground — dark navy neutrals (text, chrome) */
+  --dh-fg-100: #000930;
+  --dh-fg-200: #121b3d;
+  --dh-fg-300: #252a4b;
+  --dh-fg-400: #383a58;
+  --dh-fg-500: #494a67;
+  --dh-fg-600: #5b5c75;
+  --dh-fg-700: #6c6d84;
+  --dh-fg-800: #7f8095;
+  --dh-fg-900: #9293a3;
+  --dh-fg-1000: #a4a5b4;
+  --dh-fg-1100: #b9bac3;
+
+  /* Background — cool grays */
+  --dh-bg-100: #9b9fa3;
+  --dh-bg-200: #a6abb0;
+  --dh-bg-300: #b4b9bc;
+  --dh-bg-400: #bfc4c8;
+  --dh-bg-500: #ccd2d5;
+  --dh-bg-600: #dadfe1;
+  --dh-bg-700: #dee3e6;
+  --dh-bg-800: #e3e8eb;
+  --dh-bg-900: #e8ecf0;
+  --dh-bg-1000: #edf2f5;
+  --dh-bg-1100: #f3f7fa;
+
+  /* Absolute logo accents */
+  --dh-logo-indigo: #3d51b3;
+  --dh-logo-cyan: #4dccfa;
+  --dh-logo-red: #f33666;
+  --dh-logo-yellow: #fdd041;
+  --dh-white: #ffffff;
+  --dh-black: #000000;
+
+  /* ===== Semantic aliases — LIGHT surface (default) ===== */
+  --dh-accent: var(--dh-primary-600);
+  --dh-accent-hover: var(--dh-primary-500);
+  --dh-accent-active: var(--dh-primary-400);
+  --dh-accent-contrast: var(--dh-white);
+
+  --dh-surface-page: var(--dh-bg-1100);
+  --dh-surface-card: var(--dh-white);
+  --dh-surface-sunken: var(--dh-bg-1000);
+  --dh-surface-raised: var(--dh-white);
+  --dh-surface-hover: var(--dh-bg-1000);
+
+  --dh-border: var(--dh-bg-500);
+  --dh-border-strong: var(--dh-bg-300);
+  --dh-border-focus: var(--dh-primary-700);
+
+  --dh-text-primary: var(--dh-fg-100);
+  --dh-text-secondary: var(--dh-fg-500);
+  --dh-text-muted: var(--dh-fg-800);
+  --dh-text-inverse: var(--dh-white);
+  --dh-text-link: var(--dh-primary-600);
+  --dh-text-link-hover: var(--dh-primary-400);
+
+  --dh-status-positive: var(--dh-positive-200);
+  --dh-status-negative: var(--dh-negative-400);
+  --dh-status-warn: var(--dh-warn-200);
+  --dh-status-info: var(--dh-info-300);
+}
+
+/* ===== Dark surface — Deephaven's default IDE/console theme =====
+   Apply on any subtree with data-theme="dark". */
+[data-theme="dark"] {
+  --dh-accent: var(--dh-primary-900);
+  --dh-accent-hover: var(--dh-primary-1000);
+  --dh-accent-active: var(--dh-primary-800);
+  --dh-accent-contrast: var(--dh-white);
+
+  --dh-surface-page: var(--dh-fg-100);
+  --dh-surface-card: var(--dh-fg-200);
+  --dh-surface-sunken: #05081f;
+  --dh-surface-raised: var(--dh-fg-300);
+  --dh-surface-hover: var(--dh-fg-300);
+
+  --dh-border: var(--dh-fg-400);
+  --dh-border-strong: var(--dh-fg-500);
+  --dh-border-focus: var(--dh-primary-1000);
+
+  --dh-text-primary: var(--dh-bg-1100);
+  --dh-text-secondary: var(--dh-fg-1000);
+  --dh-text-muted: var(--dh-fg-800);
+  --dh-text-inverse: var(--dh-fg-100);
+  --dh-text-link: var(--dh-secondary-600);
+  --dh-text-link-hover: var(--dh-secondary-700);
+
+  --dh-status-positive: var(--dh-positive-600);
+  --dh-status-negative: var(--dh-negative-700);
+  --dh-status-warn: var(--dh-warn-600);
+  --dh-status-info: var(--dh-info-700);
+}

docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/effects.css

@@ -0,0 +1,22 @@
+/* Deephaven effects — shadows, focus rings, transitions */
+:root {
+  /* Elevation — subtle, cool-toned */
+  --dh-shadow-sm: 0 1px 2px rgba(0, 9, 48, 0.08);
+  --dh-shadow-md: 0 2px 8px rgba(0, 9, 48, 0.12);
+  --dh-shadow-lg: 0 8px 24px rgba(0, 9, 48, 0.16);
+  --dh-shadow-popover: 0 4px 16px rgba(0, 9, 48, 0.20);
+
+  /* Dark-surface elevation reads as glow/depth against navy */
+  --dh-shadow-dark-md: 0 2px 10px rgba(0, 0, 0, 0.45);
+  --dh-shadow-dark-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
+
+  /* Focus ring — brand blue */
+  --dh-focus-ring: 0 0 0 2px var(--dh-surface-page), 0 0 0 4px var(--dh-border-focus);
+  --dh-focus-ring-tight: 0 0 0 2px var(--dh-border-focus);
+
+  /* Motion — quick, functional, no bounce */
+  --dh-ease: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
+  --dh-duration-fast: 90ms; /* @kind other */
+  --dh-duration-base: 150ms; /* @kind other */
+  --dh-duration-slow: 240ms; /* @kind other */
+}

docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/fonts.css

@@ -0,0 +1,4 @@
+/* Deephaven brand webfonts — Inter + Fira Mono.
+   Served from Google Fonts. If you need self-hosted binaries,
+   replace these @import/@font-face rules with local url() sources. */
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Mono:wght@400;500;700&display=swap");

docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/spacing.css

@@ -0,0 +1,26 @@
+/* Deephaven spacing — 4px base grid, dense by default */
+:root {
+  --dh-space-0: 0;
+  --dh-space-1: 2px;
+  --dh-space-2: 4px;
+  --dh-space-3: 8px;
+  --dh-space-4: 12px;
+  --dh-space-5: 16px;
+  --dh-space-6: 24px;
+  --dh-space-7: 32px;
+  --dh-space-8: 48px;
+  --dh-space-9: 64px;
+  --dh-space-10: 96px;
+
+  /* Radii — Deephaven UI is crisp; small radii */
+  --dh-radius-none: 0;
+  --dh-radius-sm: 2px;
+  --dh-radius-md: 4px;
+  --dh-radius-lg: 6px;
+  --dh-radius-pill: 999px;
+
+  /* Control sizing */
+  --dh-control-height-sm: 24px;
+  --dh-control-height-md: 32px;
+  --dh-control-height-lg: 40px;
+}

docs/groovy/assets/conceptual/architecture/_ds/deephaven-design-system-e929bca6-31a4-41e5-975b-9595805bab50/tokens/typography.css

@@ -0,0 +1,34 @@
+/* Deephaven typography — Inter (UI/display) + Fira Mono (code/data) */
+:root {
+  --dh-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --dh-font-mono: "Fira Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
+
+  /* Type scale (px) */
+  --dh-text-xs: 11px;
+  --dh-text-sm: 12px;
+  --dh-text-base: 14px;   /* app default — Deephaven UI is dense */
+  --dh-text-md: 16px;
+  --dh-text-lg: 20px;
+  --dh-text-xl: 24px;
+  --dh-text-2xl: 32px;
+  --dh-text-3xl: 44px;
+  --dh-text-4xl: 60px;
+  --dh-text-5xl: 80px;
+
+  /* Weights */
+  --dh-weight-regular: 400;
+  --dh-weight-medium: 500;
+  --dh-weight-semibold: 600;
+  --dh-weight-bold: 700;
+
+  /* Line heights */
+  --dh-leading-tight: 1.1;
+  --dh-leading-snug: 1.25;
+  --dh-leading-normal: 1.5;
+  --dh-leading-relaxed: 1.65;
+
+  /* Letter spacing */
+  --dh-tracking-tight: -0.02em;
+  --dh-tracking-normal: 0;
+  --dh-tracking-wide: 0.04em;
+}