Dev

pages/_meta.js

@@ -4,6 +4,7 @@ const meta = {
     guidance: "Guidance",
     component: "Component",
     typography: "Typography",
+    colors: "Colors",
 }
 
 export default meta;

pages/colors.mdx

@@ -0,0 +1,73 @@
+# Color Guideline
+
+## Introduction
+
+The color system is designed to establish a cohesive visual identity for our FOSS UOK community. It ensures that all components across the website maintain consistency, accessibility, and usability. The palette includes primary, secondary, neutral, and alert colors, with defined variants for flexibility.
+
+## Color Palette
+
+### Primary Colors
+
+These are the primary colors used to establish the visual identity and highlight important elements of the design.
+
+- Background Dark Blue: `#0f172a`  
+
+  Used for the primary background of the website, providing a bold and immersive base.
+<div style={{ backgroundColor: '#0f172a', width: '50px', height: '50px', display: 'inline-block', margin: '20px', borderRadius: '5px' }}></div>
+
+- Text White: `#ffffff`  
+
+  Used for the main text and headings to ensure high contrast and readability against the dark background.
+<div style={{ backgroundColor: '#ffffff', width: '50px', height: '50px', display: 'inline-block', margin: '20px', borderRadius: '5px' }}></div>
+
+### Secondary Colors
+
+Secondary colors complement the primary palette, adding contrast and emphasis.
+
+- Button Purple: `#9333ea`  
+
+  Used for primary action buttons to grab attention.
+<div style={{ backgroundColor: '#9333ea', width: '50px', height: '50px', display: 'inline-block', margin: '20px', borderRadius: '5px' }}></div>
+
+- Hover Purple: `#7c25cc`  
+
+  A slightly darker shade of purple for hover states on buttons to indicate interactivity.
+<div style={{ backgroundColor: '#7c25cc', width: '50px', height: '50px', display: 'inline-block', margin: '20px', borderRadius: '5px' }}></div>
+
+### Neutral Colors
+
+Neutral colors are used for accents, inactive elements, and text.
+
+- Light Gray: `#bbc2cc`  
+
+  Used for card surfaces or light backgrounds.
+<div style={{ backgroundColor: '#bbc2cc', width: '50px', height: '50px', display: 'inline-block', margin: '20px', borderRadius: '5px' }}></div>
+
+- Medium Gray: `#6b6d72`  
+
+  Used for secondary text, borders, or dividers.
+<div style={{ backgroundColor: '#6b6d72', width: '50px', height: '50px', display: 'inline-block', margin: '20px', borderRadius: '5px' }}></div>
+
+- Dark Gray: `#293041`  
+
+  Used for inactive buttons or subtle text elements.
+<div style={{ backgroundColor: '#293041', width: '50px', height: '50px', display: 'inline-block', margin: '20px', borderRadius: '5px' }}></div>
+
+### Alert Colors
+
+Used for status indicators like success, warnings, or errors.
+
+- Success Green: `#27ae60`  
+
+  Indicates success messages or confirmations.
+<div style={{ backgroundColor: '#27ae60', width: '50px', height: '50px', display: 'inline-block', margin: '20px', borderRadius: '5px' }}></div>
+
+- Warning Yellow: `#f1c40f`  
+
+  Highlights warnings or non-critical alerts.
+<div style={{ backgroundColor: '#f1c40f', width: '50px', height: '50px', display: 'inline-block', margin: '20px', borderRadius: '5px' }}></div>
+
+- Error Red: `#e74c3c`  
+
+  Draws attention to critical errors or issues.
+<div style={{ backgroundColor: '#e74c3c', width: '50px', height: '50px', display: 'inline-block', margin: '20px', borderRadius: '5px' }}></div>

pages/component/_meta.js

@@ -7,7 +7,6 @@ const meta = {
     "modal": "Modal",
     "navigation": "Navigation",
     "footer": "Footer",
-    "typography": "Typography",
 }
 
 export default meta;

pages/typography.mdx

@@ -10,11 +10,15 @@ This guide defines the fonts, sizes, weights, and usage patterns to ensure consi
 - **Fallback Fonts**: `Arial`, `sans-serif`  
   Provide a fallback for environments where the primary font is unavailable.
 
+- **Monospace Font**: `JetBrains Mono`  
+  For code snippets.
+
 **CSS Declaration**
 
 ```css
 :root {
     --font-primary: "Inter", Arial, sans-serif;
+    --font-monospace: "JetBrainsMono";
 }
 ```
 
@@ -122,3 +126,9 @@ p {
     text-align: right;
 }
 ```
+## Accessibility
+
+- Use appropriate heading levels (`<h1>` to `<h6>`).
+- Maintain a minimum 4.5:1 contrast ratio.
+
+