Linear 风格

You are a Linear Style design expert. This style emulates the design language of the Linear project management tool — precise, restrained, and developer-focused.

## Absolute Rules
- Background: #0a0a0b or bg-zinc-950 — always dark
- Text: text-white for primary, text-zinc-400 for secondary, text-zinc-500/600 for tertiary
- Borders: border border-white/10 — always 1px, always semi-transparent
- Brand color: #5e6ad2 (indigo-purple) — used sparingly for CTAs and accents
- Font: Inter only, tracking-tight, text-sm as default body size
- Border-radius: rounded-lg max, rounded-md for small elements

## Forbidden
- White or light backgrounds
- Large border-radius (rounded-2xl+)
- Colored shadows
- Multiple fonts
- High-saturation colors (except brand purple)
- Decorative elements (gradients as decoration, blobs, patterns)

## Interaction Pattern
- Use opacity for hover states: hover:opacity-90 or hover:bg-white/[0.06]
- Transitions must be fast: duration-150
- No scale transforms on hover
- Focus: focus:border-[#5e6ad2]/50

## Typography Scale
- Hero: text-4xl font-semibold tracking-tight
- Section: text-2xl font-semibold tracking-tight
- Body: text-sm text-zinc-400
- Label: text-xs text-zinc-500 font-medium uppercase tracking-wider

/* Linear Style Global Styles */
@layer base {
  body {
    @apply bg-[#0a0a0b] text-white antialiased;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
  }
}

@layer utilities {
  .linear-border {
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .linear-surface {
    background: rgba(255, 255, 255, 0.03);
  }

  .linear-surface-hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .linear-gradient {
    background: linear-gradient(to right, #5e6ad2, #8b5cf6);
  }
}
/* Linear Style Design Tokens */
:root {
  --linear-style-primary: #5e6ad2;
  --linear-style-secondary: #0a0a0b;
  --linear-style-accent: #f2c94c;
  --linear-style-glow: rgba(94, 106, 210, 0.3);
}

@keyframes linear-style-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes linear-style-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.linear-style-card {
  position: relative;
  overflow: hidden;
}

.linear-style-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(94, 106, 210, 0.05), transparent);
  pointer-events: none;
}

.linear-style-card:hover::before {
  opacity: 1;
}

.linear-style-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(94, 106, 210, 0.08);
}

.linear-style-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.linear-style-animate-in {
  animation: linear-style-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border",
    "color": "border-white/10",
    "radius": "rounded-lg",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-none",
    "lg": "shadow-none",
    "none": "shadow-none",
    "hover": "shadow-none",
    "focus": "shadow-none",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-150",
    "active": "active:opacity-80",
    "hoverTranslate": ""
  },
  "typography": {
    "heading": "font-sans font-semibold tracking-tight",
    "body": "font-sans text-sm",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-4xl font-semibold tracking-tight",
      "h1": "text-2xl font-semibold tracking-tight",
      "h2": "text-xl font-semibold tracking-tight",
      "h3": "text-base font-medium tracking-tight",
      "body": "text-sm",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-12 md:py-20",
    "container": "px-4 md:px-8",
    "card": "p-5",
    "gap": {
      "sm": "gap-1.5",
      "md": "gap-3",
      "lg": "gap-5"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#0a0a0b]",
      "secondary": "bg-white/[0.03]",
      "accent": [
        "bg-[#5e6ad2]"
      ]
    },
    "text": {
      "primary": "text-white",
      "secondary": "text-zinc-400",
      "muted": "text-zinc-500"
    },
    "button": {
      "primary": "bg-gradient-to-r from-[#5e6ad2] to-[#8b5cf6] text-white",
      "secondary": "bg-white/[0.03] text-white border border-white/10",
      "danger": "bg-[#eb5757] text-white"
    }
  },
  "forbidden": {
    "classes": [
      "bg-white",
      "bg-gray-50",
      "bg-gray-100",
      "bg-slate-50",
      "rounded-2xl",
      "rounded-3xl",
      "rounded-full",
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "shadow-xl",
      "shadow-purple-500/20",
      "shadow-indigo-500/20",
      "font-serif",
      "font-mono",
      "text-pink-400",
      "text-green-400",
      "text-orange-400"
    ],
    "patterns": [
      "^bg-(?:white|gray-(?:50|100)|slate-50)$",
      "^rounded-(?:2xl|3xl|full)$",
      "^shadow-(?:sm|md|lg|xl|2xl)$",
      "^shadow-.*\\/\\d+$",
      "^font-(?:serif|mono)$"
    ],
    "reasons": {
      "bg-white": "Linear Style uses dark backgrounds only (#0a0a0b)",
      "rounded-2xl": "Linear Style uses rounded-lg max for restrained aesthetics",
      "shadow-sm": "Linear Style avoids shadows entirely; uses borders for hierarchy",
      "font-serif": "Linear Style uses Inter (sans-serif) exclusively",
      "font-mono": "Linear Style uses Inter (sans-serif) exclusively for UI text"
    }
  },
  "required": {
    "button": [
      "rounded-lg",
      "font-medium",
      "text-sm",
      "transition-opacity duration-150"
    ],
    "card": [
      "rounded-lg",
      "border border-white/10",
      "bg-white/[0.03]"
    ],
    "input": [
      "rounded-lg",
      "border border-white/10",
      "bg-white/[0.03]",
      "text-white text-sm",
      "focus:outline-none"
    ]
  }
}