https://github.com/m2s2-engineering-group/m2s2-design-system

The M²S² Design System is a production-driven UI system built for developing real world applications using modern web frameworks. It provides a foundation for building consistent, scalable user interfaces without slowing down as systems grow.
https://github.com/m2s2-engineering-group/m2s2-design-system

angular design-system tokens

Last synced: about 1 month ago
JSON representation

The M²S² Design System is a production-driven UI system built for developing real world applications using modern web frameworks. It provides a foundation for building consistent, scalable user interfaces without slowing down as systems grow.

• Host: GitHub
• URL: https://github.com/m2s2-engineering-group/m2s2-design-system
• Owner: M2S2-Engineering-Group
• License: mit
• Created: 2026-05-07T03:07:41.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2026-05-07T03:07:42.000Z (about 2 months ago)
• Last Synced: 2026-05-07T04:40:31.585Z (about 2 months ago)
• Topics: angular, design-system, tokens
• Homepage: https://storybook.m2s2.io
• Size: 1.95 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  



M2S2 Design System




  Engineering Momentum for UI


  Build consistent, scalable interfaces—faster.





  

  

  



---

## Overview

The **M2S2 Design System** is a production-driven UI system built while developing real applications using Angular, Go, and AWS.

It provides a foundation for building consistent, scalable user interfaces without slowing down as systems grow.

---

## Why This Exists

UI development often starts fast—but slows down over time due to:

- Inconsistent component patterns  

- Duplicated logic and styling  

- Lack of shared structure  

This design system was built to solve those problems by introducing consistency, reusability, and structure from the start.

---

## What’s Included

### 🔧 Component Library

Reusable Angular components designed for real-world applications.

👉 `@m2s2/ng-lib`

---

### 🎨 Design Tokens

Centralized tokens for:

- Colors  

- Spacing  

- Typography  

👉 `@m2s2/tokens`

---

### 🚀 Future Support

- React component library  

- Web Components support  

---

## Design Principles

- **Consistency First**  

  Shared patterns reduce friction and improve maintainability  

- **Reusable by Default**  

  Build once, use everywhere  

- **Production-Driven**  

  Designed from real system needs—not isolated examples  

- **Structure Enables Speed**  

  The right constraints allow teams to move faster over time  

---

## Installation

```bash

npm install @m2s2/ng-lib @m2s2/tokens