System ColorDesigner InfoEngineer Info

Design Delightful Systems

Welcome to the DAMATO Design System architected by Donnie D'Amato

Donnie has built and maintained design systems for large companies by being an active liasion between the product design and engineering teams. He has interdisplicinary skills in both art and technology which help craft solutions for different needs. His interest in design systems comes from a curiousity about how the entire system is viewed by the user; how they respond and interact with it.

More details about his professional experience in design and engineering can be found on LinkedIn.

Goals

The following statements attempt to justify the purpose of an endeavour in architecting a design system without a product or business to support.

None of your business

This design system aims to explore what a offering may include without a business or feature initiative; focusing on simple solutions with thoughtful design and inclusive technologies. This hones a focus on curating only exactly what the system needs without needing to ask if it belongs in the system or not. It exists, therefore it is.

The proof is in the programming

This design system has a source of truth designed first in code instead of a traditional or industry standard application (eg. Sketch, Figma). This realizes the potential as a fully-functional experience opposed to a partially-interactive artboard concept.

Go ahead, make my documentation

This design system will make attempts to explore methods where documentation is maintained effortlessly or automatically for both designers and engineers in mediums they are familiar with. It should explore the possibility of becoming self-aware of gaps that require more clarity.

Priniciples

These design principles are intended to help guide important directions this design system takes in its growth.

All users are important

Consider everyone when creating or modifying the experience. Reference standards in accessibility and localization to provide a fully usable experience to all. Consider not only the users but also their technology.

Keep consistency

Ensure that the parts of the system belong together in design and engineering. A user within an experience will trust a system that seems connected over one with uncanny parts.

Refrain from reinvention

Use designs, patterns, or elements that users are familiar with. Curb identity in favor of a usable experience. Add personality appropriately.

Content-first

Decisions around layout and composition should consider different types of content attributes and how those decisions will eventually propogate to the device's viewable area.

Features

User Preferences

At the top of each page are controls that set user preferences across the site. They're saved for each time you visit and you can change them at any time. Setting a toggle will alter the presentation of the site in different ways.

System Color

Many sites are exploring the ability to provide a light and dark theme for the user as it might assist the user experience and include other benefits. The toggle featured here is a bit different as it doesn't toggle between light and dark themes specifically; it toggles between your system preferred color theme and the contrast. This design decision was based on the article Your dark mode toggle is broken.

Make sure your dark mode toggle can switch to the system value. Kilian Valkhof

So, for example, if your system is set to dark mode, then on first visit this page should also have a dark theme applied. Switching the toggle will then change to a light theme. This will be the reverse for users who have either set the system to a light theme or have not set a preference.

Designer/Engineer Info

These toggles help focus content for a specific audience. For example, if you are visiting the site as a designer, you might not want to see all of the code examples taking up large blocks of content space across the site. You can turn off the Engineer Info tab to hide all of the content geared toward engineers. The same occurs for the Designer Info toggle.

When toggling one of these controls off, the site will assume you are viewing from the perspective of the other toggle. If both toggles are on or off, then all content is displayed. The accent color of the site will also match the intended audience for the content; pink for designers, blue for engineers, green for everyone.