Abacus DesignKit

• Added support for Dark Mode. This update adds color support for a dark theme, however it does not natively turn the website to dark mode based on your Operating System Settings. That feature may come later with a toggle. Instead, the dark theme allows you to control if a page, section, or element will inherit dark mode attributes.
• Fixed font issues across websites and device breakpoints.
• Optimized code embeds for browsers to read CSS files faster, and use less character data.

• Started the Abacus DesignKit team to help control the future of this Design System.
• Reorganized/restructured pages and their structure for better SEO practice. This allows us to continue to use Abacus as a true source for structure and proof of our best practices.
• Removed over 800 components from the Relume library, and created a new plan on how to implement the use of their components for future updates.
• Removed over 1400 variables that controlled color.
  • Not every color will be used on a website, so we removed all these variables to reduce the amount of code that loads into the site. This will allow our sites to load a lot faster.
  • The new color structure takes in the most important colors, and can be updated based off the guide found in Figma. The colors will be found here again in the future, but will not be variables in the code, rather static to the page as a reference.

• Added a ton of new components from the Relume library
• Started styling these components and building the Abacus library
• Published the Abacus Library to be used in other website builds.

There are so many new changes we’re introducing in Version 2!

This is a UI and Development focused update. However, there are some necessary changes for branding that will help all departments. Learn about all the new updates below:

Brand new color system designed for accessibility.

• Our color system has become fully module and streamlined.
• There are over 32 color ways to choose from, that include light and dark mode. See the Color Chart to learn how to use each Color Way.
• This update comes from lots of studies on color theories, and has been specifically designed to make colors easier, prettier, and better for all types of accessibility needs. Thanks to the Radix by WorkOS for making this possible.

Typography Scale for App and Marketing Sites

• This is an odd update, but is a necessary step in understanding type scales.
• Type scales for documents and videos will be added at a later date.

Textures and Shadows‍

• We all miss good textures and shadows in the web. We’ve created base textures in Figma to work on the web and make Call-to-actions actually stand out like ornaments.

Components

• Basic UI Components have been re-textured to match the new design language. Tons more UI components to be added as we grow.