1
{
2
  "schemaVersion": 2,
3
  "generatedAt": "2026-09-11T10:18:12.999704+00:00",
4
  "title": "Specter design system",
5
  "extensions": {
6
    "colorMeta": {
7
      "accent-500": {
8
        "role": "primary",
9
        "displayName": "Muted cyan"
10
      }
11
    },
12
    "motion": [
13
      {
14
        "name": "press",
15
        "value": "transform 75ms",
16
        "purpose": "Button press feedback."
17
      }
18
    ],
19
    "breakpoints": [
20
      {
21
        "name": "sm",
22
        "value": "640px"
23
      }
24
    ]
25
  },
26
  "components": [
27
    {
28
      "name": "Primary button",
29
      "kind": "button",
30
      "description": "Shared Button variant.",
31
      "html": "<button type=\"button\" class=\"ds-button-0\">Synchronize</button>",
32
      "css": ".ds-button-0{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:6px 12px;border:1px solid;border-radius:6px;font:600 14px/20px \"Hanken Grotesk\",sans-serif;cursor:pointer;transition:transform 75ms;border-color:var(--color-accent-500);background:var(--color-accent-500);color:var(--color-chrome);}.ds-button-0:hover{border-color:var(--color-accent-400);background:var(--color-accent-400);}.ds-button-0:active{transform:scale(.98)}.ds-button-0:focus-visible{outline:2px solid var(--color-accent-300);outline-offset:3px}.ds-button-0:disabled{opacity:.5;pointer-events:none}@media(prefers-reduced-motion:reduce){.ds-button-0{transition:none}.ds-button-0:active{transform:none}}",
33
      "refersTo": "button-primary"
34
    },
35
    {
36
      "name": "Secondary button",
37
      "kind": "button",
38
      "description": "Shared Button variant.",
39
      "html": "<button type=\"button\" class=\"ds-button-1\">Refresh</button>",
40
      "css": ".ds-button-1{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:6px 12px;border:1px solid;border-radius:6px;font:600 14px/20px \"Hanken Grotesk\",sans-serif;cursor:pointer;transition:transform 75ms;border-color:var(--color-zinc-500);background:var(--color-surface);color:var(--color-foreground);}.ds-button-1:hover{border-color:var(--color-muted);background:var(--color-line);}.ds-button-1:active{transform:scale(.98)}.ds-button-1:focus-visible{outline:2px solid var(--color-accent-300);outline-offset:3px}.ds-button-1:disabled{opacity:.5;pointer-events:none}@media(prefers-reduced-motion:reduce){.ds-button-1{transition:none}.ds-button-1:active{transform:none}}",
41
      "refersTo": "button-secondary"
42
    },
43
    {
44
      "name": "Danger button",
45
      "kind": "button",
46
      "description": "Shared Button variant.",
47
      "html": "<button type=\"button\" class=\"ds-button-2\">Release</button>",
48
      "css": ".ds-button-2{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:6px 12px;border:1px solid;border-radius:6px;font:600 14px/20px \"Hanken Grotesk\",sans-serif;cursor:pointer;transition:transform 75ms;border-color:color-mix(in oklab,var(--color-danger) 70%,transparent);background:color-mix(in oklab,var(--color-danger) 10%,transparent);color:var(--color-danger);}.ds-button-2:hover{border-color:var(--color-danger);background:color-mix(in oklab,var(--color-danger) 20%,transparent);}.ds-button-2:active{transform:scale(.98)}.ds-button-2:focus-visible{outline:2px solid var(--color-accent-300);outline-offset:3px}.ds-button-2:disabled{opacity:.5;pointer-events:none}@media(prefers-reduced-motion:reduce){.ds-button-2{transition:none}.ds-button-2:active{transform:none}}"
49
    },
50
    {
51
      "name": "Ghost button",
52
      "kind": "button",
53
      "description": "Shared Button variant.",
54
      "html": "<button type=\"button\" class=\"ds-button-3\">Cancel</button>",
55
      "css": ".ds-button-3{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:6px 12px;border:1px solid;border-radius:6px;font:600 14px/20px \"Hanken Grotesk\",sans-serif;cursor:pointer;transition:transform 75ms;border-color:transparent;background:transparent;color:var(--color-muted);}.ds-button-3:hover{background:var(--color-surface);color:var(--color-foreground);}.ds-button-3:active{transform:scale(.98)}.ds-button-3:focus-visible{outline:2px solid var(--color-accent-300);outline-offset:3px}.ds-button-3:disabled{opacity:.5;pointer-events:none}@media(prefers-reduced-motion:reduce){.ds-button-3{transition:none}.ds-button-3:active{transform:none}}"
56
    },
57
    {
58
      "name": "Domain input",
59
      "kind": "input",
60
      "refersTo": "input",
61
      "description": "Shared input styling.",
62
      "html": "<label class=\"ds-field\">Domain<input class=\"ds-input\" placeholder=\"app.example.com\"></label>",
63
      "css": ".ds-field{display:grid;gap:6px;color:var(--color-foreground);font:450 15px/1.5 \"Hanken Grotesk\",sans-serif}.ds-input{box-sizing:border-box;width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--color-zinc-500);border-radius:6px;background:var(--color-chrome);color:var(--color-foreground);font:450 14px/20px \"Hanken Grotesk\",sans-serif}.ds-input::placeholder{color:var(--color-muted)}.ds-input:focus-visible{outline:2px solid var(--color-accent-300);outline-offset:3px}.ds-input:disabled{opacity:.5}"
64
    },
65
    {
66
      "name": "Operator navigation",
67
      "kind": "nav",
68
      "description": "Links between operator views.",
69
      "html": "<nav class=\"ds-nav\" aria-label=\"Operator\"><a href=\"#\" aria-current=\"page\">Overview</a><a href=\"#\">Clients</a></nav>",
70
      "css": ".ds-nav{display:flex;flex-wrap:wrap;gap:4px}.ds-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:6px;color:var(--color-muted);font:500 14px/20px \"Hanken Grotesk\",sans-serif;text-decoration:none}.ds-nav a:hover{background:var(--color-surface)}.ds-nav a[aria-current]{background:var(--color-surface);color:var(--color-accent-300)}.ds-nav a:focus-visible{outline:2px solid var(--color-accent-300);outline-offset:3px}"
71
    }
72
  ],
73
  "narrative": {
74
    "northStar": "Compact operating tools",
75
    "overview": "Compact operating tools: data and actions first, optional help, concise feedback.",
76
    "dos": [
77
      "Keep loading, empty, failed, and stale states distinct.",
78
      "Preserve useful data on refresh failure.",
79
      "Show saved state and publication separately."
80
    ],
81
    "donts": [
82
      "Do not add jump navigation for sections already visible on a short page."
83
    ]
84
  }
85
}