---
name: Makr
description: "This site is a masterclass in restrained, high-end e-commerce design, where the lack of decoration allows the product and brand identity to take center stage."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1C1717"
  bg-soft: "#A9AFA9"
  line: "rgba(28,23,23,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 32px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: neo-grotesque-sans
    fontSize: 16px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: neo-grotesque-sans
    fontSize: 13px
    lineHeight: 1.45
    fontWeight: 400
    letterSpacing: "0.3px"

rounded:
  sm: 2px
  md: 4px
  lg: 8px
  pill: 999px

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

---

## Overview

A refined e-commerce interface for premium bags and goods, characterized by a restrained palette, clean typography, and large-scale product photography.

*A minimalist, heritage-inspired atelier with a focus on tactile material quality and understated design.*

## Colors

High contrast between dark ink and bright backgrounds, with a muted sage-green accent used sparingly for promotional sections.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1C1717`)** — uses `ink` token
- **Borders (`rgba(28,23,23,1.0)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** neo-grotesque-sans
- **Mono:** geometric-mono

- Use uppercase for all secondary labels and promotional text
- Maintain a regular weight (400) for all text elements to preserve a clean, uniform appearance
- Keep line-height tight for headlines and open for body copy to ensure readability

## Layout

A clean, vertical-scroll layout that relies on large full-width image blocks and generous whitespace to guide the eye.

*Rhythm:* A strict 4px-based system that provides consistent spacing, with larger multiples used to define major content blocks and margins.

## Elevation & Depth

- rgb(128, 128, 128) 0px 0px 5px 0px
- Borders: 1px solid #1C1717 for inputs and dividers

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 8px
- `pill`: 999px

## Components

- **button:** Minimal text-based buttons with no background or border, relying on text transform and hover transitions.
- **card:** Large, borderless image-based cards that prioritize product photography over textual metadata.
- **chip:** Minimalist uppercase text labels used for navigation and promotional banners.
- **input:** Single-line text inputs with a 1px bottom border and no background fill.
- **hero:** Full-bleed image or color block (like the sage green section) with large-scale typography overlay.

## Do's and Don'ts

**Don't:**
- Don't use decorative or script fonts — the screenshot shows a consistent use of neutral, geometric sans-serifs.
- Don't use a wide array of colors — the screenshot shows a very limited palette of white, dark ink, and a single muted green.
- Don't use heavy drop shadows or 3D effects — the screenshot shows a very flat, clean UI with almost no shadows.
- Don't use busy backgrounds or patterns — the screenshot shows solid colors and large-scale product photography.
- Don't use complex button shapes — the screenshot shows minimal, text-based interactive elements.
- Don't use justified text — the screenshot shows left-aligned text for all content blocks.

---

## System Prompt (paste into AI agent)

```
Makr.com is a premium e-commerce site for bags and goods. It uses a refined, minimalist aesthetic with a neo-grotesque sans-serif body font (Sohne) and a more geometric display font (Akzidenz Grotesk). The color palette is strictly neutral, dominated by #FFFFFF, #1C1717, and a muted sage green (#A9AFA9). The layout is spacious, relying on large-scale photography and generous whitespace. Key don'ts: avoid high-chroma colors, avoid decorative fonts, and avoid heavy UI elements like thick borders or drop shadows. The overall feel is one of quiet luxury and utilitarian craft.
```