documentation

README.md

@@ -2,12 +2,19 @@
 
 # Welcome to Functional UI Kit
 
-Functional UI Kit is a professionally crafted design system for product design and development teams and individuals. We provide core components you would need in every project, focusing on accessibility, development experience and unified designer-developer experience.
+Functional UI Kit is a professionally crafted design system for design & development teams and individuals. We provide core components you would need in every project, focusing on accessibility, development experience and unified designer-developer experience.
 
 We've made sure that Figma variables and CSS variables work together effortlessly. They share the same names, usage and inheritance structure. This isn't just an extra feature; it's the core approach.
 
 Each Figma variable has a direct counterpart in CSS, so there's no confusion. Your design ideas stay crystal clear as you move into the development phase.
 
+<ul>
+  <li>Website: www.functional-ui-kit.com</li>
+  <li>Storybook: www.functional-ui.github.io/functional-ui-kit</li>
+  <li>Github: www.github.com/functional-ui/functional-ui-kit</li>
+  <li>Npm: www.npmjs.com/package/functional-ui-kit</li>
+</ul>
+
 
 # Setup
 ### Install

src/stories/Introduction.mdx

@@ -47,14 +47,21 @@ import { Default as OptionGroupDefault } from '../components/fui-option-group/fu
 </style>
 
 <div style={{ padding: '20px'}}>
-# Welcome to Functional UI Kit
+<img width="100%" alt="functional-ui-kit-cover" src="https://github.com/functional-ui/functional-ui-kit/assets/10652039/fa34ae50-ae9b-4af7-bcce-ca5393f496f0" style={{borderRadius: '8px'}}/>
+  <h1 style={{marginTop: '20px'}}>Welcome to FUI! let's get started:</h1>
   <p style={{opacity: '0.7'}}>
-    Functional UI Kit is a professionally crafted design system for product design and development teams and individuals. We provide core components you would need in every project, focusing on accessibility, development experience and unified designer-developer experience.
+    Functional UI Kit is a professionally crafted design system for design & development teams and individuals. We provide core components you would need in every project, focusing on accessibility, development experience and unified designer-developer experience.
 
     We've made sure that Figma variables and CSS variables work together effortlessly. They share the same names, usage and inheritance structure. This isn't just an extra feature; it's the core approach.
 
     Each Figma variable has a direct counterpart in CSS, so there's no confusion. Your design ideas stay crystal clear as you move into the development phase.
   </p>
+  <ul>
+    <li>Website: www.functional-ui-kit.com</li>
+    <li>Storybook: www.functional-ui.github.io/functional-ui-kit</li>
+    <li>Github: www.github.com/functional-ui/functional-ui-kit</li>
+    <li>Npm: www.npmjs.com/package/functional-ui-kit</li>
+  </ul>
 </div>
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--fui-space-xlg)'}}>
   <div className='component-example-wrapper'>

src/stories/theming.mdx

@@ -50,11 +50,17 @@ import { Default as ButtonDefault } from '../components/fui-button/fui-button.st
 </style>
 
 ### Theming
-Theme FUI colors by overriding CSS variables.
+Theme FUI colors, spacing, text & shape by overriding CSS variables.
 Make sure you are overriding the CSS variables only after importing FUI's styles.
 The variables operate on an inheritance model, ensuring a cohesive organizational structure. Overriding one variable will have consequences on other variables.
 
 We recommend concentrating on [Theme Color variables](https://github.com/functional-ui/functional-ui-kit/blob/main/src/css/theme-colors.css), [Global Color variables](https://github.com/functional-ui/functional-ui-kit/blob/main/src/css/global-colors.css) and [Layout variables](https://github.com/functional-ui/functional-ui-kit/blob/main/src/css/layout.css) for effective theming:
+
+Make sure you apply your style **after Funcional UI Kit's style**, otherwise your overrides will not take affect:
+```css
+import 'functional-ui-kit/style';
+import 'your-style';
+```
 ```css
 :root {
   --fui-color-badge-blue-bg: var(--fui-color-green-50);