# Makr · Design system migration spec

> Source: https://makr.com  ·  Curated by OpenDesign  ·  en

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

## 1. Identity DNA

The Makr system is built like a minimalist, heritage-inspired atelier, where every design choice serves a clear, utilitarian purpose. This approach translates to a refined e-commerce interface for premium goods, where the restraint of the palette and typography allows the product and brand identity to take center stage.

**One-liner:** A refined e-commerce interface for premium bags and goods, characterized by a restrained palette, clean typography, and large-scale product photography.
**Keywords:** Craft · Heritage · Utilitarian · Premium Goods
**Analogy:** A minimalist, heritage-inspired atelier with a focus on tactile material quality and understated design.

## 2. Color

The color system is strictly neutral, dominated by bright white and deep ink-black, with a single muted sage-green accent used sparingly for promotional sections. This high-contrast foundation creates a clean, editorial canvas.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#A9AFA9` | card background |
| `--ink` | `#1C1717` | body text |
| `--line` | `rgba(28,23,23,1.0)` | divider |

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

The principle is high contrast between dark ink and bright backgrounds, using the muted green only as a deliberate accent.

## 3. Typography

The typographic voice is clean and utilitarian, pairing a neo-grotesque sans-serif body font with a geometric display font. A consistent regular weight and deliberate use of uppercase for secondary labels create a uniform, understated appearance.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.0 | 400 | normal | Large promotional headlines |
| body | 16px | 1.15 | 400 | normal | General body copy and navigation |
| caption | 13px | 1.45 | 400 | 0.3px | Secondary text and subscription prompts |

**Type rules:**
- 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

## 4. Spacing

Spacing follows a strict 4px-based rhythm, providing consistent measurement from micro-interactions to the definition of major content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A strict 4px-based system that provides consistent spacing, with larger multiples used to define major content blocks and margins.

## 5. Surfaces

Surfaces are defined by their flatness and clarity. Borders are minimal and functional, while any applied shadow is a subtle, neutral glow rather than a deep, dimensional effect.

- **Radius:** sm 2px · md 4px · lg 8px · pill 999px
- **Shadows:**
  - rgb(128, 128, 128) 0px 0px 5px 0px
- **Borders:** 1px solid #1C1717 for inputs and dividers

## 6. Layout

The layout skeleton is a clean, vertical-scroll structure that relies on large, full-width image blocks. Generous whitespace is a structural element, used to guide the eye and frame the product photography.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is treated as a subtle, functional feedback layer rather than decoration. The philosophy is to use quick, smooth transitions that acknowledge interaction without drawing attention to the interface itself.

- **Durations:** micro 100ms · small 150ms · medium 200ms
- **Easing:** `cubic-bezier(0.55, 0.06, 0.68, 0.19)`
- **Patterns:**
  - Quick color transitions for interactive states
  - Subtle opacity fades for secondary UI elements

- **Hover:** Subtle color transitions on text links and interactive elements
- **Click:** Immediate response with no visible state change beyond the transition
- **Transition:** Smooth 0.15s to 0.2s transitions on colors and opacity
- **Keyboard:** Standard focus behavior for interactive elements

## 8. Voice & Don'ts

The editorial voice is direct, utilitarian, and understated, with short, punchy headlines that often use all-caps for emphasis. This tone avoids complex descriptions and vague marketing jargon, favoring simple, action-oriented copy.

- **Tone:** Direct, utilitarian, and understated
- **Headline style:** Short, punchy, and often in all-caps to denote importance
- **CTA style:** Simple, action-oriented text without heavy button styling
- **Avoid:** Excessive exclamation marks / Vague marketing jargon / Overly complex descriptions

### Don'ts
- ❌ 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.

What they deliberately don't do is as defining as what they do: the system explicitly avoids decorative fonts, wide color arrays, heavy 3D effects, and busy backgrounds.

## System Prompt (paste into AI tool)

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