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

# Acme Cups New Zealand · Design System

> Quiet monochrome design, grounded in everyday craft.

**Theme:** light · **Industry:** ecommerce · **Source:** https://acmecups.nz/ · **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._

A spacious storefront pairs stark black-and-white typography with immersive lifestyle photography and finely ruled product grids. The visual language keeps navigation and commerce unobtrusive, letting ceramic forms, materials, and use take center stage.

## North star

Keep the interface quiet and sharply structured so the ceramics and their real-world use carry the colour and emotional weight.

## Overview

Acme Cups balances an almost entirely white canvas with strong black typography, thin grey rules, and occasional pale-grey controls. The measured clay accent appears as a single sustainability callout rather than a dominant brand colour; most of the page’s colour comes from product and lifestyle photography. Helvetica Neue creates a crisp, utilitarian voice: oversized uppercase display lettering marks the hero, while compact uppercase headings and labels organize collections and commerce. The layout alternates full-bleed photographic stories with restrained white editorial and product sections. Product cards sit in ruled grids, and ample vertical pauses separate them from feature bands. Images are treated as the emotional focus, with unembellished product cutouts and workshop footage alongside them. Borders, not shadows, define most interactive and card edges. Buttons are small, uppercase, and lightly filled or outlined, keeping the page functional without competing with the photography.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and background for editorial, collection, product, journal, and footer sections. |
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Primary headings, product labels, navigation, links, and text on pale controls. |
| Rule Grey | `#c3c3c3` | `--color-rule-grey` | semantic | Fine outlines around product cards, controls, and small product-category badges. |
| Muted Graphite | `#666666` | `--color-muted-graphite` | neutral | Secondary badge text and subdued metadata, keeping product details lower in hierarchy. |
| Soft Pebble | `#e3e2e2` | `--color-soft-pebble` | surface | Pale button fills and restrained secondary text or control details. |
| Kiln Clay | `#ce5936` | `--color-kiln-clay` | accent | Isolated sustainability feature-card background; not the dominant site or product colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#666666` (Muted Graphite) · `--color-border` → `#c3c3c3` (Rule Grey) · `--color-accent` → `#ce5936` (Kiln Clay)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#ce5936` | `#ffffff` | 4.11:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Neue | `--font-body` | webfont | 400, 700, 500 | Site-wide display, headings, body copy, navigation, labels, links, and buttons. | Inter |

- **Helvetica Neue:** Uses bold uppercase display and controls; medium-weight editorial headings; regular compact body text; generally neutral tracking.

### Type scale — Golden Ratio (ratio ≈ 1.603, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 148px | 700 | 1 | 0 | uppercase | Helvetica Neue | Oversized uppercase ACME wordmark over the full-bleed hero image. |
| h1 | 48px | 700 | 1 | 0 | uppercase | Helvetica Neue | Large uppercase collection and major section headings. |
| h2 | 30px | 500 | 1.3 | 0 | — | Helvetica Neue | Editorial lead statements and prominent feature headings. |
| h3 | 26px | 500 | 1.04 | 0 | — | Helvetica Neue | Product-family and secondary feature headings. |
| h4 | 21px | 500 | 1.3 | 0 | — | Helvetica Neue | Compact product or journal subheadings. |
| body | 14px | 400 | 1.43 | 0 | — | Helvetica Neue | Descriptions, product details, and supporting editorial copy. |
| caption | 12px | 400 | 1 | 0 | — | Helvetica Neue | Small metadata, product-category badges, and date labels. |
| button | 13px | 700 | 1 | 0.02em | uppercase | Helvetica Neue | Bold uppercase labels on collection and purchase controls. |
| link | 14px | 400 | 1.3 | 0 | — | Helvetica Neue | Navigation, product links, and editorial calls to action. |

OpenType features in use: `"kern" 0, "liga" 0`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 20, 28, 29 px.
- Section rhythm 142px · element gap 4px · card padding — · max content width 1080px.

The homepage alternates full-bleed media with broad white sections, combining split editorial layouts and multi-column product grids. Measured content max width is 1080px, with section spacing that feels notably spacious and vertical pauses between major stories. Collection headings align to the start edge, while products sit in ruled cells with compact information above or below imagery. The page shifts between single-column image bands, two-column editorial areas, and denser product or colour grids. Keep alignment crisp, section transitions simple, and product information subordinate to the imagery.

## Shape & elevation

