Update design-system.md

Author: apoorva-srivastav

docs/design-system.md

@@ -1,4 +1,5 @@
 
+
 ---
 id: design-system
 title: Design System Integration
@@ -8,13 +9,15 @@ sidebar_label: Design System Integration
 ## Introduction
 A consistent design system is integrated to the all of the app types by using `nextui` and `theme.js` file  which can be generated by using the structure defined by [nextui create theme](https://nextui.org/docs/theme/typescript#create-theme) docs and using nextui `createTheme` method. 
 
-`nextui` is a library that uses stitches internally to style components in the react ecosystem. It allows users to write styles in css within the js files. It also has components and provides customized theming. To know more about nextui visit [nextui org](https://nextui.org/docs/guide/getting-started) docs.
+`nextui` is a library that uses [stitches](https://stitches.dev/) internally to style components in the react ecosystem. It allows users to write styles in css within the js files. It also has components and provides customized theming. To know more about nextui visit [nextui org](https://nextui.org/docs/guide/getting-started) docs.
 
-`nextui` provides `<NextUIProvider>` which is a theme provider component which accepts a `theme` prop (created using createTheme nextui method and json) which overrides the nextui default theme. The `<NextUIProvider>` is kept at the highest level in the component chain. This allows all of the components within it to inherit the `theme` prop. In case of our Next.js app the `<NextUIProvider>` is added in `src/pages/_app.js`.
+`nextui` provides `<NextUIProvider>` which is a theme provider component which accepts a `theme` prop (created using createTheme nextui method and json) which overrides the nextui default theme. 
 
 ## How to use
-1. Create a theme using the structure defined by [nextui create theme](https://nextui.org/docs/theme/typescript#create-theme)  and store it as `src/themes/theme.js`.
-2. Now in all `nextui` styled components, theme prop is available to use as following:
+1. The `<NextUIProvider>` is kept at the highest level in the component chain. This allows all of the components within it to inherit the `theme` prop. In case of our Next.js app the `<NextUIProvider>` is added in `src/pages/_app.js`.
+2. `nextui` provides a default theme that can be used out of the box.
+3. To customize, create a theme using the structure defined by [nextui create theme](https://nextui.org/docs/theme/typescript#create-theme) and wrap it in `createTheme` nextui method and store it as `src/themes/theme.js`.
+4. Now in all `nextui` styled components, theme props is available to use as following:
 ```jsx
 export const Button = styled('button', {
   fontSize: '$3',
@@ -24,8 +27,13 @@ export const Button = styled('button', {
   border: '2px solid black',
   borderRadius: '$1',
   display: 'block',
-  length: '1' // this property is added temporarily for the issue of nextui styled method with typescript v4.6.2. Will not be required once the issue is resolved.
+  length: '1'
 });
 ``` 
 
+## Know Issue
+The `length` property used in styled method is added temporarily for the issue of nextui styled method with typescript v4.6.2. Will not be required once the issue is resolved. 
+Issue: https://github.com/modulz/stitches/issues/947
+
+---
 More about cutomizing theming can be found in [nextui customize theme](https://nextui.org/docs/theme/customize-theme) docs.