---
title: "Counter-Print design system"
variant: extended
source: https://www.counter-print.co.uk/
captured_at: 2026-10-12
theme: light
industry: ecommerce
generator: Design DNA (https://four.wiralomi.com/style/counter-print-co-uk)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Counter-Print · Design System

> A quiet storefront for visually loud ideas.

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.counter-print.co.uk/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Counter-Print pairs a restrained monochrome storefront with an expansive, image-led selection of books, stationery, and design objects. The homepage lets colourful covers and product photography carry the visual character, while compact labels and simple navigation keep shopping direct.

## North star

Keep the storefront monochrome and orderly so the colour and character of the products lead.

## Overview

The interface is built on a strict two-colour foundation: #ffffff for the canvas and #1c1c1c for text, navigation, borders, and occasional inverse bands. Colourful books and merchandise provide nearly all the vivid colour, so the interface stays neutral and lets product artwork define each impression. Helvetica is used throughout; headings are bold and tightly tracked, while product details and navigation remain small, regular, and practical. The page alternates between wide image-led openings, compact product grids, an oversized editorial statement, and a dark sample-sale split. Product images sit in orderly, closely spaced columns with short names and prices directly beneath. Rounded outline pills distinguish actions such as “View all” and “Subscribe” without introducing a filled brand colour. The overall strategy is deliberately flat and restrained: sharp imagery, clear alignment, dense catalog browsing, and few decorative interface effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Print Ink | `#1c1c1c` | `--color-print-ink` | brand | Primary text, navigation, hairline borders, and the dark sample-sale section. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Main page canvas, light section backgrounds, and text on dark product or badge surfaces. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Paper White) · `--color-surface` → `#1c1c1c` (Print Ink) · `--color-text` → `#1c1c1c` (Print Ink) · `--color-text-muted` → `#ffffff` (Paper White) · `--color-border` → `#1c1c1c` (Print Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1c1c1c` | `#ffffff` | 17.04:1 | AAA |
| `#ffffff` | `#1c1c1c` | 17.04:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica | `--font-body` | system | 400, 700 | Used throughout navigation, headings, product information, body copy, and actions. | Arial |

- **Helvetica:** Regular body and navigation; bold headings use tight negative tracking and uppercase styling where applicable.

### Type scale — Custom (ratio ≈ 2.049, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 63px | 700 | 1 | -0.025em | — | Helvetica | Large bold editorial statement introducing the publisher. |
| h1 | 20px | 700 | 1 | -0.025em | — | Helvetica | Section headings such as All Books, News, and Vouchers. |
| body | 15px | 400 | 1.2 | 0 | — | Helvetica | Store description, product names, prices, and supporting copy. |
| button | 15px | 400 | 1.2 | 0 | — | Helvetica | Compact labels on outlined pill actions. |
| nav | 15px | 400 | 1.2 | 0 | — | Helvetica | Primary menu, search, cart, and utility navigation. |
| link | 15px | 400 | 1.2 | 0 | — | Helvetica | Product links, collection links, and supporting navigation. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 11, 15, 19, 23, 28 px.
- Section rhythm 56px · element gap 15px · card padding — · max content width 1418px.

The page spans a broad desktop canvas, with measured maximum content width of 1418px. A compact header sits above a two-image opening, followed by six-column product collections, a full-width editorial statement, split promotional content, a four-column news feed, and two-column voucher imagery. Sections maintain a comfortable rhythm with a measured 56px section gap; product grids are dense, consistently aligned, and captioned immediately below each image. The footer returns to a sparse two-column arrangement.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · badge `9999px` · link `9999px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is predominantly flat, with no measured shadows or gradients. Separate sections through whitespace, image boundaries, and occasional contrast reversal rather than floating cards. Actions and selected controls use thin #1c1c1c outlines on the white canvas; the dark promotional band is a clear surface change, not a raised layer.

## Imagery

Product imagery is the main source of colour and personality: book covers, printed goods, records, and merchandise are shown as crisp product photographs or cover artwork. The opening uses large side-by-side image panels, while catalog sections repeat smaller rectangular images in aligned grids. Keep supplied artwork vivid and unfiltered; avoid adding decorative overlays or treating illustration colours as interface colours.

## Components

### Compact header

White header with a small dot-based brand mark at the left and understated menu, search, and cart icons aligned to the right.

### Image-led opening

Two large adjacent visual panels introduce the All Books and Counterprint Books collections, with small labels directly beneath.

### Product collection grid

Six-column desktop catalog of rectangular product images, short titles, and prices; section heading and outlined View all action sit above.

### Editorial statement

Large bold, tightly tracked text block on white, used as a prominent publisher introduction between catalog sections.

### Sample Sale split

Dark #1c1c1c band with a large colourful books photograph on one side and white descriptive copy plus a compact outlined link on the other.

### Newsletter and footer

Minimal subscription form with a rounded outlined email input and Subscribe action, followed by utility links, region selector, and small legal text.

### Measured component styles

- **Primary button** (“Subscribe”): transparent background · text #1c1c1c · border 1px solid #1c1c1c · radius 9999px · padding 3.8px 7.5px · 400 15px Helvetica
- **Link** (“All Books”): transparent background · text #1c1c1c · radius 0px · padding 0px · 400 15px Helvetica
- **Input**: transparent background · text #1c1c1c · border 1px solid #1c1c1c · radius 15px · padding 3.8px 7.5px · 400 15px Helvetica
- **Badge** (“Sold Out”): background #1c1c1c · text #ffffff · radius 9999px · padding 0px 7.5px · 400 15px Helvetica
- **Navigation item** (“Menu Search Cart”): transparent background · text #1c1c1c · radius 0px · padding 0px · 400 19.995px Helvetica

## Do

- Keep the interface palette to #1c1c1c and #ffffff.
- Let product artwork provide the vivid colour.
- Use Helvetica or a close sans-serif substitute consistently.
- Align product images and captions into clean repeated columns.
- Keep product names, prices, and navigation visually compact.
- Use thin outlined pill actions for key secondary controls.

## Don't

- Don't add decorative gradients or shadows.
- Don't introduce bright interface colours sampled from product covers.
- Don't turn catalog items into elevated, rounded cards.
- Don't make navigation or product metadata oversized.
- Don't crowd the page with extra ornamental graphics.
- Don't soften or recolour the supplied product imagery.

## Agent prompt

Build a new Counter-Print-style ecommerce page with a quiet monochrome interface and image-led catalog. Use #ffffff (Paper White) as the canvas and #1c1c1c (Print Ink) for text, navigation, borders, and any inverse promotional band. Use Helvetica or Arial, with bold tightly tracked headings and regular, compact body and product labels. Give the header a small logo and restrained menu, search, and cart controls. Organize content into broad image-led collection panels, aligned multi-column product grids with names and prices beneath images, and occasional editorial or split promotional sections. Use vivid colour only inside genuine product imagery. Keep actions as thin outlined pills, layouts flat, and section spacing generous; avoid shadows, gradients, decorative colour blocks, and card-like elevation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two large adjacent image panels with small collection labels beneath. | visual collection entry points, direct links | side-by-side imagery, small captions, monochrome header |
| 2 | product-grid | Six-column product grid with a section heading and View all pill. | browse collection, view all | aligned product images, compact titles and prices, outlined pill link |
| 3 | other | Full-width, single-column editorial text block. | publisher introduction | large bold type, wide white canvas |
| 4 | feature-split | Two-column dark band with a large image and copy panel. | discount discovery, browse sale | dark surface, colourful book photograph, compact outlined link |
| 5 | content-feed | Four-column editorial feed with image cards and short captions. | read recent stories, more news | four image columns, compact captions, outlined More News pill |
| 6 | product-grid | Six-column product grid with heading, View all action, and compact captions. | browse publisher catalog, view all | repeating product thumbnails, short names, price labels |
| 7 | product-showcase | Two wide product images displayed side by side. | compare voucher formats, select a value | large voucher artwork, two-column display, price captions |
| 8 | product-grid | Six-column album grid with a View all action. | browse records, identify sold-out items | album artwork, compact price labels, dark Sold Out badge |
| 9 | footer | Newsletter form above a sparse, two-column utility footer. | newsletter signup, select region, follow social links | outlined rounded input, compact utility links, payment marks |

## Source CSS custom properties (selected)

```css
--theme-row-gap-mobile: 0.75rem;
--theme-col-gap-mobile: 0.75rem;
--theme-row-gap-desktop: 1.5rem;
--theme-col-gap-desktop: 1.5rem;
--theme-row-gap: 1.5rem;
--theme-col-gap: 1.5rem;
--theme-gap: 1.5rem 1.5rem;
--media-grid-row-gap-mobile: 0.5rem;
--media-grid-col-gap-mobile: 0.25rem;
--media-grid-row-gap-desktop: 1.0rem;
--media-grid-col-gap-desktop: 0.5rem;
--media-grid-row-gap: 1.0rem;
--media-grid-col-gap: 0.5rem;
--media-grid-gap: 1.0rem 0.5rem;
--section-vertical-spacing-desktop: 3.75rem;
--section-vertical-spacing-mobile: 42px;
--section-vertical-spacing: 3.75rem;
--spacer: 1rem;
--media-border-radius: 0;
--main-font-stack: Helvetica, Arial, sans-serif;
--main-font-weight: 400;
--main-font-style: normal;
--heading-font-stack: Helvetica, Arial, sans-serif;
--heading-font-weight: 700;
--heading-font-style: normal;
--heading-text-transform: uppercase;
--heading-letterspacing: -0.025em;
--color-scheme-error: 245 0 0;
--color-scheme-success: 0 215 0;
--base-font-size-from-settings: 15;
--space-1: 0.625rem;
--space-2: 1.25rem;
--space-3: 2.5rem;
--space-4: 5rem;
--space-5: 7rem;
--font-size-ratio-xs: 0.563;
--font-size-ratio-sm: 0.75;
--font-size-ratio-base: 1;
--font-size-ratio-md: 1.333;
--font-size-ratio-lg: 1.777;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/counter-print-co-uk