# MSPACEZ Design System

Version 1.1 · Egypt and Saudi Arabia · English and Arabic. v1.1 loosens the system: composition modes, optional devices, off-white on red, photo hero, occasion art direction and a full 9:16 video system.

## Brand idea
**Space, measured for growth.** MSPACEZ gives companies space that is ready, clear and measured — private offices, virtual offices, meeting and training rooms across 16+ branches, trusted by 7,000+ clients since 2014. The identity communicates like a well-drawn plan: exact, calm and useful, with one red signal that says *this is the thing that matters*.

## Design principles
1. **Composed, not templated.** The 1/20 margin and 12-column grid are always there and usually invisible; each surface picks one of six composition modes.
2. **One signal.** One red event per surface — marker, field or numeral. Red is never body text.
3. **Light, then decisive.** Headlines start in Light and land one Bold phrase — in print and in motion.
4. **Space is the hero.** Real MSPACEZ rooms lead whenever a good photograph exists; design steps back.
5. **Complete without a photo.** Graphic posts are finished compositions — type, numerals, fields, icons, plans.
6. **Information when it helps.** Plans, dimensions and specs are specialist tools for capacity, size and location.
7. **Two languages, two markets, one system.** Arabic written natively and mirrored; Egypt colloquial, KSA MSA.

## Core identity (locked)
- Logo and symbol: `assets/Logo/MSPACEZ-Logo-Master.svg`, `MSPACEZ-Icon-Master.svg` — never redrawn. No Arabic wordmark exists; do not invent one.
- Colour: `brand-red` #F05C49 and `brand-black` #000000. Neutrals by role: `paper` #F7F5F2, `white`, `mist` #EFEEEB, `line` #D9D9D9, `silver` #A6A6A6, `gray` #6B6B6B, `graphite` #404040, `charcoal` #1C1C1C. UI-only: `success` #1E7A4C, `warning` #8A5300, `red-tint` #FDECE9.
- Type: Montserrat (Latin) and Alexandria (Arabic), full variable families 100–900 (weights used 300–700). All required weights were available, so nothing was approximated.

## Usage rules (short)
- Display type on `brand-red` is `paper` off-white (preferred; 3.05:1, large text only); white or black allowed. Small text on red (labels, ≤ 25-word body) is `brand-black`. Never white/off-white body on red; never red body text; red type only at display size.
- The logo sits directly only on white or `paper`. On red, black or photography use the master on an off-white plate — or no logo. Official white / one-colour masters are an owner asset; never recolour.
- Signature levels: info block (commercial), light sign-off (symbol + one line), or none (photo hero, greetings).
- `signal` (= brand red) marks one fact per surface: the marker, the active tab, the error border.
- Components use `radius-0`; only inputs and chips use `radius-xs` (2 px). No shadows except `shadow-overlay` on UI overlays.
- Structure lines: `border-rule` 1.5 px black on top of info blocks, spec cells, tables and cards; `border-hairline` for dividers.
- Motion: nine verbs (draw, reveal, slide, mask, cut, count, expand, crop, track); video timing hierarchy 150 ms → 3.5 s; UI 160 / 240 ms; ease cubic-bezier(.2, 0, 0, 1). Video: 9:16 grid, caption modes A/B/C, Reel kit, end cards A–E.

## How this system is organised
Boards 01–24 follow the brand book order: Brand idea & principles, Core identity, Colour, Typography, Layout & grid, Composition modes, Graphic devices, Photography, Static design, Social, Carousel, Advertising, Motion, Video system (9:16), Reel kit, Video in sequence, Occasions, Digital · Web, UI components, Corporate, Presentation · Physical, Do / Don’t, Tokens, Final brand examples. Group 25 holds the coded components; `guidelines/` holds PRINCIPLE · RULE · WHEN · WHEN NOT · DO · DON’T · EXAMPLE for every system; `tokens.json` is the single source of values; `components/bundle.css` implements the components.

## Sources and samples
Reference files (“The Plan”, “Inside Presence”, “Grid & Signal”) informed principles only — plan drawings as communication, measured annotation, human presence, interface chips. None of their colours, facts, prices, typography or claims are used. Names, prices, offers, dates and legal text shown as “sample” or “placeholder” must be replaced with approved content.

## Open owner decisions
Official reversed (white) and one-colour logo masters · custom sonic logo · presenter and member footage · signage vector artwork and site surveys · consented people photography and KSA branch photography · approved prices and offers · Arabic numeral policy (N-7) · endorsement line colour in the master (#231F20) · legal and finance text for documents.

## This export

- `README.md` — the brand book (start here) · `guidelines/` — 20 sections with Principle · Rule · When · When not · Do · Don't · Example
- `tokens.json` — single source of values · `tokens.css` — the same tokens as CSS custom properties (+ motion timings)
- `components/` — 24 boards (`S01…S24`, open `preview.html` in a browser), 22 coded components (`preview.html` + `README.md`), `bundle.css`, `Cover/`
- `fonts/` — Montserrat and Alexandria variable WOFF2 (100–900, SIL OFL)
- `assets/Logo/` — official SVG masters, original PDF masters (`source-pdf/`), legacy PNG references · `assets/Photography/` — branch photography
- `design-system.json` — the artifact index