diff --git a/demos/list.html b/demos/list.html
index 1d7f539b752..e91a902a091 100644
--- a/demos/list.html
+++ b/demos/list.html
@@ -24,92 +24,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <style>
-      .mdc-list,
-      .mdc-list-group {
-        max-width: 600px;
-      }
-      .mdc-theme--dark {
-        background: #303030;
-      }
-      .mdc-theme--dark > h3 {
-        color: white;
-      }
-      .grey-bg {
-        background: rgba(0, 0, 0, .26);
-      }
-      #icon-with-text-demo .mdc-list-item__start-detail {
-        color: rgba(0, 0, 0, .54);
-      }
-      .mdc-theme--dark #icon-with-text-demo .mdc-list-item__start-detail {
-        color: rgba(255, 255, 255, .7);
-      }
-      #avatar-text-icon-demo-list .mdc-list-item__end-detail {
-        text-decoration: none;
-        color: #ff4081; /* Pink A200 */
-      }
-      .two-line-avatar-text-icon-demo .mdc-list-item__start-detail {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-      }
-      .two-line-avatar-text-icon-demo .mdc-list-item__end-detail {
-        color: rgba(0, 0, 0, .26);
-        text-decoration: none;
-      }
-      .mdc-theme--dark .two-line-avatar-text-icon-demo .mdc-list-item__start-detail {
-        background-color: rgba(255, 255, 255, .7);
-        color: #303030;
-      }
-      .mdc-theme--dark .two-line-avatar-text-icon-demo .mdc-list-item__end-detail {
-        color: rgba(255, 255, 255, .7);
-      }
-
-      .preamble {
-        max-width: 600px;
-        margin-top: 48px;
-        margin-left: 72px;
-      }
-
-      #demo-wrapper {
-        margin: 24px;
-      }
-
-      #demo-wrapper section {
-        padding: 24px;
-      }
-
-      #demo-wrapper .mdc-list, #demo-wrapper .mdc-list-group {
-        border: 1px solid rgba(0, 0, 0, 0.1);
-      }
-
-      #demo-wrapper .mdc-list-group .mdc-list,
-      #demo-wrapper .mdc-theme--dark .mdc-list,
-      #demo-wrapper .mdc-theme--dark .mdc-list-group {
-        border: none;
-      }
-
-      #demo-wrapper h2 {
-        font-size: 1.5em;
-        margin-bottom: 0.8em;
-        margin-left: 24px;
-      }
-
-      #demo-wrapper h3 {
-        margin-bottom: 0.8em;
-      }
-
-      .hero .mdc-list {
-        background-color: white;
-        min-width: 320px;
-        box-shadow:
-          0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-          0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-          0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-      }
-
-    </style>
   </head>
   <body class="mdc-typography">
     <header class="mdc-toolbar mdc-toolbar--fixed">
@@ -125,9 +39,9 @@
     <main>
       <div class="mdc-toolbar-fixed-adjust"></div>
       <section class="hero">
-        <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list two-line-avatar-text-icon-demo">
+        <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars">
           <li class="mdc-list-item">
-            <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+            <span class="mdc-list-item__start-detail" role="presentation">
               <i class="material-icons" aria-hidden="true">folder</i>
             </span>
             <span class="mdc-list-item__text">
@@ -141,7 +55,7 @@
             </a>
           </li>
           <li class="mdc-list-item">
-            <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+            <span class="mdc-list-item__start-detail" role="presentation">
               <i class="material-icons" aria-hidden="true">folder</i>
             </span>
             <span class="mdc-list-item__text">
@@ -155,7 +69,7 @@
             </a>
           </li>
           <li class="mdc-list-item">
-            <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+            <span class="mdc-list-item__start-detail" role="presentation">
               <i class="material-icons" aria-hidden="true">folder</i>
             </span>
             <span class="mdc-list-item__text">
@@ -199,11 +113,96 @@
       </section>
 
       <div id="demo-wrapper">
