Best For
横滚 / 画廊 / 策展
Horizontal Gallery
横滚画廊
C
64/100Fair
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.
横滚画廊策展白盒作品集留白horizontal scrollgallerywhite cubeportfoliominimal极简
Primary Move
Build the gallery strip with overflow-x-auto snap-x snap-mandatory, each work shrink-0 snap-start
Watch Out
Never add shadows, rounded corners, or borders to artwork images (works must hang clean on the wall)
Showcase Entry
Live preview of the showcase page. Click to explore the full experience.
Color Palette
Primary
#1A1A1A
Secondary
#FCFCFA
Accent 1
#A85A3A
Accent 2
#8A8A85
AI Implementation
Copy the Hard Prompt first, then use the spec when needed
Use the Hard Prompt by default to generate UI. Use the Design Spec to understand, modify, and review the style. Use the Creative Brief for early exploration.
Hard Prompt
Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.
When to use
- When AI should generate UI directly
- When repeated outputs must stay consistent
- When style drift is the main risk
How to use
- Copy the full prompt
- Append the concrete requirement
- Review against forbidden rules and UI states
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
## 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 wallUse it in your workflow
Ship Horizontal Gallery in your AI coding tool
shadcn
Drop this style's theme into an existing shadcn project with one command.
bash
npx shadcn add https://www.stylekit.top/r/horizontal-gallery.jsonCLI
Grab this style's theme without leaving your terminal.
bash
npx stylekit-cli add horizontal-galleryMCP
Let Claude, Cursor & Windsurf apply “Horizontal Gallery” while you code.
bash
npx stylekit-mcpComponent Templates
Component Preview
画廊按钮
无圆角墨黑按钮，大写字母配舒展字距，如同展签上的指令
Frontend Readiness
Dark Mode, States, Motion, and Accessibility
This layer tracks whether the style is ready for real websites: theme modes, state feedback, keyboard access, and performance constraints.
Overall
51%
Fallback
Dark Mode
0%
MissingUI States
79%
PartialMotion
70%
PartialA11y
70%
PartialPerformance
35%
FallbackKey State Coverage
lightHoverFocus VisibleDisabledLoadingEmptyErrorSuccess
Button
Default / Hover / Focus Visible / Active / Disabled
Input
Default / Hover / Focus Visible / Disabled / Error
Card
Default / Hover / Focus Visible / Loading / Skeleton
Form
Default / Focus Visible / Disabled / Loading / Error
Implementation Notes
- No curated dark-mode contract exists yet.
- Check contrast in both light and dark modes.
- Check heavy shadows, blur, large media, and scroll-linked effects manually.
- No style-specific performance cost profile has been curated yet.
Global Styles
Global CSS
css
/* Horizontal Gallery Global Styles */
/* Signature horizontal strip: snap scroll with hidden scrollbar */
.hgallery-strip {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.hgallery-strip::-webkit-scrollbar {
display: none;
}
.hgallery-item {
flex-shrink: 0;
scroll-snap-align: start;
}
.hgallery-item--center {
scroll-snap-align: center;
}
/* Sticky title cell that walks along with the strip */
.hgallery-sticky-title {
position: sticky;
left: 0;
z-index: 10;
background: #FCFCFA;
}
/* Museum wall label caption */
.hgallery-caption {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #8A8A85;
}
.hgallery-index {
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.25em;
color: #A85A3A;
}
/* Hairline rules */
.hgallery-hairline {
border-color: #E8E6E1;
border-width: 1px;
}
/* Hairline scroll progress track */
.hgallery-progress {
position: relative;
height: 1px;
background: #E8E6E1;
}
.hgallery-progress-thumb {
position: absolute;
top: 0;
left: 0;
height: 1px;
background: #1A1A1A;
transition: width 0.2s ease-out;
}
/* Horizontal Gallery Design Tokens */
:root {
--horizontal-gallery-wall: #FCFCFA;
--horizontal-gallery-ink: #1A1A1A;
--horizontal-gallery-ink-soft: #2E2E2C;
--horizontal-gallery-muted: #8A8A85;
--horizontal-gallery-hairline: #E8E6E1;
--horizontal-gallery-terracotta: #A85A3A;
}
@keyframes horizontal-gallery-fade-in {
from { opacity: 0; transform: translateX(16px); }
to { opacity: 1; transform: translateX(0); }
}
.horizontal-gallery-animate-in {
animation: horizontal-gallery-fade-in 0.6s ease-out both;
}Compatible Visual Styles
Try Pairing
Horizontal Gallery is a layout pattern that can be paired with the following visual styles.
IDE Integration
IDE Configuration Export
Download configuration files for AI coding assistants to generate code in this style.
Style Pack
Export Style Pack
Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.
Metadata
Style metadata including version information
Design Tokens
Compatible with Figma / Style Dictionary / Tokens Studio
Tailwind Preset
Tailwind CSS theme preset, import directly in config
Global CSS
CSS variables and base styles
shadcn Theme
shadcn/ui theme configuration
CSS Variables
Pure CSS variables, works with any project
SKILL.md
Loadable skill pack for Cursor / Claude Code / VS Code
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.
Accessibility
Accessibility Score
WCAG 2.1 compliance analysis based on color contrast and typography readability.
64
Overall Score
Grade: C - Fair
Contrast Ratios
Score: 58/100Average Ratio: 8.38:1
AA FailAAA Fail
| Context | Colors | Ratio | AA | AAA |
|---|---|---|---|---|
| Text on background | /#1A1A1A / #FCFCFA | 16.94:1 | ||
| Secondary text on background | /#2E2E2C / #FCFCFA | 13.25:1 | ||
| Muted text on background | /#8A8A85 / #FCFCFA | 3.38:1 | ||
| Text on secondary background | /#1A1A1A / #E8E6E1 | 13.95:1 | ||
| Secondary text on secondary | /#2E2E2C / #E8E6E1 | 10.91:1 | ||
| Button primary | /#FCFCFA / #1A1A1A | 16.94:1 | ||
| Text on accent 1 | /#1A1A1A / #A85A3A | 3.47:1 | ||
| Alt text on accent 1 | /#2E2E2C / #A85A3A | 2.71:1 | ||
| Text on accent 2 | /#1A1A1A / #1A1A1A | 1:1 | ||
| Alt text on accent 2 | /#2E2E2C / #1A1A1A | 1.28:1 |
Readability
Score
77/100
Font Size
text-sm md:text-base
Font Weight
font-serif font-light tracking-wide
Line Height
default
Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.