base site: claude design plus some tweaks

1 files changed, 113 insertions, 0 deletions

diff --git a/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/base.css b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/base.css
new file mode 100644
index 0000000..6b8272a
--- /dev/null
+++ b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/base.css
@@ -0,0 +1,113 @@
+/* ============================================================
+   Pantograph — base element styling
+   ------------------------------------------------------------
+   A light, opinionated reset that binds the tokens to real
+   elements. Optional for consumers, but every specimen card,
+   component card, and UI kit in this system assumes it.
+   ============================================================ */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  background-color: var(--surface-page);
+  color: var(--text-body);
+  font: var(--role-body);
+  letter-spacing: var(--tracking-normal);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* Headings default to the engraved display voice */
+h1, h2, h3, h4, h5, h6 {
+  margin: 0 0 var(--space-3);
+  color: var(--text-strong);
+  font-family: var(--font-sans);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-tight);
+  text-wrap: balance;
+}
+h1 { font: var(--role-h1); letter-spacing: var(--tracking-tight); }
+h2 { font: var(--role-h2); }
+h3 { font: var(--role-h3); }
+
+p { margin: 0 0 var(--space-4); text-wrap: pretty; }
+
+a {
+  color: var(--link);
+  text-decoration: none;
+  text-underline-offset: 0.18em;
+  text-decoration-thickness: 1px;
+  transition: color var(--dur-fast) var(--ease-out);
+}
+a:hover { color: var(--link-hover); text-decoration: underline; }
+
+strong, b { font-weight: var(--weight-semibold); color: var(--text-strong); }
+
+code, kbd, samp, pre {
+  font-family: var(--font-mono);
+  font-size: 0.92em;
+}
+
+code {
+  background: var(--surface-code);
+  border: var(--border-thin) solid var(--border-hairline);
+  border-radius: var(--radius-xs);
+  padding: 0.08em 0.36em;
+  color: var(--ink-1);
+}
+
+pre {
+  font-size: var(--text-sm);
+  line-height: var(--leading-mono);
+  margin: 0;
+}
+pre code { background: none; border: none; padding: 0; }
+
+hr {
+  border: 0;
+  height: 1px;
+  background: var(--border-hairline);
+  margin: var(--space-6) 0;
+}
+
+/* The engraved-tick rule: THE standard section separator.
+   Short ticks with every 5th at double height (see
+   --tick-gradient in tokens/spacing.css). Height = the tall
+   tick; short ticks center on the same axis. */
+.panto-tick-rule {
+  border: 0;
+  height: var(--tick-h-major);
+  background: var(--tick-gradient);
+  opacity: 0.85;
+  margin: var(--space-6) 0;
+}
+
+::selection { background: var(--green-soft); color: var(--ink-0); }
+
+:focus-visible {
+  outline: var(--border-thick) solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+/* Long-form documentation prose — the primary face, set larger
+   and looser for comfortable reading */
+.panto-prose {
+  font: var(--role-prose);
+  color: var(--text-body);
+  max-width: var(--container-prose);
+}
+.panto-prose p { margin-bottom: var(--space-5); }
+
+/* Engraved eyebrow / kicker label */
+.panto-eyebrow {
+  font-family: var(--font-display);
+  font-weight: var(--weight-semibold);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+  color: var(--text-faint);
+}