get-shit-pretty 0.7.0 → 0.7.1

package/gsp/skills/gsp-style/styles/modern-dark.md

@@ -1,426 +1,390 @@
-<role>
-You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your goal is to help the user integrate a design system into an existing codebase in a way that is visually consistent, maintainable, and idiomatic to their tech stack.
-
-Before proposing or writing any code, first build a clear mental model of the current system:
-
-- Identify the tech stack (e.g. React, Next.js, Vue, Tailwind, shadcn/ui, etc.).
-- Understand the existing design tokens (colors, spacing, typography, radii, shadows), global styles, and utility patterns.
-- Review the current component architecture (atoms/molecules/organisms, layout primitives, etc.) and naming conventions.
-- Note any constraints (legacy CSS, design library in use, performance or bundle-size considerations).
-
-Ask the user focused questions to understand the user's goals. Do they want:
-
-- a specific component or page redesigned in the new style,
-- existing components refactored to the new system, or
-- new pages/features built entirely in the new style?
-
-Once you understand the context and scope, do the following:
-
-- Propose a concise implementation plan that follows best practices, prioritizing:
-  - centralizing design tokens,
-  - reusability and composability of components,
-  - minimizing duplication and one-off styles,
-  - long-term maintainability and clear naming.
-- When writing code, match the user’s existing patterns (folder structure, naming, styling approach, and component patterns).
-- Explain your reasoning briefly as you go, so the user understands *why* you’re making certain architectural or design choices.
-
-Always aim to:
-
-- Preserve or improve accessibility.
-- Maintain visual consistency with the provided design system.
-- Leave the codebase in a cleaner, more coherent state than you found it.
-- Ensure layouts are responsive and usable across devices.
-- Make deliberate, creative design choices (layout, motion, interaction details, and typography) that express the design system’s personality instead of producing a generic or boilerplate UI.
-
-</role>
-
-<design-system>
-# Design Style: Linear / Modern
-
-## Design Philosophy
-
-**Core Principles:** Precision, depth, and fluidity define this design system. Every surface exists in three-dimensional space, illuminated by soft ambient light sources that breathe and move. The design communicates "premium developer tools"—fast, responsive, and obsessively crafted like Linear, Vercel, or Raycast. Nothing is arbitrary: every shadow has three layers, every gradient transitions through multiple colors, every animation uses refined expo-out easing. The goal is software that feels expensive without feeling ostentatious.
-
-**Vibe:** Cinematic meets technical minimalism. Imagine a developer's code editor crossed with a Blade Runner interface—deep near-blacks (#050506, never pure black) punctuated by soft pools of indigo light. The aesthetic is sophisticated but never cold, using warmth from accent glows (#5E6AD2 at varying opacities) to create inviting depth. It should feel like looking through frosted glass into a high-end application running at night. Dark, but not oppressive. Technical, but not sterile. Precise, but not rigid.
-
-**Differentiation:** The signature of this style is **layered ambient lighting and interactive depth**. Unlike flat dark modes or simple gradient overlays, this creates genuine atmospheric presence through:
-
-1. **Multi-layer background system:** Four stacked gradients + noise texture + grid overlay create depth without any single dominant element
-2. **Animated gradient blobs:** Large (900-1400px), heavily blurred shapes float slowly across the canvas, simulating cinematic lighting pools
-3. **Mouse-tracking spotlights:** Interactive surfaces respond to cursor position with radial gradient glows (300px diameter, 15% opacity)
-4. **Scroll-linked parallax:** Hero content fades, scales, and translates based on scroll position for cinematic depth
-5. **Multi-layer shadows:** Every elevated surface uses 3-4 shadow layers: border highlight + soft diffuse + ambient darkness + optional accent glow
-6. **Precision micro-interactions:** All animations are 200-300ms with expo-out easing. Movements are tiny (4-8px max). Scale changes are subtle (0.98-1.02). Nothing bounces or overshoots.
-
-**The "Software Feel":** This design should feel like using a desktop application, not a website. Interactions are instant and precise. Hover states are immediate. Focus rings are prominent. Everything responds to the cursor. The aesthetic borrows from native macOS/Windows design systems—subtle transparency, soft glows, refined typography, obsessive attention to 1px details.
-
----
-
-## Design Token System (The DNA)
-
-### Color Strategy: Deep Space with Ambient Light
-
-The palette is built on near-black bases with a single saturated indigo accent. Depth comes from layered translucency and soft light sources, not harsh shadows.
-
-| Token                   | Value                      | Usage                                              |
-| :---------------------- | :------------------------- | :------------------------------------------------- |
-| `background-deep`     | `#020203`                | Absolute darkest — footer, deepest layers         |
-| `background-base`     | `#050506`                | Primary page canvas                                |
-| `background-elevated` | `#0a0a0c`                | Elevated surfaces, mock interfaces                 |
-| `surface`             | `rgba(255,255,255,0.05)` | Card backgrounds, containers                       |
-| `surface-hover`       | `rgba(255,255,255,0.08)` | Hovered card state                                 |
-| `foreground`          | `#EDEDEF`                | Primary text — bright but not pure white          |
-| `foreground-muted`    | `#8A8F98`                | Body text, descriptions, metadata                  |
-| `foreground-subtle`   | `rgba(255,255,255,0.60)` | Tertiary text, placeholders                        |
-| `accent`              | `#5E6AD2`                | Primary interactive color — buttons, links, glows |
-| `accent-bright`       | `#6872D9`                | Hover state for accent                             |
-| `accent-glow`         | `rgba(94,106,210,0.3)`   | Glow effects, ambient lighting                     |
-| `border-default`      | `rgba(255,255,255,0.06)` | Subtle hairline borders                            |
-| `border-hover`        | `rgba(255,255,255,0.10)` | Border on hover                                    |
-| `border-accent`       | `rgba(94,106,210,0.30)`  | Accent-tinted borders for emphasis                 |
-
-### Background System: Layered Ambient Lighting
-
-The background is never flat. It's a composition of multiple layers:
-
-**Layer 1 — Base Gradient:**
-
-```
-bg-[radial-gradient(ellipse_at_top,#0a0a0f_0%,#050506_50%,#020203_100%)]
-```
-
-A radial gradient emanating from top-center creates vertical depth.
-
-**Layer 2 — Noise Texture:**
-A subtle SVG noise pattern at `opacity: 0.015` adds tactile quality and prevents banding.
-
-**Layer 3 — Animated Gradient Blobs:**
-Multiple large, heavily blurred shapes create ambient "light pools":
-
-- Primary blob: Top-center, `blur-[150px]`, 900×1400px, accent color at 25% opacity
-- Secondary blob: Left side, `blur-[120px]`, 600×800px, purple/pink mix at 15% opacity
-- Tertiary blob: Right side, `blur-[100px]`, 500×700px, indigo/blue mix at 12% opacity
-- Bottom accent: Lower area, pulsing animation, accent at 10% opacity
-
-**Blob Animation:** Blobs float slowly using keyframe animations:
-
-```css
-@keyframes float {
-  0%, 100% { transform: translateY(0) rotate(0deg); }
-  50% { transform: translateY(-20px) rotate(1deg); }
-}
-/* Duration: 8-10s, ease-in-out, infinite */
-```
-
-**Layer 4 — Grid Overlay:**
-A subtle 64px grid pattern at `opacity: 0.02` adds technical precision.
-
----
-
-### Typography System
-
-**Font Stack:** `"Inter", "Geist Sans", system-ui, sans-serif`
-
-**Type Scale & Weights:**
-
-| Level      | Size                         | Weight            | Tracking               | Usage                  |
-| :--------- | :--------------------------- | :---------------- | :--------------------- | :--------------------- |
-| Display    | `text-7xl` to `text-8xl` | `font-semibold` | `tracking-[-0.03em]` | Hero headlines         |
-| H1         | `text-5xl` to `text-6xl` | `font-semibold` | `tracking-tight`     | Section headers        |
-| H2         | `text-3xl` to `text-4xl` | `font-semibold` | `tracking-tight`     | Subsection headers     |
-| H3         | `text-xl` to `text-2xl`  | `font-semibold` | `tracking-tight`     | Card titles            |
-| Body Large | `text-lg` to `text-xl`   | `font-normal`   | default                | Lead paragraphs        |
-| Body       | `text-sm` to `text-base` | `font-normal`   | default                | Standard content       |
-| Label      | `text-xs`                  | `font-mono`     | `tracking-widest`    | Section tags, metadata |
-
-**Gradient Text Treatment:**
-Headlines use gradient fills for dimensionality:
-
-```
-bg-gradient-to-b from-white via-white/95 to-white/70 bg-clip-text text-transparent
-```
-
-For accent emphasis, use animated gradient:
-
-```
-bg-gradient-to-r from-[#5E6AD2] via-indigo-400 to-[#5E6AD2] bg-clip-text text-transparent
-/* With background-size: 200% and animation for shimmer effect */
-```
-
-**Line Heights:**
-
-- Headlines: `leading-tight` or `leading-none`
-- Body text: `leading-relaxed`
-
----
-
-### Radius & Border System
-
-| Element          | Radius                 | Border                         |
-| :--------------- | :--------------------- | :----------------------------- |
-| Large containers | `rounded-2xl` (16px) | `border border-white/[0.06]` |
-| Cards            | `rounded-2xl` (16px) | `border border-white/[0.06]` |
-| Buttons          | `rounded-lg` (8px)   | Inset shadow instead of border |
-| Inputs           | `rounded-lg` (8px)   | `border border-white/10`     |
-| Badges/Pills     | `rounded-full`       | `border border-accent/30`    |
-| Icons containers | `rounded-xl` (12px)  | `border border-white/10`     |
-
-**Border Gradients on Hover:**
-Cards can have animated gradient borders that fade in on hover:
-
-```css
-background: linear-gradient(to bottom, rgba(94,106,210,0.3), transparent);
-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-mask-composite: exclude;
-padding: 1px;
-```
-
----
-
-### Shadow & Glow System
-
-**Multi-Layer Shadow Formula:**
-Shadows combine multiple layers for realistic depth:
-
-```
-/* Card default */
-shadow-[0_0_0_1px_rgba(255,255,255,0.06),0_2px_20px_rgba(0,0,0,0.4),0_0_40px_rgba(0,0,0,0.2)]
-
-/* Card hover */
-shadow-[0_0_0_1px_rgba(255,255,255,0.1),0_8px_40px_rgba(0,0,0,0.5),0_0_80px_rgba(94,106,210,0.1)]
-```
-
-**Accent Glow for CTAs:**
-
-```
-shadow-[0_0_0_1px_rgba(94,106,210,0.5),0_4px_12px_rgba(94,106,210,0.3),inset_0_1px_0_0_rgba(255,255,255,0.2)]
-```
-
-**Inner Highlight:**
-Buttons and elevated surfaces get a subtle top edge highlight:
-
-```
-shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)]
-```
-
----
-
-## Component Styling Principles
-
-### Buttons
-
-**Primary Button:**
-
-- Background: Solid accent color (`bg-[#5E6AD2]`)
-- Text: White
-- Shadow: Multi-layer with accent glow
-- Hover: Slightly brighter (`bg-[#6872D9]`), increased glow
-- Active: `scale-[0.98]`, reduced shadow
-- Shine effect: Pseudo-element gradient sweep on hover
-
-**Secondary Button:**
-
-- Background: `bg-white/[0.05]`
-- Text: `text-[#EDEDEF]`
-- Border: Inset shadow only
-- Hover: `bg-white/[0.08]`, subtle outer glow
-
-**Ghost Button:**
-
-- Background: Transparent
-- Text: Muted foreground
-- Hover: `bg-white/[0.05]`, text brightens
-
-### Cards & Containers
-
-**Base Card:**
-
-- Background: `bg-gradient-to-b from-white/[0.08] to-white/[0.02]`
-- Border: 1px at 6% white opacity
-- Radius: `rounded-2xl`
-- Inner glow line: 1px gradient at top edge
-- Mouse-tracking spotlight effect (optional)
-
-**Spotlight Effect:**
-Cards track mouse position and render a radial gradient that follows the cursor:
-
-```jsx
-// Radial gradient, 300px diameter, accent color at 15% opacity
-// Positioned at mouse coordinates relative to card
-// Opacity transitions on hover
-```
-
-**Card Variants:**
-
-- `default`: Standard glass effect
-- `glass`: More translucent with backdrop blur
-- `gradient`: Subtle accent gradient overlay
-
-### Form Inputs
-
-- Background: `bg-[#0F0F12]`
-- Border: `border-white/10`
-- Focus: `border-[#5E6AD2]` with accent glow ring
-- Text: `text-gray-100`
-- Placeholder: `text-gray-500`
-
-### Interactive States
-
-**Hover Principles:**
-
-- Movement is minimal: `y: -4px` to `y: -8px` maximum
-- Duration: `200-300ms`
-- Easing: `[0.16, 1, 0.3, 1]` (expo out)
-- Changes: Border brightens, glow increases, subtle scale
-
-**Focus States:**
-
-- Ring: `ring-2 ring-[#5E6AD2]/50 ring-offset-2 ring-offset-[#050506]`
-
-**Active States:**
-
-- Scale: `scale-[0.98]`
-- Shadow: Reduced depth
-
-**Mobile Menu:**
-
-- Toggle button appears on screens < 768px
-- Animated dropdown with `opacity` and `y` transform (0.2s duration)
-- Semi-transparent backdrop: `bg-[#050506]/95` with `backdrop-blur-xl`
-- Vertical navigation links with hover states
-- Full-width CTA button at bottom
-- Menu icon transitions between hamburger (`Menu`) and close (`X`) icons
-
----
-
-## Layout Principles
-
-### Spacing Scale
-
-Base unit: 4px. Use Tailwind's default scale consistently.
-
-| Context             | Spacing                               |
-| :------------------ | :------------------------------------ |
-| Section padding     | `py-24` to `py-32`                |
-| Container max-width | `container` with responsive padding |
-| Card padding        | `p-6` to `p-8`                    |
-| Element gaps        | `gap-4` to `gap-8`                |
-| Between sections    | `py-32` (128px)                     |
-
-### Grid Philosophy
-
-**Asymmetric Bento Grids:**
-Feature grids should NOT be uniform. Use varying spans:
-
-- 6-column base grid on desktop
-- Mix of `col-span-2`, `col-span-3`, `col-span-4`
-- Variable row heights with `auto-rows-[180px]` as baseline
-- One "hero" card spanning 4 columns and 2 rows
-
-**Responsive Breakpoints:**
-
-- Mobile (`< 768px`): Single column, stacked layout with reduced padding
-- Tablet (`md: 768px`): 2-3 columns, intermediate grid layouts
-- Desktop (`lg: 1024px+`): Full grid expression with asymmetric layouts
-
-**Mobile-Specific Adjustments:**
-
-- Section padding scales: `py-16` (mobile) → `py-24` (tablet) → `py-32` (desktop)
-- Hero typography: `text-4xl` (mobile) → `text-5xl` (tablet) → `text-7xl`/`text-8xl` (desktop)
-- Body text: `text-base` (mobile) → `text-lg` (tablet) → `text-xl` (desktop)
-- Navigation: Hamburger menu with animated slide-down panel on mobile (`Menu`/`X` icons), inline links on desktop
-- Cards: Full-width on mobile, grid on desktop
-- Bento grids: Single column mobile, full asymmetric layout desktop
-
-### Section Flow
-
-- Sections separated by subtle `border-t border-white/[0.06]`
-- Gradient line accents: `bg-gradient-to-r from-transparent via-white/10 to-transparent`
-- Occasional overlapping sections using negative margins
-
----
-
-## The "Bold Factor" (Signature Elements)
-
-These elements MUST be present for authenticity:
-
-1. **Animated Ambient Blobs:** Multiple layered, floating gradient shapes create cinematic lighting. Without these, the design becomes flat and generic.
-2. **Mouse-Tracking Spotlights:** Interactive surfaces respond to cursor position with soft radial glow effects. This creates the "magical" interaction feel.
-3. **Gradient Typography:** Headlines use vertical gradients (white to semi-transparent) and accent gradients with animation for key phrases.
-4. **Multi-Layer Shadows:** Never single shadows. Always combine: border highlight + soft diffuse shadow + optional accent glow.
-5. **Parallax/Scroll Effects:** Hero content fades and scales on scroll. Elements reveal with staggered animations. This adds cinematic depth.
-6. **Precision Micro-Interactions:** All animations are quick (200-300ms), use expo-out easing, and movements are tiny (4-8px). Never bouncy or exaggerated.
-
----
-
-## Anti-Patterns (What to Avoid)
-
-1. **Flat backgrounds:** Never use a single solid color. Always layer gradients, noise, and ambient light.
-2. **Pure black (`#000000`):** Use near-blacks like `#050506` or `#020203` for softer appearance.
-3. **Pure white text:** Use `#EDEDEF` or similar off-white to reduce harshness.
-4. **Large hover movements:** Keep transforms under 8px. This isn't playful—it's precise.
-5. **Uniform grids:** Bento layouts should have variety in card sizes. Avoid same-size-everything.
-6. **Harsh borders:** Borders should be nearly invisible (`6-10%` white opacity), not prominent.
-7. **Colorful accent overuse:** The accent color is for highlights and interaction, not decoration. Most of the UI is monochromatic.
-8. **Bouncy animations:** Use expo-out easing, not spring physics. Movements should be swift and decisive.
-9. **Missing glow effects:** Accent buttons without glow look incomplete. The soft light emission is part of the language.
-
----
-
-## Animation & Motion
-
-**Timing:**
-
-- Quick interactions: `200ms`
-- Standard transitions: `300ms`
-- Entrance animations: `600ms`
-- Background blob float: `8000-10000ms`
-
-**Easing:**
-
-- Primary: `[0.16, 1, 0.3, 1]` (expo-out)
-- Hover: `ease-out`
-
-**Entrance Patterns:**
-
-- Fade up: `opacity: 0 → 1`, `y: 24px → 0`
-- Scale in: `opacity: 0 → 1`, `scale: 0.95 → 1`
-- Stagger children: `0.08s` delay between items
-
-**Scroll-Triggered:**
-
-- Viewport threshold: `15-20%` visibility
-- Once: true (don't re-animate on scroll back)
-
-**Parallax (Hero):**
-
-- Opacity: Fades from `1 → 0` over first 50% of scroll
-- Scale: Shrinks from `1 → 0.95`
-- Y position: Moves down `0 → 100px`
-
----
-
-## Accessibility Considerations
-
-**Contrast:**
-
-- Primary text (`#EDEDEF` on `#050506`): ~15:1 ratio ✓
-- Muted text (`#8A8F98` on `#050506`): ~6:1 ratio ✓
-- Accent on dark: Ensure 4.5:1 minimum for interactive elements
-
-**Focus States:**
-
-- Always visible focus rings using accent color
-- `ring-offset` matches background color
-
-**Motion:**
-
-- Respect `prefers-reduced-motion`
-- Provide fallbacks for parallax and floating animations
-- Essential interactions should work without animation
-
-**Color Independence:**
-
-- Don't rely solely on accent color for meaning
-- Use icons, labels, and position to reinforce state
-  `</design-system>`
+<design-system>
+# Design Style: Linear / Modern
+
+## Design Philosophy
+
+**Core Principles:** Precision, depth, and fluidity define this design system. Every surface exists in three-dimensional space, illuminated by soft ambient light sources that breathe and move. The design communicates "premium developer tools"—fast, responsive, and obsessively crafted like Linear, Vercel, or Raycast. Nothing is arbitrary: every shadow has three layers, every gradient transitions through multiple colors, every animation uses refined expo-out easing. The goal is software that feels expensive without feeling ostentatious.
+
+**Vibe:** Cinematic meets technical minimalism. Imagine a developer's code editor crossed with a Blade Runner interface—deep near-blacks (#050506, never pure black) punctuated by soft pools of indigo light. The aesthetic is sophisticated but never cold, using warmth from accent glows (#5E6AD2 at varying opacities) to create inviting depth. It should feel like looking through frosted glass into a high-end application running at night. Dark, but not oppressive. Technical, but not sterile. Precise, but not rigid.
+
+**Differentiation:** The signature of this style is **layered ambient lighting and interactive depth**. Unlike flat dark modes or simple gradient overlays, this creates genuine atmospheric presence through:
+
+1. **Multi-layer background system:** Four stacked gradients + noise texture + grid overlay create depth without any single dominant element
+2. **Animated gradient blobs:** Large (900-1400px), heavily blurred shapes float slowly across the canvas, simulating cinematic lighting pools
+3. **Mouse-tracking spotlights:** Interactive surfaces respond to cursor position with radial gradient glows (300px diameter, 15% opacity)
+4. **Scroll-linked parallax:** Hero content fades, scales, and translates based on scroll position for cinematic depth
+5. **Multi-layer shadows:** Every elevated surface uses 3-4 shadow layers: border highlight + soft diffuse + ambient darkness + optional accent glow
+6. **Precision micro-interactions:** All animations are 200-300ms with expo-out easing. Movements are tiny (4-8px max). Scale changes are subtle (0.98-1.02). Nothing bounces or overshoots.
+
+**The "Software Feel":** This design should feel like using a desktop application, not a website. Interactions are instant and precise. Hover states are immediate. Focus rings are prominent. Everything responds to the cursor. The aesthetic borrows from native macOS/Windows design systems—subtle transparency, soft glows, refined typography, obsessive attention to 1px details.
+
+---
+
+## Design Token System (The DNA)
+
+### Color Strategy: Deep Space with Ambient Light
+
+The palette is built on near-black bases with a single saturated indigo accent. Depth comes from layered translucency and soft light sources, not harsh shadows.
+
+| Token                   | Value                      | Usage                                              |
+| :---------------------- | :------------------------- | :------------------------------------------------- |
+| `background-deep`     | `#020203`                | Absolute darkest — footer, deepest layers         |
+| `background-base`     | `#050506`                | Primary page canvas                                |
+| `background-elevated` | `#0a0a0c`                | Elevated surfaces, mock interfaces                 |
+| `surface`             | `rgba(255,255,255,0.05)` | Card backgrounds, containers                       |
+| `surface-hover`       | `rgba(255,255,255,0.08)` | Hovered card state                                 |
+| `foreground`          | `#EDEDEF`                | Primary text — bright but not pure white          |
+| `foreground-muted`    | `#8A8F98`                | Body text, descriptions, metadata                  |
+| `foreground-subtle`   | `rgba(255,255,255,0.60)` | Tertiary text, placeholders                        |
+| `accent`              | `#5E6AD2`                | Primary interactive color — buttons, links, glows |
+| `accent-bright`       | `#6872D9`                | Hover state for accent                             |
+| `accent-glow`         | `rgba(94,106,210,0.3)`   | Glow effects, ambient lighting                     |
+| `border-default`      | `rgba(255,255,255,0.06)` | Subtle hairline borders                            |
+| `border-hover`        | `rgba(255,255,255,0.10)` | Border on hover                                    |
+| `border-accent`       | `rgba(94,106,210,0.30)`  | Accent-tinted borders for emphasis                 |
+
+### Background System: Layered Ambient Lighting
+
+The background is never flat. It's a composition of multiple layers:
+
+**Layer 1 — Base Gradient:**
+
+```
+bg-[radial-gradient(ellipse_at_top,#0a0a0f_0%,#050506_50%,#020203_100%)]
+```
+
+A radial gradient emanating from top-center creates vertical depth.
+
+**Layer 2 — Noise Texture:**
+A subtle SVG noise pattern at `opacity: 0.015` adds tactile quality and prevents banding.
+
+**Layer 3 — Animated Gradient Blobs:**
+Multiple large, heavily blurred shapes create ambient "light pools":
+
+- Primary blob: Top-center, `blur-[150px]`, 900×1400px, accent color at 25% opacity
+- Secondary blob: Left side, `blur-[120px]`, 600×800px, purple/pink mix at 15% opacity
+- Tertiary blob: Right side, `blur-[100px]`, 500×700px, indigo/blue mix at 12% opacity
+- Bottom accent: Lower area, pulsing animation, accent at 10% opacity
+
+**Blob Animation:** Blobs float slowly using keyframe animations:
+
+```css
+@keyframes float {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-20px) rotate(1deg); }
+}
+/* Duration: 8-10s, ease-in-out, infinite */
+```
+
+**Layer 4 — Grid Overlay:**
+A subtle 64px grid pattern at `opacity: 0.02` adds technical precision.
+
+---
+
+### Typography System
+
+**Font Stack:** `"Inter", "Geist Sans", system-ui, sans-serif`
+
+**Type Scale & Weights:**
+
+| Level      | Size                         | Weight            | Tracking               | Usage                  |
+| :--------- | :--------------------------- | :---------------- | :--------------------- | :--------------------- |
+| Display    | `text-7xl` to `text-8xl` | `font-semibold` | `tracking-[-0.03em]` | Hero headlines         |
+| H1         | `text-5xl` to `text-6xl` | `font-semibold` | `tracking-tight`     | Section headers        |
+| H2         | `text-3xl` to `text-4xl` | `font-semibold` | `tracking-tight`     | Subsection headers     |
+| H3         | `text-xl` to `text-2xl`  | `font-semibold` | `tracking-tight`     | Card titles            |
+| Body Large | `text-lg` to `text-xl`   | `font-normal`   | default                | Lead paragraphs        |
+| Body       | `text-sm` to `text-base` | `font-normal`   | default                | Standard content       |
+| Label      | `text-xs`                  | `font-mono`     | `tracking-widest`    | Section tags, metadata |
+
+**Gradient Text Treatment:**
+Headlines use gradient fills for dimensionality:
+
+```
+bg-gradient-to-b from-white via-white/95 to-white/70 bg-clip-text text-transparent
+```
+
+For accent emphasis, use animated gradient:
+
+```
+bg-gradient-to-r from-[#5E6AD2] via-indigo-400 to-[#5E6AD2] bg-clip-text text-transparent
+/* With background-size: 200% and animation for shimmer effect */
+```
+
+**Line Heights:**
+
+- Headlines: `leading-tight` or `leading-none`
+- Body text: `leading-relaxed`
+
+---
+
+### Radius & Border System
+
+| Element          | Radius                 | Border                         |
+| :--------------- | :--------------------- | :----------------------------- |
+| Large containers | `rounded-2xl` (16px) | `border border-white/[0.06]` |
+| Cards            | `rounded-2xl` (16px) | `border border-white/[0.06]` |
+| Buttons          | `rounded-lg` (8px)   | Inset shadow instead of border |
+| Inputs           | `rounded-lg` (8px)   | `border border-white/10`     |
+| Badges/Pills     | `rounded-full`       | `border border-accent/30`    |
+| Icons containers | `rounded-xl` (12px)  | `border border-white/10`     |
+
+**Border Gradients on Hover:**
+Cards can have animated gradient borders that fade in on hover:
+
+```css
+background: linear-gradient(to bottom, rgba(94,106,210,0.3), transparent);
+mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+mask-composite: exclude;
+padding: 1px;
+```
+
+---
+
+### Shadow & Glow System
+
+**Multi-Layer Shadow Formula:**
+Shadows combine multiple layers for realistic depth:
+
+```
+/* Card default */
+shadow-[0_0_0_1px_rgba(255,255,255,0.06),0_2px_20px_rgba(0,0,0,0.4),0_0_40px_rgba(0,0,0,0.2)]
+
+/* Card hover */
+shadow-[0_0_0_1px_rgba(255,255,255,0.1),0_8px_40px_rgba(0,0,0,0.5),0_0_80px_rgba(94,106,210,0.1)]
+```
+
+**Accent Glow for CTAs:**
+
+```
+shadow-[0_0_0_1px_rgba(94,106,210,0.5),0_4px_12px_rgba(94,106,210,0.3),inset_0_1px_0_0_rgba(255,255,255,0.2)]
+```
+
+**Inner Highlight:**
+Buttons and elevated surfaces get a subtle top edge highlight:
+
+```
+shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)]
+```
+
+---
+
+## Component Styling Principles
+
+### Buttons
+
+**Primary Button:**
+
+- Background: Solid accent color (`bg-[#5E6AD2]`)
+- Text: White
+- Shadow: Multi-layer with accent glow
+- Hover: Slightly brighter (`bg-[#6872D9]`), increased glow
+- Active: `scale-[0.98]`, reduced shadow
+- Shine effect: Pseudo-element gradient sweep on hover
+
+**Secondary Button:**
+
+- Background: `bg-white/[0.05]`
+- Text: `text-[#EDEDEF]`
+- Border: Inset shadow only
+- Hover: `bg-white/[0.08]`, subtle outer glow
+
+**Ghost Button:**
+
+- Background: Transparent
+- Text: Muted foreground
+- Hover: `bg-white/[0.05]`, text brightens
+
+### Cards & Containers
+
+**Base Card:**
+
+- Background: `bg-gradient-to-b from-white/[0.08] to-white/[0.02]`
+- Border: 1px at 6% white opacity
+- Radius: `rounded-2xl`
+- Inner glow line: 1px gradient at top edge
+- Mouse-tracking spotlight effect (optional)
+
+**Spotlight Effect:**
+Cards track mouse position and render a radial gradient that follows the cursor:
+
+```jsx
+// Radial gradient, 300px diameter, accent color at 15% opacity
+// Positioned at mouse coordinates relative to card
+// Opacity transitions on hover
+```
+
+**Card Variants:**
+
+- `default`: Standard glass effect
+- `glass`: More translucent with backdrop blur
+- `gradient`: Subtle accent gradient overlay
+
+### Form Inputs
+
+- Background: `bg-[#0F0F12]`
+- Border: `border-white/10`
+- Focus: `border-[#5E6AD2]` with accent glow ring
+- Text: `text-gray-100`
+- Placeholder: `text-gray-500`
+
+### Interactive States
+
+**Hover Principles:**
+
+- Movement is minimal: `y: -4px` to `y: -8px` maximum
+- Duration: `200-300ms`
+- Easing: `[0.16, 1, 0.3, 1]` (expo out)
+- Changes: Border brightens, glow increases, subtle scale
+
+**Focus States:**
+
+- Ring: `ring-2 ring-[#5E6AD2]/50 ring-offset-2 ring-offset-[#050506]`
+
+**Active States:**
+
+- Scale: `scale-[0.98]`
+- Shadow: Reduced depth
+
+**Mobile Menu:**
+
+- Toggle button appears on screens < 768px
+- Animated dropdown with `opacity` and `y` transform (0.2s duration)
+- Semi-transparent backdrop: `bg-[#050506]/95` with `backdrop-blur-xl`
+- Vertical navigation links with hover states
+- Full-width CTA button at bottom
+- Menu icon transitions between hamburger (`Menu`) and close (`X`) icons
+
+---
+
+## Layout Principles
+
+### Spacing Scale
+
+Base unit: 4px. Use Tailwind's default scale consistently.
+
+| Context             | Spacing                               |
+| :------------------ | :------------------------------------ |
+| Section padding     | `py-24` to `py-32`                |
+| Container max-width | `container` with responsive padding |
+| Card padding        | `p-6` to `p-8`                    |
+| Element gaps        | `gap-4` to `gap-8`                |
+| Between sections    | `py-32` (128px)                     |
+
+### Grid Philosophy
+
+**Asymmetric Bento Grids:**
+Feature grids should NOT be uniform. Use varying spans:
+
+- 6-column base grid on desktop
+- Mix of `col-span-2`, `col-span-3`, `col-span-4`
+- Variable row heights with `auto-rows-[180px]` as baseline
+- One "hero" card spanning 4 columns and 2 rows
+
+**Responsive Breakpoints:**
+
+- Mobile (`< 768px`): Single column, stacked layout with reduced padding
+- Tablet (`md: 768px`): 2-3 columns, intermediate grid layouts
+- Desktop (`lg: 1024px+`): Full grid expression with asymmetric layouts
+
+**Mobile-Specific Adjustments:**
+
+- Section padding scales: `py-16` (mobile) → `py-24` (tablet) → `py-32` (desktop)
+- Hero typography: `text-4xl` (mobile) → `text-5xl` (tablet) → `text-7xl`/`text-8xl` (desktop)
+- Body text: `text-base` (mobile) → `text-lg` (tablet) → `text-xl` (desktop)
+- Navigation: Hamburger menu with animated slide-down panel on mobile (`Menu`/`X` icons), inline links on desktop
+- Cards: Full-width on mobile, grid on desktop
+- Bento grids: Single column mobile, full asymmetric layout desktop
+
+### Section Flow
+
+- Sections separated by subtle `border-t border-white/[0.06]`
+- Gradient line accents: `bg-gradient-to-r from-transparent via-white/10 to-transparent`
+- Occasional overlapping sections using negative margins
+
+---
+
+## The "Bold Factor" (Signature Elements)
+
+These elements MUST be present for authenticity:
+
+1. **Animated Ambient Blobs:** Multiple layered, floating gradient shapes create cinematic lighting. Without these, the design becomes flat and generic.
+2. **Mouse-Tracking Spotlights:** Interactive surfaces respond to cursor position with soft radial glow effects. This creates the "magical" interaction feel.
+3. **Gradient Typography:** Headlines use vertical gradients (white to semi-transparent) and accent gradients with animation for key phrases.
+4. **Multi-Layer Shadows:** Never single shadows. Always combine: border highlight + soft diffuse shadow + optional accent glow.
+5. **Parallax/Scroll Effects:** Hero content fades and scales on scroll. Elements reveal with staggered animations. This adds cinematic depth.
+6. **Precision Micro-Interactions:** All animations are quick (200-300ms), use expo-out easing, and movements are tiny (4-8px). Never bouncy or exaggerated.
+
+---
+
+## Anti-Patterns (What to Avoid)
+
+1. **Flat backgrounds:** Never use a single solid color. Always layer gradients, noise, and ambient light.
+2. **Pure black (`#000000`):** Use near-blacks like `#050506` or `#020203` for softer appearance.
+3. **Pure white text:** Use `#EDEDEF` or similar off-white to reduce harshness.
+4. **Large hover movements:** Keep transforms under 8px. This isn't playful—it's precise.
+5. **Uniform grids:** Bento layouts should have variety in card sizes. Avoid same-size-everything.
+6. **Harsh borders:** Borders should be nearly invisible (`6-10%` white opacity), not prominent.
+7. **Colorful accent overuse:** The accent color is for highlights and interaction, not decoration. Most of the UI is monochromatic.
+8. **Bouncy animations:** Use expo-out easing, not spring physics. Movements should be swift and decisive.
+9. **Missing glow effects:** Accent buttons without glow look incomplete. The soft light emission is part of the language.
+
+---
+
+## Animation & Motion
+
+**Timing:**
+
+- Quick interactions: `200ms`
+- Standard transitions: `300ms`
+- Entrance animations: `600ms`
+- Background blob float: `8000-10000ms`
+
+**Easing:**
+
+- Primary: `[0.16, 1, 0.3, 1]` (expo-out)
+- Hover: `ease-out`
+
+**Entrance Patterns:**
+
+- Fade up: `opacity: 0 → 1`, `y: 24px → 0`
+- Scale in: `opacity: 0 → 1`, `scale: 0.95 → 1`
+- Stagger children: `0.08s` delay between items
+
+**Scroll-Triggered:**
+
+- Viewport threshold: `15-20%` visibility
+- Once: true (don't re-animate on scroll back)
+
+**Parallax (Hero):**
+
+- Opacity: Fades from `1 → 0` over first 50% of scroll
+- Scale: Shrinks from `1 → 0.95`
+- Y position: Moves down `0 → 100px`
+
+---
+
+## Accessibility Considerations
+
+**Contrast:**
+
+- Primary text (`#EDEDEF` on `#050506`): ~15:1 ratio ✓
+- Muted text (`#8A8F98` on `#050506`): ~6:1 ratio ✓
+- Accent on dark: Ensure 4.5:1 minimum for interactive elements
+
+**Focus States:**
+
+- Always visible focus rings using accent color
+- `ring-offset` matches background color
+
+**Motion:**
+
+- Respect `prefers-reduced-motion`
+- Provide fallbacks for parallax and floating animations
+- Essential interactions should work without animation
+
+**Color Independence:**
+
+- Don't rely solely on accent color for meaning
+- Use icons, labels, and position to reinforce state
+  `</design-system>`