# Spacelab · Design system migration spec

> Source: https://spacelab.co.uk  ·  Curated by OpenDesign  ·  en

> A strong example of how extreme restraint and massive typography can create a premium, sophisticated brand presence.

## 1. Identity DNA

The Spacelab design system is modeled on an open-plan studio, where the principles of light, space, and structural honesty define the environment. It is a system of extreme restraint, where the architecture of the layout and the content itself provide all necessary structure and ornament.

**One-liner:** A minimalist, photo-led portfolio for an architectural design studio.
**Keywords:** architectural · exploratory · studio · space · minimal
**Analogy:** An open-plan studio where light, space, and structural honesty define the environment.

## 2. Color

A strict monochrome palette of white and dark charcoal serves as a neutral frame. The system deliberately cedes all chromatic expression to the photography.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#2C2222` | body text |
| `--ink-soft` | `#B2B4B1` | secondary text |
| `--muted` | `#B2B4B1` | placeholder |
| `--line` | `rgba(255,255,255,0)` | divider |

**Color principle:** Strict monochrome palette where photography provides all color.

The principle is absolute: color is a property of the content, never the container.

## 3. Typography

The typographic voice is built on a clean, uniform grotesque sans-serif set at a regular weight of 400. This creates a consistent, neutral tone that defers to the scale and composition of the text blocks themselves.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 62px | 1.05 | 400 | 0.7px | Hero manifesto statement |
| heading | 30px | 1.07 | 400 | 0.3px | Section titles |
| body | 21px | 1.2 | 400 | normal | Standard navigation and body text |

**Type rules:**
- Use a uniform font-weight of 400 across all sizes
- Maintain a tight line-height of 1.05 to 1.2 for clean vertical rhythm
- Use slight positive letter-spacing for clarity

## 4. Spacing

All vertical rhythm is governed by a strict 4px baseline, creating a clean and predictable structural grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 21 / 32 / 42 / 84 px
- **Rhythm:** Based on a 4px baseline, with prominent use of 21px (1.5rem) and 42px (3rem) increments.

## 5. Surfaces

Surfaces are defined by absence; shadows and visible borders are entirely omitted. Depth is communicated solely through the contrast between typography, negative space, and high-contrast photography.

- **Radius:** sm 4px · md 0px · lg 0px · pill 999px
- **Borders:** No visible borders; relies on spacing and high-contrast photography.

## 6. Layout

The foundational layout is an asymmetrical split, with a fixed left navigation column anchoring the experience. A fluid right content area expands to present full-bleed photography and massive typographic statements.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 42px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetrical split layout with a fixed left navigation column and a fluid right content area.

## 7. Motion & Interaction

Motion is functional and restrained, used only to confirm user interaction. A consistent 0.4-second duration is applied to simple opacity and color shifts.

- **Durations:** micro 250ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Standard 0.4s fade and color transitions for UI interactions

- **Hover:** Subtle color shifts (0.4s transition) on navigation links.
- **Click:** Standard link navigation.
- **Transition:** Consistent 0.4s duration for opacity and color changes.
- **Keyboard:** Standard browser focus outlines.

## 8. Voice & Don'ts

The editorial voice is direct, confident, and minimalist, mirroring the visual system. Headlines are bold, declarative statements, while calls to action are quiet and functional text links.

- **Tone:** Direct, confident, and minimalist.
- **Headline style:** Bold, declarative, and typographically dominant.
- **CTA style:** Quiet and functional text links.
- **Avoid:** Marketing jargon / Overly complex sentences / Visual clutter or decorative borders

### Don'ts
- ❌ don't use bold font-weights — screenshot shows all text in a regular 400 weight
- ❌ don't add decorative UI borders — screenshot shows a completely borderless layout
- ❌ don't use vibrant accent colors — screenshot relies strictly on neutral text and photography
- ❌ don't use a serif font — screenshot uses a clean, uniform grotesque sans-serif
- ❌ don't create a rigid grid layout — screenshot shows a split layout with a distinct left column
- ❌ don't use drop shadows on elements — screenshot shows a completely flat, 2D surface treatment

The system deliberately does not create a rigid grid, as the split layout provides a more dynamic, architectural structure.

## System Prompt (paste into AI tool)

```
A minimalist, photo-led portfolio for an architectural design studio. Positioning: High-end architectural studio. Key hex colors: #FFFFFF background, #2C2222 ink, #B2B4B1 muted. Font categories: Grotesque sans-serif at a uniform 400 weight. Critical donts: Do not use bold font-weights; do not add decorative UI borders; do not use vibrant accent colors; do not use serif fonts; do not use drop shadows. The design prioritizes massive typography and full-bleed photography over traditional UI components, creating a clean, spacious feel.
```