Use a Tails color palette

wiki/src/donate.html

@@ -664,36 +664,36 @@ permitted by law.</strong></p>
   <div class="chart-content">
     <svg width="75%" height="75%" viewBox="0 0 64 64">
       <!-- stroke-dashoffset = 100 - sum(lengths of preceding segments) + offset of 1st segment -->
-      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#5da5da" stroke-width="32" stroke-dasharray="38 62" stroke-dashoffset="25" aria-labelledby=""></circle>
-      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#faa43a" stroke-width="32" stroke-dasharray="26 74" stroke-dashoffset="87" aria-labelledby=""></circle>
-      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#60bd68" stroke-width="32" stroke-dasharray="19 81" stroke-dashoffset="61" aria-labelledby=""></circle>
-      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#f17cb0" stroke-width="32" stroke-dasharray="17 83" stroke-dashoffset="42" aria-labelledby=""></circle>
+      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#7a478b" stroke-width="32" stroke-dasharray="38 62" stroke-dashoffset="25" aria-labelledby=""></circle>
+      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#9c6bad" stroke-width="32" stroke-dasharray="26 74" stroke-dashoffset="87" aria-labelledby=""></circle>
+      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#af97c7" stroke-width="32" stroke-dasharray="19 81" stroke-dashoffset="61" aria-labelledby=""></circle>
+      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#dadbdc" stroke-width="32" stroke-dasharray="17 83" stroke-dashoffset="42" aria-labelledby=""></circle>
     </svg>
   </div>
 
   <figcaption class="chart-key">
     <ul class="chart-key-list">
-      <li class="blue">
+      <li class="purple-1">
         <div class="key-label">Releases, maintenance, and infrastructure</div><div class="key-percent">(38%)</div>
 	<p>Tails is an endless work of updates and maintenance: publishing a
 	new release every 4 weeks to fix security vulnerabilities, adapting to
 	new versions of the underlying software, keeping our website and
 	development infrastructure secure and reliable, etc.</p>
       </li>
-      <li class="orange">
+      <li class="purple-2">
         <div class="key-label">New features and major improvements</div><div class="key-percent">(26%)</div>
 	<p>In 2019&ndash;2020, we simplified the installation procedure for
 	Windows and macOS, added support for Secure Boot, improved the upgrade
 	process, and made it possible to persist the settings of the Welcome
 	Screen.</p>
       </li>
-      <li class="green">
+      <li class="purple-3">
         <div class="key-label">User experience, documentation, and help desk</div><div class="key-percent">(19%)</div>
 	<p>Even the most secure software is worthless if the people who need it
 	cannot use it. We work hard to understand our users, make it easy to
 	use Tails, and help them make informed security decisions.</p>
       </li>
-      <li class="pink">
+      <li class="gray">
         <div class="key-label">Administration and fundraising</div><div class="key-percent">(17%)</div>
 	<p>We make the most of the money that we receive. We prefer spending
 	our time improving Tails for our users.</p>
@@ -767,19 +767,19 @@ budget under $300&#8239;000.</p>
   <div class="chart-content">
     <svg width="75%" height="75%" viewBox="0 0 64 64">
       <!-- stroke-dashoffset = 100 - sum(lengths of preceding segments) + offset of 1st segment -->
-      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#5da5da" stroke-width="32" stroke-dasharray="36 64" stroke-dashoffset="25" aria-labelledby=""></circle>
-      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#faa43a" stroke-width="32" stroke-dasharray="30 70" stroke-dashoffset="89" aria-labelledby=""></circle>
-      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#60bd68" stroke-width="32" stroke-dasharray="25 75" stroke-dashoffset="59" aria-labelledby=""></circle>
-      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#f17cb0" stroke-width="32" stroke-dasharray="9 91" stroke-dashoffset="34" aria-labelledby=""></circle>
+      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#53b351" stroke-width="32" stroke-dasharray="36 64" stroke-dashoffset="25" aria-labelledby=""></circle>
+      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#7a478b" stroke-width="32" stroke-dasharray="30 70" stroke-dashoffset="89" aria-labelledby=""></circle>
+      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#9c6bad" stroke-width="32" stroke-dasharray="25 75" stroke-dashoffset="59" aria-labelledby=""></circle>
+      <circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#af97c7" stroke-width="32" stroke-dasharray="9 91" stroke-dashoffset="34" aria-labelledby=""></circle>
     </svg>
   </div>
 
   <figcaption class="chart-key">
     <ul class="chart-key-list">
-      <li class="blue"><div class="key-label">Passionate people like you</div><div class="key-percent">(36%)</div></li>
-      <li class="orange"><div class="key-label">Foundations & NGOs</div><div class="key-percent">(30%)</div><br/>like Mozilla or Handshake</li>
-      <li class="green"><div class="key-label">Entities related to the US government</div><div class="key-percent">(25%)</div><br/>like the Open Technology Fund or the ISC Project</li>
-      <li class="pink"><div class="key-label">Private companies</div><div class="key-percent">(9%)</div><br/>like DuckDuckGo or Lush</li>
+      <li class="green"><div class="key-label">Passionate people like you</div><div class="key-percent">(36%)</div></li>
+      <li class="purple-1"><div class="key-label">Foundations & NGOs</div><div class="key-percent">(30%)</div><br/>like Mozilla or Handshake</li>
+      <li class="purple-2"><div class="key-label">Entities related to the US government</div><div class="key-percent">(25%)</div><br/>like the Open Technology Fund or the ISC Project</li>
+      <li class="purple-3"><div class="key-label">Private companies</div><div class="key-percent">(9%)</div><br/>like DuckDuckGo or Lush</li>
     </ul>
   </figcaption>
 </figure>

wiki/src/local.css

@@ -1280,10 +1280,20 @@ div#highlight p {
   font-weight: bold;
 }
 
-.blue .key-label:before { background-color: #5da5da; }
+/* Accessible color palette */
+
+.blue   .key-label:before { background-color: #5da5da; }
 .orange .key-label:before { background-color: #faa43a; }
-.green .key-label:before { background-color: #60bd68; }
-.pink .key-label:before { background-color: #f17cb0; }
-.brown .key-label:before { background-color: #b2912f; }
+.green  .key-label:before { background-color: #60bd68; }
+.pink   .key-label:before { background-color: #f17cb0; }
+.brown  .key-label:before { background-color: #b2912f; }
 .purple .key-label:before { background-color: #b276b2; }
 .yellow .key-label:before { background-color: #decf3f; }
+
+/* Tails color palette */
+
+.purple-1 .key-label:before { background-color: #7a478b; }
+.purple-2 .key-label:before { background-color: #9c6bad; }
+.purple-3 .key-label:before { background-color: #af97c7; }
+.green    .key-label:before { background-color: #53b351; }
+.gray     .key-label:before { background-color: #dadbdc; }