diff --git a/web/index.html b/web/index.html index 93ccd21..74bab4c 100644 --- a/web/index.html +++ b/web/index.html @@ -3,7 +3,7 @@ - + Vellum diff --git a/web/src/app.css b/web/src/app.css index 999b675..7935f9e 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -4,6 +4,10 @@ scale rather than ad-hoc values, which is what keeps it from feeling rushed. */ :root { + /* Native widgets (scrollbars, form controls, the caret) follow this rather + than the OS, so they match the brand instead of rendering white. */ + color-scheme: dark; + /* ── Surfaces ─────────────────────────────────────────────────────── */ /* Brand charcoal, taken from the logo's own background (#303030). The nav sits a step below the page so it reads as a distinct rail rather than @@ -88,34 +92,14 @@ --t-slow: 320ms; } -@media (prefers-color-scheme: light) { - :root { - --bg: #f4f4f5; - --surface: #ffffff; - --surface-2: #f0f0f1; - --surface-3: #e6e6e8; - --border: #e2e2e4; - --border-strong: #cfcfd3; - --nav-bg: #ffffff; - --nav-border: #d8d8dc; - - --text: #1a1a1c; - --muted: #5e5e64; - --faint: #8a8a90; - --nav-fg: #4a4a52; - - --accent: #9333ea; - --accent-hover: #7e22ce; - --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); - --accent-text: #ffffff; - --accent-2: #4f5bd5; - --danger: #c0392b; - --success: #1f8a4c; - - --shadow-cover: 0 1px 2px rgba(20, 20, 30, 0.08), 0 6px 18px rgba(20, 20, 30, 0.1); - --shadow-lift: 0 10px 26px rgba(20, 20, 30, 0.16); - } -} +/* There is deliberately no light theme. + An OS light-mode media query used to replace every token above with a generic + white and purple palette, so the app silently discarded the brand whenever + the system preferred light — which read as "the design changed on its own". + The brand is the product here, so it is not negotiable by a system setting. + Native widgets are told dark below so scrollbars and form controls match + instead of staying white. (The previous palette's literal hex values are + intentionally not repeated here, so a grep for them means something.) */ * { box-sizing: border-box;