Skip to content
Fredrin

Portfolio

Atelier

Gallery-dark portfolio where the work is lit and everything else disappears.

Near-black rooms with the work spotlit: full-bleed images, whisper-quiet chrome, and a single antique-gold accent for the one thing you should click.

Best for
Photographers, directors, architects and anyone whose work is the argument.
Type
"Cormorant Garamond", "Iowan Old Style", Georgia, serifA high-contrast serif at 300 weight for titles, set large and airy with +0.02em tracking; sans-serif captions at 12px uppercase with +0.12em tracking, in the muted tone.
Palette
Background #0C0C0CSurface #141414Ink #F2F0ECMuted #9A958DAccent #C9A227Border #262626
Page structure
  1. Minimal fixed header: a small serif wordmark left, and three lowercase links right, both fading to 60% opacity until hovered.
  2. Opening: one full-viewport image with the photographer's name in serif over it, bottom-left, and a scroll cue hairline.
  3. Series index: alternating full-width image blocks, each with a serif title, a year, and a one-line caption set beneath in muted uppercase.
  4. A three-column contact-sheet grid of smaller frames with generous gutters, each opening a lightbox.
  5. About: a portrait on the left at 4:5, a short serif biography right, and a list of clients and exhibitions in two muted columns.
  6. Print enquiry block: one line of copy and a gold-underlined mailto link.
  7. Footer: name, city, year, and three social links, all at 12px in muted.
Tags
dark · minimal · gallery · serif

The creation prompt

575 words, self-contained — paste it into a chat session with your coding agent and it builds Atelier end to end.

Build a photography portfolio site using the "Atelier" theme — Gallery-dark portfolio where the work is lit and everything else disappears.

## Art direction
Treat the page as a gallery wall at night. Chrome recedes to almost nothing — no visible borders, no cards, no shadows — and the imagery carries every bit of contrast. Give each piece an unreasonable amount of dark space around it. The gold accent appears perhaps four times on the whole site.

## Colour palette (use these exact values)
- Background: #0C0C0C
- Surface / cards: #141414
- Primary text: #F2F0EC
- Secondary text: #9A958D
- Accent (buttons, links, active state): #C9A227
- Text on accent: #0C0C0C
- Borders / dividers: #262626
Use exactly one accent. Everything that needs emphasis earns it through weight, scale or space instead of a second colour.

## Typography
- Headings: "Cormorant Garamond", "Iowan Old Style", Georgia, serif
- Body: "Inter", system-ui, sans-serif
- A high-contrast serif at 300 weight for titles, set large and airy with +0.02em tracking; sans-serif captions at 12px uppercase with +0.12em tracking, in the muted tone.

## Page structure
1. Minimal fixed header: a small serif wordmark left, and three lowercase links right, both fading to 60% opacity until hovered.
2. Opening: one full-viewport image with the photographer's name in serif over it, bottom-left, and a scroll cue hairline.
3. Series index: alternating full-width image blocks, each with a serif title, a year, and a one-line caption set beneath in muted uppercase.
4. A three-column contact-sheet grid of smaller frames with generous gutters, each opening a lightbox.
5. About: a portrait on the left at 4:5, a short serif biography right, and a list of clients and exhibitions in two muted columns.
6. Print enquiry block: one line of copy and a gold-underlined mailto link.
7. Footer: name, city, year, and three social links, all at 12px in muted.

## Components and detailing
There are effectively no components — just images, type and space. Links underline in gold on hover with a 1px offset rule. The lightbox is a full-screen black overlay at 96% opacity with the image centred, arrow keys bound, and a hairline close mark top-right. Images fade in from 0 opacity once loaded; never show a coloured skeleton.

## Motion
Slow and few. Images fade in over 600ms on scroll-in. The lightbox cross-fades at 300ms. No parallax, no zoom on hover, no scroll-jacking — the work does not need help.

## Copy and imagery
Captions only, never paragraphs, in the body of the site: title, place, year. The biography is the one place with prose and it stays under 120 words. Every image should be presented at its native aspect ratio; do not crop to a uniform grid.

## Non-negotiables
- Responsive from 360px through desktop — no horizontal scrolling at any width.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.

Pasting the prompt is step one. Fredrin runs the agent that builds it, one ticket per look.