Techniques
Gallery-wall image grid
A dense, edge-to-edge image grid that recreates the salon-style hanging of a contemporary gallery. Images sit in a CSS grid with minimal gaps and no card chrome, letting the artwork touch.
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 4px;
padding: 0;
background: #000000;
}
.gallery-grid img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-grid img:hover {
opacity: 0.85;
}
Void-frame card
An image card with zero visual chrome — the image IS the card. A hairline border appears only on hover to delineate the tile from the black ground.
.void-card {
position: relative;
background: #000000;
border-radius: 4px;
overflow: hidden;
border: 1px solid transparent;
transition: border-color 200ms ease;
}
.void-card:hover {
border-color: #1A1A1A;
}
.void-card img {
width: 100%;
display: block;
}
Serif-whisper heading
The characteristic Midjourney heading treatment — a refined serif set large against the void, with tight tracking and light weight that suggests art-catalog titling rather than web UI.
.serif-whisper {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.05;
color: #F5F5F5;
margin: 0;
padding: 0;
}