diff --git a/site/pages/live-mode/index.astro b/site/pages/live-mode/index.astro index 48cdcd108..ae5708465 100644 --- a/site/pages/live-mode/index.astro +++ b/site/pages/live-mode/index.astro @@ -17,8 +17,7 @@ import '../../styles/live-mode-kinpaku.css';
-

New in v3.0 Beta

-

Live Mode

+

Live Mode Beta

Pick any element in the browser. Drop a comment or a stroke. Three production-quality variants swap in via your framework's HMR. Accept the one you want and it writes back to source.

$ @@ -181,11 +180,11 @@ import '../../styles/live-mode-kinpaku.css'; 02 · Generate

Three genuinely different takes

Variants anchor to different archetypes, not three riffs on color. Each one explores a different primary axis: hierarchy, typography, density, layout, or palette strategy.

-
-
-
No.04
-
Dispatch
-
Field
+
+
+
No.04
+
Dispatch
+
Field
@@ -226,14 +225,14 @@ import '../../styles/live-mode-kinpaku.css';
Supported dev servers -
    -
  • Vite
    • -
  • Next.js (incl. monorepos)
    • -
  • SvelteKit
    • -
  • Astro
    • -
  • Nuxt
    • -
  • Bun
    • -
  • Plain static HTML
    • +
      +
    • bundlerVite
      • +
    • appsNext.js
      • +
    • appsSvelteKit
      • +
    • pagesAstro
      • +
    • appsNuxt
      • +
    • runtimeBun
      • +
    • staticPlain HTML
diff --git a/site/pages/slop/index.astro b/site/pages/slop/index.astro index e53ad5ad5..bf606d5ef 100644 --- a/site/pages/slop/index.astro +++ b/site/pages/slop/index.astro @@ -47,7 +47,6 @@ import '../../styles/slop-kinpaku.css';
-

The visible tells of AI design

Slop

46 patterns that mark an interface as AI-generated, and the detection overlay that catches them in place. Watch it flag them live, try it on 11 synthetic specimens, or browse the full catalog. 41 rules run deterministically (npx impeccable detect or the browser extension), 4 of them opt-in provider tells behind --gpt / --gemini; 5 need /impeccable critique's LLM review pass.

@@ -56,7 +55,7 @@ import '../../styles/slop-kinpaku.css';

See it

Every wave of AI-generated UIs converges on a recognizable aesthetic. The detector catches both. The patterns just change.

