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

# Analogue aF-1 — Product Launch · Design System

> Quiet space, vivid light, and a camera in focus.

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://af1.analogueshop.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 introduces the aF-1 through a restrained editorial page that alternates open white space, immersive dark bands, and focused camera imagery. A vivid blue hero glow and compact electric-blue CTA provide the page’s main colour accents.

## North star

Give each product image and short editorial statement room to breathe, using blue only as a precise point of emphasis.

## Overview

The visual system is built around a clean white canvas interrupted by long, near-black storytelling sections. In the first viewport, a blue atmospheric gradient frames the black camera, while a compact saturated-blue CTA supplies the only strong interface accent. Graphik Medium carries the modern, tightly tracked interface and headings; ITC Garamond Std Light Narrow adds a contrasting editorial voice in product-oriented moments. The page uses a single-column, full-width narrative rather than a dense catalogue: large media areas and generous vertical pauses let each claim or image register on its own. Camera photography and rendered product imagery stay central, with dark surfaces and luminous blue lighting creating contrast. Rounded controls and media frames soften the otherwise sharply minimal composition. Treat blue and charcoal gradient stops as atmosphere and imagery where appropriate, not as additional UI colours.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, light hero text, and the clean backdrop around product imagery. |
| Soft Graphite | `#171717` | `--color-soft-graphite` | surface | Primary text and dark product-feature cards or inverse sections. |
| Deep Black | `#070707` | `--color-deep-black` | surface | Near-black background for the LiDAR feature and its full-bleed video continuation. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Deepest text and media tone, including black details in camera imagery. |
| Midnight Slate | `#202029` | `--color-midnight-slate` | surface | Dark gradient transition in long cinematic storytelling sections. |
| Muted Graphite | `#696969` | `--color-muted-graphite` | neutral | Low-emphasis neutral text and small secondary details. |
| Electric Blue | `#002fff` | `--color-electric-blue` | accent | Primary Stay tuned button; use sparingly against the pale hero. |
| Smoke Grey | `#545454` | `--color-smoke-grey` | surface | Lower stop in a dark gradient; atmospheric transition rather than a standalone UI fill. |
| Deep Cobalt | `#00368c` | `--color-deep-cobalt` | brand | Blue radial-gradient stop in hero or media lighting, not a general interface background. |
| Luminous Cobalt | `#004fce` | `--color-luminous-cobalt` | brand | Bright radial-gradient stop within blue-lit imagery and hero atmosphere. |
| Mist Grey | `#ededed` | `--color-mist-grey` | neutral | Pale endpoint in a media gradient; use as atmospheric image treatment, not a UI accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#171717` (Soft Graphite) · `--color-surface-2` → `#070707` (Deep Black) · `--color-surface-3` → `#000000` (Pure Black) · `--color-text` → `#171717` (Soft Graphite) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#000000` (Pure Black) · `--color-accent` → `#002fff` (Electric Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#171717` | `#ffffff` | 17.93:1 | AAA |
| `#171717` | `#070707` | 1.12:1 | fail |
| `#171717` | `#000000` | 1.17:1 | fail |
| `#ffffff` | `#171717` | 17.93:1 | AAA |
| `#ffffff` | `#070707` | 20.14:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#171717` | 1.17:1 | fail |
| `#000000` | `#070707` | 1.04:1 | fail |
| `#002fff` | `#ffffff` | 7.37:1 | AAA |

### Gradients

- `linear-gradient(rgb(8, 8, 8) 23.921%, rgb(32, 32, 41) 100%)`
- `linear-gradient(rgb(0, 0, 0) 0%, rgb(7, 7, 7) 39.1769%, rgb(84, 84, 84) 96.4193%)`
- `radial-gradient(50% 75%, rgb(0, 54, 140) 0%, rgb(0, 79, 206) 10.6771%, rgb(237, 237, 237) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Graphik Medium | `--font-body` | webfont | 400 | Primary headings, body copy, and interface controls. | Inter |
| ITC Garamond Std Light Narrow | `--font-itc-garamond-std-light-narrow` | webfont | 400 | Editorial contrast in selected product and campaign copy. | Cormorant Garamond |
| sans-serif | `--font-sans-serif` | system | 400 | Small captions and secondary card labels. | Inter |

- **Graphik Medium:** Measured at regular weight; headings use tight negative tracking and compact line-height. Keep casing natural.
- **ITC Garamond Std Light Narrow:** Use a light, narrow serif character to contrast with the crisp sans-serif system; do not overuse.
- **sans-serif:** Small plain sans-serif captions, including product-feature card copy.

### Type scale — Custom (ratio ≈ 1.69, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | 1 | -0.045em | — | Graphik Medium | Hero product name and primary launch statement. |
| h2 | 34px | 400 | 1 | -0.053em | — | Graphik Medium | Feature and campaign section headlines. |
| body | 14px | 400 | 1.2 | -0.021em | — | Graphik Medium | Supporting product descriptions and form text. |
| caption | 12px | 400 | normal | 0 | — | sans-serif | Small image notes, availability text, and labels. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3, 4, 5, 10, 11, 14, 15, 20, 25, 40, 50, 100, 115, 200 px.
- Section rhythm 100px · element gap 10px · card padding 20px · max content width 1400px.

A spacious, single-column story spans a measured maximum content width of 1400px, with full-bleed media used to break up text-led sections. The hero centres its title, signup form, and camera image inside a large framed panel; later headings alternate between left and centred alignment. Section gaps are generous, around the measured 100-unit rhythm, while controls and cards use tighter internal spacing. Keep density low: avoid packing feature copy into a conventional multi-column catalogue.

## Shape & elevation

- Radius: button `10px` · input `15px` · card `20px` · media `20px` · xs `10px` · sm `15px` · md `20px`
- Shadow `inset` (input): `rgba(255, 255, 255, 0.15) 0px 0px 0px 1px inset`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px`

