Design Systems

Design systems organize entire applications into a structure that makes design more efficient and more consistent across teams. Design Systems are centrally managed repositories for foundational elements such as type, color and spacing. Design Systems include simple components, such as radio buttons and forms, as well as more complex components such as accordion panels and tab interfaces.

 

Typography

Typographic design makes up more than 90% of online information. Creating simple, legible type systems that are easy to maintain is the first step in creating successful applications.

design system typographic scale

Typographic Scale

Consistency and scale in type is one of the most fundamental values in design. A well-designed scale establishes hierarchy and rhythm which reduces eye strain and increases legibility.

Figma Color Styles

Color Design

Color systems are organized into palettes for feedback, primary, secondary and neutral colors. Each color palette includes a base color along with six tints (lighter), and 4 shades (darker).

Stark Contrast ratio UI

Web Content Accessibility Guidelines (WCAG 2.1 ) contrast ratios for normal size text, at a 700 color value, are indicated as an accessible-first system.

design system color accessibility
design system color base
color applied to calendar component