Dark Gallery

STYLEKIT_STYLE_REFERENCE
style_name: Dark Gallery
style_slug: gallery-dark
style_source: /styles/gallery-dark

# 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 Dark Gallery design expert. This style digitizes the high-end physical gallery experience: immersive dark field, full-bleed image priority, warm amber information layer, ultra-light minimal typography.

## Absolute Rules
- Background: primary bg-[#0A0A0A]; secondary bg-[#1A1A1A]; interactive bg-[#2A2A2A] / border-[#2A2A2A]
- Body: font-sans font-light, text-white
- Headings: font-light tracking-tight text-white in oversized weights (text-4xl through text-7xl)
- Warm amber #C4956A only for dates, tags, captions, wall labels — never for body paragraphs or main headings
- Images: object-cover w-full h-full full-bleed; containers: overflow-hidden padding-0 border-0
- Hierarchy through gray-scale stacking (#0A0A0A → #1A1A1A → #2A2A2A) and whitespace, never through hue
- All dividers: border-[#2A2A2A] hairline (1px)
- Radii: cards rounded-sm at most (2px); image containers rounded-none
- Tracking: headings tracking-tight, metadata tracking-[0.15em], navigation tracking-[0.2em]
- Transitions: transition-all duration-300 ease-out

## Forbidden
- Gradients bg-gradient-*
- Shadows of any kind (invisible on dark surfaces)
- Radii beyond rounded-sm; image containers must be square
- Light backgrounds (bg-white, bg-gray-50)
- Serif fonts (font-serif) or heavy weights (font-bold, font-semibold)
- Padding or border around images
- Colored or bright dividers

## Layout & Spacing
- Page shell: bg-[#0A0A0A]
- Thumbnail grid: grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6
- Card padding: p-4 (or p-0 for full-bleed image cards)
- Section rhythm: py-16 md:py-24
- Container padding: px-6 md:px-8 lg:px-12

## Self-Check
1. Background is not white or light gray — must be #0A0A0A series
2. All images are full-bleed (no padding, no border)
3. Warm amber only on metadata, not on body or headings
4. Font is font-sans font-light; no font-serif or font-bold
5. No gradients, no shadows, no large radii
6. Divider color is #2A2A2A, not light gray or colored

---

# Dark Gallery Design System

> A dark photography gallery portfolio: near-black canvases let full-bleed images command absolute attention; warm amber accents highlight metadata and captions while ultra-light typography retreats into the background. For photographers, filmmakers, and visual artists whose work speaks louder than chrome.

## Design Philosophy

Dark Gallery is "subtraction as curation": strip away everything that competes with the work, leaving only the frame that holds the viewing experience.

Core principles:
- The dark is the frame: #0A0A0A is not a "dark mode" background — it is the dimmed gallery room where each photograph emerges from shadow, spotlit by its own light
- Full-bleed is respect: images stretch to the edge without padding, shadow, or border — the image becomes its own boundary, detail has nowhere to hide
- Amber is presence: #C4956A warm amber is reserved for dates, tags, captions, and wayfinding — like the tiny reading light on a gallery wall label, it illuminates only what matters
- Restraint is trust: ultra-light font weights, hairline separators, generous whitespace, wide tracking — the more the design retreats, the deeper the viewing goes
- Sans-serif is now: body text is always sans-serif (Inter/font-sans), rejecting decorative typography entirely — as quiet and precise as a gallery brochure

Design principles:
- Color is atmosphere: #0A0A0A creates the immersive dark field; #1A1A1A layers for cards and containers; #2A2A2A defines borders and dividers — hierarchy is built entirely through gray-scale depth, not hue
- Typography is breathing: oversized headlines in ultra-light weight deliver visual impact; metadata in tiny caps with wide tracking provides context — two rhythms in dialogue
- The image is the headline: the traditional card layout with "title above, text below" dissolves — the image becomes the title. Captions only supplement: time, place, medium, dimensions
- Grid is rhythm: equal-width columns arrange thumbnails at a breathable distance; hover brings only a subtle brightness shift — letting the viewer choose their own focus
- Transition is immersion: page changes and lightbox opens should be smooth and unobtrusive — at least 300ms ease-out, like a film fade

This is Dark Gallery: not a "dark mode minimal" but a "gallery experience digitized" — translating the ceremony of the exhibition space, the immersion of the dark room, and the restraint of the wall label into pixels.

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#2A2A2A]
Radius: rounded-sm
```

### Shadow
```
sm: shadow-none
md: shadow-none
lg: shadow-none
hover: shadow-none
focus: shadow-none
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:opacity-90
Transition: transition-all duration-300
Active: active:opacity-80
```

### Typefaces
```
Heading: font-sans font-light tracking-tight text-white
Body: font-sans font-light text-white leading-relaxed
Mono: font-mono text-[#C4956A] text-sm
```

### Type scale
```
Hero: text-5xl md:text-7xl lg:text-8xl
H1: text-3xl md:text-5xl
H2: text-2xl md:text-4xl
H3: text-lg md:text-xl
Body: text-sm md:text-base
Small: text-xs
```

### Spacing
```
Section: py-16 md:py-24 lg:py-32
Container: px-6 md:px-8 lg:px-12
Card: p-0
Gap sm: gap-2 md:gap-3
Gap md: gap-4 md:gap-6
Gap lg: gap-8 md:gap-12
```

### Color roles
```
Background primary: bg-[#0A0A0A]
Background secondary: bg-[#1A1A1A]
Background accent: bg-[#C4956A], bg-white, bg-[#2A2A2A], bg-[#1A1A1A]
Text primary: text-white
Text secondary: text-[#666666]
Text muted: text-[#4A4A4A]
Button primary: bg-[#1A1A1A] text-white border border-[#2A2A2A]
Button secondary: bg-transparent text-white border border-[#2A2A2A]
```

---

## [FORBIDDEN]

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

### Banned classes
- `rounded-md`
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-3xl`
- `rounded-full`
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `shadow-2xl`
- `bg-white`
- `bg-gray-50`
- `bg-gray-100`
- `font-serif`
- `font-bold`
- `font-semibold`

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

### Why they are banned
- `rounded-md`: Dark Gallery caps radii at rounded-sm; full-bleed images must be square-cornered
- `rounded-lg`: Dark Gallery avoids rounded corners; images require sharp edges
- `rounded-full`: Dark Gallery never uses pill shapes; geometry must remain minimal
- `shadow-sm`: Dark Gallery surfaces are flat; depth comes from grayscale stacking, not elevation
- `shadow-lg`: Dark Gallery has no shadows in the dark field; elevation breaks immersion
- `bg-white`: White backgrounds puncture the immersive dark; use bg-[#0A0A0A] instead
- `bg-gray-50`: Light grays destroy the gallery atmosphere; use bg-[#1A1A1A] for elevated surfaces
- `font-serif`: Dark Gallery is contemporary sans-serif; serif belongs in academic contexts
- `font-bold`: Dark Gallery uses light weights only (font-light); bold is too aggressive for the aesthetic

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

---

## [REQUIRED]

### Every button must include
```
border border-[#2A2A2A]
rounded-sm
font-light
tracking-wider
transition-all duration-300
```

### Every card must include
```
bg-[#0A0A0A]
border border-[#2A2A2A]
rounded-sm
```

### Every input must include
```
bg-[#0A0A0A]
border border-[#2A2A2A]
rounded-sm
font-light
text-white
focus:outline-none focus:border-[#C4956A] focus:ring-1 focus:ring-[#C4956A]/30
```

---

## [COMPARE] Dark Gallery 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="border border-[#2A2A2A] rounded-sm font-light tracking-wider transition-all duration-300 bg-[#1A1A1A] text-white border border-[#2A2A2A]">
 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-[#0A0A0A] border border-[#2A2A2A] rounded-sm p-0">
 <h3 class="font-sans font-light tracking-tight text-white text-lg md:text-xl">{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-[#0A0A0A] border border-[#2A2A2A] rounded-sm font-light text-white focus:outline-none focus:border-[#C4956A] focus:ring-1 focus:ring-[#C4956A]/30" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Dark Gallery page skeletons

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

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

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

### Card grid
```html
<section class="bg-[#0A0A0A] text-white py-16 md:py-24 lg:py-32 px-6 md:px-8 lg:px-12">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-sans font-light tracking-tight text-white text-2xl md:text-4xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
 <!-- Card template - repeat for each card -->
 <div class="bg-[#0A0A0A] border border-[#2A2A2A] rounded-sm p-0">
 <h3 class="font-sans font-light tracking-tight text-white text-lg md:text-xl">{CARD_TITLE}</h3>
 <p class="font-sans font-light text-white leading-relaxed text-sm md:text-base text-[#4A4A4A]">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="bg-[#0A0A0A] border border-[#2A2A2A] rounded-sm font-light text-white focus:outline-none focus:border-[#C4956A] focus:ring-1 focus:ring-[#C4956A]/30" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#1A1A1A] text-[#666666] py-16 md:py-24 lg:py-32 px-6 md:px-8 lg:px-12">
 <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-sans font-light tracking-tight text-white text-lg md:text-xl">{LOGO_TEXT}</span>
 <p class="font-sans font-light text-white leading-relaxed text-xs">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-sans font-light tracking-tight text-white text-lg md:text-xl">{COLUMN_TITLE}</h4>
 <ul class="font-sans font-light text-white leading-relaxed text-xs">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Dark Gallery post-generation self check

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

### Token check
- [ ] Button includes: `border border-[#2A2A2A] rounded-sm font-light tracking-wider transition-all duration-300`
- [ ] Card includes: `bg-[#0A0A0A] border border-[#2A2A2A] rounded-sm`
- [ ] Input includes: `bg-[#0A0A0A] border border-[#2A2A2A] rounded-sm font-light text-white focus:outline-none focus:border-[#C4956A] focus:ring-1 focus:ring-[#C4956A]/30`

### Forbidden check
- [ ] Not using `rounded-md`
- [ ] Not using `rounded-lg`
- [ ] Not using `rounded-xl`
- [ ] Not using `rounded-2xl`
- [ ] Not using `rounded-3xl`
- [ ] Not using `rounded-full`
- [ ] Not using `shadow-sm`
- [ ] Not using `shadow-md`

### Style rule check
- [ ] Full-bleed images: use overflow-hidden on the container, object-cover w-full h-full on the image, padding-0 on the container
- [ ] Background uses bg-[#0A0A0A]; elevated surfaces use bg-[#1A1A1A]; dividers and borders use border-[#2A2A2A]
- [ ] Metadata (dates, tags, locations, wall labels) in text-[#C4956A] text-[10px] uppercase tracking-[0.15em] font-light
- [ ] Body text uses font-sans font-light text-white; headlines use text-4xl md:text-6xl lg:text-7xl font-light tracking-tight
- [ ] Cards use border border-[#2A2A2A] rounded-sm with no shadows or elevation

### Style drift check
- [ ] Does not violate: Never use colored shadows (shadow-lg shadow-2xl) or gradient backgrounds (bg-gradient-*) — they break the purity of the dark field
- [ ] Does not violate: Never use large border radii: rounded-sm at most; image containers must be rounded-none (square corners)
- [ ] Does not violate: Never use light backgrounds (bg-white, bg-gray-50, bg-gray-100) — they puncture the immersive dark atmosphere
- [ ] Does not violate: Never use colored or bright dividers: all separators use border-[#2A2A2A] hairline only
- [ ] Does not violate: Never use serif fonts (font-serif) or heavy font weights (font-bold, font-semibold) — keep it contemporary sans-serif and lightweight

### 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 Dark Gallery

---

## [EXAMPLES] Example prompts

### 1. 

，、

```
Design an exhibition feature page in Dark Gallery style: a large full-bleed hero image representing the exhibition, the exhibition title in oversized font-light text, a curatorial statement paragraph in text-[#666666] font-light, a horizontal scrollable row of full-bleed artwork thumbnails each with amber metadata (title, year, medium, dimensions), a visitor info section with amber-labeled fields (Location, Hours, Admission) in the dark footer, and a gallery masthead with a back link. Use rounded-sm on cards only, rounded-none on images, border-[#2A2A2A] hairlines throughout.
```

### 2. 

：、、

```
Create an artist profile page in Dark Gallery style: a hero section with a large portrait image on the left and the artist name in oversized font-light text, a nationality and birth year in amber meta text, a biography paragraph in text-[#666666] font-light, a 'Selected Works' section with a grid of full-bleed thumbnail cards each having amber metadata (title, year, medium), an 'Exhibitions' timeline where each entry has an amber year label and gray venue text, separated by border-[#2A2A2A] hairlines, and a dark footer. No shadows, no gradients, no light backgrounds.
```

## Absolute Bans (Match and Refuse)

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

- use colored shadows (shadow-lg shadow-2xl) or gradient backgrounds (bg-gradient-*) — they break the purity of the dark field
- use large border radii: rounded-sm at most; image containers must be rounded-none (square corners)
- use light backgrounds (bg-white, bg-gray-50, bg-gray-100) — they puncture the immersive dark atmosphere
- use colored or bright dividers: all separators use border-[#2A2A2A] hairline only
- use serif fonts (font-serif) or heavy font weights (font-bold, font-semibold) — keep it contemporary sans-serif and lightweight
- add padding or border around images — full-bleed is mandatory

## 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 colored shadows (shadow-lg shadow-2xl) or gradient backgrounds (bg-gradient-*) — they break the purity of the dark field
- [ ] never use large border radii: rounded-sm at most; image containers must be rounded-none (square corners)
- [ ] never use light backgrounds (bg-white, bg-gray-50, bg-gray-100) — they puncture the immersive dark atmosphere
- [ ] never use colored or bright dividers: all separators use border-[#2A2A2A] hairline only
- [ ] never use serif fonts (font-serif) or heavy font weights (font-bold, font-semibold) — keep it contemporary sans-serif and lightweight