MRS Design System

A clean, modern, and scalable Design System built from scratch with HTML, CSS, and Vanilla JavaScript.

🎯 Overview

R.V. Design System provides a solid foundation for building consistent, accessible, and scalable web interfaces. It follows modern design system principles using semantic tokens instead of hardcoded values.

🚀 Live Demo

→ View Live Demo

📸 Preview

✨ Features

• Semantic Colour Tokens (Background, Foreground, Primary, Surface, Danger, etc.)
• Typography System – 3 font families (Archivo Black, Inter, JetBrains Mono)
• Consistent Spacing Scale with visual references
• Reusable UI Components (Buttons, Badges, Cards, Progress bars, etc.)
• Form Elements with proper accessibility and styling
• Design Tokens documentation with CSS Custom Properties
• Interactive elements (copy to clipboard, navigation, mobile menu)
• Fully responsive & accessible

🛠️ Built With

• HTML5
• CSS3 (Custom Properties / CSS Variables)
• Vanilla JavaScript
• Google Fonts (Archivo Black, Inter, JetBrains Mono)
• Mobile-first approach

📌 Project Context

This is my second major project in the Codecademy Front-End Developer career path. It demonstrates my ability to move beyond single-page websites and create reusable, maintainable design systems.

🚀 Getting Started

1. Clone the repository
2. Open index.html, style.css and script.js in your browser
3. Explore the different sections (Colours, Typography, Spacing, Components...)

---

Made with ❤️ by MarieReine26

© 2026 MarieReine Studio