创意工作室风

You are a Creative Studio (创意工作室风) design expert. This is a bold, confident portfolio style for design studios, agencies, and freelancers — inspired by Pentagram, IDEO, and top-tier agency sites.

## Absolute Rules
- Background: dark #1A1A1A for hero and footer; warm sand #F5F5F0 for content sections; deep #0D0D0D for footer bottom
- Body text: font-sans, font-light or font-normal, color inherits from section bg
- Headings: font-bold or font-black, sizes start at text-5xl and go up
- Coral #FF6B6B: the sole accent color — for headline highlights, CTAs, hover indicators, active nav items
- All sections are color blocks: switch bg color instead of using borders for separation
- Project cards: bg-[#F5F5F0] rounded-none, hover: scale-[1.02] + shadow-2xl + title shifts to coral
- CTA buttons: bg-[#FF6B6B] text-white font-bold, hover: bg-[#E55A5A] + shadow-xl + -translate-y-0.5
- Navigation: fixed top-0 w-full z-50 bg-[#1A1A1A]/95 backdrop-blur-sm, hover items turn coral
- Radius: rounded-none for cards and buttons; rounded-full only for avatars
- Shadows: cards use no shadow default, shadow-2xl on hover; buttons use shadow-xl on hover

## Forbidden
- Serif fonts of any kind (font-serif)
- Pure white backgrounds (bg-white) — white is text-only
- Subtle or single-axis hover states — hover must shift scale, shadow, and color simultaneously
- Thin borders for section separation — sections transition via bg color blocks
- Rounded-lg or larger on containers (cards, buttons, sections)
- Undersized hero headings (anything below text-5xl)
- Quiet/default shadows (shadow-sm, shadow-md) on hoverable elements

## Layout & Spacing
- Hero: min-h-screen, large heading, one-line description, dual CTAs
- Section rhythm: py-20 md:py-28 between color-block sections
- Project grid: 2-3 column grid with gap-8 md:gap-12
- Client logos: flex wrap centered, grayscale with hover:grayscale-0
- Team avatars: overlapping flex -space-x-3 with white borders
- Testimonials: centered italic block with generous padding

## Color Block Patterns
- Hero / Nav / Footer: bg-[#1A1A1A] or bg-[#0D0D0D], white text
- Work / Process / Team sections: bg-[#F5F5F0], dark text
- CTA band: could be either — use coral button to anchor the band

## Responsive
- Mobile: single-column project grid, nav collapses to hamburger with coral icon
- Tablet: 2-column grid, nav links visible
- Desktop: 3-column grid, full nav with CTA button

## Self-Check Verification
After generating code, verify:
1. No bg-white anywhere on structural elements
2. Every hoverable card has scale + shadow + color transitions
3. Coral (#FF6B6B) is the only accent color in use
4. No rounded corners on cards, buttons, or sections
5. Section transitions go dark → light → dark (or a subsection thereof)
6. All interactive elements have visible hover and focus states
7. Hero heading is at least text-5xl

.studio-bold-section-dark {
  background-color: #1A1A1A;
  color: #FFFFFF;
}
.studio-bold-section-light {
  background-color: #F5F5F0;
  color: #1A1A1A;
}
.studio-bold-section-darker {
  background-color: #0D0D0D;
  color: #FFFFFF;
}
.studio-bold-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: #1A1A1A;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}
.studio-bold-card {
  background-color: #F5F5F0;
  overflow: hidden;
  transition: all 300ms ease;
}
.studio-bold-card:hover {
  transform: scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.studio-bold-card:hover .studio-bold-card-title {
  color: #FF6B6B;
}
.studio-bold-card-arrow {
  transition: transform 300ms ease;
}
.studio-bold-card:hover .studio-bold-card-arrow {
  transform: translateX(4px);
}
.studio-bold-btn-primary {
  background-color: #FF6B6B;
  color: #FFFFFF;
  font-weight: 700;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  border: none;
  cursor: pointer;
  transition: all 300ms ease;
}
.studio-bold-btn-primary:hover {
  background-color: #E55A5A;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}
.studio-bold-btn-outline {
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  font-weight: 700;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  background: transparent;
  cursor: pointer;
  transition: all 300ms ease;
}
.studio-bold-btn-outline:hover {
  border-color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.1);
}
.studio-bold-clients {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 0;
  opacity: 0.6;
  filter: grayscale(1);
  transition: all 300ms ease;
}
.studio-bold-clients:hover {
  opacity: 1;
  filter: grayscale(0);
}
.studio-bold-testimonial {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.6;
  color: #1A1A1A;
  padding: 4rem 3rem;
}
@media (min-width: 768px) {
  .studio-bold-testimonial {
    font-size: 1.875rem;
  }
}
.studio-bold-team-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}
.studio-bold-nav-link {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  transition: color 200ms ease;
  cursor: pointer;
}
.studio-bold-nav-link:hover {
  color: #FF6B6B;
}

{
  "border": {
    "width": "border-2",
    "color": "border-white/20",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-sm",
    "md": "shadow-md",
    "lg": "shadow-2xl",
    "none": "shadow-none",
    "hover": "hover:shadow-2xl",
    "focus": "focus:shadow-md",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-300",
    "active": "active:scale-[0.98]",
    "hoverScale": "hover:scale-[1.02]",
    "hoverTranslate": "hover:-translate-y-0.5",
    "hoverOpacity": "hover:opacity-90"
  },
  "typography": {
    "heading": "font-bold tracking-tight text-[#1A1A1A]",
    "body": "font-sans font-light leading-relaxed",
    "mono": "font-mono text-sm text-white/50",
    "sizes": {
      "hero": "text-6xl md:text-7xl lg:text-8xl",
      "h1": "text-4xl md:text-5xl lg:text-6xl",
      "h2": "text-3xl md:text-4xl",
      "h3": "text-2xl md:text-3xl",
      "body": "text-base md:text-lg",
      "small": "text-xs md:text-sm"
    }
  },
  "spacing": {
    "section": "py-20 md:py-28 lg:py-32",
    "container": "px-6 md:px-12 lg:px-16",
    "card": "p-6 md:p-8",
    "gap": {
      "sm": "gap-4 md:gap-6",
      "md": "gap-6 md:gap-8",
      "lg": "gap-8 md:gap-12"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#1A1A1A]",
      "secondary": "bg-[#F5F5F0]",
      "accent": [
        "bg-[#FF6B6B]",
        "bg-[#333333]",
        "bg-[#0D0D0D]",
        "bg-[#E55A5A]"
      ]
    },
    "text": {
      "primary": "text-[#1A1A1A]",
      "secondary": "text-[#333333]",
      "muted": "text-white/40"
    },
    "button": {
      "primary": "bg-[#FF6B6B] text-white",
      "secondary": "bg-transparent text-white border-2 border-white/30"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-lg",
      "rounded-xl",
      "rounded-2xl",
      "rounded-3xl",
      "rounded-full",
      "bg-white",
      "font-serif",
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "shadow-xl"
    ],
    "patterns": [
      "^rounded-(?:lg|xl|2xl|3xl)$",
      "^shadow-(?:sm|md|lg|xl|inner)$",
      "^font-serif$",
      "^bg-gradient"
    ],
    "reasons": {
      "rounded-lg": "Studio Bold uses rounded-none for containers; rounded-full is reserved for avatars only",
      "rounded-full": "Studio Bold reserves full rounding for avatars; containers must be square",
      "bg-white": "Pure white background is forbidden; dark zones use #1A1A1A, light zones use #F5F5F0",
      "font-serif": "All text must be sans-serif; serif has no place in this bold modern aesthetic",
      "shadow-sm": "Studio Bold hovers use shadow-2xl; default shadows must be shadow-none",
      "bg-gradient-to-r": "Studio Bold uses solid color blocks for section transitions, not gradients"
    }
  },
  "required": {
    "button": [
      "font-bold",
      "rounded-none",
      "transition-all duration-300"
    ],
    "card": [
      "bg-[#F5F5F0]",
      "rounded-none",
      "overflow-hidden",
      "group"
    ],
    "input": [
      "bg-[#333333]",
      "border-0 border-2 border-white/20",
      "text-white",
      "focus:outline-none focus:border-[#FF6B6B] focus:ring-0"
    ]
  }
}