+        <section>
+          <h2>Custom Colors</h2>
+          <section>
+            <h3>Example - Two-line Lists, Avatars, end detail, inset dividers</h3>
+            <div class="mdc-list-group demo-list-group--custom">
+              <h3 class="mdc-list-group__subheader">Folders</h3>
+              <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--custom demo-list--icon-placeholders">
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__start-detail" role="presentation">
+                    <i class="material-icons" aria-hidden="true">folder</i>
+                  </span>
+                  <span class="mdc-list-item__text">
+                    Photos
+                    <span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
+                  </span>
+                  <a href="#" class="mdc-list-item__end-detail material-icons"
+                     aria-label="View more information" title="More info"
+                     onclick="event.preventDefault();">
+                    info
+                  </a>
+                </li>
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__start-detail" role="presentation">
+                    <i class="material-icons" aria-hidden="true">folder</i>
+                  </span>
+                  <span class="mdc-list-item__text">
+                    Recipes
+                    <span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
+                  </span>
+                  <a href="#" class="mdc-list-item__end-detail material-icons"
+                     aria-label="View more information" title="More info"
+                     onclick="event.preventDefault();">
+                    info
+                  </a>
+                </li>
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__start-detail" role="presentation">
+                    <i class="material-icons" aria-hidden="true">folder</i>
+                  </span>
+                  <span class="mdc-list-item__text">
+                    Work
+                    <span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
+                  </span>
+                  <a href="#" class="mdc-list-item__end-detail material-icons"
+                     aria-label="View more information" title="More info"
+                     onclick="event.preventDefault();">
+                    info
+                  </a>
+                </li>
+              </ul>
+              <hr class="mdc-list-divider mdc-list-divider--inset">
+              <h3 class="mdc-list-group__subheader">Files</h3>
+              <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--custom demo-list--icon-placeholders">
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__start-detail" role="presentation">
+                    <i class="material-icons" aria-hidden="true">insert_drive_file</i>
+                  </span>
+                  <span class="mdc-list-item__text">
+                    Vacation Itinerary
+                    <span class="mdc-list-item__secondary-text">Jan 10, 2014</span>
+                  </span>
+                  <a href="#" class="mdc-list-item__end-detail material-icons"
+                     aria-label="View more information" title="More info"
+                     onclick="event.preventDefault();">
+                    info
+                  </a>
+                </li>
+                <li class="mdc-list-item">
+                  <span class="mdc-list-item__start-detail" role="presentation">
+                    <i class="material-icons" aria-hidden="true">insert_drive_file</i>
+                  </span>
+                  <span class="mdc-list-item__text">
+                    Kitchen Remodel
+                    <span class="mdc-list-item__secondary-text">Jan 20, 2014</span>
+                  </span>
+                  <a href="#" class="mdc-list-item__end-detail material-icons"
+                     aria-label="View more information" title="More info"
+                     onclick="event.preventDefault();">
+                    info
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </section>
+        </section>
         <section>
           <h2>Single-Line List</h2>
           <section>
             <h3>Text only</h3>
-            <ul class="mdc-list">
+            <ul class="mdc-list demo-list">
               <li class="mdc-list-item">Single-line item</li>
               <li class="mdc-list-item">Single-line item</li>
               <li class="mdc-list-item">Single-line item</li>
@@ -211,7 +210,7 @@ <h3>Text only</h3>
           </section>
           <section>
             <h3>Text only (dense)</h3>
-            <ul class="mdc-list mdc-list--dense">
+            <ul class="mdc-list mdc-list--dense demo-list">
               <li class="mdc-list-item">Single-line item</li>
               <li class="mdc-list-item">Single-line item</li>
               <li class="mdc-list-item">Single-line item</li>
@@ -219,7 +218,7 @@ <h3>Text only (dense)</h3>
           </section>
           <section class="mdc-theme--dark">
             <h3>Text Only (dark)</h3>
-            <ul class="mdc-list">
+            <ul class="mdc-list demo-list">
               <li class="mdc-list-item">Single-line item</li>
               <li class="mdc-list-item">Single-line item</li>
               <li class="mdc-list-item">Single-line item</li>
@@ -228,41 +227,41 @@ <h3>Text Only (dark)</h3>
           <section>
             <h3>Start Detail</h3>
             <aside><p><em>Note: The grey background is styled using demo placeholder styles</em></p></aside>
-            <ul class="mdc-list">
+            <ul class="mdc-list demo-list demo-list--icon-placeholders">
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
               </li>
             </ul>
           </section>
           <section>
             <h3>Start Detail (dense)</h3>
-            <ul class="mdc-list mdc-list--dense">
+            <ul class="mdc-list mdc-list--dense demo-list demo-list--icon-placeholders">
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
               </li>
             </ul>
           </section>
           <section>
             <h3>Start Detail Example - Icon with Text</h3>
-            <ul id="icon-with-text-demo" class="mdc-list">
+            <ul class="mdc-list demo-list">
               <li class="mdc-list-item">
                 <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">
                   network_wifi
@@ -285,7 +284,7 @@ <h3>Start Detail Example - Icon with Text</h3>
           </section>
           <section class="mdc-theme--dark">
             <h3>Start Detail Example - Icon with Text (Dark)</h3>
-            <ul id="icon-with-text-demo" class="mdc-list">
+            <ul class="mdc-list demo-list">
               <li class="mdc-list-item">
                 <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">
                   network_wifi
@@ -308,41 +307,41 @@ <h3>Start Detail Example - Icon with Text (Dark)</h3>
           </section>
           <section>
             <h3>Avatar List</h3>
-            <ul class="mdc-list mdc-list--avatar-list">
+            <ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
               </li>
             </ul>
           </section>
           <section>
             <h3>Avatar List (dense)</h3>
-            <ul class="mdc-list mdc-list--dense mdc-list--avatar-list">
+            <ul class="mdc-list mdc-list--dense mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
               </li>
             </ul>
           </section>
           <section>
             <h3>Example - Avatar with Text</h3>
-            <ul class="mdc-list mdc-list--avatar-list">
+            <ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars">
               <li class="mdc-list-item">
                 <img class="mdc-list-item__start-detail"
                      src="/images/animal1.svg"
@@ -350,22 +349,22 @@ <h3>Example - Avatar with Text</h3>
                 Panda
               </li>
               <li class="mdc-list-item">
