# Foundations

The principles Material Web 3.0 applies across its components: theming, interaction states, accessibility, adaptive layout and density.

The principles applied across every component: how theming works, how elements respond to input, and how they stay accessible and adapt to the space they get.

- [Theming](/material-web/3.0/foundations/design-tokens/): Material Design theming creates unique branded products with familiar patterns and accessible interactions.
- [Interaction States](/material-web/3.0/foundations/interaction-states/): Interactive components show their state with a state layer: a translucent overlay of the component's content color, drawn between the container and the content.
- [Accessibility](/material-web/3.0/foundations/accessibility/): Every labs/gb component works with a keyboard, a screen reader and reduced motion.
- [Adaptive layout](/material-web/3.0/foundations/adaptive-layout/): Pages and components change with the window.
- [Density](/material-web/3.0/foundations/density/): Density lets people see more information in data-heavy views by making components more compact.
- [Layout](/material-web/3.0/foundations/layout/): Layout adapts an app to the window with window size classes, a column grid, margins and panes.
- [Scaffold](/material-web/3.0/foundations/scaffold/): A scaffold arranges the bars, rails and panes around an app's content, and adapts them to the window size.