-
+
diff --git a/site/styles/light-mode.css b/site/styles/light-mode.css index e3a374d28..89ac05bef 100644 --- a/site/styles/light-mode.css +++ b/site/styles/light-mode.css @@ -776,6 +776,17 @@ html.light .slop-kinpaku .slop-layer { border-color: var(--ks-rule); } +html.light .slop-kinpaku .gallery-card:hover, +html.light .slop-kinpaku .rule-card:hover { + background: var(--ks-lacquer-raised); + border-color: oklch(49% 0.08 188 / 0.34); +} + +html.light .slop-kinpaku .gallery-card:hover .gallery-card-title, +html.light .slop-kinpaku .rule-card:hover .rule-card-name { + color: var(--ks-champagne); +} + html.light .live-mode-kinpaku .live-mode-hero-panel, html.light .live-mode-kinpaku .live-mode-step { background: var(--ks-lacquer-raised); @@ -1216,15 +1227,10 @@ html.light .docs-kinpaku .prose .docs-viz-flow-step + .docs-viz-flow-step::befor color: var(--docs-accent); } -html.light .live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant.is-active .docs-viz-variant-kicker, -html.light .live-mode-kinpaku .live-mode-stage-viz .docs-viz-accept-pill { +html.light .live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant.is-active .docs-viz-variant-kicker { color: var(--ks-kinpaku-ink); } -html.light .live-mode-kinpaku .live-mode-stage-viz .docs-viz-accept-pill { - border-color: var(--ks-kinpaku-deep); -} - /* Docs command demos — light surfaces (divider fix lives in docs-kinpaku.css) */ html.light .docs-kinpaku .docs-command-demo .split-container { background: @@ -1271,7 +1277,7 @@ html.light .site-header-github-star { } html.light .slop-kinpaku .skills-sidebar { - background: var(--ks-lacquer-raised); + background: transparent; border-color: var(--ks-rule); } @@ -1607,6 +1613,15 @@ html.light .slop-kinpaku .slop-catalog-lede a:hover { border-bottom-color: var(--ks-link-on-paper-hover); } +html.light .slop-kinpaku :is( + .sub-page-lede, + .anti-patterns-legend-body, + .visual-mode-method-name, + .visual-mode-method-desc +) code { + background: oklch(25% 0.02 95 / 0.08); +} + html.light .cf-items a, html.light .cf-faq-answer a { color: var(--ks-link-on-paper); diff --git a/site/styles/live-mode-kinpaku.css b/site/styles/live-mode-kinpaku.css index 90dba18b7..5052cf8f9 100644 --- a/site/styles/live-mode-kinpaku.css +++ b/site/styles/live-mode-kinpaku.css @@ -88,6 +88,10 @@ } .live-mode-kinpaku .live-mode-page-title { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 12px; font-family: var(--ks-font-display); font-style: normal; font-weight: var(--ks-type-display-weight); @@ -99,6 +103,23 @@ text-wrap: balance; } +.live-mode-kinpaku .live-mode-page-title-badge { + display: inline-flex; + align-items: center; + align-self: center; + padding: 3px 9px; + border: 1px solid oklch(70% 0.12 188 / 0.4); + border-radius: 2px; + background: oklch(70% 0.12 188 / 0.10); + color: var(--ks-patina); + font-family: var(--ks-mono); + font-size: 0.64rem; + font-weight: 500; + letter-spacing: 0.18em; + line-height: 1.2; + text-transform: uppercase; +} + .live-mode-kinpaku .live-mode-page-lede { font-size: 1.1rem; line-height: 1.65; @@ -113,10 +134,11 @@ without blocking the demo. */ .live-mode-kinpaku .live-mode-page-alpha-note { margin: 14px 0 0; - padding: 0; + padding: 0 0 0 14px; background: transparent; border: 0; border-radius: 0; + box-shadow: inset 2px 0 0 var(--ks-kinpaku); font-size: 0.82rem; line-height: 1.5; color: var(--ks-text-muted); @@ -305,8 +327,8 @@ .live-mode-kinpaku .live-demo-card--v1 { background: var(--ks-lacquer-raised); border: 0; - border-top: 3px solid var(--ks-kinpaku); border-radius: 0; + box-shadow: inset 0 3px 0 var(--ks-kinpaku); } .live-mode-kinpaku .live-demo-card--v1 .live-demo-card-kicker { @@ -368,8 +390,8 @@ .live-mode-kinpaku .live-demo-card--v3 { background: oklch(11% 0.012 82); - border: 1px solid var(--ks-rule); - color: var(--ks-text); + border: 1px solid oklch(78% 0 0 / 0.16); + color: oklch(88% 0 0); } .live-mode-kinpaku .live-demo-card--v3 .live-demo-card-kicker { @@ -380,7 +402,7 @@ font-family: var(--ks-font); font-style: normal; font-weight: 600; - color: var(--ks-champagne); + color: oklch(91% 0 0); } .live-mode-kinpaku .live-demo-card--v3 h3 em { @@ -540,34 +562,58 @@ box-shadow: none; } -/* Three-up variants strip (GENERATE card) — lacquer tiles, active gets - the kinpaku-tinted bg. */ -.live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant { - background: var(--ks-lacquer-raised); +/* Generate card — measured rail with one clearly active take. The active + state uses solid kinpaku instead of a patina wash so it stays crisp in + light mode. */ +.live-mode-kinpaku .live-mode-stage-viz--rail { + background: var(--ks-lacquer-deep); +} + +.live-mode-kinpaku .viz-rail { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0; + width: 100%; + min-height: 62px; border: 1px solid var(--ks-rule); + border-radius: 3px; + overflow: hidden; + background: var(--ks-lacquer-raised); +} + +.live-mode-kinpaku .viz-rail-cell { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 8px; color: var(--ks-text-muted); - box-shadow: none; + font-family: var(--ks-mono); + font-size: 8px; + letter-spacing: 0.14em; + text-transform: uppercase; } -.live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant.is-active { - background: oklch(78% 0.12 82 / 0.16); - border-color: var(--ks-kinpaku); - box-shadow: none; +.live-mode-kinpaku .viz-rail-cell + .viz-rail-cell { + box-shadow: inset 1px 0 0 var(--ks-rule); } -.live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant-kicker { - color: var(--ks-text-muted); +.live-mode-kinpaku .viz-rail-cell.is-active { + background: var(--ks-kinpaku); + color: oklch(8% 0.006 95); } -.live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant.is-active .docs-viz-variant-kicker { - color: var(--ks-kinpaku); +.live-mode-kinpaku .viz-rail-mark { + width: 18px; + height: 2px; + background: currentColor; } -/* Accept pill (ACCEPT card) — kinpaku gold ink on a subtle kinpaku wash. */ +/* Accept pill (ACCEPT card) — patina on lacquer, not a pale gold wash. */ .live-mode-kinpaku .live-mode-stage-viz .docs-viz-accept-pill { - background: oklch(78% 0.12 82 / 0.16); - border: 1px solid var(--ks-kinpaku); - color: var(--ks-kinpaku); + background: oklch(8% 0.006 95); + border: 1px solid oklch(70% 0.12 188 / 0.58); + color: oklch(82% 0.07 188); + box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.05); } @@ -701,6 +747,38 @@ border-radius: 2px; } +.live-mode-kinpaku .framework-list--matrix { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 1px; + background: var(--ks-rule); + border: 1px solid var(--ks-rule); + border-radius: 3px; + overflow: hidden; +} + +.live-mode-kinpaku .framework-list--matrix li { + display: grid; + gap: 4px; + min-height: 54px; + padding: 9px 10px; + background: var(--ks-lacquer-raised); + border: 0; + border-radius: 0; +} + +.live-mode-kinpaku .framework-list--matrix small { + color: var(--ks-patina-deep); + font-size: 0.62rem; + letter-spacing: 0.16em; + text-transform: uppercase; +} + +.live-mode-kinpaku .framework-list--matrix strong { + color: var(--ks-champagne); + font-weight: 500; +} + /* ============================================================================ 7. FOOTER on dark surface diff --git a/site/styles/slop-kinpaku.css b/site/styles/slop-kinpaku.css index e3571b2af..9609ac5c6 100644 --- a/site/styles/slop-kinpaku.css +++ b/site/styles/slop-kinpaku.css @@ -275,12 +275,12 @@ .slop-kinpaku .sub-page-lede code { font-family: var(--ks-mono); - font-size: 0.86em; - color: var(--ks-champagne); - background: var(--ks-graphite-2); - border: 1px solid var(--ks-rule); - padding: 1px 7px; - border-radius: 2px; + font-size: 0.84em; + color: var(--ks-code-fg); + background: var(--ks-code-bg); + border: 0; + padding: 0.14em 0.36em; + border-radius: var(--ks-code-radius); } .slop-kinpaku .sub-page-lede a { @@ -386,6 +386,26 @@ color: var(--ks-lacquer-deep); } +.slop-kinpaku .slop-era-toggle--ink { + background: color-mix(in oklch, var(--ks-graphite), transparent 28%); + border-color: color-mix(in oklch, var(--ks-rule), var(--ks-text) 10%); +} + +.slop-kinpaku .slop-era-toggle--ink .slop-era-tab { + padding: 8px 17px; + color: var(--ks-text-muted); +} + +.slop-kinpaku .slop-era-toggle--ink .slop-era-tab:hover { + color: var(--ks-text); +} + +.slop-kinpaku .slop-era-toggle--ink .slop-era-tab.is-active { + background: color-mix(in oklch, var(--ks-champagne), var(--ks-lacquer-raised) 16%); + color: var(--ks-lacquer); + box-shadow: inset 0 0 0 1px oklch(70% 0.12 188 / 0.18); +} + /* Browser frame mock around the iframe. Lacquer-deep shell with kinpaku chrome bar, matching the docs-kinpaku live-mode mock vocabulary. */ .slop-kinpaku .visual-mode-preview { @@ -393,7 +413,7 @@ border: 1px solid var(--ks-rule); border-radius: 4px; overflow: hidden; - box-shadow: 0 24px 60px oklch(2% 0.004 95 / 0.55); + box-shadow: none; } .slop-kinpaku .visual-mode-preview-header { @@ -497,11 +517,6 @@ object-position: top; display: block; filter: saturate(1.05); - transition: transform 320ms var(--ks-ease); -} - -.slop-kinpaku .gallery-card:hover .gallery-card-thumb img { - transform: scale(1.04); } .slop-kinpaku .gallery-card-body { @@ -623,12 +638,12 @@ .slop-kinpaku .anti-patterns-legend-body code { font-family: var(--ks-mono); - font-size: 0.86em; - color: var(--ks-champagne); - background: var(--ks-graphite-2); - border: 1px solid var(--ks-rule); - padding: 1px 6px; - border-radius: 2px; + font-size: 0.84em; + color: var(--ks-code-fg); + background: var(--ks-code-bg); + border: 0; + padding: 0.14em 0.36em; + border-radius: var(--ks-code-radius); } .slop-kinpaku .anti-patterns-legend-layers { @@ -922,11 +937,11 @@ .slop-kinpaku .visual-mode-method-name code { font-family: var(--ks-mono); font-size: 0.92em; - color: var(--ks-champagne); - background: var(--ks-graphite-2); - border: 1px solid var(--ks-rule); - padding: 1px 8px; - border-radius: 2px; + color: var(--ks-code-fg); + background: var(--ks-code-bg); + border: 0; + padding: 0.14em 0.36em; + border-radius: var(--ks-code-radius); } .slop-kinpaku .visual-mode-method-desc { @@ -938,12 +953,12 @@ .slop-kinpaku .visual-mode-method-desc code { font-family: var(--ks-mono); - font-size: 0.86em; - color: var(--ks-champagne); - background: var(--ks-graphite-2); - border: 1px solid var(--ks-rule); - padding: 1px 6px; - border-radius: 2px; + font-size: 0.84em; + color: var(--ks-code-fg); + background: var(--ks-code-bg); + border: 0; + padding: 0.14em 0.36em; + border-radius: var(--ks-code-radius); } .slop-kinpaku .visual-mode-method-desc a {