diff --git a/design.md b/design.md
new file mode 100644
index 0000000..798bef5
--- /dev/null
+++ b/design.md
@@ -0,0 +1,323 @@
+# Design System Inspired by VoltAgent
+
+## 1. Visual Theme & Atmosphere
+
+VoltAgent's interface is a deep-space command terminal for the AI age — a developer-facing darkness built on near-pure-black surfaces (`#050507`) where the only interruption is the electric pulse of emerald green energy. The entire experience evokes the feeling of staring into a high-powered IDE at 2am: dark, focused, and alive with purpose. This is not a friendly SaaS landing page — it's an engineering platform that announces itself through code snippets, architectural diagrams, and raw technical confidence.
+
+The green accent (`#00d992`) is used with surgical precision — it glows from headlines, borders, and interactive elements like a circuit board carrying a signal. Against the carbon-black canvas, this green reads as "power on" — a deliberate visual metaphor for an AI agent engineering platform. The supporting palette is built entirely from warm-neutral grays (`#3d3a39`, `#8b949e`, `#b8b3b0`) that soften the darkness without introducing color noise, creating a cockpit-like warmth that pure blue-grays would lack.
+
+Typography leans on the system font stack for headings — achieving maximum rendering speed and native-feeling authority — while Inter carries the body and UI text with geometric precision. Code blocks use SFMono-Regular, the same font developers see in their terminals, reinforcing the tool's credibility at every scroll.
+
+**Key Characteristics:**
+- Carbon-black canvas (`#050507`) with warm-gray border containment (`#3d3a39`) — not cold or sterile
+- Single-accent identity: Emerald Signal Green (`#00d992`) as the sole chromatic energy source
+- Dual-typography system: system-ui for authoritative headings, Inter for precise UI/body text, SFMono for code credibility
+- Ultra-tight heading line-heights (1.0–1.11) creating dense, compressed power blocks
+- Warm neutral palette (`#3d3a39`, `#8b949e`, `#b8b3b0`) that prevents the dark theme from feeling clinical
+- Developer-terminal aesthetic where code snippets ARE the hero content
+- Green glow effects (`drop-shadow`, border accents) that make UI elements feel electrically alive
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Emerald Signal Green** (`#00d992`): The core brand energy — used for accent borders, glow effects, and the highest-signal interactive moments. This is the "power-on" indicator of the entire interface.
+- **VoltAgent Mint** (`#2fd6a1`): The button-text variant of the brand green — slightly warmer and more readable than pure Signal Green, used specifically for CTA text on dark surfaces.
+- **Tailwind Emerald** (`#10b981`): The ecosystem-standard green used at low opacity (30%) for subtle background tints and link defaults. Bridges VoltAgent's custom palette with Tailwind's utility classes.
+
+### Secondary & Accent
+- **Soft Purple** (`#818cf8`): A cool indigo-violet used sparingly for secondary categorization, code syntax highlights, and visual variety without competing with green.
+- **Cobalt Primary** (`#306cce`): Docusaurus primary dark — used in documentation contexts for links and interactive focus states.
+- **Deep Cobalt** (`#2554a0`): The darkest primary shade, reserved for pressed/active states in documentation UI.
+- **Ring Blue** (`#3b82f6`): Tailwind's ring color at 50% opacity — visible only during keyboard focus for accessibility compliance.
+
+### Surface & Background
+- **Abyss Black** (`#050507`): The landing page canvas — a near-pure black with the faintest warm undertone, darker than most "dark themes" for maximum contrast with green accents.
+- **Carbon Surface** (`#101010`): The primary card and button background — one shade lighter than Abyss, creating a barely perceptible elevation layer. Used across all contained surfaces.
+- **Warm Charcoal Border** (`#3d3a39`): The signature containment color — not a cold gray but a warm, almost brownish dark tone that prevents borders from feeling harsh against the black canvas.
+
+### Neutrals & Text
+- **Snow White** (`#f2f2f2`): The primary text color on dark surfaces — not pure white (`#ffffff`) but a softened, eye-friendly off-white. The most-used color on the site (1008 instances).
+- **Pure White** (`#ffffff`): Reserved for the highest-emphasis moments — ghost button text and maximum-contrast headings. Used at low opacity (5%) for subtle overlay effects.
+- **Warm Parchment** (`#b8b3b0`): Secondary body text — a warm light gray with a slight pinkish undertone that reads as "paper" against the dark canvas.
+- **Steel Slate** (`#8b949e`): Tertiary text, metadata, timestamps, and de-emphasized content. A cool blue-gray that provides clear hierarchy below Warm Parchment.
+- **Fog Gray** (`#bdbdbd`): Footer links and supporting navigation text — brightens on hover to Pure White.
+- **Mist Gray** (`#dcdcdc`): Slightly brighter than Fog, used for secondary link text that transitions to bright green on hover.
+- **Near White** (`#eeeeee`): Highest-contrast secondary text, one step below Snow White.
+
+### Semantic & Accent
+- **Success Emerald** (`#008b00`): Deep green for success states and positive confirmations in documentation contexts.
+- **Success Light** (`#80d280`): Soft pastel green for success backgrounds and subtle positive indicators.
+- **Warning Amber** (`#ffba00`): Bright amber for warning alerts and caution states.
+- **Warning Pale** (`#ffdd80`): Softened amber for warning background fills.
+- **Danger Coral** (`#fb565b`): Vivid red for error states and destructive action warnings.
+- **Danger Rose** (`#fd9c9f`): Softened coral-pink for error backgrounds.
+- **Info Teal** (`#4cb3d4`): Cool teal-blue for informational callouts and tip admonitions.
+- **Dashed Border Slate** (`#4f5d75` at 40%): A muted blue-gray used exclusively for decorative dashed borders in workflow diagrams.
+
+### Gradient System
+- **Green Signal Glow**: `drop-shadow(0 0 2px #00d992)` animating to `drop-shadow(0 0 8px #00d992)` — creates a pulsing "electric charge" effect on the VoltAgent bolt logo and interactive elements. The glow expands and contracts like a heartbeat.
+- **Warm Ambient Haze**: `rgba(92, 88, 85, 0.2) 0px 0px 15px` — a warm-toned diffused shadow that creates a soft atmospheric glow around elevated cards, visible at the edges without sharp boundaries.
+- **Deep Dramatic Elevation**: `rgba(0, 0, 0, 0.7) 0px 20px 60px` with `rgba(148, 163, 184, 0.1) 0px 0px 0px 1px inset` — a heavy, dramatic downward shadow paired with a faint inset slate ring for the most prominent floating elements.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary (Headings)**: `system-ui`, with fallbacks: `-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol`
+- **Secondary (Body/UI)**: `Inter`, with fallbacks inheriting from system-ui stack. OpenType features: `"calt", "rlig"` (contextual alternates and required ligatures)
+- **Monospace (Code)**: `SFMono-Regular`, with fallbacks: `Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | system-ui | 60px (3.75rem) | 400 | 1.00 (tight) | -0.65px | Maximum impact, compressed blocks |
+| Section Heading | system-ui | 36px (2.25rem) | 400 | 1.11 (tight) | -0.9px | Tightest letter-spacing in the system |
+| Sub-heading | system-ui | 24px (1.50rem) | 700 | 1.33 | -0.6px | Bold weight for emphasis at this size |
+| Sub-heading Light | system-ui / Inter | 24px (1.50rem) | 300–400 | 1.33 | -0.6px | Light weight variant for softer hierarchy |
+| Overline | system-ui | 20px (1.25rem) | 600 | 1.40 | 0.5px | Uppercase transform, positive letter-spacing |
+| Feature Title | Inter | 20px (1.25rem) | 500–600 | 1.40 | normal | Card headings, feature names |
+| Overline Small | Inter | 18px (1.13rem) | 600 | 1.56 | 0.45px | Uppercase section labels |
+| Body / Button | Inter | 16px (1.00rem) | 400–600 | 1.50–1.65 | normal | Standard text, nav links, buttons |
+| Nav Link | Inter | 14.45px (0.90rem) | 500 | 1.65 | normal | Navigation-specific sizing |
+| Caption / Label | Inter | 14px (0.88rem) | 400–600 | 1.43–1.65 | normal | Descriptions, metadata, badge text |
+| Tag / Overline Tiny | system-ui | 14px (0.88rem) | 600 | 1.43 | 2.52px | Widest letter-spacing — reserved for uppercase tags |
+| Micro | Inter | 12px (0.75rem) | 400–500 | 1.33 | normal | Smallest sans-serif text |
+| Code Body | SFMono-Regular | 13–14px | 400–686 | 1.23–1.43 | normal | Inline code, terminal output, variable weight for syntax |
+| Code Small | SFMono-Regular | 11–12px | 400 | 1.33–1.45 | normal | Tiny code references, line numbers |
+| Code Button | monospace | 13px (0.81rem) | 700 | 1.65 | normal | Copy-to-clipboard button labels |
+
+### Principles
+- **System-native authority**: Display headings use system-ui rather than a custom web font — this means the largest text renders instantly (no FOIT/FOUT) and inherits the operating system's native personality. On macOS it's SF Pro, on Windows it's Segoe UI. The design accepts this variability as a feature, not a bug.
+- **Tight compression creates density**: Hero line-heights are extremely compressed (1.0) with negative letter-spacing (-0.65px to -0.9px), creating text blocks that feel like dense technical specifications rather than airy marketing copy.
+- **Weight gradient, not weight contrast**: The system uses a gentle 300→400→500→600→700 weight progression. Bold (700) is reserved for sub-headings and code-button emphasis. Most body text lives at 400–500, creating subtle rather than dramatic hierarchy.
+- **Uppercase is earned and wide**: When uppercase appears, it's always paired with generous letter-spacing (0.45px–2.52px), transforming dense words into spaced-out overline labels. This treatment is never applied to headings.
+- **OpenType by default**: Both system-ui and Inter enable `"calt"` and `"rlig"` features, ensuring contextual character adjustments and ligature rendering throughout.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Ghost / Outline (Standard)**
+- Background: transparent
+- Text: Pure White (`#ffffff`)
+- Padding: comfortable (12px 16px)
+- Border: thin solid Warm Charcoal (`1px solid #3d3a39`)
+- Radius: comfortably rounded (6px)
+- Hover: background darkens to `rgba(0, 0, 0, 0.2)`, opacity drops to 0.4
+- Outline: subtle green tint (`rgba(33, 196, 93, 0.5)`)
+- The default interactive element — unassuming but clearly clickable
+
+**Primary Green CTA**
+- Background: Carbon Surface (`#101010`)
+- Text: VoltAgent Mint (`#2fd6a1`)
+- Padding: comfortable (12px 16px)
+- Border: none visible (outline-based focus indicator)
+- Outline: VoltAgent Mint (`rgb(47, 214, 161)`)
+- Hover: same darkening behavior as Ghost
+- The "powered on" button — green text on dark surface reads as an active terminal command
+
+**Tertiary / Emphasized Container Button**
+- Background: Carbon Surface (`#101010`)
+- Text: Snow White (`#f2f2f2`)
+- Padding: generous (20px all sides)
+- Border: thick solid Warm Charcoal (`3px solid #3d3a39`)
+- Radius: comfortably rounded (8px)
+- A card-like button treatment for larger interactive surfaces (code copy blocks, feature CTAs)
+
+### Cards & Containers
+- Background: Carbon Surface (`#101010`) — one shade lighter than the page canvas
+- Border: `1px solid #3d3a39` (Warm Charcoal) for standard containment; `2px solid #00d992` for highlighted/active cards
+- Radius: comfortably rounded (8px) for content cards; subtly rounded (4–6px) for smaller inline containers
+- Shadow Level 1: Warm Ambient Haze (`rgba(92, 88, 85, 0.2) 0px 0px 15px`) for standard elevation
+- Shadow Level 2: Deep Dramatic (`rgba(0, 0, 0, 0.7) 0px 20px 60px` + `rgba(148, 163, 184, 0.1) 0px 0px 0px 1px inset`) for hero/feature showcase cards
+- Hover behavior: likely border color shift toward green accent or subtle opacity increase
+- Dashed variant: `1px dashed rgba(79, 93, 117, 0.4)` for workflow/diagram containers — visually distinct from solid-border content cards
+
+### Inputs & Forms
+- No explicit input token data extracted — the site is landing-page focused with minimal form UI
+- The npm install command (`npm create voltagent-app@latest`) is presented as a code block rather than an input field
+- Inferred style: Carbon Surface background, Warm Charcoal border, VoltAgent Mint focus ring, Snow White text
+
+### Navigation
+- Sticky top nav bar on Abyss Black canvas
+- Logo: VoltAgent bolt icon with animated green glow (`drop-shadow` cycling 2px–8px)
+- Nav structure: Logo → Product dropdown → Use Cases dropdown → Resources dropdown → GitHub stars badge → Docs CTA
+- Link text: Snow White (`#f2f2f2`) at 14–16px Inter, weight 500
+- Hover: links transition to green variants (`#00c182` or `#00ffaa`)
+- GitHub badge: social proof element integrated directly into nav
+- Mobile: collapses to hamburger menu, single-column vertical layout
+
+### Image Treatment
+- Dark-themed product screenshots and architectural diagrams dominate
+- Code blocks are treated as primary visual content — syntax-highlighted with SFMono-Regular
+- Agent workflow visualizations appear as interactive node graphs with green connection lines
+- Decorative dot-pattern backgrounds appear behind hero sections
+- Full-bleed within card containers, respecting 8px radius rounding
+
+### Distinctive Components
+
+**npm Install Command Block**
+- A prominent code snippet (`npm create voltagent-app@latest`) styled as a copyable command
+- SFMono-Regular on Carbon Surface with a copy-to-clipboard button
+- Functions as the primary CTA — "install first, read later" developer psychology
+
+**Company Logo Marquee**
+- Horizontal scrolling strip of developer/company logos
+- Infinite animation (`scrollLeft`/`scrollRight`, 25–80s durations)
+- Pauses on hover and for users with reduced-motion preferences
+- Demonstrates ecosystem adoption without cluttering the layout
+
+**Feature Section Cards**
+- Large cards combining code examples with descriptive text
+- Left: code snippet with syntax highlighting; Right: feature description
+- Green accent border (`2px solid #00d992`) on highlighted/active features
+- Internal padding: generous (24–32px estimated)
+
+**Agent Flow Diagrams**
+- Interactive node-graph visualizations showing agent coordination
+- Connection lines use VoltAgent green variants
+- Nodes styled as mini-cards within the Warm Charcoal border system
+
+**Community / GitHub Section**
+- Large GitHub icon as the visual anchor
+- Star count and contributor metrics prominently displayed
+- Warm social proof: Discord, X, Reddit, LinkedIn, YouTube links in footer
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 2px, 4px, 5px, 6px, 6.4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 64px
+- Button padding: 12px 16px (standard), 20px (container-button)
+- Card internal padding: approximately 24–32px
+- Section vertical spacing: generous (estimated 64–96px between major sections)
+- Component gap: 16–24px between sibling cards/elements
+
+### Grid & Container
+- Max container width: approximately 1280–1440px, centered
+- Hero: centered single-column with maximum breathing room
+- Feature sections: alternating asymmetric layouts (code left / text right, then reversed)
+- Logo marquee: full-width horizontal scroll, breaking the container constraint
+- Card grids: 2–3 column for feature showcases
+- Integration grid: responsive multi-column for partner/integration icons
+
+### Whitespace Philosophy
+- **Cinematic breathing room between sections**: Massive vertical gaps create a "scroll-through-chapters" experience — each section feels like a new scene.
+- **Dense within components**: Cards and code blocks are internally compact, with tight line-heights and controlled padding. Information is concentrated, not spread thin.
+- **Border-defined separation**: Rather than relying solely on whitespace, VoltAgent uses the Warm Charcoal border system (`#3d3a39`) to delineate content zones. The border IS the whitespace signal.
+- **Hero-first hierarchy**: The top of the page commands the most space — the "AI Agent Engineering Platform" headline and npm command get maximum vertical runway before the first content section appears.
+
+### Border Radius Scale
+- Nearly squared (4px): Small inline elements, SVG containers, code spans — the sharpest treatment, conveying technical precision
+- Subtly rounded (6px): Buttons, links, clipboard actions — the workhorse radius for interactive elements
+- Code-specific (6.4px): Code blocks, `pre` elements, clipboard copy targets — a deliberate micro-distinction from standard 6px
+- Comfortably rounded (8px): Content cards, feature containers, emphasized buttons — the standard containment radius
+- Pill-shaped (9999px): Tags, badges, status indicators, pill-shaped navigation elements — the roundest treatment for small categorical labels
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Page background (`#050507`), inline text |
+| Contained (Level 1) | `1px solid #3d3a39`, no shadow | Standard cards, nav bar, code blocks |
+| Emphasized (Level 2) | `3px solid #3d3a39`, no shadow | Large interactive buttons, emphasized containers |
+| Accent (Level 3) | `2px solid #00d992`, no shadow | Active/highlighted feature cards, selected states |
+| Ambient Glow (Level 4) | `rgba(92, 88, 85, 0.2) 0px 0px 15px` | Elevated cards, hover states, soft atmospheric lift |
+| Dramatic Float (Level 5) | `rgba(0, 0, 0, 0.7) 0px 20px 60px` + `rgba(148, 163, 184, 0.1) 1px inset` | Hero feature showcase, modals, maximum-elevation content |
+
+**Shadow Philosophy**: VoltAgent communicates depth primarily through **border weight and color**, not shadows. The standard `1px solid #3d3a39` border IS the elevation — adding a `3px` border weight or switching to green (`#00d992`) communicates importance more than adding shadow does. When shadows do appear, they're either warm and diffused (Level 4) or cinematic and dramatic (Level 5) — never medium or generic.
+
+### Decorative Depth
+- **Green Signal Glow**: The VoltAgent bolt logo pulses with a `drop-shadow` animation cycling between 2px and 8px blur radius in Emerald Signal Green. This is the most distinctive decorative element — it makes the logo feel "powered on."
+- **Warm Charcoal Containment Lines**: The warm tone of `#3d3a39` borders creates a subtle visual warmth against the cool black, as if the cards are faintly heated from within.
+- **Dashed Workflow Lines**: `1px dashed rgba(79, 93, 117, 0.4)` creates a blueprint-like aesthetic for architecture diagrams, visually distinct from solid content borders.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Abyss Black (`#050507`) as the landing page background and Carbon Surface (`#101010`) for all contained elements — the two-shade dark system is essential
+- Reserve Emerald Signal Green (`#00d992`) exclusively for high-signal moments: active borders, glow effects, and the most important interactive accents
+- Use VoltAgent Mint (`#2fd6a1`) for button text on dark surfaces — it's more readable than pure Signal Green
+- Keep heading line-heights compressed (1.0–1.11) with negative letter-spacing for dense, authoritative text blocks
+- Use the warm gray palette (`#3d3a39`, `#8b949e`, `#b8b3b0`) for borders and secondary text — warmth prevents the dark theme from feeling sterile
+- Present code snippets as primary content — they're hero elements, not supporting illustrations
+- Use border weight (1px → 2px → 3px) and color shifts (`#3d3a39` → `#00d992`) to communicate depth and importance, rather than relying on shadows
+- Pair system-ui for headings with Inter for body text — the speed/authority of native fonts combined with the precision of a geometric sans
+- Use SFMono-Regular for all code content — it's the developer credibility signal
+- Apply `"calt"` and `"rlig"` OpenType features across all text
+
+### Don't
+- Don't use bright or light backgrounds as primary surfaces — the entire identity lives on near-black
+- Don't introduce warm colors (orange, red, yellow) as decorative accents — the palette is strictly green + warm neutrals on black. Warm colors are reserved for semantic states (warning, error) only
+- Don't use Emerald Signal Green (`#00d992`) on large surfaces or as background fills — it's an accent, never a surface
+- Don't increase heading line-heights beyond 1.33 — the compressed density is core to the engineering-platform identity
+- Don't use heavy shadows generously — depth comes from border treatment, not box-shadow. Shadows are reserved for Level 4–5 elevation only
+- Don't use pure white (`#ffffff`) as default body text — Snow White (`#f2f2f2`) is the standard. Pure white is reserved for maximum-emphasis headings and button text
+- Don't mix in serif or decorative fonts — the entire system is geometric sans + monospace
+- Don't use border-radius larger than 8px on content cards — 9999px (pill) is only for small tags and badges
+- Don't skip the warm-gray border system — cards without `#3d3a39` borders lose their containment and float ambiguously on the dark canvas
+- Don't animate aggressively — animations are slow and subtle (25–100s durations for marquee, gentle glow pulses). Fast motion contradicts the "engineering precision" atmosphere
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small Mobile | <420px | Minimum layout, stacked everything, reduced hero text to ~24px |
+| Mobile | 420–767px | Single column, hamburger nav, full-width cards, hero text ~36px |
+| Tablet | 768–1024px | 2-column grids begin, condensed nav, medium hero text |
+| Desktop | 1025–1440px | Full multi-column layout, expanded nav with dropdowns, large hero (60px) |
+| Large Desktop | >1440px | Max-width container centered (est. 1280–1440px), generous horizontal margins |
+
+*23 breakpoints detected in total, ranging from 360px to 1992px — indicating a fluid, heavily responsive grid system rather than fixed breakpoint snapping.*
+
+### Touch Targets
+- Buttons use comfortable padding (12px 16px minimum) ensuring adequate touch area
+- Navigation links spaced with sufficient gap for thumb navigation
+- Interactive card surfaces are large enough to serve as full touch targets
+- Minimum recommended touch target: 44x44px
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav with dropdowns collapses to hamburger menu on mobile
+- **Feature grids**: 3-column → 2-column → single-column vertical stacking
+- **Hero text**: 60px → 36px → 24px progressive scaling with maintained compression ratios
+- **Logo marquee**: Adjusts scroll speed and item sizing; maintains infinite loop
+- **Code blocks**: Horizontal scroll on smaller viewports rather than wrapping — preserving code readability
+- **Section padding**: Reduces proportionally but maintains generous vertical rhythm between chapters
+- **Cards**: Stack vertically on mobile with full-width treatment and maintained internal padding
+
+### Image Behavior
+- Dark-themed screenshots and diagrams scale proportionally within containers
+- Agent flow diagrams simplify or scroll horizontally on narrow viewports
+- Dot-pattern decorative backgrounds scale with viewport
+- No visible art direction changes between breakpoints — same crops, proportional scaling
+- Lazy loading for below-fold images (Docusaurus default behavior)
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand Accent: "Emerald Signal Green (#00d992)"
+- Button Text: "VoltAgent Mint (#2fd6a1)"
+- Page Background: "Abyss Black (#050507)"
+- Card Surface: "Carbon Surface (#101010)"
+- Border / Containment: "Warm Charcoal (#3d3a39)"
+- Primary Text: "Snow White (#f2f2f2)"
+- Secondary Text: "Warm Parchment (#b8b3b0)"
+- Tertiary Text: "Steel Slate (#8b949e)"
+
+### Example Component Prompts
+- "Create a feature card on Carbon Surface (#101010) with a 1px solid Warm Charcoal (#3d3a39) border, comfortably rounded corners (8px). Use Snow White (#f2f2f2) for the title in system-ui at 24px weight 700, and Warm Parchment (#b8b3b0) for the description in Inter at 16px. Add a subtle Warm Ambient shadow (rgba(92, 88, 85, 0.2) 0px 0px 15px)."
+- "Design a ghost button with transparent background, Snow White (#f2f2f2) text in Inter at 16px, a 1px solid Warm Charcoal (#3d3a39) border, and subtly rounded corners (6px). Padding: 12px vertical, 16px horizontal. On hover, background shifts to rgba(0, 0, 0, 0.2)."
+- "Build a hero section on Abyss Black (#050507) with a massive heading at 60px system-ui, line-height 1.0, letter-spacing -0.65px. The word 'Platform' should be colored in Emerald Signal Green (#00d992). Below the heading, place a code block showing 'npm create voltagent-app@latest' in SFMono-Regular at 14px on Carbon Surface (#101010) with a copy button."
+- "Create a highlighted feature card using a 2px solid Emerald Signal Green (#00d992) border instead of the standard Warm Charcoal. Keep Carbon Surface background, comfortably rounded corners (8px), and include a code snippet on the left with feature description text on the right."
+- "Design a navigation bar on Abyss Black (#050507) with the VoltAgent logo (bolt icon with animated green glow) on the left, nav links in Inter at 14px weight 500 in Snow White, and a green CTA button (Carbon Surface bg, VoltAgent Mint text) on the right. Add a 1px solid Warm Charcoal bottom border."
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time
+2. Reference specific color names and hex codes — "use Warm Parchment (#b8b3b0)" not "make it lighter"
+3. Use border treatment to communicate elevation: "change the border to 2px solid Emerald Signal Green (#00d992)" for emphasis
+4. Describe the desired "feel" alongside measurements — "compressed and authoritative heading at 36px with line-height 1.11 and -0.9px letter-spacing"
+5. For glow effects, specify "Emerald Signal Green (#00d992) as a drop-shadow with 2–8px blur radius"
+6. Always specify which font — system-ui for headings, Inter for body/UI, SFMono-Regular for code
+7. Keep animations slow and subtle — marquee scrolls at 25–80s, glow pulses gently
diff --git a/src/index.css b/src/index.css
index 8d94fed..7158c7c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,133 +1,119 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
 
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --background: oklch(0.97 0.012 205 / 0.58);
-  --foreground: oklch(0.22 0.03 230);
-  --card: oklch(0.99 0.008 200 / 0.48);
-  --card-foreground: oklch(0.22 0.03 230);
-  --popover: oklch(0.98 0.01 210 / 0.62);
-  --popover-foreground: oklch(0.22 0.03 230);
-  --primary: oklch(0.68 0.14 195);
-  --primary-foreground: oklch(0.99 0.005 200);
-  --secondary: oklch(0.93 0.025 215 / 0.44);
-  --secondary-foreground: oklch(0.28 0.03 225);
-  --muted: oklch(0.94 0.018 210 / 0.36);
-  --muted-foreground: oklch(0.50 0.025 225);
-  --accent: oklch(0.90 0.05 195 / 0.50);
-  --accent-foreground: oklch(0.22 0.03 230);
-  --destructive: oklch(0.60 0.24 18);
-  --destructive-foreground: oklch(0.99 0 0);
-  --border: oklch(0.94 0.015 210 / 0.50);
-  --input: oklch(0.99 0.008 205 / 0.28);
-  --ring: oklch(0.68 0.14 195);
-  --chart-1: oklch(0.68 0.14 195);
-  --chart-2: oklch(0.72 0.11 162);
-  --chart-3: oklch(0.66 0.12 270);
-  --chart-4: oklch(0.78 0.13 90);
-  --chart-5: oklch(0.68 0.15 30);
-  --sidebar: oklch(0.96 0.015 215 / 0.72);
-  --sidebar-foreground: oklch(0.22 0.03 230);
-  --sidebar-primary: oklch(0.68 0.14 195);
-  --sidebar-primary-foreground: oklch(0.99 0.005 200);
-  --sidebar-accent: oklch(0.93 0.03 210 / 0.48);
-  --sidebar-accent-foreground: oklch(0.22 0.03 230);
-  --sidebar-border: oklch(0.94 0.015 210 / 0.55);
-  --sidebar-ring: oklch(0.68 0.14 195);
-  --font-sans: Lato, sans-serif;
-  --font-serif: Merriweather, Geist, Geist Fallback, ui-serif, Georgia, Cambria, ;
-  --font-mono: Roboto Mono, Geist Mono, Geist Mono Fallback, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, ;
-  --radius: 1rem;
+  --background: #050507;
+  --foreground: #f2f2f2;
+  --card: rgb(16 16 16 / 0.72);
+  --card-foreground: #f2f2f2;
+  --popover: rgb(16 16 16 / 0.9);
+  --popover-foreground: #f2f2f2;
+  --primary: #00d992;
+  --primary-foreground: #050507;
+  --secondary: rgb(61 58 57 / 0.72);
+  --secondary-foreground: #f2f2f2;
+  --muted: rgb(61 58 57 / 0.55);
+  --muted-foreground: #b8b3b0;
+  --accent: rgb(0 217 146 / 0.14);
+  --accent-foreground: #2fd6a1;
+  --destructive: #fb565b;
+  --destructive-foreground: #ffffff;
+  --border: rgb(61 58 57 / 0.9);
+  --input: rgb(16 16 16 / 0.86);
+  --ring: rgb(59 130 246 / 0.5);
+  --chart-1: #00d992;
+  --chart-2: #2fd6a1;
+  --chart-3: #818cf8;
+  --chart-4: #4cb3d4;
+  --chart-5: #ffba00;
+  --sidebar: rgb(8 8 10 / 0.84);
+  --sidebar-foreground: #f2f2f2;
+  --sidebar-primary: #00d992;
+  --sidebar-primary-foreground: #050507;
+  --sidebar-accent: rgb(16 16 16 / 0.78);
+  --sidebar-accent-foreground: #f2f2f2;
+  --sidebar-border: rgb(61 58 57 / 0.9);
+  --sidebar-ring: rgb(59 130 246 / 0.5);
+  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Helvetica, Arial, sans-serif;
+  --radius: 0.5rem;
   --shadow-x: 0px;
