Material 3

Overview

Material 3 is an expressive product UI. Color is a tonal scheme, corners grow with the size of the object, and the pieces that make a screen feel like Material are the navigation bar and the sheet.

This file is the baseline light scheme. A dark scheme exists in the public system and is not tokenized here. Roboto is the default brand and plain typeface. Hover and pressed states are state layers on the same fill, not a second palette.

Colors

The baseline light roles, with primary as the high-emphasis fill.

• Primary (#6750A4): Filled buttons, selected controls, and the active navigation label.
• On primary (#FFFFFF): Text and icons on primary.
• Surface (#FEF7FF): The page.
• Surface container (#F3EDF7): Navigation bars.
• Surface container high (#ECE6F0): Sheets.
• Surface container highest (#E6E0E9): Filled fields.
• On surface (#1D1B20): Default text.
• On surface variant (#49454F): Supporting navigation labels.
• Inverse surface (#322F35) and inverse on surface (#F5EFF7): Tooltips.
• Error (#B3261E): Error text on a field.

Typography

Roboto across the scale. Display and headline stay at regular weight. Titles and labels from title-medium down use medium weight.

• Display small: 36px / 44px, for a short hero.
• Headline large and small: 32px and 24px, for section titles.
• Title large and medium: 22px regular, and 16px medium for app-bar titles.
• Body large and medium: 16px and 14px.
• Label large and medium: 14px and 12px medium, for buttons and navigation.

Layout

Space sits on a 4px grid. Use 16px as the compact window margin and 24px from medium windows up. Group related controls inside a surface container instead of inventing a new gap.

Elevation & Depth

Hierarchy is tonal. A sheet sits on surface-container-high, a navigation bar on surface-container, and the page on surface. Do not stack drop shadows to fake that order.

Shapes

Corners scale with the component. Extra-small is 4px for fields, checkboxes, and tooltips. Extra-large is 28px for sheets. Filled buttons are fully rounded.

Components

• Buttons: One filled primary button per view. Height 40px, label padding 24px, label-large type. Hover and press add a state layer on the same primary fill.
• Navigation: A navigation bar is 80px tall, on surface-container. Inactive labels use on-surface-variant. The active destination uses primary.
• Sheets: A modal or bottom sheet uses surface-container-high and a 28px corner.
• Input fields: Filled fields are 56px on surface-container-highest, with a 4px corner. Errors use the error color for the message.
• Checkboxes and radio buttons: The selected control is primary with an on-primary mark. Checkbox corners are 4px.
• Lists: Rows sit on the page surface in body-large.
• Tooltips: Inverse surface with inverse on-surface text.

Do’s and Don’ts

• Do use primary for the single high-emphasis action.
• Do keep body text on surface, not on primary.
• Don’t invent a second accent beside the baseline primary.
• Don’t mix fully rounded buttons with sharp sheets in the same view.
• Do meet WCAG AA for text on a fill. Primary with on-primary does.