base site: claude design plus some tweaks

1 files changed, 87 insertions, 0 deletions

diff --git a/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/colors.css b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/colors.css
new file mode 100644
index 0000000..7fef466
--- /dev/null
+++ b/_ds/pantograph-design-system-56a1c74e-41c1-486b-ba3c-4eabdfacef31/tokens/colors.css
@@ -0,0 +1,87 @@
+/* ============================================================
+   Pantograph — Color tokens
+   ------------------------------------------------------------
+   Inspired by a 1970s Post Versalog slide rule: an eggshell
+   bamboo body printed in black, red, and green. There is NO
+   pure white and NO pure black anywhere in the system.
+
+   Base ramp = warm "paper" (eggshell) surfaces and "ink"
+   (deep blue-black) marks. Two engraved accents: instrument
+   red and instrument green. Use accents like a draftsman —
+   sparingly, for emphasis and meaning, never as fields.
+   ============================================================ */
+
+:root {
+  /* --- Paper (near-white surfaces, faint warm tint, lightest → deepest) --- */
+  --paper-0:  #FCFAF5;   /* raised cards, popovers, code surfaces */
+  --paper-1:  #F8F4EB;   /* default page background */
+  --paper-2:  #EFE9DC;   /* sunken / secondary fields, table stripes */
+  --paper-3:  #DFD7C6;   /* hairline rules, dividers, engraved ticks */
+  --paper-4:  #C7BCA4;   /* strong borders, disabled fills */
+
+  /* --- Ink (deep blue-black marks, darkest → lightest) --- */
+  --ink-0:    #161B27;   /* near-black blue ink: max-contrast headings */
+  --ink-1:    #1E2533;   /* primary body text, the default mark color */
+  --ink-2:    #3B4456;   /* secondary text, captions */
+  --ink-3:    #6E6B5C;   /* muted / warm-gray metadata */
+  --ink-4:    #8C8470;   /* faint hints, placeholder text */
+
+  /* --- Instrument Red (cursor line, warnings, the C/D scale) --- */
+  --red-deep: #8F2B22;
+  --red:      #B23A2E;   /* the canonical slide-rule red */
+  --red-soft: #E7C3BB;   /* tinted backgrounds */
+  --red-wash: #EBD9D0;   /* faintest red wash on paper */
+
+  /* --- Instrument Green (folded scales, success, positive) --- */
+  --green-deep: #245138;
+  --green:      #2F6B4A;  /* the canonical slide-rule green */
+  --green-soft: #BCD2BF;  /* tinted backgrounds */
+  --green-wash: #D6DECB;  /* faintest green wash on paper */
+
+  /* --- Brass (the cursor / hardware accent, used very rarely) --- */
+  --brass:    #9A7B3F;
+
+  /* ============================================================
+     Semantic aliases — reference THESE in components, not the
+     raw ramp above.
+     ============================================================ */
+
+  /* Surfaces */
+  --surface-page:     var(--paper-1);
+  --surface-card:     var(--paper-0);
+  --surface-sunken:   var(--paper-2);
+  --surface-code:     #F4EEE1;   /* code blocks: a hair warmer than card */
+  --surface-inverse:  var(--ink-1);
+
+  /* Text */
+  --text-strong:      var(--ink-0);
+  --text-body:        var(--ink-1);
+  --text-muted:       var(--ink-2);
+  --text-faint:       var(--ink-3);
+  --text-placeholder: var(--ink-4);
+  --text-on-ink:      var(--paper-0);
+  --text-on-accent:   var(--paper-0);
+
+  /* Lines */
+  --border-hairline:  var(--paper-3);
+  --border-default:   var(--paper-4);
+  --border-strong:    var(--ink-3);
+  --rule-tick:        var(--paper-4);
+
+  /* Accents */
+  --accent:           var(--red);       /* primary brand accent */
+  --accent-deep:      var(--red-deep);
+  --link:             var(--red-deep);
+  --link-hover:       var(--red);
+
+  /* Status */
+  --status-danger:    var(--red);
+  --status-danger-bg: var(--red-wash);
+  --status-success:   var(--green);
+  --status-success-bg:var(--green-wash);
+  --status-info:      var(--ink-2);
+  --status-info-bg:   var(--paper-2);
+
+  /* Focus ring */
+  --focus-ring:       var(--green);
+}