The Arriaga Archive is more than a digital portfolio; it is a carefully crafted environment where visual storytelling meets clean, code‑driven design. In this post we break down the core elements that give the site its unmistakable identity.
Dark Navy as a Visual Anchor
Choosing #060216 as the background color establishes an immediate sense of depth. The near‑black navy provides a canvas that lets bright white text and muted gray tones breathe, creating contrast without the harsh glare of pure black. This choice also echoes the night‑sky motif often associated with exploration and discovery, inviting visitors to delve deeper into the work showcased.
Typography That Guides the Eye
Two typefaces dominate the visual language:
- Archivo Bold for headings – its heavyweight, rounded edges convey confidence and readability even at large sizes.
- IBM Plex Mono for body copy – the monospaced style adds a subtle tech‑savvy feel while remaining highly legible on all devices.
Both fonts are paired with generous line‑heights, ensuring that even dense paragraphs maintain a breathable rhythm.
Reusable Component Patterns
The site’s architecture is built around four reusable patterns. By reusing these blocks the design stays consistent while allowing each project to shine in its own way:
- Full‑width image followed by a two‑column title and body.
- Small left‑aligned image with subtitle and body on the right.
- Centered title and subtitle, then a full‑width image and body text.
- Left‑aligned title/subtitle with right‑aligned images and multiple paragraphs below.
These patterns also simplify responsive adjustments. Because each component already accounts for padding, margin, and minimal borders, the layout naturally adapts from desktop to mobile without breaking the visual rhythm.
Navigation That Serves Storytelling
The sticky header featuring uppercase links – UTOPÍA, PROYECTOS, CONTACTO, ABOUT ME – provides a clear, single‑page navigation experience. As users scroll, the page scrolls smoothly to the associated sections (#utopia, #proyectos, #contacto, #about). This fluid motion reinforces the feeling of moving through a curated exhibition rather than a traditional website.
Final Thoughts
By marrying a dark, immersive background with bold typography, minimalistic component patterns, and a seamless navigation experience, Arriaga Archive creates a portfolio that feels both modern and timeless. The design choices are intentional, each serving the larger goal of highlighting the work without distraction.