StableUXmaterial-design

Material Design

Operationalizes Material Design (M3 era) for Android apps and Material-styled web apps: the component system, elevation/hierarchy model, motion semantics, interaction states, layout/density rules, and design tokens. On Android it outranks generic UI advice (Ruling R3); on the web it's a strong Level 2-style voice when Material is the chosen system.

materialandroidcomponentselevationmotionstates

Principios

· MD2 — Emphasis levels are the button system: filled (highest emphasis, one per surface — Von Restorff) → filled tonal → elevated → outlined → text. Choose by importance, not looks.
· MD3 — Tonal surfaces convey hierarchy: in M3, surface containers (lowest→highest) and elevation express layering; dark theme uses tonal shifts, not just shadows. One elevation logic app-wide.
· MD5 — Token pyramid discipline: components consume component/system tokens; raw hex appears only in reference palettes. Dynamic color and dark theme then come nearly free.
· MD6 — Color roles, not colors: primary/on-primary, surface/on-surface, error/on-error pairs guarantee contrast pairings by construction (WCAG WC16 enforced at the token level).
· MD7 — Type scale as roles: display/headline/title/body/label ramps; UI text picks a role, never a size.

Patrones

· One filled button per surface; everything else steps down the emphasis ladder (tonal/outlined/text).
· FAB only for *the* signature action of a screen (compose, add) — one, bottom-right (LTR), never a menu-opener; no FAB on screens without a dominant action.
· Snackbar for transient feedback (with optional single action like Undo); dialog for decisions; banner for persistent conditions. Never stack snackbars into a notification system (feedback calibration).
· Chips for compact choices/filters/inputs; don't rebuild them as tiny buttons.
· Bottom sheet (modal) for mobile contextual actions; side sheet for supplementary content on large canvases.

Riesgos

· Ver anti-patrones específicos del dominio en el pack.

Checklist

[ ] TalkBack/keyboard semantics intact after theming; custom components carry full semantics. (MT15)
[ ] Actionable errors never snackbar-only. (MT10)
[ ] Touch targets ≥48dp. (MT1)
[ ] Tokens only — no raw hex/dp in components; dark scheme via tokens. (MT2)
[ ] Role pairs everywhere; on-X contrast passes in both schemes. (MT3)
[ ] Full state set via state layers on every interactive component. (MT4)

Fuentes

Material Design 3

En la bibliografía AKOS

Este pack cita las siguientes fuentes registradas en el índice bibliográfico:

Explorar todas las fuentes →