-                <img class="mdc-list-item__start-detail grey-bg"
+                <img class="mdc-list-item__start-detail"
                      src="/images/animal2.svg"
-                     width="56" height="56" alt="Sloth"></span>
+                     width="56" height="56" alt="Sloth">
                 Sloth
               </li>
               <li class="mdc-list-item">
-                <img class="mdc-list-item__start-detail grey-bg"
+                <img class="mdc-list-item__start-detail"
                      src="/images/animal3.svg"
-                     width="56" height="56" alt="Brown Bear"></span>
+                     width="56" height="56" alt="Brown Bear">
                 Brown Bear
               </li>
             </ul>
           </section>
           <section class="mdc-theme--dark">
             <h3>Example - Avatar with Text (Dark)</h3>
-            <ul class="mdc-list mdc-list--avatar-list">
+            <ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars">
               <li class="mdc-list-item">
                 <img class="mdc-list-item__start-detail"
                      src="/images/animal1.svg"
@@ -373,100 +372,100 @@ <h3>Example - Avatar with Text (Dark)</h3>
                 Panda
               </li>
               <li class="mdc-list-item">
-                <img class="mdc-list-item__start-detail grey-bg"
+                <img class="mdc-list-item__start-detail"
                      src="/images/animal2.svg"
-                     width="56" height="56" alt="Sloth"></span>
+                     width="56" height="56" alt="Sloth">
                 Sloth
               </li>
               <li class="mdc-list-item">
-                <img class="mdc-list-item__start-detail grey-bg"
+                <img class="mdc-list-item__start-detail"
                      src="/images/animal3.svg"
-                     width="56" height="56" alt="Brown Bear"></span>
+                     width="56" height="56" alt="Brown Bear">
                 Brown Bear
               </li>
             </ul>
           </section>
           <section>
             <h3>End Detail</h3>
-            <ul class="mdc-list">
+            <ul class="mdc-list demo-list demo-list--meta-placeholders">
               <li class="mdc-list-item">
                 Single-line item
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
               <li class="mdc-list-item">
                 Single-line item
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
               <li class="mdc-list-item">
                 Single-line item
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
             </ul>
           </section>
           <section>
             <h3>End Detail (Dense)</h3>
-            <ul class="mdc-list mdc-list--dense">
+            <ul class="mdc-list mdc-list--dense demo-list demo-list--meta-placeholders">
               <li class="mdc-list-item">
                 Single-line item
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
               <li class="mdc-list-item">
                 Single-line item
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
               <li class="mdc-list-item">
                 Single-line item
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
             </ul>
           </section>
           <section>
             <h3>Avatar + End Detail</h3>
-            <ul class="mdc-list mdc-list--avatar-list">
+            <ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders demo-list--meta-placeholders">
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
             </ul>
           </section>
           <section>
             <h3>Avatar + End Detail (Dense)</h3>
-            <ul class="mdc-list mdc-list--dense mdc-list--avatar-list">
+            <ul class="mdc-list mdc-list--dense mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders demo-list--meta-placeholders">
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
             </ul>
           </section>
           <section>
             <h3>Example - Avatar with Text and icon</h3>
-            <ul id="avatar-text-icon-demo-list" class="mdc-list mdc-list--avatar-list">
+            <ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--avatar-and-meta-icon">
               <li class="mdc-list-item">
-                <img class="mdc-list-item__start-detail grey-bg"
+                <img class="mdc-list-item__start-detail"
                      src="/images/animal3.svg"
-                     width="56" height="56" alt="Brown Bear"></span>
+                     width="56" height="56" alt="Brown Bear">
                 Brown Bear
                 <a class="mdc-list-item__end-detail material-icons" href="#"
                    aria-label="Remove from favorites" title="Remove from favorites"
@@ -486,10 +485,10 @@ <h3>Example - Avatar with Text and icon</h3>
                 </a>
               </li>
               <li class="mdc-list-item">
-                <img class="mdc-list-item__start-detail grey-bg"
+                <img class="mdc-list-item__start-detail"
                      src="/images/animal2.svg"
-                     width="56" height="56" alt="Sleuth"></span>
-                Sleuth
+                     width="56" height="56" alt="Sloth">
+                Sloth
                 <a class="mdc-list-item__end-detail material-icons" href="#"
                    aria-label="Add to favorites" title="Add to favorites"
                    onclick="event.preventDefault();">
@@ -500,11 +499,11 @@ <h3>Example - Avatar with Text and icon</h3>
           </section>
           <section class="mdc-theme--dark">
             <h3>Example - Avatar with Text and icon (Dark)</h3>
-            <ul id="avatar-text-icon-demo-list" class="mdc-list mdc-list--avatar-list">
+            <ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--avatar-and-meta-icon">
               <li class="mdc-list-item">
-                <img class="mdc-list-item__start-detail grey-bg"
+                <img class="mdc-list-item__start-detail"
                      src="/images/animal3.svg"
-                     width="56" height="56" alt="Brown Bear"></span>
+                     width="56" height="56" alt="Brown Bear">
                 Brown Bear
                 <a class="mdc-list-item__end-detail material-icons" href="#"
                    aria-label="Remove from favorites" title="Remove from favorites"
