How to build a dark mode portfolio site that makes your client work the undeniable hero of every page.
Creative agency portfolios on dark backgrounds feel like exhibitions. Each project image is framed by darkness, creating separation and drama. Use a consistently neutral dark surface — HSL(0, 0%, 6%) to HSL(0, 0%, 10%) — so no project's colors are influenced by the background tint. The Nocturne Tech collection provides a range of dark neutrals calibrated for this gallery effect.
Dark portfolio navigation should be minimal and transparent — it exists to guide, not to decorate. Use light text at 70–80% opacity for navigation items, increasing to 100% on hover. Case study transitions on dark backgrounds can use your brand accent color as a brief flash or loading indicator, adding personality without compromising the gallery feel. Keep the focus ruthlessly on the work.
Agency portfolios include case study writeups — process descriptions, results, client quotes. Long text on dark backgrounds needs wider line spacing (1.6–1.8 line height) and slightly larger font sizes than light-mode equivalents. Use off-white text (90% lightness) and limit paragraph width to 65–75 characters. The Dark Mode UI Kit includes typography-optimized dark surface values for these content-heavy sections.
Move from the guide into a concrete palette lane
Guides explain the use case. Collections prove the taste. Packs handle the export and implementation layer.
