docs: add principles page

Author: carwack

docs/.vitepress/config.js

@@ -41,7 +41,8 @@ function getSetupSidebar() {
       children: [
         { text: 'Chakra UI Vue', link: '/' },
         { text: 'Getting Started', link: '/pages/getting-started/getting-started' },
-        { text: 'Plugin Options', link: '/pages/getting-started/plugin-options' }
+        { text: 'Plugin Options', link: '/pages/getting-started/plugin-options' },
+        { text: 'Principles', link: '/pages/getting-started/principles' }
       ]
     },
     {

docs/pages/getting-started/principles.md

@@ -0,0 +1,34 @@
+---
+title: Design Principles
+description: Principles that keep Chakra's components fairly consistent
+---
+
+Chakra UI is established on principles that keep its components fairly
+consistent. Understanding these concepts will help you better contribute to
+Chakra UI.
+
+Our goal is to design simple, composable components that cater to real-life UI
+design problems. In order to do that, we developed a set of principles that help
+us always be on that path.
+
+- **Style Props:** All component styles can be overridden or extended via style
+  props to reduce the use of `css` prop or `styled()`. Compose new components from `Box`.
+
+- **Simplicity:** Strive to keep the component API fairly simple and show real
+  world scenarios of using the component.
+
+- **Composition:** Break down components into smaller parts with minimal props
+  to keep complexity low, and compose them together. This will ensure that the
+  styles and functionality are flexible and extensible.
+
+- **Accessibility:** When creating a component, keep accessibility top of mind.
+  This includes keyboard navigation, focus management, color contrast, voice
+  over, and the correct `aria-*` attributes.
+
+- **Dark Mode:** Make components dark mode compatible. Use `useColorMode` hook
+  to handle styling. [Learn more about dark mode](/docs/features/color-mode).
+
+- **Naming Props:** We all know naming is the hardest thing in this industry.
+  Generally, ensure a prop name is indicative of what it does. Boolean props
+  should be named using auxiliary verbs such as `does`, `has`, `is` and
+  `should`. For example, `Button` uses `isDisabled`, `isLoading`, etc.