@@ -524,10 +523,10 @@ <h3>Example - Avatar with Text and icon (Dark)</h3>
                 </a>
               </li>
               <li class="mdc-list-item">
-                <img class="mdc-list-item__start-detail grey-bg"
+                <img class="mdc-list-item__start-detail"
                      src="/images/animal2.svg"
-                     width="56" height="56" alt="Sleuth"></span>
-                Sleuth
+                     width="56" height="56" alt="Sloth">
+                Sloth
                 <a class="mdc-list-item__end-detail material-icons" href="#"
                    aria-label="Add to favorites" title="Add to favorites"
                    onclick="event.preventDefault();">
@@ -541,7 +540,7 @@ <h3>Example - Avatar with Text and icon (Dark)</h3>
           <h2>Two-line List</h2>
           <section>
             <h3>Text-Only</h3>
-            <ul class="mdc-list mdc-list--two-line">
+            <ul class="mdc-list mdc-list--two-line demo-list">
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
                   Two-line item
@@ -564,7 +563,7 @@ <h3>Text-Only</h3>
           </section>
           <section>
             <h3>Text-Only (Dense)</h3>
-            <ul class="mdc-list mdc-list--two-line mdc-list--dense">
+            <ul class="mdc-list mdc-list--two-line mdc-list--dense demo-list">
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
                   Two-line item
@@ -587,23 +586,23 @@ <h3>Text-Only (Dense)</h3>
           </section>
           <section>
             <h3>Start Detail</h3>
-            <ul class="mdc-list mdc-list--two-line">
+            <ul class="mdc-list mdc-list--two-line demo-list  demo-list--icon-placeholders">
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
@@ -613,23 +612,23 @@ <h3>Start Detail</h3>
           </section>
           <section>
             <h3>Start Detail (Dense)</h3>
-            <ul class="mdc-list mdc-list--two-line mdc-list--dense">
+            <ul class="mdc-list mdc-list--two-line mdc-list--dense demo-list demo-list--icon-placeholders">
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
@@ -639,23 +638,23 @@ <h3>Start Detail (Dense)</h3>
           </section>
           <section>
             <h3>Avatar List</h3>
-            <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list">
+            <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
@@ -665,23 +664,23 @@ <h3>Avatar List</h3>
           </section>
           <section>
             <h3>Avatar List (dense)</h3>
-            <ul class="mdc-list mdc-list--two-line mdc-list--dense mdc-list--avatar-list">
+            <ul class="mdc-list mdc-list--two-line mdc-list--dense mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
@@ -691,61 +690,61 @@ <h3>Avatar List (dense)</h3>
           </section>
           <section>
             <h3>End Detail</h3>
-            <ul class="mdc-list mdc-list--two-line">
+            <ul class="mdc-list mdc-list--two-line demo-list demo-list--meta-placeholders">
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
             </ul>
           </section>
           <section>
             <h3>End Detail (Dense)</h3>
-            <ul class="mdc-list mdc-list--two-line mdc-list--dense">
+            <ul class="mdc-list mdc-list--two-line mdc-list--dense demo-list demo-list--meta-placeholders">
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
               <li class="mdc-list-item">
                 <span class="mdc-list-item__text">
                   Two-line item
                   <span class="mdc-list-item__secondary-text">Secondary text</span>
                 </span>
-                <span class="mdc-list-item__end-detail grey-bg"></span>
+                <span class="mdc-list-item__end-detail"></span>
               </li>
             </ul>
           </section>
           <section>
             <h3>Example - Two-line avatar + text + icon</h3>
-            <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list two-line-avatar-text-icon-demo">
+            <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                <span class="mdc-list-item__start-detail" role="presentation">
                   <i class="material-icons" aria-hidden="true">folder</i>
                 </span>
                 <span class="mdc-list-item__text">
@@ -759,7 +758,7 @@ <h3>Example - Two-line avatar + text + icon</h3>
                 </a>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                <span class="mdc-list-item__start-detail" role="presentation">
                   <i class="material-icons" aria-hidden="true">folder</i>
                 </span>
                 <span class="mdc-list-item__text">
@@ -773,7 +772,7 @@ <h3>Example - Two-line avatar + text + icon</h3>
                 </a>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                <span class="mdc-list-item__start-detail" role="presentation">
                   <i class="material-icons" aria-hidden="true">folder</i>
                 </span>
                 <span class="mdc-list-item__text">
@@ -790,9 +789,9 @@ <h3>Example - Two-line avatar + text + icon</h3>
           </section>
           <section class="mdc-theme--dark">
             <h3>Example - Two-line avatar + text + icon (Dark)</h3>
-            <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list two-line-avatar-text-icon-demo">
+            <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                <span class="mdc-list-item__start-detail" role="presentation">
                   <i class="material-icons" aria-hidden="true">folder</i>
                 </span>
                 <span class="mdc-list-item__text">
@@ -806,7 +805,7 @@ <h3>Example - Two-line avatar + text + icon (Dark)</h3>
                 </a>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                <span class="mdc-list-item__start-detail" role="presentation">
                   <i class="material-icons" aria-hidden="true">folder</i>
                 </span>
                 <span class="mdc-list-item__text">