- Radius: button `2px` · input `3px` · media `3px` · badge `3px` · xs `2px` · sm `3px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is predominantly flat: no measured shadows or gradients. Thin grey borders establish product cells, badges, and controls, with white space doing most of the separation work. Keep the clay sustainability panel as a flat colour block; avoid floating cards and layered effects.

## Imagery

Photography leads the experience: the hero pairs a person using a cup with a rugged outdoor setting, while later bands show ceramic production and close-up product use. Product listings use isolated porcelain imagery against white. A few video frames and simple line drawings add variety; colour swatches are presented as a dedicated product-colour feature. Use natural, tactile imagery without decorative filters or heavy graphic overlays.

## Components

### Hero story

Full-bleed lifestyle photograph with an oversized uppercase wordmark, short product story, and a small pale-grey collection button.

### Collection heading

Bold uppercase range title aligned to the section start, paired with a pale-grey collection CTA and understated browsing controls.

### Product card

White product cell with a thin #c3c3c3 outline, product image, compact item name and details, and an outlined uppercase add-to-cart control.

### Product badge

Small rounded-outline label with muted #666666 text for product style or category metadata.

### Editorial feature

A spacious text-and-image story; sustainability uses a single flat #ce5936 panel with compact dark copy and a read-more action.

### Colour selector

A ruled row of named colour swatches followed by concise colour-specific editorial text and a small shop-colour action.

### Newsletter and footer

Compact email signup and currency controls sit beside grouped shop, learn, and help links, separated by fine rules.

### Measured component styles

- **Primary button** (“BOBBY COLLECTION”): background #e3e2e2 · text #000000 · border 1px solid #e3e2e2 · radius 3px · padding 9px 10px 7px 10px · 700 13px Helvetica Neue · uppercase
- **Secondary button** (“ADD TO CART $26”): transparent background · text #000000 · border 1px solid #c3c3c3 · radius 2px · padding 9px 12px 5px 12px · 700 13px Helvetica Neue · uppercase
- **Link** (“SHOP”): transparent background · text #e3e2e2 · radius 0px · padding 0px · 700 15px Helvetica Neue · uppercase
- **Input** (“AED BDT BND BOB CDF CNY DOP ETB FJD HKD ”): transparent background · text #e3e2e2 · radius 0px · padding 0px 14px 0px 0px · 700 15px Helvetica Neue
- **Card** (“ROMAN CUP MINI Kōkako 002 110ml ADD TO C”): transparent background · text #000000 · border 1px solid #c3c3c3 · radius 0px · padding 0px · 500 16px Helvetica Neue
- **Badge** (“Espresso”): transparent background · text #666666 · border 1px solid #c3c3c3 · radius 3px · padding 3px 2px 0px 2px · 400 12px Helvetica Neue

## Do

- Use white space as the main section separator.
- Keep headings bold, clean, and often uppercase.
- Let large, natural product photography lead feature bands.
- Use thin grey rules to define product and editorial grids.
- Keep purchase controls compact and uppercase.
- Reserve clay orange for an isolated editorial accent.

## Don't

- Do not introduce gradients or drop shadows.
- Do not use saturated colours as broad interface backgrounds.
- Do not crowd product images with decorative elements.
- Do not make buttons visually louder than the products.
- Do not replace fine rules with heavy card treatments.
- Do not treat photography-derived colours as interface palette.

## Agent prompt

Build a new Acme Cups page as a calm, editorial storefront. Use Gallery White (#ffffff) for the canvas, Studio Ink (#000000) for typography, and Rule Grey (#c3c3c3) for fine card and control outlines. Use Soft Pebble (#e3e2e2) for restrained secondary button fills; reserve Kiln Clay (#ce5936) for a rare, story-led accent, not the global CTA. Set the page in Helvetica Neue or Inter, with uppercase bold section labels and compact, readable body copy. Alternate immersive, natural lifestyle photography with spacious white product and editorial sections. Organize products in crisp ruled grids with concise names, details, and small outlined purchase controls. Keep navigation quiet, layouts aligned, and transitions flat. Avoid shadows, gradients, oversized coloured panels, and decorative interface chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed outdoor lifestyle image with wordmark upper left and story copy near the lower right. | Collection call to action | Oversized uppercase wordmark, White text over photography |
| 2 | feature-split | Two-column editorial block on white with lead statement and supporting copy. | Brand introduction | Strong lead text, Quiet editorial copy |
| 3 | product-grid | Range heading above a ruled, multi-column product grid. | Shop collection, Add to cart | Outlined product cells, Compact product labels |
| 4 | gallery | Three widely spaced product line drawings across a white single-row band. | Visual product overview | Fine monochrome outlines, Large negative space |
| 5 | product-showcase | Collection introduction and product panel beside a large product video or image. | Shop collection, Product selection | Split-panel composition, Product details beside media |
| 6 | feature-split | Full-bleed workshop image with a clay-coloured text card overlaid to one side. | Read more | Image-led feature, Flat accent panel |
| 7 | product-showcase | Left-side vertical category navigation and a broad product-focused content area. | Switch product ranges, Shop all range | Vertical uppercase tabs, Dense ruled product grid |
| 8 | category-nav | Section introduction above a horizontal row of swatches and a selected-colour description. | Browse colours, Shop selected colour | Named colour swatches, Thin cell dividers |
| 9 | video | Full-bleed product-use video with concise white copy and a shop link. | Shop all cups | Video background, Text overlay |
| 10 | content-feed | Journal heading above a two-column text and image feature. | Keep reading | Compact date metadata, Editorial image panel |
| 11 | logo-cloud | Section heading followed by a horizontal, multi-column strip of city and venue imagery. | Browse social proof | Ruled image cells, Small location labels |
| 12 | footer | Three-column footer with newsletter and currency controls, grouped links, and small-print brand details. | Email signup, Currency selection | Fine divider rules, Compact link groups |

## Source CSS custom properties (selected)

```css
--font-orion: "Helvetica Neue", sans-serif;
--color-dark-charcoal: #262525;
--color-light-grey: #f1f1f1;
--color-lines-2: #cacaca;
--color-lines-3: #ebebeb;
```

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