Styledex
← Index

Horizontal Gallery

横滚画廊

stylekitMITPortfolio · portfolioDashboard · dashboardMinimal · minimalLight · lightMedium · mediumNeutral · neutralMuted · mutedSerif · serif

白盒美术馆式的横向滚动作品集布局，无边框大图沿水平展线依次排开，留白即展墙，编号与极细图注还原策展语言，观看是一场步行。

NNorthwind
Product · Pricing
Specimen
Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128
Active
4.8
Score
12ms
Edge

Attribution

"Horizontal Gallery" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/horizontal-gallery @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/horizontal-gallery · bfa7da909e86 · © AnxForever

Do

  • 画廊条带使用 overflow-x-auto snap-x snap-mandatory，每件作品 shrink-0 snap-start
  • 作品图一律 rounded-none 无边框无阴影，object-cover 填充 aspect-[4/5] 或 aspect-[3/2]
  • 每件作品配编号 No. 01 / Fig. 01，图注用 text-xs uppercase tracking-[0.2em] text-[#8A8A85] 置于图外下方
  • 分割线全部是 hairline：border-t border-[#E8E6E1]，永远只有 1px
  • 作品之间保持巨大水平留白 gap-16 md:gap-24，条带首尾留出展墙边距 px-6 md:px-20
  • 章节标题作为条带首格并 sticky left-0 bg-[#FCFCFA]，伴随横滚始终在场
  • 标题使用 font-serif font-light tracking-wide，正文 sans 浅色，层级靠字号与字距而非加粗
  • 隐藏横滚滚动条（scrollbar-width: none 与 ::-webkit-scrollbar display: none），用细线进度和箭头代替

Don't

  • 禁止给作品图加阴影、圆角或边框（作品必须像直接挂在展墙上一样干净）
  • 禁止把文字压在作品图上，图注只能出现在图外下方
  • 禁止在横滚条带内混排竖向瀑布流或多行网格
  • 禁止厚重边框 border-2 及以上，一切线条保持 hairline
  • 禁止花哨背景：渐变墙、纹理墙、大面积色块都不允许出现在展墙上
  • 禁止高饱和多色装饰，点缀色只允许赤陶 #A85A3A 少量出现

Prompt

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

---
"Horizontal Gallery" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/horizontal-gallery @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Horizontal Gallery. \"Horizontal Gallery\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/horizontal-gallery @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-horizontal-gallery",
      "license": "MIT",
      "attribution": "\"Horizontal Gallery\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/horizontal-gallery @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#fcfcfa"
    },
    "foreground": {
      "$type": "color",
      "$value": "#1a1a1a"
    },
    "card": {
      "$type": "color",
      "$value": "#fcfcfa"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#1a1a1a"
    },
    "primary": {
      "$type": "color",
      "$value": "#1a1a1a"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#fcfcfa"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#1a1a1a"
    },
    "accent": {
      "$type": "color",
      "$value": "#a85a3a"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#ededeb"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#6a6a6a"
    },
    "border": {
      "$type": "color",
      "$value": "#d9d9d7"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#1a1a1a"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0px"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Horizontal Gallery" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/horizontal-gallery @ bfa7da909e86. */
:root {
  --background: #fcfcfa;
  --foreground: #1a1a1a;
  --card: #fcfcfa;
  --card-foreground: #1a1a1a;
  --primary: #1a1a1a;
  --primary-foreground: #fafaf9;
  --secondary: #fcfcfa;
  --secondary-foreground: #1a1a1a;
  --accent: #a85a3a;
  --accent-foreground: #fafaf9;
  --muted: #ededeb;
  --muted-foreground: #6a6a6a;
  --border: #d9d9d7;
  --destructive: #dc2626;
  --ring: #1a1a1a;
  --radius: 0px;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Horizontal Gallery" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/horizontal-gallery @ bfa7da909e86. */
/** Tailwind theme extend for Horizontal Gallery (stylekit-horizontal-gallery) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#fcfcfa",
        "foreground": "#1a1a1a",
        "card": "#fcfcfa",
        "primary": "#1a1a1a",
        "primary-foreground": "#fafaf9",
        "secondary": "#fcfcfa",
        "accent": "#a85a3a",
        "muted": "#ededeb",
        "border": "#d9d9d7",
        "destructive": "#dc2626",
        "ring": "#1a1a1a"
      },
      "borderRadius": {
        "lg": "0px"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Horizontal Gallery" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/horizontal-gallery @ bfa7da909e86. */
@layer base {
:root {
  --background: #fcfcfa;
  --foreground: #1a1a1a;
  --card: #fcfcfa;
  --card-foreground: #1a1a1a;
  --primary: #1a1a1a;
  --primary-foreground: #fafaf9;
  --secondary: #fcfcfa;
  --secondary-foreground: #1a1a1a;
  --accent: #a85a3a;
  --accent-foreground: #fafaf9;
  --muted: #ededeb;
  --muted-foreground: #6a6a6a;
  --border: #d9d9d7;
  --destructive: #dc2626;
  --ring: #1a1a1a;
  --radius: 0px;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}