New logo and typography

Author: danciaclara

docusaurus.config.ts

@@ -4,7 +4,7 @@ import type * as Preset from "@docusaurus/preset-classic";
 
 const config: Config = {
   title: "Plane",
-  tagline: "An easy, flexible project management software",
+  tagline: "A modern project management tool",
   favicon: "https://media.docs.plane.so/favicon-32x32.png",
   trailingSlash: false,
   // Set the production url of your site here
@@ -63,13 +63,6 @@ const config: Config = {
     ],
   ],
 
-  stylesheets: [
-    {
-      href: "https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=National+Park:[email protected]&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap",
-      type: "text/css",
-    },
-  ],
-
   scripts: [
     {
       src: "https://plausible.io/js/script.js",
@@ -99,6 +92,89 @@ const config: Config = {
     ],
   ],
 
+  headTags: [
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "/fonts/Nacelle/Nacelle-Light.otf",
+        as: "font",
+        type: "font/otf",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "/fonts/Nacelle/Nacelle-Regular.otf",
+        as: "font",
+        type: "font/otf",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "/fonts/Nacelle/Nacelle-SemiBold.otf",
+        as: "font",
+        type: "font/otf",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "/fonts/Nacelle/Nacelle-Bold.otf",
+        as: "font",
+        type: "font/otf",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "/fonts/IBM/IBMPlexMono-Light.otf",
+        as: "font",
+        type: "font/ttf",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "/fonts/IBM/IBMPlexMono-Regular.otf",
+        as: "font",
+        type: "font/ttf",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "/fonts/IBM/IBMPlexMono-SemiBold.otf",
+        as: "font",
+        type: "font/ttf",
+        crossorigin: "anonymous",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preload",
+        href: "/fonts/IBM/IBMPlexMono-Bold.otf",
+        as: "font",
+        type: "font/ttf",
+        crossorigin: "anonymous",
+      },
+    },
+  ],
+
   themeConfig: {
     metadata: [
       {
@@ -136,8 +212,8 @@ const config: Config = {
       title: "",
       logo: {
         alt: "Plane",
-        src: "https://media.docs.plane.so/logo/Plane.svg",
-        srcDark: "https://media.docs.plane.so/logo/Plane-white.svg",
+        src: "https://media.docs.plane.so/logo/new-logo-white.png",
+        srcDark: "https://media.docs.plane.so/logo/new-logo-dark.png",
       },
       items: [
         {

src/css/custom.css

@@ -30,7 +30,8 @@
 }
 
 .navbar__logo img {
-  width: 100px;
+  width: 150px;
+  height: auto;
 }
 
 @media (min-width: 1536px) {
@@ -266,16 +267,30 @@
 
 h1 {
   font-size: 2rem;
+  line-height: 120%;
 }
 h2 {
   font-size: 1.5rem;
-  line-height: 1.25;
+  line-height: 140%;
 }
 h3 {
   font-size: 1.25rem;
-  line-height: 1;
+   line-height: 140%;
 }
 
+h4{
+  line-height: 140%;
+} 
+
+h5{
+  line-height: 140%;
+} 
+
+h6{
+  line-height: 140%;
+} 
+
+
 #__docusaurus > nav > div.navbar__inner > div.navbar__items.navbar__items--right > a:nth-child(3) {
   background-color: #004eff;
   border-radius: var(--rounded-full, 9999px);
@@ -475,11 +490,67 @@ html[data-theme="dark"] .one {
 
 html {
   color: #213547;
-  font-family: "Instrument Sans", sans-serif;
+  font-family: var(--ifm-font-family-base);
+}
+
+body {
+  font-family: var(--ifm-font-family-base);
+}
+
+.navbar {
+  font-family: var(--ifm-font-family-base);
+}
+
+.navbar__title {
+  font-family: var(--ifm-font-family-base);
+  font-weight: 600;
+}
+
+.menu__link {
+  font-family: var(--ifm-font-family-base);
+}
+
+.markdown {
+  font-family: var(--ifm-font-family-base);
+}
+
+* {
+  font-family: var(--ifm-font-family-base);
+}
+
+.theme-doc-markdown {
+  font-family: var(--ifm-font-family-base);
 }
 
 code {
   color: #213547;
+  font-family: var(--ifm-font-family-monospace);
+}
+
+pre {
+  font-family: var(--ifm-font-family-monospace);
+}
+
+pre code {
+  font-family: var(--ifm-font-family-monospace);
+}
+
+/* Inline code */
+.markdown code {
+  font-family: var(--ifm-font-family-monospace);
+}
+
+/* Code blocks in different contexts */
+.prism-code {
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.codeBlockContainer_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Container-styles-module {
+  font-family: var(--ifm-font-family-monospace);
+}
+
+code, kbd, pre, samp {
+  font-family: var(--ifm-font-family-monospace) !important;
 }
 
 strong {
@@ -492,7 +563,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: "Instrument Sans", sans-serif;
+  font-family: var(--ifm-heading-font-family);
   color: rgb(18 27 46);
 }
 
@@ -502,7 +573,7 @@ h6 {
 [data-theme="dark"] h4,
 [data-theme="dark"] h5,
 [data-theme="dark"] h6 {
-  font-family: "Roboto", sans-serif;
+  font-family: var(--ifm-heading-font-family);
   color: rgb(224 228 236);
 }
 
@@ -707,7 +778,7 @@ html:not([data-theme]) .themedComponent--light_NVdE {
 p,
 table,
 .menu__link {
-  font-family: "Instrument Sans", sans-serif;
+  font-family: "Nacelle";
 }
 
 .menu__caret:hover {
@@ -727,3 +798,73 @@ table,
     box-sizing: border-box;
   }
 }
+
+@font-face {
+      font-family: 'Nacelle';
+      src: url('/fonts/Nacelle/Nacelle-Light.otf') format('opentype');
+      font-weight: 300;
+      font-style: normal;
+      font-display: swap;
+  }
+
+ @font-face {
+      font-family: 'Nacelle';
+      src: url('/fonts/Nacelle/Nacelle-Regular.otf') format('opentype');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+  }
+
+  @font-face {
+      font-family: 'Nacelle';
+      src: url('/fonts/Nacelle/Nacelle-SemiBold.otf') format('opentype');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+  }
+
+  @font-face {
+      font-family: 'Nacelle';
+      src: url('/fonts/Nacelle/Nacelle-Bold.otf') format('opentype');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+  }
+
+  @font-face {
+      font-family: 'IBM Mono';
+      src: url('/fonts/IBM/IBMPlexMono-Light.ttf') format('truetype');
+      font-weight: 300;
+      font-style: normal;
+      font-display: swap;
+  }
+
+  @font-face {
+  font-family: 'IBM Mono';
+  src: url('/fonts/IBM/IBMPlexMono-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Mono';
+  src: url('/fonts/IBM/IBMPlexMono-SemiBold.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Mono';
+  src: url('/fonts/IBM/IBMPlexMono-Bold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+  :root {
+     --ifm-font-family-base: 'Nacelle';
+     --ifm-heading-font-family: 'Nacelle';
+     --ifm-font-family-monospace: 'IBM Mono';
+  }