import { Meta } from '@storybook/addon-docs/blocks';

![](./CoverBmsUI.png)

<Meta title="Foundation/Principles" />

# <img src="./BmsIcon.png" /> Principles

The principle of bms UI is to provide a unique Design System for the Sipa group, which is solely dedicated to the Back Office tools of the group. Its goal is to limit the use of the Vue Framework and to offer a unique approach in interface design and construction in order to streamline costs and provide uniform interfaces to users.

## Focused

bms UI focuses on the essentials, we concentrate on what is useful for interfaces and only what is necessary, we aim to offer a simple and effective Design System.

## Design System by constraint

A constraint-based design system is designed to offer a consistent user experience across all products that use it. By limiting possible interpretations, this type of design system provides a clear and consistent logic that facilitates understanding and use of the products. Constraints can be applied to visual elements such as colors, typography, and font sizes, as well as interactive elements such as buttons and menus. By using a constraint-based design system, users can interact with products with confidence, knowing that the design elements will be consistent and predictable.

## Documentation of the **bms UI** Design System

> **Mission** – Provide a **single Design System** dedicated to the Sipa group’s Back‑Office tools, limiting the use of the Vue framework and offering a constraint‑driven approach to interface design and construction. Goal: reduce costs, ensure visual and functional consistency, and simplify maintenance.

---

### 1️ Context & Objectives

- **Who?**  
  The bms UI Design System is actually maintained by the frontend team of **bms**.

- **Why?**
  - Uniform the look‑and‑feel of internal products and applications.
  - Limit Vue code sprawl and avoid ad‑hoc solutions.
  - Speed up development with reusable, tested components.

- **Target audience**  
  Front‑end developers, designers, QA engineers, project managers, and anyone involved in creating or maintaining Back‑Office interfaces.

### 2️ Core Principles

#### 2.1 Focused – Essentials First

> _“We concentrate on what truly matters for interfaces, nothing superfluous.”_

- **Functional minimalism** – Each component must solve a clearly identified need.
- **Dependency pruning** – Keep external imports to a minimum to reduce bundle size.
- **Concise documentation** – Every component includes essential props, available slots, and a usage example.

#### 2.2 Design System by Constraint – Constraint as a Cohesion Lever

> _“By limiting possible interpretations, we create a clear and predictable logic.”_

| Domain           | Applied Constraints                                        |
| ---------------- | ---------------------------------------------------------- |
| **Colors**       | Restricted palette – no free‑form colors.                  |
| **Typography**   | One font families, predefined sizes.                       |
| **Spacing**      | Margin/padding scale based on a 8 px step.                 |
| **Interactions** | Standardised states (default, hover, focus, disabled).     |
| **Behavior**     | Uniform Vue API (`v-model` where applicable, named slots). |

These constraints are **declarative** – they’re baked directly into components (e.g., `mode="danger"` to have a red button), preventing stylistic drift.

### 3️ Project Architecture

- **Single export** – `import BmsButton from '../components/button/BmsButton.vue';`
- **Integrated Storybook** – Each component has a `*.stories.js` file showcasing the UI and the props & slots for each component.```
- **Typescript components** - Each component as typed props & events, and the relevant types are exported by the library (e.g. TableHeader, Caption, etc.)

### 4️ Usage Guide

Installation

Gitlab documentation https://gitlab.ouest-france.fr/sipa-ouest-france/platform/platform-library-vuejs-bms#installation

### 5️ Quick FAQ

- **Can I add a custom color?**  
  **Answer:** No – all colors must come from the defined palette. If a legitimate need arises, open a **Jira** ticket.

- **How do I handle a new breakpoint?**  
  **Answer:** There are no breakpoints – bmsUI only provides desktop‑only interfaces.

- **Does the design system support dark mode?**  
  **Answer:** No – theming is not available at this time.

### 6️ Contact & Support

- **Teams**: [#🎨bmsUI](https://teams.microsoft.com/l/channel/19%3Au9dPXr-JjoRoaLat-EyS-QEKit1ZzUwQ7G0VrzvDkTE1%40thread.tacv2/%F0%9F%8E%A8bmsUI?groupId=677fd2f9-de86-4bf9-a00c-71817f033ad3&tenantId=a59e9cc9-4ed4-43c4-9f1e-ca78d44b0072&ngc=true&allowXTenantAccess=)
- **Issues**: [#Jira] (⚠️ WIP)
- **Gitlab**: [Gitlab](https://gitlab.ouest-france.fr/sipa-ouest-france/platform/platform-library-vuejs-bms)
