Usage Guidelines

When using the Paper component, follow these guidelines to ensure consistency and usability across your designs.

Elevation Guidelines

  • Use lower elevations (0-3) for subtle surfaces such as cards and small sections.
  • Higher elevations (8-24) are best for modals or key areas that need emphasis.
  • Be mindful of the dark mode behavior, where higher elevations result in a lighter background.

Variant Guidelines

  • Use the outlined variant for areas where shadows might feel visually overwhelming.
  • Stick to the default elevation variant for core components requiring shadow depth.

Corners Guidelines

  • Rounded corners are more user-friendly and should be preferred unless a strict design requires square corners.
  • Use square corners sparingly, mostly for components meant to indicate precision or alignment with grid systems.

Accessibility

  • Make sure elevated surfaces have sufficient contrast with the background.
  • Use clear and concise labels or headings for content within Paper components to enhance accessibility.