# Lironmoran Interiors · Design system migration spec

> Source: https://www.lironmoran-interiors.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent reference for minimalist luxury and high-end portfolio design, showcasing extreme typographic scale and a confident, monochromatic approach.

## 1. Identity DNA

This system is the digital equivalent of a curated gallery for high-end interior design projects. Its identity is one of austere luxury and architectural precision, where every element is placed with the deliberate restraint of a gallery installation.

**One-liner:** A premium, high-contrast digital portfolio for a commercial interior design studio.
**Keywords:** commercial interiors · luxury · minimal · architectural · refined
**Analogy:** A curated gallery for high-end interior design projects

## 2. Color

The palette is a study in extreme contrast, reduced to its most fundamental elements. Pure black and off-white form an austere, gallery-like presentation where content is the sole focus.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#EEEEEE` | card background |
| `--bg-quiet` | `#050505` | quiet area |
| `--ink` | `#EEEEEE` | body text |
| `--ink-soft` | `#F2F0ED` | secondary text |
| `--muted` | `#978F84` | placeholder |
| `--line` | `rgba(238, 238, 238, 0.2)` | divider |

**Color principle:** High-contrast and austere, relying on extreme black and white to create a sophisticated, gallery-like presentation.

The principle is one of sophisticated reduction, using monochromatic high contrast to frame the work.

## 3. Typography

Typography operates as a binary voice: a serif for expressive display and a sans-serif for all functional UI. All text is strictly uppercase and exclusively light-weight, creating a consistent, refined tone.

- **Display:** didone-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 185px | 1.0 | 400 | 0px | Main page titles and background hero text |
| heading | 92px | 1.0 | 400 | 0px | Section headers and large percentages |
| subheading | 75px | 1.0 | 400 | 0px | Secondary display text |
| body | 13px | 1.0 | 400 | 0px | UI labels and small text |
| label | 23px | 1.0 | 400 | 0px | Navigation and footer text |

**Type rules:**
- All text is strictly uppercase.
- Typography is exclusively light-weight (300/400).
- Serif is reserved for expressive display; sans-serif is used for all UI and labels.

## 4. Spacing

The rhythm is generous and asymmetric, defined by extreme horizontal padding that carves out focused, content-centric spaces.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous and asymmetric, utilizing extreme horizontal padding (172px) for focused content areas.

## 5. Surfaces

Surfaces are flat and unadorned, rejecting shadows in favor of high contrast and minimal, single-pixel borders. Depth is communicated through layered compositions and circular outlines for UI elements.

- **Radius:** sm 0px · md 22px · lg 26px · pill 999px
- **Shadows:**
  - none
- **Borders:** Minimal 1px borders and circular outlines (50% border-radius) for loaders and icons.

## 6. Layout

The structural skeleton is built on asymmetric split-layouts that prioritize dramatic visual hierarchy. Centered, circular loading overlays provide a moment of focused transition.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric split-layouts and centered, circular loading overlays.

## 7. Motion & Interaction

Motion is cinematic and restrained, relying on subtle opacity and transform fades for all transitions. The philosophy is to provide polished, smooth reveals that feel purposeful, never decorative.

- **Durations:** micro 100ms · small 400ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Opacity and transform fades (0.4s-0.5s) for smooth page transitions and UI reveals.

- **Hover:** Subtle opacity or background color transitions.
- **Click:** Smooth fade-out transitions for modal dismissal.
- **Transition:** All elements use a default 0.1s transition with extended 0.4s-0.5s durations for opacity and color.
- **Keyboard:** N/A

## 8. Voice & Don'ts

The editorial voice is confident, exclusive, and highly refined, expressed through massive, all-caps serif headlines and minimal descriptive text. The visual language avoids casual language, cluttered layouts, and bright accent colors.

- **Tone:** Confident, exclusive, and highly refined.
- **Headline style:** Massive, all-caps serif typography with tight tracking and minimal descriptive text.
- **CTA style:** Clean, rounded pill buttons with simple, direct labels.
- **Avoid:** casual language / cluttered layouts / bright accent colors / decorative icons / dense body copy

### Don'ts
- ❌ Don't use lowercase text — the screenshot shows all text is strictly uppercase.
- ❌ Don't use bright accent colors — the palette is strictly monochromatic (black, white, muted gray).
- ❌ Don't use bold or heavy font weights — all typography is extremely light (300/400).
- ❌ Don't use harsh box shadows — the design relies on flat surfaces and high contrast.
- ❌ Don't use sharp corners on prominent components — buttons and cards feature soft, rounded corners.
- ❌ Don't use cluttered grids — the layout is spacious with generous padding and asymmetric splits.

The system deliberately rejects lowercase text, bold weights, decorative icons, and dense body copy in favor of absolute clarity and composure.

## System Prompt (paste into AI tool)

```
This site is a premium digital portfolio for a commercial interior design studio, utilizing a strictly monochromatic, high-contrast aesthetic. The primary palette consists of pure black (#000000) and off-white (#EEEEEE), with no high-chroma accent colors. Typography is divided between an elegant didone-serif for expressive display elements and a light humanist-sans-serif for all UI labels and navigation, with all text strictly set to uppercase. The layout is spacious and asymmetric, featuring large display sizes up to 185px. Critical design prohibitions: never use lowercase text, never introduce bright accent colors, never use bold font weights, and avoid cluttered or dense layouts.
```