Material Design

# Material Design (Material 2)

You are building a frontend UI. Apply the **Material Design** visual style consistently to every screen and component. Treat the tokens and rules below as hard constraints, not suggestions.

## Essence

Google’s design system imagines the interface as sheets of "digital paper" with real thickness. Elevation and shadows express hierarchy, bold primary colors and meaningful motion guide actions, and presses spread outward like ink ripples.

## Design tokens

### Colors

- `background` `#F6F5F8` — page background
- `surface` `#FFFFFF` — cards, panels and raised surfaces
- `text` `#1D1B20` — primary text
- `muted` `#5F5B66` — secondary text, captions, placeholders
- `accent` `#6200EE` — primary actions, links, key highlights
- `on-accent` `#FFFFFF` — text and icons placed on the accent color
- `border` `#C9C5D0` — dividers, outlines, input borders
- `highlight` `#03DAC6` — secondary emphasis, badges, selection

### Typography

- Display / headings: `Roboto` (Google Fonts, weights 400 / 500) → fallback `"Helvetica Neue", Arial, sans-serif`
- Body text: `Roboto` (Google Fonts, weights 400 / 500) → fallback `"Helvetica Neue", Arial, sans-serif`
- Type scale (px): 12 · 14 · 16 · 20 · 24 · 34 · 48 · 60

### Spacing & Shape

- Base unit: 8px · Spacing scale (px): 4 · 8 · 16 · 24 · 32 · 48 · 64
- Corner radius (sm / md / lg): 4 / 4 / 8 px
- Border: 1px solid
- Shadows (sm / md / lg): `0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)` / `0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)` / `0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)`

### Motion

- Durations (fast / base): 150ms / 250ms
- Easing: `cubic-bezier(0.4, 0, 0.2, 1)`

### Signature effects

- `--primary-variant`: `#3700B3`
- `--on-highlight`: `#000000`
- `--error`: `#B00020`

## Do

- Express hierarchy with the standard elevation shadows: cards 1dp, buttons 2dp, app bar 4dp, FAB 6dp.
- Use contained primary-color buttons for main actions, with uppercase medium-weight labels and 4dp radius.
- Give clickable elements a press ripple and an 8% opacity hover state layer.
- Use Roboto and the Material type scale, with spacing on an 8dp grid.
- Animate with the standard easing cubic-bezier(0.4, 0, 0.2, 1) over 150–300ms.

## Don't

- Do not use hard offset shadows, outline shadows or colored shadows.
- Do not put more than one floating action button on a screen.
- Do not fill large background areas with the primary color.
- Do not use glass blur or skeuomorphic textures.

## Components

- **Buttons**: Primary: contained in the primary color with a 2dp shadow and 4dp radius, uppercase medium-weight label. Secondary: outlined or text buttons. Presses ripple; hover raises the shadow.
- **Cards**: White cards with 8dp radius and a 1dp shadow, rising to 8dp on hover or selection; actions sit in an action area at the bottom.
- **Forms**: Filled or outlined text fields with the label inside at the top; on focus the bottom indicator line turns the primary color and thickens.
- **Navigation**: A primary-colored top app bar with a 4dp shadow; the active tab is marked with an indicator bar, and the main action is a floating action button (FAB).
- **Layout**: An 8dp grid and card-based layouts — content on white surfaces over a light grey background.
- **Imagery & icons**: Bold flat illustrations or full-bleed photos; outlined or filled icons in the style of Material Icons.

## Accessibility

- Use the on-primary color for text on primary and check for 4.5:1 contrast; use black text on the teal secondary.
- Tone down ripples under prefers-reduced-motion, but keep state layers so focus stays visible.

_Generated by Style Museum._