From 023bf6988229fd84bcd251a1150379763163bd58 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 12:18:44 -0700 Subject: [PATCH] refine(site): rework Why visuals for panels 01, 03, 04, 05 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Addressing feedback that the first round didn't sell the differentiation: 01 Intentional design: scrap the "generic AI card vs warm card" comparison (the slop card actually looked good, which undermined the point). Show PRODUCT.md as a real file with fields filled in (Users, Register, Brand voice, Anti-references) and a pulse-dot footer signaling it's loaded on every command. The point is that Impeccable knows specific things about the product before it designs anything. 03 Production codebases: expand the terminal from a single "reading DESIGN.md" line to a full codebase walk. Tokens from tokens.css, merged tailwind theme, 34 components listed with variants inferred, DESIGN.md as one of many inputs. DESIGN.md is shallow; the real work is traversing source. 04 Where you code: scrap the card grid. Replaced with a two-row waterfall-vs-unified flow. Old way (greyed, strikethrough): Figma → Handoff → Ticket → Engineer → QA drift. New way: a single surface with Design / Code / Ship chips inside a fake IDE chrome. Pulls the real argument instead of just showing logos. 05 DESIGN.md: picker-sidebar-style rich tiles. Accent color with 8-step tonal ramp, Aa specimens for display + body, component chips + input preview. Stitch spec badge up top. Matches the visual vocabulary of the live-mode DESIGN.md sidebar. Panels 02, 06, 07 unchanged per feedback that they were working. --- public/css/workflow.css | 354 ++++++++++++++++++++++++++++++++++++++++ public/index.html | 156 ++++++++++++------ 2 files changed, 457 insertions(+), 53 deletions(-) diff --git a/public/css/workflow.css b/public/css/workflow.css index 13d8f70d8..a75181998 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -2157,3 +2157,357 @@ .why-harness-grid { grid-template-columns: repeat(3, 1fr); } .why-compare-card, .why-register { gap: 8px; } } + +/* ============================================ + WHY — updated visuals (panels 1, 3, 4, 5) + ============================================ */ + +/* ─ Panel 01: PRODUCT.md file view ─ */ +.why-visual--productmd { + padding: 0; + background: var(--color-paper); +} +.why-productmd-file { + flex: 1; + display: flex; + flex-direction: column; +} +.why-productmd-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 14px; + border-bottom: 1px solid var(--color-mist); + background: var(--color-cream); + border-radius: 7px 7px 0 0; +} +.why-productmd-filename { + font-family: var(--font-mono); + font-size: 11px; + font-weight: 500; + color: var(--color-ink); +} +.why-productmd-status { + font-family: var(--font-mono); + font-size: 9px; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--color-accent); +} +.why-productmd-body { + padding: 6px 14px; + display: flex; + flex-direction: column; +} +.why-productmd-field { + display: grid; + grid-template-columns: 110px 1fr; + gap: 16px; + align-items: baseline; + padding: 9px 0; + border-bottom: 1px dashed var(--color-mist); +} +.why-productmd-field:last-child { border-bottom: 0; } +.why-productmd-k { + font-family: var(--font-mono); + font-size: 10px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--color-ash); +} +.why-productmd-v { + font-family: var(--font-body); + font-size: 13px; + line-height: 1.5; + color: var(--color-ink); +} +.why-productmd-footer { + padding: 10px 14px; + border-top: 1px solid var(--color-mist); + font-family: var(--font-display); + font-style: italic; + font-size: 13px; + line-height: 1.4; + color: var(--color-charcoal); + display: flex; + align-items: center; + gap: 8px; + background: var(--color-cream); + border-radius: 0 0 7px 7px; +} +.why-productmd-footer-dot { + display: inline-block; + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--color-accent); + animation: whyPulse 2.4s ease-out infinite; + flex-shrink: 0; +} +@keyframes whyPulse { + 0%, 100% { transform: scale(1); opacity: 1; } + 50% { transform: scale(0.6); opacity: 0.5; } +} +@media (prefers-reduced-motion: reduce) { + .why-productmd-footer-dot { animation: none; } +} + +/* ─ Panel 03: path + meta additions ─ */ +.why-terminal-path { + color: oklch(88% 0.05 220); +} +.why-terminal-meta { + color: oklch(58% 0 0); + font-size: 0.9em; +} + +/* ─ Panel 04: waterfall vs unified surface ─ */ +.why-visual--flow { + flex-direction: column; + gap: 14px; + padding: 16px; +} +.why-flow-row { + display: flex; + flex-direction: column; + gap: 8px; + flex: 1; + min-height: 0; +} +.why-flow-label { + font-family: var(--font-mono); + font-size: 10px; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--color-ash); +} +.why-flow-row--old .why-flow-label { color: var(--color-ash); } +.why-flow-row--new .why-flow-label { color: var(--color-accent); } + +.why-flow-steps { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 6px; + opacity: 0.5; +} +.why-flow-step { + font-family: var(--font-body); + font-size: 12px; + color: var(--color-charcoal); + padding: 4px 10px; + background: var(--color-paper); + border: 1px solid var(--color-mist); + border-radius: 3px; + text-decoration: line-through; + text-decoration-color: var(--color-ash); +} +.why-flow-arrow { + color: var(--color-ash); + font-size: 12px; +} +.why-flow-new { + display: flex; + flex-direction: column; + gap: 6px; +} +.why-flow-surface { + background: var(--color-paper); + border: 1px solid var(--color-ink); + border-radius: 6px; + overflow: hidden; + box-shadow: 0 4px 20px oklch(0% 0 0 / 0.08); +} +.why-flow-surface-head { + display: flex; + align-items: center; + gap: 5px; + padding: 8px 12px; + background: var(--color-cream); + border-bottom: 1px solid var(--color-mist); +} +.why-flow-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--color-mist); +} +.why-flow-surface-title { + margin-left: 8px; + font-family: var(--font-mono); + font-size: 10px; + color: var(--color-charcoal); +} +.why-flow-surface-row { + display: flex; + align-items: center; + gap: 8px; + padding: 12px; +} +.why-flow-chip { + font-family: var(--font-mono); + font-size: 11px; + letter-spacing: 0.08em; + text-transform: uppercase; + padding: 6px 12px; + background: var(--color-ink); + color: var(--color-paper); + border-radius: 4px; +} +.why-flow-chip:nth-child(2) { background: var(--color-accent); } +.why-flow-surface-foot { + font-family: var(--font-display); + font-style: italic; + font-size: 13px; + color: var(--color-charcoal); + padding: 0 4px; +} + +/* ─ Panel 05: rich DESIGN.md tiles ─ */ +.why-visual--designmd-v2 { + flex-direction: column; + gap: 12px; + padding: 12px; + background: var(--color-cream); +} +.why-dm-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 2px; +} +.why-dm-filename { + font-family: var(--font-mono); + font-size: 11px; + font-weight: 500; + color: var(--color-ink); +} +.why-dm-badge { + font-family: var(--font-mono); + font-size: 9px; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--color-accent); + background: var(--color-accent-dim); + border: 1px solid var(--color-accent-soft); + padding: 3px 8px; + border-radius: 999px; +} +.why-dm-grid { + display: grid; + grid-template-columns: 1.1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 8px; + flex: 1; + min-height: 0; +} +.why-dm-tile { + background: var(--color-paper); + border: 1px solid var(--color-mist); + border-radius: 6px; + padding: 10px; + display: flex; + flex-direction: column; + gap: 8px; + min-width: 0; + overflow: hidden; +} +.why-dm-tile-meta { + display: flex; + justify-content: space-between; + font-family: var(--font-mono); + font-size: 9px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--color-ash); +} +.why-dm-tile-meta span:first-child { color: var(--color-ink); } + +.why-dm-tile--color { grid-row: 1 / 3; } +.why-dm-color-hero { + flex: 1; + background: var(--c); + border-radius: 4px; + min-height: 40px; +} +.why-dm-color-ramp { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 2px; + height: 16px; +} +.why-dm-color-ramp span { + border-radius: 2px; +} + +.why-dm-tile--type { + align-items: flex-start; +} +.why-dm-type-specimen { + font-family: var(--font-display); + font-style: italic; + font-size: 48px; + line-height: 0.9; + color: var(--color-ink); + flex: 1; + display: flex; + align-items: center; +} +.why-dm-type-specimen--sans { + font-family: var(--font-body); + font-style: normal; + font-weight: 400; +} +.why-dm-type-family { + font-family: var(--font-mono); + font-size: 10px; + color: var(--color-charcoal); +} + +.why-dm-tile--components { + justify-content: space-between; +} +.why-dm-comp-row { + display: flex; + gap: 6px; +} +.why-dm-comp-chip { + font-family: var(--font-body); + font-size: 10px; + font-weight: 500; + padding: 5px 10px; + background: var(--color-paper); + border: 1px solid var(--color-mist); + border-radius: 3px; + color: var(--color-ink); +} +.why-dm-comp-chip--primary { + background: var(--color-ink); + color: var(--color-paper); + border-color: var(--color-ink); +} +.why-dm-comp-input { + font-family: var(--font-body); + font-size: 11px; + padding: 6px 10px; + background: var(--color-paper); + border: 1px solid var(--color-mist); + border-radius: 4px; + color: var(--color-ash); +} + +.why-dm-foot { + font-family: var(--font-display); + font-style: italic; + font-size: 13px; + color: var(--color-charcoal); + padding: 0 2px; +} + +@media (max-width: 700px) { + .why-dm-grid { + grid-template-columns: 1fr 1fr; + } + .why-dm-tile--color { grid-row: 1 / 3; } + .why-flow-step { font-size: 11px; padding: 4px 8px; } +} diff --git a/public/index.html b/public/index.html index efa700036..c17d8d3ec 100644 --- a/public/index.html +++ b/public/index.html @@ -307,25 +307,33 @@
-
-
- Generic AI output -
-
PRO
-
Boost your workflow
-
-
-
Get Started →
+
+
+
+ PRODUCT.md + Loaded on every command
-
-
- With PRODUCT.md loaded -
- Vol. 03 -
Design with intent.
-
-
-
Read the brief →
+
+
+ Users + SREs on call, reading fast, often in the dark. +
+
+ Register + Product. Design serves the task. +
+
+ Brand voice + Calm, clinical, no hype. +
+
+ Anti-references + Purple gradients. Glassmorphism. "Boost your productivity." +
+
+
+ + Every command reads this before writing a line of code.
@@ -364,14 +372,18 @@ - /impeccable polish src/Checkout.tsx + /impeccable polish : scanning codebase
-
› Reading DESIGN.md…
-
✓ 14 color tokens loaded
-
✓ Respecting Card + Button APIs
-
✓ Matching 1.6 line-height rule
-
→ 3 proposals: tighter rhythm, clearer hierarchy, remove nested card
+
› Walking src/…
+
✓ src/styles/tokens.css  14 colors, 6 font sizes, 7 spacing steps
+
✓ tailwind.config.ts  theme.extend merged
+
✓ src/components/  34 components
+
    · Button: primary, secondary, ghost, destructive
+
    · Card: 3 variants, 8px / 16px radii
+
    · Input, Select, Dialog, Toast, Table…
+
✓ DESIGN.md  brand rules loaded
+
→ Matching your system. Not inventing one.
@@ -381,21 +393,35 @@