Horizontal Gallery

STYLEKIT_STYLE_REFERENCE
style_name: Horizontal Gallery
style_slug: horizontal-gallery
style_source: /styles/horizontal-gallery

# 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 curator-minded frontend expert specializing in the Horizontal Gallery (white cube) layout. All generated code must strictly follow these constraints:

## Absolute Rules

- The core content area is a horizontal strip: overflow-x-auto snap-x snap-mandatory, items shrink-0 snap-start
- Artwork images: rounded-none, no border, no shadow, object-cover, aspect-[4/5] or aspect-[3/2]
- Every work carries an index (No. 01 / Fig. 01) in terracotta #A85A3A and a caption below the image: text-xs uppercase tracking-[0.2em] text-[#8A8A85]
- Background is gallery white #FCFCFA, text is ink #1A1A1A, all dividers are hairlines border-[#E8E6E1]
- Horizontal whitespace between works is generous: gap-16 md:gap-24, wall margins px-6 md:px-20
- Section titles use font-serif font-light tracking-wide; body text is sans
- Hide horizontal scrollbars (scrollbar-width: none; ::-webkit-scrollbar display: none) and show a hairline progress line or arrows instead
- A sticky title cell (sticky left-0 bg-[#FCFCFA]) may accompany the strip

## Forbidden

- Shadows, rounded corners, or borders on artwork images
- Text overlaid on artwork
- Vertical masonry or multi-row grids inside the strip
- Borders thicker than 1px anywhere
- Gradient, textured, or saturated multicolor backgrounds on the wall
- Any accent color other than restrained terracotta #A85A3A

## Layout Structure

Strip container:
- flex gap-16 md:gap-24 overflow-x-auto snap-x snap-mandatory
- hidden scrollbar, hairline progress underneath

Work cell:
- figure with w-72 to w-[28rem], shrink-0, snap-start
- image block aspect-[4/5] or aspect-[3/2] overflow-hidden
- figcaption: mt-5 pt-4 border-t border-[#E8E6E1], index then serif title then caption

## Responsive

- Mobile (< 768px): narrower cells (w-64), wall margins px-6, keep the strip horizontal
- Tablet (768px+): w-80 cells, px-12 margins
- Desktop (1024px+): mixed w-80 / w-[28rem] cells, px-20 margins, sticky title cell enabled
- Respect prefers-reduced-motion: disable smooth scrolling and scale transitions

## Self-Check

After generating code, verify:
1. The strip snaps horizontally and the scrollbar is hidden
2. No artwork image has a shadow, radius, or border
3. Every work shows an index and a hairline caption below the image
4. All lines on the page are 1px hairlines in #E8E6E1
5. The only accent color present is #A85A3A

---

# Horizontal Gallery Design System

> A white-cube, curator-style portfolio layout. Borderless large images line up along a horizontal snap-scroll rail; whitespace acts as the gallery wall, numbered hairline captions echo museum labels, and viewing becomes a walk.

## Design Philosophy

Horizontal Gallery imagines the page as a white-cube museum: viewing is not an infinite downward feed but a forward walk along an exhibition line, pausing in front of each work.

Core principles:
- Whitespace is the wall: gallery white #FCFCFA is not emptiness but the silence between works; spacing itself is a curatorial decision
- Horizontal is the route: overflow-x-auto plus scroll-snap turns scrolling into walking, each piece snapping to rest before the viewer
- The work is the protagonist: no borders, no shadows, no rounded corners; container decoration must never compete with the artwork
- Captions are curation: No. 01 numbering and hairline uppercase captions speak in the voice of a museum wall label

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#E8E6E1]
Radius: rounded-none
```

### Shadow
```
sm: shadow-none
md: shadow-none
lg: shadow-none
hover: shadow-none
focus: ring-1 ring-[#1A1A1A]
```

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

### Typefaces
```
Heading: font-serif font-light tracking-wide
Body: font-sans font-light
Mono: font-mono
```

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

### Spacing
```
Section: py-20 md:py-28 lg:py-36
Container: px-6 md:px-12 lg:px-20
Card: p-0
Gap sm: gap-8
Gap md: gap-12 md:gap-16
Gap lg: gap-16 md:gap-24
```

### Color roles
```
Background primary: bg-[#FCFCFA]
Background secondary: bg-[#E8E6E1]
Background accent: bg-[#A85A3A], bg-[#1A1A1A]
Text primary: text-[#1A1A1A]
Text secondary: text-[#2E2E2C]
Text muted: text-[#8A8A85]
Button primary: bg-[#1A1A1A] text-[#FCFCFA] hover:bg-[#2E2E2C]
Button secondary: bg-transparent text-[#1A1A1A] border border-[#1A1A1A]
```

---

## [FORBIDDEN]

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

### Banned classes
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-full`
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `shadow-2xl`
- `border-2`
- `border-4`
- `bg-gradient-to-r`
- `bg-gradient-to-br`

### Banned patterns
- matches `^rounded-(sm|md|lg|xl|2xl|3xl|full)$`
- matches `^shadow-(sm|md|lg|xl|2xl)$`
- matches `^border-[248]$`
- matches `^bg-gradient-`

### Why they are banned
- `rounded-lg`: Horizontal Gallery hangs works flush on the wall; every corner stays rounded-none
- `shadow-md`: Artwork and cards must cast no shadow on the gallery wall
- `border-2`: All lines are 1px hairlines in #E8E6E1; heavy frames are forbidden
- `bg-gradient-to-r`: The wall stays gallery white #FCFCFA; no gradient or textured backgrounds

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

---

## [REQUIRED]

### Every button must include
```
rounded-none
uppercase
tracking-[0.2em]
transition-colors duration-300
```

### Every card must include
```
rounded-none
shadow-none
```

### Every input must include
```
rounded-none
bg-transparent
border-b border-[#E8E6E1]
focus:border-[#1A1A1A]
```

---

## [COMPARE] Horizontal 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="rounded-none uppercase tracking-[0.2em] transition-colors duration-300 bg-[#1A1A1A] text-[#FCFCFA] hover:bg-[#2E2E2C]">
 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="rounded-none shadow-none p-0">
 <h3 class="font-serif font-light tracking-wide text-xl md:text-2xl">{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="rounded-none bg-transparent border-b border-[#E8E6E1] focus:border-[#1A1A1A]" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Horizontal 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-[#FCFCFA] text-[#1A1A1A] border border-[#E8E6E1] px-6 md:px-12 lg:px-20">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-12 md:gap-16">
 <a href="/" class="font-serif font-light tracking-wide text-xl md:text-2xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-12 md:gap-16 font-sans font-light text-xs">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#A85A3A] text-[#1A1A1A] py-20 md:py-28 lg:py-36 px-6 md:px-12 lg:px-20">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-serif font-light tracking-wide text-5xl md:text-6xl lg:text-7xl">
 {HEADLINE}
 </h1>
 <p class="font-sans font-light text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="rounded-none uppercase tracking-[0.2em] transition-colors duration-300 bg-[#1A1A1A] text-[#FCFCFA] hover:bg-[#2E2E2C]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#FCFCFA] text-[#1A1A1A] py-20 md:py-28 lg:py-36 px-6 md:px-12 lg:px-20">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-serif font-light tracking-wide text-3xl md:text-4xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 md:gap-16">
 <!-- Card template - repeat for each card -->
 <div class="rounded-none shadow-none p-0">
 <h3 class="font-serif font-light tracking-wide text-xl md:text-2xl">{CARD_TITLE}</h3>
 <p class="font-sans font-light text-sm md:text-base text-[#8A8A85]">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="rounded-none bg-transparent border-b border-[#E8E6E1] focus:border-[#1A1A1A]" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#E8E6E1] text-[#2E2E2C] py-20 md:py-28 lg:py-36 px-6 md:px-12 lg:px-20">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-16 md:gap-24">
 <div>
 <span class="font-serif font-light tracking-wide text-xl md:text-2xl">{LOGO_TEXT}</span>
 <p class="font-sans font-light text-xs">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-serif font-light tracking-wide text-xl md:text-2xl">{COLUMN_TITLE}</h4>
 <ul class="font-sans font-light text-xs">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

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

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

### Token check
- [ ] Button includes: `rounded-none uppercase tracking-[0.2em] transition-colors duration-300`
- [ ] Card includes: `rounded-none shadow-none`
- [ ] Input includes: `rounded-none bg-transparent border-b border-[#E8E6E1] focus:border-[#1A1A1A]`

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

### Style rule check
- [ ] Build the gallery strip with overflow-x-auto snap-x snap-mandatory, each work shrink-0 snap-start
- [ ] Artwork images are always rounded-none with no border and no shadow, object-cover inside aspect-[4/5] or aspect-[3/2]
- [ ] Give every work a No. 01 / Fig. 01 index and a hairline caption text-xs uppercase tracking-[0.2em] text-[#8A8A85] below the image
- [ ] All dividers are hairlines: border-t border-[#E8E6E1], never thicker than 1px
- [ ] Keep vast horizontal whitespace between works gap-16 md:gap-24, with wall margins px-6 md:px-20 at both ends

### Style drift check
- [ ] Does not violate: Never add shadows, rounded corners, or borders to artwork images (works must hang clean on the wall)
- [ ] Does not violate: Never place text on top of artwork; captions live only below the image
- [ ] Does not violate: Never mix vertical masonry or multi-row grids inside the horizontal strip
- [ ] Does not violate: Never use heavy borders (border-2 and up); every line stays a hairline
- [ ] Does not violate: Never use flashy backgrounds: gradient walls, textured walls, or large color blocks are forbidden on the gallery wall

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

---

## [EXAMPLES] Example prompts

### 1. 

```
Create a photographer portfolio in Horizontal Gallery style:
1. Gallery white #FCFCFA wall, ink #1A1A1A text, hairline dividers border-[#E8E6E1]
2. Hero with a font-serif font-light exhibition title and dates in uppercase tracked caption text
3. Core: a horizontal strip (flex gap-16 md:gap-24 overflow-x-auto snap-x snap-mandatory) of 8 photos
4. Each photo: shrink-0 snap-start, aspect-[4/5] or aspect-[3/2], rounded-none, no shadow, no border
5. Below each photo: No. 0X index in #A85A3A, serif title, then medium/year caption in text-xs uppercase tracking-[0.2em] text-[#8A8A85]
6. Sticky title cell (sticky left-0 bg-[#FCFCFA]) as the first strip item with a 01 / 08 counter
7. Hidden scrollbar plus a 1px progress line and prev/next arrows
8. Footer with gallery hours as wall-label typography
```

### 2. 

，

```
Build a museum exhibition page in Horizontal Gallery style:
1. Hairline nav with serif gallery wordmark and uppercase tracked links
2. Exhibition hero: large font-serif font-light title, dates, and an On View badge with hairline border
3. Horizontal snap strip of artworks with No. 0X indices and museum wall-label captions below each image
4. Curatorial statement section: two columns, serif pull quote plus sans body in #8A8A85
5. Catalogue table with hairline row dividers: No., Title, Medium, Year, Status
6. RSVP form with underline inputs (bg-transparent border-b border-[#E8E6E1] rounded-none)
7. Only accent color: terracotta #A85A3A for indices and small highlights
No shadows, no rounded corners, no text over images anywhere
```

### 3. Lookbook

 lookbook

```
Create a fashion lookbook in Horizontal Gallery style:
1. Treat each product photo as an exhibit: borderless, shadowless, rounded-none, aspect-[4/5]
2. Horizontal snap-mandatory strip with vast gap-16 md:gap-24 whitespace between looks
3. Under each look: Fig. 0X index in #A85A3A, serif product name, price in text-xs uppercase tracking-[0.2em] text-[#8A8A85]
4. Sticky season title (sticky left-0) accompanying the scroll
5. Hairline-only UI: 1px #E8E6E1 dividers, underline inputs, rounded-none uppercase tracked buttons
6. Gallery white #FCFCFA background throughout, no gradients or color blocks
7. Hidden scrollbars with a thin progress line and a 03 / 12 counter
```

## Absolute Bans (Match and Refuse)

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

- add shadows, rounded corners, or borders to artwork images (works must hang clean on the wall)
- place text on top of artwork; captions live only below the image
- mix vertical masonry or multi-row grids inside the horizontal strip
- use heavy borders (border-2 and up); every line stays a hairline
- use flashy backgrounds: gradient walls, textured walls, or large color blocks are forbidden on the gallery wall
- use saturated multicolor decoration; the only accent allowed is a restrained terracotta #A85A3A

## 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 add shadows, rounded corners, or borders to artwork images (works must hang clean on the wall)
- [ ] never place text on top of artwork; captions live only below the image
- [ ] never mix vertical masonry or multi-row grids inside the horizontal strip
- [ ] never use heavy borders (border-2 and up); every line stays a hairline
- [ ] never use flashy backgrounds: gradient walls, textured walls, or large color blocks are forbidden on the gallery wall