- 
- 
- 
+
- 01
-
- AI Has Design Bias
-
-
+
+
-
+
Every LLM learned from the same generic templates. Without explicit guidance, they converge on the same predictable defaults.
- - -
+
+
+
-
+
+
-
-
-
-
+
@@ -160,26 +133,16 @@
- 02
+ 01
The Antidote
@@ -203,10 +166,10 @@
- 03
+ 02
The Framework
@@ -226,7 +189,7 @@
- 04
+ 03
@@ -239,7 +202,7 @@
Commands in Action
See how commands transform your designs
- 05
+ 04
@@ -335,7 +298,7 @@
See It In Action
Sample projects transformed with Impeccable commands
- 06
+ 05
@@ -438,7 +401,7 @@
Download for Your AI Harness
Same design intelligence, adapted for your workflow. Download and start using in seconds.
- 07
+ 06
diff --git a/public/js/components/framework-viz.js b/public/js/components/framework-viz.js
index 05e40c9dd..571df58f9 100644
--- a/public/js/components/framework-viz.js
+++ b/public/js/components/framework-viz.js
@@ -5,13 +5,14 @@
import { commandCategories, commandRelationships } from '../data.js';
+// Colors now reference CSS custom properties for dark mode support
const categoryColors = {
- diagnostic: { bg: '#fdf4ff', border: '#d946ef', text: '#a21caf' },
- quality: { bg: '#f0fdf4', border: '#22c55e', text: '#15803d' },
- intensity: { bg: '#fffbeb', border: '#f59e0b', text: '#b45309' },
- adaptation: { bg: '#eff6ff', border: '#3b82f6', text: '#1d4ed8' },
- enhancement: { bg: '#fdf2f8', border: '#ec4899', text: '#be185d' },
- system: { bg: '#f9fafb', border: '#6b7280', text: '#374151' }
+ diagnostic: { bg: 'var(--cat-diagnostic-bg)', border: 'var(--cat-diagnostic-border)', text: 'var(--cat-diagnostic-text)' },
+ quality: { bg: 'var(--cat-quality-bg)', border: 'var(--cat-quality-border)', text: 'var(--cat-quality-text)' },
+ intensity: { bg: 'var(--cat-intensity-bg)', border: 'var(--cat-intensity-border)', text: 'var(--cat-intensity-text)' },
+ adaptation: { bg: 'var(--cat-adaptation-bg)', border: 'var(--cat-adaptation-border)', text: 'var(--cat-adaptation-text)' },
+ enhancement: { bg: 'var(--cat-enhancement-bg)', border: 'var(--cat-enhancement-border)', text: 'var(--cat-enhancement-text)' },
+ system: { bg: 'var(--cat-system-bg)', border: 'var(--cat-system-border)', text: 'var(--cat-system-text)' }
};
const categoryLabels = {
diff --git a/public/js/utils/scroll.js b/public/js/utils/scroll.js
index c1afd8082..4f31c06bd 100644
--- a/public/js/utils/scroll.js
+++ b/public/js/utils/scroll.js
@@ -1,69 +1,17 @@
-import Lenis from "lenis";
-
-// Check if user prefers reduced motion
-const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-export function initSmoothScroll() {
- // Skip smooth scroll entirely if user prefers reduced motion
- if (prefersReducedMotion) {
- // Still handle anchor links but with instant scroll
- document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
- anchor.addEventListener("click", (e) => {
- e.preventDefault();
- const target = document.querySelector(anchor.getAttribute("href"));
- if (target) {
- target.scrollIntoView({ behavior: 'auto', block: 'start' });
- }
- });
- });
- return null;
- }
-
- const lenis = new Lenis({
- duration: 1.2,
- easing: (t) => Math.min(1, 1.001 - 2 ** (-10 * t)),
- orientation: "vertical",
- gestureOrientation: "vertical",
- smoothWheel: true,
- wheelMultiplier: 1,
- touchMultiplier: 2,
- });
-
- function raf(time) {
- lenis.raf(time);
- requestAnimationFrame(raf);
- }
-
- requestAnimationFrame(raf);
-
- // Handle anchor links
+// Instant anchor scroll - no smooth scrolling for better UX on long pages
+export function initAnchorScroll() {
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener("click", (e) => {
e.preventDefault();
const target = document.querySelector(anchor.getAttribute("href"));
if (target) {
- lenis.scrollTo(target, { offset: -40 });
+ // Instant jump with small offset for visual breathing room
+ const offset = 40;
+ const targetPosition = target.getBoundingClientRect().top + window.scrollY - offset;
+ window.scrollTo({ top: targetPosition, behavior: 'auto' });
}
});
});
-
- return lenis;
-}
-
-export function initScrollIndicator() {
- const indicator = document.querySelector(".hero-scroll-indicator");
- if (!indicator) return;
-
- function update() {
- if (window.scrollY > 20) {
- indicator.classList.add("hidden");
- } else {
- indicator.classList.remove("hidden");
- }
- }
-
- window.addEventListener("scroll", update, { passive: true });
- update();
}
export function initHashTracking() {
@@ -109,12 +57,14 @@ export function initHashTracking() {
}
}, { passive: true });
- // Handle initial hash on page load
+ // Handle initial hash on page load - instant jump
if (window.location.hash) {
const target = document.querySelector(window.location.hash);
if (target) {
setTimeout(() => {
- target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ const offset = 40;
+ const targetPosition = target.getBoundingClientRect().top + window.scrollY - offset;
+ window.scrollTo({ top: targetPosition, behavior: 'auto' });
}, 100);
}
}
diff --git a/public/js/utils/theme.js b/public/js/utils/theme.js
new file mode 100644
index 000000000..6209dd1a8
--- /dev/null
+++ b/public/js/utils/theme.js
@@ -0,0 +1,56 @@
+// Theme toggle - supports light, dark, and system preference
+
+const STORAGE_KEY = 'impeccable-theme';
+
+function getStoredTheme() {
+ return localStorage.getItem(STORAGE_KEY);
+}
+
+function setStoredTheme(theme) {
+ localStorage.setItem(STORAGE_KEY, theme);
+}
+
+function applyTheme(theme) {
+ const html = document.documentElement;
+
+ // Remove both classes first
+ html.classList.remove('light', 'dark');
+
+ if (theme === 'light') {
+ html.classList.add('light');
+ } else if (theme === 'dark') {
+ html.classList.add('dark');
+ }
+ // 'system' = no class, falls back to media query
+
+ // Update active state on buttons
+ document.querySelectorAll('.theme-toggle-btn').forEach(btn => {
+ btn.classList.toggle('active', btn.dataset.theme === theme);
+ });
+}
+
+export function initThemeToggle() {
+ const toggle = document.querySelector('.theme-toggle');
+ if (!toggle) return;
+
+ // Get stored theme or default to system
+ const storedTheme = getStoredTheme() || 'system';
+ applyTheme(storedTheme);
+
+ // Handle button clicks
+ toggle.addEventListener('click', (e) => {
+ const btn = e.target.closest('.theme-toggle-btn');
+ if (!btn) return;
+
+ const theme = btn.dataset.theme;
+ setStoredTheme(theme);
+ applyTheme(theme);
+ });
+
+ // Listen for system preference changes (only matters when in 'system' mode)
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+ if (getStoredTheme() === 'system' || !getStoredTheme()) {
+ applyTheme('system');
+ }
+ });
+}