Update brand assets (#10081)

* Update header logo and inline icon * Update full logos + layout on loading screen * Update favicon assets and strategy - Switches to serve an ico file alongside an SVG file - Introduces an apple-touch-icon * Removes unused favicon/meta assets * Changelog item for ui * Create component for logo * Simplify logo component, set brand color * Fix docs loading state CSS issue
hashicorp · May 5, 2021 · 859afb9 · 859afb9
1 parent c1d1be2
commit 859afb9
Show file tree

Hide file tree

Showing 36 changed files with 49 additions and 86 deletions.
diff --git a/.changelog/10081.txt b/.changelog/10081.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: updates the ui with the new consul brand assets
+```
diff --git a/ui/packages/consul-ui/app/components/consul/logo/index.hbs b/ui/packages/consul-ui/app/components/consul/logo/index.hbs
@@ -0,0 +1,4 @@
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <title>Consul</title>
+  <path d="M20.0909311,0.531825836 C17.5736708,-0.133926002 14.9319012,-0.175262092 12.3950559,0.41140611 C9.85814916,0.998075538 7.50278772,2.1950159 5.53339269,3.89834301 C3.56397924,5.60167011 2.04003632,7.75991032 1.09382125,10.1857533 C0.147614161,12.6115349 -0.192263562,15.231632 0.103691496,17.8185758 C0.399647167,20.4055195 1.32249342,22.8811539 2.79212624,25.0305962 C4.26175905,27.1800385 6.2337511,28.9383326 8.5369881,30.1528504 C10.8402251,31.3673682 13.4050666,32.0014567 16.008894,32 C20.0224756,32.0040967 23.890121,30.4948211 26.8400939,27.7732993 L23.056744,23.818657 C21.5467316,25.1801547 19.674304,26.0745584 17.666316,26.3936287 C15.658328,26.7127604 13.6008556,26.4427448 11.7432242,25.6164282 C9.88553137,24.7900502 8.30724765,23.4427963 7.19961874,21.7377931 C6.09198982,20.0328513 5.50246798,18.0432818 5.50246798,16.0100604 C5.50246798,13.9769005 6.09198982,11.987331 7.19961874,10.2823278 C8.30724765,8.57732462 9.88553137,7.23007065 11.7432242,6.40375406 C13.6008556,5.57740063 15.658328,5.30742184 17.666316,5.62649829 C19.674304,5.94557474 21.5467316,6.8400276 23.056744,8.20152524 L26.8400939,4.23173679 C24.9249353,2.46762854 22.6081914,1.1975789 20.0909311,0.531825836 Z M28.629761,21.4006112 C28.3757081,21.4511394 28.1422839,21.5758942 27.9591423,21.7590358 C27.7759394,21.9422387 27.6511845,22.1756015 27.6006564,22.4297158 C27.5501282,22.6837687 27.5760369,22.9471537 27.67519,23.1864717 C27.7743431,23.4258512 27.9421973,23.6304197 28.1576327,23.7743298 C28.3730067,23.9182399 28.6262614,23.9950451 28.8852873,23.9950451 C29.2327222,23.9950451 29.565852,23.8570904 29.8114938,23.6114486 C30.0571355,23.3658068 30.1951517,23.0326156 30.1951517,22.6852422 C30.1951517,22.4261549 30.118285,22.1729615 29.9743749,21.9575261 C29.8304648,21.7421521 29.6258964,21.5742365 29.3865783,21.4751449 C29.1471988,21.3759918 28.8838753,21.3500217 28.629761,21.4006112 Z M30.136151,16.921839 C29.8820981,16.9724286 29.648674,17.097122 29.4655324,17.280325 C29.2823294,17.4635279 29.1575746,17.6968907 29.1070464,17.951005 C29.0565183,18.2050579 29.082427,18.4684429 29.1815801,18.7077609 C29.2807332,18.947079 29.4485873,19.1516475 29.6640227,19.295619 C29.8793967,19.4395291 30.1326515,19.5163343 30.3916774,19.5163343 C30.7386825,19.5149836 31.0710755,19.3765991 31.3164103,19.1312643 C31.5617451,18.8858681 31.7001911,18.5534751 31.7015418,18.2065314 C31.7015418,17.9474441 31.6247365,17.6941893 31.480765,17.4788153 C31.3368549,17.2634413 31.1322864,17.0955257 30.8929684,16.9963726 C30.6535889,16.897281 30.3902653,16.8713108 30.136151,16.921839 Z M17.2353224,12.7982374 C16.6019706,12.5359576 15.9050749,12.4673179 15.2327372,12.6010364 C14.5603995,12.7347549 13.9428262,13.0648763 13.458112,13.5495906 C12.9733363,14.0343049 12.6432763,14.6519395 12.5094963,15.3242158 C12.3757778,15.9965535 12.4444175,16.6934492 12.7067588,17.3268011 C12.9691,17.9601529 13.4133549,18.5014734 13.983347,18.8823072 C14.5532777,19.263141 15.2234051,19.4664201 15.9089428,19.4664201 C16.8281501,19.4664201 17.7097223,19.1012421 18.3597736,18.4512522 C19.0097635,17.8012623 19.3749415,16.9196902 19.3749415,16.0004214 C19.3749415,15.3149452 19.1716623,14.6448177 18.7907672,14.0748256 C18.4099334,13.5048336 17.8686128,13.0605787 17.2353224,12.7982374 Z M26.9935817,16.8454635 C26.7542636,16.7463104 26.4908786,16.7204017 26.2368257,16.7709299 C25.9827114,16.821458 25.7493487,16.9462129 25.5661457,17.1294158 C25.3830041,17.3125574 25.2582493,17.5459815 25.2076597,17.8000344 C25.1571316,18.0541487 25.1831017,18.3174723 25.2822548,18.5568518 C25.3813465,18.7961699 25.549262,19.0007383 25.764636,19.1446484 C25.9800714,19.2885585 26.2332648,19.3654252 26.4923521,19.3654252 C26.8397256,19.3654252 27.1729167,19.227409 27.4185585,18.9817672 C27.6641389,18.7361255 27.8021551,18.4029957 27.8021551,18.0555608 C27.8021551,17.7965349 27.7253498,17.5432802 27.5814397,17.3279062 C27.4375296,17.1124708 27.2328997,16.9446166 26.9935817,16.8454635 Z M26.9935817,12.7396665 C26.7542636,12.6405134 26.4908786,12.6146047 26.2368257,12.6651329 C25.9827114,12.715661 25.7493487,12.8404159 25.5661457,13.0236188 C25.3830041,13.2067604 25.2582493,13.4401845 25.2076597,13.6942374 C25.1571316,13.9483517 25.1831017,14.2116753 25.2822548,14.4510548 C25.3813465,14.6903729 25.549262,14.8949413 25.764636,15.0388514 C25.9800714,15.1827615 26.2332648,15.2596282 26.4923521,15.2596282 C26.8397256,15.2596282 27.1729167,15.121612 27.4185585,14.8759702 C27.6641389,14.6303285 27.8021551,14.2971373 27.8021551,13.9497638 C27.8021551,13.6907379 27.7253498,13.4374832 27.5814397,13.2220478 C27.4375296,13.0066738 27.2328997,12.8388196 26.9935817,12.7396665 Z M30.136151,12.5138553 C29.8820981,12.5644449 29.648674,12.6891997 29.4655324,12.8723413 C29.2823294,13.0555443 29.1575746,13.288907 29.1070464,13.5430213 C29.0565183,13.7970742 29.082427,14.0604592 29.1815801,14.2997773 C29.2807332,14.5391567 29.4485873,14.7436638 29.6640227,14.8876353 C29.8793967,15.0315454 30.1326515,15.1083507 30.3916774,15.1083507 C30.7386825,15.1070614 31.0710755,14.9686154 31.3164103,14.7232806 C31.5617451,14.4778844 31.7001911,14.1454914 31.7015418,13.7985477 C31.7015418,13.5394604 31.6247365,13.286267 31.480765,13.0708316 C31.3368549,12.8554577 31.1322864,12.6875421 30.8929684,12.5884504 C30.6535889,12.4892973 30.3902653,12.4633272 30.136151,12.5138553 Z M28.7055225,8.10574889 C28.4514696,8.15627705 28.2180454,8.28103189 28.0348425,8.46423485 C27.8517009,8.64743782 27.7269461,8.88080057 27.6764179,9.13485348 C27.6258898,9.38896778 27.6517985,9.65235274 27.7509516,9.89167082 C27.8501046,10.1309889 28.0179588,10.3355574 28.2333328,10.4794675 C28.4487682,10.623439 28.702023,10.7002442 28.9610489,10.7002442 C29.3084223,10.7002442 29.6416135,10.5622281 29.8872553,10.3165863 C30.1328971,10.0709445 30.2708519,9.73781471 30.2708519,9.39044126 C30.2708519,9.13135396 30.1940466,8.87809919 30.0501365,8.6627252 C29.9062264,8.44728981 29.7016579,8.27943562 29.4622784,8.18028254 C29.2229604,8.08112946 28.9595754,8.05522073 28.7055225,8.10574889 Z" fill-rule="nonzero" />
+</svg>
diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
@@ -7,12 +7,7 @@
     <:home-nav>
       <a
         href={{href-to 'index'}}
-      ><svg width="34" height="34" xmlns="http://www.w3.org/2000/svg">
-        <title>Consul</title>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M16.879 19.9a3.027 3.027 0 1 1-.01-6.053 3.027 3.027 0 0 1 .01 6.054z" fill="#961D59"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M22.802 18.387a1.387 1.387 0 1 1 0-2.775 1.387 1.387 0 0 1 0 2.775zM28.17 19.656a1.387 1.387 0 1 1 .028-.113c-.015.035-.015.07-.028.113zM26.909 16.08a1.386 1.386 0 1 1-.098-2.719c.555.09 1 .506 1.129 1.053.038.178.043.362.014.542a1.335 1.335 0 0 1-1.043 1.123M31.972 19.512a1.38 1.38 0 0 1-1.598 1.124 1.386 1.386 0 0 1-1.119-1.606 1.38 1.38 0 0 1 1.598-1.126c.703.12 1.202.756 1.153 1.472a.358.358 0 0 0-.027.123M30.848 16.098a1.387 1.387 0 1 1 1.157-1.239 1.38 1.38 0 0 1-1.157 1.24zM29.817 24.232a1.387 1.387 0 1 1 .17-.562c-.011.198-.07.39-.17.562zM29.286 11.65a1.387 1.387 0 1 1 .526-1.89c.142.242.202.523.171.801-.039.456-.3.863-.697 1.088z" fill="#C62A71"/>
-        <path d="M17.122 31C9.322 31 3 24.732 3 17S9.323 3 17.122 3a14.054 14.054 0 0 1 8.58 2.875l-1.716 2.232a11.359 11.359 0 0 0-11.862-1.152c-3.852 1.888-6.288 5.782-6.28 10.043-.008 4.26 2.428 8.155 6.28 10.043a11.359 11.359 0 0 0 11.862-1.152l1.717 2.233A14.078 14.078 0 0 1 17.122 31z" fill="#C62A71"/>
-        </svg></a>
+      ><Consul::Logo /></a>
     </:home-nav>
 
     <:main-nav>

diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
@@ -35,7 +35,7 @@ $clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24"
 $clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z" fill="%23000"/></svg>');
 $cloud-cross-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 23 20" xmlns="http://www.w3.org/2000/svg"><path d="M12 13.586l3-3L16.414 12l-3 3 3 3L15 19.414l-3-3-3 3L7.586 18l3-3-2.75-2.75 1.414-1.414 2.75 2.75zM13.905.856c2.706.498 4.595 2.544 4.816 5.64l.234.066c2.46.754 3.884 2.79 3.5 5.036-.445 2.592-2.083 4.371-5.876 4.371v-2c5.054 0 4.868-5.46.23-6.152.242-2.277-1.278-4.628-3.267-4.995-1.789-.33-3.757.564-4.572 2.164-1.629-.727-2.605-.345-3.442.362-.836.706-.527 2.194-.225 2.823-1.089.915-1.901 2.013-2.152 2.987-.101.395-.091 1.014 0 1.212.428.928 1.016 1.6 4.403 1.6v2c-4.117 0-5.672-.96-6.448-2.874-.652-1.61.137-3.457 1.882-5.118-.544-1.734.01-3.297 1.391-4.267a4.89 4.89 0 013.689-.77C9.222 1.26 11.603.431 13.905.855z" fill="%236F7682" fill-rule="nonzero"/></svg>');
 $code-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" fill="%23000"/></svg>');
-$consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8.693 10.707a1.862 1.862 0 1 1-.006-3.724 1.862 1.862 0 0 1 .006 3.724" fill="%23961D59"/><path d="M12.336 9.776a.853.853 0 1 1 0-1.707.853.853 0 0 1 0 1.707M15.639 10.556a.853.853 0 1 1 .017-.07c-.01.022-.01.044-.017.07M14.863 8.356a.855.855 0 0 1-.925-1.279.855.855 0 0 1 1.559.255c.024.11.027.222.009.333a.821.821 0 0 1-.642.691M17.977 10.467a.849.849 0 1 1-1.67-.296.849.849 0 0 1 .982-.692c.433.073.74.465.709.905a.221.221 0 0 0-.016.076M17.286 8.368a.853.853 0 1 1-.279-1.684.853.853 0 0 1 .279 1.684M16.651 13.371a.853.853 0 1 1-1.492-.828.853.853 0 0 1 1.492.828M16.325 5.631a.853.853 0 1 1-.84-1.485.853.853 0 0 1 .84 1.485" fill="%23D62783"/><path d="M8.842 17.534c-4.798 0-8.687-3.855-8.687-8.612C.155 4.166 4.045.31 8.842.31a8.645 8.645 0 0 1 5.279 1.77l-1.056 1.372a6.987 6.987 0 0 0-7.297-.709 6.872 6.872 0 0 0 0 12.356 6.987 6.987 0 0 0 7.297-.709l1.056 1.374a8.66 8.66 0 0 1-5.279 1.77z" fill="%23D62783" fill-rule="nonzero"/></g></svg>');
+$consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M11.0454655,1.26591292 C9.7868354,0.933036999 8.46595062,0.912368954 7.19752795,1.20570305 C5.92907458,1.49903777 4.75139386,2.09750795 3.76669634,2.9491715 C2.78198962,3.80083506 2.02001816,4.87995516 1.54691062,6.09287666 C1.07380708,7.30576747 0.903868219,8.61581601 1.05184575,9.90928788 C1.19982358,11.2027598 1.66124671,12.440577 2.39606312,13.5152981 C3.13087953,14.5900193 4.11687555,15.4691663 5.26849405,16.0764252 C6.42011255,16.6836841 7.7025333,17.0007284 9.004447,17 C11.0112378,17.0020484 12.9450605,16.2474106 14.420047,14.8866497 L12.528372,12.9093285 C11.7733658,13.5900773 10.837152,14.0372792 9.83315799,14.1968144 C8.829164,14.3563802 7.80042778,14.2213724 6.87161208,13.8082141 C5.94276568,13.3950251 5.15362383,12.7213981 4.59980937,11.8688965 C4.04599491,11.0164256 3.75123399,10.0216409 3.75123399,9.00503022 C3.75123399,7.98845023 4.04599491,6.9936655 4.59980937,6.14116391 C5.15362383,5.28866231 5.94276568,4.61503532 6.87161208,4.20187703 C7.80042778,3.78870032 8.829164,3.65371092 9.83315799,3.81324914 C10.837152,3.97278737 11.7733658,4.4200138 12.528372,5.10076262 L14.420047,3.1158684 C13.4624677,2.23381427 12.3040957,1.59878945 11.0454655,1.26591292 Z M15.3148805,11.7003056 C15.187854,11.7255697 15.0711419,11.7879471 14.9795712,11.8795179 C14.8879697,11.9711194 14.8255923,12.0878007 14.8003282,12.2148579 C14.7750641,12.3418844 14.7880185,12.4735768 14.837595,12.5932359 C14.8871715,12.7129256 14.9710986,12.8152098 15.0788163,12.8871649 C15.1865033,12.9591199 15.3131307,12.9975226 15.4426437,12.9975226 C15.6163611,12.9975226 15.782926,12.9285452 15.9057469,12.8057243 C16.0285678,12.6829034 16.0975759,12.5163078 16.0975759,12.3426211 C16.0975759,12.2130774 16.0591425,12.0864808 15.9871875,11.9787631 C15.9152324,11.8710761 15.8129482,11.7871183 15.6932891,11.7375724 C15.5735994,11.6879959 15.4419376,11.6750108 15.3148805,11.7003056 Z M16.0680755,9.4609195 C15.9410491,9.48621428 15.824337,9.548561 15.7327662,9.64016248 C15.6411647,9.73176396 15.5787873,9.84844534 15.5535232,9.97550249 C15.5282591,10.1025289 15.5412135,10.2342214 15.59079,10.3538805 C15.6403666,10.4735395 15.7242937,10.5758237 15.8320114,10.6478095 C15.9396984,10.7197645 16.0663257,10.7581672 16.1958387,10.7581672 C16.3693412,10.7574918 16.5355378,10.6882996 16.6582052,10.5656321 C16.7808726,10.4429341 16.8500955,10.2767375 16.8507709,10.1032657 C16.8507709,9.97372204 16.8123682,9.84709465 16.7403825,9.73940765 C16.6684274,9.63172066 16.5661432,9.54776286 16.4464842,9.49818632 C16.3267944,9.44864048 16.1951327,9.43565542 16.0680755,9.4609195 Z M9.61766121,7.39911871 C9.30098531,7.26797879 8.95253744,7.23365893 8.6163686,7.30051819 C8.28019976,7.36737745 7.97141312,7.53243816 7.72905598,7.7747953 C7.48666815,8.01715244 7.32163813,8.32596977 7.25474817,8.66210792 C7.18788892,8.99827676 7.22220877,9.34672462 7.3533794,9.66340053 C7.48455002,9.98007643 7.70667747,10.2507367 7.9916735,10.4411536 C8.27663884,10.6315705 8.61170257,10.7332101 8.95447139,10.7332101 C9.41407507,10.7332101 9.85486116,10.550621 10.1798868,10.2256261 C10.5048817,9.90063117 10.6874707,9.45984509 10.6874707,9.00021071 C10.6874707,8.65747259 10.5858312,8.32240885 10.3953836,8.03741282 C10.2049667,7.75241679 9.93430641,7.53028933 9.61766121,7.39911871 Z M14.4967908,9.42273175 C14.3771318,9.37315521 14.2454393,9.36020085 14.1184129,9.38546493 C13.9913557,9.41072901 13.8746743,9.47310643 13.7830728,9.56470791 C13.6915021,9.6562787 13.6291246,9.77299077 13.6038299,9.90001722 C13.5785658,10.0270744 13.5915508,10.1587362 13.6411274,10.2784259 C13.6906732,10.3980849 13.774631,10.5003692 13.882318,10.5723242 C13.9900357,10.6442793 14.1166324,10.6827126 14.2461761,10.6827126 C14.4198628,10.6827126 14.5864584,10.6137045 14.7092793,10.4908836 C14.8320694,10.3680627 14.9010775,10.2014978 14.9010775,10.0277804 C14.9010775,9.89826746 14.8626749,9.77164008 14.7907199,9.66395308 C14.7187648,9.55623539 14.6164499,9.47230829 14.4967908,9.42273175 Z M14.4967908,7.36983325 C14.3771318,7.32025671 14.2454393,7.30730235 14.1184129,7.33256643 C13.9913557,7.35783051 13.8746743,7.42020793 13.7830728,7.51180941 C13.6915021,7.60338019 13.6291246,7.72009227 13.6038299,7.84711872 C13.5785658,7.97417587 13.5915508,8.10583765 13.6411274,8.22552739 C13.6906732,8.34518643 13.774631,8.44747066 13.882318,8.51942571 C13.9900357,8.59138077 14.1166324,8.6298141 14.2461761,8.6298141 C14.4198628,8.6298141 14.5864584,8.56080601 14.7092793,8.43798512 C14.8320694,8.31516423 14.9010775,8.14856864 14.9010775,7.97488192 C14.9010775,7.84536896 14.8626749,7.71874158 14.7907199,7.61102388 C14.7187648,7.50333689 14.6164499,7.41940979 14.4967908,7.36983325 Z M16.0680755,7.25692767 C15.9410491,7.28222245 15.824337,7.34459987 15.7327662,7.43617065 C15.6411647,7.52777213 15.5787873,7.64445351 15.5535232,7.77151066 C15.5282591,7.89853712 15.5412135,8.03022959 15.59079,8.14988864 C15.6403666,8.26957837 15.7242937,8.37183191 15.8320114,8.44381765 C15.9396984,8.51577271 16.0663257,8.55417534 16.1958387,8.55417534 C16.3693412,8.55353069 16.5355378,8.48430772 16.6582052,8.36164032 C16.7808726,8.23894222 16.8500955,8.0727457 16.8507709,7.89927386 C16.8507709,7.7697302 16.8123682,7.64313352 16.7403825,7.53541582 C16.6684274,7.42772883 16.5661432,7.34377103 16.4464842,7.29422519 C16.3267944,7.24464865 16.1951327,7.23166359 16.0680755,7.25692767 Z M15.3527613,5.05287445 C15.2257348,5.07813853 15.1090227,5.14051594 15.0174212,5.23211743 C14.9258505,5.32371891 14.863473,5.44040029 14.838209,5.56742674 C14.8129449,5.69448389 14.8258992,5.82617637 14.8754758,5.94583541 C14.9250523,6.06549445 15.0089794,6.16777868 15.1166664,6.23973373 C15.2243841,6.31171948 15.3510115,6.35012211 15.4805244,6.35012211 C15.6542112,6.35012211 15.8208068,6.28111403 15.9436277,6.15829314 C16.0664485,6.03547225 16.1354259,5.86890736 16.1354259,5.69522063 C16.1354259,5.56567698 16.0970233,5.4390496 16.0250682,5.3313626 C15.9531132,5.2236449 15.850829,5.13971781 15.7311392,5.09014127 C15.6114802,5.04056473 15.4797877,5.02761036 15.3527613,5.05287445 Z" fill="%23E03875" fill-rule="nonzero" /></svg>');
 $copy-action-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.82 3C13.4 1.84 12.3 1 11 1c-1.3 0-2.4.84-2.82 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9.03-.952V5c0-1.1-.9-2-2-2h-4.18zM9 13H6v2h3v-2zm-3 6h5v-2H6v2zM6 9v2h6V9H6zm5-6c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM4 21V5h2v1.007h10V5h2v5.992h2.003V17H18v4H4zm11.99-3v-3H23v-2h-7.01v-3L12 14l3.99 4z" fill="%23000"/></svg>');
 $copy-success-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.82 3C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16.025c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM12 3c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 15l-4-4 1.41-1.41L10 15.17l6.59-6.59L18 10l-8 8z" fill="%23000"/></svg>');
 $database-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.571 3.429c-3.157 0-5.714.642-5.714 1.428 0 .786 2.557 1.429 5.714 1.429 3.158 0 5.715-.643 5.715-1.429S14.729 3.43 11.57 3.43zm0 7.142C6.843 10.571 3 9.286 3 7.714V4.857C3 3.286 6.843 2 11.571 2c4.729 0 8.572 1.286 8.572 2.857v2.857c0 1.572-3.843 2.857-8.572 2.857zm0 5.715C6.843 16.286 3 15 3 13.429V10.57c0-.157.057-.3.129-.442.042-.086.1-.186.171-.272C4.257 11.086 7.586 12 11.571 12c3.986 0 7.315-.914 8.272-2.143.071.086.128.186.171.272.072.142.129.3.129.442v2.858c0 1.571-3.843 2.857-8.572 2.857zm0 5.714C6.843 22 3 20.714 3 19.143v-2.857c0-.243.129-.486.3-.715.957 1.229 4.286 2.143 8.271 2.143 3.986 0 7.315-.914 8.272-2.143.186.229.3.472.3.715v2.857C20.143 20.714 16.3 22 11.57 22z" fill="%23000"/></svg>');

diff --git a/ui/packages/consul-ui/app/styles/components/brand-loader.scss b/ui/packages/consul-ui/app/styles/components/brand-loader.scss
@@ -1,7 +1,7 @@
 @import './brand-loader/index';
-html body > svg {
+html body > .brand-loader {
   display: none;
 }
-html.ember-loading body > svg {
+html.ember-loading body > .brand-loader {
   @extend %brand-loader;
 }
diff --git a/ui/packages/consul-ui/app/styles/components/brand-loader/layout.scss b/ui/packages/consul-ui/app/styles/components/brand-loader/layout.scss
@@ -1,10 +1,7 @@
 %brand-loader {
-  display: block;
-}
-%brand-loader {
-  position: absolute;
-  top: 50%;
-  margin-top: -26px;
-  left: 50%;
-  margin-left: -84px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
 }
diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss
@@ -4,7 +4,14 @@
 // temporary component debugging setup
 @import 'consul-ui/components/main-nav-vertical/debug';
 
+.is-debug .brand-loader {
+  display: none !important;
+}
+
 .docs {
+  [role='banner'] nav:first-of-type {
+    height: calc(100vh - var(--chrome-height, 47px));
+  }
   .tabular-collection,
   .list-collection {
     height: 300px !important;

diff --git a/ui/packages/consul-ui/app/styles/variables/skin.scss b/ui/packages/consul-ui/app/styles/variables/skin.scss
@@ -17,7 +17,7 @@
   // --brand-300: #{$magenta-300};
   // --brand-400: #{$magenta-400};
   // --brand-500: #{$magenta-500};
-  --brand-600: #{$magenta-600};
+  --brand-600: #e03875;
   // --brand-700: #{$magenta-700};
   --brand-800: #{$magenta-800};
   // --brand-900: #{$magenta-900};