---
name: Counter Print
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1C1C1C"
  neutral: "#1C1C1C"
  line: "rgba(229,231,235,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 63.135px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.578px"
  body:
    fontFamily: grotesque-sans
    fontSize: 15px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.5px"

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

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

---

## Overview

A minimalist, image-first curated bookstore for design professionals.

*A digital gallery for graphic design literature*

## Colors

Strict monochrome canvas to let the colorful book covers serve as the primary visual interest.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1C1C1C`)** — uses `ink` token
- **Muted (`#1C1C1C`)** — uses `muted` token
- **Borders (`rgba(229,231,235,1.0)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Generous vertical padding separates distinct content blocks while tight horizontal gaps group related items.

## Elevation & Depth

- Borders: 1px solid rgb(229,231,235)

## Shapes

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

## Components

- **button:** Ghost/Outline button with pill-shaped border-radius, used for secondary actions like 'View all'.
- **card:** Edge-to-edge image cards that sit flush within their grid columns, emphasizing the product photography.
- **hero:** A two-column split layout featuring large product photography and bold, minimal text categorization.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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