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

# Analogue · Design System

> Quiet typography, immersive work, thoughtful space.

**Theme:** light · **Industry:** agency · **Source:** https://analogueagency.com/ · **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’s homepage pairs a restrained grayscale editorial framework with a cinematic, dark opening video and vivid client project imagery. Large, tightly tracked sans-serif statements and generous blank space let the agency introduction and work portfolio feel direct and considered.

## North star

Keep the interface quiet and grayscale, reserving visual intensity for full-bleed media and tightly set editorial statements.

## Overview

The page opens on a full-viewport, near-black cinematic image with a single centered white statement; this dark blue-black atmosphere belongs to the hero media, not the measured interface palette. The main canvas is #ededed, carrying almost-black #1c1c1c text and #7a7a7a secondary copy. A muted #b8b8b8 section surface and a #000000 inverse band provide restrained tonal changes; project imagery supplies most of the brighter colour. Graphik Medium shapes the page from compact captions to large display statements, with notably tight negative tracking and medium weight. The layout is editorial rather than card-driven: an agency introduction and jump links lead into a centered work heading, then a vertical sequence of broad, rounded project images. Substantial empty space separates the cinematic opening, introduction, portfolio, and closing contact prompt. Keep interface decoration minimal so media and typography carry the visual emphasis.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ededed` | `--color-gallery-white` | brand | Main page canvas and pale text used over the cinematic opening. |
| Soft Concrete | `#b8b8b8` | `--color-soft-concrete` | surface | Muted section surface; use as a tonal band rather than a prominent card fill. |
| Warm Ink | `#1c1c1c` | `--color-warm-ink` | neutral | Primary headings and body copy on the light canvas. |
| Quiet Graphite | `#7a7a7a` | `--color-quiet-graphite` | semantic | Secondary copy and understated text links, including emphasized intro phrases. |
| Deep Black | `#000000` | `--color-deep-black` | surface | Inverse section surface; not the measured dominant colour of the video artwork. |

### Semantic aliases

`--color-canvas` → `#ededed` (Gallery White) · `--color-surface` → `#b8b8b8` (Soft Concrete) · `--color-surface-2` → `#000000` (Deep Black) · `--color-text` → `#1c1c1c` (Warm Ink) · `--color-text-muted` → `#7a7a7a` (Quiet Graphite) · `--color-text-subtle` → `#ededed` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1c1c1c` | `#ededed` | 14.56:1 | AAA |
| `#1c1c1c` | `#b8b8b8` | 8.59:1 | AAA |
| `#1c1c1c` | `#000000` | 1.23:1 | fail |
| `#7a7a7a` | `#ededed` | 3.67:1 | AA-large |
| `#7a7a7a` | `#b8b8b8` | 2.16:1 | fail |
| `#7a7a7a` | `#000000` | 4.89:1 | AA |
| `#ededed` | `#b8b8b8` | 1.69:1 | fail |
| `#ededed` | `#000000` | 17.94:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Graphik Medium | `--font-body` | webfont | 500, 400 | Shared typeface for display statements, headings, body copy, and captions. | Inter |

- **Graphik Medium:** Medium weight dominates; use tight negative tracking for display, heading, and body roles. Captions are lighter and compact.

### Type scale — Custom (ratio ≈ 1.826, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 500 | 1 | -0.05em | — | Graphik Medium | Oversized editorial statements and prominent linked phrases. |
| h1 | 40px | 500 | 1.05 | -0.05em | — | Graphik Medium | Primary page and section headings, including the agency introduction. |
| body | 18px | 500 | 1.1 | -0.04em | — | Graphik Medium | Introductory and supporting copy, set compactly. |
| caption | 11px | 400 | 1.25 | -0.027em | — | Graphik Medium | Small labels and supporting metadata around navigation or projects. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 10, 11, 13, 20, 30, 40, 50, 60, 70, 100 px.
- Section rhythm 100px · element gap 10px · card padding — · max content width —.

Use a spacious, vertically sequenced editorial layout. The opening is full-bleed media with centered copy; below it, a large gap precedes the left-aligned agency introduction and compact jump links. Center the work heading above a single-column run of broad project images, then leave generous room before the closing contact prompt. Measurements indicate a two-column structure in the overall section, but the visible work sequence reads as a vertical portfolio. Preserve natural alignment shifts rather than forcing every block into a rigid centered grid; no measured page maximum width is available.

## Shape & elevation

- Radius: media `10px` · link `13px` · xs `10px` · sm `13px` · md `15px`
- No box shadows measured: the page is flat.

The interface reads mostly flat: no measured shadows or gradients define its components. Separate content through whitespace, changes in light and dark section surfaces, and large media blocks rather than stacked cards. Project images have softly rounded corners; avoid prominent borders, floating panels, or ornamental depth effects.

## Imagery

Lead with cinematic full-bleed motion imagery, dark and radiating toward a bright center, with a short white statement overlaid. Follow with large client project visuals: product screens, devices, brand collateral, and presentation scenes. Keep images visually dominant and close to their natural colour; the supplied work imagery, not interface accents, carries vivid colour. Media corners appear softly rounded.

## Components

### Cinematic opening

Full-bleed dark video or image with one centered white statement; keep interface chrome out of the focal area.

### Agency introduction

Large left-aligned Graphik statement on #ededed, with selected secondary phrases in #7a7a7a.

### Jump links

Small caption-scale navigation with restrained text styling and a fine vertical hairline as a visual guide.

### Work heading

Centered section title with a quieter secondary link beneath it, set against the pale canvas.

### Project gallery

Vertical sequence of broad, rounded project images; let client work supply the colour and texture.

### Closing contact prompt

Minimal brand sign-off with a prominent invitation and subdued booking link, surrounded by open space.

### Measured component styles

- **Link** (“digital design studio”): transparent background · text #7a7a7a · radius 0px · padding 0px · 500 60px Graphik Medium

## Do

- Use #ededed as the dominant interface canvas.
- Set primary copy in #1c1c1c and secondary copy in #7a7a7a.
- Give the opening media a cinematic, full-bleed treatment.
- Use tight tracking for prominent Graphik-style statements.
- Keep project imagery large and vertically sequenced.
- Use whitespace to distinguish major page moments.

## Don't

- Do not add bright interface accent colours.
- Do not treat video pixels as the brand palette.
- Do not pack content into dense card grids.
- Do not add heavy shadows or decorative borders.
- Do not center every text block; preserve editorial alignment.
- Do not let interface decoration compete with project imagery.

## Agent prompt

Build a new agency page in Analogue’s restrained editorial style. Use Gallery White (#ededed) as the main canvas, Warm Ink (#1c1c1c) for primary copy, Quiet Graphite (#7a7a7a) for secondary text, and Soft Concrete (#b8b8b8) or Deep Black (#000000) only for restrained section-surface contrast. Set a single clean sans-serif close to Graphik Medium, with tight tracking on large statements and compact captions. Open with immersive, dark full-bleed media and a centered short line. Follow with a spacious left-aligned introduction, understated navigation, a centered work label, and a vertical gallery of broad project visuals. Finish with a minimal contact invitation. Favor whitespace and flat surfaces; use media, not interface accents, for colour and drama.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Long editorial section; cinematic opening, spacious introduction, centered work label, and vertically stacked full-width project media. | jump links, project browsing, contact invitation | full-bleed video, large editorial type, rounded project imagery, grayscale canvas |

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