• Color
  I decided on an adaptable two level color system since it can be changed later more easily and allows for different apps to have different color schemes. This involved a 0 to 100 light to dark scale per color as the first layer, then from this scale the actual variables used in the apps would be abstracted. For instance, the color Blue 70 is used for the variable “Primary” which is then used for the color of primary buttons.

• Typography
  I went with Roboto for the font family since it is an adaptable Sans-Serif font with widespread usage and many weighting options. For the typography scale, I ensured that the minimum size met accessibility requirements and then provided font-sizes at necessary increments, 13px, 14px, 16px, 20px, 24px, ... and so on.

• Spacing
  To keep the spacing consistent, I went with an 8px grid. An 8px grid ensures that objects from component to component and page to page feel consistent.

• Elevation
  As apps become more complex, there’s a greater need to differentiate between various components and design elements. I settled on a simple set of elevations to ensure consistency across various elevations from low level elevated elements like tooltips and dropdowns up to higher level elevated elements like popovers and modals.

• Iconography
  Due to the 8px grid, I went with 24px by 24px boundary for icons with a 16px by 16px target size. This ensures that all icons are weighted properly and feel the same size. For instance, a 16px square will appear larger than a 16px circle, so the circle needs to be 18px to feel the same size as a 16px square. The 24px boundary allows for this kind of flexibility and ensures that all icons feel the same relative size even if they are tall and skinny or wide and short.

There’s a great deal of button-like components, so it was important to keep it to the minimum required while at the same time ensuring that the design system is able to scale as needs are introduced in the future. Some of the button components I designed were:

Standard Buttons that include primary, secondary, and tertiary states.

Toolbar Buttons that serve as smaller buttons that are typically found in toolbars.

Badge Buttons that serve as state indicators and information that can optionally be clickable.

One of the cornerstones of a well though out design system is a comprehensive set of form components with all of the states and conditions covered. I designed a complete set of form components and included error states, helper text, grouped states, and more. Every component has a hover, focus, active, error, default, and other necessary states.

Tables tend to be one of the most complicated patterns in a design system, so when it came time to design the table format for Ceramic, I treated in many ways like an app unto itself. Thorough research and my own experiences led me to a pattern that includes a customizable toolbar at the top followed by an adaptable set of columns and rows. The pattern accounts for optional multi-select (including a multi-select toolbar at the top) and pagination to ensure that this pattern can handle a large amount of data if necessary.

Not every design system requires commenting components, however, the apps Ceramic is tasked with supporting have a large focus on collaboration. I did a great deal of research on existing commenting patterns and pulled from my own experience before settling on an approach to the commenting components and patterns. This includes a contextual popover style for viewing individual comment threads as well as a side-panel for viewing a list of comment threads.

An important part of any design system is navigation. I ensured that navigational components were well thought out, consistent, and easy-to-use. This included vertical list navigation components, tree views, horizontal tabs, segmented display tabs, and wizard step navigation.

Since the apps that the Ceramic Design System supports involve a lot of collaboration, it was important that the design system include components for handling notifications and messaging. I designed a robust notification panel that can distinguish between read and unread as well as new and old. Additionally, I designed a toast messaging component that can overlay overtop of the screen temporarily interrupting the user when their attention is needed.