diff --git a/spec/templates/runner.html.erb b/spec/templates/runner.html.erb
index 964e1682..a4aceedd 100644
--- a/spec/templates/runner.html.erb
+++ b/spec/templates/runner.html.erb
@@ -18,12 +18,12 @@
       var jasmineEnv = jasmine.getEnv();
       jasmineEnv.updateInterval = 1000;
 
-      var trivialReporter = new jasmine.TrivialReporter();
+      var htmlReporter = new jasmine.HtmlReporter();
 
-      jasmineEnv.addReporter(trivialReporter);
+      jasmineEnv.addReporter(htmlReporter);
 
       jasmineEnv.specFilter = function(spec) {
-        return trivialReporter.specFilter(spec);
+        return htmlReporter.specFilter(spec);
       };
 
       var currentWindowOnload = window.onload;
diff --git a/src/html/TrivialReporter.js b/src/html/TrivialReporter.js
index 73834010..6debca57 100644
--- a/src/html/TrivialReporter.js
+++ b/src/html/TrivialReporter.js
@@ -2,6 +2,7 @@ jasmine.TrivialReporter = function(doc) {
   this.document = doc || document;
   this.suiteDivs = {};
   this.logRunningSpecs = false;
+  this.log("DEPRECATION WARNING: jasmine.TrivialReporter is deprecated as of v1.2 and will be removed in version 2.0. Please use (the vastly nicer) jasmine.HtmlReporter.")
 };
 
 jasmine.TrivialReporter.prototype.createDom = function(type, attrs, childrenVarArgs) {
diff --git a/src/html/jasmine.scss b/src/html/jasmine.scss
new file mode 100644
index 00000000..e11d5132
--- /dev/null
+++ b/src/html/jasmine.scss
@@ -0,0 +1,322 @@
+@import "compass.scss";
+
+$line-height: 14px;
+$margin-unit: 14px;
+
+$feint-text-color: #aaa;
+$light-text-color: #666;
+$text-color: #333;
+
+$page-background-color: #eee;
+
+$light-passing-color: #a6b779;
+$passing-color: #5e7d00;
+
+$light-failing-color: #cf867e;
+$failing-color: #b03911;
+
+$neutral-color: #bababa;
+
+$font-size: 11px;
+$large-font-size: 14px;
+
+body {
+  font-size: $font-size;
+  font-family: Monaco, "Lucida Console", monospace;
+  line-height: $line-height;
+  background-color: $page-background-color;
+  color: $text-color;
+  overflow-y: scroll;
+  padding: 0;
+  margin: 5px;
+}
+
+a {
+  text-decoration: none;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  line-height: $line-height;
+}
+
+.banner,
+.symbolSummary,
+.summary,
+.resultMessage,
+.specDetail .description,
+.alert .bar,
+.stackTrace {
+  padding-left: $margin-unit - 5px;
+  padding-right: $margin-unit - 5px;
+}
+
+// This div is available for testing elements that must be added to the DOM.
+// We position it out of view, so it doesn't obstruct the runner.
+#jasmine_content {
+  position: fixed;
+  right: 100%;
+}
+
+.version {
+  color: $feint-text-color;
+}
+
+
+//--- Banner ---//
+
+.banner {
+  margin-top: $line-height;
+}
+
+.duration {
+  color: $feint-text-color;
+  float: right;
+}
+
+
+
+//--- Symbol summary ---//
+
+.symbolSummary {
+  @include clearfix;
+  margin: $line-height 0;
+
+  li {
+    display: block;
+    float: left;
+    height: $line-height / 2;
+    width: $line-height;
+    margin-bottom: $line-height / 2;
+
+    //opacity: .9;
+    
+    font-size: 16px;
+    
+    &.passed {
+      font-size: 14px;
+
+      &:before{
+        color: $passing-color;
+        content: "\02022";
+      }
+    }
+    
+    &.failed {
+      line-height: ($line-height / 2) + 2;
+    
+      &:before{
+        color: $failing-color;
+        content: "x";
+        font-weight: bold;
+        margin-left: -1px;
+      }
+    }
+    
+    &.skipped {
+      font-size: 14px;
+      
+      &:before{
+        color: $neutral-color;
+        content: "\02022";
+      }
+    }
+    
+    &.pending{
+      line-height: ($line-height / 2) + 4;
+      
+      &:before {
+        color: $feint-text-color;
+        content: "-";
+      }
+    }
+  }
+}
+
+
+
+//--- Alert ---//
+
+.bar {
+  line-height: $line-height * 2;
+  font-size: $large-font-size;
+  
+  display: block;
+  color: #eee;
+}
+
+
+.runningAlert {
+  background-color: $light-text-color;
+}
+
+.skippedAlert {
+  background-color: $feint-text-color;
+
+  &:first-child {
+    background-color: $text-color;
+  }
+  
+  &:hover {
+    text-decoration: none;
+    color: white;
+    text-decoration: underline;
+  }
+}
+
+.passingAlert {
+  background-color: $light-passing-color;
+  
+  &:first-child {
+    background-color: $passing-color;
+  }
+}
+
+.failingAlert {
+  background-color: $light-failing-color;
+  
+  &:first-child {
+    background-color: $failing-color
+  }
+}
+
+
+
+
+
+
+
+//--- Results ---//
+
+.results {
+  margin-top: $line-height;
+}
+
+
+
+//--- Results menu ---//
+
+#details {
+  display: none;
+}
+
+.resultsMenu,
+.resultsMenu a {
+  background-color: #fff;
+  color: $text-color;
+}
+
+.showDetails {
+  
+  .summaryMenuItem {
+    font-weight: normal;
+    text-decoration: inherit;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  
+  .detailsMenuItem {
+    font-weight: bold;
+    text-decoration: underline;    
+  }
+
+  .summary {
+    display: none;
+  }
+  
+  #details {
+    display: block;
+  }
+}
+
+.summaryMenuItem {  
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+
+
+
+//--- Results summary ---//
+
+.summary {
+  margin-top: $margin-unit;
+  
+  .suite .suite, .specSummary {
+    margin-left: $margin-unit;
+  }
+  
+  .specSummary {
+    &.passed a {
+      color: $passing-color;  
+    }
+    &.failed a {
+      color: $failing-color;
+    }
+  }
+}
+
+.description+.suite {
+  margin-top: 0;
+}
+
+.suite {
+  margin-top: $margin-unit;
+  
+  a {
+    color: $text-color;
+  }
+}
+
+
+
+
+//--- Results details ---//
+
+#details {
+  .specDetail {
+    margin-bottom: $line-height * 2;
+    
+    .description {
+      //line-height: $line-height * 2;
+      display: block;
+
+      color: white;
+      background-color: $failing-color;
+      
+      //font-size: $large-font-size;
+    }
+  }
+}
+
+.resultMessage {
+  padding-top: $line-height;
+  
+  color: $text-color;
+}
+
+.resultMessage span.result {
+  display: block;
+}
+
+.stackTrace {
+  margin: 5px 0 0 0;
+  max-height: $line-height * 16;
+  overflow: auto;
+  line-height: 18px;
+  
+  color: $light-text-color;
+  border: 1px solid #ddd;
+  background: white;
+  white-space: pre;
+}
+  
+
+
+