Creative Studio

STYLEKIT_STYLE_REFERENCE
style_name: Creative Studio
style_slug: studio-bold
style_source: /styles/studio-bold

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

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

---

# Creative Studio Design System

> 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.

## Design 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

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-white/20
Radius: rounded-none
```

### Shadow
```
sm: shadow-sm
md: shadow-md
lg: shadow-2xl
hover: hover:shadow-2xl
focus: focus:shadow-md
```

### Interaction
```
Hover translate: hover:-translate-y-0.5
Hover scale: hover:scale-[1.02]
Hover opacity: hover:opacity-90
Transition: transition-all duration-300
Active: active:scale-[0.98]
```

### Typefaces
```
Heading: font-bold tracking-tight text-[#1A1A1A]
Body: font-sans font-light leading-relaxed
Mono: font-mono text-sm text-white/50
```

### Type scale
```
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
Gap md: gap-6 md:gap-8
Gap lg: gap-8 md:gap-12
```

### Color roles
```
Background primary: bg-[#1A1A1A]
Background secondary: bg-[#F5F5F0]
Background accent: bg-[#FF6B6B], bg-[#333333], bg-[#0D0D0D], bg-[#E55A5A]
Text primary: text-[#1A1A1A]
Text secondary: text-[#333333]
Text muted: text-white/40
Button primary: bg-[#FF6B6B] text-white
Button secondary: bg-transparent text-white border-2 border-white/30
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-3xl`
- `rounded-full`
- `bg-white`
- `font-serif`
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`

### Banned patterns
- matches `^rounded-(?:lg|xl|2xl|3xl)$`
- matches `^shadow-(?:sm|md|lg|xl|inner)$`
- matches `^font-serif$`
- matches `^bg-gradient`

### Why they are banned
- `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

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
font-bold
rounded-none
transition-all duration-300
```

### Every card must include
```
bg-[#F5F5F0]
rounded-none
overflow-hidden
group
```

### Every input must include
```
bg-[#333333]
border-0 border-b-2 border-white/20
text-white
focus:outline-none focus:border-[#FF6B6B] focus:ring-0
```

---

## [COMPARE] Creative Studio wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="font-bold rounded-none transition-all duration-300 bg-[#FF6B6B] text-white">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="bg-[#F5F5F0] rounded-none overflow-hidden group p-6 md:p-8">
 <h3 class="font-bold tracking-tight text-[#1A1A1A] text-2xl md:text-3xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-[#333333] border-0 border-b-2 border-white/20 text-white focus:outline-none focus:border-[#FF6B6B] focus:ring-0" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Creative Studio page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#1A1A1A] text-[#1A1A1A] border-2 border-white/20 px-6 md:px-12 lg:px-16">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-6 md:gap-8">
 <a href="/" class="font-bold tracking-tight text-[#1A1A1A] text-2xl md:text-3xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-6 md:gap-8 font-sans font-light leading-relaxed text-xs md:text-sm">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#FF6B6B] text-[#1A1A1A] py-20 md:py-28 lg:py-32 px-6 md:px-12 lg:px-16">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-bold tracking-tight text-[#1A1A1A] text-6xl md:text-7xl lg:text-8xl">
 {HEADLINE}
 </h1>
 <p class="font-sans font-light leading-relaxed text-base md:text-lg max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="font-bold rounded-none transition-all duration-300 bg-[#FF6B6B] text-white">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#1A1A1A] text-[#1A1A1A] py-20 md:py-28 lg:py-32 px-6 md:px-12 lg:px-16">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-bold tracking-tight text-[#1A1A1A] text-3xl md:text-4xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
 <!-- Card template - repeat for each card -->
 <div class="bg-[#F5F5F0] rounded-none overflow-hidden group p-6 md:p-8">
 <h3 class="font-bold tracking-tight text-[#1A1A1A] text-2xl md:text-3xl">{CARD_TITLE}</h3>
 <p class="font-sans font-light leading-relaxed text-base md:text-lg text-white/40">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-[#333333] border-0 border-b-2 border-white/20 text-white focus:outline-none focus:border-[#FF6B6B] focus:ring-0" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#F5F5F0] text-[#333333] py-20 md:py-28 lg:py-32 px-6 md:px-12 lg:px-16">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
 <div>
 <span class="font-bold tracking-tight text-[#1A1A1A] text-2xl md:text-3xl">{LOGO_TEXT}</span>
 <p class="font-sans font-light leading-relaxed text-xs md:text-sm">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-bold tracking-tight text-[#1A1A1A] text-2xl md:text-3xl">{COLUMN_TITLE}</h4>
 <ul class="font-sans font-light leading-relaxed text-xs md:text-sm">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Creative Studio post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `font-bold rounded-none transition-all duration-300`
- [ ] Card includes: `bg-[#F5F5F0] rounded-none overflow-hidden group`
- [ ] Input includes: `bg-[#333333] border-0 border-b-2 border-white/20 text-white focus:outline-none focus:border-[#FF6B6B] focus:ring-0`

### Forbidden check
- [ ] Not using `rounded-lg`
- [ ] Not using `rounded-xl`
- [ ] Not using `rounded-2xl`
- [ ] Not using `rounded-3xl`
- [ ] Not using `rounded-full`
- [ ] Not using `bg-white`
- [ ] Not using `font-serif`
- [ ] Not using `shadow-sm`

### Style rule check
- [ ] 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

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

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Creative Studio

---

## [EXAMPLES] Example prompts

### 1. 

 hero、、、、

```
Build a creative studio homepage in Studio Bold style: a fixed dark nav (bg-[#1A1A1A]/95 backdrop-blur-sm) with coral hover, a full-viewport hero (bg-[#1A1A1A]) with an oversized heading text-7xl md:text-8xl where select words are highlighted in coral text-[#FF6B6B], a subtitle in white/60, a coral CTA button and an outline button. Then a project grid section (bg-[#F5F5F0]) with 6 project cards in a 3-column grid, each card being a rounded-none group with a dark placeholder image area, tag badges, a bold title that turns coral on hover, description, and a 'View Case Study' link with arrow. Then a process/timeline section, a client logo wall (grayscale hover:grayscale-0), a team grid with overlapping avatar circles, a testimonial pull quote, and a dark footer (bg-[#0D0D0D]) with three-column info and social links.
```

### 2. / Case Study 

、、

```
Design a case study detail page in Studio Bold style: a full-bleed hero image at the top, a dark overlay section with the project title text-5xl md:text-6xl font-bold text-white, a tag row (client, discipline, year) in white/50, then a sequence of alternating light (bg-[#F5F5F0]) and dark (bg-[#1A1A1A]) content sections. Include a full-width image break, a stat callout row (3 large numbers with labels), a client testimonial in italic centered format, and a next-project navigation at the bottom (large title with arrow, dark bg, linking to the next case study).
```

### 3. / 

、、 CTA

```
Create an About page in Studio Bold style: start with a dark section (bg-[#1A1A1A]) featuring the studio name in oversized text and a short manifesto paragraph in white/60. Then a light section (bg-[#F5F5F0]) with a 3-column team grid — each member card is rounded-none, shows a portrait, name in bold, role, and social links that turn coral on hover. Follow with a culture values section using numbered cards with coral accents, a client logo wall, and a hiring CTA band (bg-[#FF6B6B]) with white text and an outline button. Close with the standard dark footer.
```

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

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

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] 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