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

# The1 — Amsterdam · Design System

> Industrial character, expressed with bold simplicity.

**Theme:** light · **Industry:** real-estate · **Source:** https://the1.amsterdam/ · **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._

The1 presents NDSM office space through oversized typography, a restrained grey canvas and vivid color-coded property imagery. Its long editorial scroll moves from a compact intro into architectural visuals, large-scale graphic numerals and workplace photography.

## North star

Let enormous black typography and the quiet grey canvas carry the page, using saturated color only for property-coded imagery and graphic accents.

## Overview

A nearly continuous light-grey canvas gives this real-estate page an unusually restrained base, while near-black typography supplies its strongest contrast. The opening is led by huge, tightly tracked sans-serif display text, with the brand mark and menu kept small and unobtrusive. Four vivid green, pink, yellow and red bands identify property imagery; treat these as deliberate category colors, not as a general-purpose interface palette. The same colors return in oversized, cropped numerals, creating a graphic interlude between the introductory property presentation and later content. Architectural photographs are shown plainly and at generous scale, then give way to offset workplace-interior images. Layouts alternate between broad single-column moments and multi-column image arrangements, with asymmetric alignment and substantial open canvas. The page feels flat and direct: use clean edges, minimal borders and no decorative shadow treatment.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Concrete Mist | `#d9d9d9` | `--color-concrete-mist` | brand | Dominant page canvas and open space between image and content sections. |
| Foundry Ink | `#1f1f1f` | `--color-foundry-ink` | neutral | Headlines, body copy, brand mark and small circular menu control. |
| Wharf Green | `#027b49` | `--color-wharf-green` | accent | Green property card band and matching oversized graphic numeral background. |
| Studio Pink | `#f19ec8` | `--color-studio-pink` | accent | Pink property card band and corresponding graphic panel. |
| Signal Yellow | `#fbb833` | `--color-signal-yellow` | accent | Yellow property card band and corresponding graphic panel. |
| Brick Signal | `#fa4d43` | `--color-brick-signal` | accent | Red property card band and corresponding graphic panel. |

### Semantic aliases

