Creating a design system for neurodivergent humans

Documenting steps and research that's informing options & decisions

location Raleigh,  NC,  US

I started my first real freelance contract last week—and—for the first time in a long while, I’m able to focus on building something for others.

Currently, I’m working with a bootstrapped start-up that’s developed a people-first project management system for neurodivergent adults.

It’s a first-of-its-kind product, specifically focused on supporting the 200-million neurospicy global knowledge workers. Basically: helping workers get shit done in a way that works with them and their brains. Not against.*

Design systems

This is one of my first true design system projects, though it’s not a totally new thing.

As soon as letterpresses were becoming a thing, design systems were baked in. Tools and materials were standardized; their purpose: speed and reproducibility. It’s much much quicker to design and print posters, newspapers, and books with standard shapes, forms, patterns, and components. My studies in graphic design—covering letterpresses, book design, systemic branding & identity design, content design, etc—prepared me for this.

Since 2016, Brad Frost’s book Atomic Design helped popularize and bring the term into mainstream digital product development. Today, it’s become a new specific niche in Design that teams & departments are dedicated to implementing, maintaining, and evolving.

Process so far

To get started on a design system project, there’s a lot of gathering and seeing what’s currently present. There are hundreds of standard components that one can start designing, but it’s wasted work if it’s not focused on the specific product at hand.

Briefly, here’s what I’ve done so far:

  1. Gathered screenshots of each view, identifying patterns while getting to know the product more intimately;
  2. Gathered screenshots of each unique component—button, form, input, layout, typographic sizes;
  3. Analyzed existing CSS—looking for existing naming patterns, components, architectural decisions, coding style;
  4. Asked for and discussed the client’s Vision and Anti-vision Boards as guides;
  5. Discussed insights thus far with directions & decisions needed to move forward;
  6. Researched & wrote proposals for the system’s architectural principles and variable taxonomic systems.

What’s unique in a bootstrapped startup environment that’s scaling up—more customers, new features, and more revenue—is that…it’s not a large organization that has to navigate organizational politics of multi-departamental product development. It’s about decisions over debate, speed over perfection, discovery over research, and intuition over experimentation.

Last week’s onboarding provided an overview of where the product is now.

This week is focused on action and starting to make decisions.

Let’s get started.

Photograph of an enlarged page from Manuscript M (1497), Lenoardo da Vinci’s drawings for the plates of Pacioli’s book Divine Proportione. This is the solid dodecahedron—a polyhedron with 12 faces. Taken at Château du Clos Lucé, da Vinci’s final home, on October 8, 2021.
Photograph of an enlarged page from Manuscript M (1497), Lenoardo da Vinci’s drawings for the plates of Pacioli’s book Divine Proportione. This is the solid dodecahedron—a polyhedron with 12 faces. Taken at Château du Clos Lucé, da Vinci’s final home, on October 8, 2021.

Uniqueness of designing for Difference

The everyday world is filled with inequities and inaccessibilities, baked into shared environments and cultures worldwide. For this product, building something for other neurodivergents, the systems should be grounded and focused on needs of various differences.

Typography

The shapes, spacing, and size of letters becomes even more important with multiple differences of processing information. One of the reasons I use monospaced fonts in emails is an attempt at reducing potential for miscommunication.

There are multiple fonts designed explicitly for low-to-no vision and dyslexic humans—like Braille Institute’s Hyperlegible Atkinson or Abbie Gonzalez’s Open Dyslexic. Each of these are fantastic fonts, but don’t quite fit with the needs of a modern UI Product.

Here are some of the rules I’m using for choosing font(s):

  • Sans-serif fonts with spurs that differentiate an 1 from an I from an l;
  • Tall x-heights for legibility at small sizes and readbility of mixed- and lower-case text;
  • Disambiguous character sets that support OpenType variations; and
  • Open sourced, as it’s a founding principle of the product & company itself.

Colors

Color is one of those thing sthat have held my interest most of my life.

I used to receive regular feedback from my parents on how I dressed—wearing the same color like green doesn’t mean all greens are the same or always go together.

