From ae6fa323183e770ac9da3ec8d188b4acfc00e3fb Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 14:03:32 -0700 Subject: [PATCH] refine(site): fold Language subtitle, split Antidote, Live Mode layout + variants MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Four responses to feedback: 1. Language: fold "Pick any command to see it in action / Full command reference →" into the section-lead. The whole commands-header row is gone; the fisheye panel now sits much closer to the lead copy. 2. Antidote: full two-column editorial split. Left column carries the lead + a three-row stats block (25 / 6 / 3) and the "Browse full catalog" CTA as a squared editorial link. Right column is the Gallery of Shame card stack. No more empty right-of-gallery void. 3. The Case: tab labels switch from Cormorant italic serif to body sans. Tab numbers stay mono. Less aesthetic noise, cleaner reading. 4. Live Mode: - Layout split: the frame now sits in the left column with its caption; the support list ("Works on / Accepts into / CSP / Overlay") moves to a narrow right column, rule-delimited, with magenta-kicker-above-ink style per cell. Under the support list on desktop, stacks on mobile. - Skeleton page: nav bar (logo + 3 links + CTA) plus heading + body lines drawn in at 30% opacity behind the target card, so the iteration reads as "I clicked an element on an actual page." - Variant cards rewritten with distinct design language per card: V1 editorial column (rule-top, italic display, text-link button), V2 brutalist ink ticket (ink slab, magenta accent stripe, stamp glyph, sans bold), V3 playful dashed postcard (stickers, italic Cormorant, pill CTA). The demo now actually shows three visually different directions instead of three similar cards. --- public/css/workflow.css | 357 ++++++++++++++++++++++++++++++++++++++-- public/index.html | 97 +++++++---- 2 files changed, 407 insertions(+), 47 deletions(-) diff --git a/public/css/workflow.css b/public/css/workflow.css index d9ee5767e..2fc925afc 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -1433,10 +1433,10 @@ } .why-tab-label { - font-family: var(--font-display); - font-size: 1.125rem; - font-weight: 400; - line-height: 1.2; + font-family: var(--font-body); + font-size: 0.9375rem; + font-weight: 500; + line-height: 1.3; } .why-tab:hover { @@ -2704,10 +2704,20 @@ } .live-demo { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); + gap: var(--spacing-xl); + align-items: start; + margin-bottom: var(--spacing-xl); +} +.live-demo-frame-col { display: flex; flex-direction: column; gap: var(--spacing-md); - margin-bottom: var(--spacing-xl); + min-width: 0; +} +@media (max-width: 920px) { + .live-demo { grid-template-columns: 1fr; } } .live-demo-frame { @@ -3206,28 +3216,35 @@ /* Supporting row under the demo */ .live-demo-support { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: var(--spacing-lg); - padding-top: var(--spacing-md); - border-top: 1px solid var(--color-mist); -} -.live-demo-support-cell { display: flex; flex-direction: column; + gap: var(--spacing-md); + padding: var(--spacing-md) 0 0; + border-top: 1px solid var(--color-ink); + align-self: stretch; +} +.live-demo-support-cell { + display: grid; + grid-template-columns: 1fr; gap: 4px; + padding-bottom: var(--spacing-md); + border-bottom: 1px dashed var(--color-mist); +} +.live-demo-support-cell:last-child { + border-bottom: 0; + padding-bottom: 0; } .live-demo-support-k { font-family: var(--font-mono); font-size: 10px; - letter-spacing: 0.2em; + letter-spacing: 0.22em; text-transform: uppercase; - color: var(--color-ash); + color: var(--color-accent); } .live-demo-support-v { font-family: var(--font-body); font-size: 14px; - line-height: 1.45; + line-height: 1.55; color: var(--color-ink); } @@ -3312,3 +3329,313 @@ align-items: flex-start; } } + +/* ============================================ + ANTIDOTE — two-column editorial layout + ============================================ */ + +.antidote-row--split { + display: grid; + grid-template-columns: minmax(280px, 1fr) auto; + gap: var(--spacing-2xl); + align-items: center; + justify-content: flex-start; +} + +.antidote-intro { + display: flex; + flex-direction: column; + gap: var(--spacing-lg); + max-width: 52ch; +} + +.antidote-intro .section-lead { + margin-bottom: 0; +} + +.antidote-stats { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + margin: 0; + padding: var(--spacing-md) 0 0; + border-top: 1px solid var(--color-mist); +} + +.antidote-stat { + display: grid; + grid-template-columns: 72px 1fr; + gap: var(--spacing-md); + align-items: baseline; +} + +.antidote-stat dt { + font-family: var(--font-display); + font-style: italic; + font-weight: 400; + font-size: 2.5rem; + line-height: 1; + color: var(--color-ink); + letter-spacing: -0.02em; +} + +.antidote-stat dd { + margin: 0; + font-family: var(--font-body); + font-size: 0.9375rem; + line-height: 1.5; + color: var(--color-charcoal); +} + +.antidote-stat dd code { + font-family: var(--font-mono); + font-size: 0.875em; + background: var(--color-mist); + padding: 1px 6px; + border-radius: 3px; + color: var(--color-ink); +} + +.antidote-catalog-link { + font-family: var(--font-body); + font-weight: 500; + font-size: 0.875rem; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--color-ink); + border-bottom: 2px solid var(--color-ink); + padding-bottom: 4px; + text-decoration: none; + align-self: flex-start; + transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out); +} + +.antidote-catalog-link:hover { + color: var(--color-accent); + border-color: var(--color-accent); +} + +@media (max-width: 900px) { + .antidote-row--split { + grid-template-columns: 1fr; + gap: var(--spacing-xl); + } +} + +/* ============================================ + LIVE MODE — skeleton page + richer variants + ============================================ */ + +/* Skeleton elements behind the target card — suggest "this is a real page" */ +.live-demo-skeleton { + position: absolute; + inset: 24px; + display: flex; + flex-direction: column; + gap: 14px; + opacity: 0.3; + pointer-events: none; + filter: blur(0.3px); +} +.live-demo-skel-nav { + display: flex; + align-items: center; + gap: 10px; + padding-bottom: 12px; + border-bottom: 1px solid var(--color-mist); +} +.live-demo-skel-logo { + width: 22px; + height: 22px; + border-radius: 4px; + background: var(--color-charcoal); +} +.live-demo-skel-link { + width: 48px; + height: 8px; + border-radius: 2px; + background: var(--color-mist); +} +.live-demo-skel-cta { + margin-left: auto; + width: 72px; + height: 24px; + border-radius: 4px; + background: var(--color-charcoal); +} +.live-demo-skel-heading { + width: 60%; + height: 18px; + border-radius: 3px; + background: var(--color-mist); + margin-top: 20px; +} +.live-demo-skel-line { + height: 8px; + border-radius: 2px; + background: var(--color-mist); +} +.live-demo-skel-line--short { width: 40%; } + +/* Target stays above skeleton */ +.live-demo-target { position: relative; z-index: 1; } + +/* ---- Card variants — sharper, more distinct ---- */ + +/* Variant 1: magazine column — italic serif, rule lines, off-white */ +.live-demo-card--v1 { + background: var(--color-cream); + padding: 18px 22px; + border: 0; + border-top: 3px solid var(--color-ink); + border-radius: 0; + gap: 6px; +} +.live-demo-card--v1 .live-demo-card-kicker { + color: var(--color-accent); + font-family: var(--font-mono); + font-size: 10px; + letter-spacing: 0.28em; +} +.live-demo-card--v1 h3 { + font-family: var(--font-display); + font-style: italic; + font-weight: 400; + font-size: 28px; + line-height: 1.05; + letter-spacing: -0.01em; + margin-top: 4px; +} +.live-demo-card--v1 h3 em { color: var(--color-accent); font-style: italic; } +.live-demo-card--v1 p { + font-family: var(--font-display); + font-style: italic; + font-size: 14px; + line-height: 1.55; + color: var(--color-charcoal); +} +.live-demo-card--v1 button { + font-family: var(--font-body); + align-self: flex-start; + margin-top: 6px; + background: transparent; + color: var(--color-ink); + border: 0; + border-bottom: 1.5px solid var(--color-ink); + padding: 4px 0; + border-radius: 0; + letter-spacing: 0.08em; +} + +/* Variant 2: brutalist ticket — thick ink block, stamp glyph, mono */ +.live-demo-card--v2 { + position: relative; + background: var(--color-ink); + color: var(--color-paper); + padding: 20px 24px; + border: 0; + border-radius: 0; + overflow: hidden; + gap: 8px; +} +.live-demo-card--v2::before { + content: ""; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 6px; + background: var(--color-accent); +} +.live-demo-card-stamp { + position: absolute; + top: 14px; + right: 18px; + font-size: 28px; + line-height: 1; + color: var(--color-accent); + transform: rotate(-8deg); +} +.live-demo-card--v2 .live-demo-card-kicker { + color: var(--color-accent); + letter-spacing: 0.3em; + font-weight: 600; +} +.live-demo-card--v2 h3 { + font-family: var(--font-body); + font-weight: 700; + font-size: 24px; + line-height: 1.1; + color: var(--color-paper); + letter-spacing: -0.02em; +} +.live-demo-card--v2 button { + font-family: var(--font-mono); + font-weight: 500; + align-self: flex-start; + margin-top: 6px; + background: var(--color-accent); + color: var(--color-paper); + border: 0; + border-radius: 0; + padding: 9px 14px; + letter-spacing: 0.04em; + text-transform: none; + font-size: 12px; +} + +/* Variant 3: playful ticket — accent background, sticker stars, postcard vibe */ +.live-demo-card--v3 { + position: relative; + background: + radial-gradient(circle at 20% 80%, oklch(92% 0.08 350) 0, transparent 45%), + var(--color-cream); + border: 1px dashed var(--color-accent); + border-radius: 10px; + padding: 22px 24px 20px; + gap: 8px; +} +.live-demo-card-sticker { + position: absolute; + top: 10px; + right: 14px; + display: flex; + gap: 3px; + color: var(--color-accent); + font-size: 14px; + line-height: 1; + transform: rotate(6deg); +} +.live-demo-card--v3 .live-demo-card-kicker { + font-family: var(--font-display); + font-style: italic; + font-weight: 400; + font-size: 13px; + letter-spacing: 0.04em; + color: var(--color-accent-hover); + text-transform: none; +} +.live-demo-card--v3 h3 { + font-family: var(--font-display); + font-weight: 400; + font-size: 22px; + line-height: 1.2; + color: var(--color-ink); +} +.live-demo-card--v3 button { + display: inline-flex; + align-items: center; + gap: 6px; + align-self: flex-start; + background: var(--color-ink); + color: var(--color-paper); + border: 0; + border-radius: 999px; + padding: 10px 18px; + font-family: var(--font-body); + font-weight: 500; + letter-spacing: 0.06em; + text-transform: none; + font-size: 12px; + margin-top: 6px; +} diff --git a/public/index.html b/public/index.html index 552db49fa..d44a74f0d 100644 --- a/public/index.html +++ b/public/index.html @@ -212,7 +212,7 @@
-

