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

# Spacelab · Design System

> Quiet typography, generous space, architecture in focus.

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

Spacelab’s homepage pairs a restrained monochrome interface with a large architectural photograph. An asymmetric composition gives the studio statement prominence while keeping story navigation quiet and peripheral.

## North star

Keep the interface nearly invisible: use white space and a single strong architectural image to carry the story.

## Overview

The page uses a white canvas (#ffffff) as its dominant visual field, with black (#000000) for the studio statement and selected navigation, and muted grey (#b2b4b1) for secondary links. These measured interface colours define the brand; darker and softer tones visible in the screenshot belong mainly to the architectural photograph, not additional UI palette colours. HelveticaNeue gives the oversized introductory statement a clean, editorial voice, with regular weight and tight, even lines. The composition is deliberately asymmetric: a compact wordmark sits at the upper left, while the headline and wide architectural image occupy the right side. A small vertical story list anchors the lower-left area. Large areas of unoccupied white space separate these elements, making the photograph feel like the page’s principal feature without enclosing it in a card. The overall impression is calm, precise, and image-led, with no visible decorative borders, shadows, or coloured section bands.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas and uninterrupted negative space around the headline, navigation, and featured photograph. |
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Primary statement, wordmark, and active story link; provides the page’s strongest text contrast. |
| Quiet Grey | `#b2b4b1` | `--color-quiet-grey` | neutral | Secondary story links, including the muted navigation items beneath the active link. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#b2b4b1` (Quiet Grey)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#b2b4b1` | `#ffffff` | 2.09:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| HelveticaNeue | `--font-body` | webfont | 400 | Used for the large introductory statement, wordmark, and story navigation. | Inter |

- **HelveticaNeue:** Regular weight throughout; clean sans-serif forms, with the headline set large and secondary links kept understated.

### Type scale — Major Third (ratio ≈ 1.25, base 62px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 62px | 400 | 1 | 0.011em | — | HelveticaNeue | Large introductory studio statement above the featured architecture image. |
| caption | 21px | 400 | 1.2 | 0 | — | HelveticaNeue | Story navigation links and smaller supporting interface text. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 5, 21, 39, 42, 63, 84, 147 px.
- Section rhythm 84px · element gap — · card padding — · max content width —.

Use a spacious, asymmetric composition rather than centered content. Place the wordmark near the upper-left edge, set the main statement in a broad column on the right, and align the large image directly beneath it. Keep story navigation in a separate left-side column, vertically offset from the top. Preserve generous white gaps between the header, statement, image, and navigation; the page feels comfortable and sparse, with no visible boxed grid or constrained card system.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s ease` on interactive elements.

The interface is flat: white canvas, plain text, and an unframed photograph. No measured shadows, card surfaces, or visible border system define the page. Establish hierarchy through placement, scale, and contrast instead of layered panels or decorative effects.

## Imagery

Use a large, edge-aligned architectural photograph as the primary visual element. The reference shows a bright contemporary interior with tall glazing, dark structural supports, greenery, and people for scale. Keep the image natural and documentary in feel, with no visible frame, caption overlay, illustration, or graphic treatment.

## Components

### Wordmark

Small black “spacelab_” wordmark at the upper left, separated from the main content by substantial white space.

### Introductory statement

Large, regular-weight black HelveticaNeue statement, broken into short lines and aligned above the featured image.

### Story navigation

Vertical list of plain text links at the left; the active “All stories” link is black and other links use #b2b4b1.

### Featured architecture image

Wide, unframed photograph beneath the statement, showing a contemporary interior and occupying most of the right content column.

### Measured component styles

- **Link** (“Work”): transparent background · text #b2b4b1 · radius 0px · padding 0px · 400 20.9952px HelveticaNeue

## Do

- Keep the canvas white and visually quiet.
- Use black for the primary statement and active link.
- Set secondary navigation in muted grey.
- Place the statement and image in a right-side column.
- Keep the story list separate on the left.
- Let one architectural photograph dominate the content.

## Don't

- Do not add bright accent colours to the interface.
- Do not center every element into a uniform column.
- Do not wrap the photograph in a card or border.
- Do not add decorative shadows or gradients.
- Do not make secondary navigation as prominent as the statement.
- Do not treat photograph colours as additional brand palette colours.

## Agent prompt

Build a new page in Spacelab’s restrained architectural editorial style. Use Gallery White (#ffffff) as the canvas, Studio Ink (#000000) for the main statement and active navigation, and Quiet Grey (#b2b4b1) for secondary links. Set text in a clean HelveticaNeue-like sans serif, regular weight. Create an asymmetric layout: a compact wordmark at upper left, a vertical navigation list farther down that side, and a large statement above a prominent architectural photograph on the right. Let the image sit directly on the page without a frame or card treatment. Use generous, measured white space to separate elements; avoid shadows, gradients, coloured bands, and unnecessary interface decoration. Keep the result calm, image-led, and precise.

## Source CSS custom properties (selected)

```css
--primary: #007bff;
--secondary: #6c757d;
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
```

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