-  --shadow-y: 16px;
-  --shadow-blur: 48px;
-  --shadow-spread: -20px;
-  --shadow-opacity: 0.18;
-  --shadow-color: oklch(0.25 0.04 220);
-  --shadow-2xs: 0 6px 16px -12px oklch(0.25 0.04 220 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.52), inset 0 -0.5px 0 rgb(255 255 255 / 0.10);
-  --shadow-xs: 0 8px 20px -14px oklch(0.25 0.04 220 / 0.16), inset 0 1px 0 rgb(255 255 255 / 0.48), inset 0 -0.5px 0 rgb(255 255 255 / 0.08);
-  --shadow-sm: 0 12px 28px -16px oklch(0.25 0.04 220 / 0.18), inset 0 1.5px 0 rgb(255 255 255 / 0.46), inset 0 -0.5px 0 rgb(255 255 255 / 0.06);
-  --shadow: 0 16px 36px -18px oklch(0.25 0.04 220 / 0.20), inset 0 1.5px 0 rgb(255 255 255 / 0.42), inset 0 -1px 0 rgb(255 255 255 / 0.05);
-  --shadow-md: 0 20px 48px -22px oklch(0.25 0.04 220 / 0.22), inset 0 1.5px 0 rgb(255 255 255 / 0.38), inset 0 -1px 0 rgb(255 255 255 / 0.04);
-  --shadow-lg: 0 28px 64px -26px oklch(0.25 0.04 220 / 0.26), inset 0 2px 0 rgb(255 255 255 / 0.32), inset 0 -1px 0 rgb(255 255 255 / 0.03);
-  --shadow-xl: 0 36px 80px -30px oklch(0.25 0.04 220 / 0.30), inset 0 2px 0 rgb(255 255 255 / 0.26), inset 0 -1px 0 rgb(255 255 255 / 0.02);
-  --shadow-2xl: 0 44px 100px -34px oklch(0.25 0.04 220 / 0.36), inset 0 2px 0 rgb(255 255 255 / 0.20);
+  --shadow-y: 20px;
+  --shadow-blur: 60px;
+  --shadow-spread: -24px;
+  --shadow-opacity: 0.34;
+  --shadow-color: rgb(0 0 0 / 0.7);
+  --shadow-2xs: 0 8px 18px -14px rgb(0 0 0 / 0.32), inset 0 1px 0 rgb(255 255 255 / 0.08);
+  --shadow-xs: 0 10px 24px -16px rgb(0 0 0 / 0.36), inset 0 1px 0 rgb(255 255 255 / 0.08);
+  --shadow-sm: 0 14px 32px -18px rgb(0 0 0 / 0.42), inset 0 1px 0 rgb(255 255 255 / 0.07);
+  --shadow: 0 20px 40px -20px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.06);
+  --shadow-md: 0 20px 60px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(148 163 184 / 0.1);
+  --shadow-lg: 0 24px 72px rgb(0 0 0 / 0.76), inset 0 0 0 1px rgb(148 163 184 / 0.1);
+  --shadow-xl: 0 30px 84px rgb(0 0 0 / 0.8), inset 0 0 0 1px rgb(148 163 184 / 0.12);
+  --shadow-2xl: 0 36px 104px rgb(0 0 0 / 0.82), inset 0 0 0 1px rgb(148 163 184 / 0.14);
   --tracking-normal: 0em;
   --spacing: 0.25rem;
   --glass-blur: 24px;
