Creative Studio

# Visual style: Creative Studio

A bold, confident portfolio style for design studios, agencies, and freelancers. Oversized typography, bold color blocking, rich hover states, client logo walls, and team grids — professional but never corporate, with personality built in.

## Philosophy
Creative Studio is "the website designers make for themselves": all the expressive energy of an agency site, held together by editorial restraint.

Core principles:
- Boldness is attitude: oversized type, full-width color blocks, edge-to-edge imagery — no quiet neutral backgrounds, every viewport says "this is our taste"
- Navigation is hung: sticky nav with coral underline or block markers on hover, making navigation itself an interface expression
- Project cards are posters: every project card is a mini poster — the title takes 30% height, and on hover it slides up, scales, and shifts color, telling the visitor "clicking me leads somewhere good"
- Color blocks are sections: instead of card borders, use coral or warm-sand color blocks to partition functional areas — header is full black, projects are light sand, footer is darker — visual rhythm driven by background color
- Proof is trust: client logo walls, team avatar grids, testimonial pull quotes — social proof embedded in the browsing rhythm without interrupting flow

Design principles:
- Hierarchy comes from size and weight, not color: headings can go to text-7xl, subtitles stay text-xl font-normal — mass difference is hierarchy
- Hover states must be worth waiting for: transition-duration-300, scale-105, shadow-2xl, border color shift — four things happening at once makes visitors feel "this site is alive"
- Monochromatic color blocks are the layout skeleton: dark zones at #1A1A1A + #0D0D0D recede to background, light zones at #F5F5F0 breathe as midground, coral only where the eye needs to land
- Whitespace is a luxury: section spacing starts at py-24, giving each color block room to breathe before the next
- Sans-serif only: Inter or equivalent, weight range 400-700-900, no multi-weight mixing

## Do
- Dark sections use bg-[#1A1A1A] with text-white; light sections use bg-[#F5F5F0] with text-[#1A1A1A]
- Oversized hero headings: text-6xl md:text-7xl lg:text-8xl font-bold leading-[0.95] tracking-tight text-white, with select words highlighted in text-[#FF6B6B]
- Project cards use bg-[#F5F5F0] rounded-none overflow-hidden group, with group-hover:scale-[1.02] group-hover:shadow-2xl transition-all duration-300
- CTA buttons use bg-[#FF6B6B] text-white font-bold px-8 py-4 text-lg hover:bg-[#E55A5A] hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300
- Client logo rows: flex flex-wrap justify-center gap-12 py-12 opacity-60 grayscale hover:grayscale-0 transition-all duration-300
- Team avatar grids: flex -space-x-3, with rounded-full border-2 border-white shadow-md on each avatar
- Section transitions use color blocks: dark background starts, light background takes over, dark background closes — no borders between sections
- Fixed navigation: fixed top-0 w-full z-50 bg-[#1A1A1A]/95 backdrop-blur-sm border-b border-white/10, with hover items in text-[#FF6B6B]
- Testimonial blocks: max-w-4xl mx-auto text-center italic text-2xl md:text-3xl leading-relaxed text-[#1A1A1A] px-12 py-16

## Don't
- Never use small or standard sizing for hero headings (below text-5xl): a creative studio hero must carry visual impact
- Never use rounded-lg or larger radii (except avatars): project cards should be clean and square; rounding softens confidence
- Never use serif fonts: all text must be sans-serif; body uses font-light or font-normal, headings use font-bold or font-black
- Never rely on thin borders for section separation: sections transition via bg color blocks, not borders — the color switch is the separator
- Never use subtle hover states: hover must shift in scale, shadow, and color simultaneously; fading opacity is insufficient
- Never use pure white bg-white: dark zones use #1A1A1A, light zones use #F5F5F0; white only appears on text

## Rules for the AI
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