---
title: "Liron Moran Interiors design system"
variant: extended
source: https://lironmoran-interiors.com/
captured_at: 2026-10-12
theme: dark
industry: design
generator: Design DNA (https://four.wiralomi.com/style/lironmoran-interiors-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Liron Moran Interiors · Design System

> Quietly architectural, sharply monochrome.

**Theme:** dark · **Industry:** design · **Source:** https://lironmoran-interiors.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Liron Moran Interiors presents a restrained visual identity for a Singapore commercial-interiors studio. The supplied first viewport is a black loading screen with sparse white typography, a circular loader, and a fine progress rule.

## North star

Keep the interface as quiet as an architectural gallery: black space first, precise uppercase type and fine rules second.

## Overview

The visible identity is built around a nearly pure-black canvas and restrained white typography, giving the loading view an architectural, gallery-like quietness. Measured text uses #eeeeee, while a fine circular loader and long horizontal rule keep the interface legible without introducing cards or decorative framing. Lausanne-300 supplies the principal uppercase sans-serif voice; cardinalfruit-regular is reserved for oversized display moments elsewhere in the measured type system. The measured palette also includes muted olive-grey and white surfaces, plus a vivid green WhatsApp accent, but these are secondary to the black-and-white first viewport; the green appears as a compact contact affordance rather than a dominant brand field. Layout relies on broad negative space, a centered loader, and a low-set progress line and studio descriptor. Treat the whole page as motion-led and image-conscious, while avoiding assumptions about photography from this loading-only screenshot.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Chalk | `#eeeeee` | `--color-soft-chalk` | neutral | Primary text, navigation, and white-outline controls against the dark canvas. |
| Gallery Black | `#000000` | `--color-gallery-black` | brand | Dominant canvas and the defining background of the loading viewport. |
| Olive Slate | `#424740` | `--color-olive-slate` | surface | Muted section surface visible in the scaled full-page preview, not the first viewport. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Inverse surface in measured data; also supports high-contrast interface elements. |
| Stone Hairline | `#978f84` | `--color-stone-hairline` | semantic | Subtle border tone for restrained outlines and separators. |
| WhatsApp Green | `#25d366` | `--color-whatsapp-green` | accent | Small WhatsApp contact button; keep it isolated from the monochrome visual field. |

### Semantic aliases

`--color-canvas` → `#000000` (Gallery Black) · `--color-surface` → `#424740` (Olive Slate) · `--color-surface-2` → `#ffffff` (Clean White) · `--color-text` → `#eeeeee` (Soft Chalk) · `--color-border` → `#978f84` (Stone Hairline) · `--color-accent` → `#25d366` (WhatsApp Green) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#eeeeee` | `#000000` | 18.1:1 | AAA |
| `#eeeeee` | `#424740` | 8.2:1 | AAA |
| `#eeeeee` | `#ffffff` | 1.16:1 | fail |
| `#25d366` | `#000000` | 10.59:1 | AAA |
| `#25d366` | `#424740` | 4.8:1 | AA |
| `#25d366` | `#ffffff` | 1.98:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Lausanne-300 | `--font-body` | webfont | 400 | Main uppercase interface, navigation, body copy, and headings. | Inter |
| cardinalfruit-regular | `--font-display` | webfont | 400 | Oversized display typography and expressive editorial accents. | Cormorant Garamond |

- **Lausanne-300:** Use a light, clean sans-serif voice; measured text is uppercase with untracked or naturally spaced forms.
- **cardinalfruit-regular:** Use sparingly for dramatic display contrast; measured style is regular weight and uppercase.

### Type scale — Custom (ratio ≈ 2.679, base 13.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 259.5px | 400 | 1 | 0 | uppercase | cardinalfruit-regular | Oversized editorial display lettering for prominent brand moments. |
| h1 | 185.5px | 400 | 1 | 0 | uppercase | Lausanne-300 | Primary page headline, set in large uppercase sans-serif. |
| h2 | 92.5px | 400 | 1 | 0 | uppercase | Lausanne-300 | Section headings with a bold scale contrast and uppercase treatment. |
| body | 13.5px | 400 | 1 | 0 | uppercase | Lausanne-300 | Compact uppercase supporting copy and interface labels. |
| nav | 92.5px | 400 | 1 | 0 | uppercase | Lausanne-300 | Uppercase navigation labels and oversized menu presentation. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 1, 5, 6, 30, 35, 36, 39, 89, 130 px.
- Section rhythm 89px · element gap — · card padding — · max content width 1361px.

The measured content uses a centered maximum-width frame of 1361px, with a comfortable density and section rhythm based on the measured 89px gap. In the screenshot, the loading viewport is full-bleed black: a small circular loader sits near the center, while a thin progress rule and studio descriptor occupy the lower area. Navigation is minimal and pushed to the edges in the scaled preview. Favor generous negative space, asymmetrical placement for secondary details, and avoid conventional card grids unless content requires them.

## Shape & elevation

- Radius: button `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s ease` on interactive elements.

The visual language is flat, with no measured shadows or gradients. Use thin, low-contrast outlines and separators rather than raised panels. Circular controls are the notable outlined component; keep layering minimal and reserve the bright accent for the contact affordance.

## Imagery

The first viewport is a loading state rather than a portfolio image: it uses no visible photography, illustration, or 3D. The scaled preview hints at a full-bleed studio presentation but does not provide enough evidence to prescribe image subjects. When introducing project imagery, let architectural photography carry the page and keep framing broad and uncluttered; retain the dark, restrained interface around it.

## Components

### Loading indicator

Small circular outline centered in the viewport, containing a compact uppercase loading label.

### Progress rule

Long, fine horizontal line across the lower viewport, paired with a large percentage readout.

### Minimal navigation

Small uppercase Gallery label and circular menu control sit at the page edge in the scaled preview.

### WhatsApp contact

Compact circular #25d366 control with white icon treatment; keep it as a single vivid accent.

### Outline pill controls

Measured controls use a 50% radius and a thin #eeeeee outline, with no shadow.

### Studio descriptor

Small uppercase line naming commercial interiors, Singapore, and the studio near the bottom of the loading view.

### Measured component styles

- **Primary button**: background #25d366 · text #ffffff · radius 50% · padding 0px · 400 23px Lausanne-300 · uppercase
- **Secondary button**: transparent background · text #eeeeee · border 1px solid #eeeeee · radius 50% · padding 0px · 400 13.3548px Lausanne-300 · uppercase
- **Link**: transparent background · text #f2f0ed · radius 0px · padding 0px · 400 29.6774px Lausanne-300 · uppercase
- **Navigation item** (“GALLERY”): transparent background · text #eeeeee · radius 0px · padding 0px · 400 13.3548px Lausanne-300 · uppercase

## Do

- Use #000000 as the dominant visual canvas.
- Set interface copy in restrained uppercase sans-serif.
- Preserve generous negative space around focal elements.
- Use thin rules and circular outlines for lightweight structure.
- Reserve #25d366 for a compact WhatsApp contact control.
- Use project imagery as broad architectural compositions when available.

## Don't

- Do not add gradients or drop shadows.
- Do not fill the page with card-like panels.
- Do not make the WhatsApp green a large section background.
- Do not crowd the loading or hero area with explanatory copy.
- Do not substitute heavy bold typography for the light measured voice.
- Do not infer project photography from the loading screen alone.

## Agent prompt

Build a new page for Liron Moran Interiors with the restraint of an architectural gallery. Make #000000 Gallery Black the dominant canvas, use #eeeeee Soft Chalk for uppercase Lausanne-like interface text, and rely on generous empty space rather than boxed cards. Keep the hierarchy editorial: a striking display moment may use a refined serif-like accent, while navigation and supporting copy stay clean and light. Use fine rules and circular outline controls in place of shadows or raised surfaces. If a muted section is needed, use #424740 Olive Slate; keep #978f84 Stone Hairline subtle. Limit #25d366 WhatsApp Green to a compact contact action. Let project photography dominate only when actual project assets are available, with minimal interface chrome around it.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark viewport with a centered circular loader and low-set progress details. | loading status, progress indication, minimal navigation | black canvas, fine horizontal rule, circular outline, uppercase microcopy |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/lironmoran-interiors-com