-  --glass-saturate: 180%;
-  --glass-stroke: rgb(255 255 255 / 0.52);
-  --glass-highlight: linear-gradient(168deg, rgb(255 255 255 / 0.38) 0%, rgb(255 255 255 / 0.12) 40%, rgb(255 255 255 / 0.04) 100%);
-  --glass-page-base: linear-gradient(135deg, oklch(0.97 0.015 220) 0%, oklch(0.94 0.03 200) 35%, oklch(0.92 0.04 185) 60%, oklch(0.95 0.025 240) 100%);
-  --glass-glow-1: oklch(0.82 0.13 195 / 0.38);
-  --glass-glow-2: oklch(0.78 0.14 165 / 0.26);
-  --glass-glow-3: oklch(0.84 0.10 270 / 0.20);
-  --glass-glow-4: oklch(0.88 0.08 140 / 0.14);
+  --glass-saturate: 155%;
+  --glass-stroke: rgb(255 255 255 / 0.08);
+  --glass-highlight: linear-gradient(168deg, rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0.04) 38%, rgb(255 255 255 / 0.01) 100%);
+  --glass-page-base: linear-gradient(145deg, #050507 0%, #080809 48%, #050507 100%);
+  --glass-glow-1: rgb(0 217 146 / 0.12);
+  --glass-glow-2: rgb(47 214 161 / 0.08);
+  --glass-glow-3: rgb(129 140 248 / 0.06);
+  --glass-glow-4: rgb(92 88 85 / 0.14);
+  --ambient-haze: 0 0 15px rgb(92 88 85 / 0.2);
+  --signal-glow: 0 0 0.5px rgb(0 217 146 / 0.9), 0 0 18px rgb(0 217 146 / 0.18);
 }
 
 .dark {
-  --background: oklch(0.16 0.035 260 / 0.68);
-  --foreground: oklch(0.95 0.008 210);
-  --card: oklch(0.20 0.04 250 / 0.52);
-  --card-foreground: oklch(0.95 0.008 210);
-  --popover: oklch(0.18 0.035 255 / 0.72);
-  --popover-foreground: oklch(0.95 0.008 210);
-  --primary: oklch(0.76 0.13 195);
-  --primary-foreground: oklch(0.14 0.03 250);
-  --secondary: oklch(0.26 0.035 255 / 0.46);
-  --secondary-foreground: oklch(0.94 0.008 215);
-  --muted: oklch(0.24 0.03 255 / 0.40);
-  --muted-foreground: oklch(0.72 0.02 220);
-  --accent: oklch(0.30 0.06 200 / 0.48);
-  --accent-foreground: oklch(0.94 0.008 215);
-  --destructive: oklch(0.62 0.25 18);
-  --destructive-foreground: oklch(0.99 0 0);
-  --border: oklch(0.90 0.01 220 / 0.14);
-  --input: oklch(0.95 0.008 215 / 0.10);
-  --ring: oklch(0.76 0.13 195);
-  --chart-1: oklch(0.76 0.13 195);
-  --chart-2: oklch(0.72 0.11 165);
-  --chart-3: oklch(0.70 0.12 270);
-  --chart-4: oklch(0.76 0.12 95);
-  --chart-5: oklch(0.70 0.14 30);
-  --sidebar: oklch(0.18 0.04 255 / 0.82);
-  --sidebar-foreground: oklch(0.95 0.008 210);
-  --sidebar-primary: oklch(0.76 0.13 195);
-  --sidebar-primary-foreground: oklch(0.14 0.03 250);
-  --sidebar-accent: oklch(0.26 0.04 250 / 0.50);
-  --sidebar-accent-foreground: oklch(0.94 0.008 215);
-  --sidebar-border: oklch(0.90 0.01 220 / 0.16);
-  --sidebar-ring: oklch(0.76 0.13 195);
-  --font-sans: Lato, sans-serif;
-  --font-serif: Merriweather, Geist, Geist Fallback, ui-serif, Georgia, Cambria, ;
-  --font-mono: Roboto Mono, Geist Mono, Geist Mono Fallback, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, ;
-  --radius: 1rem;
-  --shadow-x: 0px;
-  --shadow-y: 16px;
-  --shadow-blur: 52px;
-  --shadow-spread: -20px;
-  --shadow-opacity: 0.40;
-  --shadow-color: oklch(0.08 0.03 260);
-  --shadow-2xs: 0 8px 18px -12px oklch(0.08 0.03 260 / 0.30), inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 -0.5px 0 rgb(255 255 255 / 0.04);
-  --shadow-xs: 0 10px 22px -14px oklch(0.08 0.03 260 / 0.34), inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 -0.5px 0 rgb(255 255 255 / 0.03);
-  --shadow-sm: 0 14px 30px -16px oklch(0.08 0.03 260 / 0.38), inset 0 1px 0 rgb(255 255 255 / 0.10);
-  --shadow: 0 18px 40px -18px oklch(0.08 0.03 260 / 0.42), inset 0 1.5px 0 rgb(255 255 255 / 0.09);
-  --shadow-md: 0 24px 52px -22px oklch(0.08 0.03 260 / 0.46), inset 0 1.5px 0 rgb(255 255 255 / 0.08);
-  --shadow-lg: 0 32px 68px -26px oklch(0.08 0.03 260 / 0.52), inset 0 1.5px 0 rgb(255 255 255 / 0.07);
-  --shadow-xl: 0 40px 84px -30px oklch(0.08 0.03 260 / 0.56), inset 0 2px 0 rgb(255 255 255 / 0.06);
-  --shadow-2xl: 0 48px 108px -34px oklch(0.08 0.03 260 / 0.62), inset 0 2px 0 rgb(255 255 255 / 0.05);
+  --background: #050507;
+  --foreground: #f2f2f2;
+  --card: rgb(16 16 16 / 0.72);
+  --card-foreground: #f2f2f2;
+  --popover: rgb(16 16 16 / 0.92);
+  --popover-foreground: #f2f2f2;
+  --primary: #00d992;
+  --primary-foreground: #050507;
+  --secondary: rgb(61 58 57 / 0.72);
+  --secondary-foreground: #f2f2f2;
+  --muted: rgb(61 58 57 / 0.55);
+  --muted-foreground: #b8b3b0;
+  --accent: rgb(0 217 146 / 0.16);
+  --accent-foreground: #2fd6a1;
+  --destructive: #fb565b;
+  --destructive-foreground: #ffffff;
+  --border: rgb(61 58 57 / 0.94);
+  --input: rgb(16 16 16 / 0.88);
+  --ring: rgb(59 130 246 / 0.5);
+  --chart-1: #00d992;
+  --chart-2: #2fd6a1;
+  --chart-3: #818cf8;
+  --chart-4: #4cb3d4;
+  --chart-5: #ffba00;
+  --sidebar: rgb(8 8 10 / 0.88);
+  --sidebar-foreground: #f2f2f2;
+  --sidebar-primary: #00d992;
+  --sidebar-primary-foreground: #050507;
+  --sidebar-accent: rgb(16 16 16 / 0.82);
+  --sidebar-accent-foreground: #f2f2f2;
+  --sidebar-border: rgb(61 58 57 / 0.94);
+  --sidebar-ring: rgb(59 130 246 / 0.5);
   --glass-blur: 28px;
-  --glass-saturate: 190%;
-  --glass-stroke: rgb(255 255 255 / 0.22);
-  --glass-highlight: linear-gradient(168deg, rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0.05) 40%, rgb(255 255 255 / 0.02) 100%);
-  --glass-page-base: linear-gradient(140deg, oklch(0.14 0.04 265) 0%, oklch(0.16 0.05 230) 30%, oklch(0.13 0.04 200) 60%, oklch(0.15 0.035 280) 100%);
-  --glass-glow-1: oklch(0.55 0.16 195 / 0.32);
-  --glass-glow-2: oklch(0.50 0.14 270 / 0.22);
-  --glass-glow-3: oklch(0.58 0.12 320 / 0.16);
-  --glass-glow-4: oklch(0.52 0.10 150 / 0.10);
+  --glass-saturate: 160%;
+  --glass-stroke: rgb(255 255 255 / 0.1);
+  --glass-highlight: linear-gradient(168deg, rgb(255 255 255 / 0.14) 0%, rgb(255 255 255 / 0.05) 40%, rgb(255 255 255 / 0.02) 100%);
+  --glass-page-base: linear-gradient(145deg, #050507 0%, #070709 42%, #050507 100%);
+  --glass-glow-1: rgb(0 217 146 / 0.14);
+  --glass-glow-2: rgb(47 214 161 / 0.08);
+  --glass-glow-3: rgb(129 140 248 / 0.05);
+  --glass-glow-4: rgb(92 88 85 / 0.16);
 }
 
 @theme inline {
@@ -164,9 +150,9 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  --font-sans: Lato, sans-serif;
-  --font-mono: Roboto Mono, Geist Mono, Geist Mono Fallback, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, ;
-  --font-serif: Merriweather, Geist, Geist Fallback, ui-serif, Georgia, Cambria, ;
+  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
 
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -181,7 +167,7 @@
   --shadow-lg: var(--shadow-lg);
   --shadow-xl: var(--shadow-xl);
   --shadow-2xl: var(--shadow-2xl);
-  --radius: 1rem;
+  --radius: 0.5rem;
   --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
   --tracking-tight: calc(var(--tracking-normal) - 0.025em);
   --tracking-wide: calc(var(--tracking-normal) + 0.025em);
@@ -199,7 +185,8 @@
   }
   html {
     background: var(--glass-page-base);
-    color-scheme: light;
+    color-scheme: dark;
+    font-family: var(--font-sans);
   }
   .dark {
     color-scheme: dark;
@@ -208,23 +195,72 @@
     @apply bg-background text-foreground;
     min-height: 100svh;
     letter-spacing: var(--tracking-normal);
+    font-family: var(--font-sans);
     background-image:
-      radial-gradient(80rem 48rem at -8% -12%, var(--glass-glow-1), transparent 55%),
-      radial-gradient(50rem 38rem at 105% -5%, var(--glass-glow-2), transparent 55%),
-      radial-gradient(56rem 42rem at 50% 105%, var(--glass-glow-3), transparent 58%),
-      radial-gradient(40rem 40rem at 70% 40%, var(--glass-glow-4), transparent 65%),
+      radial-gradient(70rem 42rem at -8% -14%, var(--glass-glow-1), transparent 58%),
+      radial-gradient(46rem 34rem at 104% -4%, var(--glass-glow-2), transparent 56%),
+      radial-gradient(54rem 38rem at 50% 112%, var(--glass-glow-3), transparent 62%),
+      radial-gradient(42rem 32rem at 68% 38%, var(--glass-glow-4), transparent 70%),
       var(--glass-page-base);
     background-repeat: no-repeat;
     background-attachment: fixed;
   }
