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

# Arctic · Design System

> Analog stories, framed with editorial restraint.

**Theme:** light · **Industry:** design · **Source:** https://surface.arcticdesignrange.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._

Arctic introduces its analog-themed editorial through a gallery-like hero, oversized typography, and carefully placed photographs. Quiet monochrome sections and generous breathing room let the imagery and paper design take center stage.

## North star

Keep the interface monochrome and spacious, letting oversized editorial type and art-directed photography provide the visual energy.

## Overview

The page relies on a restrained palette: Gallery White (#ffffff) forms the opening and product-story canvas, Soft Paper (#f7f7f7) marks the editorial introduction and footer, and Ink (#000000) carries nearly all text and the primary action. Munken Sans Web provides a consistent voice, from compact bold navigation to an immense uppercase hero word and readable editorial paragraphs. The hero is a white, open field where photographs hover at varied positions around the oversized title; their color is intentionally contained in the images rather than used as interface accents. Below, a centered text column and black Read more button sit on a pale band, followed by a broad image gallery. A white product feature pairs concise copy with a photograph, then the pale footer organizes links into columns. Spacious section transitions and flat surfaces keep attention on typography, image composition, and paper texture.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Ink | `#000000` | `--color-ink` | brand | Primary text, navigation, links, oversized hero lettering, and the filled Read more button. |
| Soft Paper | `#f7f7f7` | `--color-soft-paper` | surface | Pale editorial introduction band, gallery backdrop, and footer canvas. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Opening hero and product feature canvas; also the contrasting label on the black primary button. |

### Semantic aliases

`--color-canvas` → `#f7f7f7` (Soft Paper) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f7f7f7` | 19.6:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Munken Sans Web | `--font-body` | webfont | 400, 700, 900 | Used throughout navigation, oversized hero lettering, editorial headings and copy, links, buttons, and footer. | Montserrat |

- **Munken Sans Web:** Use a clean sans voice with bold headings, very heavy button labels, regular reading copy, and uppercase display lettering; tracking stays neutral.

### Type scale — Custom (ratio ≈ 2.259, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 230.5px | 700 | 1 | 0 | uppercase | Munken Sans Web | Oversized uppercase word anchoring the opening image collage. |
| h1 | 40px | 700 | 1.2 | 0 | — | Munken Sans Web | Primary editorial section heading and page-level title. |
| h2 | 30px | 400 | 1.35 | 0 | — | Munken Sans Web | Secondary section headings, including the product-range feature. |
| body | 20px | 400 | 1.5 | 0 | — | Munken Sans Web | Introductory and product-description paragraphs. |
| caption | 16px | 700 | 1.5 | 0 | — | Munken Sans Web | Compact bold image labels or supporting emphasis. |
| button | 20px | 900 | 1.5 | 0 | — | Munken Sans Web | Heavy label on the black Read more action. |
| nav | 16px | 700 | 1.5 | 0 | — | Munken Sans Web | Bold header and footer navigation labels. |
| link | 20px | 400 | 1.5 | 0 | — | Munken Sans Web | Editorial links such as Explore more. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 6, 10, 14, 16, 32, 36, 38, 40, 52, 64, 72, 80, 96, 112, 128 px.
- Section rhythm 80px · element gap 32px · card padding — · max content width 816px.

A spacious, mostly single-column editorial page with a full-width opening canvas and image collage. The measured content max width is 816px; the introduction is centered, while the product feature aligns copy beside an image. The gallery introduces a three-column arrangement and full-bleed imagery. Sections alternate white and pale gray, with generous measured section spacing and a compact, two-column footer. Keep density low and let each block breathe.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.23, 1, 0.32, 1)` on interactive elements.

The design is predominantly flat, with no measured shadow system, gradient, or rounded-card treatment. Use clean rectangular image crops and uninterrupted white or pale-gray bands. Visual layering comes from photographs placed over the oversized hero lettering, not from elevated containers or decorative borders.

## Imagery

Use editorial photography and printed-paper imagery rather than decorative UI graphics. The hero collage mixes portraits, interiors, food, artwork, and publication details in varied rectangular crops, positioned asymmetrically around the title. Later imagery is broad and tactile: still-life product photography and paper samples. Keep colors within the photographs; the surrounding interface remains monochrome.

## Components

### Hero collage

White opening canvas with a huge uppercase word and an asymmetric arrangement of rectangular editorial photographs layered around and over the lettering.

### Header navigation

Minimal top row with a small brand mark, centered Arctic wordmark, and right-aligned menu icon; navigation uses bold 16px Munken Sans Web.

### Editorial introduction

Centered text on #f7f7f7: a bold 40px heading, 20px regular paragraph, and black rectangular Read more button with white heavy text.

### Image gallery

Three-image feature region with broad, clean rectangular photographs and a spacious pale-gray setting.

### Product-range feature

White section pairing a heading, short descriptive copy, and Explore more link with a product photograph.

### Footer

Pale-gray two-column closing area with brand mark, compact navigation links, and a small copyright line.

### Measured component styles

- **Primary button** (“Read more”): background #000000 · text #ffffff · radius 0px · padding 13.8px 37.5px · 900 20px Munken Sans Web
- **Link** (“Explore more”): transparent background · text #000000 · radius 0px · padding 0px · 700 20px Munken Sans Web
- **Navigation item** (“Index”): transparent background · text #000000 · radius 0px · padding 0px · 700 16px Munken Sans Web

## Do

- Use Ink (#000000) for interface text and primary actions.
- Alternate Gallery White (#ffffff) and Soft Paper (#f7f7f7) as calm section canvases.
- Make the hero word exceptionally prominent and uppercase.
- Arrange editorial images asymmetrically around the hero lettering.
- Keep body copy in a restrained, readable column.
- Use rectangular imagery and flat, unadorned surfaces.

## Don't

- Do not introduce unmeasured interface colors.
- Do not add gradients, drop shadows, or rounded card styling.
- Do not make every section a dense grid.
- Do not let interface decoration compete with the photographs.
- Do not apply the illustrative photo palette to buttons or navigation.
- Do not use tightly packed section transitions.

## Agent prompt

Build a new editorial page in Arctic’s visual style. Keep the UI monochrome: use Ink (#000000) for type, links, and the primary action, Gallery White (#ffffff) for the main canvas, and Soft Paper (#f7f7f7) for alternating content bands. Use Munken Sans Web, or a close sans substitute, with neutral tracking, bold headings, and readable regular-weight copy. Create a spacious opening with one enormous uppercase display word and an asymmetric collage of rectangular editorial photographs. Follow it with a narrow centered introduction, a simple black button, a broad image-led feature, and a copy-plus-image product section. Keep surfaces flat, avoid decorative borders and shadows, and reserve color for the photography. End with a quiet, compact footer organized into columns.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width white canvas; oversized centered lettering with photographs positioned asymmetrically around and across it. | brand mark and menu access, visual-first entry | oversized uppercase display, rectangular image collage, minimal header |
| 2 | other | Single-column pale-gray band with centered, constrained editorial copy and a centered action. | editorial introduction, Read more action | bold heading, regular body copy, black rectangular button |
| 3 | gallery | Three-image gallery region with broad photography and open space around the image compositions. | image-led exploration | editorial photography, rectangular crops, pale-gray canvas |
| 4 | feature-split | White section with copy aligned beside a product photograph. | Explore more link | heading and body copy, side-by-side image, understated text link |
| 5 | footer | Pale-gray footer with brand identity and links distributed across two columns. | secondary navigation, copyright information | brand mark, compact text links, small copyright line |

## Source CSS custom properties (selected)

```css
--space-base: 1rem;
--space-1: calc(1 * 1rem);
--space-2: calc(2 * 1rem);
--space-3: calc(3 * 1rem);
--space-4: calc(4 * 1rem);
--space-5: calc(5 * 1rem);
--space-6: calc(6 * 1rem);
--space-7: calc(7 * 1rem);
--space-8: calc(8 * 1rem);
--space-9: calc(9 * 1rem);
--space-10: calc(10 * 1rem);
```

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