base site: claude design plus some tweaks

1 files changed, 72 insertions, 0 deletions

diff --git a/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/spacing.css b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/spacing.css
new file mode 100644
index 0000000..b06cdc8
--- /dev/null
+++ b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/spacing.css
@@ -0,0 +1,72 @@
+/* ============================================================
+   Pantograph — Spacing, radius, borders, shadow, motion
+   ------------------------------------------------------------
+   A slide rule is a precision instrument: spacing is rigid and
+   gridded (4px base unit), corners are barely rounded (the body
+   has sharp machined edges), and shadows are shallow and warm,
+   like an object resting on a drafting table — never glassy
+   blue drop-shadows.
+   ============================================================ */
+
+:root {
+  /* Spacing scale (4px base) */
+  --space-0:   0;
+  --space-1:   0.25rem;  /* 4px  */
+  --space-2:   0.5rem;   /* 8px  */
+  --space-3:   0.75rem;  /* 12px */
+  --space-4:   1rem;     /* 16px */
+  --space-5:   1.5rem;   /* 24px */
+  --space-6:   2rem;     /* 32px */
+  --space-7:   3rem;     /* 48px */
+  --space-8:   4rem;     /* 64px */
+  --space-9:   6rem;     /* 96px */
+
+  /* Radius — machined, minimal. Nothing pill-shaped except by intent. */
+  --radius-none: 0;
+  --radius-xs:   2px;    /* inputs, code chips */
+  --radius-sm:   3px;    /* buttons, badges */
+  --radius-md:   5px;    /* cards, panels */
+  --radius-lg:   8px;    /* large surfaces, dialogs */
+  --radius-pill: 999px;  /* tags, switches — use deliberately */
+
+  /* Border widths */
+  --border-thin:   1px;
+  --border-medium: 1.5px;
+  --border-thick:  2px;
+
+  /* Shadows — warm, low, like ink/paper on a table. Tinted with
+     ink, never neutral gray, never blue. Keep them shallow. */
+  --shadow-xs:  0 1px 0 rgba(30, 37, 51, 0.06);
+  --shadow-sm:  0 1px 2px rgba(30, 37, 51, 0.10);
+  --shadow-md:  0 2px 6px rgba(30, 37, 51, 0.12), 0 1px 0 rgba(30, 37, 51, 0.04);
+  --shadow-lg:  0 8px 24px rgba(30, 37, 51, 0.16);
+  --shadow-inset: inset 0 1px 2px rgba(30, 37, 51, 0.10);
+
+  /* Engraved-tick separator: THE standard section break.
+     A ruled scale — short ticks every --tick-pitch, with every
+     5th tick at DOUBLE height, all centered on a common axis.
+     The short ticks sit 20% shorter than a plain rule would, so
+     the tall ones stand out without making the whole rule tall.
+     Drive size with --tick-h-major (= the rule's height); the
+     short tick is exactly half of it. */
+  --tick-pitch:   8px;                              /* spacing between ticks */
+  --tick-h-major: 14px;                             /* tall (every-5th) tick = rule height */
+  --tick-h-minor: calc(var(--tick-h-major) / 2);    /* short tick — half the tall one */
+  --tick-gradient:
+    repeating-linear-gradient(90deg, var(--rule-tick) 0 1px, transparent 1px var(--tick-pitch))
+      0 50% / 100% var(--tick-h-minor) repeat-x,
+    repeating-linear-gradient(90deg, var(--rule-tick) 0 1px, transparent 1px calc(var(--tick-pitch) * 5))
+      0 50% / 100% var(--tick-h-major) repeat-x;
+
+  /* Motion — mechanical, precise, no bounce. Like a sliding cursor. */
+  --ease-slide:  cubic-bezier(0.3, 0.0, 0.2, 1); /* @kind other */
+  --ease-out:    cubic-bezier(0.2, 0.0, 0.0, 1); /* @kind other */
+  --dur-fast:    120ms; /* @kind other */
+  --dur-base:    200ms; /* @kind other */
+  --dur-slow:    320ms; /* @kind other */
+
+  /* Layout */
+  --container-prose: 720px;   /* documentation reading column */
+  --container-wide:  1140px;  /* app / marketing max width */
+  --sidebar-width:   264px;
+}