docs: Add CSS styleguide and rename development files

packages/docs/docs/development/css+styleguide.md

@@ -0,0 +1,61 @@
+# CSS styleguide for Team Arbeidsflate
+
+This minimalistic style guide is designed to ensure consistency and scalability in our frontend projects utilizing CSS Modules. By adhering to these guidelines, we aim to improve maintainability and readability across our codebase.
+It serves to make working with the css easy, and is by no means yet another strict and idiosyncratic book of css full of do's and dont's.
+
+## Naming Conventions
+
+### CSS Classes
+
+- Use **camelCase** for class names to maintain consistency with JavaScript naming conventions.
+
+  ```css
+  /* Example */
+  .profileCard { ... }
+  .userInfo { ... }
+  ```
+
+### CSS Module Files
+Name your CSS module files using the pattern [nameOfComponent].module.css, matching the name of the JSX component they style.
+
+Place the *.module.css file in the same folder as its corresponding JSX component to keep styles closely tied to their components.
+
+A *.module.css file should not be shared among components to ensure styles are encapsulated. The exception is a global module (e.g., global.module.css) for defining global or root variables, which is only indirectly imported.
+
+Encapsulation: Keep styles encapsulated within their respective component module to avoid unintended side effects and maintain component isolation.
+
+Global Styles: Utilize a global CSS module for defining root-level CSS custom properties (variables) and global styles. This approach promotes consistency and reusability across components.
+
+  ```css
+  /components
+    /Button
+        Button.tsx
+        button.module.css
+    /Header
+        Header.tsx
+        header.module.css
+  ```
+### CSS Units
+
+1. For an adaptive design, prefer `rem` over `em` (for simplicity) and `px` (for scalability).
+2. For fix-sized elements which is critically important for the design to be consistent, regardless of zoom and real estate.
+   Examples:
+    - borders and shadows
+    - Breakpoints in Media Queries
+    - Lines and dividers
+    - Icons and small Images (alternatively use `%`), where scaling could distort the image or make it too small/large relative to other elements. 
+    - Fixed Layout Components
+    - Minimum and maximum sizes: Using px for these limits can provide a consistent baseline that doesn't vary with user settings or screen sizes.
+3. Use `0` instead of `0px` for zero-sized elements. 
+
+### Colors
+Don't use color keywords (`e.g. color: red;`), instead use hexadecimal color codes.
+CSS Level 1, Level 2 and Level 3 indicate that using color names is perfectly acceptable, but which ones are acceptable varies depending on the specification.
+Copy from Figma will be in hex or `rgba` most likely anyway.
+Hex should be in lowercase.
+
+### Property order
+For easier readability, prefer to sort the properties with a ruleset alphabetically, this will have the added bonus (for most cases) of grouping related properties together.
+
+
+