[tor-commits] [styleguide/master] Update colors

[antonela at torproject.org]

commit ae8bd2f6d15d602ee9b3587662fb754b36c63a8b
Author: Antonela <hola at antonela.me>
Date:   Wed Dec 4 19:14:02 2019 -0300

    Update colors
---
 templates/brand-assets.html |  4 ++--
 templates/visuals.html      | 41 +++++++++++++++++++++++++++++++----------
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/templates/brand-assets.html b/templates/brand-assets.html
index f2cd0fd..e9b08f9 100644
--- a/templates/brand-assets.html
+++ b/templates/brand-assets.html
@@ -47,7 +47,7 @@
     </div>
     <div class="col-sm-6">
       <div class="border p-5 text-left">
-        <h5>Download Tor Logo Assets</h5>
+        <h6>Download Tor Logo Assets</h6>
         <p class="m-0">This package includes .png and .svg files</p>
         <a class="btn btn-lg btn-link p-0" title="Tor Media Repo" href="https://gitweb.torproject.org/project/web/styleguide.git/tree/assets/static/images/tor-logo" target="_blank">Visit Repo</a>
       </div>
@@ -96,7 +96,7 @@
     </div>
     <div class="col-sm-6">
       <div class="border p-5 text-left">
-        <h5>Download Tor Browser Icon</h5>
+        <h6>Download Tor Browser Icon</h6>
         <p class="m-0">This package includes .png and .svg files</p>
         <a class="btn btn-lg btn-link p-0" title="Tor Media Repo" href="https://gitweb.torproject.org/project/web/styleguide.git/tree/assets/static/images/tor-browser" target="_blank">Visit Repo</a>
       </div>
diff --git a/templates/visuals.html b/templates/visuals.html
index 03ae3b9..1357026 100644
--- a/templates/visuals.html
+++ b/templates/visuals.html
@@ -18,37 +18,58 @@
 
   {{ this.body }}
 
-  <div class="page-header mb-4 mt-5">
-    <h3>Colors</h3>
+ <div class="page-header mb-4 mt-5">
+  <h3>Colors</h3>
     <p class="text-muted">The main Tor Project color is Purple. Use Dark Purple as a secondary option.</p>
   </div>
   <div class="row">
       <div class="col-4">
-          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-primary text-white small">#7D4698</div>
+          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-primary text-white small"><code>#7D4698</code></div>
           <h5 class="text-left">Purple</h5>
       </div>
       <div class="col-4">
-          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-secondary text-white small">#333A41</div>
-          <h5 class="text-left">Dark Grey</h5>
+          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-dark text-white small"><code>#59316B</code></div>
+          <h5 class="text-left">Dark Purple</h5>
       </div>
       <div class="col-4">
-          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-success text-white small">#68B030</div>
+          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-success text-white small"><code>#68B030</code></div>
           <h5 class="text-left">Green</h5>
       </div>
       <div class="col-4">
-          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-light text-black small">#F8F9FA</div>
+          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-light text-black small"><code>#F8F9FA</code></div>
           <h5 class="text-left">Grey</h5>
       </div>
       <div class="col-4">
-          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-dark text-white small">#59316B</div>
-          <h5 class="text-left">Dark Purple</h5>
+          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-secondary text-white small"><code>#333A41</code></div>
+          <h5 class="text-left">Dark Grey</h5>
       </div>
       <div class="col-4">
-          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-white text-black small border">#FFFFFF</div>
+          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 bg-white text-black small border"><code>#FFFFFF</code></div>
           <h5 class="text-left">White</h5>
       </div>
   </div>
 
+  <h3 class="mt-5">Apps</h3>
+  <p class="text-muted">The main Tor Project color is Purple. Use Dark Purple as a secondary option.</p>
+  <div class="row">
+      <div class="col-3">
+          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 text-white small" style="background:blueviolet;"><code>blueviolet</code></div>
+          <h5 class="text-left">Blue Violet</h5>
+      </div>
+      <div class="col-3">
+          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 text-white small" style="background:darkblue;"><code>darkblue</code></div>
+          <h5 class="text-left">Dark Blue</h5>
+      </div>
+      <div class="col-3">
+          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 text-white small border" style="background:blue;"><code>blue</code></div>
+          <h5 class="text-left">Blue</h5>
+      </div>
+      <div class="col-3">
+          <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 text-black small" style="background:lime;"><code>lime</code></div>
+          <h5 class="text-left">Lime</h5>
+      </div>
+  </div>
+  
   <h1 id="grid"></h1>
   <div class="page-header mb-4 mt-5">
     <h3>Grid</h3>