---
name: Master & Dynamic
description: "A strong example of restrained premium e-commerce where typography precision and product photography carry the entire visual weight."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#4A4A4A"
  neutral: "#4A4A4A"
  bg-soft: "#F2F2F2"
  line: "rgba(74, 74, 74, 0.12)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 52px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.04px"
  heading:
    fontFamily: geometric-sans
    fontSize: 41px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-0.82px"
  body-lg:
    fontFamily: geometric-sans
    fontSize: 20px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.4px"
  body:
    fontFamily: geometric-sans
    fontSize: 18px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.4px"
  body-sm:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.32px"

rounded:
  sm: 4px
  md: 7px
  lg: 8px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 30px
  3xl: 48px

---

## Overview

Master & Dynamic presents premium audio hardware through clean, image-driven e-commerce with a restrained, industrial aesthetic.

*A high-end design gallery showcasing meticulously crafted audio hardware*

## Colors

Minimalist black, white, and gray palette that lets high-quality product photography drive the visual experience

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#4A4A4A`)** — uses `ink` token
- **Muted (`#4A4A4A`)** — uses `muted` token
- **Borders (`rgba(74, 74, 74, 0.12)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** geometric-sans

- Uppercase transform for navigation and category labels
- Tight letter spacing throughout (negative tracking)
- Line height matches font size for single-line text elements

## Layout

Full-width hero imagery with centered text overlay; 3-column feature grid; content-aligned text sections

*Rhythm:* Base 4px with multipliers primarily at 4x (16px), 6x (24px), and 12x (48px)

## Elevation & Depth

- rgba(0, 0, 0, 0.5) 0px 5px 15px 0px
- Borders: 1px solid rgba(74, 74, 74, 0.12)

## Shapes

- `sm`: 4px
- `md`: 7px
- `lg`: 8px
- `pill`: 9999px

## Components

- **button:** Pill-shaped buttons with dark fill and white text, or outlined with dark border; uppercase text
- **card:** Minimal cards with edge-to-edge product photography, no visible borders or shadows on image-based cards
- **chip:** Small pill-shaped filters with border and uppercase text
- **input:** Clean text inputs with subtle bottom border, minimal styling
- **hero:** Full-bleed high-quality product photography with left-aligned text overlay on the image

## Do's and Don'ts

**Don't:**
- Don't use decorative serifs — screenshot shows a clean grotesque/geometric sans-serif system for all display and body text
- Don't use high-saturation accent colors — screenshot shows a strictly monochromatic palette of black, white, and grays
- Don't use heavy drop shadows or borders on cards — screenshot shows edge-to-edge product photography with minimal surface treatment
- Don't use rounded or playful border radii — screenshot shows consistent tight radii (4-8px) or pill shapes (9999px)
- Don't use wide letter spacing — screenshot shows tight negative tracking across all text sizes
- Don't crowd the layout with text — screenshot shows generous whitespace and large hero imagery dominating the visual hierarchy
- Don't use multiple font weights — screenshot shows predominantly regular (400) weight with minimal bold (700) usage
- Don't use decorative backgrounds — screenshot shows flat white, black, or gray backgrounds letting product photography provide visual interest

---

## System Prompt (paste into AI agent)

```
Master & Dynamic is a premium audio hardware brand using a clean, minimal e-commerce design. The site uses a monochromatic palette (#FFFFFF background, #4A4A4A text, #000000 for dark sections) with no accent colors. Typography is a custom grotesque sans-serif with tight negative tracking and minimal weight variation (mostly 400). Layout is spacious with full-bleed product photography driving the visual experience. Key donts: never use decorative serifs, avoid high-saturation accents, never add heavy shadows to product cards, don't use wide letter spacing, and never crowd layouts with text. The system prioritizes restraint and lets product imagery speak, using uppercase transforms and pill-shaped buttons for interactive elements.
```