diff --git a/app/assets/stylesheets/course/announcements.css.scss b/app/assets/stylesheets/course/announcements.css.scss
index 61c059400da..261af43897f 100644
--- a/app/assets/stylesheets/course/announcements.css.scss
+++ b/app/assets/stylesheets/course/announcements.css.scss
@@ -2,6 +2,7 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 @import "variables";
+@import "mixins/future";
 
 .course-announcements {
   &.index {
@@ -15,6 +16,10 @@
       .content {
         margin-top: 10px;
       }
+
+      &.future {
+        @include future($gray-lighter);
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/mixins/_future.css.scss b/app/assets/stylesheets/mixins/_future.css.scss
new file mode 100644
index 00000000000..30f898c7d70
--- /dev/null
+++ b/app/assets/stylesheets/mixins/_future.css.scss
@@ -0,0 +1,8 @@
+//future style
+//indicates the item will be available in future
+
+@mixin future($bg-color) {
+  background-color: $bg-color;
+  opacity: 0.9;
+  padding: 10px;
+}