Material-Design-Web-App

Create a Material Design 3 web application screen. Follow Google's system faithfully — tonal colour, shape scale, elevation and motion — and apply it to a real workflow.

Brief

Subject: Fieldnote — a crop-scouting web app agronomists use to log pest and disease observations across farms

Populate every component with realistic data from this domain (names, dates, statuses, counts) so the app reads as a working product, not a component sheet

Design Requirements

Colour: Derive a tonal palette from primary (#386a20) and secondary (#55624c) on surface (#f8faf0): primary/secondary containers, surface-container levels, outline and on-colours

Elevation: Levels 0–5; in M3 elevation is mostly tonal surface tint — real shadows only for floating elements (FAB, menus)

Shape: The M3 shape scale by component — 4px text fields, 8px chips, 12px cards, 16px FAB, 28px dialogs and sheets

Typography: Roboto with the M3 type scale (display, headline, title, body, label)

Sections to Include

Top App Bar — Title, search and action icons

Navigation Drawer — Destinations grouped into sections; the active one in a secondary-container pill

Cards — Elevated, filled and outlined cards, each used for a different kind of content

Buttons — Filled, tonal, outlined and text buttons placed where each fits (not a showcase row)

FAB — Extended FAB for the primary action

Chips — Filter chips above the list with working selection state

Text Fields — Outlined and filled fields with floating labels in the detail/edit panel

Page Layout

Navigation drawer + top app bar

Main area: summary cards and a list of records filtered by chips

Side detail pane for the selected record, with an edit form

Technical Details

CSS custom properties for colour, elevation and shape tokens

Ripple on buttons, chips and list items (small JS)

Material Symbols icons from Google Fonts

No stock photos: images in records (e.g. field photos) are simple illustrated placeholders or icons in tonal containers

Responsive: the drawer becomes a navigation bar on mobile; the detail pane becomes a full-screen view

M3 motion: emphasized easing cubic-bezier(0.2, 0, 0, 1), 200–300ms

Visible focus states