# Maisonnue · Design system migration spec

> Source: https://maisonnue.com  ·  Curated by OpenDesign  ·  en

> This site is a strong example of a utilitarian, high-contrast dark UI optimized for mobile consumption of information-heavy content.

## 1. Identity DNA

Maisonnue functions as a digital concierge for real estate investment, its interface a lesson in disciplined restraint. The system is built on a foundation of pure black and white, creating a high-contrast environment where content, not decoration, is the primary focus. This is a guide, not a gallery.

**One-liner:** A dark-themed digital guide for modern property investment and real estate trends.
**Keywords:** property guide · real estate · investment · dark UI · mobile-first
**Analogy:** A digital concierge for real estate investment, presented with a high-contrast, mobile-first interface.

## 2. Color

The color palette is a study in binary clarity, anchored by a pure black background that maximizes legibility for white and muted gray text. A single, sharp red accent cuts through the monochrome to command attention for primary actions and active states.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#717171` | secondary text |
| `--muted` | `#717171` | placeholder |
| `--accent` | `#ff2a2a` | single accent |
| `--line` | `rgba(255, 255, 255, 1)` | divider |

**Color principle:** A high-contrast dark theme anchored by pure black and white, with a sharp red accent for active states.

The principle is one of absolute contrast: a functional palette designed for immediate recognition and no visual ambiguity.

## 3. Typography

Typographic voice is categorical and clear, using geometric and humanist sans-serif families like Montserrat and Arial for their directness. All-caps letterforms define navigation and headings, while body text remains strictly legible on the dark ground.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 20px | 1.2 | 700 | 0.5px | Primary headings and titles |
| body | 16px | 1.5 | 400 | 0px | General body text and list items |

**Type rules:**
- All-caps letterforms are used for primary navigation links and headings.
- Body text is set in a legible sans-serif for readability on dark backgrounds.
- Headings use a slightly heavier weight and increased letter-spacing for emphasis.

## 4. Spacing

Vertical rhythm is governed by a tight, consistent 4px grid, ensuring precise spacing between elements and a structured flow for vertical scrolling.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 10 / 16 / 20 / 24 / 32 / 50 px
- **Rhythm:** A tight, consistent vertical rhythm based on a 4px grid, with clear spacing between list items.

## 5. Surfaces

Surfaces are defined by their shadow and thin border, using depth sparingly to separate content layers on the black canvas. A subtle box-shadow lifts cards from the background, while 1px solid lines act as minimal, functional separators.

- **Radius:** sm 6px · md 10px · lg 15px · pill 100px
- **Shadows:**
  - 0 4px 6px rgba(0, 0, 0, 0.3)
- **Borders:** Thin, 1px solid lines in white or muted gray are used sparingly to define containers and separators.

## 6. Layout

The layout is a strict single-column, centered on the viewport and optimized for a mobile-first, vertical-scrolling experience. This skeleton prioritizes linear consumption, making the interface feel focused and content-forward at any screen width.

- **Container max:** 600px
- **Paragraph max:** 600px
- **Grid:** 1 columns, gutter 20px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A single-column, mobile-first layout centered on the screen, optimized for vertical scrolling.

## 7. Motion & Interaction

Motion is deliberately minimal and functional, confined to standard micro-interactions for hover and click states. Subtle 'ease-in-out' transitions govern state changes, and a quick transform scale-down effect provides tangible press feedback on buttons.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle 'ease-in-out' transitions are applied to interactive elements on hover and click.
  - Transform scales are used for button press feedback.

- **Hover:** Subtle background color shifts or opacity changes on interactive list items.
- **Click:** A quick transform scale-down effect on buttons to simulate a physical press.
- **Transition:** All interactive elements use a standard '0.15s ease-in-out' transition for smooth state changes.
- **Keyboard:** Standard tab focus is visible, but not explicitly styled beyond system defaults.

## 8. Voice & Don'ts

The editorial voice is direct and professional, mirroring the interface's utility with informative, action-oriented language. It avoids marketing jargon and complex structures, favoring clear, capitalized headlines and emphatic calls to action.

- **Tone:** Informative, direct, and professional, focusing on guidance and investment value.
- **Headline style:** Direct and capitalized, often repeating the brand name for reinforcement.
- **CTA style:** Action-oriented and emphatic, using strong words like 'Download', 'Login', or 'Register'.
- **Avoid:** Excessive marketing jargon / Complex sentence structures / Ambiguous calls to action

### Don'ts
- ❌ Don't use light or pastel background colors — the screenshot shows a pure #000000 black background.
- ❌ Don't use decorative or script fonts for body text — the screenshot uses Arial and Montserrat for clarity.
- ❌ Don't use muted or subtle accent colors — the screenshot shows a high-saturation #ff2a2a red for emphasis.
- ❌ Don't create wide, multi-column layouts — the screenshot shows a strictly single-column, mobile-optimized interface.
- ❌ Don't use drop caps or complex typographic ornaments — the text layout is strictly functional and clean.
- ❌ Don't use low-contrast color combinations — the design prioritizes high-contrast white-on-black for legibility.

This system deliberately forgoes decorative typography, light backgrounds, and multi-column complexity, committing fully to its role as a functional, high-contrast information guide.

## System Prompt (paste into AI tool)

```
Design a dark-themed, mobile-first digital guide for modern property investment. Use a pure black (#000000) background with white (#ffffff) and muted gray (#717171) text for high legibility. The primary accent color should be a vibrant red (#ff2a2a) for active states and CTAs. Use geometric and humanist sans-serif font categories (like Montserrat and Arial) with a clear typographic scale. The layout must be strictly single-column and centered. Key critical donts: do not use light backgrounds, do not use decorative serif fonts, and do not create wide multi-column layouts. The interface should feel functional, direct, and professional.
```