23 commands form a shared vocabulary between you and your AI. Each one encodes a specific design discipline, so you can steer with precision.

+

23 commands form a shared vocabulary between you and your AI. Each one encodes a specific design discipline, so you can steer with precision. Pick any to see it in action, or browse the full reference →

@@ -223,9 +223,6 @@
-
-

Pick any command to see it in action. Full command reference →

-
@@ -247,10 +244,28 @@

The Antidote

-

Every AI model learned from the same templates. Without intervention, they all produce the same predictable mistakes. Impeccable names them, detects them, and teaches the AI to avoid them.

+
+
+

Every AI model learned from the same templates. Without intervention, they all produce the same predictable mistakes. Impeccable names them, detects them, and teaches the AI to avoid them.

+ +
+
+
25
+
deterministic anti-pattern rules
+
+
+
6
+
categories: typography, color, layout, motion, visual details, interaction
+
+
+
3
+
ways to detect: CLI, Chrome extension, or inside /impeccable critique
+
+
+ + Browse the full catalog → +
- -

Gallery of Shame

@@ -283,7 +298,6 @@ Bad Contrast
- Browse the full catalog →
@@ -545,7 +559,7 @@

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

-
+
@@ -554,6 +568,20 @@
+ + +
@@ -567,25 +595,25 @@
No. 04 -

Letters, occasionally.

-

A postcard from the editor, about once a month. No tracking pixels.

+

Letters, occasionally.

+

A postcard from the editor, about once a month. No tracking pixels, no "just checking in."

- ☞ Subscribe -

Design dispatches, every other Thursday.

-

Slow by design. Opinions included.

+
☞
+ Dispatch +

Design notes,
every other
Thursday.

- Field notes -

One letter. One afternoon of reading. Once a month.

-

For people who still open email for pleasure.

- +
☆☆☆
+ Field Notes +

A monthly letter, for people who still read email for pleasure.

+
@@ -662,21 +690,26 @@
Hover an element to pick.
-
+
- -
-
- Works on - Vite · Next.js · SvelteKit · Astro · Nuxt -
-
- Accepts into - Your real source file, via HMR -
-
- CSP-strict apps - One-time dev-only patch, with your consent + +
+
+ Works on + Vite, Next.js, SvelteKit, Astro, Nuxt. +
+
+ Accepts into + Your real source file, via HMR. +
+
+ CSP-strict apps + One-time dev-only patch, with your consent. +
+
+ Overlay toggle + The anti-pattern detector runs inside Live, one click away. +