Update the branding to match deep work style guide

docusaurus.config.js

@@ -1,13 +1,14 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
-
 const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const darkCodeTheme = require('prism-react-renderer/themes/paleNight'); 
+// Override code blocks to be Obol coloured
+const customObolDarkTheme = { ...darkCodeTheme, plain: {color:"#bfc7d5",backgroundColor: "#243D42"}}
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'Obol Network',
-  tagline: 'Building Distributed Validator Technology for Ethereum',
+  tagline: 'Building Distributed Validators for Ethereum',
   url: 'https://docs.obol.tech/',
   baseUrl: '/',
   onBrokenLinks: 'throw',
@@ -46,24 +47,13 @@ const config = {
         defaultMode: 'dark',
         disableSwitch: false,
         respectPrefersColorScheme: true,
-        // switchConfig: {
-        //   darkIcon: '🌙',
-        //   darkIconStyle: {
-        //     marginLeft: '2px',
-        //   },
-        //   // Unicode icons such as '\u2600' will work
-        //   // Unicode with 5 chars require brackets: '\u{1F602}'
-        //   lightIcon: '\u2600',
-        //   lightIconStyle: {
-        //     marginLeft: '1px',
-        //   },
-        // },
       },
       navbar: {
         title: 'Obol Network',
         logo: {
           alt: 'Obol Network Logo',
-          src: 'img/ObolIcon.svg',
+          src: '/img/ObolIconDark.svg',
+          srcDark: '/img/ObolIconLight.svg'
         },
         items: [
           {
@@ -88,8 +78,8 @@ const config = {
         style: 'dark',
         logo: {
           alt: "Obol Network Logo",
-          src: "https://obol.tech/ObolIcon.png",
-          srcDark: "https://obol.tech/ObolIconWhite.png",
+          src: "/img/ObolLineWhite.svg",
+          srcDark: "/img/ObolLineWhite.svg",
           width: "30px",
           height: "30px",
           href: "https://obol.tech/"
@@ -143,7 +133,7 @@ const config = {
       },
       prism: {
         theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
+        darkTheme: customObolDarkTheme,
         additionalLanguages: ['solidity', 'json5'],
       },
       metadata: [

src/components/HomepageFeatures.module.css

@@ -8,11 +8,11 @@
 .featureImg {
   height: 200px;
   width: 200px;
+  filter: invert(4%) sepia(7%) saturate(2877%) hue-rotate(139deg) brightness(97%) contrast(96%);
 }
 
 html[data-theme="dark"] .featureImg {
-  filter: invert(100%);
-  -webkit-filter: invert(100%);
+  filter: invert(99%) sepia(45%) saturate(979%) hue-rotate(169deg) brightness(99%) contrast(92%);
 }
 
 img.featureImg:hover {

src/css/custom.css

@@ -6,18 +6,25 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #61ac9f;
-  --ifm-color-primary-dark: #37606b;
-  --ifm-color-primary-darker: #19314b;
-  --ifm-color-primary-darkest: #090909;
+  --ifm-color-primary: #16968E;
+  --ifm-color-primary-dark: #2FE4AB;
+  --ifm-color-primary-darker: #16968E;
+  --ifm-color-primary-darkest: #111F22;
   --ifm-color-primary-light: #81bba3;
   --ifm-color-primary-lighter: #81bba3;
-  --ifm-color-primary-lightest: #81bba3;
-  --ifm-footer-background-color: #090909;
+  --ifm-color-primary-lightest: #D9ECF3;
+  --ifm-footer-background-color: #33474D;
   --ifm-code-font-size: 95%;
+  --prism-background-color: #243D42;
   font-family: 'Avenir Next', Montserrat, sans-serif;
 }
 
+html[data-theme="dark"] {
+  --ifm-background-color: #111F22;
+  --ifm-navbar-background-color: #182D32;
+  --prism-background-color: #243D42;
+}
+
 .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.1);
   display: block;
@@ -30,11 +37,11 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 }
 
 html[data-theme='dark'] footer.footer {
-  background-color: #090909;
+  background-color: #091011;
 }
 
 html[data-theme='light'] footer.footer {
-  background-color: #090909;
+  background-color: #091011;
 }
 
 html[data-theme='dark'] .hero__title {
@@ -50,5 +57,5 @@ html[data-theme="dark"] .text--center--title {
 }
 
 html[data-theme="light"] .text--center--title {
-  color: #090909;
+  color: #011216;
 }

src/pages/index.module.css

@@ -8,19 +8,23 @@
   text-align: center;
   position: relative;
   overflow: hidden;
-  background: --ifm-color-primary-dark;
-  background: linear-gradient(90deg, #19314B 0%, #37606B 39.06%, #61AC9F 67.19%, #81BBA3 100%);
+  background: --ifm-background-color;
+  background: linear-gradient(90deg, #16968E 0%, #2FE4AB 100%);
 }
 
 html[data-theme='dark'] .heroBanner {
-  background: linear-gradient(90deg, #19314B 0%, #37606B 39.06%, #61AC9F 67.19%, #81BBA3 100%);
+  background: linear-gradient(90deg, #192d31 0%,  #16968E 100%);
 }
 
 .heroLogo {
   width: 40%;
   padding-bottom: 2rem;
 }
 
+html[data-theme='dark'] .heroLogo {
+  filter: brightness(0) saturate(100%) invert(99%) sepia(45%) saturate(979%) hue-rotate(169deg) brightness(99%) contrast(92%);
+}
+
 @media screen and (max-width: 966px) {
   .heroBanner {
     padding: 2rem;
@@ -38,6 +42,10 @@ html[data-theme='dark'] .heroBanner {
   justify-content: center;
 }
 
+html[data-theme='dark'] .button {
+  background-color: #d9ecf3;
+}
+
 .obolDots {
   display: flex;
   justify-content: center;
@@ -46,31 +54,31 @@ html[data-theme='dark'] .heroBanner {
 }
 
 .obolDot1 {
-  background-color: #3B93BE;
+  background-color: #2FE4AB;
   height: 0.6rem;
   width: 0.6rem;
   border-radius: 50%;
   display: inline-block;
 }
 
 .obolDot2 {
-  background: #51AAC6;
+  background: #3CD2DD;
   height: 0.6rem;
   width: 0.6rem;
   border-radius: 50%;
   display: inline-block;
 }
 
 .obolDot3 {
-  background: #6FD1D7;
+  background: #8C3CDD;
   height: 0.6rem;
   width: 0.6rem;
   border-radius: 50%;
   display: inline-block;
 }
 
 .obolDot4 {
-  background: #81BCB9;
+  background: #DD603C;
   height: 0.6rem;
   width: 0.6rem;
   border-radius: 50%;

src/pages/index.tsx

@@ -18,7 +18,7 @@ function HomepageHeader() {
         <img
           className={styles.heroLogo}
           alt={"Obol Network"}
-          src={"/img/ObolHorizontalWhite.svg"}
+          src={"/img/ObolHorizontalDarkBG.svg"}
         />
         {metadatas.map((metadata, i) => (
           <meta key={`metadata_${i}`} {...metadata} />
@@ -32,7 +32,7 @@ function HomepageHeader() {
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link
-            className="button button--secondary button--lg"
+            className={styles.button + " button button--secondary button--lg"}
             to="/docs/intro"
           >
             Read the Docs