@@ -820,7 +819,7 @@ <h3>Example - Two-line avatar + text + icon (Dark)</h3>
                 </a>
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                <span class="mdc-list-item__start-detail" role="presentation">
                   <i class="material-icons" aria-hidden="true">folder</i>
                 </span>
                 <span class="mdc-list-item__text">
@@ -840,7 +839,7 @@ <h3>Example - Two-line avatar + text + icon (Dark)</h3>
           <h2>List Dividers</h2>
           <section>
             <h3>Full-Width Dividers</h3>
-            <ul class="mdc-list">
+            <ul class="mdc-list demo-list">
               <li class="mdc-list-item">Single-line item - section 1</li>
               <li class="mdc-list-item">Single-line item - section 1</li>
               <li class="mdc-list-item">Single-line item - section 1</li>
@@ -851,26 +850,26 @@ <h3>Full-Width Dividers</h3>
           </section>
           <section>
             <h3>Inset Dividers</h3>
-            <ul class="mdc-list mdc-list--avatar-list">
+            <ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list demo-list--icon-placeholders">
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item - section 1
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item - section 1
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item - section 1
               </li>
               <li class="mdc-list-divider mdc-list-divider--inset" role="separator"></li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item - section 2
               </li>
               <li class="mdc-list-item">
-                <span class="mdc-list-item__start-detail grey-bg"></span>
+                <span class="mdc-list-item__start-detail"></span>
                 Single-line item - section 2
               </li>
             </ul>
@@ -882,14 +881,14 @@ <h2>List Groups</h2>
             <h3>Basic Usage</h3>
             <div class="mdc-list-group">
               <h3 class="mdc-list-group__subheader">List 1</h3>
-              <ul class="mdc-list">
+              <ul class="mdc-list demo-list">
                 <li class="mdc-list-item">Single-line item</li>
                 <li class="mdc-list-item">Single-line item</li>
                 <li class="mdc-list-item">Single-line item</li>
               </ul>
               <hr class="mdc-list-divider">
               <h3 class="mdc-list-group__subheader">List 2</h3>
-              <ul class="mdc-list">
+              <ul class="mdc-list demo-list">
                 <li class="mdc-list-item">Single-line item</li>
                 <li class="mdc-list-item">Single-line item</li>
                 <li class="mdc-list-item">Single-line item</li>
@@ -900,9 +899,9 @@ <h3 class="mdc-list-group__subheader">List 2</h3>
             <h3>Example - Two-line Lists, Avatars, end detail, inset dividers</h3>
             <div class="mdc-list-group">
               <h3 class="mdc-list-group__subheader">Folders</h3>
-              <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list two-line-avatar-text-icon-demo">
+              <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
                 <li class="mdc-list-item">
-                  <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                  <span class="mdc-list-item__start-detail" role="presentation">
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
@@ -916,7 +915,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                   </a>
                 </li>
                 <li class="mdc-list-item">
-                  <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                  <span class="mdc-list-item__start-detail" role="presentation">
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
@@ -930,7 +929,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                   </a>
                 </li>
                 <li class="mdc-list-item">
-                  <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                  <span class="mdc-list-item__start-detail" role="presentation">
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
@@ -946,9 +945,9 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
               </ul>
               <hr class="mdc-list-divider mdc-list-divider--inset">
               <h3 class="mdc-list-group__subheader">Files</h3>
-              <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list two-line-avatar-text-icon-demo">
+              <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
                 <li class="mdc-list-item">
-                  <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                  <span class="mdc-list-item__start-detail" role="presentation">
                     <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                   </span>
                   <span class="mdc-list-item__text">
@@ -962,7 +961,7 @@ <h3 class="mdc-list-group__subheader">Files</h3>
                   </a>
                 </li>
                 <li class="mdc-list-item">
-                  <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                  <span class="mdc-list-item__start-detail" role="presentation">
                     <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                   </span>
                   <span class="mdc-list-item__text">
@@ -982,9 +981,9 @@ <h3 class="mdc-list-group__subheader">Files</h3>
             <h3>Example - Two-line Lists, Avatars, end detail, inset dividers (Dark)</h3>
             <div class="mdc-list-group">
               <h3 class="mdc-list-group__subheader">Folders</h3>
-              <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list two-line-avatar-text-icon-demo">
+              <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
                 <li class="mdc-list-item">
-                  <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                  <span class="mdc-list-item__start-detail" role="presentation">
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
@@ -998,7 +997,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                   </a>
                 </li>
                 <li class="mdc-list-item">
-                  <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                  <span class="mdc-list-item__start-detail" role="presentation">
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
@@ -1012,7 +1011,7 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
                   </a>
                 </li>
                 <li class="mdc-list-item">
-                  <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                  <span class="mdc-list-item__start-detail" role="presentation">
                     <i class="material-icons" aria-hidden="true">folder</i>
                   </span>
                   <span class="mdc-list-item__text">
@@ -1028,9 +1027,9 @@ <h3 class="mdc-list-group__subheader">Folders</h3>
               </ul>
               <hr class="mdc-list-divider mdc-list-divider--inset">
               <h3 class="mdc-list-group__subheader">Files</h3>