An 11×20 grid of shapes and various color-mixes. Individually, each unit is composed of three squares divided into four opacities—20%, 40%, 60%, 80%. Each column & row have distinct inner- and outer-blend modes to explore a broad range of possible color combinations: focused systemized color discovery.
An 11×20 grid of shapes and various color-mixes. Individually, each unit is composed of three squares divided into four opacities—20%, 40%, 60%, 80%. Each column & row have distinct inner- and outer-blend modes to explore a broad range of possible color combinations: focused systemized color discovery.

In 2021, I explored a visual algorithm to automagically create color systems that could work for dark and light modes by layering & mixing colors in Figma and CSS.

Grids of color ranges going from 100–900 in different groupings. At the top are the primary colors, the sources of all the color mixing with ranges of cyan, magenta, yellow, and black (named Ink and Paper). The next row are three secondary colors with subheaders of what was mixed to get them: green (cyan + yellow), purpple (magenta + cyan), and orange (magenta + yellow). The final group consists of ranges from 100% to 0% mixing pairs of the primary and secondary colors in the oklch color space with shorter- and longer-hues set (to exlore what colors are created).
Color experiments that currently live on my website, using a mix of CSS root- and non-root variables, color-mixing, the oklch color space, systemisation, and exploration. Choices of colors is rooted in CMYK of ink-based color-mixing and applying the concept to the web to generate a programmatic color system.

As I was learning & practicing developing design systems for my own website and brand, I used new CSS Color 4 specifications of color definition in CSS. With oklch—a new human-readable and consistently-replicable color space that’s defined by values of perceived lightness, chroma, hue angle, and opacity—and the new color-mix property I was able to have some fun explorations in creating new color systems.

As I’ve worked through the colors of this product’s design system, and keeping sensory processing differences in mind, it’s opened a broad new rabbit warren of research that the CEO’s been sharing as she finds them:

So, outside of the WCAG color contrast standards and the newer Accessible Perceptual Contrast Algorithm (APCA), there are many, many more interesting possibilities to take it.

Sub-atomic options and decisions

These are just two of the foundations in creating a design system.

There are so many options to consider.

The past month I’ve been analyzing CSS collected from many different sites. I’ve particularly enjoyed learning from the websites & portfolios of ProPublica, Set Studio, Offscreen Mag, Big Medium, and Faculty. One of the most exciting things was digging into Dan Mall’s website and finding —-option and —-decision CSS variables.

It reinforces the fact that design is a decision making process.

In the effort of avoiding analysis paralysis, being overwhelmed by options, I’ve started making decisions.

Taxonomy

There’s a saying in software, “There are only two hard things in Computer Science: cache invalidation and naming things.” 1

There’s another saying by Ursula le Guin that I gravitate towards, “For magic consists in this, the true naming of a thing.”

Both are important: naming things is hard, and that’s where the magic’s at.

I say this to communicate the criticality & responsibility of naming things when creating a naming taxonomy for CSS variables and design tokens. Naming is important from a “getting different software tools to communicate, work, and scale together” as well as translating the values we embed into the software itself.

Categorical grouping

We’re using the following groups to layer the system-variable’s logic:

  • Constants: foundational, unchanging names; lowest unit & level of the system
  • Semantics: design decisions that clarify intent and use
  • Contextuals: most specific; used for specific components & patterns.

CUBE CSS

I’ve advocated and we’re moving towards a CUBE CSS methodology, oriented towrds simplicity, pragmatism, and consistency. In the same way we’re building a tool that works with people’s brains, not against, we want our CSS to work with the browser.

This aligns extremely well with the groups, principally comprised of:

  • Composition styles
  • Utilities
  • Blocks
  • Exceptions

Super cool acrostic.

Design systems are product ecosystems

Ultimately design systems, like natural ecosystems, are constantly evolving. The decisions now, in pursuit of standardization & consistency, will change.

The foundations of design systems create standardized structure while embedding flexibility of purpose when the pieces form the whole.

In a design system for neurodivergent humans, there’s an even greater need to embue it with the flexibility & adapability to unique individual’s preferences and needs.

Our decisions today impact tomorrow.

Decisions have to be made.

Then: evolution.