From 277e31aec67168a6e7f91b2d46e4c9d91f5400e1 Mon Sep 17 00:00:00 2001
From: e7d <michael@e7d.io>
Date: Sun, 15 May 2016 20:22:32 +0200
Subject: [PATCH] added DS4 red and blue colors

---
 templates/ds4/base-blue.svg     | 83 +++++++++++++++++++++++++++++++++
 templates/ds4/base-red.svg      | 83 +++++++++++++++++++++++++++++++++
 templates/ds4/template.css      | 10 +++-
 templates/xbox-one/template.css |  4 +-
 4 files changed, 177 insertions(+), 3 deletions(-)
 create mode 100644 templates/ds4/base-blue.svg
 create mode 100644 templates/ds4/base-red.svg

diff --git a/templates/ds4/base-blue.svg b/templates/ds4/base-blue.svg
new file mode 100644
index 0000000..73b9ae8
--- /dev/null
+++ b/templates/ds4/base-blue.svg
@@ -0,0 +1,83 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="806" height="598.9" viewBox="0 0 806 598.9">
+    <pattern x="97.5" y="695.95" width="40" height="103" patternUnits="userSpaceOnUse" id="a" viewBox="0 -231.8 40 103" overflow="visible">
+        <path fill="none" d="M0-128.8h40v-103H0z"/>
+        <path fill="none" d="M0-231.8h40v103H0z"/>
+        <path fill="none" d="M0-231.8h40v103H0z"/>
+        <path d="M34.5 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3z"/>
+        <path d="M34.5-103h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3z"/>
+        <path d="M34.5-206h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3z"/>
+    </pattern>
+    <pattern x="97.5" y="695.95" width="40" height="103" patternUnits="userSpaceOnUse" id="c" viewBox="0 -231.8 40 103" overflow="visible">
+        <path fill="none" d="M0-128.8h40v-103H0z"/>
+        <path fill="none" d="M0-231.8h40v103H0z"/>
+        <path fill="none" d="M0-231.8h40v103H0z"/>
+        <path d="M34.5 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3z"/>
+        <path d="M34.5-103h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3z"/>
+        <path d="M34.5-206h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3z"/>
+    </pattern>
+    <pattern x="97.5" y="695.95" width="71" height="71" patternUnits="userSpaceOnUse" id="e" viewBox="0 -71 71 71" overflow="visible">
+        <path fill="none" d="M0 0h71v-71H0z"/>
+        <path fill="none" d="M0-71h71V0H0z"/>
+        <path fill="none" d="M0-71h71V0H0z"/>
+        <path fill="#B3B3B3" d="M41.8-35.5c0 3.5-2.8 6.3-6.3 6.3s-6.3-2.8-6.3-6.3 2.8-6.3 6.3-6.3 6.3 2.8 6.3 6.3z"/>
+    </pattern>
+    <path fill="#3B51A7" d="M801.25 418.567c-2.899-15.5-17.7-102.5-32-144.6-9.399-27.701-13.1-53-17-64.9-12-35.7-33-65.7-33-65.7s-9.5-13.1-10.1-16.3c-.601-3.3-4.7-8.6-4.7-8.6s-17.4-5.7-62.3-5.7-53.7 5-53.7 5-2.4 2.9-5.9 4.8c-3.5 1.8-11.699 1.7-11.699 1.7h-33.4s-.6-.1-.9.3c-.399.4-.6 2-.6 2h-266.1s-.301-1.7-.601-2c-.399-.4-.899-.3-.899-.3h-33.4s-8.2.2-11.7-1.7c-3.5-1.8-5.899-4.8-5.899-4.8s-8.8-5-53.7-5c-44.8 0-62.3 5.7-62.3 5.7s-4.1 5.3-4.7 8.6c-.6 3.3-10.1 16.3-10.1 16.3s-21 30-33 65.7c-4 11.9-7.7 37.199-17 64.9-14.3 42.1-29.1 129.1-32 144.6-4.3 23.2-4.6 90.2-4.6 90.2s4.5 53.399 36.2 74.899c31.7 21.5 56.7 14 56.7 14s33.1-8.2 57.8-41.899c24.7-33.7 56.6-129.2 56.6-129.2s2.2-3 5.7-5.3c3.5-2.301 6.3-2.601 6.3-2.601l183.7.101 183.7-.101s2.8.3 6.3 2.601c3.5 2.3 5.7 5.3 5.7 5.3s31.899 95.399 56.6 129.2c24.7 33.8 57.8 41.899 57.8 41.899s25 7.5 56.7-14 36.2-74.899 36.2-74.899-.302-66.999-4.702-90.2z"/>
+    <path fill="#3B51A7" d="M36.55 275.968c9.4-27.701 13.1-53 17-64.9 12-35.7 33-65.7 33-65.7s9.5-13.1 10.1-16.3c.6-3.3 4.7-8.6 4.7-8.6s17.4-5.7 62.3-5.7c44.8 0 53.7 5 53.7 5s2.399 2.9 5.899 4.8c3.5 1.8 11.7 1.7 11.7 1.7h33.4s.6-.1.899.3c.4.4.601 2 .601 2h266.2s.301-1.7.601-2c.399-.4.899-.3.899-.3h33.4s8.2.2 11.7-1.7c3.5-1.8 5.899-4.8 5.899-4.8s8.801-5 53.7-5c44.9 0 62.3 5.7 62.3 5.7s4.101 5.3 4.7 8.6c.601 3.3 10.101 16.3 10.101 16.3s21 30 33 65.7c4 11.9 7.699 37.199 17 64.9 14.3 42.1 29.1 129.1 32 144.6 3.899 20.899 4.6 77.3 4.699 88.3v-.1s-.3-66.9-4.699-90.101c-2.9-15.5-17.7-102.5-32-144.6-9.4-27.7-13.101-53-17-64.9-12-35.7-33-65.7-33-65.7s-9.5-13.1-10.101-16.3c-.6-3.3-4.7-8.6-4.7-8.6s-17.399-5.7-62.3-5.7c-44.899 0-53.7 5-53.7 5s-2.399 2.9-5.899 4.8c-3.5 1.8-11.7 1.7-11.7 1.7h-33.4s-.6-.1-.899.3c-.4.4-.601 2-.601 2h-266.2s-.301-1.7-.601-2c-.399-.4-.899-.3-.899-.3h-33.4s-8.2.2-11.7-1.7c-3.5-1.8-5.899-4.8-5.899-4.8s-8.8-5-53.7-5c-44.8 0-62.3 5.7-62.3 5.7s-4.1 5.3-4.7 8.6c-.6 3.3-10.1 16.3-10.1 16.3s-21 30-33 65.7c-4 11.9-7.7 37.2-17 64.9-14.3 42.1-29.1 129.1-32 144.6-4.3 23.101-4.6 90.101-4.6 90.101v.1c.1-10.9.7-67.4 4.7-88.3 2.9-15.401 17.6-102.501 31.9-144.6z" opacity=".06"/>
+    <path fill="#2E47AC" d="M351.15 359.967c0-42.199-34.3-76.499-76.5-76.499s-76.5 34.3-76.5 76.499c0 .7 0 1.301.1 2 0 .7-.1 1.301-.1 2 0 42.2 34.3 76.5 76.5 76.5s76.5-34.3 76.5-76.5c0-.699 0-1.3-.101-2 .001-.699.101-1.4.101-2z"/>
+    <circle fill="#2E47AC" cx="274.65" cy="355.967" r="73"/>
+    <circle cx="274.65" cy="355.967" r="51.5"/>
+    <path fill="#2E47AC" d="M607.75 359.967c0-42.199-34.3-76.499-76.5-76.499s-76.5 34.3-76.5 76.499c0 .7 0 1.301.101 2 0 .7-.101 1.301-.101 2 0 42.2 34.3 76.5 76.5 76.5s76.5-34.3 76.5-76.5c0-.699 0-1.3-.1-2 .1-.699.1-1.4.1-2z"/>
+    <circle fill="#2E47AC" cx="531.25" cy="355.967" r="73"/>
+    <circle cx="531.25" cy="355.967" r="51.5"/>
+    <path fill="#121212" d="M534.75 127.967c-.399-3.2-3.3-5.6-6.5-5.6h-250.6c-3.2 0-6.101 2.3-6.5 5.6-.101.7-.101 1.4-.101 2.1v127.4c0 8.899 7.2 16.1 16.101 16.1h231.6c8.9 0 16.101-7.2 16.101-16.1v-127.4c.099-.7 0-1.4-.101-2.1z"/>
+    <circle fill="#2E47AC" cx="652.25" cy="244.767" r="94.3"/>
+    <circle fill="#2E47AC" cx="153.65" cy="244.767" r="94.3"/>
+    <path fill="#4964CD" d="M230.351 254.067l9.5-8.9c.5-.5.5-1.199 0-1.699l-9.5-8.9c-.7-.7-1.9-.2-1.9.8v17.799c-.1 1 1.099 1.5 1.9.9zm-85.401-84.3h17.8c1 0 1.5-1.2.8-1.9l-8.9-9.5c-.5-.5-1.2-.5-1.7 0l-8.9 9.5c-.6.7-.1 1.9.9 1.9zm-67.5 64.8l-9.5 8.9c-.5.5-.5 1.199 0 1.699l9.5 8.9c.7.699 1.9.199 1.9-.801v-17.798c0-1.1-1.2-1.6-1.9-.9zm85.3 84.201h-17.8c-1 0-1.5 1.199-.8 1.899l8.9 9.5c.5.5 1.2.5 1.7 0l8.9-9.5c.6-.7.1-1.899-.9-1.899z"/>
+    <path opacity=".1" fill="#E6E6E6" d="M105.15 544.467c-40.5-2.8-75.8-20.3-87.3-30.5-11.5-10.3-17.5-31.6-17.5-31.6-.4 15-.4 26.3-.4 26.3s4.5 53.4 36.2 74.9c31.7 21.5 56.7 14 56.7 14s33.1-8.2 57.8-41.9c4.5-6.2 9.3-14.5 14.1-23.8-.1 0-19.2 15.3-59.6 12.6z"/>
+    <pattern id="b" xlink:href="#a" patternTransform="rotate(16.005 -15558.857 -56904.16) scale(.3431)"/>
+    <path opacity=".08" fill="url(#b)" d="M105.15 544.467c-40.5-2.8-75.8-20.3-87.3-30.5-11.5-10.3-17.5-31.6-17.5-31.6-.4 15-.4 26.3-.4 26.3s4.5 53.4 36.2 74.9c31.7 21.5 56.7 14 56.7 14s33.1-8.2 57.8-41.9c4.5-6.2 9.3-14.5 14.1-23.8-.1 0-19.2 15.3-59.6 12.6z"/>
+    <path opacity=".22" d="M89.95 592.467c-12.5 1.801-31.3-2-45.1-7.699-13.6-5.7-24-16.4-24-16.4 4.2 5.8 9.3 11.1 15.3 15.2 31.7 21.5 56.7 14 56.7 14s11.7-2.9 26.3-12.3c0 0-14.6 5.199-29.2 7.199z"/>
+    <path opacity=".1" fill="#E6E6E6" d="M700.75 544.467c40.5-2.8 75.8-20.3 87.3-30.5 11.5-10.199 17.5-31.5 17.5-31.5.4 15 .4 26.301.4 26.301s-4.5 53.399-36.2 74.899-56.7 14-56.7 14-33.1-8.2-57.8-41.899c-4.5-6.2-9.3-14.5-14.1-23.801.1-.1 19.201 15.2 59.6 12.5z"/>
+    <pattern id="d" xlink:href="#c" patternTransform="matrix(-.3298 .0946 .0946 .3298 -30837.82 2104.752)"/>
+    <path opacity=".08" fill="url(#d)" d="M700.75 544.467c40.5-2.8 75.8-20.3 87.3-30.5 11.5-10.199 17.5-31.5 17.5-31.5.4 15 .4 26.301.4 26.301s-4.5 53.399-36.2 74.899-56.7 14-56.7 14-33.1-8.2-57.8-41.899c-4.5-6.2-9.3-14.5-14.1-23.801.1-.1 19.201 15.2 59.6 12.5z"/>
+    <path opacity=".22" d="M715.95 592.467c12.5 1.801 31.3-2 45.1-7.699 13.601-5.7 24-16.4 24-16.4-4.199 5.8-9.3 11.1-15.3 15.2-31.7 21.5-56.7 14-56.7 14s-11.699-2.9-26.3-12.3c0 0 14.601 5.199 29.2 7.199z"/>
+    <path d="M240.45 143.467c6.9 0 12.5 5.6 12.5 12.5v18.3c0 6.9-5.6 12.5-12.5 12.5s-12.5-5.6-12.5-12.5v-18.3c0-6.9 5.6-12.5 12.5-12.5m0-1.7c-7.8 0-14.2 6.4-14.2 14.2v18.3c0 7.8 6.4 14.2 14.2 14.2s14.2-6.4 14.2-14.2v-18.3c0-7.9-6.4-14.2-14.2-14.2z"/>
+    <path fill="#10111A" d="M240.45 143.467c-6.9 0-12.5 5.6-12.5 12.5v18.3c0 6.9 5.6 12.5 12.5 12.5s12.5-5.6 12.5-12.5v-18.3c0-6.9-5.599-12.5-12.5-12.5z"/>
+    <path d="M565.45 143.467c6.9 0 12.5 5.6 12.5 12.5v18.3c0 6.9-5.6 12.5-12.5 12.5s-12.5-5.6-12.5-12.5v-18.3c0-6.9 5.6-12.5 12.5-12.5m0-1.7c-7.8 0-14.2 6.4-14.2 14.2v18.3c0 7.8 6.4 14.2 14.2 14.2s14.2-6.4 14.2-14.2v-18.3c0-7.9-6.4-14.2-14.2-14.2z"/>
+    <path fill="#10111A" d="M565.45 143.467c-6.9 0-12.5 5.6-12.5 12.5v18.3c0 6.9 5.6 12.5 12.5 12.5s12.5-5.6 12.5-12.5v-18.3c0-6.9-5.599-12.5-12.5-12.5z"/>
+    <circle cx="402.95" cy="316.367" r="4.1"/>
+    <circle cx="402.95" cy="295.467" r="4.1"/>
+    <circle cx="396.05" cy="305.667" r="4.1"/>
+    <circle cx="381.351" cy="305.667" r="4.1"/>
+    <circle cx="388.65" cy="316.367" r="4.1"/>
+    <circle cx="388.65" cy="295.467" r="4.1"/>
+    <circle cx="374.351" cy="295.467" r="4.1"/>
+    <circle cx="409.851" cy="305.667" r="4.1"/>
+    <circle cx="424.55" cy="305.667" r="4.1"/>
+    <circle cx="417.15" cy="316.367" r="4.1"/>
+    <circle cx="417.15" cy="295.467" r="4.1"/>
+    <circle cx="431.55" cy="295.467" r="4.1"/>
+    <path d="M402.95 319.467c-2.1 0-3.8-1.6-4.1-3.6 0 .2-.101.3-.101.5 0 2.3 1.8 4.1 4.101 4.1 2.3 0 4.1-1.8 4.1-4.1 0-.2 0-.3-.1-.5-.1 2-1.8 3.6-3.9 3.6zm0-19.9c2.3 0 4.1-1.801 4.1-4.1 0-.201 0-.301-.1-.5-.2 2-2 3.6-4.1 3.6-2.101 0-3.801-1.6-4.101-3.6 0 .199-.1.299-.1.5.202 2.2 2.001 4.1 4.301 4.1zm-2.8 6.1c0-.2 0-.3-.101-.5-.199 2-2 3.601-4.1 3.601s-3.8-1.601-4.1-3.601c0 .2-.101.3-.101.5 0 2.3 1.8 4.101 4.101 4.101 2.401 0 4.301-1.801 4.301-4.101zm-14.799-.5c-.2 2-2 3.601-4.101 3.601-2.1 0-3.8-1.601-4.1-3.601 0 .2-.101.3-.101.5 0 2.3 1.801 4.101 4.101 4.101s4.1-1.801 4.1-4.101c.2-.2.2-.3.101-.5zm3.399 14.3c-2.1 0-3.8-1.6-4.1-3.6 0 .2-.101.3-.101.5 0 2.3 1.801 4.1 4.101 4.1s4.1-1.8 4.1-4.1c0-.2 0-.3-.1-.5-.1 2-1.799 3.6-3.9 3.6zm0-19.9c2.3 0 4.101-1.801 4.101-4.1 0-.201 0-.301-.101-.5-.2 2-2 3.6-4.1 3.6-2.101 0-3.8-1.6-4.101-3.6 0 .199-.1.299-.1.5.101 2.2 2.001 4.1 4.301 4.1zm-10.2-4.099c0-.201 0-.301-.1-.5-.2 2-2 3.6-4.1 3.6-2.101 0-3.801-1.6-4.101-3.6 0 .199-.1.299-.1.5 0 2.299 1.8 4.1 4.1 4.1 2.401-.001 4.301-1.901 4.301-4.1zm35.4 9.699c-.2 2-2 3.601-4.1 3.601-2.101 0-3.801-1.601-4.101-3.601 0 .2-.1.3-.1.5 0 2.3 1.8 4.101 4.1 4.101s4.101-1.801 4.101-4.101c.2-.2.1-.3.1-.5zm10.6 3.601c-2.1 0-3.8-1.601-4.1-3.601 0 .2-.1.3-.1.5 0 2.3 1.8 4.101 4.1 4.101s4.1-1.801 4.1-4.101c0-.2 0-.3-.1-.5 0 2.101-1.8 3.601-3.9 3.601zm-7.3 10.699c-2.1 0-3.8-1.6-4.1-3.6 0 .2-.101.3-.101.5 0 2.3 1.801 4.1 4.101 4.1s4.1-1.8 4.1-4.1c0-.2 0-.3-.1-.5-.1 2-1.799 3.6-3.9 3.6zm0-19.9c2.3 0 4.101-1.801 4.101-4.1 0-.201 0-.301-.101-.5-.2 2-2 3.6-4.1 3.6-2.101 0-3.8-1.6-4.101-3.6 0 .199-.1.299-.1.5.101 2.2 2.001 4.1 4.301 4.1zm14.3-1c-2.1 0-3.8-1.6-4.1-3.6 0 .199-.1.299-.1.5 0 2.299 1.8 4.1 4.1 4.1s4.1-1.801 4.1-4.1c0-.201 0-.301-.1-.5-.099 2.001-1.8 3.6-3.9 3.6z" opacity=".12" fill="#3B51A7"/>
+    <path fill="#0B0B0F" d="M436.55 420.967h-67.9c-2.8 0-4.601.601-4.601-2.199 0-2.801 2.301-5 5-5h67.9c2.8 0 5 2.3 5 5 .101 2.699-2.598 2.199-5.399 2.199z"/>
+    <path d="M408.25 418.768h-36.5c-.5 0-.899-.4-.899-.9 0-1.1.899-2 2-2h34.199c1.101 0 2 .9 2 2 .1.499-.3.9-.8.9zm22.2.799h-4.2c-.899 0-1.7-.8-1.7-1.7 0-1.6 1.301-2.8 2.801-2.8h1.899c1.601 0 2.8 1.3 2.8 2.8.1 1-.6 1.7-1.6 1.7z"/>
+    <path fill="#080808" d="M530.351 124.267c0-1-.801-1.9-1.9-1.9h-251.1c-1 0-1.9.8-1.9 1.9v129.201c0 8.6 7 15.6 15.6 15.6h223.8c8.6 0 15.6-7 15.6-15.6V130.367l-.1-6.1z"/>
+    <g opacity=".12">
+        <pattern id="f" xlink:href="#e" patternTransform="translate(-21058.098 -5548.62) scale(.1017)" opacity=".12"/>
+        <path fill="url(#f)" d="M275.45 253.468c0 8.6 7 15.6 15.6 15.6h223.8c8.6 0 15.6-7 15.6-15.6v-106.5h-255v106.5z"/>
+    </g>
+    <circle fill="#050505" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="402.95" cy="361.967" r="20.2"/>
+    <g fill="#F2F2F2">
+        <path d="M404.05 368.567v-12.8c0-.5.101-.801.301-1 .1-.2.399-.301.699-.2.601.2.9.7.9 1.7v6.899c.8.4 1.5.5 2.1.5.601 0 1.2-.2 1.601-.5 1-.7 1.5-1.899 1.5-3.7 0-1.899-.4-3.399-1.2-4.3-.8-1-2.1-1.899-4.1-2.6-1.301-.4-2.5-.8-3.601-1.101-1.1-.3-2-.5-2.899-.699v20.599l4.699 1.5v-4.298zm-5.1-1l-1.7.6-.899.4-1.601.3-1.5-.2c-.3-.2-.399-.399-.2-.6.101-.101.2-.101.301-.2.1-.1.3-.1.399-.2l1.101-.399 4.1-1.5v-2.7l-1.7.5-5.5 2-1 .399c-1.5.601-2.2 1.2-2.2 1.801.101.8 1 1.5 2.7 1.899.7.2 1.4.3 2.101.4.699.1 1.399.1 2.199.1 1 0 2.101-.1 3.301-.3v-2.3h.098z"/>
+        <path d="M414.75 365.268c-.899-.301-1.7-.5-2.5-.601-.8-.1-1.7-.2-2.5-.1-.899 0-1.899.2-2.8.3-.8.2-1.7.4-2.6.8v2.8l3.899-1.399 1.601-.5 1.1-.3h1.4c.3.1.6.199.699.399 0 .2-.199.4-.8.601l-1.399.5-6.5 2.399v2.7l3.5-1.3 6.399-2.3.7-.4c1.5-.5 2.2-1.2 2.2-1.9.001-.6-.798-1.199-2.399-1.699z"/>
+    </g>
+    <path fill="#0A0A0A" d="M697.15 109.867c0-.8-.4-1.5-1.101-1.9-4.5-2.9-23.399-13.6-51.5-13.6-26.899 0-41.1 5.9-45.1 8-.8.4-1.2 1.2-1.2 2 0 0 9.8-2.9 47.5-2.9s51.401 8.4 51.401 8.4z"/>
+    <path fill="#121212" d="M697.05 116.767v-6.9s-13.699-8.4-51.399-8.4c-37.8 0-47.5 2.9-47.5 2.9v11c7.7-1.3 21.2-2.6 44.1-2.6 28.499.1 45.899 2.4 54.799 4z"/>
+    <path fill="#0A0A0A" d="M108.75 109.867c0-.8.4-1.5 1.1-1.9 4.5-2.9 23.4-13.6 51.5-13.6 26.9 0 41.1 5.9 45.1 8 .8.4 1.2 1.2 1.2 2 0 0-9.8-2.9-47.5-2.9s-51.4 8.4-51.4 8.4z"/>
+    <path fill="#121212" d="M108.85 116.767v-6.9s13.7-8.4 51.4-8.4c37.8 0 47.5 2.9 47.5 2.9v11c-7.7-1.3-21.2-2.6-44.1-2.6-28.5.1-45.9 2.4-54.8 4zm588.3-26s-32.7-3.2-50.601-3.2c-17.899 0-48.399 2.4-48.399 2.4s3.1-44.7 4.8-52c1.6-7.3 7.7-21.3 16.9-27.9 9.199-6.6 11.899-10.1 22.699-10.1 10.801 0 25.4 6.4 34.601 21.4 9.3 15 20 69.4 20 69.4z"/>
+    <path fill="#0A0A0A" d="M598.65 83.167s26.1-4.4 49-4.4c22.8 0 47.899 4.4 47.899 4.4 1 4.7 1.601 7.6 1.601 7.6s-32.7-3.2-50.601-3.2c-17.899 0-48.399 2.4-48.399 2.4s.201-2.7.5-6.8z"/>
+    <path fill="#7084CC" d="M648.65 65.667c-2.101 1.7-3.2 2.6-3.2 2.6-1.2 1.2-1.9 2.7-2 4.5h9.8v-2.6h-6.3c.3-.5 1-1.2 2.1-1.9 1.4-.9 2.301-1.6 2.7-2.1.9-1 1.3-2.1 1.3-3.3 0-1.4-.5-2.5-1.399-3.3-.9-.8-2.101-1.2-3.5-1.2-3.101 0-4.7 1.7-4.7 5h2.7c0-1.8.7-2.7 2.1-2.7 1.3 0 2 .7 2 2.1.199 1.1-.4 2-1.601 2.9zm-17.6 1.5h3c1.5 0 2.301.6 2.4 1.9.1 1.2.2 2.5.3 3.8h3.3v-.4c-.5-.2-.699-.7-.699-1.5 0-.2 0-.4.1-.8v-.7c0-1.7-.6-2.9-1.8-3.5 1.399-.5 2.2-1.6 2.2-3.4 0-1.3-.4-2.3-1.301-3-.8-.7-1.899-1-3.199-1h-7.301v14.3h3v-5.7zm0-6.2h3.7c1.4 0 2.101.6 2.101 1.9s-.801 1.9-2.301 1.9h-3.5v-3.8z" opacity=".08"/>
+    <path fill="#121212" d="M108.75 90.767s32.7-3.2 50.6-3.2 48.3 2.4 48.3 2.4-3.1-44.7-4.8-52c-1.6-7.3-7.7-21.3-16.9-27.9-9.1-6.7-11.8-10.1-22.6-10.1s-25.4 6.4-34.6 21.4c-9.2 15-20 69.4-20 69.4z"/>
+    <path fill="#0A0A0A" d="M207.25 83.167s-26.1-4.4-49-4.4c-22.8 0-47.9 4.4-47.9 4.4-1 4.7-1.6 7.6-1.6 7.6s32.7-3.2 50.6-3.2 48.3 2.4 48.3 2.4-.1-2.7-.4-6.8z"/>
+    <path fill="#7084CC" d="M173.25 65.667c-2.1 1.7-3.2 2.6-3.2 2.6-1.2 1.2-1.9 2.7-2 4.5h9.8v-2.6h-6.2c.3-.5 1-1.2 2.1-1.9 1.4-.9 2.3-1.6 2.7-2.1.9-1 1.3-2.1 1.3-3.3 0-1.4-.5-2.5-1.4-3.3-.9-.8-2.1-1.2-3.5-1.2-3.1 0-4.7 1.7-4.7 5h2.7c0-1.8.7-2.7 2.1-2.7 1.3 0 2 .7 2 2.1.1 1.1-.5 2-1.7 2.9zm-8.5 4.5h-7v-11.7h-3.1v14.3h10.1z" opacity=".08"/>
+    <path d="M547.55 134.567c0 2.1-1.5 3.8-4.1 3.8s-4.1-1.7-4.1-3.8c0-2 1.5-3.8 4.1-3.8s4.1 1.7 4.1 3.8zm-6.699 0c0 1.4.8 2.7 2.6 2.7s2.6-1.4 2.6-2.7c0-1.4-.8-2.7-2.6-2.7s-2.6 1.3-2.6 2.7zm8-3.6h3.8c2.399 0 2.899 1.3 2.899 2.2 0 .9-.5 2.2-2.899 2.2h-2.3v2.8h-1.5v-7.2zm1.5 3.4h2.199c.7 0 1.5-.3 1.5-1.2 0-.9-.699-1.2-1.5-1.2h-2.199v2.4zm5.699-3.4h6.9v1.1h-2.7v6.1h-1.5v-6.2h-2.7v-1zm8 0h1.5v7.2h-1.5v-7.2zm11 3.6c0 2.1-1.5 3.8-4.1 3.8s-4.1-1.7-4.1-3.8c0-2 1.5-3.8 4.1-3.8s4.1 1.7 4.1 3.8zm-6.699 0c0 1.4.8 2.7 2.6 2.7s2.6-1.4 2.6-2.7c0-1.4-.8-2.7-2.6-2.7s-2.6 1.3-2.6 2.7zm8.099-3.6h1.6l3.9 5.3v-5.3h1.4v7.2h-1.601l-3.899-5.3v5.3h-1.4v-7.2zm9.7 4.8c0 1.1 1 1.5 2.2 1.5 1.3 0 1.8-.6 1.8-1.1 0-.6-.4-.8-.7-.9-.6-.2-1.4-.3-2.6-.6-1.5-.3-1.9-1.1-1.9-1.8 0-1.5 1.6-2.1 3.1-2.1 1.801 0 3.301.8 3.301 2.3h-1.5c-.101-.9-.801-1.3-1.801-1.3-.699 0-1.6.2-1.6.9 0 .5.4.8 1 .9.1 0 2 .4 2.5.6 1.1.3 1.7 1.1 1.7 1.8 0 1.6-1.7 2.3-3.4 2.3-2 0-3.5-.8-3.6-2.6h1.5v.1zm-364 0c0 1.1 1 1.5 2.2 1.5 1.3 0 1.8-.6 1.8-1.1 0-.6-.4-.8-.7-.9-.6-.2-1.4-.3-2.6-.6-1.5-.3-1.9-1.1-1.9-1.8 0-1.5 1.6-2.1 3.1-2.1 1.801 0 3.301.8 3.301 2.3h-1.5c-.101-.9-.801-1.3-1.801-1.3-.699 0-1.6.2-1.6.9 0 .5.4.8 1 .9.1 0 2 .4 2.5.6 1.1.3 1.7 1.1 1.7 1.8 0 1.6-1.7 2.3-3.4 2.3-2 0-3.5-.8-3.6-2.6h1.5v.1zm6.701-4.8h1.5v2.9h3.899v-2.9h1.5v7.2h-1.5v-3.2h-3.899v3.2h-1.5v-7.2zm11 0h1.6l3.3 7.2h-1.6l-.8-1.9h-3.4l-.8 1.9h-1.5l3.2-7.2zm-.5 4.3h2.6l-1.3-3.1-1.3 3.1zm6.199-4.3h4.101c1.899 0 2.8.7 2.8 1.9 0 1.4-1.1 1.7-1.4 1.8.5.1 1.301.4 1.301 1.5 0 .8.1 1.6.5 1.9h-1.601c-.2-.3-.2-.7-.2-1.1 0-1.3-.3-1.9-1.699-1.9h-2.2v3h-1.5v-7.1h-.102zm1.5 3.2h2.5c1 0 1.5-.4 1.5-1.1 0-.9-.699-1.1-1.5-1.1h-2.399v2.2h-.101zm7-3.2h6.2v1.1h-4.7v1.9h4.301v1h-4.301v2.1h4.7v1.1h-6.2v-7.2z" fill="#7084CC"/>
+</svg>
diff --git a/templates/ds4/base-red.svg b/templates/ds4/base-red.svg
new file mode 100644
index 0000000..5190394
--- /dev/null
+++ b/templates/ds4/base-red.svg
@@ -0,0 +1,83 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="806" height="598.9" viewBox="0 0 806 598.9">
+    <pattern x="97.5" y="695.95" width="40" height="103" patternUnits="userSpaceOnUse" id="a" viewBox="0 -231.8 40 103" overflow="visible">
+        <path fill="none" d="M0-128.8h40v-103H0z"/>
+        <path fill="none" d="M0-231.8h40v103H0z"/>
+        <path fill="none" d="M0-231.8h40v103H0z"/>
+        <path d="M34.5 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3z"/>
+        <path d="M34.5-103h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3z"/>
+        <path d="M34.5-206h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3z"/>
+    </pattern>
+    <pattern x="97.5" y="695.95" width="40" height="103" patternUnits="userSpaceOnUse" id="c" viewBox="0 -231.8 40 103" overflow="visible">
+        <path fill="none" d="M0-128.8h40v-103H0z"/>
+        <path fill="none" d="M0-231.8h40v103H0z"/>
+        <path fill="none" d="M0-231.8h40v103H0z"/>
+        <path d="M34.5 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3z"/>
+        <path d="M34.5-103h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3z"/>
+        <path d="M34.5-206h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3zm-8 0h3v-154.5h-3z"/>
+    </pattern>
+    <pattern x="97.5" y="695.95" width="71" height="71" patternUnits="userSpaceOnUse" id="e" viewBox="0 -71 71 71" overflow="visible">
+        <path fill="none" d="M0 0h71v-71H0z"/>
+        <path fill="none" d="M0-71h71V0H0z"/>
+        <path fill="none" d="M0-71h71V0H0z"/>
+        <path fill="#B3B3B3" d="M41.8-35.5c0 3.5-2.8 6.3-6.3 6.3s-6.3-2.8-6.3-6.3 2.8-6.3 6.3-6.3 6.3 2.8 6.3 6.3z"/>
+    </pattern>
+    <path fill="#C12526" d="M801.25 418.567c-2.899-15.5-17.7-102.5-32-144.6-9.399-27.701-13.1-53-17-64.9-12-35.7-33-65.7-33-65.7s-9.5-13.1-10.1-16.3c-.601-3.3-4.7-8.6-4.7-8.6s-17.4-5.7-62.3-5.7-53.7 5-53.7 5-2.4 2.9-5.9 4.8c-3.5 1.8-11.699 1.7-11.699 1.7h-33.4s-.6-.1-.9.3c-.399.4-.6 2-.6 2h-266.1s-.301-1.7-.601-2c-.399-.4-.899-.3-.899-.3h-33.4s-8.2.2-11.7-1.7c-3.5-1.8-5.899-4.8-5.899-4.8s-8.8-5-53.7-5c-44.8 0-62.3 5.7-62.3 5.7s-4.1 5.3-4.7 8.6c-.6 3.3-10.1 16.3-10.1 16.3s-21 30-33 65.7c-4 11.9-7.7 37.199-17 64.9-14.3 42.1-29.1 129.1-32 144.6-4.3 23.2-4.6 90.2-4.6 90.2s4.5 53.399 36.2 74.899c31.7 21.5 56.7 14 56.7 14s33.1-8.2 57.8-41.899c24.7-33.7 56.6-129.2 56.6-129.2s2.2-3 5.7-5.3c3.5-2.301 6.3-2.601 6.3-2.601l183.7.101 183.7-.101s2.8.3 6.3 2.601c3.5 2.3 5.7 5.3 5.7 5.3s31.899 95.399 56.6 129.2c24.7 33.8 57.8 41.899 57.8 41.899s25 7.5 56.7-14 36.2-74.899 36.2-74.899-.302-66.999-4.702-90.2z"/>
+    <path fill="#C12526" d="M36.55 275.968c9.4-27.701 13.1-53 17-64.9 12-35.7 33-65.7 33-65.7s9.5-13.1 10.1-16.3c.6-3.3 4.7-8.6 4.7-8.6s17.4-5.7 62.3-5.7c44.8 0 53.7 5 53.7 5s2.399 2.9 5.899 4.8c3.5 1.8 11.7 1.7 11.7 1.7h33.4s.6-.1.899.3c.4.4.601 2 .601 2h266.2s.301-1.7.601-2c.399-.4.899-.3.899-.3h33.4s8.2.2 11.7-1.7c3.5-1.8 5.899-4.8 5.899-4.8s8.801-5 53.7-5c44.9 0 62.3 5.7 62.3 5.7s4.101 5.3 4.7 8.6c.601 3.3 10.101 16.3 10.101 16.3s21 30 33 65.7c4 11.9 7.699 37.199 17 64.9 14.3 42.1 29.1 129.1 32 144.6 3.899 20.899 4.6 77.3 4.699 88.3v-.1s-.3-66.9-4.699-90.101c-2.9-15.5-17.7-102.5-32-144.6-9.4-27.7-13.101-53-17-64.9-12-35.7-33-65.7-33-65.7s-9.5-13.1-10.101-16.3c-.6-3.3-4.7-8.6-4.7-8.6s-17.399-5.7-62.3-5.7c-44.899 0-53.7 5-53.7 5s-2.399 2.9-5.899 4.8c-3.5 1.8-11.7 1.7-11.7 1.7h-33.4s-.6-.1-.899.3c-.4.4-.601 2-.601 2h-266.2s-.301-1.7-.601-2c-.399-.4-.899-.3-.899-.3h-33.4s-8.2.2-11.7-1.7c-3.5-1.8-5.899-4.8-5.899-4.8s-8.8-5-53.7-5c-44.8 0-62.3 5.7-62.3 5.7s-4.1 5.3-4.7 8.6c-.6 3.3-10.1 16.3-10.1 16.3s-21 30-33 65.7c-4 11.9-7.7 37.2-17 64.9-14.3 42.1-29.1 129.1-32 144.6-4.3 23.101-4.6 90.101-4.6 90.101v.1c.1-10.9.7-67.4 4.7-88.3 2.9-15.401 17.6-102.501 31.9-144.6z" opacity=".06"/>
+    <path fill="#AD2D2A" d="M351.15 359.967c0-42.199-34.3-76.499-76.5-76.499s-76.5 34.3-76.5 76.499c0 .7 0 1.301.1 2 0 .7-.1 1.301-.1 2 0 42.2 34.3 76.5 76.5 76.5s76.5-34.3 76.5-76.5c0-.699 0-1.3-.101-2 .001-.699.101-1.4.101-2z"/>
+    <circle fill="#AD2D2A" cx="274.65" cy="355.967" r="73"/>
+    <circle cx="274.65" cy="355.967" r="51.5"/>
+    <path fill="#AD2D2A" d="M607.75 359.967c0-42.199-34.3-76.499-76.5-76.499s-76.5 34.3-76.5 76.499c0 .7 0 1.301.101 2 0 .7-.101 1.301-.101 2 0 42.2 34.3 76.5 76.5 76.5s76.5-34.3 76.5-76.5c0-.699 0-1.3-.1-2 .1-.699.1-1.4.1-2z"/>
+    <circle fill="#AD2D2A" cx="531.25" cy="355.967" r="73"/>
+    <circle cx="531.25" cy="355.967" r="51.5"/>
+    <path fill="#121212" d="M534.75 127.967c-.399-3.2-3.3-5.6-6.5-5.6h-250.6c-3.2 0-6.101 2.3-6.5 5.6-.101.7-.101 1.4-.101 2.1v127.4c0 8.899 7.2 16.1 16.101 16.1h231.6c8.9 0 16.101-7.2 16.101-16.1v-127.4c.099-.7 0-1.4-.101-2.1z"/>
+    <circle fill="#AD2D2A" cx="652.25" cy="244.767" r="94.3"/>
+    <circle fill="#AD2D2A" cx="153.65" cy="244.767" r="94.3"/>
+    <path fill="#D03B3F" d="M230.351 254.067l9.5-8.9c.5-.5.5-1.199 0-1.699l-9.5-8.9c-.7-.7-1.9-.2-1.9.8v17.799c-.1 1 1.099 1.5 1.9.9zm-85.401-84.3h17.8c1 0 1.5-1.2.8-1.9l-8.9-9.5c-.5-.5-1.2-.5-1.7 0l-8.9 9.5c-.6.7-.1 1.9.9 1.9zm-67.5 64.8l-9.5 8.9c-.5.5-.5 1.199 0 1.699l9.5 8.9c.7.699 1.9.199 1.9-.801v-17.798c0-1.1-1.2-1.6-1.9-.9zm85.3 84.201h-17.8c-1 0-1.5 1.199-.8 1.899l8.9 9.5c.5.5 1.2.5 1.7 0l8.9-9.5c.6-.7.1-1.899-.9-1.899z"/>
+    <path opacity=".1" fill="#E6E6E6" d="M105.15 544.467c-40.5-2.8-75.8-20.3-87.3-30.5-11.5-10.3-17.5-31.6-17.5-31.6-.4 15-.4 26.3-.4 26.3s4.5 53.4 36.2 74.9c31.7 21.5 56.7 14 56.7 14s33.1-8.2 57.8-41.9c4.5-6.2 9.3-14.5 14.1-23.8-.1 0-19.2 15.3-59.6 12.6z"/>
+    <pattern id="b" xlink:href="#a" patternTransform="rotate(16.005 -15558.857 -56904.16) scale(.3431)"/>
+    <path opacity=".08" fill="url(#b)" d="M105.15 544.467c-40.5-2.8-75.8-20.3-87.3-30.5-11.5-10.3-17.5-31.6-17.5-31.6-.4 15-.4 26.3-.4 26.3s4.5 53.4 36.2 74.9c31.7 21.5 56.7 14 56.7 14s33.1-8.2 57.8-41.9c4.5-6.2 9.3-14.5 14.1-23.8-.1 0-19.2 15.3-59.6 12.6z"/>
+    <path opacity=".22" d="M89.95 592.467c-12.5 1.801-31.3-2-45.1-7.699-13.6-5.7-24-16.4-24-16.4 4.2 5.8 9.3 11.1 15.3 15.2 31.7 21.5 56.7 14 56.7 14s11.7-2.9 26.3-12.3c0 0-14.6 5.199-29.2 7.199z"/>
+    <path opacity=".1" fill="#E6E6E6" d="M700.75 544.467c40.5-2.8 75.8-20.3 87.3-30.5 11.5-10.199 17.5-31.5 17.5-31.5.4 15 .4 26.301.4 26.301s-4.5 53.399-36.2 74.899-56.7 14-56.7 14-33.1-8.2-57.8-41.899c-4.5-6.2-9.3-14.5-14.1-23.801.1-.1 19.201 15.2 59.6 12.5z"/>
+    <pattern id="d" xlink:href="#c" patternTransform="matrix(-.3298 .0946 .0946 .3298 -30837.82 2104.752)"/>
+    <path opacity=".08" fill="url(#d)" d="M700.75 544.467c40.5-2.8 75.8-20.3 87.3-30.5 11.5-10.199 17.5-31.5 17.5-31.5.4 15 .4 26.301.4 26.301s-4.5 53.399-36.2 74.899-56.7 14-56.7 14-33.1-8.2-57.8-41.899c-4.5-6.2-9.3-14.5-14.1-23.801.1-.1 19.201 15.2 59.6 12.5z"/>
+    <path opacity=".22" d="M715.95 592.467c12.5 1.801 31.3-2 45.1-7.699 13.601-5.7 24-16.4 24-16.4-4.199 5.8-9.3 11.1-15.3 15.2-31.7 21.5-56.7 14-56.7 14s-11.699-2.9-26.3-12.3c0 0 14.601 5.199 29.2 7.199z"/>
+    <path d="M240.45 143.467c6.9 0 12.5 5.6 12.5 12.5v18.3c0 6.9-5.6 12.5-12.5 12.5s-12.5-5.6-12.5-12.5v-18.3c0-6.9 5.6-12.5 12.5-12.5m0-1.7c-7.8 0-14.2 6.4-14.2 14.2v18.3c0 7.8 6.4 14.2 14.2 14.2s14.2-6.4 14.2-14.2v-18.3c0-7.9-6.4-14.2-14.2-14.2z"/>
+    <path fill="#10111A" d="M240.45 143.467c-6.9 0-12.5 5.6-12.5 12.5v18.3c0 6.9 5.6 12.5 12.5 12.5s12.5-5.6 12.5-12.5v-18.3c0-6.9-5.599-12.5-12.5-12.5z"/>
+    <path d="M565.45 143.467c6.9 0 12.5 5.6 12.5 12.5v18.3c0 6.9-5.6 12.5-12.5 12.5s-12.5-5.6-12.5-12.5v-18.3c0-6.9 5.6-12.5 12.5-12.5m0-1.7c-7.8 0-14.2 6.4-14.2 14.2v18.3c0 7.8 6.4 14.2 14.2 14.2s14.2-6.4 14.2-14.2v-18.3c0-7.9-6.4-14.2-14.2-14.2z"/>
+    <path fill="#10111A" d="M565.45 143.467c-6.9 0-12.5 5.6-12.5 12.5v18.3c0 6.9 5.6 12.5 12.5 12.5s12.5-5.6 12.5-12.5v-18.3c0-6.9-5.599-12.5-12.5-12.5z"/>
+    <circle cx="402.95" cy="316.367" r="4.1"/>
+    <circle cx="402.95" cy="295.467" r="4.1"/>
+    <circle cx="396.05" cy="305.667" r="4.1"/>
+    <circle cx="381.351" cy="305.667" r="4.1"/>
+    <circle cx="388.65" cy="316.367" r="4.1"/>
+    <circle cx="388.65" cy="295.467" r="4.1"/>
+    <circle cx="374.351" cy="295.467" r="4.1"/>
+    <circle cx="409.851" cy="305.667" r="4.1"/>
+    <circle cx="424.55" cy="305.667" r="4.1"/>
+    <circle cx="417.15" cy="316.367" r="4.1"/>
+    <circle cx="417.15" cy="295.467" r="4.1"/>
+    <circle cx="431.55" cy="295.467" r="4.1"/>
+    <path d="M402.95 319.467c-2.1 0-3.8-1.6-4.1-3.6 0 .2-.101.3-.101.5 0 2.3 1.8 4.1 4.101 4.1 2.3 0 4.1-1.8 4.1-4.1 0-.2 0-.3-.1-.5-.1 2-1.8 3.6-3.9 3.6zm0-19.9c2.3 0 4.1-1.801 4.1-4.1 0-.201 0-.301-.1-.5-.2 2-2 3.6-4.1 3.6-2.101 0-3.801-1.6-4.101-3.6 0 .199-.1.299-.1.5.202 2.2 2.001 4.1 4.301 4.1zm-2.8 6.1c0-.2 0-.3-.101-.5-.199 2-2 3.601-4.1 3.601s-3.8-1.601-4.1-3.601c0 .2-.101.3-.101.5 0 2.3 1.8 4.101 4.101 4.101 2.401 0 4.301-1.801 4.301-4.101zm-14.799-.5c-.2 2-2 3.601-4.101 3.601-2.1 0-3.8-1.601-4.1-3.601 0 .2-.101.3-.101.5 0 2.3 1.801 4.101 4.101 4.101s4.1-1.801 4.1-4.101c.2-.2.2-.3.101-.5zm3.399 14.3c-2.1 0-3.8-1.6-4.1-3.6 0 .2-.101.3-.101.5 0 2.3 1.801 4.1 4.101 4.1s4.1-1.8 4.1-4.1c0-.2 0-.3-.1-.5-.1 2-1.799 3.6-3.9 3.6zm0-19.9c2.3 0 4.101-1.801 4.101-4.1 0-.201 0-.301-.101-.5-.2 2-2 3.6-4.1 3.6-2.101 0-3.8-1.6-4.101-3.6 0 .199-.1.299-.1.5.101 2.2 2.001 4.1 4.301 4.1zm-10.2-4.099c0-.201 0-.301-.1-.5-.2 2-2 3.6-4.1 3.6-2.101 0-3.801-1.6-4.101-3.6 0 .199-.1.299-.1.5 0 2.299 1.8 4.1 4.1 4.1 2.401-.001 4.301-1.901 4.301-4.1zm35.4 9.699c-.2 2-2 3.601-4.1 3.601-2.101 0-3.801-1.601-4.101-3.601 0 .2-.1.3-.1.5 0 2.3 1.8 4.101 4.1 4.101s4.101-1.801 4.101-4.101c.2-.2.1-.3.1-.5zm10.6 3.601c-2.1 0-3.8-1.601-4.1-3.601 0 .2-.1.3-.1.5 0 2.3 1.8 4.101 4.1 4.101s4.1-1.801 4.1-4.101c0-.2 0-.3-.1-.5 0 2.101-1.8 3.601-3.9 3.601zm-7.3 10.699c-2.1 0-3.8-1.6-4.1-3.6 0 .2-.101.3-.101.5 0 2.3 1.801 4.1 4.101 4.1s4.1-1.8 4.1-4.1c0-.2 0-.3-.1-.5-.1 2-1.799 3.6-3.9 3.6zm0-19.9c2.3 0 4.101-1.801 4.101-4.1 0-.201 0-.301-.101-.5-.2 2-2 3.6-4.1 3.6-2.101 0-3.8-1.6-4.101-3.6 0 .199-.1.299-.1.5.101 2.2 2.001 4.1 4.301 4.1zm14.3-1c-2.1 0-3.8-1.6-4.1-3.6 0 .199-.1.299-.1.5 0 2.299 1.8 4.1 4.1 4.1s4.1-1.801 4.1-4.1c0-.201 0-.301-.1-.5-.099 2.001-1.8 3.6-3.9 3.6z" opacity=".12" fill="#C12526"/>
+    <path fill="#0B0B0F" d="M436.55 420.967h-67.9c-2.8 0-4.601.601-4.601-2.199 0-2.801 2.301-5 5-5h67.9c2.8 0 5 2.3 5 5 .101 2.699-2.598 2.199-5.399 2.199z"/>
+    <path d="M408.25 418.768h-36.5c-.5 0-.899-.4-.899-.9 0-1.1.899-2 2-2h34.199c1.101 0 2 .9 2 2 .1.499-.3.9-.8.9zm22.2.799h-4.2c-.899 0-1.7-.8-1.7-1.7 0-1.6 1.301-2.8 2.801-2.8h1.899c1.601 0 2.8 1.3 2.8 2.8.1 1-.6 1.7-1.6 1.7z"/>
+    <path fill="#080808" d="M530.351 124.267c0-1-.801-1.9-1.9-1.9h-251.1c-1 0-1.9.8-1.9 1.9v129.201c0 8.6 7 15.6 15.6 15.6h223.8c8.6 0 15.6-7 15.6-15.6V130.367l-.1-6.1z"/>
+    <g opacity=".12">
+        <pattern id="f" xlink:href="#e" patternTransform="translate(-21058.098 -5548.62) scale(.1017)" opacity=".12"/>
+        <path fill="url(#f)" d="M275.45 253.468c0 8.6 7 15.6 15.6 15.6h223.8c8.6 0 15.6-7 15.6-15.6v-106.5h-255v106.5z"/>
+    </g>
+    <circle fill="#050505" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="402.95" cy="361.967" r="20.2"/>
+    <g fill="#F2F2F2">
+        <path d="M404.05 368.567v-12.8c0-.5.101-.801.301-1 .1-.2.399-.301.699-.2.601.2.9.7.9 1.7v6.899c.8.4 1.5.5 2.1.5.601 0 1.2-.2 1.601-.5 1-.7 1.5-1.899 1.5-3.7 0-1.899-.4-3.399-1.2-4.3-.8-1-2.1-1.899-4.1-2.6-1.301-.4-2.5-.8-3.601-1.101-1.1-.3-2-.5-2.899-.699v20.599l4.699 1.5v-4.298zm-5.1-1l-1.7.6-.899.4-1.601.3-1.5-.2c-.3-.2-.399-.399-.2-.6.101-.101.2-.101.301-.2.1-.1.3-.1.399-.2l1.101-.399 4.1-1.5v-2.7l-1.7.5-5.5 2-1 .399c-1.5.601-2.2 1.2-2.2 1.801.101.8 1 1.5 2.7 1.899.7.2 1.4.3 2.101.4.699.1 1.399.1 2.199.1 1 0 2.101-.1 3.301-.3v-2.3h.098z"/>
+        <path d="M414.75 365.268c-.899-.301-1.7-.5-2.5-.601-.8-.1-1.7-.2-2.5-.1-.899 0-1.899.2-2.8.3-.8.2-1.7.4-2.6.8v2.8l3.899-1.399 1.601-.5 1.1-.3h1.4c.3.1.6.199.699.399 0 .2-.199.4-.8.601l-1.399.5-6.5 2.399v2.7l3.5-1.3 6.399-2.3.7-.4c1.5-.5 2.2-1.2 2.2-1.9.001-.6-.798-1.199-2.399-1.699z"/>
+    </g>
+    <path fill="#0A0A0A" d="M697.15 109.867c0-.8-.4-1.5-1.101-1.9-4.5-2.9-23.399-13.6-51.5-13.6-26.899 0-41.1 5.9-45.1 8-.8.4-1.2 1.2-1.2 2 0 0 9.8-2.9 47.5-2.9s51.401 8.4 51.401 8.4z"/>
+    <path fill="#121212" d="M697.05 116.767v-6.9s-13.699-8.4-51.399-8.4c-37.8 0-47.5 2.9-47.5 2.9v11c7.7-1.3 21.2-2.6 44.1-2.6 28.499.1 45.899 2.4 54.799 4z"/>
+    <path fill="#0A0A0A" d="M108.75 109.867c0-.8.4-1.5 1.1-1.9 4.5-2.9 23.4-13.6 51.5-13.6 26.9 0 41.1 5.9 45.1 8 .8.4 1.2 1.2 1.2 2 0 0-9.8-2.9-47.5-2.9s-51.4 8.4-51.4 8.4z"/>
+    <path fill="#121212" d="M108.85 116.767v-6.9s13.7-8.4 51.4-8.4c37.8 0 47.5 2.9 47.5 2.9v11c-7.7-1.3-21.2-2.6-44.1-2.6-28.5.1-45.9 2.4-54.8 4zm588.3-26s-32.7-3.2-50.601-3.2c-17.899 0-48.399 2.4-48.399 2.4s3.1-44.7 4.8-52c1.6-7.3 7.7-21.3 16.9-27.9 9.199-6.6 11.899-10.1 22.699-10.1 10.801 0 25.4 6.4 34.601 21.4 9.3 15 20 69.4 20 69.4z"/>
+    <path fill="#0A0A0A" d="M598.65 83.167s26.1-4.4 49-4.4c22.8 0 47.899 4.4 47.899 4.4 1 4.7 1.601 7.6 1.601 7.6s-32.7-3.2-50.601-3.2c-17.899 0-48.399 2.4-48.399 2.4s.201-2.7.5-6.8z"/>
+    <path fill="#EF8B89" d="M648.65 65.667c-2.101 1.7-3.2 2.6-3.2 2.6-1.2 1.2-1.9 2.7-2 4.5h9.8v-2.6h-6.3c.3-.5 1-1.2 2.1-1.9 1.4-.9 2.301-1.6 2.7-2.1.9-1 1.3-2.1 1.3-3.3 0-1.4-.5-2.5-1.399-3.3-.9-.8-2.101-1.2-3.5-1.2-3.101 0-4.7 1.7-4.7 5h2.7c0-1.8.7-2.7 2.1-2.7 1.3 0 2 .7 2 2.1.199 1.1-.4 2-1.601 2.9zm-17.6 1.5h3c1.5 0 2.301.6 2.4 1.9.1 1.2.2 2.5.3 3.8h3.3v-.4c-.5-.2-.699-.7-.699-1.5 0-.2 0-.4.1-.8v-.7c0-1.7-.6-2.9-1.8-3.5 1.399-.5 2.2-1.6 2.2-3.4 0-1.3-.4-2.3-1.301-3-.8-.7-1.899-1-3.199-1h-7.301v14.3h3v-5.7zm0-6.2h3.7c1.4 0 2.101.6 2.101 1.9s-.801 1.9-2.301 1.9h-3.5v-3.8z" opacity=".08"/>
+    <path fill="#121212" d="M108.75 90.767s32.7-3.2 50.6-3.2 48.3 2.4 48.3 2.4-3.1-44.7-4.8-52c-1.6-7.3-7.7-21.3-16.9-27.9-9.1-6.7-11.8-10.1-22.6-10.1s-25.4 6.4-34.6 21.4c-9.2 15-20 69.4-20 69.4z"/>
+    <path fill="#0A0A0A" d="M207.25 83.167s-26.1-4.4-49-4.4c-22.8 0-47.9 4.4-47.9 4.4-1 4.7-1.6 7.6-1.6 7.6s32.7-3.2 50.6-3.2 48.3 2.4 48.3 2.4-.1-2.7-.4-6.8z"/>
+    <path fill="#EF8B89" d="M173.25 65.667c-2.1 1.7-3.2 2.6-3.2 2.6-1.2 1.2-1.9 2.7-2 4.5h9.8v-2.6h-6.2c.3-.5 1-1.2 2.1-1.9 1.4-.9 2.3-1.6 2.7-2.1.9-1 1.3-2.1 1.3-3.3 0-1.4-.5-2.5-1.4-3.3-.9-.8-2.1-1.2-3.5-1.2-3.1 0-4.7 1.7-4.7 5h2.7c0-1.8.7-2.7 2.1-2.7 1.3 0 2 .7 2 2.1.1 1.1-.5 2-1.7 2.9zm-8.5 4.5h-7v-11.7h-3.1v14.3h10.1z" opacity=".08"/>
+    <path d="M547.55 134.567c0 2.1-1.5 3.8-4.1 3.8s-4.1-1.7-4.1-3.8c0-2 1.5-3.8 4.1-3.8s4.1 1.7 4.1 3.8zm-6.699 0c0 1.4.8 2.7 2.6 2.7s2.6-1.4 2.6-2.7c0-1.4-.8-2.7-2.6-2.7s-2.6 1.3-2.6 2.7zm8-3.6h3.8c2.399 0 2.899 1.3 2.899 2.2 0 .9-.5 2.2-2.899 2.2h-2.3v2.8h-1.5v-7.2zm1.5 3.4h2.199c.7 0 1.5-.3 1.5-1.2 0-.9-.699-1.2-1.5-1.2h-2.199v2.4zm5.699-3.4h6.9v1.1h-2.7v6.1h-1.5v-6.2h-2.7v-1zm8 0h1.5v7.2h-1.5v-7.2zm11 3.6c0 2.1-1.5 3.8-4.1 3.8s-4.1-1.7-4.1-3.8c0-2 1.5-3.8 4.1-3.8s4.1 1.7 4.1 3.8zm-6.699 0c0 1.4.8 2.7 2.6 2.7s2.6-1.4 2.6-2.7c0-1.4-.8-2.7-2.6-2.7s-2.6 1.3-2.6 2.7zm8.099-3.6h1.6l3.9 5.3v-5.3h1.4v7.2h-1.601l-3.899-5.3v5.3h-1.4v-7.2zm9.7 4.8c0 1.1 1 1.5 2.2 1.5 1.3 0 1.8-.6 1.8-1.1 0-.6-.4-.8-.7-.9-.6-.2-1.4-.3-2.6-.6-1.5-.3-1.9-1.1-1.9-1.8 0-1.5 1.6-2.1 3.1-2.1 1.801 0 3.301.8 3.301 2.3h-1.5c-.101-.9-.801-1.3-1.801-1.3-.699 0-1.6.2-1.6.9 0 .5.4.8 1 .9.1 0 2 .4 2.5.6 1.1.3 1.7 1.1 1.7 1.8 0 1.6-1.7 2.3-3.4 2.3-2 0-3.5-.8-3.6-2.6h1.5v.1zm-364 0c0 1.1 1 1.5 2.2 1.5 1.3 0 1.8-.6 1.8-1.1 0-.6-.4-.8-.7-.9-.6-.2-1.4-.3-2.6-.6-1.5-.3-1.9-1.1-1.9-1.8 0-1.5 1.6-2.1 3.1-2.1 1.801 0 3.301.8 3.301 2.3h-1.5c-.101-.9-.801-1.3-1.801-1.3-.699 0-1.6.2-1.6.9 0 .5.4.8 1 .9.1 0 2 .4 2.5.6 1.1.3 1.7 1.1 1.7 1.8 0 1.6-1.7 2.3-3.4 2.3-2 0-3.5-.8-3.6-2.6h1.5v.1zm6.701-4.8h1.5v2.9h3.899v-2.9h1.5v7.2h-1.5v-3.2h-3.899v3.2h-1.5v-7.2zm11 0h1.6l3.3 7.2h-1.6l-.8-1.9h-3.4l-.8 1.9h-1.5l3.2-7.2zm-.5 4.3h2.6l-1.3-3.1-1.3 3.1zm6.199-4.3h4.101c1.899 0 2.8.7 2.8 1.9 0 1.4-1.1 1.7-1.4 1.8.5.1 1.301.4 1.301 1.5 0 .8.1 1.6.5 1.9h-1.601c-.2-.3-.2-.7-.2-1.1 0-1.3-.3-1.9-1.699-1.9h-2.2v3h-1.5v-7.1h-.102zm1.5 3.2h2.5c1 0 1.5-.4 1.5-1.1 0-.9-.699-1.1-1.5-1.1h-2.399v2.2h-.101zm7-3.2h6.2v1.1h-4.7v1.9h4.301v1h-4.301v2.1h4.7v1.1h-6.2v-7.2z" fill="#EF8B89"/>
+</svg>
diff --git a/templates/ds4/template.css b/templates/ds4/template.css
index 53722fa..da2a6f0 100644
--- a/templates/ds4/template.css
+++ b/templates/ds4/template.css
@@ -4,10 +4,18 @@
     height: 598px;
 }
 
-.gamepad.white {
+.gamepad[data-color="white"] {
     background-image: url(base-white.svg);
 }
 
+.gamepad[data-color="red"] {
+    background-image: url(base-red.svg);
+}
+
+.gamepad[data-color="blue"] {
+    background-image: url(base-blue.svg);
+}
+
 .gamepad.disconnected {
     background-image: url(disconnected.svg);
 }
diff --git a/templates/xbox-one/template.css b/templates/xbox-one/template.css
index af8d2e7..2cc0568 100644
--- a/templates/xbox-one/template.css
+++ b/templates/xbox-one/template.css
@@ -4,8 +4,8 @@
     width: 750px;
 }
 
-.gamepad.white {
-     background-image: url(base-white.svg); 
+.gamepad[data-color="white"] {
+    background-image: url(base-white.svg);
 }
 
 .gamepad.disconnected {