Seeded claude design

2026-05-23 16:34:14 +02:00
commit 9419f166ce
32 changed files with 2553 additions and 0 deletions
--- a/tokens/colors.json
+++ b/tokens/colors.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "ink":          { "value": "#0A0A0A", "type": "color", "comment": "Near-black. The only fill most of the time." },
+  "ink-2":        { "value": "#1F1F1F", "type": "color" },
+  "ink-3":        { "value": "#5C5C5C", "type": "color" },
+  "ink-4":        { "value": "#8A8A8A", "type": "color" },
+  "ink-5":        { "value": "#B5B5B3", "type": "color", "comment": "Placeholder text, wireframe labels." },
+  "line":         { "value": "#E5E5E2", "type": "color", "comment": "Default 1px wireframe rule." },
+  "line-strong":  { "value": "#C9C9C5", "type": "color" },
+  "line-soft":    { "value": "#F0F0EC", "type": "color" },
+  "paper":        { "value": "#FFFFFF", "type": "color" },
+  "paper-2":      { "value": "#FAFAF7", "type": "color" },
+  "paper-3":      { "value": "#F4F4EF", "type": "color" },
+  "hi":           { "value": "#FFE14A", "type": "color", "comment": "Annotation yellow. Highlighter only, never a button fill." },
+  "hi-2":         { "value": "#FFD400", "type": "color" },
+  "hi-ink":       { "value": "#1A1500", "type": "color", "comment": "Text on yellow." },
+  "status-raw":        { "value": "#B5B5B3", "type": "color", "comment": "S0 — no signal" },
+  "status-weak":       { "value": "#8A8A8A", "type": "color", "comment": "S1 — weak signal" },
+  "status-medium":     { "value": "#5C5C5C", "type": "color", "comment": "S2 — medium signal" },
+  "status-strong":     { "value": "#0A0A0A", "type": "color", "comment": "S3 — strong signal" },
+  "status-commercial": { "value": "#FFD400", "type": "color", "comment": "S4 — commercial" }
+}
--- a/tokens/index.json
+++ b/tokens/index.json
@@ -0,0 +1,6 @@
+{
+  "comment": "Manifest pointing at the three token files. Source-of-truth for any future Style Dictionary build.",
+  "colors":  "./colors.json",
+  "type":    "./type.json",
+  "spacing": "./spacing.json"
+}
--- a/tokens/spacing.json
+++ b/tokens/spacing.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "spacing": {
+    "1":  { "value": "4px",   "type": "dimension" },
+    "2":  { "value": "8px",   "type": "dimension" },
+    "3":  { "value": "12px",  "type": "dimension" },
+    "4":  { "value": "16px",  "type": "dimension" },
+    "5":  { "value": "24px",  "type": "dimension" },
+    "6":  { "value": "32px",  "type": "dimension" },
+    "7":  { "value": "48px",  "type": "dimension" },
+    "8":  { "value": "64px",  "type": "dimension" },
+    "9":  { "value": "96px",  "type": "dimension" },
+    "10": { "value": "128px", "type": "dimension" }
+  },
+  "radius": {
+    "0":    { "value": "0px",   "type": "dimension" },
+    "1":    { "value": "2px",   "type": "dimension" },
+    "2":    { "value": "4px",   "type": "dimension" },
+    "3":    { "value": "8px",   "type": "dimension" },
+    "pill": { "value": "999px", "type": "dimension" }
+  },
+  "shadow": {
+    "0": { "value": "none",                                "type": "shadow" },
+    "1": { "value": "0 1px 0 #E5E5E2",                     "type": "shadow" },
+    "2": { "value": "0 1px 0 #C9C9C5",                     "type": "shadow" },
+    "3": { "value": "0 4px 12px -6px rgba(10,10,10,0.10)", "type": "shadow", "comment": "Floating elements only." }
+  }
+}
--- a/tokens/type.json
+++ b/tokens/type.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "family": {
+    "sans":  { "value": "\"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif", "type": "fontFamily" },
+    "mono":  { "value": "\"IBM Plex Mono\", ui-monospace, \"SF Mono\", Menlo, monospace", "type": "fontFamily" },
+    "serif": { "value": "\"IBM Plex Serif\", \"Iowan Old Style\", Georgia, serif", "type": "fontFamily" }
+  },
+  "size": {
+    "xs":   { "value": "11px", "type": "dimension" },
+    "sm":   { "value": "13px", "type": "dimension" },
+    "base": { "value": "15px", "type": "dimension" },
+    "md":   { "value": "17px", "type": "dimension" },
+    "lg":   { "value": "20px", "type": "dimension" },
+    "xl":   { "value": "24px", "type": "dimension" },
+    "2xl":  { "value": "32px", "type": "dimension" },
+    "3xl":  { "value": "44px", "type": "dimension" },
+    "4xl":  { "value": "64px", "type": "dimension" },
+    "5xl":  { "value": "96px", "type": "dimension" }
+  },
+  "lineHeight": {
+    "tight": { "value": 1.05, "type": "number" },
+    "snug":  { "value": 1.25, "type": "number" },
+    "base":  { "value": 1.5,  "type": "number" },
+    "loose": { "value": 1.7,  "type": "number" }
+  },
+  "tracking": {
+    "tight": { "value": "-0.02em",  "type": "dimension" },
+    "snug":  { "value": "-0.01em",  "type": "dimension" },
+    "base":  { "value": "0em",      "type": "dimension" },
+    "mono":  { "value": "0.02em",   "type": "dimension" },
+    "label": { "value": "0.08em",   "type": "dimension", "comment": "Uppercase eyebrow labels." }
+  }
+}