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

# Analogue · Design System

> Quiet monochrome frames meticulous retro gaming hardware.

**Theme:** dark · **Industry:** consumer-electronics · **Source:** https://www.analogue.co/ · **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._

Analogue pairs restrained monochrome page design with large, polished imagery of retro gaming hardware. Alternating product-led bands, compact navigation and review cards keep the homepage focused on the products.

## North star

Let large, carefully framed hardware imagery lead, while monochrome surfaces and tightly tracked type keep the interface quiet.

## Overview

The visual strategy is deliberately restrained: black anchors the review, brand-story and footer areas, while white and light gray create clean, full-width product bands. Typography uses CircularXX throughout, with compact, understated navigation and captions set against much larger centered headlines. Headings have tight tracking and a confident, unembellished presence. Large product imagery carries most of the visual personality: handheld consoles, controllers and hardware are presented as polished studio-style 3D imagery, with color and detail contained within the products rather than repeated across the interface. The page alternates spacious, single-column showcases with a darker review section built from bordered cards. Calls to action are small, high-contrast pills, not oversized graphic elements. Generous section breaks give each product story room to register, while consistent centered alignment and simple surfaces preserve a coherent, gallery-like rhythm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Clean product-showcase band, inverse text on dark sections, and navigation or footer contrast. |
| Console Black | `#000000` | `--color-console-black` | brand | Page canvas, dark review and footer sections, navigation text on light bands, and dark CTA fill. |
| Graphite Hairline | `#808080` | `--color-graphite-hairline` | neutral | Thin outlines around the review cards; keep this subdued rather than using it as a prominent fill. |
| Soft Alloy | `#eaeaea` | `--color-soft-alloy` | surface | Pale gray product showcase band, separating hardware imagery from the white and black sections. |

### Semantic aliases

`--color-canvas` → `#000000` (Console Black) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#eaeaea` (Soft Alloy) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#000000` (Console Black) · `--color-border` → `#808080` (Graphite Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#eaeaea` | 1.2:1 | fail |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#eaeaea` | 17.46:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| circularXx | `--font-body` | webfont | 450, 500, 400 | Site-wide navigation, headings, descriptions, review cards, links and buttons. | DM Sans |

- **circularXx:** Use rounded, modern sans-serif forms; headlines are medium weight with noticeably tight negative tracking, while captions and navigation stay compact and regular.

### Type scale — Perfect Fourth (ratio ≈ 1.349, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 53px | 500 | 1.11 | -0.05em | — | circularXx | Primary centered product or campaign headline. |
| h2 | 47px | 500 | 1 | -0.06em | — | circularXx | Major section headlines, including product availability and reviews. |
| h3 | 35.5px | 500 | 1 | -0.033em | — | circularXx | Secondary product or editorial headings. |
| h4 | 20.5px | 450 | 1.14 | -0.029em | — | circularXx | Compact supporting headings and product labels. |
| body | 16px | 500 | 1.27 | -0.027em | — | circularXx | Short descriptions and supporting product copy. |
| caption | 13px | 400 | 1.5 | 0 | — | circularXx | Small availability notes, review details and footer microcopy. |
| button | 13px | 400 | 1.5 | 0 | — | circularXx | Compact labels inside high-contrast pill CTAs. |
| nav | 13px | 400 | 1.5 | 0 | — | circularXx | Small, quiet navigation links across the header and footer. |
| link | 14.5px | 400 | 1.2 | -0.02em | — | circularXx | Product actions, supporting links and review-card references. |

OpenType features in use: `"ss08"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 3, 6, 12, 13, 16, 18, 26, 29, 35, 41, 47, 62 px.
- Section rhythm 86px · element gap 6px · card padding 26px · max content width 1381px.

Use a wide, single-column page with full-bleed media bands and centered content. The measured page max width is 1381px; keep content aligned around each showcase rather than introducing complex grids. The home page moves from a dark hero through white and pale-gray product bands, then into black review, brand-story and footer sections. Give each section a pronounced vertical pause; keep the overall density comfortable. Reserve multi-column layout for review cards and footer content.

## Shape & elevation

- Radius: button `9999px` · card `18px` · link `9999px` · xs `18px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page favors flat, uninterrupted color bands over shadows or layered UI. Review cards use a thin #808080 outline against black, with rounded corners and no measured shadow. Keep product photography visually distinct from interface layering; reserve pill silhouettes for CTA links and buttons.

