← Selected work

Agency experience

21GRAMS

This personal 2023 remake revisits a 21GRAMS concept I helped shape as Director of Experience, pairing its Essence-and-Craft story with smoother transitions, complete navigation, and keyboard interaction.

Role
Director of Experience (original concept) · Independent design and engineering (remake)
When
2023—2024 remake
Built with
SvelteKit · Rive · TypeScript
Product screenshot Static preview
Open live site
21GRAMS landing experience split into light and dark fields around oversized typography and a wireframe head
01

The context

21GRAMS was a newly rebranded healthcare agency looking for an identity that felt exclusive, mysterious, and genuinely consequential. The attitude behind the work was deliberately provocative: healthcare matters more than sneakers, so its agency should not look or behave like another fashion-led creative shop.

02

Finding the soul of the idea

The name draws from the story of an experiment that attempted to measure the weight of the human soul. During the agency's early brand research, I connected that idea to sacred geometry and the Platonic solids. The team developed a world divided between Essence and Craft: light and dark, soul and material, ascent and gravity. We used the dodecahedron as a recurring symbol for the soul.

That thinking shaped an ethereal, otherworldly web concept in which navigation was spatial and the transition between pages carried as much meaning as the pages themselves.

03

The original site and the remake

An external development team built the agency's original public site. I never felt its implementation fully delivered the concept: transitions were choppy, navigation lacked a complete menu, keyboard movement was absent, and accessibility had not been treated as part of the experience.

In January 2023, I independently rebuilt the site as a personal design-and-engineering study. The remake was never adopted as the agency's public website. It is an archival portfolio artifact that asks what the original concept could feel like with smoother movement, clearer navigation, on-screen directional controls, arrow-key navigation, and more accessible interaction.

04

Making movement feel continuous

The strongest part of the remake is its page-to-page flow. Svelte keyed blocks let each route enter and leave as part of one continuous environment rather than a collection of disconnected pages. The visible arrows and keyboard controls use the same directional model, while a conventional menu gives visitors a direct route when they do not want to explore spatially.

Building it became a focused study in Svelte transitions, keyed blocks, and keyboard interaction. The measure of success was not traffic or conversion—the site was not a public launch—but whether the original Essence-and-Craft idea finally felt fluid in use.

05

What I owned

As Director of Experience, I contributed to the original brand research, introduced the connection between the 21GRAMS story and sacred geometry, helped shape the Essence-and-Craft concept, contributed to the color story, and supported the broader brand work.

For the later remake, I designed and built the complete web experience. I cleaned up and animated the Platonic-solid artwork, but another 21GRAMS creative originally drew those forms in Illustrator. The site's copy was also created by the agency team, not by me.

Design system Emerging · Contract 1.0.0

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.

  1. The Rule of 21

    Seven is the base spatial step; twenty-one is the signature unit for geometry, rhythm, and motion.

  2. Two realms, one system

    Craft is dark and material while Essence is light and reflective, with shared roles that invert cleanly.

  3. Tactile restraint

    Fine offset borders, paper tones, condensed headings, and deliberate motion create character without excess.

  4. Navigation is spatial

    Directional movement is part of the experience while routes remain keyboard-operable and semantically linked.

  5. 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.

01

Foundation

Semantic color

  • Near black#191817

    Craft canvas and primary ink

  • Charcoal#373838

    Dark realm depth

  • Muted charcoal#4b4b48

    Supporting dark text

  • Paper#fffcf2

    Essence canvas and inverse text

  • Warm paper#d4ceba

    Subdued surfaces and detail

  • Aged paper#aca795

    Muted inverse text

  • Focus umber#7a4300

    Visible focus on light surfaces

02

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.

03

Inventory

Representative components

21GRAMS specimens showing crisp directional KeyArrow controls, closed and open navigation, and editorial typography in the viewer’s system theme
KeyArrow, navigation, and animated type rendered from the 21GRAMS component system.
  • KeyArrow

    A directional control makes spatial movement visible while retaining a conventional interaction contract.

    • Rest
    • Focus visible
    • Active
  • Nav

    The shared navigation maps routes to cardinal directions and remains operable by keyboard.

    • Closed
    • Open
    • Keyboard
  • TextAnimated

    Staged editorial copy supports cinematic pacing without withholding content when motion is reduced.

    • Reveal
    • Complete
    • Reduced motion
04

In the product

System at work

21GRAMS in-product editorial statement rendered in the light Essence realm or dark Craft realm according to the viewer's system theme

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.

Accessibility and resilience Spatial interaction keeps a semantic path

Native controls, 49px targets, visible focus, semantic links, and reduced-motion behavior protect the experience; full cross-realm contrast automation remains an active gap.

Next project Grande Burrito

More selected work

Elsewhere in the portfolio