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

# FRAMED* — Mono X7 · Design System

> A monochrome gallery for a digital canvas.

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://mono.frm.fm/en/ · **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._

A stark, gallery-like product page presents the Mono X7 as both a display and a canvas for online art. An asymmetrical grid, thin dark rules, and restrained typography let the product and its imagery define the experience.

## North star

Treat the page as a sharply ruled art exhibition: let a restrained white-and-ink grid frame the product and its imagery.

## Overview

The visual identity is built from a measured two-colour foundation: Gallery White (#ffffff) fills the page, while Charcoal Ink (#292929) defines copy, outlines, and compact controls. The screenshot includes tonal greys and black within product and campaign imagery; these belong to the media, not the core interface palette. Typography pairs light, open NH sans-serif text with condensed S-Condensed labels, creating a contrast between calm product storytelling and tightly packed navigation. The layout behaves like a contemporary exhibition wall: an irregular, border-defined grid mixes product copy, Japanese text, art-led media, a narrow vertical text panel, and a central device image. Large white areas and visible rules keep each module distinct without cards or shadows. Spacing feels measured and comfortable, but the composition remains dense and deliberately unconventional. Use imagery as content within the grid rather than as decoration behind generic interface sections.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas and open grid areas; also appears as text against dark product imagery. |
| Charcoal Ink | `#292929` | `--color-charcoal-ink` | neutral | Primary copy, grid rules, outlines, navigation, links, labels, and the language control. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#292929` (Charcoal Ink) · `--color-text` → `#292929` (Charcoal Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#292929` (Charcoal Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#292929` | `#ffffff` | 14.55:1 | AAA |
| `#ffffff` | `#292929` | 14.55:1 | AAA |

### Gradients

- `linear-gradient(0deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.01))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NH | `--font-body` | webfont | 300, 400, 100 | Light-weight body copy, supporting headings, product text, and close control. | Inter |
| S-Condensed | `--font-display` | webfont | 300, 500 | Condensed navigation, uppercase labels, captions, buttons, and eyebrow text. | Roboto Condensed |

- **NH:** Use light weights for calm, spacious copy; the measured body style is 18px with a 1.5 line height.
- **S-Condensed:** Use compact uppercase text for interface labels; the measured button and link roles are light-to-medium weight.

### Type scale — Minor Third (ratio ≈ 1.221, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 300 | 1.34 | 0 | — | S-Condensed | Product title and prominent display heading. |
| h2 | 32px | 100 | 1.25 | -0.02em | — | NH | Supporting section headings and editorial statements. |
| h3 | 28px | 100 | 0.9 | -0.05em | uppercase | EV | Compact uppercase display labels. |
| h4 | 25px | 300 | 1.27 | 0 | — | NH | Secondary product or content headings. |
| body | 18px | 300 | 1.5 | 0 | — | NH | Product introduction and explanatory copy. |
| caption | 12px | 300 | 1.34 | 0 | uppercase | S-Condensed | Small uppercase captions and supporting labels. |
| button | 14px | 500 | normal | 0 | uppercase | S-Condensed | Pre-order, sign-up, and language controls. |
| link | 12px | 300 | 1.34 | 0 | uppercase | S-Condensed | Compact uppercase navigation and footer links. |
| eyebrow | 14px | 500 | 0.9 | 0.1em | uppercase | S-Condensed | Small uppercase section labels and product markers. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 3, 4, 5, 8, 12, 20, 23, 25, 36, 43, 45, 50 px.
- Section rhythm 50px · element gap — · card padding — · max content width —.

Build an asymmetrical, single-page grid with varied-width panels rather than a centered column or repeated card system. Thin dark rules divide product copy, campaign imagery, Japanese-language text, and the central device showcase. Align text to the start of each panel; let media span substantial areas and allow a narrow vertical text strip to interrupt the composition. The page reads as comfortable but visually dense, with generous blank canvas balanced against tightly arranged modules. No measured maximum content width is available.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface is flat: measured shadows are absent, and the screenshot relies on sharp, thin dark rules to separate panels. Avoid rounded cards and soft elevation. The product image and layered campaign media create the depth; preserve their contrast against the clean white canvas without adding decorative shadows.

## Imagery

Mix product-focused video or imagery with editorial campaign visuals. The hero device appears as a tall black screen against white, while a separate image panel shows a person within a tilted display and curved surrounding lettering. Keep these media panels distinct from interface colours: their greys, photographic tones, and deep blacks are image content, not extra brand palette colours.

## Components

### Grid rules

Use sharp, straight #292929 borders to divide adjacent editorial panels and frame compact controls.

### Header controls

Place product identification beside tightly bordered pre-order and sign-up cells, with a compact EN/JP language selector.

### About panel

Set an uppercase condensed ABOUT label above light, left-aligned product copy on the white canvas.

### Product showcase

Feature a tall, black display image within a large open white panel, with a small outlined MONO X7 marker.

### Campaign media panel

Use an image-led block with curved white lettering around a tilted screen; keep its tonal grey treatment inside the artwork.

### Footer strip

Run small condensed utility links and brand marks along the bottom, separated from the composition by a fine dark rule.

### Measured component styles

- **Primary button** (“EN”): background #292929 · text #fefefe · border 2px solid #292929 · radius 0px · padding 0px · 500 14.0256px S-Condensed
- **Secondary button** (“×”): transparent background · text #292929 · border 2px solid #292929 · radius 0px · padding 4.9px 12px · 300 24.9984px NH
- **Link** (“SHOP”): transparent background · text #292929 · radius 0px · padding 0px · 300 12px S-Condensed · uppercase
- **Input**: transparent background · text #000000 · radius 0px · padding 8px 0px · 400 13.9968px S-Condensed · uppercase
- **Card** (“The Mono X7. for the best the Web has to”): transparent background · text #292929 · border 2px solid #292929 · radius 0px · padding 0px · 300 16px NH
- **Badge** (“MONO X7”): transparent background · text #292929 · border 2px solid #292929 · radius 0px · padding 4px 8px 3px 8px · 500 14.0256px S-Condensed · uppercase

## Do

- Use only #ffffff and #292929 for the measured interface palette.
- Divide content with crisp, straight rules.
- Compose an irregular grid with varied panel proportions.
- Pair light editorial copy with condensed uppercase labels.
- Let product and campaign media carry their own tonal range.
- Preserve conspicuous open white areas.

## Don't

- Do not introduce unmeasured interface colours.
- Do not make the page a centered stack of uniform cards.
- Do not add gradients or decorative shadows.
- Do not round panel corners or control borders.
- Do not mistake image greys for brand palette colours.
- Do not use oversized generic marketing buttons.

## Agent prompt

Create a new product page in the FRAMED* Mono X7 visual style. Keep the interface palette strictly to Gallery White (#ffffff) and Charcoal Ink (#292929); treat photographic greys and blacks as media content only. Build an asymmetrical, exhibition-like grid with varied panels, crisp straight rules, and generous white space. Use light NH-style sans-serif typography for product storytelling, paired with condensed uppercase labels and navigation. Make product imagery a focal point within the layout, not a generic background. Keep controls compact, square-edged, and clearly delineated. Avoid shadows, rounded cards, gradients, invented palette colours, and uniform card stacks. The result should feel like a carefully composed gallery wall: editorial and minimal, but with enough structural density to guide visitors through product information and supporting media.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-showcase | Single-screen asymmetrical grid with product copy, device imagery, campaign media, language links, and footer navigation. | Pre-order and sign-up links, EN/JP language switch, Product information panels | Thin dark grid rules, Condensed uppercase labels, Large white product field, Image-led campaign panel |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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