The page is mostly flat, with contrast created by white and near-black section bands rather than stacked cards. Media and hero frames have rounded corners, and controls are softly rounded. Avoid prominent drop shadows; the measured input inset highlight is subtle and the general interface has no strong border system.

## Imagery

Use large, carefully lit product photographs or realistic camera renders, framed as the visual anchor rather than decoration. The hero places a black compact camera against a pale blue-to-white glow; later media may be full bleed or contained in rounded frames. Keep product surfaces dark and reflective, and use motion/video for a small number of cinematic feature moments.

## Components

### Hero signup

Centred product title and short line sit above an email form, with a blue Stay tuned button and a small availability caption.

### Email input

Dark or translucent field with white text, a 15px radius, generous measured padding, and a fine inset white highlight.

### Primary CTA

Electric-blue #002fff fill, white Graphik Medium label, 10px radius, and compact horizontal padding.

### Product media frame

Large camera image or video set within a clean frame; measured media and cards use a 20px radius.

### Feature card

Dark #171717 product detail surface with concise copy and a rounded media-led presentation.

### Editorial section

Single short headline placed in generous white or dark space, with left or centred alignment depending on the narrative beat.

### Measured component styles

- **Primary button** (“Stay tuned”): background #002fff · text #ffffff · radius 10px · padding 0px 14px · 500 13px Graphik Medium
- **Secondary button** (“Stay tuned”): background #ffffff · text #171717 · radius 10px · padding 0px · 400 14px Graphik Medium
- **Link** (“Start scrolling”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Input**: background #313131 · text #ffffff · radius 15px · padding 15px 115px 15px 15px · 400 15px Graphik Medium · shadow rgba(255, 255, 255, 0.15) 0px 0px 0px 1px inset
- **Card** (“Crystal clear f/2.8 Large aperture optic”): background #171717 · text #000000 · radius 20px · padding 20px · 400 12px sans-serif

## Do

- Keep the interface palette predominantly white, charcoal, and black.
- Reserve #002fff for the primary CTA or a tiny interface accent.
- Let product photography occupy generous, uninterrupted areas.
- Alternate white editorial space with near-black cinematic sections.
- Use Graphik-style sans-serif typography with tight headline tracking.
- Keep signup and feature copy short and visually secondary to the camera.

## Don't

- Do not introduce extra UI colours from the photography palette.
- Do not turn the page into a dense product catalogue or dashboard.
- Do not add heavy borders, shadows, or decorative card stacks.
- Do not crowd the hero camera with supporting elements.
- Do not use the blue gradient as a repeated section background everywhere.
- Do not replace editorial whitespace with repetitive grids.

## Agent prompt

Build a new product page in Analogue’s restrained camera-launch style. Use Gallery White (#ffffff) as the main canvas, Soft Graphite (#171717) for text and dark feature surfaces, and Deep Black (#070707) for occasional cinematic sections. Give the product a large, carefully lit photographic or rendered showcase; a pale blue atmospheric glow may surround imagery, using Deep Cobalt (#00368c), Luminous Cobalt (#004fce), and Mist Grey (#ededed) as image-gradient stops rather than routine UI fills. Set headings and controls in a Graphik-like sans serif with tight tracking, with an optional narrow editorial serif accent. Keep the layout spacious and mostly single-column, using long section pauses and alternating light and dark storytelling bands. Make the primary action the sole vivid interface accent: an Electric Blue (#002fff) rounded button. Keep borders and shadows minimal.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centred launch copy and email signup above a large camera render in a pale blue-lit panel. | email signup, availability note, scroll prompt | blue primary CTA, rounded media panel, centred hero copy |
| 2 | gallery | Full-bleed visual storytelling with a centred headline and image sequence. | editorial storytelling, reference-image note | full-bleed media, centred headline, dark section |
| 3 | other | Open, minimal transition area without visible copy or controls. | scroll-based pacing | dark gradient, uninterrupted space |
| 4 | feature-split | Large dark field with a short headline aligned to the left. | editorial statement | dark gradient, isolated headline |
| 5 | other | Dark, spacious section with a compact headline near the upper-left narrative area. | brand storytelling | near-black gradient, white headline |
| 6 | product-showcase | White section presenting feature headlines alongside camera detail imagery. | feature introduction, product detail browsing | white canvas, rounded product imagery, editorial typography |
| 7 | other | Short full-width colour transition between product feature areas. | visual pacing | cyan section band, minimal content |
| 8 | product-showcase | Continuation of the cyan-backed showcase area with spacious media-led composition. | product exploration | cyan background band, large visual area |
| 9 | gallery | White section with a centred heading and a generous product-viewing area. | closer product inspection | centred title, open white space |
| 10 | other | White editorial copy block with a left-aligned statement. | design context | left-aligned heading, minimal white layout |
| 11 | product-showcase | Large white media area reserved for product imagery or a visual transition. | visual product exploration | white canvas, minimal composition |
| 12 | feature-split | Centred technical headline on a near-black section. | technology explanation | dark background, white centred type |
| 13 | video | Full-bleed video continues the near-black technical section. | video demonstration | full-bleed video, dark surroundings |

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