Dark Gallery

# Visual style: Dark Gallery

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.

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

## Do
- 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
- Thumbnail grids use grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6 with hover:opacity-90 for a subtle brightness shift
- Navigation uses px-6 md:px-8 py-4 md:py-5 border-b border-[#2A2A2A] with links in text-[11px] uppercase tracking-[0.15em] font-light
- Inputs use bg-[#0A0A0A] border-[#2A2A2A] focus:border-[#C4956A] focus:ring-1 focus:ring-[#C4956A]/30 rounded-sm

## Don't
- 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
- Never add padding or border around images — full-bleed is mandatory

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