---
name: Mono Frm Fm
description: "The site is a masterclass in using strict grids, solid borders, and typography hierarchy to create a premium, editorial feel without any decorative embellishments."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#292929"
  secondary: "#292929"
  bg-soft: "#FEFEFE"
  line: "rgba(41,41,41,1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 43.2px
    lineHeight: 1.34
    fontWeight: 300
    letterSpacing: "0px"
  heading:
    fontFamily: humanist-sans
    fontSize: 39.99px
    lineHeight: 1.34
    fontWeight: 300
    letterSpacing: "0px"
  subhead:
    fontFamily: humanist-sans
    fontSize: 25.06px
    lineHeight: 1.27
    fontWeight: 300
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.34
    fontWeight: 300
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.34
    fontWeight: 300
    letterSpacing: "1.4px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, grid-based hardware showcase with a gallery-like atmosphere.

*A gallery exhibition catalog for a piece of modern hardware.*

## Colors

High-contrast monochromatic palette with sharp black borders defining the grid.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#292929`)** — uses `ink` token
- **Secondary text (`#292929`)** — uses `ink-soft` token
- **Borders (`rgba(41,41,41,1)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* A consistent 4px base grid governs all spacing, with large padding blocks for the main grid cells.

## Elevation & Depth

- Borders: 2px solid #292929

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** Minimalist outline button with no border-radius, uppercase text, and light font weight.
- **card:** Strictly rectangular containers defined by the layout grid borders, no drop shadows or rounded corners.
- **hero:** A multi-panel asymmetric layout combining a product shot, descriptive text, and a rotating circular text element.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```