init commit

2023-11-24 18:20:07 +03:30 · 2023-11-24 18:20:07 +03:30 · f698a892c7
commit f698a892c7
264 changed files with 17038 additions and 0 deletions
--- a/.env
+++ b/.env
@ -0,0 +1 @@
+STORYBOOK_URL=https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,27 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.yalc
+yalc.lock
+.idea
+
+static/search-index.json
+ 
+data/
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# yarn prettier:staged
+yarn typecheck
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,2 @@
+*.mdx
+*.md
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all"
+}
--- a/61
+++ b/61
@ -0,0 +1,61 @@
+pipeline {
+  agent { label 'linux' }
+
+  options {
+    disableConcurrentBuilds()
+    /* manage how many builds we keep */
+    buildDiscarder(logRotator(
+      numToKeepStr: '20',
+      daysToKeepStr: '30',
+    ))
+  }
+
+  environment {
+    GIT_COMMITTER_NAME = 'status-im-auto'
+    GIT_COMMITTER_EMAIL = 'auto@status.im'
+    PROD_SITE = 'docs.codex.storage'
+    DEV_SITE  = 'dev-docs.codex.storage'
+    DEV_HOST  = 'jenkins@node-01.do-ams3.sites.misc.statusim.net'
+    SCP_OPTS  = 'StrictHostKeyChecking=no'
+  }
+
+  stages {
+    stage('Install') {
+      steps {
+        sh "yarn install"
+      }
+    }
+
+    stage('Build') {
+      steps {
+        sh 'yarn build'
+        sh "echo ${env.PROD_SITE} > build/CNAME"
+      }
+    }
+
+    stage('Publish Prod') {
+      when { expression { env.GIT_BRANCH ==~ /.*master/ } }
+      steps {
+        sshagent(credentials: ['status-im-auto-ssh']) {
+          sh "ghp-import -p build"
+        }
+      }
+    }
+
+    stage('Publish Devel') {
+      when { expression { env.GIT_BRANCH ==~ /.*develop/ } }
+      steps {
+        sshagent(credentials: ['jenkins-ssh']) {
+          sh """
+            rsync -e 'ssh -o ${SCP_OPTS}' -r --delete build/. \
+              ${env.DEV_HOST}:/var/www/${env.DEV_SITE}/
+          """
+        }
+      }
+    }
+  }
+
+  post {
+    cleanup { cleanWs() }
+  }
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,132 @@
+# Logos Brand Guidelines
+
+
+## How to Run Locally
+
+1. Clone this repository
+```bash
+$ git clone https://github.com/acid-info/logos-brand-guidelines.git
+```
+
+2. Install the dependencies:
+```bash
+$ yarn install
+```
+
+3. Start the website:
+```bash
+$ yarn start
+```
+
+4. Visit `http://localhost:3000` in your browser
+
+
+## Configuration
+Edit the `docusaurus.config.js` file in the repository's root directory, and update the value of the `businessUnit` field in presets section; below is a list of valid values:
+- Logos
+- Codex
+- Waku
+- Nimbus
+- Nomos
+- VacResearch
+- Acid.info
+
+Example:
+```js
+presets: [
+  [
+    '@acid-info/logos-docusaurus-preset',
+    {
+      businessUnit: 'Codex',
+    },
+  ],
+],
+```
+
+This is typically sufficient for most cases, as the Logos plugins will automatically populate other configurations related to the specified business unit. If you encounter any errors in the information provided by Logos Plugins, please visit the [Logos Docusaurus Plugins](https://github.com/acid-info/logos-docusaurus-plugins) repository and open an issue.
+
+
+## Docs Setup
+
+This template does not include a landing page. Please review the `routeBasePath: '/'` setting in the `docusaurus.config.js` file.
+
+```js
+presets: [
+    [
+      '@acid-info/logos-docusaurus-preset',
+      /** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
+      ({
+        businessUnit: 'Codex',
+        theme: {
+          name: 'default',
+          options: {
+            customCss: [require.resolve('./src/css/custom.scss')],
+            docs: {
+              default: {
+                sidebar: {
+                  hide: false,
+                },
+              },
+            },
+          },
+        },
+        docs: {
+          routeBasePath: '/', // the index.md becomes the index page
+        },
+        og: {},
+      }),
+    ]
+]
+```
+
+The content in `docs/index.md` will serve as the root page for your documentation.
+
+For additional customization options, please refer to the [Docusaurus Configuration](https://docusaurus.io/docs/configuration).
+
+
+## Adding docs
+
+To add a document, create a `.md` or `mdx` file within the `docs` directory. You can use [Frontmatter](https://docusaurus.io/docs/markdown-features#front-matter) to add metadata to your markdown file.
+
+
+## Docusaurus Config
+
+You can find instructions for adding additional documentation sections, implementing localization, and managing versioning on the [Docusaurus](https://docusaurus.io/docs) website.
+
+> Please note that theme customization is somewhat restricted; for more detailed instructions on customizing your theme, visit the [Logos Docusaurus Theme](https://github.com/acid-info/logos-docusaurus-plugins/tree/main/packages/logos-docusaurus-theme/) repository.
+
+
+## Custom CSS
+
+By default, this template utilizes the CSS styles defined in the [logos-docusaurus-plugins](https://github.com/acid-info/logos-docusaurus-plugins/tree/main/packages/logos-docusaurus-theme/src/client/css) package. You have the option to define custom CSS in `src/css/custom.scss`.
+
+
+## How to Run a Static Build (Production Build)
+
+1. Generate static files for production:
+
+```bash
+$ yarn build
+```
+
+The static files will be created in the `build` directory.
+
+2. Serve the static build:
+
+```bash
+$ yarn serve
+```
+
+
+## CI/CD
+
+- The `master` branch is automatically deployed to the production server (e.g., logos.co) through [CI](https://ci.infra.status.im)
+- The `develop` branch is automatically deployed to the staging server (e.g., dev.logos.co) through [CI](https://ci.infra.status.im)
+
+
+## Change Process
+
+1. Create a new working branch from `develop`: `git checkout develop; git checkout -b my-changes`.
+2. Make your changes, push them to the `origin`, and open a Pull Request against the `develop` branch.
+3. After approval, merge the pull request, and verify the changes on the staging server (e.g., https://dev.vac.dev).
+4. When ready to promote changes to the live website, rebase the `master` branch on the staging changes: `git checkout master; git pull origin master; git rebase origin/develop; git push`.
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
+};
--- a/docs/gallery.mdx
+++ b/docs/gallery.mdx
@ -0,0 +1,44 @@
+---
+title: Gallery
+displayed_sidebar: main
+sidebar_position: 2
+sidebar_class_name: sidebar-menu-divider
+---
+
+import { ImageGrid, Grid } from "@site/src/components/mdx"
+
+# Gallery
+
+<!-- [Sizzle Reel draft.mp4](Gallery%20e5522cb5bfc94082adac41f1ab17a673/Sizzle_Reel_draft.mp4) -->
+
+export const galleryImages = [
+    { src: '/gallery/1.png', img: require('/gallery/1.png')},
+    { src: '/gallery/2.png', img: require('/gallery/2.png')},
+    { src: '/gallery/3.png', img: require('/gallery/3.png')},
+    { src: '/gallery/4.png', img: require('/gallery/4.png')},
+    { src: '/gallery/6.png', img: require('/gallery/6.png')},
+    { src: '/gallery/7.png', img: require('/gallery/7.png')},
+    { src: '/gallery/8.png', img: require('/gallery/8.png')},
+    { src: '/gallery/9.png', img: require('/gallery/9.png')},
+    { src: '/gallery/10.png', img: require('/gallery/10.png')},
+    { src: '/gallery/11.png', img: require('/gallery/11.png')},
+    { src: '/gallery/12.png', img: require('/gallery/12.png')},
+    { src: '/gallery/13.png', img: require('/gallery/13.png')},
+    { src: '/gallery/14.png', img: require('/gallery/14.png')},
+    { src: '/gallery/15.png', img: require('/gallery/15.png')},
+    { src: '/gallery/16.png', img: require('/gallery/16.png')},
+    { src: '/gallery/17.png', img: require('/gallery/17.png')},
+    { src: '/gallery/18.png', img: require('/gallery/18.png')},
+    { src: '/gallery/19.png', img: require('/gallery/19.png')},
+    { src: '/gallery/20.png', img: require('/gallery/20.png')},
+    { src: '/gallery/21.png', img: require('/gallery/21.png')},
+    { src: '/gallery/22.png', img: require('/gallery/22.png')},
+    { src: '/gallery/23.png', img: require('/gallery/23.png')},
+    { src: '/gallery/24.png', img: require('/gallery/24.png')},
+    { src: '/gallery/25.png', img: require('/gallery/25.png')},
+    { src: '/gallery/26.png', img: require('/gallery/26.png')},
+    { src: '/gallery/27.png', img: require('/gallery/27.png')},
+    { src: '/gallery/28.png', img: require('/gallery/28.png')},
+]
+
+<ImageGrid mode="masonry" firstColumnSize={11} images={galleryImages} />
--- a/docs/index.md
+++ b/docs/index.md
@ -0,0 +1,11 @@
+---
+title: Brand Guidelines
+displayed_sidebar: main
+sidebar_position: 0
+---
+
+# Brand guidelines
+
+The Logos Brand Guidelines serve as the foundation of Logos' outward identity. As a grassroots movement committed to developing the technology and community from which networks states may form, Logos is rooted in a set of core values and principles that guide its overall branding strategy.
+
+At the heart of the Logos Brand Guidelines is a modular approach that allows for flexibility and adaptability. By breaking down the guidelines into smaller components, it becomes easier to build and maintain a cohesive brand identity that can evolve with the movement. This modularity ensures that all Logos sub-brands share the same DNA and core values while allowing for customization to meet the unique needs of each sub-brand.
--- a/docs/lsd/_category_.json
+++ b/docs/lsd/_category_.json
@ -0,0 +1,8 @@
+{
+  "position": 5,
+  "label": "LSD - UI Library",
+  "link": {
+    "type": "generated-index",
+    "title": "Title"
+  }
+}
--- a/docs/lsd/components/Autocomplete.mdx
+++ b/docs/lsd/components/Autocomplete.mdx
@ -0,0 +1,9 @@
+---
+title: Autocomplete
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Autocomplete
+
+<StorybookDemo name="Autocomplete" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="autocomplete--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/Badge.mdx
+++ b/docs/lsd/components/Badge.mdx
@ -0,0 +1,9 @@
+---
+title: Badge
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Badge
+
+<StorybookDemo name="Badge" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="badge--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/Breadcrumb.mdx
+++ b/docs/lsd/components/Breadcrumb.mdx
@ -0,0 +1,9 @@
+---
+title: Breadcrumb
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Breadcrumb
+
+<StorybookDemo name="Breadcrumb" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="breadcrumb--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/Button.mdx
+++ b/docs/lsd/components/Button.mdx
@ -0,0 +1,9 @@
+---
+title: Button
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Button
+
+<StorybookDemo name="Button" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="button--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/ButtonGroup.mdx
+++ b/docs/lsd/components/ButtonGroup.mdx
@ -0,0 +1,9 @@
+---
+title: ButtonGroup
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# ButtonGroup
+
+<StorybookDemo name="ButtonGroup" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="buttongroup--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/Card.mdx
+++ b/docs/lsd/components/Card.mdx
@ -0,0 +1,9 @@
+---
+title: Card
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Card
+
+<StorybookDemo name="Card" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="card--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/Checkbox.mdx
+++ b/docs/lsd/components/Checkbox.mdx
@ -0,0 +1,9 @@
+---
+title: Checkbox
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Checkbox
+
+<StorybookDemo name="Checkbox" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="checkbox--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/CheckboxGroup.mdx
+++ b/docs/lsd/components/CheckboxGroup.mdx
@ -0,0 +1,9 @@
+---
+title: CheckboxGroup
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# CheckboxGroup
+
+<StorybookDemo name="CheckboxGroup" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="checkboxgroup--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/Collapse.mdx
+++ b/docs/lsd/components/Collapse.mdx
@ -0,0 +1,9 @@
+---
+title: Collapse
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Collapse
+
+<StorybookDemo name="Collapse" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="collapse--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/DateField.mdx
+++ b/docs/lsd/components/DateField.mdx
@ -0,0 +1,9 @@
+---
+title: DateField
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# DateField
+
+<StorybookDemo name="DateField" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="datefield--uncontrolled" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/DatePicker.mdx
+++ b/docs/lsd/components/DatePicker.mdx
@ -0,0 +1,9 @@
+---
+title: DatePicker
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# DatePicker
+
+<StorybookDemo name="DatePicker" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="datepicker--uncontrolled" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/DateRangePicker.mdx
+++ b/docs/lsd/components/DateRangePicker.mdx
@ -0,0 +1,9 @@
+---
+title: DateRangePicker
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# DateRangePicker
+
+<StorybookDemo name="DateRangePicker" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="daterangepicker--uncontrolled" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/Dropdown.mdx
+++ b/docs/lsd/components/Dropdown.mdx
@ -0,0 +1,9 @@
+---
+title: Dropdown
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Dropdown
+
+<StorybookDemo name="Dropdown" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="dropdown--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/IconButton.mdx
+++ b/docs/lsd/components/IconButton.mdx
@ -0,0 +1,9 @@
+---
+title: IconButton
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# IconButton
+
+<StorybookDemo name="IconButton" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="iconbutton--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/IconButtonGroup.mdx
+++ b/docs/lsd/components/IconButtonGroup.mdx
@ -0,0 +1,9 @@
+---
+title: IconButtonGroup
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# IconButtonGroup
+
+<StorybookDemo name="IconButtonGroup" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="iconbuttongroup--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/Modal.mdx
+++ b/docs/lsd/components/Modal.mdx
@ -0,0 +1,9 @@
+---
+title: Modal
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Modal
+
+<StorybookDemo name="Modal" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="modal--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/NumberInput.mdx
+++ b/docs/lsd/components/NumberInput.mdx
@ -0,0 +1,9 @@
+---
+title: NumberInput
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# NumberInput
+
+<StorybookDemo name="NumberInput" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="numberinput--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/Quote.mdx
+++ b/docs/lsd/components/Quote.mdx
@ -0,0 +1,9 @@
+---
+title: Quote
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Quote
+
+<StorybookDemo name="Quote" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="quote--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/RadioButton.mdx
+++ b/docs/lsd/components/RadioButton.mdx
@ -0,0 +1,9 @@
+---
+title: RadioButton
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# RadioButton
+
+<StorybookDemo name="RadioButton" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="radiobutton--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/RadioButtonGroup.mdx
+++ b/docs/lsd/components/RadioButtonGroup.mdx
@ -0,0 +1,9 @@
+---
+title: RadioButtonGroup
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# RadioButtonGroup
+
+<StorybookDemo name="RadioButtonGroup" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="radiobuttongroup--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/Table.mdx
+++ b/docs/lsd/components/Table.mdx
@ -0,0 +1,9 @@
+---
+title: Table
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Table
+
+<StorybookDemo name="Table" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="table--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/Tabs.mdx
+++ b/docs/lsd/components/Tabs.mdx
@ -0,0 +1,9 @@
+---
+title: Tabs
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Tabs
+
+<StorybookDemo name="Tabs" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="tabs--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/Tag.mdx
+++ b/docs/lsd/components/Tag.mdx
@ -0,0 +1,9 @@
+---
+title: Tag
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Tag
+
+<StorybookDemo name="Tag" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="tag--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/TextField.mdx
+++ b/docs/lsd/components/TextField.mdx
@ -0,0 +1,9 @@
+---
+title: TextField
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# TextField
+
+<StorybookDemo name="TextField" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="textfield--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/ThemeProvider.mdx
+++ b/docs/lsd/components/ThemeProvider.mdx
@ -0,0 +1,9 @@
+---
+title: ThemeProvider
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# ThemeProvider
+
+<StorybookDemo name="ThemeProvider" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="themeprovider--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/Toast.mdx
+++ b/docs/lsd/components/Toast.mdx
@ -0,0 +1,9 @@
+---
+title: Toast
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Toast
+
+<StorybookDemo name="Toast" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="toast--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/ToastProvider.mdx
+++ b/docs/lsd/components/ToastProvider.mdx
@ -0,0 +1,9 @@
+---
+title: ToastProvider
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# ToastProvider
+
+<StorybookDemo name="ToastProvider" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="toastprovider--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/Typography.mdx
+++ b/docs/lsd/components/Typography.mdx
@ -0,0 +1,9 @@
+---
+title: Typography
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Typography
+
+<StorybookDemo name="Typography" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" docId="typography--docs" globalTypes={{}} componentProperties={[]} />
--- a/docs/lsd/components/index.mdx
+++ b/docs/lsd/components/index.mdx
@ -0,0 +1,120 @@
+---
+title: Components
+---
+
+import { ComponentGrid } from '@site/src/components/mdx';
+
+# Components
+
+<ComponentGrid list={[
+  {
+    "title": "Autocomplete",
+    "href": "./Autocomplete",
+    "imageSrc": "/lsd/Autocomplete.png"
+  },
+  {
+    "title": "Breadcrumb",
+    "href": "./Breadcrumb",
+    "imageSrc": "/lsd/Breadcrumb.png"
+  },
+  {
+    "title": "Button",
+    "href": "./Button",
+    "imageSrc": "/lsd/Button.png"
+  },
+  {
+    "title": "ButtonGroup",
+    "href": "./ButtonGroup",
+    "imageSrc": "/lsd/ButtonGroup.png"
+  },
+  {
+    "title": "Card",
+    "href": "./Card",
+    "imageSrc": "/lsd/Card.png"
+  },
+  {
+    "title": "Checkbox",
+    "href": "./Checkbox",
+    "imageSrc": "/lsd/Checkbox.png"
+  },
+  {
+    "title": "CheckboxGroup",
+    "href": "./CheckboxGroup",
+    "imageSrc": "/lsd/CheckboxGroup.png"
+  },
+  {
+    "title": "Collapse",
+    "href": "./Collapse",
+    "imageSrc": "/lsd/Collapse.png"
+  },
+  {
+    "title": "DateField",
+    "href": "./DateField",
+    "imageSrc": "/lsd/DateField.png"
+  },
+  {
+    "title": "DatePicker",
+    "href": "./DatePicker",
+    "imageSrc": "/lsd/DatePicker.png"
+  },
+  {
+    "title": "DateRangePicker",
+    "href": "./DateRangePicker",
+    "imageSrc": "/lsd/DateRangePicker.png"
+  },
+  {
+    "title": "Dropdown",
+    "href": "./Dropdown",
+    "imageSrc": "/lsd/Dropdown.png"
+  },
+  {
+    "title": "IconButton",
+    "href": "./IconButton",
+    "imageSrc": "/lsd/IconButton.png"
+  },
+  {
+    "title": "Modal",
+    "href": "./Modal",
+    "imageSrc": "/lsd/Modal.png"
+  },
+  {
+    "title": "NumberInput",
+    "href": "./NumberInput",
+    "imageSrc": "/lsd/NumberInput.png"
+  },
+  {
+    "title": "Quote",
+    "href": "./Quote",
+    "imageSrc": "/lsd/Quote.png"
+  },
+  {
+    "title": "RadioButton",
+    "href": "./RadioButton",
+    "imageSrc": "/lsd/RadioButton.png"
+  },
+  {
+    "title": "RadioButtonGroup",
+    "href": "./RadioButtonGroup",
+    "imageSrc": "/lsd/RadioButtonGroup.png"
+  },
+  {
+    "title": "Tabs",
+    "href": "./Tabs",
+    "imageSrc": "/lsd/Tabs.png"
+  },
+  {
+    "title": "Tag",
+    "href": "./Tag",
+    "imageSrc": "/lsd/Tag.png"
+  },
+  {
+    "title": "TextField",
+    "href": "./TextField",
+    "imageSrc": "/lsd/TextField.png"
+  },
+  {
+    "title": "Toast",
+    "href": "./Toast",
+    "imageSrc": "/lsd/Toast.png"
+  }
+]} />
--- a/docs/lsd/design-tokens/Colors.mdx
+++ b/docs/lsd/design-tokens/Colors.mdx
@ -0,0 +1,9 @@
+---
+title: Colors
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Colors
+
+<StorybookDemo name="Colors" docId="themeprovider--docs" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" storyId="themeprovider--colors" globalTypes={{}} componentProperties={[]} globalControls={["themeColor"]}/>
--- a/docs/lsd/design-tokens/Spacing.mdx
+++ b/docs/lsd/design-tokens/Spacing.mdx
@ -0,0 +1,9 @@
+---
+title: Spacing
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Spacing
+
+<StorybookDemo name="Spacing" docId="themeprovider--docs" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" storyId="themeprovider--spacing" globalTypes={{}} componentProperties={[]} globalControls={[]}/>
--- a/docs/lsd/design-tokens/Typography.mdx
+++ b/docs/lsd/design-tokens/Typography.mdx
@ -0,0 +1,9 @@
+---
+title: Typography
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Typography
+
+<StorybookDemo name="Typography" docId="themeprovider--docs" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/" storyId="themeprovider--typography" globalTypes={{}} componentProperties={[]} globalControls={["themeFont"]}/>
--- a/docs/lsd/design-tokens/_category_.json
+++ b/docs/lsd/design-tokens/_category_.json
@ -0,0 +1,7 @@
+{
+  "label": "Design Tokens",
+  "link": {
+    "type": "generated-index",
+    "title": "Design Tokens"
+  }
+}
--- a/docs/lsd/overview.mdx
+++ b/docs/lsd/overview.mdx
@ -0,0 +1,49 @@
+---
+title: Overview
+sidebar_position: 0
+---
+
+import { ExternalResourceCard, Grid } from '@site/src/components/mdx';
+
+# Overview
+
+## Logos Design System (LSD)
+
+LSD is an open-source design system challenging conventional norms in the world of digital products and experiences. Rooted in a philosophy that values content over excess, we're here to decentralize design and empower the message. Our minimalist approach is a rebellion against the cluttered design landscape. Join us in our mission to simplify and refocus design for all, with working code, tools, resources, and a community of like-minded individuals.
+
+### Radical Theme
+
+<Grid xs={{ cols: 1, wrap: true, gap: '16px' }} md={{ cols: 2 }}>
+    <Grid.Item xs={1}>
+        <ExternalResourceCard
+            title="LSD - Radical"
+            description="www.figma.com"
+            href="https://www.figma.com/file/DVfLHVRl8adBPYkgq02Qki/LSD-%E2%80%93-Radical?type=design&node-id=22%3A796&mode=design&t=17y4ysCLSxyCKece-1"
+            logoSrc="/icons/figma.svg"
+        />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+        <ExternalResourceCard
+            title="Library • acid-info/lsd"
+            description="www.chromatic.com"
+            href="https://www.chromatic.com/library?appId=63e4f71c39dc65c5c703c1e8"
+            logoSrc="/icons/chromatic.svg"
+        />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+        <ExternalResourceCard
+            title="Github - LSD"
+            description="www.github.com"
+            href="https://github.com/acid-info/lsd"
+            logoSrc="/icons/github.svg"
+        />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+        <ExternalResourceCard
+            title="NPM Package - LSD"
+            description="www.npmjs.com"
+            href="https://www.npmjs.com/package/@acid-info/lsd-react"
+            logoSrc="/icons/npm.svg"
+        />
+    </Grid.Item>
+</Grid>
--- a/docs/philosophy/index.md
+++ b/docs/philosophy/index.md
@ -0,0 +1,29 @@
+---
+sidebar_position: 1
+---
+
+# Philosophy
+
+## Overview
+
+We see design as a form of activism that has the potential to inspire change, promote justice, and resist inhuman ideologies. To us, design goes beyond aesthetics; it's about connecting people to ideas in significant ways. Our design philosophy is grounded in creating meaningful and broad-reaching design solutions.
+
+Central to our approach is the belief that “the message is the message.” We prioritize the message over its medium, giving it precedence over the platform it's on or the form it takes. In parallel, we strive to deliver designs that are functional and utilitarian, not trendy or fashionable, because creating meaning, purpose, and impact is what we value most.
+
+We also believe that in design modularity and scalability foster collaboration and diversity. We prioritize solutions that are accessible to as many people as possible, regardless of their technical expertise, physical abilities, or other circumstances.
+
+## Principles
+
+On this page, we'll outline our design principles and how they shape the co-branding system for Logos and its subdivisions.
+
+Our design philosophy is built on the notion that messages often get muddled in excessive presentation. We counter this by focusing on clear, utility-based designs that emphasize content over form; thus substance over spectacle.
+
+### Core Principles
+
+**Activist**: We use design to challenge inhuman ideologies, promoting social and political activism. We emphasize community, cooperation, privacy, and censorship resistance..
+
+**Permissive**: We champion a collaborative approach, moving away from singular design authorities. Our emphasis is on enabling everyone to participate in the creative process without being anchored to specific design styles.
+
+**Material Focus**: We create tangible digital objects, not images. For us, a website is straightforward — texts and data presented clearly.
+
+**Inclusion**: We emphasize transparency, ensuring our designs are inclusive and accessible. This includes compatibility across various internet conditions and devices. In essence, our approach prioritizes function, inclusivity, and resistance to dominant designs and ideologies.
--- a/docs/templates/_category_.json
+++ b/docs/templates/_category_.json
@ -0,0 +1,7 @@
+{
+  "position": "5",
+  "label": "Templates",
+  "link": {
+    "type": "generated-index"
+  }
+}
--- a/docs/templates/presentation-kits.mdx
+++ b/docs/templates/presentation-kits.mdx
@ -0,0 +1,23 @@
+---
+title: Presentation kits
+displayed_sidebar: main
+---
+
+import { ExternalResourceCard, Grid } from '@site/src/components/mdx';
+
+# Presentation kits
+
+Copy and save as a new presentation with a new title if you plan to make one from the template. Also, make sure to check the Layout pull-down for all the placeholder goodies.
+
+
+<Grid xs={{ cols: 1, gap: '16px' }} md={{ cols: 2 }}>
+    <Grid.Item xs={1}>
+        <ExternalResourceCard
+            previewSrc="/Presentation-kit-slide1.png"
+            title="Logos Presentation Template MAKE A COPY"
+            description="docs.google.com"
+            href="https://docs.google.com/presentation/d/1extQeoMdbY2VZbTZH0sNKOM0AGMzpXjGsq9eG44zWjo/edit#slide=id.g158930d3f51_0_105"
+            logoSrc="/icons/google-slides.svg"
+        />
+    </Grid.Item>
+</Grid>
--- a/docs/templates/social-media-assets.mdx
+++ b/docs/templates/social-media-assets.mdx
@ -0,0 +1,44 @@
+
+# Social media assets
+
+import { ExternalResourceCard, Grid, Box } from '@site/src/components/mdx';
+
+<Grid xs={{ cols: 1, wrap: true, gap: '16px' }} md={{ cols: 2 }}>
+    <Grid.Item xs={1}>
+        <Box top={40} bottom={24}>Network State Press templates</Box>
+        <ExternalResourceCard
+            title="Logos templates"
+            description="www.figma.com"
+            href="https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=212%3A175&mode=design&t=0bOCaBBwhofQKq0c-1"
+            logoSrc="/icons/figma.svg"
+        />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+        <Box top={40} bottom={24}>Tweet templates</Box>
+        <ExternalResourceCard
+            title="Logos templates"
+            description="www.figma.com"
+            href="https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=212%3A391&mode=design&t=0bOCaBBwhofQKq0c-1"
+            logoSrc="/icons/figma.svg"
+        />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+        <Box top={40} bottom={24}>Logos podcast templates</Box>
+        <ExternalResourceCard
+            title="Logos templates"
+            description="www.figma.com"
+            href="https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=0%3A1&mode=design&t=0bOCaBBwhofQKq0c-1"
+            logoSrc="/icons/figma.svg"
+        />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+        <Box top={40} bottom={24}>Hashing It Out templates</Box>
+        <ExternalResourceCard
+            title="Logos templates"
+            description="www.figma.com"
+            href="https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=212%3A325&mode=design&t=0bOCaBBwhofQKq0c-1"
+            logoSrc="/icons/figma.svg"
+        />
+    </Grid.Item>
+</Grid>
+
--- a/docs/terms.md
+++ b/docs/terms.md
@ -0,0 +1,75 @@
+---
+displayed_sidebar: null
+sidebar_class_name: hidden
+---
+
+# Terms of Use
+
+These terms of use ('**Website Terms of Use**') are entered into by you and us, and they govern your access and use of the Website, including any content and functionality contained in the Website.
+
+It is your responsibility to read the Website Terms of Use carefully before your use of the Website and your use of the Website means you have agreed to be bound and comply with these Website Terms of Use.
+
+If you do not agree with these Website Terms of Use, you must not access or use the Website.
+
+### Content provided for informational purposes only
+
+Content available on the Website is for informational purposes only and is not intended to address the specific circumstances of any particular individual or entity. Such content may not always be entirely accurate, complete, or up to date, and may also include inaccuracies or typographical errors. You are solely responsible for verifying their adequacy, completeness, and accuracy, and any reliance you place on such content is at your own risk.
+
+None of the content on this Website should be considered by you as legal, tax, investment, financial, professional, or any other type of advice. You should always conduct your own research and seek independent professional advice if necessary. You are solely responsible for the decisions or actions you might take in this respect. We are not liable for any loss resulting from your action (or inaction) and decisions based on the content on this Website.
+
+Additionally, we are not responsible for any information, content, or services contained in any third-party content or on any third-party websites accessible or linked through this Website.
+
+### Intellectual property rights
+
+The Website and its contents are made available under free and open-source licences. This means that anyone can use, share, and modify such content, as long as they follow the terms of the applicable licence.
+
+### Third-party website links
+
+To the extent the Website provides any links to a third-party website, then its terms and conditions, including privacy policies, govern your use of those third-party websites. We have no control over such third-party websites and will not be liable for your use of or activities on any third-party websites accessed through the Website. If you access such third-party websites through the Website, it is at your own risk and you are solely responsible for your activities on such third-party websites.
+
+The Website may embed videos from Youtube, a service provided by Google LLC, using Youtube’s privacy-enhanced mode. When you interact with such videos, Youtube may place cookies on your personal device which do not directly identify individual users. Unless you are logged in to a Google account, Youtube will not store information to personalise your experience. We do not have any control over these cookies set by Youtube and it is recommended that you review YouTube’s embedding videos information page.
+
+### Disclaimer
+
+The Website is provided by us on an ‘as is’ basis, and you use the Website at your own sole discretion and risk.
+
+We disclaim all warranties of any kind, express or implied, including without limitation the warranties of merchantability, fitness for a particular purpose, and non-infringement of intellectual property or other violation of rights. We do not warrant or make any representations concerning the completeness, accuracy, legality, utility, reliability, suitability, or availability of the use of the Website, the content on this Website, or otherwise relating to the Website, such content, or on any sites linked to this site.
+
+We make no claims that the Website or any of its content is accessible, legally compliant or appropriate in your jurisdiction. Your access or use of the Website is at your own sole discretion and you are solely responsible for complying with any applicable local laws. These disclaimers will apply to the maximum extent permitted by applicable law.
+
+
+### Limitation of liability
+
+We will not be held liable to you under any contract, negligence, strict liability, or other legal or equitable theory for any lost profits, cost of procurement for substitute services, or any special, incidental, or consequential damages related to, arising from, or in any way connected with these Website Terms of Use, the Website, the content on the Website, or your use of the Website, even if we have been advised of the possibility of such damages. In any event, our aggregate liability for such claims is limited to EUR 100 (one hundred euros). This limitation of liability will apply to the maximum extent permitted by applicable law.
+
+### Indemnity
+
+You shall indemnify us and hold us harmless from and against any and all claims, damages, and expenses, including attorneys’ fees arising from or related to your use of the Website and the content on the Website, including without limitation your violation of these Website Terms of Use.
+
+### Modifications
+
+We may modify or replace any part of this Website Terms of Use at any time and without notice. You are responsible for checking the Website periodically for any changes. The new Website Terms of Use will be effective immediately upon its posting on the Website.
+
+### Governing law
+
+Swiss law governs these Website Terms of Use and any disputes between you and us, whether in court or arbitration, without regard to conflict of laws provisions.
+
+### Disputes
+
+In these terms, ‘dispute’ has the broadest meaning enforceable by law and includes any claim you make against or controversy you may have in relation to these Website Terms of Use, the Website, the content on the Website, or your use of the Website.
+
+We prefer arbitration over litigation as we believe it meets our principle of resolving disputes in the most effective and cost-effective manner. You are bound by the following arbitration clause, which waives your right to litigation and to be heard by a judge. Please note that court review of an arbitration award is limited. You also waive all your rights to a jury trial (if any) in any and all jurisdictions.
+
+If a (potential) dispute arises, you must first use your reasonable efforts to resolve it amicably with us. If these efforts do not result in a resolution of such dispute, you shall then send us a written notice of dispute setting out (i) the nature of the dispute and the claim you are making; and (ii) the remedy you are seeking.
+
+If we and you are unable to further resolve this dispute within sixty (60) calendar days of us receiving this notice of dispute, then any such dispute will be referred to and finally resolved by you and us through arbitration administered by the Swiss Chambers’ Arbitration Institution in accordance with the Swiss Rules of International Arbitration for the time being in force, the rules of which are deemed to be incorporated herein by reference. The arbitral decision may be enforced in any court. The arbitration will be held in Zug, Switzerland, and may be conducted via video conference virtual/online methods if possible. The tribunal will consist of one arbitrator, and all proceedings as well as communications between the parties will be kept confidential. The language of the arbitration will be in English. Payment of all relevant fees in respect of the arbitration, including filing, administration, and arbitrator fees, will be in accordance with the Swiss Rules of International Arbitration.
+
+Regardless of any applicable statute of limitations, you must bring any claims within one year after the claim arose or the time when you should have reasonably known about the claim. You also waive the right to participate in a class action lawsuit or a classwide arbitration against us.
+
+### About these Website Terms of Use
+
+These Website Terms of Use cover the entire agreement between you and us regarding the Website and supersede all prior and contemporaneous understandings, agreements, representations, and warranties, both written and oral, with respect to the Website.
+
+The captions and headings identifying sections and subsections of these Website Terms of Use are for reference only and do not define, modify, expand, limit, or affect the interpretation of any provisions of these Website Terms of Use.
+
+If any part of these Website Terms of Use is held invalid or unenforceable, that part will be severable from these Website Terms of Use, and the remaining portions will remain in full force and effect. If we fail to enforce any of these Website Terms of Use, that does not mean that we have waived our right to enforce them.
--- a/docs/visual-language/_category_.json
+++ b/docs/visual-language/_category_.json
@ -0,0 +1,7 @@
+{
+  "position": 4,
+  "label": "Visual Language",
+  "link": {
+    "type": "generated-index"
+  }
+}
--- a/docs/visual-language/color.mdx
+++ b/docs/visual-language/color.mdx
@ -0,0 +1,30 @@
+---
+title: Color
+sidebar_position: 2 
+displayed_sidebar: main
+---
+
+import { ColorCard, Grid } from "@site/src/components/mdx"
+
+# Color
+
+Our belief is that color should be used intentionally to communicate a message and evoke a specific emotion, rather than as an aesthetic choice. As a result, our color palette is minimalistic and designed to complement our typography and other visual elements.
+
+Our philosophy towards color is grounded in our core values of simplicity, functionality, and accessibility. We take inspiration from our roots in underground culture, where black and white copy machine zines were a powerful tool for change.
+
+We adhere to the W3C's Web Content Accessibility Guidelines (WCAG) to ensure that our designs are accessible to as many people as possible, regardless of their visual abilities. This includes providing sufficient color contrast and avoiding the use of color alone to convey important information. By following these guidelines, we can create designs that are inclusive and accessible for everyone.
+
+## Web-Default Color Systems
+
+In order to maintain a consistent experience for our users, we prefer to rely on the default color systems available on each platform or device. This approach ensures that our designs are accessible to the widest possible audience and that they adhere to the platform conventions. Additionally, by relying on the default color systems, we reduce the amount of data that our users need to consume, making our designs more accessible and faster to load.
+
+We only allow non-default colors when black and white are not enough to fulfill a specific function or need, such as the blue color of hyperlinks.
+
+<Grid xs={{ cols: 1, wrap: true, gap: '16px' }} md={{ cols: 2 }}>
+  <Grid.Item xs={1}>
+    <ColorCard fullWidth title="Black" color="rgb(var(--lsd-theme-primary))" variables={[{ name: "Hex", value: "#000" }, { name: "RGB", value: "0, 0, 0" }]} />
+  </Grid.Item>
+  <Grid.Item xs={1}>
+    <ColorCard fullWidth title="White" color="rgb(var(--lsd-theme-secondary))" variables={[{ name: "Hex", value: "#fff" }, { name: "RGB", value: "255, 255, 255" }]} />
+  </Grid.Item>
+</Grid>
--- a/docs/visual-language/grid-and-layout/_category_.json
+++ b/docs/visual-language/grid-and-layout/_category_.json
@ -0,0 +1,4 @@
+{
+  "position": 4,
+  "label": "Grid and Layout"
+}
--- a/docs/visual-language/grid-and-layout/non-web-environment.mdx
+++ b/docs/visual-language/grid-and-layout/non-web-environment.mdx
@ -0,0 +1,76 @@
+---
+title: Non-web Environment
+sidebar_position: 2
+---
+
+import { ImageGrid, Grid } from '@site/src/components/mdx'
+
+# Non-web environment
+
+Non-web grids are based on a 20px unit. All elements are sized and spaced in multiples of 20, though which multiples depends on the particular medium. Below we have examples of grids for podcast promotion, podcast video, and 16:9 twitter layouts. These grids work for 16:9 @1920x1080, 1:1 @1920x1920 or 1080x1080, and 9:16 @1080x1920. They can also work for print in 1:2, 4:3, 1:1, and other aspect ratios.
+
+The typestack for these grids is also based in multiples of 20px, line height adjusted on type styles so that the resulting blocks neatly fit into the grid.
+
+### Logos State Podcast
+
+<!-- [Sizzle Reel draft.mp4](Gallery%20e5522cb5bfc94082adac41f1ab17a673/Sizzle_Reel_draft.mp4) -->
+
+2 column 20px and 4 column 20px
+
+<ImageGrid
+  md={{ cols: 2, gap: '16px' }}
+  images={[
+    {
+      src: '/grid-and-layout/non-web-environment/Logos-Example-1.png',
+      img: require('/grid-and-layout/non-web-environment/Logos-Example-1.png'),
+    },
+    {
+      src: '/grid-and-layout/non-web-environment/Logos-Example-2.png',
+      img: require('/grid-and-layout/non-web-environment/Logos-Example-2.png'),
+    },
+  ]}
+/>
+
+### Hashing It Out
+
+3 column 20px and 2 column 20px
+
+<ImageGrid
+  md={{ cols: 2, gap: '16px' }}
+  images={[
+    {
+      src: '/grid-and-layout/non-web-environment/HIO-Examples-1.png',
+      img: require('/grid-and-layout/non-web-environment/HIO-Examples-1.png'),
+    },
+    {
+      src: '/grid-and-layout/non-web-environment/HIO-Examples-2.png',
+      img: require('/grid-and-layout/non-web-environment/HIO-Examples-2.png'),
+    },
+  ]}
+/>
+
+### Generic Twitter
+
+This is a simpler grid based on 96px, used for X. Type sizes are also based on divisions of the 96px unit.
+
+<ImageGrid
+  md={{ cols: 2, gap: '16px' }}
+  images={[
+    {
+      src: '/grid-and-layout/non-web-environment/Social media-Example-1.png',
+      img: require('/grid-and-layout/non-web-environment/Social media-Example-1.png'),
+    },
+    {
+      src: '/grid-and-layout/non-web-environment/Social media-Example-2.png',
+      img: require('/grid-and-layout/non-web-environment/Social media-Example-2.png'),
+    },
+    {
+      src: '/grid-and-layout/non-web-environment/Social media-Example-3.png',
+      img: require('/grid-and-layout/non-web-environment/Social media-Example-3.png'),
+    },
+    {
+      src: '/grid-and-layout/non-web-environment/Social media-Example-4.png',
+      img: require('/grid-and-layout/non-web-environment/Social media-Example-4.png'),
+    },
+  ]}
+/>
--- a/docs/visual-language/grid-and-layout/overview.mdx
+++ b/docs/visual-language/grid-and-layout/overview.mdx
@ -0,0 +1,12 @@
+---
+title: Overview 
+sidebar_position: 0
+---
+
+import DocCardList from '@theme/DocCardList';
+
+# Grid and Layout
+
+At the core of our design philosophy is the belief that good design is functional and accessible. To achieve this, we rely on a grid system that provides a consistent and reliable foundation for all of our designs. Our grid system is not only a tool for organizing content and creating layouts, but also a reflection of our values and principles.
+
+<DocCardList className="DocCardList--no-overview"/>
--- a/docs/visual-language/grid-and-layout/web-environment.mdx
+++ b/docs/visual-language/grid-and-layout/web-environment.mdx
@ -0,0 +1,51 @@
+---
+title: Web Environment
+sidebar_position: 1
+---
+
+
+import { ExternalResourceCard, ImageGrid } from '@site/src/components/mdx';
+
+## Spacing
+
+Spacing tokens serve as the building blocks for maintaining consistency in components, grids, and page layouts. Our base unit is 8, and the spacing scale uses multiples of the base unit.
+
+![Untitled](/Untitled.png)
+
+## Grid
+
+Our web grid system is flexible. We typically structure grids and layouts based on our spacing scale.
+
+Commonly used web grids:
+
+- Desktop: 24 / 16 columns
+- Tablet: 16 / 12 columns
+- Mobile: 2 columns
+
+Gutter size - 16px.
+
+![image 1.png](/image_1.png)
+
+### Web grid templates
+
+<ExternalResourceCard
+    title="Logos templates"
+    description="www.figma.com"
+    href="https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=215%3A8&mode=design&t=0bOCaBBwhofQKq0c-1"
+    logoSrc="/icons/figma.svg"
+    style={{ maxWidth: "390px"}}
+/>
+
+## Examples
+
+### Desktop
+
+<ImageGrid md={{cols: 2, gap: "16px"}} images={[{src: "/Untitled-1.png"}, {src: "/Untitled-2.png"}, {src: "/Untitled-3.png"}, {src: "/Untitled-4.png"}]} />
+
+### Tablet
+
+<ImageGrid md={{cols: 2, gap: "16px"}} images={[{src: "/Untitled-5.png"}, {src: "/Untitled-6.png"}]} />
+
+### Mobile
+
+<ImageGrid md={{cols: 2, gap: "16px"}} images={[{src: "/Untitled-7.png"}, {src: "/Untitled-8.png"}]} />
--- a/docs/visual-language/illustration.mdx
+++ b/docs/visual-language/illustration.mdx
@ -0,0 +1,111 @@
+---
+title: Illustration
+sidebar_position: 5
+displayed_sidebar: null
+sidebar_class_name: hidden 
+---
+
+import { ImageGrid } from "@site/src/components/mdx"
+
+export const protocolPromotion = [
+    {src: "/illustration/Conceptual-illustration-1.png", img: require("/illustration/Conceptual-illustration-1.png") },
+    {src: "/illustration/Conceptual-illustration-2.png", img: require("/illustration/Conceptual-illustration-2.png") },
+    {src: "/illustration/Conceptual-illustration-3.png", img: require("/illustration/Conceptual-illustration-3.png") },
+    {src: "/illustration/Conceptual-illustration-4.png", img: require("/illustration/Conceptual-illustration-4.png") },
+]
+
+export const conceptualImages = [
+    {src: "/illustration/Conceptual-illustration-5.png", img: require("/illustration/Conceptual-illustration-5.png") },
+    {src: "/illustration/Conceptual-illustration-6.png", img: require("/illustration/Conceptual-illustration-6.png") },
+    {src: "/illustration/Conceptual-illustration-7.png", img: require("/illustration/Conceptual-illustration-7.png") },
+    {src: "/illustration/Conceptual-illustration-8.png", img: require("/illustration/Conceptual-illustration-8.png") },
+    {src: "/illustration/Conceptual-illustration-9.png", img: require("/illustration/Conceptual-illustration-9.png") },
+    {src: "/illustration/Conceptual-illustration-10.png", img: require("/illustration/Conceptual-illustration-10.png") },
+    {src: "/illustration/Conceptual-illustration-11.png", img: require("/illustration/Conceptual-illustration-11.png") },
+    {src: "/illustration/Conceptual-illustration-12.png", img: require("/illustration/Conceptual-illustration-12.png") },
+    {src: "/illustration/Conceptual-illustration-13.png", img: require("/illustration/Conceptual-illustration-13.png") },
+    {src: "/illustration/Conceptual-illustration-14.png", img: require("/illustration/Conceptual-illustration-14.png") },
+    {src: "/illustration/Conceptual-illustration-15.png", img: require("/illustration/Conceptual-illustration-15.png") },
+    {src: "/illustration/Conceptual-illustration-16.png", img: require("/illustration/Conceptual-illustration-16.png") },
+    {src: "/illustration/Conceptual-illustration-17.png", img: require("/illustration/Conceptual-illustration-17.png") },
+    {src: "/illustration/Conceptual-illustration-18.png", img: require("/illustration/Conceptual-illustration-18.png") },
+    {src: "/illustration/Conceptual-illustration-19.png", img: require("/illustration/Conceptual-illustration-19.png") },
+    {src: "/illustration/Conceptual-illustration-20.png", img: require("/illustration/Conceptual-illustration-20.png") },
+    {src: "/illustration/Conceptual-illustration-21.png", img: require("/illustration/Conceptual-illustration-21.png") },
+    {src: "/illustration/Conceptual-illustration-22.png", img: require("/illustration/Conceptual-illustration-22.png") },
+    {src: "/illustration/Conceptual-illustration-23.png", img: require("/illustration/Conceptual-illustration-23.png") },
+    {src: "/illustration/Conceptual-illustration-24.png", img: require("/illustration/Conceptual-illustration-24.png") },
+    {src: "/illustration/Conceptual-illustration-25.png", img: require("/illustration/Conceptual-illustration-25.png") },
+]
+
+export const abstractImages = [
+    {src: "/illustration/Abstract-1.png", img: require("/illustration/Abstract-1.png") },
+    {src: "/illustration/Abstract-2.png", img: require("/illustration/Abstract-2.png") },
+    {src: "/illustration/Abstract-3.png", img: require("/illustration/Abstract-3.png") },
+    {src: "/illustration/Abstract-6.png", img: require("/illustration/Abstract-6.png") },
+    {src: "/illustration/Abstract-7.png", img: require("/illustration/Abstract-7.png") },
+    {src: "/illustration/Abstract-8.png", img: require("/illustration/Abstract-8.png") },
+    {src: "/illustration/Abstract-9.png", img: require("/illustration/Abstract-9.png") },
+    {src: "/illustration/Abstract-10.png", img: require("/illustration/Abstract-10.png") },
+    {src: "/illustration/Abstract-11.png", img: require("/illustration/Abstract-11.png") },
+    {src: "/illustration/Abstract-12.png", img: require("/illustration/Abstract-12.png") },
+    {src: "/illustration/Abstract-13.png", img: require("/illustration/Abstract-13.png") },
+    {src: "/illustration/Abstract-14.png", img: require("/illustration/Abstract-14.png") },
+    {src: "/illustration/Abstract-15.png", img: require("/illustration/Abstract-15.png") },
+    {src: "/illustration/Abstract-16.png", img: require("/illustration/Abstract-16.png") },
+    {src: "/illustration/Abstract-17.png", img: require("/illustration/Abstract-17.png") },
+    {src: "/illustration/Abstract-20.png", img: require("/illustration/Abstract-20.png") },
+    {src: "/illustration/Abstract-21.png", img: require("/illustration/Abstract-21.png") },
+    {src: "/illustration/Abstract-22.png", img: require("/illustration/Abstract-22.png") },
+    {src: "/illustration/Abstract-23.png", img: require("/illustration/Abstract-23.png") },
+    {src: "/illustration/Abstract-24.png", img: require("/illustration/Abstract-24.png") },
+    {src: "/illustration/Abstract-25.png", img: require("/illustration/Abstract-25.png") },
+    {src: "/illustration/Abstract-26.png", img: require("/illustration/Abstract-26.png") },
+    {src: "/illustration/Abstract-27.png", img: require("/illustration/Abstract-27.png") },
+    {src: "/illustration/Abstract-28.png", img: require("/illustration/Abstract-28.png") },
+    {src: "/illustration/Abstract-29.png", img: require("/illustration/Abstract-29.png") },
+    {src: "/illustration/Abstract-30.png", img: require("/illustration/Abstract-30.png") },
+    {src: "/illustration/Abstract-31.png", img: require("/illustration/Abstract-31.png") },
+    {src: "/illustration/Abstract-34.png", img: require("/illustration/Abstract-34.png") },
+    {src: "/illustration/Abstract-35.png", img: require("/illustration/Abstract-35.png") },
+    {src: "/illustration/Abstract-36.png", img: require("/illustration/Abstract-36.png") },
+    {src: "/illustration/Abstract-37.png", img: require("/illustration/Abstract-37.png") },
+    {src: "/illustration/Abstract-38.png", img: require("/illustration/Abstract-38.png") },
+    {src: "/illustration/Abstract-39.png", img: require("/illustration/Abstract-39.png") },
+    {src: "/illustration/Abstract-40.png", img: require("/illustration/Abstract-40.png") },
+    {src: "/illustration/Abstract-41.png", img: require("/illustration/Abstract-41.png") },
+    {src: "/illustration/Abstract-42.png", img: require("/illustration/Abstract-42.png") },
+    {src: "/illustration/Abstract-42-1.png", img: require("/illustration/Abstract-42-1.png") },
+    {src: "/illustration/Abstract-44.png", img: require("/illustration/Abstract-44.png") },
+    {src: "/illustration/Abstract-45.png", img: require("/illustration/Abstract-45.png") },
+    {src: "/illustration/Abstract-48.png", img: require("/illustration/Abstract-48.png") },
+    {src: "/illustration/Abstract-49.png", img: require("/illustration/Abstract-49.png") },
+]
+
+These 3D rendered animations are used to promote Nomos, Waku, Nimbus, and Codex. Each Protocol has its own and can be used in static or animated form. In some cases these statues appear to be previously broken and repaired in the style of Japanese Kintsugi (golden repair). This is a metaphor for the vision of Logos to rebuild the currently broken modern society with the pieces of enlightenment and renaissance ideas.
+
+Codex - data backbone, the archive, Atlas holding up the world
+
+Nomos - David, ancient symbol of freedom and egalitarian values
+
+Nimbus - Aphrodite with halo, lightness, symbol of love, attraction
+
+Waku - Prometheus, delivering transformative technology
+
+<ImageGrid mode="square-thumbnails" xs={{cols: 2, gap: "16px"}} md={{cols: 4, gap: "16px"}} images={protocolPromotion} />
+
+## Conceptual
+
+The selected illustration style is detailed, and symmetrical to suggest the subliminal or occult. The artwork can be simplified but should be strong conceptually relating back to one of the concepts.
+
+Need to come up with a plan/process for creating/buying/commissioning/using this type of illustration. Could be applicable to Network State Press articles and social promo stuff.
+
+<ImageGrid mode="square-thumbnails" xs={{cols: 2, gap: "16px"}} md={{cols: 4, gap: "16px"}} images={conceptualImages} />
+
+## Abstract
+
+Texture can be preferable giving a layering or aging effect to the work suggesting time or craft. Many digital illustrations can feel rushed or flat without a subtle texture effect depending upon the execution.
+
+HIO uses these abstracts for the Flash Hash episode covers.
+
+<ImageGrid mode="square-thumbnails" xs={{cols: 4, gap: "16px"}} md={{cols: 7, gap: "16px"}} images={abstractImages} />
--- a/docs/visual-language/logo.mdx
+++ b/docs/visual-language/logo.mdx
@ -0,0 +1,146 @@
+---
+title: Logo
+sidebar_position: 1 
+---
+
+import { AssetCard } from '@site/src/components/mdx';
+
+# Logo
+
+## Choosing the right mark
+
+Our mark is the primary brand element on our own properties, such as our websites and products. Here it can stand on its own.
+
+When our brand is represented in other contexts, throughout the web or in products we do not own, it is usually best to use a lockup. Please do not edit, change, distort, recolor, or reconfigure the Logos mark. Our mark is the primary brand element on our own properties, such as our websites and products.
+
+## Primary Mark
+
+<div style={{display: "flex", gap: "16px"}}>
+  <AssetCard
+    title="Mark - Black"
+    forceDownload
+    previewSrc="https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-mark-display-black.svg"
+    downloadable={[
+      {
+        title: "PNG",
+        src: "https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-mark-black.png"
+      },
+      {
+        title: "SVG",
+        src: "https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-mark-black.svg"
+      }
+    ]}
+  />
+
+  <AssetCard
+    title="Mark - White"
+    forceDownload
+    previewSrc="https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-mark-display-white.svg"
+    downloadable={[
+      {
+        title: "PNG",
+        src: "https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-mark-white.png"
+      },
+      {
+        title: "SVG",
+        src: "https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-mark-white.svg"
+      }
+    ]}
+  />
+</div>
+
+## Lockup — Vertical
+
+These vertical lockups are best used arranged horizontally in a line.
+
+<div style={{display: "flex", gap: "16px"}}>
+  <AssetCard
+    title="Vertical lockup - Black"
+    forceDownload
+    previewSrc="https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-lockup-vertical-display-black.svg"
+    downloadable={[
+      {
+        title: "PNG",
+        src: "https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-lockup-vertical-black.png"
+      },
+      {
+        title: "SVG",
+        src: "https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-lockup-vertical-black.svg"
+      }
+    ]}
+  />
+
+  <AssetCard
+    title="Vertical lockup - White"
+    forceDownload
+    previewSrc="https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-lockup-vertical-display-white.svg"
+    downloadable={[
+      {
+        title: "PNG",
+        src: "https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-lockup-vertical-white.png" 
+      },
+      {
+        title: "SVG",
+        src: "https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-lockup-vertical-white.svg"
+      }
+    ]}
+  />
+</div>
+
+## Lockup — Horizontal
+
+These horizontal lockups are best used stacked vertically.
+
+<div style={{display: "flex", gap: "16px"}}>
+  <AssetCard
+    title="Horizontal lockup - Black"
+    forceDownload
+    previewSrc="https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-lockup-horizontal-display-black.svg"
+    downloadable={[
+      {
+        title: "PNG",
+        src: "https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-lockup-horizontal-black.png"
+      },
+      {
+        title: "SVG",
+        src: "https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-lockup-horizontal-black.svg"
+      }
+    ]}
+  />
+
+  <AssetCard
+    title="Horizontal lockup - White"
+    forceDownload
+    previewSrc="https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-lockup-horizontal-display-white.svg"
+    downloadable={[
+      {
+        title: "PNG",
+        src: "https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-lockup-horizontal-white.png"
+      },
+      {
+        title: "SVG",
+        src: "https://raw.githubusercontent.com/acid-info/design-assets/master/waku/waku-lockup-horizontal-white.svg"
+      }
+    ]}
+  />
+</div>
+
+## Clearspace
+
+When placing the logo, it’s important that it’s given enough space from other elements on the surface it’s presented on. The Clearspace is 50% of the width of the Logos mark. This Clearspace is accounted for as a margin in all our logo assets, so simply mind the edges of the image.
+
+If you need to define the unit of space, the best way is to measure the bottom of any given mark to the edge of the image or the baseline of the logotype in the lockup to the bottom edge of the image.
+
+![logos-guide-clearspace-mark.png](/logos-guide-clearspace-mark.png)
+
+## Co-branding
+
+Often, our brand marks will be used as a family or in different combinations. All of our marks and lockups are designed to work together. The two major rules here are the consistency of size and the consistency of style.
+
+Hierarchy is determined by the placement order, the most important being left in the case of horizontal layouts, or top in the vertical case. Vertical lockups are used in horizontal layouts and horizontal lockups in vertical layouts.
+
+- All marks should be the same size
+- Priority is determined by order, not scale
+- All marks should be the same style
+- Do not mix lockups and non-lockups
+- Do not mix vertical lockups with horizontal lockups
--- a/docs/visual-language/overview.md
+++ b/docs/visual-language/overview.md
@ -0,0 +1,10 @@
+---
+title: Overview 
+sidebar_position: 0
+---
+
+# Overview
+
+Our visual language is a vital part of how we communicate our message and values to the world. It consists of our logo(s), color palette, typography, imagery, and other design systems.
+
+It not only helps to establish a memorable and recognizable brand identity but also plays a crucial role in building trust and credibility with our community. In this section, we delve into the principles and guidelines that underpin our visual language and provide a framework for creating cohesive and impactful visual communication.
--- a/docs/visual-language/photography.mdx
+++ b/docs/visual-language/photography.mdx
@ -0,0 +1,81 @@
+---
+title: Photography 
+displayed_sidebar: null
+sidebar_class_name: hidden
+---
+
+import { ImageGrid } from "@site/src/components/mdx"
+
+export const portraits = [
+    { src: "/photography/Logos-Photography-01.png", img: require("/photography/Logos-Photography-01.png") },
+    { src: "/photography/Logos-Photography-02.png", img: require("/photography/Logos-Photography-02.png") },
+    { src: "/photography/Logos-Photography-03.png", img: require("/photography/Logos-Photography-03.png") },
+    { src: "/photography/Logos-Photography-04.png", img: require("/photography/Logos-Photography-04.png") },
+    { src: "/photography/HIO-Photography-01.png", img: require("/photography/HIO-Photography-01.png") },
+    { src: "/photography/HIO-Photography-02.png", img: require("/photography/HIO-Photography-02.png") },
+    { src: "/photography/HIO-Photography-03.png", img: require("/photography/HIO-Photography-03.png") },
+    { src: "/photography/HIO-Photography-04.png", img: require("/photography/HIO-Photography-04.png") },
+]
+
+export const activismImages = [
+    { src: "/photography/Activism-1.png", img: require("/photography/Activism-1.png") },
+    { src: "/photography/Activism-2.png", img: require("/photography/Activism-2.png") },
+    { src: "/photography/Activism-3.png", img: require("/photography/Activism-3.png") },
+    { src: "/photography/Activism-4.png", img: require("/photography/Activism-4.png") },
+    { src: "/photography/Activism-5.png", img: require("/photography/Activism-5.png") },
+    { src: "/photography/Activism-6.png", img: require("/photography/Activism-6.png") },
+    { src: "/photography/Activism-7.png", img: require("/photography/Activism-7.png") },
+    { src: "/photography/Activism-8.png", img: require("/photography/Activism-8.png") },
+    { src: "/photography/Activism-9.png", img: require("/photography/Activism-9.png") },
+    { src: "/photography/Activism-10.png", img: require("/photography/Activism-10.png") },
+    { src: "/photography/Activism-11.png", img: require("/photography/Activism-11.png") },
+    { src: "/photography/Activism-12.png", img: require("/photography/Activism-12.png") },
+    { src: "/photography/Activism-13.png", img: require("/photography/Activism-13.png") },
+    { src: "/photography/Activism-14.png", img: require("/photography/Activism-14.png") },
+]
+
+export const conceptualImages = [
+    { src: "/photography/Conceptual-1.png", img: require("/photography/Conceptual-1.png") },
+    { src: "/photography/Conceptual-2.png", img: require("/photography/Conceptual-2.png") },
+    { src: "/photography/Conceptual-3.png", img: require("/photography/Conceptual-3.png") },
+    { src: "/photography/Conceptual-4.png", img: require("/photography/Conceptual-4.png") },
+    { src: "/photography/Conceptual-5.png", img: require("/photography/Conceptual-5.png") },
+    { src: "/photography/Conceptual-6.png", img: require("/photography/Conceptual-6.png") },
+    { src: "/photography/Conceptual-7.png", img: require("/photography/Conceptual-7.png") },
+    { src: "/photography/Conceptual-8.png", img: require("/photography/Conceptual-8.png") },
+    { src: "/photography/Conceptual-9.png", img: require("/photography/Conceptual-9.png") },
+    { src: "/photography/Conceptual-10.png", img: require("/photography/Conceptual-10.png") },
+    { src: "/photography/Conceptual-11.png", img: require("/photography/Conceptual-11.png") },
+    { src: "/photography/Conceptual-12.png", img: require("/photography/Conceptual-12.png") },
+    { src: "/photography/Conceptual-13.png", img: require("/photography/Conceptual-13.png") },
+    { src: "/photography/Conceptual-14.png", img: require("/photography/Conceptual-14.png") },
+    { src: "/photography/Conceptual-15.png", img: require("/photography/Conceptual-15.png") },
+    { src: "/photography/Conceptual-16.png", img: require("/photography/Conceptual-16.png") },
+    { src: "/photography/Conceptual-17.png", img: require("/photography/Conceptual-17.png") },
+    { src: "/photography/Conceptual-18.png", img: require("/photography/Conceptual-18.png") },
+    { src: "/photography/Conceptual-19.png", img: require("/photography/Conceptual-19.png") },
+    { src: "/photography/Conceptual-20.png", img: require("/photography/Conceptual-20.png") },
+    { src: "/photography/Conceptual-21.png", img: require("/photography/Conceptual-21.png") },
+    { src: "/photography/Conceptual-22.png", img: require("/photography/Conceptual-22.png") },
+    { src: "/photography/Conceptual-23.png", img: require("/photography/Conceptual-23.png") },
+]
+
+We have a unique photography style for each of the following categories; Portraits, Activism, and Conceptual.
+
+## Portraits
+
+This style, primarily used for podcast promotion, incorporates black-and-white visuals with dramatic lighting when feasible. It typically frames subjects with a good amount of head and shoulders. Try to ensure guest consent when possible.
+
+<ImageGrid mode="square-thumbnails" xs={{cols: 2, gap: "16px"}} md={{cols: 4, gap: "16px"}} images={portraits} />
+
+## Activism
+
+This style is predominantly employed for Network State Press articles and presentations, featuring a black-and-white color scheme. It integrates a journalistic approach with both stock photography and real-life imagery from protests and demonstrations. While a preference is given to free resources, licensed content can also be considered.
+
+<ImageGrid mode="square-thumbnails" xs={{cols: 2, gap: "16px"}} md={{cols: 4, gap: "16px"}} images={activismImages} />
+
+## Conceptual
+
+This style is primarily utilized for Network State Press articles and presentations, encompassing a journalistic approach along with the inclusion of stock photography. It is designed to align with fundamental Logos concepts, such as human rights, privacy, and civil liberties. While free resources are preferred, the use of licensed materials can be explored.
+
+<ImageGrid mode="square-thumbnails" xs={{cols: 2, gap: "16px"}} md={{cols: 4, gap: "16px"}} images={conceptualImages} />
--- a/docs/visual-language/typography/_category_.json
+++ b/docs/visual-language/typography/_category_.json
@ -0,0 +1,4 @@
+{
+  "position": 3,
+  "label": "Typography"
+}
--- a/docs/visual-language/typography/non-web-environment.md
+++ b/docs/visual-language/typography/non-web-environment.md
@ -0,0 +1,29 @@
+---
+title: Non-web environments
+sidebar_position: 2
+---
+
+# Non-web environments
+
+In non-web and print environments, we suggest using free/open-source fonts or the default fonts provided by the most common operating systems and devices. These fonts should follow the following criteria:
+
+- Be close to the default fonts already provided on the most common operating systems and devices, to ensure consistency and ease of access.
+- Have an extensive character set to support various languages and scripts.
+
+We recommend the following free/open-source fonts that meet the above criteria:
+
+| Font Type | Suggested Default Font Family |
+| --- | --- |
+| Mono | [Iconsolata](https://fonts.google.com/specimen/Inconsolata?query=inconso), [Fira Mono](https://fonts.google.com/specimen/Fira+Mono), [JetBrains Mono](https://www.jetbrains.com/lp/mono/), [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) |
+| Serif | [Lora](https://fonts.google.com/specimen/Lora) |
+| Sans-Serif | [Inter](https://fonts.google.com/specimen/Inter) |
+
+## Examples
+
+### HIO podcast type stack
+
+![HIO-Typestack-02.png](/HIO-Typestack-02.png)
+
+### Logos Podcast type stack
+
+![Untitled](/TypographyNonWeb1.png)
--- a/docs/visual-language/typography/overview.mdx
+++ b/docs/visual-language/typography/overview.mdx
@ -0,0 +1,12 @@
+---
+title: Overview
+sidebar_position: 0
+---
+
+import DocCardList from '@theme/DocCardList';
+
+# Typography
+
+Typography is a fundamental element in our design philosophy, where the message takes precedence over fonts. We prioritize accessibility, simplicity, and functionality, relying on default typefaces across various operating systems and devices for consistency. Our inspiration from underground culture and the DIY ethos shapes a brand accessible and reproducible by all, regardless of tools or location. Our approach emphasizes readability, addressing contrast, tracking, leading, and dynamic text for all users, including those with visual impairments. Typeface selection aligns with these principles, prioritizing accessibility, simplicity, and functionality through default system fonts, ensuring cross-platform compatibility and maintaining a neutral and dependable brand presentation. Typography, in our view, is the art of balancing typeface, size, style, and spacing to optimize readability, reflecting our dedication to content accessibility and a consistent, reliable message.
+
+<DocCardList className="DocCardList--no-overview"/>
--- a/docs/visual-language/typography/web-environment.mdx
+++ b/docs/visual-language/typography/web-environment.mdx
@ -0,0 +1,43 @@
+---
+title: Web Environments
+sidebar_position: 1
+---
+
+import { StorybookDemo } from '@site/src/components/mdx';
+
+# Web Environments
+
+In our web environments, we lean toward a concept inspired by the decentralized mental model. Instead of imposing a singular font choice, we rely on the default web fonts present on users' browsers and systems. Our strategy offers key advantages:
+
+1. **Accessibility**: We design in a way that works harmoniously with whatever default font a user's system provides. Our commitment is to ensure that our design retains its integrity and functionality regardless of the specific default font. By not making an overriding decision, we respect the inherent variability and trust that our content will be consistently presented and accessed.
+2. **Optimization**: Bypassing the need for additional font downloads ensures quicker page load times, crucial for those with limited internet bandwidth or in challenging network conditions.
+
+By specifying the font category (serif, sans-serif, or mono) in your CSS, the user's operating system is allowed to determine the best font choice. This approach also guarantees extensive language script support.
+
+```
+/**
+ * System font stack for sans-serif fonts
+ *
+ * `-apple-system` ('San Francisco' font) – Support Safari 9+ macOS and iOS, Firefox macOS
+ * `BlinkMacSystemFont` ('San Francisco' font) – Chrome 48+ macOS and iOS
+ * `Segoe UI` – Windows Vista & newer
+ * `Roboto` – Android 4.0+
+ * `Lato` – Wikimedia Design choice, OFL licensed
+ * `Helvetica, Arial, sans-serif` – (Generic) Web fallback
+ * Note that standard `system-ui` value has resulted in unresolved side-effects in certain OS/language combinations as of now and is therefore not included.
+ */
+
+font-family: Serif
+```
+
+| Font Type | Suggested Default Font Family |
+| --- | --- |
+| Mono | Consolas (Windows), Monaco (macOS), DejaVu Sans Mono (Linux) |
+| Serif | Georgia (Windows), Times New Roman (macOS), DejaVu Serif (Linux) |
+| Sans-Serif | Segoe UI (Windows), Helvetica (macOS), DejaVu Sans (Linux) |
+
+## Examples
+
+### LSD type stack
+
+<StorybookDemo name="Typography" docId="themeprovider--docs" storybookUrl="https://main--63e4f71c39dc65c5c703c1e8.chromatic.com" storyId="themeprovider--typography" globalTypes={{}} componentProperties={[]} globalControls={["themeFont"]} />
--- a/docs/voice/index.md
+++ b/docs/voice/index.md
@ -0,0 +1,54 @@
+---
+title: Voice
+displayed_sidebar: main
+pagination_label: Voice
+sidebar_position: 3
+---
+
+## Overview
+
+Our Mode of Presentation is our unmistakable way of communicating. It ensures we are consistent and recognisable wherever we are. Like our visual identity, our Mode of Presentation builds trust with our audience and community and helps people connect with the Logos culture and ideas.
+
+**The following guidelines are for strategists, creatives, presenters, and anyone communicating on behalf of Logos.**
+
+## Why Logos is communicating
+
+**The Logos mission is to cultivate a community that will build the technology, culture, and governance framework necessary to launch network states.**
+
+Logos is dedicated to the cause of human liberty, and we believe launching netwok states is the best way to ensure liberty exists for generations to come.
+
+### Therefore:
+
+Logos’ primary reason for communicating is to attract value-aligned people who are ready and willing to join us in building a free and prosperous future.
+
+We attract value-aligned people by being honest about our intentions when we communicate. We lead with our mission and [principles](https://status.im/about/).
+
+## How we communicate
+
+### Be Clear
+
+Our only steadfast rule is whenever we communicate, we are clear. Use straightforward, simple language and structure. Avoid jargon. Write in good, professional, non-academic Brittish English. Remember that the purpose of communicating is to be understood by the intended audience.
+
+### Tone of voice
+
+Sincere
+
+We are clear in our message. We are honest and earnest. We do not hide behind innuendo. We do not inflate for shock value, nor do we couch. We say things as they are. We’re straight-shooters.
+
+Bold
+
+What we are trying to accomplish puts us at odds with some of the most powerful entities on the planet. Despite that, we communicate with courage. We are confident in our convictions without getting into a flame war or bad-mouthing other projects. We take a stand for things we believe in.
+
+Optimistic
+
+Logos exists to help create a brighter future for all of humanity. Thus, the assumptions are *there will be a future*, and *peace and prosperity are possible*. We are upholding, advancing, and building, not fighting, hindering, or breaking. We do not doompost or brood.
+
+Deliberate
+
+On websites and blog posts, and during presentations our tone leans serious and sober. We present ourselves as competent, reliable, and committed.Sometimes we take that down a notch or two on socials.
+
+### Style:
+
+**Language**: British English
+
+**Style guide**: [Oxford](https://www.ox.ac.uk/sites/files/oxford/media_wysiwyg/University%20of%20Oxford%20Style%20Guide.pdf), including Oxford Comma
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@ -0,0 +1,144 @@
+// @ts-check
+// Note: type annotations allow type checking and IDEs autocompletion
+require('dotenv').config()
+
+const downloadRemoteContent =
+  process.env.SKIP_DOWNLOAD !== '1' && process.env.NODE_ENV !== 'production'
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+  title: 'Waku',
+  url: 'https://guide.waku.org/',
+  baseUrl: '/',
+
+  markdown: {
+    mermaid: true,
+  },
+
+  // Even if you don't use internalization, you can use this field to set useful
+  // metadata like html lang. For example, if your site is Chinese, you may want
+  // to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+
+  presets: [
+    [
+      '@acid-info/logos-docusaurus-preset',
+      /** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
+      ({
+        businessUnit: 'Waku',
+        customSiteConfig: true,
+        theme: {
+          name: 'default',
+          options: {
+            customCss: [require.resolve('./src/css/custom.scss')],
+            docs: {
+              default: {
+                sidebar: {
+                  hide: false,
+                },
+              },
+            },
+          },
+        },
+        docs: {
+          routeBasePath: '/',
+          sidebarPath: require.resolve('./sidebars.js'),
+        },
+        og: {},
+      }),
+    ],
+  ],
+  plugins: [
+    [
+      '@docusaurus/plugin-ideal-image',
+      {
+        quality: 100,
+        max: 1080,
+        min: 400,
+        steps: 2,
+        disableInDev: true,
+      },
+    ],
+    (downloadRemoteContent && [
+      '@acid-info/docusaurus-remote-content',
+      /** @type {import('@acid-info/docusaurus-remote-content').PluginOptions} */
+      ({
+        remote: {
+          type: 'zip',
+          url:
+            'https://github.com/acid-info/guide.logos.co/archive/refs/heads/develop.zip',
+          dir: 'guide.logos.co-develop',
+        },
+        outDir: 'docs',
+        sourceDir: 'docs',
+        keepLocal: ['./visual-language/logo.mdx'],
+        keepStatic: ['waku/**/*'],
+      }),
+    ]),
+  ],
+
+  themes: [
+    [
+      '@acid-info/logos-docusaurus-brand-guidelines-theme',
+      /** @type {import('@acid-info/logos-docusaurus-brand-guidelines-theme').ThemeOptions} */
+      ({
+        customCss: [],
+      }),
+    ],
+  ],
+
+  themeConfig:
+    /** @type {import('@acid-info/logos-docusaurus-preset').ThemeConfig} */
+    ({
+      navbar: {
+        hideOnScroll: true,
+        items: [
+          {
+            type: 'search',
+          },
+        ],
+      },
+      footer: {
+        copyright: 'Waku @2023<br/>All Rights Reserved.',
+        links: [
+          {
+            items: [
+              {
+                href: 'https://twitter.com/waku_org',
+                label: 'Twitter',
+              },
+              {
+                href: 'https://discord.waku.org/',
+                label: 'Discord',
+              },
+              {
+                href: 'https://docs.waku.org',
+                label: 'Docs',
+              },
+              {
+                href: 'https://github.com/waku-org',
+                label: 'Github',
+              },
+            ],
+          },
+          {
+            items: [
+              {
+                href: 'https://jobs.status.im/',
+                label: 'Work with us',
+              },
+              {
+                href: '/terms',
+                label: 'Terms & conditions',
+              },
+            ],
+          },
+        ],
+      },
+    }),
+}
+
+module.exports = config
--- a/package.json
+++ b/package.json
@ -0,0 +1,54 @@
+{
+  "name": "logos-docs-template",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@acid-info/docusaurus-remote-content": "^1.0.0-alpha.124",
+    "@acid-info/logos-docusaurus-brand-guidelines-theme": "^1.0.0-alpha.123",
+    "@acid-info/logos-docusaurus-preset": "^1.0.0-alpha.121",
+    "@docusaurus/plugin-ideal-image": "2.4.1",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mdx-js/react": "^1.6.22",
+    "clsx": "^1.2.1",
+    "dotenv": "^16.0.3",
+    "prism-react-renderer": "^1.3.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "sass": "^1.62.1",
+    "tsdx": "^0.14.1"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.4.1",
+    "@tsconfig/docusaurus": "^1.0.5",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.7.4"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=16.14"
+  }
+}
--- a/sidebars.js
+++ b/sidebars.js
@ -0,0 +1,12 @@
+// ref: https://docusaurus.io/docs/sidebar/multiple-sidebars#generating-pagination
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+  main: [
+    {
+      type: 'autogenerated',
+      dirName: '.',
+    },
+  ],
+}
+
+module.exports = sidebars
--- a/src/components/mdx/index.tsx
+++ b/src/components/mdx/index.tsx
@ -0,0 +1,2 @@
+export * from '@acid-info/logos-docusaurus-brand-guidelines-theme/lib/client/components/mdx'
+export * from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
--- a/src/index.d.ts
+++ b/src/index.d.ts
@ -0,0 +1,5 @@
+declare module '*.scss'
+
+declare module '@theme/IdealImage' {
+  export default function IdealImage(props: any): JSX.Element
+}
--- a/static/HIO-Typestack-02.png
+++ b/static/HIO-Typestack-02.png
--- a/static/Presentation-kit-slide1.png
+++ b/static/Presentation-kit-slide1.png
--- a/static/TypographyNonWeb1.png
+++ b/static/TypographyNonWeb1.png
--- a/static/Untitled-1.png
+++ b/static/Untitled-1.png
--- a/static/Untitled-2.png
+++ b/static/Untitled-2.png
--- a/static/Untitled-3.png
+++ b/static/Untitled-3.png
--- a/static/Untitled-4.png
+++ b/static/Untitled-4.png
--- a/static/Untitled-5.png
+++ b/static/Untitled-5.png
--- a/static/Untitled-6.png
+++ b/static/Untitled-6.png
--- a/static/Untitled-7.png
+++ b/static/Untitled-7.png
--- a/static/Untitled-8.png
+++ b/static/Untitled-8.png
--- a/static/Untitled.png
+++ b/static/Untitled.png
--- a/static/anatomy/anatomy.jpg
+++ b/static/anatomy/anatomy.jpg
--- a/static/anatomy/brand-guidelines.jpg
+++ b/static/anatomy/brand-guidelines.jpg
--- a/static/gallery/1.png
+++ b/static/gallery/1.png
--- a/static/gallery/10.png
+++ b/static/gallery/10.png
--- a/static/gallery/11.png
+++ b/static/gallery/11.png
--- a/static/gallery/12.png
+++ b/static/gallery/12.png
--- a/static/gallery/13.png
+++ b/static/gallery/13.png
--- a/static/gallery/14.png
+++ b/static/gallery/14.png
--- a/static/gallery/15.png
+++ b/static/gallery/15.png
--- a/static/gallery/16.png
+++ b/static/gallery/16.png
--- a/static/gallery/17.png
+++ b/static/gallery/17.png
--- a/static/gallery/18.png
+++ b/static/gallery/18.png
--- a/static/gallery/19.png
+++ b/static/gallery/19.png
--- a/static/gallery/2.png
+++ b/static/gallery/2.png
--- a/static/gallery/20.png
+++ b/static/gallery/20.png
--- a/static/gallery/21.png
+++ b/static/gallery/21.png
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`STORYBOOK_URL=https://main--63e4f71c39dc65c5c703c1e8.chromatic.com/`