## Imagery

Treat product visuals as the main event: large, centered, polished 3D-style hardware imagery against quiet monochrome backdrops. Preserve generous negative space around each device and let distinctive product colors live inside the imagery. Keep editorial copy brief and avoid adding decorative illustration that competes with the consoles.

## Components

### Global navigation

Sparse, small-text navigation across the top, with grouped links on a light first-view canvas and a compact shopping indicator.

### Full-bleed product hero

A centered campaign label and prominent headline sit above large handheld-and-dock imagery, followed by a pill-shaped preorder link and brief shipping note.

### Product showcase bands

Single-column full-bleed white or #eaeaea bands give each product collaboration or console a centered headline, large hardware image and concise actions.

### Reviews cards

A centered section heading introduces horizontally arranged dark cards with #808080 outlines, prominent scores and compact quotation text.

### Brand statement

Centered white brand copy and a simple All Products link sit on the black canvas.

### Newsletter footer

A dark, two-column footer combines compact site links, a short newsletter message, email input, subscribe action and small social links.

### Measured component styles

- **Primary button** (“Sold Out”): background #000000 · text #ffffff · radius 3.35544e+07px · padding 11.8px 47px · 400 17.6256px circularXx
- **Link** (“4.5/5 "Editors Choice Award" - Gizmodo”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px circularXx
- **Input**: transparent background · text #ffffff · radius 0px · padding 0px · 400 13.2192px circularXx
- **Card** (“4.5/5 "Editors Choice Award" - Gizmodo”): transparent background · text #ffffff · border 1px solid #808080 · radius 17.6256px · padding 26.5px · 400 16px circularXx
- **Navigation item** (“Store Products Editions Developer Suppor”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px circularXx

## Do

- Keep the interface palette monochrome using the measured colors.
- Give each product showcase its own uninterrupted full-width band.
- Center product imagery and headline content within showcase sections.
- Use CircularXX or a close rounded sans-serif substitute throughout.
- Keep navigation, captions and secondary copy visually quiet.
- Use thin gray outlines for review cards on black.

## Don't

- Don't add accent colors to the interface palette.
- Don't crowd product imagery with extra interface elements.
- Don't turn every section into a card or boxed container.
- Don't use heavy shadows or decorative gradients.
- Don't make navigation or supporting labels compete with the main headline.
- Don't apply product-image colors as sitewide UI colors.

## Agent prompt

Build a new Analogue-style page with a calm, product-first visual hierarchy. Use Console Black (#000000) as the dark canvas, Gallery White (#ffffff) for light showcase bands and inverse text, Soft Alloy (#eaeaea) for a contrasting product band, and Graphite Hairline (#808080) only for restrained card borders. Set all copy in a rounded sans-serif close to CircularXX, with tight tracking on centered medium-weight headlines and compact, regular navigation and captions. Structure the page as spacious, full-bleed product sections with large centered hardware imagery and short pill-shaped actions. Add a dark review area with outlined cards, followed by a compact brand statement and practical footer. Keep surfaces flat, color limited, and hardware imagery visually dominant.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and campaign label above large full-bleed handheld-and-dock product imagery. | Preorder action, Shipping status | Centered hero type, Monochrome backdrop, Pill CTA |
| 2 | product-showcase | Single-column white band with centered collaboration identity and two large product images. | Sold-out status, External shop link | White canvas, Centered product pair, Compact pill button |
| 3 | product-showcase | Single-column pale-gray band with centered title, hardware imagery and concise product actions. | Buy action, Explore link | #eaeaea surface, Centered showcase, Product-led layout |
| 4 | reviews | Black section with centered heading and a horizontal row of review cards. | Ratings overview, Review excerpts | Outlined cards, Score-first layout, Horizontal card row |
| 5 | cta | Centered brand statement and a simple text link on black. | Brand introduction, All Products link | Centered copy, Minimal text CTA, Dark canvas |
| 6 | footer | Compact dark footer with two-column content, grouped navigation, newsletter input and legal links. | Newsletter signup, Footer navigation | Small text, Email field, Social and legal links |

## Source CSS custom properties (selected)

```css
--background: #ffffff;
--foreground: #000000;
--menuForeground: #000000;
--accent-1: #aeaeae;
--accent-2: #595959;
```

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