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:
- Gathered screenshots of each view, identifying patterns while getting to know the product more intimately;
- Gathered screenshots of each unique component—button, form, input, layout, typographic sizes;
- Analyzed existing CSS—looking for existing naming patterns, components, architectural decisions, coding style;
- Asked for and discussed the client’s Vision and Anti-vision Boards as guides;
- Discussed insights thus far with directions & decisions needed to move forward;
- 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.

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.

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.

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:
- Color naming deficits and ADHD: A retinal dopaminergic hypothesis;
- The role of lightness in color discrimination among adults with autism;
- People with higher autistic traits show stronger binding for color–shape associations
- Paint colors for autism
- Understanding vision problems in autistic humans
- Colored overlays enhance visual perceptual performance in children with autism spectrum disorders
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.