docs(documentation): rename the brand identity page to visual identity

Author: yeehaa123

packages/documentation/public/visual-identity.md

@@ -0,0 +1,71 @@
+# Colors
+
+## Primary Color
+
+```color
+value: !import primary
+name: Primary
+span: 6
+```
+
+## Colors with Meaning
+
+```color
+value: !import positive
+name: Positive
+span: 2
+```
+
+```color
+value: !import warning
+name: Warning
+span: 2
+```
+
+```color
+value: !import negative
+name: Negative
+span: 2
+```
+
+```color
+value: !import disabled
+name: Disabled
+span: 2
+```
+
+```color
+value: !import info
+name: Info
+span: 2
+```
+
+## Grayscale
+
+```color-palette
+colors: !import grayScale
+```
+
+# Typography
+
+```type
+{
+  "headings": [28, 22],
+  "font": "Nitti Grotesk Bold",
+}
+```
+
+```type
+{
+  "headings": [28],
+  "font": "Nitti Bold",
+}
+```
+
+```type
+{
+  "paragraphs": [16/20, 12/16],
+  kafka: true,
+  "font": "Nitti Grotesk",
+}
+```

packages/documentation/src/App.js

@@ -46,13 +46,13 @@ class App extends Component {
             content: pageLoader("./general-introduction.md")
           },
           {
-            path: "/brand-identity",
-            title: "Brand Identity",
+            path: "/visual-identity",
+            title: "Visual Identity",
             imports: {
               ...offcourse.colors,
               grayScale: offcourse.namedGrayScale
             },
-            content: pageLoader("./brand-identity.md")
+            content: pageLoader("./visual-identity.md")
           },
           {
             title: "Atoms",