# Counter Print · Design system migration spec

> Source: https://www.counter-print.co.uk  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of restrained, image-first e-commerce design where the typography and layout serve only to frame the curated content.

## 1. Identity DNA

Counter Print functions as a digital gallery for graphic design literature, where the interface recedes to let the curated collection speak. The system is built on a strict monochrome foundation, establishing a neutral architectural frame for the vibrant book covers that constitute the primary visual interest. This is a design of deliberate absence, where every decision serves the product.

**One-liner:** A minimalist, image-first curated bookstore for design professionals.
**Keywords:** curated · design books · graphic design · references
**Analogy:** A digital gallery for graphic design literature

## 2. Color

The palette is a binary of pure white and near-black, a strict monochrome canvas engineered to prevent any UI color from competing with the product photography. This chromatic restraint ensures the colorful spines and covers are the sole points of visual saturation.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#1C1C1C` | body text |
| `--muted` | `#1C1C1C` | placeholder |
| `--line` | `rgba(229,231,235,1.0)` | divider |

**Color principle:** Strict monochrome canvas to let the colorful book covers serve as the primary visual interest.

The principle is absolute: the interface is a gallery wall, and the books are the art.

## 3. Typography

Typography operates as a structural element rather than a decorative one, employing a clean, grotesque sans-serif like Helvetica. A strict hierarchy is maintained through weight and size alone, with tight negative letter-spacing on display text to increase its graphic impact.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 63.135px | 1.0 | 700 | -1.578px | Section Headers |
| body | 15px | 1.2 | 400 | -0.5px | Body Text & Pricing |

**Type rules:**
- Use tight negative letter-spacing for display sizes to increase impact.
- Maintain a strict visual hierarchy using only weight and size, not color.

## 4. Spacing

Rhythm is established through asymmetric spacing: generous vertical padding separates distinct content blocks, while tight horizontal gaps group related items within a grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding separates distinct content blocks while tight horizontal gaps group related items.

## 5. Surfaces

Surfaces are flat and absolute, with no drop shadows or soft glows to imply depth. Borders are minimal and functional, using a thin, light-gray rule only where necessary to define an edge.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** 1px solid rgb(229,231,235)

## 6. Layout

The layout is a straightforward grid-based skeleton designed to be filled by large, high-quality photography. Content cards sit flush and edge-to-edge within their columns, making the product image the dominant spatial element.

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

**Skeleton:** A simple grid-based layout that relies on large, high-quality photography to fill the canvas.

## 7. Motion & Interaction

Motion is purely functional, consisting of smooth opacity and transform transitions on interactive elements. The philosophy prioritizes professional subtlety over animation, using a consistent cubic-bezier easing to maintain a premium, responsive feel.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions on interactive elements.

- **Hover:** Subtle visual changes, likely opacity or transform, indicated by the transition properties.
- **Click:** Immediate response with standard cursor pointer feedback.
- **Transition:** Consistent cubic-bezier easing applied across all transitions.
- **Keyboard:** Standard accessible focus management.

## 8. Voice & Don'ts

The editorial voice is professional, minimalist, and highly curated, mirroring the visual system's restraint. Headlines are bold and tightly tracked, while calls-to-action use understated, functional language in ghost or outline pill buttons.

- **Tone:** Professional, minimalist, and highly curated.
- **Headline style:** Bold, tightly tracked, and descriptive.
- **CTA style:** Understated, using clear, functional language and pill-shaped outline buttons.
- **Avoid:** Overly promotional language / Cluttered layouts / Decorative fonts

### Don'ts
- ❌ Don't use decorative or serif fonts for UI elements — screenshot shows a strict geometric/grotesque sans-serif system.
- ❌ Don't use bright accent colors for buttons or highlights — screenshot shows a strictly monochrome UI with no dominant accent.
- ❌ Don't apply heavy drop shadows or soft glows — screenshot shows completely flat surfaces with no shadow usage.
- ❌ Don't use rounded corners on primary content cards — screenshot shows sharp corners on product images and layout blocks.
- ❌ Don't use justified text or dense blocks of copy — screenshot shows left-aligned text with generous vertical spacing.
- ❌ Don't add unnecessary borders or dividers — screenshot uses white space and grid alignment to separate sections.

The system deliberately excludes decorative fonts, bright accent colors, heavy shadows, and cluttered layouts.

## System Prompt (paste into AI tool)

```
A minimalist, premium e-commerce design for a curated graphic design bookstore. The UI uses a strict monochrome palette (#FFFFFF background, #1C1C1C ink) to ensure the colorful book covers remain the focal point. Typography relies on a clean, tight-tracked grotesque-sans (Helvetica/Arial) with bold, large-scale headers. Critical donts: never use decorative fonts, never apply heavy shadows, and never introduce a bright accent color that competes with the products. The layout is grid-based with generous padding, using ghost/pill buttons for secondary actions. Interaction patterns are subtle, relying on smooth opacity and transform transitions.
```