Setpoint/DESIGN.json at master · ansidian/Setpoint · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
{
  "schemaVersion": 2,
  "generatedAt": "2026-04-27T14:02:05-07:00",
  "title": "Design System: Setpoint",
  "extensions": {
    "colorMeta": {
      "accent-primary": {
        "role": "primary",
        "displayName": "Lavender Control",
        "canonical": "#cba6da",
        "purpose": "User-customizable primary accent for active controls, selected states, and focus emphasis."
      },
      "accent-secondary": {
        "role": "secondary",
        "displayName": "Warning Orange",
        "canonical": "#f97316",
        "purpose": "Secondary-only accent for snooze, time warnings, notifications, and suspended-service indicators."
      },
      "floating-panel": {
        "role": "neutral",
        "displayName": "Floating Panel Solid",
        "canonical": "#16161e",
        "purpose": "Opaque portal surface that prevents transparency bleed-through."
      },
      "finance-income": {
        "role": "data",
        "displayName": "Income Cyan",
        "canonical": "#89dceb",
        "purpose": "Income and inflow transactions; paired with a plus sign and Inflow label."
      },
      "finance-outflow": {
        "role": "data",
        "displayName": "Outflow Periwinkle",
        "canonical": "#b4befe",
        "purpose": "Routine expense transactions without danger or overdue semantics."
      },
      "finance-transfer": {
        "role": "data",
        "displayName": "Transfer Blue",
        "canonical": "#89b4fa",
        "purpose": "Neutral account-to-account movement and transfer schedules."
      }
    },
    "typographyMeta": {
      "display": {
        "displayName": "Assistant Voice",
        "purpose": "Hero greeting, snapshot summary, email triage summary, and other deliberately editorial summaries."
      },
      "body": {
        "displayName": "Operational Body",
        "purpose": "Dense repeated UI, cards, controls, labels, conversational panel responses, and supporting summaries."
      }
    },
    "shadows": [
      {
        "name": "modal-dropdown",
        "value": "0 20px 60px rgba(0,0,0,0.7)",
        "purpose": "Portaled modals, dropdowns, popovers, and menu panels."
      },
      {
        "name": "accent-glow",
        "value": "0 0 6px {color}30 to 0 0 8px {color}60",
        "purpose": "Small active indicators, focus glows, and timeline status dots."
      }
    ],
    "motion": [
      {
        "name": "state-fast",
        "value": "150ms ease-out",
        "purpose": "Default hover and simple state changes."
      },
      {
        "name": "dashboard-fade",
        "value": "240ms cubic-bezier(0.16, 1, 0.3, 1)",
        "purpose": "Dashboard section fade and orientation motion."
      },
      {
        "name": "reduced-motion",
        "value": "0.01ms",
        "purpose": "Applied under prefers-reduced-motion to suppress nonessential animation."
      }
    ],
    "breakpoints": [
      {
        "name": "mobile",
        "value": "639px",
        "purpose": "Mobile tab and inbox behavior."
      }
    ],
    "rules": [
      "Use createPortal, fixed positioning, opaque #16161e, isolation, and scroll containment for floating panels.",
      "Keep dense UI text inside stable dimensions so updates do not resize controls.",
      "Use lucide icons for tool buttons when an icon exists.",
      "Do not add side-stripe borders, gradient text, decorative glass, or hero metric templates."
    ]
  },
  "components": [
    {
      "name": "Primary Button",
      "kind": "button",
      "refersTo": "button-primary",
      "description": "Compact primary action with lavender fill or accent border, used only for meaningful state changes.",
      "html": "<button class=\"ds-button-primary\">Generate</button>",
      "css": ".ds-button-primary { background: #cba6da; color: #0b0b13; border: 1px solid rgba(203,166,218,0.15); border-radius: 12px; padding: 8px 12px; font: 600 12px/1.2 Montserrat, sans-serif; transition: background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out; } .ds-button-primary:focus-visible { outline: 1px solid rgba(203,166,218,0.6); outline-offset: 2px; box-shadow: 0 0 8px rgba(203,166,218,0.45); }"
    },
    {
      "name": "Dense Card",
      "kind": "card",
      "refersTo": "card-default",
      "description": "Inline content container with tonal depth and border-first separation.",
      "html": "<section class=\"ds-card\"><h3>Upcoming</h3><p>Two deadlines need attention today.</p></section>",
      "css": ".ds-card { background: rgba(36,36,58,0.4); color: #cdd6f4; border: 1px solid rgba(255,255,255,0.04); border-radius: 12px; padding: 16px; box-shadow: none; } .ds-card h3 { margin: 0 0 6px; font: 500 13px/1.35 Montserrat, sans-serif; } .ds-card p { margin: 0; color: rgba(205,214,244,0.5); font: 400 12px/1.5 Montserrat, sans-serif; }"
    },
    {
      "name": "Floating Panel",
      "kind": "custom",
      "refersTo": "floating-panel",
      "description": "Portaled overlay for dropdowns, pickers, command-like panels, history, and search.",
      "html": "<div class=\"ds-floating-panel\" role=\"dialog\">Panel content</div>",
      "css": ".ds-floating-panel { position: fixed; isolation: isolate; overscroll-behavior: contain; background: #16161e; color: #cdd6f4; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.7); }"
    }
  ]
}