Corner radius
Corner radius defines how rounded the corners of an element are, affecting the overall look and feel of buttons, cards, and other interface components.
General guidelines
- Border radius should follow a 4px unit system for size variants
- The majority of elements in the system that are 44x44px in size and above have an 8px border radius (buttons, cards, callout links, input fields, alerts, etc). Smaller elements between 25-43px have a 4px border radius, and elements 24x24px and below have a 2px border radius.
Elevation
Elevation refers to the perceived depth of elements within a page layout. It determines whether components appear in the foreground, middle ground, or background. The Massachusetts Design System uses color and shadow styling to create a raised effect, making elements appear to lift off the page surface.
General guidelines
- Use elevation on components like cards to create visual separation from the background, helping group related content and guide focus without adding visual noise
- Use elevation on pop-up menus and similar components to clearly distinguish them from the content underneath, signaling that they sit above the main interface and require user attention
- Avoid using elevation purely for decoration. It should always serve a functional purpose.
- Use consistent elevation levels across similar components to reinforce hierarchy and depth
- Ensure elevated elements remain accessible with sufficient contrast and clear focus states