Skip to main content

max / makenotwork

server: MNW styles purely intent-specified (no brand aliases) style.css + templated inline styles now reference the intent tokens directly instead of the brand-alias layer (--detail/--highlight/--surface-* etc. removed). MNW is purely semantic — no category/decorative colors — so it uses surfaces, content, border, action, and the danger/success/warning trio. Folded the non-intent audit's bad-practice literals into intents: - error/error-color/health-* -> danger/success/warning/content-muted - *-bg status backgrounds + highlight-faint -> color-mix(in oklch) over intents - warning-border -> warning; input-background/surface-alt -> surfaces - the brown --warning literal removed (warnings now use the themed amber intent) - overlay is now an intent; pre-existing dangling refs fixed (violet/color-border/error-color/success-color, --space-7/8) Kept app-local (genuinely not theme colors): black/white anchors, --stripe (brand), --diff-* (fixed readability convention), shadows/space/radius/fonts. Validates the intent set on the server-rendered medium: sufficient, zero additions. Findings in _private docs. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Author: Max Johnson <me@maxj.phd> · 2026-06-13 02:25 UTC
Commit: 770f38c0a333e8e16a051d1c2e14ff94a4ba7dc5
Parent: 436c91c
2 files changed, +84 insertions, -121 deletions
M server/static/style.css +74 -111
@@ -171,61 +171,23 @@
171 171 --category-four: #f59e0b;
172 172 --category-five: #a29bfe;
173 173 --category-six: #17a2b8;
174 + --overlay: rgba(3, 2, 0, 0.5);
174 175
175 176 /* --------------------------------------------------------------------
176 - BRAND ALIASES — MNW's historical vocabulary over the intent layer.
177 -
178 - Kept so 300+ existing call sites (--detail, --highlight, --surface-*)
179 - stay valid. Names that already match an intent token (--border,
180 - --danger, --success, --focus-ring) consume it directly above.
181 - -------------------------------------------------------------------- */
182 - --background: var(--surface-page);
183 - --background-color: var(--surface-page);
184 - --light-background: var(--surface-overlay);
185 - --secondary-bg: var(--surface-overlay);
186 - --surface: var(--surface-raised);
187 - --surface-muted: var(--surface-sunken);
188 - --detail: var(--content);
189 - --text: var(--content);
190 - --text-muted: var(--content-muted);
191 - --highlight: var(--action);
192 - --accent: var(--action);
193 - --accent-color: var(--action);
194 - --surface-border: var(--border);
195 - --border-color: var(--border);
196 -
197 - /* --------------------------------------------------------------------
198 - APP-SIDE LITERALS — intentionally NOT in the shared palette.
199 -
200 - Pure black/white contrast, the brown warning tone, status-tint
201 - backgrounds, health + diff hues, and translucent overlays. These
202 - diverge from a generic accent on purpose and stay fixed across
203 - themes; kept literal to preserve the exact current rendering.
177 + APP-LOCAL CONSTANTS — not theme colors, not derivable from intents.
178 +
179 + Component CSS references the intent tokens above directly (no brand
180 + aliases). Status backgrounds and the faint accent tint derive from the
181 + intents inline via color-mix(); these few stay fixed:
182 + - pure black/white contrast anchors
183 + - Stripe's brand color (an external constant)
184 + - diff add/del — a hard readability convention that must not re-theme
204 185 -------------------------------------------------------------------- */
205 - --surface-alt: #ebe7db;
206 - --input-background: #e2dad2;
207 - --overlay: rgba(0, 0, 0, 0.5);
208 186 --primary-dark: #000000;
209 187 --primary-light: #ffffff;
210 -
211 - --success-bg: #e8fde8;
212 - --warning: #8b7355;
213 - --warning-bg: #fff3cd;
214 - --warning-border: #ffc107;
215 - --danger-bg: #fde8e8;
216 - --error: #d62828;
217 - --error-bg: #fef2f2;
218 188 --stripe: #635BFF;
219 189
220 - /* Health status indicators */
221 - --health-ok: #22c55e;
222 - --health-warn: #f59e0b;
223 - --health-error: #ef4444;
224 - --health-unknown: #9ca3af;
225 -
226 - --highlight-faint: rgba(108, 92, 231, 0.08);
227 -
228 - /* Diff / code review */
190 + /* Diff / code review — fixed green-add / red-del convention */
229 191 --diff-add: #2d7d2d;
230 192 --diff-add-bg: rgba(45, 125, 45, 0.08);
231 193 --diff-del: #a83232;
@@ -238,6 +200,8 @@
238 200 --space-4: 1rem;
239 201 --space-5: 1.5rem;
240 202 --space-6: 2rem;
203 + --space-7: 3rem;
204 + --space-8: 4rem;
241 205
242 206 /* Radius scale */
243 207 --radius-sm: 2px;
@@ -270,8 +234,8 @@
270 234 /* Base styles */
271 235 body {
272 236 margin: 0;
273 - background-color: var(--background);
274 - color: var(--detail);
237 + background-color: var(--surface-page);
238 + color: var(--content);
275 239 font-family: var(--font-body);
276 240 line-height: 1.6;
277 241 }
@@ -308,7 +272,7 @@ body {
308 272 h1 {
309 273 font-family: var(--font-heading);
310 274 font-weight: normal;
311 - color: var(--detail);
275 + color: var(--content);
312 276 text-align: center;
313 277 font-size: 2.5rem;
314 278 }
@@ -317,7 +281,7 @@ h2,
317 281 h3 {
318 282 font-family: var(--font-mono);
319 283 font-weight: normal;
320 - color: var(--detail);
284 + color: var(--content);
321 285 }
322 286
323 287 /* Heading classes (charter: docs/design-system.md — every h1/h2 in a
@@ -334,7 +298,7 @@ h3 {
334 298 .page-title {
335 299 font-family: var(--font-heading);
336 300 font-weight: normal;
337 - color: var(--detail);
301 + color: var(--content);
338 302 text-align: center;
339 303 font-size: 2.5rem;
340 304 }
@@ -342,7 +306,7 @@ h3 {
342 306 .subtitle-h2 {
343 307 font-family: var(--font-mono);
344 308 font-weight: normal;
345 - color: var(--detail);
309 + color: var(--content);
346 310 text-align: center;
347 311 font-size: 1.5rem;
348 312 }
@@ -350,16 +314,16 @@ h3 {
350 314 .subsection-title {
351 315 font-family: var(--font-mono);
352 316 font-weight: normal;
353 - color: var(--detail);
317 + color: var(--content);
354 318 }
355 319
356 320 p {
357 321 font-family: var(--font-body);
358 - color: var(--detail);
322 + color: var(--content);
359 323 }
360 324
361 325 a {
362 - color: var(--detail);
326 + color: var(--content);
363 327 text-decoration: none;
364 328 }
365 329
@@ -369,7 +333,7 @@ a:hover {
369 333
370 334 /* The signature dot */
371 335 .dot {
372 - color: var(--highlight);
336 + color: var(--action);
373 337 }
374 338
375 339 /* Container — default 1200px max-width. Modifier classes for narrower pages,
@@ -402,10 +366,10 @@ a:hover {
402 366 =========================================== */
403 367
404 368 button {
405 - color: var(--detail);
406 - background: var(--light-background);
369 + color: var(--content);
370 + background: var(--surface-overlay);
407 371 padding: 6px 12px;
408 - border: 1px solid var(--detail);
372 + border: 1px solid var(--content);
409 373 font-family: inherit;
410 374 cursor: pointer;
411 375 box-shadow: var(--shadow-raised);
@@ -446,8 +410,8 @@ button:active {
446 410 }
447 411
448 412 .btn-secondary {
449 - background: var(--surface-muted);
450 - color: var(--detail);
413 + background: var(--surface-sunken);
414 + color: var(--content);
451 415 border: none;
452 416 padding: 0.75rem 1.5rem;
453 417 font-family: var(--font-mono);
@@ -539,7 +503,7 @@ button[aria-disabled="true"],
539 503
540 504 .btn--link {
541 505 background: none;
542 - color: var(--detail);
506 + color: var(--content);
543 507 border: none;
544 508 padding: 0;
545 509 font-family: var(--font-mono);
@@ -601,13 +565,13 @@ form {
601 565
602 566 .form-container {
603 567 max-width: 400px;
604 - background: var(--light-background);
568 + background: var(--surface-overlay);
605 569 padding: 2rem;
606 570 }
607 571
608 572 label {
609 573 font-family: var(--font-mono);
610 - color: var(--detail);
574 + color: var(--content);
611 575 font-size: 14px;
612 576 }
613 577
@@ -619,12 +583,12 @@ input[type="date"],
619 583 textarea,
620 584 select {
621 585 width: 100%;
622 - background: var(--input-background);
586 + background: var(--surface-sunken);
623 587 border: 1px solid var(--border);
624 588 padding: 0.75rem;
625 589 font-family: var(--font-mono);
626 590 font-size: 0.9rem;
627 - color: var(--detail);
591 + color: var(--content);
628 592 box-shadow: var(--shadow-inset);
629 593 }
630 594
@@ -640,7 +604,7 @@ input[type="number"]:focus,
640 604 textarea:focus,
641 605 select:focus {
642 606 outline: none;
643 - border: 1px solid var(--highlight);
607 + border: 1px solid var(--action);
644 608 }
645 609
646 610 textarea {
@@ -656,10 +620,10 @@ input[type="submit"],
656 620 form button {
657 621 font-family: var(--font-heading);
658 622 font-size: 16px;
659 - color: var(--detail);
660 - background: var(--light-background);
623 + color: var(--content);
624 + background: var(--surface-overlay);
661 625 padding: 12px 24px;
662 - border: 1px solid var(--detail);
626 + border: 1px solid var(--content);
663 627 cursor: pointer;
664 628 box-shadow: var(--shadow-raised);
665 629 transition: box-shadow 0.1s ease, transform 0.05s ease, background 0.2s ease;
@@ -667,7 +631,7 @@ form button {
667 631
668 632 input[type="submit"]:hover,
669 633 form button:hover {
670 - background: var(--background);
634 + background: var(--surface-page);
671 635 box-shadow: 3px 3px var(--shadow-edge);
672 636 }
673 637
@@ -708,25 +672,25 @@ form button:active {
708 672 /* Field-level validation error, paired with .form-group--error.
709 673 Canonical: `partials/_ui.html` ui::form_field macro. */
710 674 .form-group--error label {
711 - color: var(--error);
675 + color: var(--danger);
712 676 }
713 677
714 678 .form-group--error input,
715 679 .form-group--error textarea,
716 680 .form-group--error select {
717 - border-color: var(--error);
681 + border-color: var(--danger);
718 682 }
719 683
720 684 .field-error {
721 685 font-size: 0.85rem;
722 - color: var(--error);
686 + color: var(--danger);
723 687 margin-top: var(--space-2);
724 688 }
725 689
726 690 /* Loading skeleton placeholder.
727 691 Canonical: `partials/_ui.html` ui::loading_skeleton macro. */
728 692 .loading-skeleton {
729 - background: var(--surface-muted);
693 + background: var(--surface-sunken);
730 694 border-radius: var(--radius-md);
731 695 animation: skeleton-pulse 1.2s ease-in-out infinite;
732 696 }
@@ -785,8 +749,8 @@ form button:active {
785 749 }
786 750
787 751 .tab {
788 - background: var(--surface-muted);
789 - color: var(--detail);
752 + background: var(--surface-sunken);
753 + color: var(--content);
790 754 border: none;
791 755 padding: 0.75rem 2rem;
792 756 font-family: var(--font-mono);
@@ -804,7 +768,7 @@ form button:active {
804 768 }
805 769
806 770 .tab.is-selected {
807 - background: var(--light-background);
771 + background: var(--surface-overlay);
808 772 opacity: 1;
809 773 }
810 774
@@ -822,7 +786,7 @@ form button:active {
822 786 top: 100%;
823 787 right: 0;
824 788 z-index: 10;
825 - background: var(--background);
789 + background: var(--surface-page);
826 790 border: 1px solid var(--border);
827 791 min-width: 180px;
828 792 box-shadow: var(--shadow-2);
@@ -846,7 +810,7 @@ form button:active {
846 810
847 811 .tab-content {
848 812 display: none;
849 - background: var(--light-background);
813 + background: var(--surface-overlay);
850 814 padding: 2rem;
851 815 }
852 816
@@ -867,7 +831,7 @@ form button:active {
867 831 }
868 832
869 833 .data-table thead {
870 - background: var(--surface-muted);
834 + background: var(--surface-sunken);
871 835 }
872 836
873 837 .data-table th {
@@ -897,15 +861,15 @@ form button:active {
897 861 }
898 862
899 863 .data-table tbody tr:nth-child(odd) {
900 - background: var(--surface-alt);
864 + background: var(--surface-overlay);
901 865 }
902 866
903 867 .data-table tbody tr:nth-child(even) {
904 - background: var(--light-background);
868 + background: var(--surface-overlay);
905 869 }
906 870
907 871 .data-table tbody tr:hover {
908 - background: var(--surface-muted);
872 + background: var(--surface-sunken);
909 873 }
910 874
911 875 .data-table td {
@@ -1055,12 +1019,12 @@ form button:active {
1055 1019 }
1056 1020
1057 1021 .badge.suspended {
1058 - background: var(--danger-bg);
1022 + background: color-mix(in oklch, var(--danger) 10%, var(--surface-page));
1059 1023 color: var(--danger);
1060 1024 }
1061 1025
1062 1026 .badge.free {
1063 - background: var(--highlight);
1027 + background: var(--action);
1064 1028 color: var(--primary-light);
1065 1029 }
1066 1030
@@ -1072,7 +1036,7 @@ form button:active {
1072 1036 letter-spacing: 0.02em;
1073 1037 }
1074 1038 .badge.ai-tier-handmade {
1075 - background: var(--highlight);
1039 + background: var(--action);
1076 1040 color: var(--primary-light);
1077 1041 }
1078 1042 .badge.ai-tier-assisted {
@@ -1080,7 +1044,7 @@ form button:active {
1080 1044 color: var(--primary-light);
1081 1045 }
1082 1046 .badge.ai-tier-generated {
1083 - background: var(--detail);
1047 + background: var(--content);
1084 1048 color: var(--primary-light);
1085 1049 }
1086 1050
@@ -1091,7 +1055,7 @@ form button:active {
1091 1055 .ai-disclosure {
1092 1056 margin: 0.75rem 0;
1093 1057 padding: 0.75rem 1rem;
1094 - background: var(--surface-muted);
1058 + background: var(--surface-sunken);
1095 1059 border-left: 3px solid var(--warning);
1096 1060 }
1097 1061 .ai-disclosure-label {
@@ -1099,12 +1063,12 @@ form button:active {
1099 1063 font-size: 0.75rem;
1100 1064 text-transform: uppercase;
1101 1065 letter-spacing: 0.05em;
1102 - color: var(--text-muted);
1066 + color: var(--content-muted);
1103 1067 margin-bottom: 0.25rem;
1104 1068 }
1105 1069 .ai-disclosure-text {
1106 1070 font-size: 0.9rem;
1107 - color: var(--detail);
1071 + color: var(--content);
1108 1072 }
1109 1073
1110 1074 /* Discover row: plain text mention per design decision 2026-06-03 —
@@ -1113,7 +1077,7 @@ form button:active {
1113 1077 .discover-row-ai-tier {
1114 1078 font-family: var(--font-mono);
1115 1079 font-size: 0.75rem;
1116 - color: var(--text-muted);
1080 + color: var(--content-muted);
1117 1081 }
1118 1082
1119 1083 /* ===========================================
@@ -1130,7 +1094,7 @@ form button:active {
1130 1094 }
1131 1095
1132 1096 .tag-input {
1133 - background: var(--surface-muted);
1097 + background: var(--surface-sunken);
1134 1098 padding: 0.5rem;
1135 1099 margin-bottom: 0.5rem;
1136 1100 display: flex;
@@ -1171,11 +1135,11 @@ form button:active {
1171 1135 .use-case-card) are aliased to these recipes below — templates migrate at
1172 1136 their own pace. */
1173 1137 .card {
1174 - background: var(--light-background);
1138 + background: var(--surface-overlay);
1175 1139 padding: 1.5rem;
1176 1140 margin-bottom: 1rem;
1177 1141 text-decoration: none;
1178 - color: var(--detail);
1142 + color: var(--content);
1179 1143 display: block;
1180 1144 border: 1px solid var(--border);
1181 1145 box-shadow: var(--shadow-card);
@@ -1183,12 +1147,12 @@ form button:active {
1183 1147 }
1184 1148
1185 1149 .card:hover {
1186 - background: var(--surface-muted);
1150 + background: var(--surface-sunken);
1187 1151 }
1188 1152
1189 1153 /* Muted card primitive. */
1190 1154 .card-muted {
1191 - background: var(--surface-muted);
1155 + background: var(--surface-sunken);
1192 1156 padding: 1.5rem;
1193 1157 }
1194 1158 /* Bordered card (.card--bordered alias for .feature-card, .tier-card, .use-case-card, .fork-card). */
@@ -1213,7 +1177,7 @@ form button:active {
1213 1177
1214 1178 .card-meta {
1215 1179 font-size: 0.85rem;
1216 - color: var(--text-muted);
1180 + color: var(--content-muted);
1217 1181 margin-bottom: 0.5rem;
1218 1182 font-family: var(--font-mono);
1219 1183 }
@@ -1242,7 +1206,7 @@ form button:active {
1242 1206 }
1243 1207
1244 1208 .stat-box {
1245 - background: var(--light-background);
1209 + background: var(--surface-overlay);
1246 1210 padding: 1rem 1.5rem;
1247 1211 flex: 1;
1248 1212 text-align: center;
@@ -1331,12 +1295,12 @@ form button:active {
1331 1295
1332 1296 .discussion-section p {
1333 1297 margin: 0 0 0.75rem;
1334 - color: var(--text-muted);
1298 + color: var(--content-muted);
1335 1299 font-size: 0.875rem;
1336 1300 }
1337 1301
1338 1302 .discussion-section a {
1339 - color: var(--highlight);
1303 + color: var(--action);
1340 1304 text-decoration: none;
1341 1305 font-size: 0.875rem;
1342 1306 }
@@ -1361,7 +1325,7 @@ form button:active {
1361 1325 .error-message — inline form-field error; hidden by default, shown
1362 1326 with .is-active. Distinct from page-level .alert. */
1363 1327 .info-box {
1364 - background: var(--surface-muted);
1328 + background: var(--surface-sunken);
1365 1329 padding: 1rem;
1366 1330 margin-bottom: 1rem;
1367 1331 font-size: 0.9rem;
@@ -1399,10 +1363,10 @@ form button:active {
1399 1363
1400 1364 .error-message {
1401 1365 font-family: var(--font-mono);
1402 - color: var(--error);
1403 - background: var(--error-bg);
1366 + color: var(--danger);
1367 + background: color-mix(in oklch, var(--danger) 10%, var(--surface-page));
1404 1368 padding: 12px;
1405 - border: 1px solid var(--error);
1369 + border: 1px solid var(--danger);
1406 1370 border-radius: 2px;
1407 1371 text-align: center;
1408 1372 font-size: 14px;
@@ -1418,7 +1382,7 @@ form button:active {
1418 1382 align-items: center;
1419 1383 justify-content: center;
1420 1384 padding: var(--space-6);
1421 - background: var(--background);
1385 + background: var(--surface-page);
1422 1386 }
1423 1387
1424 1388 .error-container {
@@ -1431,14 +1395,14 @@ form button:active {
1431 1395 font-weight: 600;
1432 1396 letter-spacing: 0.08em;
1433 1397 text-transform: uppercase;
1434 - color: var(--text-muted);
1398 + color: var(--content-muted);
1435 1399 margin-bottom: var(--space-4);
1436 1400 }
1437 1401
1438 1402 .error-page-message {
1439 1403 font-size: 1.5rem;
1440 1404 line-height: 1.4;
1441 - color: var(--detail);
1405 + color: var(--content);
1442 1406 margin-bottom: var(--space-6);
1443 1407 }
1444 1408
@@ -1466,7 +1430,7 @@ form button:active {
1466 1430 }
1467 1431
1468 1432 .buy-page .buy-card {
1469 - background: var(--light-background);
Lines truncated
M server/templates/partials/tabs/project_settings.html +10 -10
@@ -367,17 +367,17 @@ function saveProjectInfo(e, projectId) {
367 367 body: JSON.stringify(data)
368 368 }).then(function(r) {
369 369 if (r.ok) {
370 - if (status) { status.textContent = 'Saved'; status.style.color = 'var(--success-color)'; }
370 + if (status) { status.textContent = 'Saved'; status.style.color = 'var(--success)'; }
371 371 setTimeout(function() { if (status) status.textContent = ''; }, 2000);
372 372 } else {
373 373 r.text().then(function(body) {
374 374 var msg = 'Save failed';
375 375 try { msg = JSON.parse(body).error || msg; } catch(_) {}
376 - if (status) { status.textContent = msg; status.style.color = 'var(--error-color)'; }
376 + if (status) { status.textContent = msg; status.style.color = 'var(--danger)'; }
377 377 });
378 378 }
379 379 }).catch(function() {
380 - if (status) { status.textContent = 'Network error'; status.style.color = 'var(--error-color)'; }
380 + if (status) { status.textContent = 'Network error'; status.style.color = 'var(--danger)'; }
381 381 });
382 382 return false;
383 383 }
@@ -406,7 +406,7 @@ function saveProjectPricing(e, projectId) {
406 406 if (model === 'buy_once') {
407 407 var p = parseFloat(document.getElementById('settings-price-dollars').value);
408 408 if (!(p >= 0.50)) {
409 - if (status) { status.textContent = 'Price must be at least $0.50'; status.style.color = 'var(--error-color)'; }
409 + if (status) { status.textContent = 'Price must be at least $0.50'; status.style.color = 'var(--danger)'; }
410 410 return false;
411 411 }
412 412 data.price_dollars = p;
@@ -421,17 +421,17 @@ function saveProjectPricing(e, projectId) {
421 421 body: JSON.stringify(data)
422 422 }).then(function(r) {
423 423 if (r.ok) {
424 - if (status) { status.textContent = 'Saved'; status.style.color = 'var(--success-color)'; }
424 + if (status) { status.textContent = 'Saved'; status.style.color = 'var(--success)'; }
425 425 setTimeout(function() { if (status) status.textContent = ''; }, 2000);
426 426 } else {
427 427 r.text().then(function(body) {
428 428 var msg = 'Save failed';
429 429 try { msg = JSON.parse(body).error || msg; } catch(_) {}
430 - if (status) { status.textContent = msg; status.style.color = 'var(--error-color)'; }
430 + if (status) { status.textContent = msg; status.style.color = 'var(--danger)'; }
431 431 });
432 432 }
433 433 }).catch(function() {
434 - if (status) { status.textContent = 'Network error'; status.style.color = 'var(--error-color)'; }
434 + if (status) { status.textContent = 'Network error'; status.style.color = 'var(--danger)'; }
435 435 });
436 436 return false;
437 437 }
@@ -451,14 +451,14 @@ function updateFeatures(projectId) {
451 451 body: JSON.stringify({features: selected})
452 452 }).then(function(r) {
453 453 if (r.ok) {
454 - if (status) { status.textContent = 'Saved'; status.style.color = 'var(--success-color)'; }
454 + if (status) { status.textContent = 'Saved'; status.style.color = 'var(--success)'; }
455 455 // Reload the page so the tab bar reflects new features
456 456 setTimeout(function() { window.location.reload(); }, 300);
457 457 } else {
458 - if (status) { status.textContent = 'Save failed'; status.style.color = 'var(--error-color)'; }
458 + if (status) { status.textContent = 'Save failed'; status.style.color = 'var(--danger)'; }
459 459 }
460 460 }).catch(function() {
461 - if (status) { status.textContent = 'Network error'; status.style.color = 'var(--error-color)'; }
461 + if (status) { status.textContent = 'Network error'; status.style.color = 'var(--danger)'; }
462 462 });
463 463 }
464 464 </script>