-              <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list two-line-avatar-text-icon-demo">
+              <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
                 <li class="mdc-list-item">
-                  <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                  <span class="mdc-list-item__start-detail" role="presentation">
                     <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                   </span>
                   <span class="mdc-list-item__text">
@@ -1044,7 +1043,7 @@ <h3 class="mdc-list-group__subheader">Files</h3>
                   </a>
                 </li>
                 <li class="mdc-list-item">
-                  <span class="mdc-list-item__start-detail grey-bg" role="presentation">
+                  <span class="mdc-list-item__start-detail" role="presentation">
                     <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                   </span>
                   <span class="mdc-list-item__text">
@@ -1065,7 +1064,7 @@ <h3 class="mdc-list-group__subheader">Files</h3>
           <h2>Interactive Lists (with ink ripple)</h2>
           <section>
             <h3>Example - Interactive List</h3>
-            <nav class="mdc-list" data-demo-interactive-list>
+            <nav class="mdc-list demo-list" data-demo-interactive-list>
               <a href="#" class="mdc-list-item">
                 <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">
                   network_wifi
@@ -1088,7 +1087,7 @@ <h3>Example - Interactive List</h3>
           </section>
           <section class="mdc-theme--dark">
             <h3>Example - Interactive List (Dark Theme)</h3>
-            <nav class="mdc-list" data-demo-interactive-list>
+            <nav class="mdc-list demo-list" data-demo-interactive-list>
               <a href="#" class="mdc-list-item">
                 <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">
                   network_wifi
diff --git a/demos/list.scss b/demos/list.scss
index 399cfed9dd4..cafab45b0de 100644
--- a/demos/list.scss
+++ b/demos/list.scss
@@ -16,5 +16,102 @@
 
 @import "./common";
 @import "../packages/mdc-checkbox/mdc-checkbox";
+@import "../packages/mdc-elevation/mixins";
 @import "../packages/mdc-form-field/mdc-form-field";
 @import "../packages/mdc-list/mdc-list";
