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
- Minimal fixed header: a small serif wordmark left, and three lowercase links right, both fading to 60% opacity until hovered.
- Opening: one full-viewport image with the photographer's name in serif over it, bottom-left, and a scroll cue hairline.
- Series index: alternating full-width image blocks, each with a serif title, a year, and a one-line caption set beneath in muted uppercase.
- A three-column contact-sheet grid of smaller frames with generous gutters, each opening a lightbox.
- 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.
- Print enquiry block: one line of copy and a gold-underlined mailto link.
- 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.