OutcomeDev Design System

Document the OutcomeDev Design System and Philosophy in a new file `/docs/design-system.md`. **Core Philosophy:** - **Outcome-First:** The UI is a bridge between intent and result. - **Evidence beats Vibes:** But vibes (aesthetics) build trust. The interface should feel precise, engineered, and "solid" (no layout shifts, smooth interactions). - **Frame vs. Canvas:** The app shell (sidebar, header, footer) is the "Frame" (fixed, reliable tools). The content area is the "Canvas" (fluid, scrollable outcome). **Theming Engine:** - **Technique:** Use CSS variables with `oklch()` for wide-gamut color support. - **Themes:** - *Matrix:* Green/Black high contrast (Code-centric). - *Neon:* Synthwave Pink/Blue (Creative). - *Sapphire:* Deep Blue/White (Professional/Trust). - **Implementation:** Define variables in `globals.css` under `@theme` blocks. Avoid hardcoded hex values. Use `bg-background`, `text-foreground`, `border-border` utility classes. **Micro-interactions (The "Magic"):** - **Logo Checkmark:** The OutcomeDev logo is alive. It periodically "redraws" its checkmark every 8 seconds, subtly reinforcing the concept of a "Verified Result" without needing user interaction. - **Prompt Input:** The "Embossed" look. In light/dark modes, use shadows to create depth. In new themes, use semi-transparent borders (`border-white/20`) and backdrop blur to create a "glass" effect that sits *above* the content. - **Sidebar Toggle:** When the sidebar closes, the branding doesn't disappear—it slides into the header (OutcomeDev logo appears next to the hamburger). When open, it lives in the sidebar. This ensures the brand anchor is never lost. - **Modal Swell:** Dialogs don't just appear; they scale up slightly (`scale-95` to `scale-100`) with a springy fade-in, making them feel like they are "swelling" into existence. - **Horizontal Scroll:** For wide content (like Git Diffs or Tables), use `overflow-x-auto` but hide scrollbars (`no-scrollbar` utility) where possible for a cleaner look, or style them to be minimal. - **Interchanging Text:** The "Ship [Workflow/Prototypes/Apps]" text in the Hero section cycles to show versatility. - **Fixed Anchors:** Legal/Docs links are pinned to the bottom (Footer) or top corners, providing a safety net that is always accessible. **Pitfalls & Workarounds:** - **Contrast:** `oklch()` lightness channels must be tuned per theme. A simple "invert" doesn't work. We manually adjusted `muted-foreground` for Matrix/Neon to ensure readability on blog/doc pages. - **Typography:** Markdown plugins (`prose`) often default to standard colors. We force `prose-headings:text-foreground` to respect the theme's palette. - **Mobile Safari:** The address bar shifting can break `h-screen`. We use `dvh` (dynamic viewport height) or fixed positioning strategies to ensure the "Frame" stays solid. Output this as a comprehensive design guide that a new developer could read to understand *why* things look the way they do.