-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathDESIGN.json
More file actions
222 lines (222 loc) · 11.5 KB
/
Copy pathDESIGN.json
File metadata and controls
222 lines (222 loc) · 11.5 KB
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
{
"schemaVersion": 2,
"generatedAt": "2026-05-12T11:52:27+08:00",
"title": "Design System: purachina's stuff",
"extensions": {
"colorMeta": {
"page-bg": {
"role": "neutral",
"displayName": "Workbench Black",
"canonical": "#0a0a0f",
"tonalRamp": ["#05050a", "#0a0a0f", "#12151f", "#1c2330"]
},
"text-base": {
"role": "neutral",
"displayName": "Workbench Green Text",
"canonical": "#9bbbaa",
"tonalRamp": ["#607f70", "#739282", "#89aa99", "#9bbbaa", "#d8eee2"]
},
"accent-blue": {
"role": "primary",
"displayName": "Electric Blue Accent",
"canonical": "#54a0ff",
"tonalRamp": ["#353f52", "#536681", "#54a0ff", "#6eaef9", "#c7e7ff"]
},
"accent-green": {
"role": "secondary",
"displayName": "Bunny Green Accent",
"canonical": "#54d9ac",
"tonalRamp": ["#184336", "#54d9ac", "#8fe7a8", "#c9f5e2", "#e7fff0"]
},
"accent-pink": {
"role": "tertiary",
"displayName": "Startpage Pink Accent",
"canonical": "#ff84cd",
"tonalRamp": ["#461d36", "#ff84cd", "#e7a8ca", "#ffe0f0", "#ffeff8"]
},
"accent-orange": {
"role": "tertiary",
"displayName": "Support Orange Accent",
"canonical": "#ff9500",
"tonalRamp": ["#482c16", "#ff9500", "#ffad5c", "#ffd9a8", "#ffe8c9"]
}
},
"typographyMeta": {
"display": {
"displayName": "Rainbow Hero Display",
"purpose": "The welcome headline only."
},
"headline": {
"displayName": "Resource Headline",
"purpose": "Preset, SillyBunny, and tab-panel titles."
},
"body": {
"displayName": "Dense Resource Body",
"purpose": "Long preset explanations, changelog notes, and option copy."
},
"label": {
"displayName": "Pill Label",
"purpose": "Tabs, downloads, platform labels, and compact controls."
},
"micro": {
"displayName": "Metadata Microcopy",
"purpose": "Captions, versions, badge labels, and helper text."
}
},
"shadows": [
{
"name": "favicon-drop",
"value": "drop-shadow(0 10px 24px rgba(32, 64, 48, 0.28))",
"purpose": "Soft shadow under the pixel favicon in the hero."
},
{
"name": "soft-pill-glow",
"value": "0 0 20px rgba(84, 160, 255, 0.18)",
"purpose": "Default glow depth for project pills."
},
{
"name": "hover-pill-glow",
"value": "0 0 24px rgba(84, 160, 255, 0.28)",
"purpose": "Project-pill hover feedback."
},
{
"name": "active-blue-platform",
"value": "0 0 24px rgba(84, 160, 255, 0.34), 0 8px 24px rgba(31, 68, 110, 0.28)",
"purpose": "Selected SillyTavern platform state."
},
{
"name": "active-green-platform",
"value": "0 0 24px rgba(92, 214, 130, 0.34), 0 8px 24px rgba(29, 82, 48, 0.28)",
"purpose": "Selected SillyBunny platform state."
},
{
"name": "resource-hover-glow",
"value": "0 0 18px rgba(84, 160, 255, 0.08)",
"purpose": "Low hover glow for tabs, resource cards, and extension cards."
}
],
"motion": [
{
"name": "state-transition",
"value": "0.25s",
"purpose": "Default color, border, shadow, and hover transitions."
},
{
"name": "panel-enter",
"value": "0.34s ease",
"purpose": "Platform panel fade and translate reveal."
},
{
"name": "rainbow-shift",
"value": "8s linear infinite",
"purpose": "Existing animated hero gradient."
}
],
"breakpoints": [
{
"name": "table-mobile",
"value": "760px"
},
{
"name": "cards-two-column",
"value": "768px"
},
{
"name": "mobile-stack",
"value": "600px"
},
{
"name": "single-column-gallery",
"value": "540px"
}
]
},
"components": [
{
"name": "Project Glow Pill",
"kind": "button",
"refersTo": "link-pill",
"description": "Top-level project link with a project-specific tint and glow.",
"html": "<a class=\"ds-project-pill\" href=\"#\"><span>Synapse</span><small>localStorage AI assistant frontend</small></a>",
"css": ".ds-project-pill { display: inline-block; color: #c7e7ff; text-decoration: none; border: 1px solid rgba(102, 184, 255, 0.44); border-radius: 999px; background: linear-gradient(135deg, rgba(26, 45, 72, 0.46), rgba(20, 33, 52, 0.24)); box-shadow: 0 0 20px rgba(102, 184, 255, 0.22); padding: 0.55rem 1.6rem; font: 400 0.95rem/1.4 Figtree, sans-serif; transition: color 0.25s, border-color 0.25s, box-shadow 0.25s; } .ds-project-pill small { display: block; margin-top: 0.15rem; color: #8fb8df; font-size: 0.7rem; } .ds-project-pill:hover { color: #e4f4ff; border-color: rgba(136, 204, 255, 0.68); box-shadow: 0 0 24px rgba(102, 184, 255, 0.34); } .ds-project-pill:hover small { color: #bbdbf8; }"
},
{
"name": "Preset Tab Pill",
"kind": "nav",
"refersTo": "tab-pill",
"description": "Radio-label tab used for preset sections, platform switching, and sub-tabs.",
"html": "<label class=\"ds-tab-pill\">Changelog</label><label class=\"ds-tab-pill ds-tab-pill-active\">Preset</label>",
"css": ".ds-tab-pill { display: inline-flex; align-items: center; justify-content: center; color: #789889; border: 1px solid #2b3445; border-radius: 999px; background: rgba(18, 21, 31, 0.82); padding: 0.4rem 1.3rem; font: 400 0.85rem/1.4 Figtree, sans-serif; white-space: nowrap; cursor: pointer; transition: color 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s; } .ds-tab-pill:hover { color: #b9d9ca; border-color: #415067; background: rgba(24, 30, 42, 0.94); box-shadow: 0 0 16px rgba(84, 160, 255, 0.08); } .ds-tab-pill-active { color: #e0f2e7; border-color: #566985; background: rgba(28, 35, 48, 0.96); box-shadow: inset 0 0 0 1px rgba(186, 220, 255, 0.04), 0 0 18px rgba(84, 160, 255, 0.1); }"
},
{
"name": "Resource Card",
"kind": "card",
"refersTo": "resource-card",
"description": "Compact information card for extensions, features, and agent descriptions.",
"html": "<article class=\"ds-resource-card\"><h3>Better UI Shell</h3><p>Custom shell navigation, stronger search, and cleaner access to the controls people actually touch.</p></article>",
"css": ".ds-resource-card { border: 1px solid #293345; border-radius: 10px; padding: 1rem 1.2rem; background: rgba(15, 16, 26, 0.82); font-family: Figtree, sans-serif; transition: border-color 0.25s, box-shadow 0.25s; } .ds-resource-card:hover { border-color: #415069; box-shadow: 0 0 18px rgba(84, 160, 255, 0.08); } .ds-resource-card h3 { margin: 0 0 0.3rem; color: #d8eee2; font-size: 0.95rem; font-weight: 600; line-height: 1.3; } .ds-resource-card p { margin: 0; color: #89aa99; font-size: 0.82rem; line-height: 1.6; }"
},
{
"name": "Option Card",
"kind": "card",
"refersTo": "option-card",
"description": "Denser preset-option explanation card with small badges and body copy.",
"html": "<article class=\"ds-option-card\"><div class=\"ds-option-head\"><h3>Length Toggles</h3><span>Preset</span></div><p>Pick only one if you want a desired length, or choose none to keep length flexible.</p></article>",
"css": ".ds-option-card { border: 1px solid #2a3445; border-radius: 14px; padding: 0.95rem 1rem; background: rgba(15, 17, 27, 0.9); font-family: Figtree, sans-serif; } .ds-option-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.45rem; } .ds-option-head h3 { margin: 0; color: #d8eee2; font-size: 0.92rem; font-weight: 600; line-height: 1.3; } .ds-option-head span { border: 1px solid rgba(121, 185, 255, 0.4); border-radius: 999px; background: rgba(42, 63, 88, 0.45); color: #cae6ff; padding: 0.24rem 0.7rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .ds-option-card p { margin: 0; color: #89aa99; font-size: 0.82rem; line-height: 1.65; }"
},
{
"name": "Screenshot Thumbnail",
"kind": "custom",
"refersTo": "screenshot-thumb",
"description": "Linked gallery image with quiet border, hover glow, and centered caption.",
"html": "<a class=\"ds-thumb\" href=\"#\"><img src=\"preset/screenshots/scene-time.png\" alt=\"Scene Tracker\"><span>Scene Tracker</span></a>",
"css": ".ds-thumb { display: block; text-decoration: none; font-family: Figtree, sans-serif; } .ds-thumb img { width: 100%; height: auto; object-fit: contain; border-radius: 6px; border: 1px solid #2a3445; display: block; transition: border-color 0.25s, box-shadow 0.25s; } .ds-thumb:hover img { border-color: #4f6380; box-shadow: 0 2px 18px rgba(84, 160, 255, 0.1); } .ds-thumb span { display: block; margin-top: 0.35rem; color: #779687; font-size: 0.75rem; text-align: center; }"
}
],
"narrative": {
"northStar": "The Tinkerer's Bench",
"overview": "The root site is a personal bench of useful things: presets, tools, cards, themes, screenshots, and blunt notes laid out for people who already know why they came here. It should feel handmade and maintained, not like a generic product launch.",
"keyCharacteristics": [
"Compact centered landing stack that quickly gives way to functional tabs and downloads.",
"Figtree-only typography with small, readable sizes and clear weight contrast.",
"Pill controls for navigation, downloads, platform switches, and quick links.",
"Dark surfaces with muted green text, blue/green platform accents, and tiny glow states.",
"Resource cards and screenshot galleries that prioritize scanning over decoration."
],
"rules": [
{
"name": "The Useful Color Rule",
"body": "Colored accents should identify a project, platform, or state. Do not add decorative accent colors to ordinary information blocks.",
"section": "colors"
},
{
"name": "The Rainbow Exception Rule",
"body": "The animated rainbow heading is the loud flourish. Do not repeat gradient text elsewhere.",
"section": "colors"
},
{
"name": "The Compact Hub Rule",
"body": "Do not introduce oversized marketing typography beyond the existing hero.",
"section": "typography"
},
{
"name": "The Glow Means State Rule",
"body": "Glow should communicate hover, selection, support, or project identity.",
"section": "elevation"
}
],
"dos": [
"Do lead with presets, downloads, changelogs, project links, screenshots, and cards before adding new personality flourishes.",
"Do keep the blunt, personal, tinkerer-made voice in visible copy.",
"Do make current versions, previous versions, changelog entries, and platform differences obvious.",
"Do preserve readable contrast, responsive wrapping, keyboard access, visible focus states, meaningful image alt text, and reduced-motion-friendly behavior."
],
"donts": [
"Don't make the root hub feel like corporate SaaS polish.",
"Don't use generic AI landing-page aesthetics, oversized marketing hero sections, vague value-prop copy, or sterile template grids.",
"Don't make the page feel like a startup pitch.",
"Don't overdecorate the root hub until presets, programs, and downloads become harder to find.",
"Don't repeat gradient text beyond the existing rainbow welcome heading."
]
}
}