diff --git a/src/scss/_common.scss b/src/scss/_common.scss
index e3c73296..926b6bba 100644
--- a/src/scss/_common.scss
+++ b/src/scss/_common.scss
@@ -212,7 +212,7 @@
             padding: 10px 20px;
             overflow: hidden;
             text-overflow: ellipsis;
-            border: 1px solid var(--yfm-color-border);
+            border: 1px solid var(--yfm-color-table-inner-border);
 
             @include removeMarginForEdgeChildren();
         }
diff --git a/src/scss/_note.scss b/src/scss/_note.scss
index 6931db09..2681afe7 100644
--- a/src/scss/_note.scss
+++ b/src/scss/_note.scss
@@ -32,32 +32,48 @@
     // @todo replace with variables
 
     $colors: (
-        yfm-accent-info: #027bf3,
-        yfm-accent-tip: #56bd67,
-        yfm-accent-warning: #f19518,
-        yfm-accent-alert: #ff4645,
+        yfm-accent-info: --yfm-color-note-info,
+        yfm-accent-tip: --yfm-color-note-tip,
+        yfm-accent-warning: --yfm-color-note-warning,
+        yfm-accent-alert: --yfm-color-note-important,
     );
 
     @each $type, $color in $colors {
         &.#{$type} > :first-child::before {
-            $r: red($color);
-            $g: green($color);
-            $b: blue($color);
-            $rgbColor: 'rgb(' + $r + ',' + $g + ',' + $b + ')';
-            content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="' + $rgbColor + '"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+            content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+            mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8"/%3E%3C/svg%3E');
+            mask-repeat: no-repeat;
+            background-color: var($color);
         }
     }
 
-    $backgroundColors: (
-        yfm-accent-info: var(--yfm-color-note-info-background),
-        yfm-accent-tip: var(--yfm-color-note-tip-background),
-        yfm-accent-alert: var(--yfm-color-note-important-background),
-        yfm-accent-warning: var(--yfm-color-note-warning-background),
+    $accents: (
+        info: (
+            background: var(--yfm-color-note-info-background),
+            border-color: var(--yfm-color-note-info-border),
+            border-thickness: var(--yfm-note-info-border-thickness),
+        ),
+        tip: (
+            background: var(--yfm-color-note-tip-background),
+            border-color: var(--yfm-color-note-tip-border),
+            border-thickness: var(--yfm-note-tip-border-thickness),
+        ),
+        alert: (
+            background: var(--yfm-color-note-important-background),
+            border-color: var(--yfm-color-note-important-border),
+            border-thickness: var(--yfm-note-important-border-thickness),
+        ),
+        warning: (
+            background: var(--yfm-color-note-warning-background),
+            border-color: var(--yfm-color-note-warning-border),
+            border-thickness: var(--yfm-note-warning-border-thickness),
+        ),
     );
 
-    @each $type, $color in $backgroundColors {
-        &.#{$type} {
-            background: $color;
+    @each $type, $params in $accents {
+        &.yfm-accent-#{$type} {
+            background: map-get($params, background);
+            border: map-get($params, border-thickness) solid map-get($params, border-color);
         }
     }
 }
diff --git a/src/scss/brand.scss b/src/scss/brand.scss
index 6ce6c838..7c8e4dac 100644
--- a/src/scss/brand.scss
+++ b/src/scss/brand.scss
@@ -6,7 +6,10 @@
     --yfm-color-link-hover: var(--yfm-color-link-hover-private);
 
     --yfm-color-table: var(--yfm-color-table-private);
+    --yfm-color-table-background: var(--yfm-color-table-background-private);
     --yfm-color-table-row-background: var(--yfm-color-table-row-background-private);
+    --yfm-color-table-outer-border: var(--yfm-color-table-outer-border-private);
+    --yfm-color-table-inner-border: var(--yfm-color-table-inner-border-private);
 
     --yfm-color-border: var(--yfm-color-border-private);
 
@@ -15,6 +18,7 @@
     --yfm-color-inline-code: var(--yfm-color-inline-code-private);
     --yfm-color-inline-code-background: var(--yfm-color-inline-code-background-private);
     --yfm-color-code-background: var(--yfm-color-code-background-private);
+    --yfm-color-code: var(--yfm-color-code-private);
 
     --yfm-color-hljs-background: var(--yfm-color-hljs-background-private);
     --yfm-color-hljs-subst: var(--yfm-color-hljs-subst-private);
@@ -29,12 +33,20 @@
 
     --yfm-color-note-tip: var(--yfm-color-note-tip-private);
     --yfm-color-note-tip-background: var(--yfm-color-note-tip-background-private);
+    --yfm-color-note-tip-border: var(--yfm-color-note-tip-border-private);
+    --yfm-note-info-border-thickness: var(--yfm-note-info-border-thickness-private);
     --yfm-color-note-warning: var(--yfm-color-note-warning-private);
     --yfm-color-note-warning-background: var(--yfm-color-note-warning-background-private);