+
+a.material-icons {
+  text-decoration: none;
+}
+
+.mdc-list,
+.mdc-list-group {
+  max-width: 600px;
+}
+
+.mdc-theme--dark {
+  background: #303030;
+}
+
+.mdc-theme--dark > h3 {
+  color: white;
+}
+
+.demo-list--icon-placeholders,
+.demo-list--with-avatars {
+  @include mdc-list-item-graphic-ink-color(white);
+  @include mdc-list-item-graphic-fill-color(text-icon-on-background);
+
+  @include mdc-theme-dark {
+    @include mdc-list-item-graphic-ink-color(#303030);
+    @include mdc-list-item-graphic-fill-color(text-icon-on-dark);
+  }
+}
+
+.demo-list--meta-placeholders {
+  .mdc-list-item__end-detail {
+    background-color: currentColor;
+  }
+}
+
+.demo-list--avatar-and-meta-icon {
+  @include mdc-list-item-meta-ink-color($material-color-pink-a200);
+
+  @include mdc-theme-dark {
+    @include mdc-list-item-meta-ink-color($material-color-pink-a200);
+  }
+}
+
+.demo-list-group--custom,
+.demo-list--custom {
+  @include mdc-list-divider-color($material-color-pink-50);
+}
+
+.demo-list--custom {
+  @include mdc-list-item-primary-text-ink-color($material-color-blue-600);
+  @include mdc-list-item-secondary-text-ink-color($material-color-purple-600);
+  @include mdc-list-item-graphic-fill-color($material-color-pink-400);
+  @include mdc-list-item-graphic-ink-color($material-color-pink-50);
+  @include mdc-list-item-meta-ink-color($material-color-orange-500);
+}
+
+.preamble {
+  max-width: 600px;
+  margin-top: 48px;
+  margin-left: 72px;
+}
+
+#demo-wrapper {
+  margin: 24px;
+}
+
+#demo-wrapper section {
+  padding: 24px;
+}
+
+#demo-wrapper .mdc-list, #demo-wrapper .mdc-list-group {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+#demo-wrapper .mdc-list-group .mdc-list,
+#demo-wrapper .mdc-theme--dark .mdc-list,
+#demo-wrapper .mdc-theme--dark .mdc-list-group {
+  border: none;
+}
+
+#demo-wrapper h2 {
+  font-size: 1.5em;
+  margin-bottom: 0.8em;
+  margin-left: 24px;
+}
+
+#demo-wrapper h3 {
+  margin-bottom: 0.8em;
+}
+
+.hero .mdc-list {
+  @include mdc-elevation(4);
+
+  background-color: white;
+  min-width: 320px;
+}
diff --git a/packages/mdc-list/README.md b/packages/mdc-list/README.md
index 84393df4826..9e07b31d537 100644
--- a/packages/mdc-list/README.md
+++ b/packages/mdc-list/README.md
@@ -384,3 +384,54 @@ And the basic CSS is relatively trivial
   align-items: flex-end;
 }
 ```
+
+### CSS Classes
+
+#### Blocks
+
+CSS Class | Description
+--- | ---
+`mdc-list` | A container for rows (`mdc-list-item`s)
+`mdc-list-group` | Wraps one or more `mdc-list` and/or `mdc-list-divider` elements
+`mdc-list-item` | An individual row in an `mdc-list`
+`mdc-list-divider` | Separates two rows or two lists using a horizontal bar
+
+#### Modifiers
+
+CSS Class | Description
+--- | ---
+`mdc-list--dense` | Increases the density of the list, making it appear more compact
+`mdc-list--avatar-list` | Configures the leading tiles of each row to display images instead of icons
+`mdc-list--two-line` | Increases the height of the row to give it greater visual separation from adjacent rows
+`mdc-list-item--selected` | Styles the row in a selected\* state
+`mdc-list-item--activated` | Styles the row in an activated\* state
+`mdc-list-divider--inset` | Increases the leading margin of the divider so that it does not intersect the avatar column
+
+\* **Note**: the difference between _selected_ and _activated_ states:
+
+- _Selected_ is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos.
+  Multiple items in a list can be _selected_ at the same time.
+- _Activated_ is more permanent within the page's lifetime. E.g., the currently highlighted destination in a nav drawer.
+  Only one item in a list can be _activated_ at a time.
+
+#### Elements
+
+CSS Class | Description
+--- | ---
+`mdc-list-item__start-detail` | The leading tile in the row (in LTR languages, the left-most)
+`mdc-list-item__end-detail` | The trailing tile in the row (in LTR languages, the right-most)
+`mdc-list-item__text` | Primary text for the row (displayed as the middle tile)
+`mdc-list-item__secondary-text` | Secondary text for the row (displayed in the middle tile)
+`mdc-list-group__subheader` | Heading text displayed above each list in a group
+
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-list-item-primary-text-ink-color($color)` | Sets the ink color of the primary text
+`mdc-list-item-secondary-text-ink-color($color)` | Sets the ink color of the secondary text
+`mdc-list-item-graphic-fill-color($color)` | Sets the fill color of the graphic (`__start-detail`)
+`mdc-list-item-graphic-ink-color($color)` | Sets the ink color of the graphic (`__start-detail`)
+`mdc-list-item-meta-ink-color($color)` | Sets the ink color of the meta data (`__end-detail`)
+`mdc-list-divider-color($color)` | Sets the color of the divider
+`mdc-list-group-subheader-ink-color($color)` | Sets the ink color of the list group subheader
diff --git a/packages/mdc-list/_mixins.scss b/packages/mdc-list/_mixins.scss
new file mode 100644
index 00000000000..7955b732479
--- /dev/null
+++ b/packages/mdc-list/_mixins.scss
@@ -0,0 +1,83 @@
+// Copyright 2016 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+@import "@material/rtl/mixins";
+@import "@material/theme/mixins";
+@import "./variables";
+
+//
+// Public
+//
+
+@mixin mdc-list-item-primary-text-ink-color($color) {
+  @include mdc-theme-prop(color, $color);
+}
+
+@mixin mdc-list-item-secondary-text-ink-color($color) {
+  .mdc-list-item__secondary-text {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-list-item-graphic-fill-color($color) {
+  .mdc-list-item__start-detail {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+@mixin mdc-list-item-graphic-ink-color($color) {
+  .mdc-list-item__start-detail {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-list-item-meta-ink-color($color) {
+  .mdc-list-item__end-detail {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-list-divider-color($color) {
+  .mdc-list-divider {
+    @include mdc-theme-prop(border-bottom-color, $color);
+  }
+}
+
+@mixin mdc-list-group-subheader-ink-color($color) {
+  .mdc-list-group__subheader {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+//
+// Private
+//
+
+// Sets the width and height of a detail element to the specified value.
+@mixin mdc-list-detail-size_($size) {
+  width: $size;
+  height: $size;
+}
+
+// Sets the width and height of the start detail element, as well as calculates the margins for
+// the start detail element such that the text is always offset by 72px, which is defined within
+// the spec.
+@mixin mdc-list-start-detail-size_($size) {
+  $text-offset: 72px;
+  $side-padding: $mdc-list-side-padding;
+  $margin-value: $text-offset - $side-padding - $size;
+
+  @include mdc-list-detail-size_($size);
+  @include mdc-rtl-reflexive-box(margin, right, $margin-value, ".mdc-list-item");
+}
diff --git a/packages/mdc-list/_variables.scss b/packages/mdc-list/_variables.scss
new file mode 100644
index 00000000000..043a5b16872
--- /dev/null
+++ b/packages/mdc-list/_variables.scss
@@ -0,0 +1,18 @@
+// Copyright 2016 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+$mdc-list-divider-color-light: rgba(0, 0, 0, .12) !default;
+$mdc-list-divider-color-dark: rgba(255, 255, 255, .2) !default;
+
+$mdc-list-side-padding: 16px;
diff --git a/packages/mdc-list/mdc-list.scss b/packages/mdc-list/mdc-list.scss
index 7b206b3b33a..f52010e96fb 100644
--- a/packages/mdc-list/mdc-list.scss
+++ b/packages/mdc-list/mdc-list.scss
@@ -17,35 +17,36 @@
 @import "@material/theme/mixins";
 @import "@material/typography/mixins";
 @import "@material/typography/variables";
+@import "./mixins";
+@import "./variables";
 
-$mdc-list-side-padding: 16px;
-
-// Sets the width and height of a detail element to the specified dimension.
-@mixin mdc-list-detail-size_($size) {
-  width: $size;
-  height: $size;
-}
-
-// Sets the width and height of the start detail element, as well as calculates the margins for
-// the start detail element such that the text is always offset by 72px, which is defined within
-// the spec.
-@mixin mdc-list-start-detail-size_($size) {
-  $text-offset: 72px;
-  $side-padding: $mdc-list-side-padding;
-  $margin-value: $text-offset - $side-padding - $size;
+// TODO(acdvorak): Find a way to remove parent .mdc-list and .mdc-list-group selectors; they violate BEM.
+.mdc-list,
+.mdc-list-group {
+  @include mdc-list-divider-color($mdc-list-divider-color-light);
 
-  @include mdc-list-detail-size_($size);
-  @include mdc-rtl-reflexive-box(margin, right, $margin-value, ".mdc-list-item");
+  @include mdc-theme-dark {
+    @include mdc-list-divider-color($mdc-list-divider-color-dark);
+  }
 }
 
 // postcss-bem-linter: define list
 
 .mdc-list {
   @include mdc-typography(subheading2);
-  @include mdc-theme-prop(color, text-primary-on-background);
+
+  // TODO(acdvorak): Find a way to remove parent .mdc-list selector; it violates BEM.
+  @include mdc-list-item-primary-text-ink-color(text-primary-on-background);
+  @include mdc-list-item-secondary-text-ink-color(text-secondary-on-background);
+  @include mdc-list-item-graphic-fill-color(transparent);
+  @include mdc-list-item-graphic-ink-color(text-icon-on-background);
+  @include mdc-list-item-meta-ink-color(text-hint-on-background);
 
   @include mdc-theme-dark {
-    @include mdc-theme-prop(color, text-primary-on-dark);
+    @include mdc-list-item-primary-text-ink-color(text-primary-on-dark);
+    @include mdc-list-item-secondary-text-ink-color(text-secondary-on-dark);
+    @include mdc-list-item-graphic-ink-color(text-icon-on-dark);
+    @include mdc-list-item-meta-ink-color(text-hint-on-dark);
   }
 
   margin: 0;
@@ -75,8 +76,21 @@ $mdc-list-side-padding: 16px;
   justify-content: flex-start;
   height: 48px;
 
+  // "Selected" is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos.
+  // "Activated" is more permanent. E.g., the currently highlighted navigation destination in a drawer.
+  &--selected,
+  &--activated {
+    @include mdc-list-item-primary-text-ink-color(primary);
+    @include mdc-list-item-graphic-ink-color(primary);
+  }
+
+  // stylelint-disable-next-line plugin/selector-bem-pattern
   &__start-detail {
     @include mdc-list-start-detail-size_(24px);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
 
   &__end-detail {
@@ -91,11 +105,6 @@ $mdc-list-side-padding: 16px;
 
   &__secondary-text {
     @include mdc-typography(body1);
-    @include mdc-theme-prop(color, text-secondary-on-background);
-
-    @include mdc-theme-dark {
-      @include mdc-theme-prop(color, text-secondary-on-dark);
-    }
 
     // Match the font size to the primary text when dense
     // stylelint-disable plugin/selector-bem-pattern
@@ -144,7 +153,7 @@ $mdc-list-side-padding: 16px;
     height: 60px;
   }
 }
-// postcss-bem-linter: end //
+// postcss-bem-linter: end
 
 // Override anchor tag styles for the use-case of a list being used for navigation
 // stylelint-disable selector-max-type,selector-no-qualifying-type
@@ -182,11 +191,8 @@ a.mdc-list-item {
   height: 0;
   margin: 0;
   border: none;
-  border-bottom: 1px solid rgba(0, 0, 0, .12);
-
-  @include mdc-theme-dark(".mdc-list") {
-    border-bottom-color: rgba(255, 255, 255, .2);
-  }
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
 }
 
 .mdc-list-divider--inset {
@@ -202,6 +208,12 @@ a.mdc-list-item {
 // postcss-bem-linter: define list-group
 
 .mdc-list-group {
+  @include mdc-list-group-subheader-ink-color(text-primary-on-background);
+
+  @include mdc-theme-dark {
+    @include mdc-list-group-subheader-ink-color(text-primary-on-dark);
+  }
+
   padding: 0 $mdc-list-side-padding;
 
   &__subheader {
@@ -211,11 +223,6 @@ a.mdc-list-item {
       ($mdc-list-subheader-virtual-height - $mdc-list-subheader-leading) / 2;
 
     @include mdc-typography(body2);
-    @include mdc-theme-prop(color, text-primary-on-background);
-
-    @include mdc-theme-dark {
-      @include mdc-theme-prop(color, text-primary-on-dark);
-    }
 
     margin: $mdc-list-subheader-margin 0;
   }
