Agency experience
21GRAMS
The previous 21GRAMS site used typography, spatial interaction, and a light-and-dark visual world to introduce the healthcare agency as an experience rather than a conventional corporate site.
- Role
- Director of Experience · UX direction · Creative development
- When
- 2018—2019
- Built with
- Svelte · WebGL
The context
21GRAMS is a healthcare agency with an intentionally unconventional point of view. This case study covers the earlier immersive site at 21grams.vercel.app, created during my time as Director of Experience. It was later replaced by the current 21gramsworld.com experience.
The experience
The landing screen divides light and dark worlds around oversized 21GRAMS typography and a central wireframe head. Sparse invitations, spatial transitions, and deliberately atmospheric pacing position the agency through feeling before conventional navigation takes over.
The approach
The original experience uses Svelte, a canvas-based visual layer, and interactive 3D web elements. The unusual combination supports an agency narrative built around humanity, chemistry, and the tension between scientific precision and emotional weight.
What I owned
As Director of Experience, I led user-experience work and contributed hands-on across rapid prototyping, motion design, frontend development, illustration, web design, and identity. This site reflects that hybrid role: direction and execution held together rather than passed between separate disciplines.
A note on the archive
The original build remains online as an artifact of that period. It is distinct from the replacement now at 21gramsworld.com; this case study describes the earlier experience only.
The system behind the work
21GRAMS Rule of 21
A spatial editorial system built on a seven-pixel cadence, the signature Rule of 21, and two complementary visual realms.
-
The Rule of 21
Seven is the base spatial step; twenty-one is the signature unit for geometry, rhythm, and motion.
-
Two realms, one system
Craft is dark and material while Essence is light and reflective, with shared roles that invert cleanly.
-
Tactile restraint
Fine offset borders, paper tones, condensed headings, and deliberate motion create character without excess.
-
Navigation is spatial
Directional movement is part of the experience while routes remain keyboard-operable and semantically linked.
-
Legibility outranks numerology
The rule guides the work, but accessibility and content fit always have the final word.
Visual fingerprint
Identity, components, and proof.
A curated view of the system’s real foundations and state coverage—not a second documentation site.
Foundation
Semantic color
- Near black
#191817Craft canvas and primary ink
- Charcoal
#373838Dark realm depth
- Muted charcoal
#4b4b48Supporting dark text
- Paper
#fffcf2Essence canvas and inverse text
- Warm paper
#d4cebaSubdued surfaces and detail
- Aged paper
#aca795Muted inverse text
- Focus umber
#7a4300Visible focus on light surfaces
Foundation
Typography roles
- Display and headings Roboto Condensed
A compact voice for oversized statements and directional interface language.
- Body and utility Letter Gothic Std
A measured mono voice keeps navigation, labels, and supporting copy precise.
- Editorial quotation LTC Bodoni 175
A reflective serif introduces warmth and contrast inside the geometric framework.
Inventory
Representative components
KeyArrow
A directional control makes spatial movement visible while retaining a conventional interaction contract.
- Rest
- Hover
- Focus visible
- Active
- Disabled
Nav
The shared navigation maps routes to cardinal directions and remains operable by keyboard.
- Closed
- Open
- Directional
- Keyboard
- Reduced motion
TextAnimated
Staged editorial copy supports cinematic pacing without withholding content when motion is reduced.
- Reveal
- Complete
- Reduced motion
Error pattern
A status-aware dead end removes transition delay and offers one clear route back.
- 404
- Immediate
- Return home
In the product
System at work
Decision propagation
One system moves between two realms
The same seven-pixel cadence, condensed voice, and spatial navigation hold together the dark Craft experience and the light Essence experience.
Native controls, 49px targets, visible focus, semantic links, and reduced-motion behavior protect the experience; full cross-realm contrast automation remains an active gap.