Best For
photography / gallery / dark
Dark Gallery
暗色画廊风
D
59/100Poor
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.
photographygallerydarkportfoliofull-bleedcinematicminimalvisual artistfilmmakerexhibition
Primary Move
Full-bleed images: use overflow-hidden on the container, object-cover w-full h-full on the image, padding-0 on the container
Watch Out
Never use colored shadows (shadow-lg shadow-2xl) or gradient backgrounds (bg-gradient-*) — they break the purity of the dark field
Showcase Entry
Live preview of the showcase page. Click to explore the full experience.
Color Palette
Primary
#0A0A0A
Secondary
#FFFFFF
Accent 1
#C4956A
Accent 2
#FFFFFF
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: 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
## 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 lightweightUse it in your workflow
Ship Dark 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/gallery-dark.jsonCLI
Grab this style's theme without leaving your terminal.
bash
npx stylekit-cli add gallery-darkMCP
Let Claude, Cursor & Windsurf apply “Dark Gallery” while you code.
bash
npx stylekit-mcpPart ofDark Mode Design Styles
Component Templates
Component Preview
画廊操作按钮
暗面按钮，hairline 边框，hover 时边框变为琥珀色，极轻字重与大字号字距
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
.gallery-dark-card {
background: #0A0A0A;
border: 1px solid #2A2A2A;
border-radius: 0.125rem;
overflow: hidden;
transition: all 300ms ease-out;
}
.gallery-dark-card:hover {
border-color: #4A4A4A;
}
.gallery-dark-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gallery-dark-image-container {
overflow: hidden;
position: relative;
background: #1A1A1A;
}
.gallery-dark-image-container:hover .gallery-dark-image {
opacity: 0.9;
transition: opacity 300ms ease-out;
}
.gallery-dark-caption {
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 0.75rem;
font-weight: 300;
line-height: 1.6;
color: #666666;
letter-spacing: 0.05em;
}
.gallery-dark-meta {
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 300;
color: #C4956A;
}
.gallery-dark-hairline {
border: none;
border-top: 1px solid #2A2A2A;
}
.gallery-dark-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (min-width: 768px) {
.gallery-dark-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
}
.gallery-dark-hero-overlay {
position: absolute;
inset: 0;
background: rgba(10, 10, 10, 0.5);
}
.gallery-dark-body {
background: #0A0A0A;
color: #FFFFFF;
font-family: ui-sans-serif, system-ui, sans-serif;
font-weight: 300;
}
.gallery-dark-section {
padding: 4rem 0;
}
@media (min-width: 768px) {
.gallery-dark-section {
padding: 6rem 0;
}
}
.gallery-dark-lightbox {
position: fixed;
inset: 0;
background: rgba(10, 10, 10, 0.95);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 300ms ease-out;
pointer-events: none;
}
.gallery-dark-lightbox.open {
opacity: 1;
pointer-events: auto;
}
.gallery-dark-lightbox img {
max-height: 90vh;
max-width: 90vw;
object-fit: contain;
}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
Dark Gallery is "subtraction as curation": strip away everything that competes with the work, leaving only the frame that holds the viewing experience.
Accessibility
Accessibility Score
WCAG 2.1 compliance analysis based on color contrast and typography readability.
59
Overall Score
Grade: D - Poor
Contrast Ratios
Score: 50/100Average Ratio: 8.01:1
AA FailAAA Fail
| Context | Colors | Ratio | AA | AAA |
|---|---|---|---|---|
| Text on background | /#ffffff / #0A0A0A | 19.8:1 | ||
| Secondary text on background | /#666666 / #0A0A0A | 3.45:1 | ||
| Muted text on background | /#4A4A4A / #0A0A0A | 2.23:1 | ||
| Text on secondary background | /#ffffff / #1A1A1A | 17.4:1 | ||
| Secondary text on secondary | /#666666 / #1A1A1A | 3.03:1 | ||
| Button primary | /#ffffff / #1A1A1A | 17.4:1 | ||
| Text on accent 1 | /#ffffff / #C4956A | 2.67:1 | ||
| Alt text on accent 1 | /#666666 / #C4956A | 2.15:1 | ||
| Text on accent 2 | /#ffffff / #ffffff | 1:1 | ||
| Alt text on accent 2 | /#666666 / #ffffff | 5.74:1 | ||
| Text on accent 3 | /#ffffff / #2A2A2A | 14.35:1 | ||
| Alt text on accent 3 | /#666666 / #2A2A2A | 2.5:1 | ||
| Text on accent 4 | /#ffffff / #1A1A1A | 17.4:1 | ||
| Alt text on accent 4 | /#666666 / #1A1A1A | 3.03:1 |
Readability
Score
80/100
Font Size
text-sm md:text-base
Font Weight
font-sans font-light tracking-tight text-white
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.