Sacramentum Advisors

An advisory firm's digital presence β€” designed and built end-to-end








Click to view live site β†’


Client:
Sacramentum Advisors

Year: 2026


Role:
Brand Β· UX Β· UI Β· Front-end Β· CMSΒ 

Timeline: Under 1 month


Team:
Solo

Stack: Next.js, GSAP, Framer Motion, Vercel




From corporate template to editorial credibility


Sacramentum Advisors is a boutique firm helping international investors establish a strategic presence in Uruguay β€” residency, real estate, capital structuring. Their team includes ex-J.P. Morgan, ex-Lehman Brothers, and a former Minister of Foreign Affairs.

The audience is high-trust, high-stakes β€” people deciding where to allocate seven-figure capital.

I designed and built the entire digital platform on my own β€” from brand and visual system, through UX, motion, and a custom CMS, to deployment.

Under one month, end to end, solo.






The starting point


The client came in with an existing website that was functional but invisible β€” a generic corporate template that didn't communicate the firm's actual positioning.

The brief looked simple: a website that communicates trust, clarity, and long-term vision. Two obvious solutions, both wrong:

  • A clean corporate site β†’ invisible. Generic advisory websites all look the same.
  • A flashy "premium" site β†’ performative. The audience is sophisticated; anything that smells like marketing copy actively hurts credibility.

The decision was to build something closer to editorial design than to a corporate site. Quiet, deliberate, and built around a narrative the user follows step by step.




Before & after


Before β€” Generic corporate template








The narrative


The site is structured as a six-step narrative the user follows top to bottom:

  • 01 β€” Context β€” Hero image of Uruguay's coast. Single sentence: "The advisory firm behind your move into Uruguay."
  • 02 β€” Validation β€” Why invest in Uruguay. Stats large and visible: #1, 97%, 98%, 3.5M.
  • 03 β€” Trust β€” Why Sacramentum. Three cards on a Uruguayan landscape: Track Record, Network, Approach.
  • 04 β€” Pathways β€” How we support you. A 3D rotating carousel of the four-step process.
  • 05 β€” Opportunities β€” Investment sectors. Four vertical color blocks (real estate, tech, agriculture, special projects).
  • 06 β€” People β€” Our team. Editorial photography, calibrated grayscale.

Every section earns the next one.


UX decisions,
before the visual


The hardest decisions on this project weren't visual or technical β€” they were about who comes through the door, and what they need at each step.

Two audiences, one site


Sacramentum's clients are international, but the firm operates in Uruguay. Two profiles land on the site:

  • The international investor β€” English by default, looking for credibility signals first, details second.
  • The local stakeholder β€” Spanish speaker, often a referral, already has context.

The site loads in English by default (the higher-stakes audience) with a discreet ES toggle in the top-right. The toggle preserves scroll position and section context β€” switching language doesn't kick you back to the top.



Color as cognitive anchor


The "Investment Sectors" section presents four options: Real Estate, IT & Innovation, Agriculture & Forestry, and Special Projects. The conventional move is four similar cards.

Instead, each sector gets its own full-bleed color block: navy blue for real estate, warm brown for tech, deep green for agriculture, terracotta for special projects.

The user navigates by color memory, not by reading. After scrolling once, they know where to come back if they want the agriculture section β€” it's the green one. Color is doing the wayfinding job that headers usually have to do.





Stats as the 3-second value proposition


The "Why invest in Uruguay" section opens with four numbers: #1, 97%, 98%, 3.5M. Each one is rendered three times larger than body copy, with the explanation sitting underneath in smaller text.

The reasoning: a sophisticated audience scrolling for the first time will spend three seconds before deciding to keep reading. Those three seconds need to communicate the country, not the firm. The stats do that work β€” Uruguay is stable, green, educated, and accessible β€” before any sales argument starts.

The stats also animate from 0 to their target value when scrolled into view. Subtle, but it makes them feel earned rather than declared.


Photography as credibility


Generic stock photography would have killed this project. The audience is sophisticated enough to recognize stock, and stock signals "we didn't bother."

Every image is a real photograph of Uruguay β€” Punta del Este, the Carrasco rambla, the eucalyptus forests, the granite coast. The site is anchored to a specific place, not a generic "premium" abstraction.

Team photos use a custom calibration (grayscale(100%) contrast(1.06) brightness(0.96)) that unifies portraits taken under different lighting into a single editorial language.


CTA discipline


