Hi. My Name's Calvin

I'm a product designer who writes and codes.

I work on projects like these
No Code Rules People Understand
Design System Wins
Building a Distributed Brand
Neighborhood Scale Software

Building a Distributed Brand

The Xalgorithms Foundation is a Decentralized Collaborative Organization. It has contributors across continents. Contributors lend their expertise across a variety of project types and disciplines. To facilitate the organization's mission I established tools and frameworks that facilitate cross-functional collaboration.

outcome mapCharting the Outcomes of the Xalgorithms Foundation

A brand embodies the organization's values, contributing to the creation of a shared sense of community among distributed contributors. To define a brand for the Xalgorithms Foundation, I had to understand the distinct challenges and opportunities specific to a decentralized context. In a Headless Brand Toby Shorin writes:

Brand is one of the strongest assets for decentralized protocols. A headless brand strategy is an ecosystemic affair and entails the mobilization of a decentralized set of actors. At its core, it revolves around giving agency to different stakeholders in a way that lets them coordinate more effectively and feel connected to the brand.

Understood as a constellation of assets which generate orientation at key points in the collaborative journey, the brand situates contributors within a common context of the organization's intended impact, and emergent outcomes. This is a characteristic of communications across channels. Given the open-source nature of the organization, the collaborative journey spans a person's first encounters on social media, all the way through to engaging with activities within the project management structure. ^5f6ec4

org communication and management channelsCommunication and Management Channels

In this context, the organizations identity is contingent upon the action of the contributors. It is not a set of guidelines that mandate the form of deliverable. Rather it is a set of building blocks that people use to organically define the culture of the organization. Operationalizing the brand requires engaging with the sociological reality of the organization—and this calls for defining collateral that is tolerant, expressive, and simple enough to enable use by contributors in ways that supports their emergent goals. ^a82a79

Logo Mark

I designed the logo mark through an iterative process. The mark references the quaternary logic central to the and tabular programming style articulated in the DWDS paper. At the same time, shapes in the mark reference "operational bubbles" which describe the spheres of collective sense-making held across individuals in collaborative environments. Together these symbols speak to the intended outputs of the organization.

lichen interface previewThe Lichen interface was one of the primary pieces of inspiration

In order for the logo to be effective, it was important to consider both the formal qualities and the ease of use. Creating a mark that was tolerant enough that it could be recreated, modified, and expressed in a variety of mediums. The idea was that a formal lockup was not needed. Rather a simply geometry was defined that could be reproduced in a variety of contexts.

// a constellation among the stars
*                           *         .
    ●  •  ●        *          
    •  ●  .          . 
    ●  .  •                                     . 
.                           *
hand sketch

Finally, I included assets in the design system npm package, making it easy for developers to access and utilize these assets within applications.

Design System

preview of design system

Three of the core Xalgorithms Foundation outputs are applications. While the applications are the core focus, there are also websites needed for working groups. In order to establish a cohesive identity across multiple applications, it decided a design system was needed to consolidate the components and ensure consistency. Full documentation here.

$ yarn add xf-material-components
// App.js

import Logo from 'xf-material-components'

function App() {
  return (
    <div className="App">
         <Logo />

Read the Case Study below to learn how I created this component library.

Simple Modular Components

The result of my effort is a simple, modular react component library that can be swiftly integrated into an application. This react library also corresponds to a component library built in Figma, streamlining the design process.

figma library preview


Many of the most important points on the contribution journey are defined by language, rather than visuals. Thoughtful, in-depth writing is central to communicating, and engaging with the contributor community.

Given that the identity is grounded in the ecosystem of contributors, a traditional guide to voice does not make sense. Rather, Craig Atkinson and I took an alternative approach, showcasing the diversity of voices and perspective involved an asset. This strategy seeks to highlight the work and writing of contributors across the organization, forming a mosaic of thought, rather than a monolithic voice.

Craig Atkinson, created a social media pipeline to operationalize this process. His work provides a simple framework that makes it straightforward to highlights the contributors of the community.

Next Steps

This work is ongoing. Further efforts are needed to support community development. These primarily involve improving interactions at key points along the contribution journey.

See More Work

Building a Distributed Brand
Design System Wins