+  body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    background-image:
+      linear-gradient(rgb(255 255 255 / 0.02) 1px, transparent 1px),
+      linear-gradient(90deg, rgb(255 255 255 / 0.02) 1px, transparent 1px);
+    background-size: 72px 72px;
+    mask-image: radial-gradient(circle at center, black 24%, transparent 86%);
+    opacity: 0.18;
+  }
   ::selection {
-    background: color-mix(in oklab, var(--primary) 28%, transparent);
-    color: var(--foreground);
+    background: color-mix(in srgb, var(--primary) 32%, transparent);
+    color: #050507;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading);
+    color: #f2f2f2;
+    font-feature-settings: "calt" 1, "rlig" 1;
+  }
+  h1,
+  h2 {
+    letter-spacing: -0.04em;
+    line-height: 1.05;
+  }
+  h3,
+  h4 {
+    letter-spacing: -0.025em;
+    line-height: 1.15;
+  }
+  p,
+  li,
+  label,
+  button,
+  input,
+  textarea,
+  select {
+    font-feature-settings: "calt" 1, "rlig" 1;
+  }
+  code,
+  pre,
+  kbd,
+  samp {
+    font-family: var(--font-mono);
+    font-feature-settings: normal;
   }
 
   .dark [data-slot="sidebar"],
   .dark [data-slot="sidebar-inner"] {
-    background-color: color-mix(in oklab, var(--sidebar) 78%, transparent);
+    background-color: color-mix(in srgb, var(--sidebar) 88%, transparent);
   }
 
   .dark [data-slot="sidebar-inset"] {
@@ -233,7 +269,7 @@
 
   .app-sidebar-shell [data-slot="sidebar-inner"] {
     background-image:
-      linear-gradient(180deg, rgb(244 250 252 / 0.68) 0%, rgb(237 246 248 / 0.56) 38%, rgb(228 240 244 / 0.72) 100%),
+      linear-gradient(180deg, rgb(11 11 13 / 0.92) 0%, rgb(9 9 11 / 0.86) 38%, rgb(7 7 9 / 0.96) 100%),
       var(--sidebar-bg-image);
     background-position: center, left center;
     background-repeat: no-repeat, no-repeat;
@@ -242,7 +278,7 @@
 
   .dark .app-sidebar-shell [data-slot="sidebar-inner"] {
     background-image:
-      linear-gradient(180deg, rgb(4 12 24 / 0.82) 0%, rgb(4 12 24 / 0.68) 38%, rgb(2 8 18 / 0.86) 100%),
+      linear-gradient(180deg, rgb(11 11 13 / 0.94) 0%, rgb(9 9 11 / 0.88) 38%, rgb(7 7 9 / 0.98) 100%),
       var(--sidebar-bg-image);
   }
 }
@@ -262,11 +298,13 @@
     [data-slot="sheet-content"],
     [data-slot="sidebar"]
   ) {
-    border-color: color-mix(in srgb, var(--border) 60%, var(--glass-stroke));
-    border-top-color: var(--glass-stroke);
+    border-color: color-mix(in srgb, var(--border) 78%, var(--glass-stroke));
+    border-top-color: color-mix(in srgb, var(--glass-stroke) 80%, transparent);
+    background-color: var(--card);
     background-image: var(--glass-highlight);
     box-shadow:
-      0 0 0 0.5px var(--glass-stroke),
+      0 0 0 0.5px color-mix(in srgb, var(--glass-stroke) 88%, transparent),
+      var(--ambient-haze),
       var(--shadow);
   }
 
