DAMATO.design is my interpretation of a design system reference site based on my experience with product design, engineering, and other best practices for the web.

Screenshot of DAMATO Design

I won’t be discussing the aesthetic choices here, the site itself does a good job explaining the decisions made. Instead, this post is a peek behind the curtain behind the development process.

Audiences

There are two major audiences for a design system reference site; designers and engineers. It is my belief that designers don’t want to scroll through lines of code and API documentation and but engineers might want access to that information. …


Working on a project right now that I’d like to use FontAwesome’s 4.7.0 icon set. Version 5 requires JavaScript but I really liked how version 4 was just CSS. I wanted to use these within my web component work but always had some difficulty. This is how to get it to work using just CDNs.

Photo by Harpal Singh on Unsplash

First, add the CDN link to the top of the page that the components will be on.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Next in the .css file for the component, add the following to the top of the file (assuming file name is styles.css).

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

This…


The following is a description of how to complete every room of the game Good Job! for the Nintendo Switch without damaging anything.

This description excludes Floors 0 and 9 since there are no tasks in Reception and the Penthouse doesn’t require you to pick anything up nor does it give you a final score once completed. In-game time for all of these rooms together is just over 5 hours (301:18).

General technique

For most rooms, you’ll want to move breakable things away from the path. This includes cardboard boxes, safety cones, trophies, and anything else that you can pick up and…


Photo by Ricardo Resende on Unsplash

While I don’t post much more than a photo these days, I still browse Facebook to see… other people posting photos. I have my share of political posts in the feed and I normally don’t react to them. However, I saw a video from a friend I made a long time ago and felt the need to pick it apart.

The link to the video.

They cannot, constitutionally, force us to wear masks to shop.

Prefacing with not a lawyer but I did search within the US Constitution, and certainly there’s nothing specific in there about “masks” and “shopping” specifically…


I’m confident that any engineer that has had to work on a CMS (Content Management System), either building or integrating, will tell you that it’s an absolute nightmare. Many CMSs are trying to do too many things and want to provide everyone’s hopes and dreams in a daunting API.

Person holding neon pink goop in their lifted hand
Person holding neon pink goop in their lifted hand
Photo by Kyle Brinker on Unsplash

I’ve always thought that there’s a special spot that wasn’t being highlighted in CMS-land; a handoff from a developer creating a site to someone who just updates the content on a regular basis. You don’t want a developer to update the site’s content because it’s costly; both time and money which…


I’ve had several recruiters read my resumé about my experience in Design Systems and contact me about jobs. Only to find out they were hiring for people with Systems Design experience. I’d like to outline what both topics are and help people understand the qualities of each.

Design Systems

An engineer who works on a design system typically has some interest in visual design and/or user experience. The engineer would be interested in colors, typography, spacing, and reusable components. They would also be interested in design tools like Sketch and Figma and how to integrate or enhance product design tools. Their work…


We solved the Design System’s problem of getting styles simply through our platform using Semantic Version Redirect at the Edge. After using this method for a while, we found one caveat.

Breaking Everything At Once

In the Design System team, we make every effort to ensure that when we choose a semver number that it correctly identifies the type of change that is expected for the platform. This means, we expect patch updates to not include breaking changes to the platform and it should be safe to have features point to a major or major.minor version without issues.

Additionally, when we publish a new…


Just passing my 2 year anniversary at Compass, I’ve been hard at work maintaining versions of our design system named “Constellation” (Cx for short). In this time, I’ve had a great deal of opportunity to shape the way designers and developers interact with design guidelines, assets, and components. I’ve formed many opinions about design systems based on the current ecosystem inside and outside of Compass. This journey has led me toward attempting to build a design system that is future-resistant using the latest of web technologies to make adoption safe and easy.

Current state

Our design system was originally engineered to work…


We’ve recently released a new navigation system to our agent facing application and I’d like to share some of the process that went into building it.

Design, Prototyping & User Testing

Our Principle Designer saw a trend toward navigating apps using a sidebar of options, so we decided to try several different approaches of this paradigm. I made prototypes of all of these, some with two sidebars (one for primary and another for secondary navigation) and some with different colors. Not only did the navigation elements get built but also entire mock sites were made so user testing would be more realistic.

It was a…


We’ve recently deprecated IE support for our product and this has opened up a world of new possibilities when it comes to development. While I know CSS Grid had partial support in IE (Microsoft created the original spec), the full implementation is much more magical. Patience is a virtue.

Speaking of changes, we’re in the middle of a product redesign and some of the new looks call for some cards on summary pages. These cards have a few requirements:

  1. The number of cards must act responsively, filling the width of the container in some percentage until hitting a threshold where…

Donnie D'Amato

brb, Architecting Design Systems

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store