The site has one primary action: "Schedule a consultation". It appears in three strategic places:

  • In the hero, as the first interactive element after the headline
  • At the end of "Why Sacramentum", as the natural next step after building trust
  • In the footer, as a closing invitation

That's it. No multiple competing buttons, no "Learn more" / "Get started" / "Contact us" scattered everywhere. The user has one decision to make, and the site keeps reminding them what it is β€” without nagging.


Animation as UX, not decoration


The site has roughly 14 distinct animated systems, but none of them exist for show. Each one is doing UX work:

  • Hero zoom β€” establishes scale and depth before the user sees the content
  • Letters arriving from depth β€” gives weight to headlines in a trust-driven context
  • 3D process carousel β€” turns a service list into a journey
  • Cards spreading like a deck β€” communicates "here are your options" spatially
  • Stat counters β€” makes numbers feel earned
  • Scroll-driven section transitions β€” provides feedback that the page is responding to the user

The rule: if the animation can be removed without losing meaning, it gets removed.




Three execution decisions
worth talking about


Beyond the UX choices, three execution decisions shaped the project. In each case, the obvious solution would have worked β€” but a different one did the job better.


01 β€” A custom CMS instead of a third-party service


The client needed to publish news, update team photos, and edit copy in two languages without calling me every time. The default move would have been Sanity, Contentful, or similar.

I built one from scratch instead.

A /admin panel with password auth, sitting in the same codebase, with five sections: News, Blog, Team, Copy (full EN/ES editing), Categories. Content is stored in Vercel Blob as versioned JSON files β€” every save creates a new timestamped file, sidestepping the CDN cache that would have shown stale content.

Why custom: a third-party CMS would mean managing a separate service, schema migrations, an extra bill, and a learning curve for the client. The custom version covers exactly what they need to change and locks down what they shouldn't.

It paid for itself the first week post-launch β€” the client published two news articles without contacting me.


02 β€” A 3D carousel instead of a process diagram


The "How We Support You" section explains the firm's four-step process. The conventional solution is a numbered grid or a vertical timeline.

I built a 3D cylindrical carousel β€” the cards arranged as faces of a hexagonal prism rotating around the user. Scroll vertically; the cylinder rotates horizontally. The active card faces you; the side cards visibly tilt back into space.

The background of the section also shifts color in sync with the active card β€” but the color isn't invented. A small canvas extracts the dominant color of each card's image at runtime and blends it 70% with the cream base palette. The transition happens over 700ms.

Most users don't consciously notice it; they just feel the section change tone.

The firm's process isn't a list of services, it's a journey. Turning a checklist into a spatial object communicates depth without a single extra word.




03 β€” Letters that arrive from depth


Section headlines don't fade in. Each character starts tilted backward in 3D space (rotated 18Β° on the X axis), slightly behind the screen on the Z axis, and slightly below its final position.

As the user scrolls, the letters straighten out and travel toward the viewer, one by one, with an 18ms stagger.

It's built with SplitType (per-character spans) and GSAP, scrubbed to scroll position so the user controls the pace.

The reason it's not just decoration: in a project where the firm's central asset is trust, words can't feel weightless. Giving them physical gravity β€” actual depth, actual arrival β€” does work that the copy alone can't.


One technical problem worth telling


Audio autoplay on iOS

The hero scroll has a subtle whoosh sound timed to the camera zoom. The first attempt β€” new Audio().play() at the trigger point β€” was silently rejected. Browser autoplay policy.

The fix: unlock the AudioContext on the user's first gesture (the click on the loader screen), then use that already-unlocked context to play the sound when the scroll reaches the trigger point.

The pattern matters beyond this project: iOS doesn't reject sound, it rejects sound played without context. Once you understand that, you stop fighting the platform and start working with its rules.


-->



Outcome


The site is live and being used as the firm's primary digital channel for international clients. The team publishes news and updates content directly through the admin without involving me.

For me, this project was the proof β€” to myself β€” that I can take a real client engagement from a blank canvas to a working, polished, fully-owned product alone, in under a month, without compromising on craft.



Reflection


Sacramentum is the project that clarified for me that I don't think of design and development as separate disciplines. The CMS architecture is a UX decision. The color of a section is a brand decision. The way letters arrive on screen is a positioning decision.

Every choice on this project β€” what to build custom, what to skip, what to animate, what to leave still β€” was a single question asked from different angles: does this serve the user's trust?

It's the project that proved I'm not a designer who hands off to a developer. I'm both β€” and the work is better because the conversation between the two never stops.