@@ -279,9 +317,40 @@
     [data-slot="sidebar-input"]
   ) {
     box-shadow:
-      inset 0 1px 0 rgb(255 255 255 / 0.22),
-      inset 0 -0.5px 0 rgb(255 255 255 / 0.06),
-      0 0 0 0.5px var(--glass-stroke);
+      inset 0 1px 0 rgb(255 255 255 / 0.08),
+      inset 0 -0.5px 0 rgb(255 255 255 / 0.02),
+      0 0 0 0.5px color-mix(in srgb, var(--glass-stroke) 88%, transparent);
+    background-color: var(--input);
+  }
+
+  :is(
+    [data-slot="button"][data-variant="default"],
+    [data-slot="button"][data-variant="outline"],
+    [data-slot="button"][data-variant="secondary"]
+  ) {
+    border-color: var(--border);
+    transition:
+      border-color 180ms ease,
+      color 180ms ease,
+      background-color 180ms ease,
+      box-shadow 180ms ease;
+  }
+
+  :is(
+    [data-slot="button"][data-variant="default"],
+    [data-slot="button"][data-variant="outline"]
+  ):hover {
+    border-color: color-mix(in srgb, var(--primary) 46%, var(--border));
+    box-shadow: var(--signal-glow);
+  }
+
+  :is(
+    [data-slot="card"],
+    [data-slot="dialog-content"],
+    [data-slot="popover-content"],
+    [data-slot="sheet-content"]
+  ):hover {
+    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
   }
 
   @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {