{"theme":{"id":"md-linear-modern-mobile","theme_name":"Linear / Modern","platform":"mobile-app","weight":12,"content":"<design-system>\n# Design Style: Linear / Modern\n\n## Design Philosophy\n\n**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.\n\n**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.\n\n**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:\n\n1. **Multi-layer background system:** Four stacked gradients + noise texture + grid overlay create depth without any single dominant element\n2. **Animated gradient blobs:** Large (900-1400px), heavily blurred shapes float slowly across the canvas, simulating cinematic lighting pools\n3. **Mouse-tracking spotlights:** Interactive surfaces respond to cursor position with radial gradient glows (300px diameter, 15% opacity)\n4. **Scroll-linked parallax:** Hero content fades, scales, and translates based on scroll position for cinematic depth\n5. **Multi-layer shadows:** Every elevated surface uses 3-4 shadow layers: border highlight + soft diffuse + ambient darkness + optional accent glow\n6. **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.\n\n**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.\n\n---\n\n## Design Token System (The DNA)\n\n### Color Strategy: Deep Space with Ambient Light\n\nThe 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.\n\n| Token | Value | Usage |\n|:------|:------|:------|\n| `background-deep` | `#020203` | Absolute darkest — footer, deepest layers |\n| `background-base` | `#050506` | Primary page canvas |\n| `background-elevated` | `#0a0a0c` | Elevated surfaces, mock interfaces |\n| `surface` | `rgba(255,255,255,0.05)` | Card backgrounds, containers |\n| `surface-hover` | `rgba(255,255,255,0.08)` | Hovered card state |\n| `foreground` | `#EDEDEF` | Primary text — bright but not pure white |\n| `foreground-muted` | `#8A8F98` | Body text, descriptions, metadata |\n| `foreground-subtle` | `rgba(255,255,255,0.60)` | Tertiary text, placeholders |\n| `accent` | `#5E6AD2` | Primary interactive color — buttons, links, glows |\n| `accent-bright` | `#6872D9` | Hover state for accent |\n| `accent-glow` | `rgba(94,106,210,0.3)` | Glow effects, ambient lighting |\n| `border-default` | `rgba(255,255,255,0.06)` | Subtle hairline borders |\n| `border-hover` | `rgba(255,255,255,0.10)` | Border on hover |\n| `border-accent` | `rgba(94,106,210,0.30)` | Accent-tinted borders for emphasis |\n\n### Background System: Layered Ambient Lighting\n\nThe background is never flat. It's a composition of multiple layers:\n\n**Layer 1 — Base Gradient:**\n```\nbg-[radial-gradient(ellipse_at_top,#0a0a0f_0%,#050506_50%,#020203_100%)]\n```\nA radial gradient emanating from top-center creates vertical depth.\n\n**Layer 2 — Noise Texture:**\nA subtle SVG noise pattern at `opacity: 0.015` adds tactile quality and prevents banding.\n\n**Layer 3 — Animated Gradient Blobs:**\nMultiple large, heavily blurred shapes create ambient \"light pools\":\n- Primary blob: Top-center, `blur-[150px]`, 900×1400px, accent color at 25% opacity\n- Secondary blob: Left side, `blur-[120px]`, 600×800px, purple/pink mix at 15% opacity\n- Tertiary blob: Right side, `blur-[100px]`, 500×700px, indigo/blue mix at 12% opacity\n- Bottom accent: Lower area, pulsing animation, accent at 10% opacity\n\n**Blob Animation:** Blobs float slowly using keyframe animations:\n```css\n@keyframes float {\n  0%, 100% { transform: translateY(0) rotate(0deg); }\n  50% { transform: translateY(-20px) rotate(1deg); }\n}\n/* Duration: 8-10s, ease-in-out, infinite */\n```\n\n**Layer 4 — Grid Overlay:**\nA subtle 64px grid pattern at `opacity: 0.02` adds technical precision.\n\n---\n\n### Typography System\n\n**Font Stack:** `\"Inter\", \"Geist Sans\", system-ui, sans-serif`\n\n**Type Scale & Weights:**\n\n| Level | Size | Weight | Tracking | Usage |\n|:------|:-----|:-------|:---------|:------|\n| Display | `text-7xl` to `text-8xl` | `font-semibold` | `tracking-[-0.03em]` | Hero headlines |\n| H1 | `text-5xl` to `text-6xl` | `font-semibold` | `tracking-tight` | Section headers |\n| H2 | `text-3xl` to `text-4xl` | `font-semibold` | `tracking-tight` | Subsection headers |\n| H3 | `text-xl` to `text-2xl` | `font-semibold` | `tracking-tight` | Card titles |\n| Body Large | `text-lg` to `text-xl` | `font-normal` | default | Lead paragraphs |\n| Body | `text-sm` to `text-base` | `font-normal` | default | Standard content |\n| Label | `text-xs` | `font-mono` | `tracking-widest` | Section tags, metadata |\n\n**Gradient Text Treatment:**\nHeadlines use gradient fills for dimensionality:\n```\nbg-gradient-to-b from-white via-white/95 to-white/70 bg-clip-text text-transparent\n```\n\nFor accent emphasis, use animated gradient:\n```\nbg-gradient-to-r from-[#5E6AD2] via-indigo-400 to-[#5E6AD2] bg-clip-text text-transparent\n/* With background-size: 200% and animation for shimmer effect */\n```\n\n**Line Heights:**\n- Headlines: `leading-tight` or `leading-none`\n- Body text: `leading-relaxed`\n\n---\n\n### Radius & Border System\n\n| Element | Radius | Border |\n|:--------|:-------|:-------|\n| Large containers | `rounded-2xl` (16px) | `border border-white/[0.06]` |\n| Cards | `rounded-2xl` (16px) | `border border-white/[0.06]` |\n| Buttons | `rounded-lg` (8px) | Inset shadow instead of border |\n| Inputs | `rounded-lg` (8px) | `border border-white/10` |\n| Badges/Pills | `rounded-full` | `border border-accent/30` |\n| Icons containers | `rounded-xl` (12px) | `border border-white/10` |\n\n**Border Gradients on Hover:**\nCards can have animated gradient borders that fade in on hover:\n```css\nbackground: linear-gradient(to bottom, rgba(94,106,210,0.3), transparent);\nmask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\nmask-composite: exclude;\npadding: 1px;\n```\n\n---\n\n### Shadow & Glow System\n\n**Multi-Layer Shadow Formula:**\nShadows combine multiple layers for realistic depth:\n\n```\n/* Card default */\nshadow-[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)]\n\n/* Card hover */\nshadow-[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)]\n```\n\n**Accent Glow for CTAs:**\n```\nshadow-[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)]\n```\n\n**Inner Highlight:**\nButtons and elevated surfaces get a subtle top edge highlight:\n```\nshadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)]\n```\n\n---\n\n## Component Styling Principles\n\n### Buttons\n\n**Primary Button:**\n- Background: Solid accent color (`bg-[#5E6AD2]`)\n- Text: White\n- Shadow: Multi-layer with accent glow\n- Hover: Slightly brighter (`bg-[#6872D9]`), increased glow\n- Active: `scale-[0.98]`, reduced shadow\n- Shine effect: Pseudo-element gradient sweep on hover\n\n**Secondary Button:**\n- Background: `bg-white/[0.05]`\n- Text: `text-[#EDEDEF]`\n- Border: Inset shadow only\n- Hover: `bg-white/[0.08]`, subtle outer glow\n\n**Ghost Button:**\n- Background: Transparent\n- Text: Muted foreground\n- Hover: `bg-white/[0.05]`, text brightens\n\n### Cards & Containers\n\n**Base Card:**\n- Background: `bg-gradient-to-b from-white/[0.08] to-white/[0.02]`\n- Border: 1px at 6% white opacity\n- Radius: `rounded-2xl`\n- Inner glow line: 1px gradient at top edge\n- Mouse-tracking spotlight effect (optional)\n\n**Spotlight Effect:**\nCards track mouse position and render a radial gradient that follows the cursor:\n```jsx\n// Radial gradient, 300px diameter, accent color at 15% opacity\n// Positioned at mouse coordinates relative to card\n// Opacity transitions on hover\n```\n\n**Card Variants:**\n- `default`: Standard glass effect\n- `glass`: More translucent with backdrop blur\n- `gradient`: Subtle accent gradient overlay\n\n### Form Inputs\n\n- Background: `bg-[#0F0F12]`\n- Border: `border-white/10`\n- Focus: `border-[#5E6AD2]` with accent glow ring\n- Text: `text-gray-100`\n- Placeholder: `text-gray-500`\n\n### Interactive States\n\n**Hover Principles:**\n- Movement is minimal: `y: -4px` to `y: -8px` maximum\n- Duration: `200-300ms`\n- Easing: `[0.16, 1, 0.3, 1]` (expo out)\n- Changes: Border brightens, glow increases, subtle scale\n\n**Focus States:**\n- Ring: `ring-2 ring-[#5E6AD2]/50 ring-offset-2 ring-offset-[#050506]`\n\n**Active States:**\n- Scale: `scale-[0.98]`\n- Shadow: Reduced depth\n\n**Mobile Menu:**\n- Toggle button appears on screens < 768px\n- Animated dropdown with `opacity` and `y` transform (0.2s duration)\n- Semi-transparent backdrop: `bg-[#050506]/95` with `backdrop-blur-xl`\n- Vertical navigation links with hover states\n- Full-width CTA button at bottom\n- Menu icon transitions between hamburger (`Menu`) and close (`X`) icons\n\n---\n\n## Layout Principles\n\n### Spacing Scale\nBase unit: 4px. Use Tailwind's default scale consistently.\n\n| Context | Spacing |\n|:--------|:--------|\n| Section padding | `py-24` to `py-32` |\n| Container max-width | `container` with responsive padding |\n| Card padding | `p-6` to `p-8` |\n| Element gaps | `gap-4` to `gap-8` |\n| Between sections | `py-32` (128px) |\n\n### Grid Philosophy\n\n**Asymmetric Bento Grids:**\nFeature grids should NOT be uniform. Use varying spans:\n- 6-column base grid on desktop\n- Mix of `col-span-2`, `col-span-3`, `col-span-4`\n- Variable row heights with `auto-rows-[180px]` as baseline\n- One \"hero\" card spanning 4 columns and 2 rows\n\n**Responsive Breakpoints:**\n- Mobile (`< 768px`): Single column, stacked layout with reduced padding\n- Tablet (`md: 768px`): 2-3 columns, intermediate grid layouts\n- Desktop (`lg: 1024px+`): Full grid expression with asymmetric layouts\n\n**Mobile-Specific Adjustments:**\n- Section padding scales: `py-16` (mobile) → `py-24` (tablet) → `py-32` (desktop)\n- Hero typography: `text-4xl` (mobile) → `text-5xl` (tablet) → `text-7xl`/`text-8xl` (desktop)\n- Body text: `text-base` (mobile) → `text-lg` (tablet) → `text-xl` (desktop)\n- Navigation: Hamburger menu with animated slide-down panel on mobile (`Menu`/`X` icons), inline links on desktop\n- Cards: Full-width on mobile, grid on desktop\n- Bento grids: Single column mobile, full asymmetric layout desktop\n\n### Section Flow\n\n- Sections separated by subtle `border-t border-white/[0.06]`\n- Gradient line accents: `bg-gradient-to-r from-transparent via-white/10 to-transparent`\n- Occasional overlapping sections using negative margins\n\n---\n\n## The \"Bold Factor\" (Signature Elements)\n\nThese elements MUST be present for authenticity:\n\n1. **Animated Ambient Blobs:** Multiple layered, floating gradient shapes create cinematic lighting. Without these, the design becomes flat and generic.\n\n2. **Mouse-Tracking Spotlights:** Interactive surfaces respond to cursor position with soft radial glow effects. This creates the \"magical\" interaction feel.\n\n3. **Gradient Typography:** Headlines use vertical gradients (white to semi-transparent) and accent gradients with animation for key phrases.\n\n4. **Multi-Layer Shadows:** Never single shadows. Always combine: border highlight + soft diffuse shadow + optional accent glow.\n\n5. **Parallax/Scroll Effects:** Hero content fades and scales on scroll. Elements reveal with staggered animations. This adds cinematic depth.\n\n6. **Precision Micro-Interactions:** All animations are quick (200-300ms), use expo-out easing, and movements are tiny (4-8px). Never bouncy or exaggerated.\n\n---\n\n## Anti-Patterns (What to Avoid)\n\n1. **Flat backgrounds:** Never use a single solid color. Always layer gradients, noise, and ambient light.\n\n2. **Pure black (`#000000`):** Use near-blacks like `#050506` or `#020203` for softer appearance.\n\n3. **Pure white text:** Use `#EDEDEF` or similar off-white to reduce harshness.\n\n4. **Large hover movements:** Keep transforms under 8px. This isn't playful—it's precise.\n\n5. **Uniform grids:** Bento layouts should have variety in card sizes. Avoid same-size-everything.\n\n6. **Harsh borders:** Borders should be nearly invisible (`6-10%` white opacity), not prominent.\n\n7. **Colorful accent overuse:** The accent color is for highlights and interaction, not decoration. Most of the UI is monochromatic.\n\n8. **Bouncy animations:** Use expo-out easing, not spring physics. Movements should be swift and decisive.\n\n9. **Missing glow effects:** Accent buttons without glow look incomplete. The soft light emission is part of the language.\n\n---\n\n## Animation & Motion\n\n**Timing:**\n- Quick interactions: `200ms`\n- Standard transitions: `300ms`\n- Entrance animations: `600ms`\n- Background blob float: `8000-10000ms`\n\n**Easing:**\n- Primary: `[0.16, 1, 0.3, 1]` (expo-out)\n- Hover: `ease-out`\n\n**Entrance Patterns:**\n- Fade up: `opacity: 0 → 1`, `y: 24px → 0`\n- Scale in: `opacity: 0 → 1`, `scale: 0.95 → 1`\n- Stagger children: `0.08s` delay between items\n\n**Scroll-Triggered:**\n- Viewport threshold: `15-20%` visibility\n- Once: true (don't re-animate on scroll back)\n\n**Parallax (Hero):**\n- Opacity: Fades from `1 → 0` over first 50% of scroll\n- Scale: Shrinks from `1 → 0.95`\n- Y position: Moves down `0 → 100px`\n\n---\n\n## Accessibility Considerations\n\n**Contrast:**\n- Primary text (`#EDEDEF` on `#050506`): ~15:1 ratio ✓\n- Muted text (`#8A8F98` on `#050506`): ~6:1 ratio ✓\n- Accent on dark: Ensure 4.5:1 minimum for interactive elements\n\n**Focus States:**\n- Always visible focus rings using accent color\n- `ring-offset` matches background color\n\n**Motion:**\n- Respect `prefers-reduced-motion`\n- Provide fallbacks for parallax and floating animations\n- Essential interactions should work without animation\n\n**Color Independence:**\n- Don't rely solely on accent color for meaning\n- Use icons, labels, and position to reinforce state\n</design-system>"}}