From 2a605f63ca880dfba8b45472f6b36b700aab93c7 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Tue, 2 Jun 2026 11:37:39 +0200 Subject: [PATCH] Replace muddy gold borders with pristine gold or neutral hairlines Audit every --ks-rule-strong usage (the muddy desaturated gold). Where the border/text sits beside pristine kinpaku or signals an active/hover/ brand state, lift it to --ks-kinpaku; where it's a large structural frame, window chrome, or paired with neutral siblings, drop it to the neutral --ks-rule hairline. Lifted to --ks-kinpaku: detector focus ring + secondary action buttons, design-system candidate caption + mini-ui "after" border, docs neon-case secondary/hero-shot-hover, docs flow/chain arrows, homepage slop-teaser hover + impeccable-card. Dropped to --ks-rule: design-system comparison-stage frame, docs neon-case-command frame, light-mode hero demo shell + split-label pill + live-demo pin-note. --ks-rule-strong is now unused outside its token definition. Co-Authored-By: Claude Opus 4.8 (1M context) --- site/styles/design-system.css | 6 +++--- site/styles/detector-lab.css | 4 ++-- site/styles/docs-kinpaku.css | 4 ++-- site/styles/docs-visuals.css | 6 +++--- site/styles/home-kinpaku.css | 2 +- site/styles/home-rebuild.css | 2 +- site/styles/light-mode.css | 6 +++--- 7 files changed, 15 insertions(+), 15 deletions(-) diff --git a/site/styles/design-system.css b/site/styles/design-system.css index eb13be527..1968ecc97 100644 --- a/site/styles/design-system.css +++ b/site/styles/design-system.css @@ -401,7 +401,7 @@ font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; - border: 1px solid var(--ks-rule-strong); + border: 1px solid var(--ks-kinpaku); border-radius: 2px; pointer-events: none; } @@ -1301,7 +1301,7 @@ position: relative; aspect-ratio: 16 / 10; overflow: hidden; - border: 1px solid var(--ks-rule-strong); + border: 1px solid var(--ks-rule); border-radius: 2px; background: linear-gradient(180deg, oklch(8% 0.006 95), oklch(5% 0.004 95)); @@ -1366,7 +1366,7 @@ } .ks-mini-ui-after { - border-color: var(--ks-rule-strong); + border-color: var(--ks-kinpaku); } .ks-mini-ui-after .ks-mini-rule { width: 64px; diff --git a/site/styles/detector-lab.css b/site/styles/detector-lab.css index 2edf0e180..ac10a4cea 100644 --- a/site/styles/detector-lab.css +++ b/site/styles/detector-lab.css @@ -170,7 +170,7 @@ } .detector-fixture-button:focus-visible { - outline: 2px solid var(--ks-rule-strong); + outline: 2px solid var(--ks-kinpaku); outline-offset: 2px; } @@ -253,7 +253,7 @@ justify-content: center; min-height: 36px; padding: 0 16px; - border: 1px solid var(--ks-rule-strong); + border: 1px solid var(--ks-kinpaku); border-radius: 2px; background: transparent; color: var(--ks-kinpaku); diff --git a/site/styles/docs-kinpaku.css b/site/styles/docs-kinpaku.css index a70f8d574..2f92c9d41 100644 --- a/site/styles/docs-kinpaku.css +++ b/site/styles/docs-kinpaku.css @@ -540,7 +540,7 @@ display: grid; place-items: center; width: 36px; - color: var(--ks-rule-strong); + color: var(--ks-kinpaku); } .docs-kinpaku .docs-flow-arrow svg { @@ -628,7 +628,7 @@ } .docs-kinpaku .docs-chain-arrow { - color: var(--ks-rule-strong); + color: var(--ks-kinpaku); font-size: 1.1em; } diff --git a/site/styles/docs-visuals.css b/site/styles/docs-visuals.css index 8e04d305e..e60409881 100644 --- a/site/styles/docs-visuals.css +++ b/site/styles/docs-visuals.css @@ -3159,7 +3159,7 @@ .neon-case-secondary { color: var(--ks-kinpaku); - border-color: var(--ks-rule-strong); + border-color: var(--ks-kinpaku); } .neon-case-primary:hover, @@ -3188,7 +3188,7 @@ .neon-case-hero-shot:hover { transform: translateY(-3px); - border-color: var(--ks-rule-strong); + border-color: var(--ks-kinpaku); } .neon-case-hero-shot img { @@ -3323,7 +3323,7 @@ align-items: end; padding: clamp(2rem, 5vw, 4rem); background: var(--ks-lacquer-deep); - border: 1px solid var(--ks-rule-strong); + border: 1px solid var(--ks-rule); border-radius: 2px; } diff --git a/site/styles/home-kinpaku.css b/site/styles/home-kinpaku.css index d9044d467..d91dd7b2c 100644 --- a/site/styles/home-kinpaku.css +++ b/site/styles/home-kinpaku.css @@ -776,7 +776,7 @@ } .home-kinpaku .impeccable-card { - border: 1px solid var(--ks-rule-strong); + border: 1px solid var(--ks-kinpaku); background: linear-gradient(135deg, oklch(78% 0.12 82 / 0.11), transparent 42%), linear-gradient(180deg, oklch(14% 0.008 95 / 0.98), oklch(9% 0.006 95 / 0.98)); diff --git a/site/styles/home-rebuild.css b/site/styles/home-rebuild.css index e840ee125..21a563bdf 100644 --- a/site/styles/home-rebuild.css +++ b/site/styles/home-rebuild.css @@ -369,7 +369,7 @@ } .home-kinpaku .slop-teaser-card:hover { - border-color: var(--ks-rule-strong); + border-color: var(--ks-kinpaku); transform: translateY(-2px); } diff --git a/site/styles/light-mode.css b/site/styles/light-mode.css index fe7951f95..689298b79 100644 --- a/site/styles/light-mode.css +++ b/site/styles/light-mode.css @@ -289,7 +289,7 @@ html.light .hero-rebuild-art { html.light .hero-rebuild-demo-shell { background: oklch(99% 0.008 95 / 0.92); - border-color: var(--ks-rule-strong); + border-color: var(--ks-rule); } html.light .hero-rebuild-demo-shell:hover { @@ -946,7 +946,7 @@ html.light .home-kinpaku .terminal-preview .demo-split-comparison .split-after { html.light .home-kinpaku .hero-rebuild-right .split-label-item { background: oklch(99% 0.008 95 / 0.88); - border-color: var(--ks-rule-strong); + border-color: var(--ks-rule); color: var(--ks-champagne); } @@ -1048,7 +1048,7 @@ html.light .live-mode-kinpaku .live-demo-frame { html.light .hero-live-demo .live-demo-pin-note { background: var(--ks-lacquer-raised); - border-color: var(--ks-rule-strong); + border-color: var(--ks-rule); box-shadow: 0 8px 22px oklch(25% 0.02 95 / 0.10); }