`--color-canvas` → `#d9d9d9` (Concrete Mist) · `--color-surface` → `#f19ec8` (Studio Pink) · `--color-text` → `#1f1f1f` (Foundry Ink) · `--color-text-muted` → `#d9d9d9` (Concrete Mist) · `--color-accent` → `#027b49` (Wharf Green) · `--color-accent-2` → `#f19ec8` (Studio Pink) · `--color-accent-3` → `#fbb833` (Signal Yellow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1f1f1f` | `#d9d9d9` | 11.68:1 | AAA |
| `#1f1f1f` | `#f19ec8` | 8.21:1 | AAA |
| `#d9d9d9` | `#f19ec8` | 1.42:1 | fail |
| `#027b49` | `#d9d9d9` | 3.78:1 | AA-large |
| `#027b49` | `#f19ec8` | 2.66:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| KH Teka Regular | `--font-body` | webfont | 400 | Primary display, headings, body copy, captions and links. | Inter |
| KH Teka Medium | `--font-kh-teka-medium` | webfont | 400 | Sparingly used medium-weight emphasis within the otherwise regular-weight typography system. | Inter |

- **KH Teka Regular:** Use regular weight throughout; display and headline text has notably tight negative tracking, with natural sentence case.
- **KH Teka Medium:** Reserve for occasional emphasis; measured share is small, and the page avoids heavy, bold text styling.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 215px | 400 | 0.8 | -0.06em | — | KH Teka Regular | Oversized hero statement and large graphic-led display moments. |
| h1 | 60px | 400 | 1 | -0.06em | — | KH Teka Regular | Primary page and major section headlines. |
| h2 | 26px | 400 | 1.1 | -0.03em | — | KH Teka Regular | Secondary section headings and supporting property statements. |
| body | 18px | 400 | 1.1 | -0.03em | — | KH Teka Regular | Property details, explanatory copy and contact information. |
| caption | 15px | 400 | 1.2 | -0.03em | — | KH Teka Regular | Small availability labels and compact supporting details. |
| link | 18px | 400 | 1.1 | -0.03em | — | KH Teka Regular | Inline navigation, address and contact links. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 5, 6, 8, 10, 14, 15, 20, 30, 40, 170 px.
- Section rhythm 40px · element gap 10px · card padding — · max content width 1400px.

The measured page max width is 1400px, with a compact density and a measured section gap of 40px. The opening uses a broad canvas, a small brand mark and menu, huge staggered headline lines, and supporting copy aligned near the lower right. Property cards form a four-column row; later content alternates between expansive single-column passages and image-led multi-column compositions. Headings may align left or right, while large graphic panels interrupt the scroll. Keep edges crisp and let open grey space separate content rather than adding ornamental dividers.

## Shape & elevation

- Radius: pill `9999px`
- No box shadows measured: the page is flat.

The interface is predominantly flat: color bands and images sit directly in the page composition without card shadows. The measured radius scale is limited to circular and pill-shaped forms, used sparingly for controls such as the menu and CTA. Avoid adding borders, elevation or layered panels not evident in the design.

## Imagery

Use clear architectural photography of the building and bright, natural workplace interiors. Property images sit against solid saturated color fields—green, pink, yellow and red—while later interior photographs appear in a staggered, offset sequence on grey. Keep images rectangular and largely untreated; preserve the photographic detail and contrast rather than applying filters, gradients or illustrative overlays.

## Components

### Brand and menu

Small THE1 wordmark at the top edge paired with a compact dark circular menu control.

### Display hero

Oversized, regular-weight black KH Teka statement broken into staggered, tightly tracked lines over the grey canvas.

### Intro and CTA

Small office-space introduction and supporting sentence positioned to the right, followed by a pill-shaped dark Learn more link.

### Property color cards

Four-column property presentation using green, pink, yellow and red solid bands behind building photography, with availability details.

### Oversized numeral panels

Bright color blocks paired with enormous cropped black numerals as a graphic transition between page chapters.

### Interior image sequence

Rectangular workplace photographs arranged asymmetrically across the grey canvas, alternating sides and image proportions.

### Measured component styles

- **Link** (“About”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Card**: background #027b49 · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use the measured grey as the dominant page canvas.
- Set display text in regular-weight, tightly tracked sans serif.
- Let the opening headline occupy most of the visual attention.
- Use the four saturated colors as distinct property identifiers.
- Keep building and interior photography rectangular and unfiltered.
- Create rhythm with asymmetry, open space and scale changes.

## Don't

- Do not introduce gradients or shadows.
- Do not turn the page into a conventional boxed-card grid.
- Do not use saturated colors as large, unrelated interface accents.
- Do not center every headline or image sequence.
- Do not add decorative borders or unmeasured spacing values.
- Do not make the typography heavy or overly ornate.

## Agent prompt

Build a new page in The1’s editorial real-estate style. Use Concrete Mist (#d9d9d9) as the dominant canvas and Foundry Ink (#1f1f1f) for typography. Set oversized, regular sans-serif headlines with tight tracking, leaving supporting copy small and understated. Introduce property imagery with distinct Wharf Green (#027b49), Studio Pink (#f19ec8), Signal Yellow (#fbb833) and Brick Signal (#fa4d43) color fields; keep those hues tied to property graphics rather than scattering them across controls. Use crisp rectangular architecture and workplace photos, asymmetric image placement, broad open spaces and occasional large cropped numerals. Keep surfaces flat, avoid shadows and ornamental borders, and use pill or circular shapes only for compact controls. Follow measured page width and spacing values; do not invent dimensions.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Broad grey opening with large staggered headline, compact top controls and supporting copy at lower right. | Menu access, Learn more link | Oversized type, Small wordmark, Pill CTA |
| 2 | product-grid | Four property color bands with building imagery, followed by a return to grey. | Availability labels, Color-coded properties | Four-column cards, Solid color backdrops, Architectural photos |
| 3 | other | Single-column statement on the grey canvas. | Editorial pause | Section headline, Open canvas |
| 4 | other | Large red graphic panel with a cropped numeral, occupying a broad single-column section. | Graphic transition | Flat color field, Oversized cropped numeral |
| 5 | other | Single-column yellow graphic panel with oversized cropped black typography. | Graphic transition | Flat color field, Oversized cropped numeral |
| 6 | other | Single-column green graphic panel with a giant black cropped numeral. | Graphic transition | Flat color field, Oversized cropped numeral |
| 7 | gallery | Twelve-column sequence of location imagery and repeated nearby-place labels. | Place discovery | Image grid, Repeated location list |
| 8 | other | Right-aligned headline in a single-column editorial section. | Location context | Right-aligned display text, Open grey canvas |
| 9 | gallery | Five-column image arrangement with multiple images and offset placement. | Visual exploration | Asymmetric photo grid, Rectangular crops |
| 10 | other | Right-aligned location headline in a single-column section. | Location context | Right-aligned headline, Generous open space |
| 11 | other | Single-column, left-aligned headline on grey. | Editorial statement | Left-aligned display text, Minimal composition |
| 12 | video | Single-column media section combining video and supporting images. | Video viewing | Embedded video, Supporting photographs |

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