# Mono Frm Fm · Design system migration spec

> Source: https://mono.frm.fm/en  ·  Curated by OpenDesign  ·  en

> The site is a masterclass in using strict grids, solid borders, and typography hierarchy to create a premium, editorial feel without any decorative embellishments.

## 1. Identity DNA

Mono Frm Fm treats its digital presence as a gallery exhibition catalog for a piece of modern hardware. The system is built on a strict, high-contrast monochromatic grid that frames content with the deliberate precision of a gallery wall, creating an atmosphere that is both elegant and contemplative.

**One-liner:** A clean, grid-based hardware showcase with a gallery-like atmosphere.
**Keywords:** elegant · contemplative · gallery · hardware · refined
**Analogy:** A gallery exhibition catalog for a piece of modern hardware.

## 2. Color

The palette is a disciplined exercise in monochrome, using only pure white and a single dark gray (#292929) for all text and borders. This extreme contrast creates a stark, gallery-like clarity where every element is sharply defined against the void.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#FEFEFE` | card background |
| `--ink` | `#292929` | body text |
| `--ink-soft` | `#292929` | secondary text |
| `--line` | `rgba(41,41,41,1)` | divider |

**Color principle:** High-contrast monochromatic palette with sharp black borders defining the grid.

Depth is established not through shadow, but through the physical weight of solid, 2px borders that carve the layout into distinct, architectural panels.

## 3. Typography

Typography is rendered almost exclusively in light font weights, lending a refined, contemplative voice to the hardware showcase. Uppercase treatment is reserved for navigation and labels, creating a clear hierarchy of direct instruction versus descriptive prose.

- **Display:** grotesque-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 43.2px | 1.34 | 300 | 0px | Main hero headlines |
| heading | 39.99px | 1.34 | 300 | 0px | Secondary headlines |
| subhead | 25.06px | 1.27 | 300 | 0px | Subheadings and navigation |
| body | 16px | 1.34 | 300 | 0px | Body text and descriptions |
| caption | 12px | 1.34 | 300 | 1.4px | Small labels and metadata |

**Type rules:**
- Use light font weights (300) for almost all text, including headlines.
- Use uppercase for buttons and labels.
- Maintain tight vertical rhythm with generous line-heights.

## 4. Spacing

All spatial relationships are governed by a consistent 4px base grid, creating a rhythmic, mathematical structure for every element.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px base grid governs all spacing, with large padding blocks for the main grid cells.

## 5. Surfaces

Surfaces are defined by absence; there are no drop shadows or soft radii to soften the grid. Depth and separation are communicated solely through the solid 2px borders that outline every panel and component.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** 2px solid #292929

## 6. Layout

The layout skeleton is a strict, asymmetric CSS Grid, where every content block is isolated by heavy 2px black borders. This creates a multi-panel, comic-strip-like arrangement that feels both systematic and deliberately composed.

- **Container max:** 1920px
- **Paragraph max:** 400px
- **Grid:** 12 columns, gutter 0px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Strict, asymmetric CSS Grid with heavy 2px black borders separating every single element.

## 7. Motion & Interaction

Motion is sparing and purposeful, used to reveal content rather than decorate it. The system favors smooth, functional transitions—like height expansions and opacity fades—alongside a single, signature rotating text element.

- **Durations:** micro 220ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.55, 0.085, 0.68, 0.53)`
- **Patterns:**
  - Rotating circular text animation
  - Smooth height transitions for content reveals

- **Hover:** Minimal visual feedback; interactions are focused on revealing content rather than state changes.
- **Click:** Triggers content expansion or navigation.
- **Transition:** CSS transitions on height and opacity for expanding panels.
- **Keyboard:** Standard focus states, likely custom styled to match the black/white theme.

## 8. Voice & Don'ts

The editorial voice is contemplative, elegant, and refined, using poetic headlines paired with direct, understated calls-to-action. Language is aspirational but never playful, mirroring the precision of the hardware it describes.

- **Tone:** Contemplative, elegant, and refined.
- **Headline style:** Poetic and aspirational, using light font weights.
- **CTA style:** Direct, uppercase, and understated.
- **Avoid:** Rounded UI elements / Drop shadows / Bright accent colors / Playful language / Cluttered layouts

### Don'ts
- ❌ Don't use rounded corners — screenshot shows sharp 90-degree edges on all elements.
- ❌ Don't use drop shadows — screenshot relies entirely on solid borders for depth.
- ❌ Don't use bold font weights — screenshot uses exclusively light (300) weights.
- ❌ Don't use vibrant accent colors — screenshot adheres to a strict monochrome palette.
- ❌ Don't use organic or asymmetrical padding — screenshot uses rigid 4px-based grid spacing.
- ❌ Don't use fluid or gradient backgrounds — screenshot uses solid #FFFFFF and #292929 blocks.

What the system deliberately avoids—rounded corners, bold weights, vibrant accents, and complex shadows—is as critical to its identity as what it includes.

## System Prompt (paste into AI tool)

```
A premium hardware showcase website for the Mono X7 display. The design DNA is a strict, gallery-like grid system defined by 2px solid black borders (#292929) on a pure white background (#FFFFFF). Typography relies on light-weight grotesque and humanist sans-serif categories, using uppercase for navigation and labels. The layout is an asymmetric, multi-panel grid with large containers and no rounded corners or drop shadows. Key critical donts: 1) Never use rounded corners or soft radii. 2) Avoid any use of bold font weights (keep everything at 300). 3) Do not introduce colorful accents or gradients; stick to the monochrome palette. 4) Avoid complex shadows; use solid borders to define depth and structure.
```