+    --yfm-color-note-warning-border: var(--yfm-color-note-warning-border-private);
+    --yfm-note-warning-border-thickness: var(--yfm-note-warning-border-thickness-private);
     --yfm-color-note-important: var(--yfm-color-note-important-private);
     --yfm-color-note-important-background: var(--yfm-color-note-important-background-private);
+    --yfm-color-note-important-border: var(--yfm-color-note-important-border-private);
+    --yfm-note-important-border-thickness: var(--yfm-note-important-border-thickness-private);
     --yfm-color-note-info: var(--yfm-color-note-info-private);
     --yfm-color-note-info-background: var(--yfm-color-note-info-background-private);
+    --yfm-color-note-info-border: var(--yfm-color-note-info-border-private);
+    --yfm-note-info-border-thickness: var(--yfm-note-info-border-thickness-private);
 
     --yfm-color-term-title: var(--yfm-color-term-title-private);
     --yfm-color-term-title-hover: var(--yfm-color-term-title-hover-private);
@@ -46,4 +58,10 @@
     --yfm-color-modal-actions-hover: var(--yfm-color-modal-actions-hover-private);
     --yfm-color-modal-wide-content: var(--yfm-color-modal-wide-content-private);
     --yfm-color-modal-wide-content-overlay: var(--yfm-color-modal-wide-content-overlay-private);
+
+    --yfm-color-quote: var(--yfm-color-quote-private);
+    --yfm-color-tab: var(--yfm-color-tab-private);
+    --yfm-color-tab-hover: var(--yfm-color-tab-private);
+    --yfm-color-popup-background: var(--yfm-color-popup-background-private);
+    --yfm-color-popup-border: var(--yfm-color-popup-border-private);
 }
diff --git a/src/scss/private.scss b/src/scss/private.scss
index 14561669..fce28dd1 100644
--- a/src/scss/private.scss
+++ b/src/scss/private.scss
@@ -4,13 +4,18 @@
     --yfm-color-link-hover-private: #004080;
     --yfm-color-base-private: #ffffff;
     --yfm-color-table-private: #333;
-    --yfm-color-border-private: rgba(0, 0, 0, 0.07);
+    --yfm-color-table-background-private: rgb(255, 255, 255);
     --yfm-color-table-row-background-private: rgba(0, 0, 0, 0.02);
+    --yfm-color-table-outer-border-private: rgba(0, 0, 0, 0.1);
+    --yfm-color-table-inner-border-private: rgba(0, 0, 0, 0.07);
+
+    --yfm-color-border-private: rgba(0, 0, 0, 0.07);
     --yfm-color-accent-private: #027bf3;
 
     --yfm-color-inline-code-private: rgba(59, 96, 128, 1);
     --yfm-color-inline-code-background-private: rgba(107, 132, 153, 0.12);
     --yfm-color-code-background-private: rgba(107, 132, 153, 0.12);
+    --yfm-color-code-private: #444;
 
     --yfm-color-hljs-background-private: rgba(107, 132, 153, 0.12);
     --yfm-color-hljs-subst-private: #444;
@@ -25,12 +30,20 @@
 
     --yfm-color-note-tip-private: #56bd67;
     --yfm-color-note-tip-background-private: rgba(63, 201, 46, 0.1);
+    --yfm-color-note-tip-border-private: #56bd67;
+    --yfm-note-info-border-thickness-private: 0px;
     --yfm-color-note-warning-private: #f19518;
     --yfm-color-note-warning-background-private: rgba(255, 136, 0, 0.15);
+    --yfm-color-note-warning-border-private: #f19518;
+    --yfm-note-warning-border-thickness-private: 0px;
     --yfm-color-note-important-private: #ff4645;
     --yfm-color-note-important-background-private: rgba(235, 50, 38, 0.08);
+    --yfm-color-note-important-border-private: #ff4645;
+    --yfm-note-important-border-thickness-private: 0px;
     --yfm-color-note-info-private: #027bf3;
     --yfm-color-note-info-background-private: rgba(2, 123, 243, 0.08);
+    --yfm-color-note-info-border-private: #027bf3;
+    --yfm-note-info-border-thickness-private: 0px;
 
     --yfm-color-term-title-private: #027bf3;
     --yfm-color-term-title-hover-private: #004080;
@@ -42,4 +55,10 @@
     --yfm-color-modal-actions-hover-private: rgba(0, 0, 0, 0.05);
     --yfm-color-modal-wide-content-private: rgba(0, 0, 0, 0.85);
     --yfm-color-modal-wide-content-overlay-private: rgb(0, 0, 0);
+
+    --yfm-color-quote-private: rgb(82, 130, 255);
+    --yfm-color-tab-private: rgb(82, 130, 255);
+    --yfm-color-tab-hover-private: rgb(63, 87, 153);
+    --yfm-color-popup-background-private: rgb(255, 255, 255);
+    --yfm-color-popup-border-private: rgb(229, 229, 229);
 }