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

# Tripolis-Park™ · Design System

> A vivid, editorial window into a forward-looking campus.

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

Tripolis-Park pairs a restrained typographic system with immersive, full-screen media to present an Amsterdam campus as a forward-looking place. A luminous purple opening gives way to a contrasting visual world, while white framing and concise headlines keep the identity consistent.

## North star

Let immersive campus media command the canvas, while sparse, high-contrast typography and framing provide orientation.

## Overview

The page is built around immersive full-bleed video rather than a conventional collection of boxed sections. Its measured interface palette is deliberately spare: white is the canvas and high-contrast overlay color, black anchors text in lighter content areas, and gray appears on media cards. The vivid violet seen in the opening screenshot comes from the hero imagery, not the measured interface palette, so treat it as media content rather than a reusable UI token. Matter Regular carries navigation, body copy, links, and controls; Matter Medium supports secondary headings, while Ivar Headline Medium gives the main statement an editorial serif contrast. The opening viewport uses generous open space, a thin white outlined brand frame near the top, and a compact headline low on the left. Keep type confident but uncluttered, with large expanses of video and little visible interface chrome. Use spacing to preserve a comfortable, composed rhythm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary canvas and white overlay text, including the outlined brand frame and selected links. |
| Ink Black | `#000000` | `--color-ink-black` | semantic | High-contrast text and links in lighter content areas; also used for dark control details. |
| Media Gray | `#808080` | `--color-media-gray` | surface | Measured card surface tone; secondary to the full-bleed video imagery. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#808080` (Media Gray) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#808080` | 5.32:1 | AA |
| `#ffffff` | `#808080` | 3.95:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Matter-Regular | `--font-body` | webfont | 400 | Body copy, navigation, links, buttons, and captions. | Inter |
| Matter-Medium | `--font-display` | webfont | 400 | Secondary headings. | Inter |
| IvarHeadline-Medium | `--font-ivarheadline-medium` | webfont | 400 | Main editorial headline. | DM Serif Display |
| Matter-SemiBold | `--font-matter-semibold` | webfont | 400 | Sparse semibold emphasis where present. | Inter |

- **Matter-Regular:** Regular weight with restrained, unembellished sans-serif forms; sentence case and clean reading rhythm.
- **Matter-Medium:** Medium emphasis keeps section headings distinct without introducing a heavy display style.
- **IvarHeadline-Medium:** Medium serif display face; measured headline uses slightly tight tracking and a compact line height.
- **Matter-SemiBold:** Use sparingly as a stronger sans-serif weight; the measured share is very small.

### Type scale — Golden Ratio (ratio ≈ 1.616, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 47px | 400 | 1.08 | -0.015em | — | IvarHeadline-Medium | Editorial hero headline over full-bleed video. |
| h2 | 27px | 400 | 1.25 | 0 | — | Matter-Medium | Secondary section headings in content areas. |
| body | 18px | 400 | 1.25 | 0 | — | Matter-Regular | Supporting campus and project descriptions. |
| caption | 13.5px | 400 | 1.2 | 0 | — | Matter-Regular | Compact legal or media-related notes. |
| button | 18px | 400 | 1.25 | 0 | — | Matter-Regular | Text-led calls to action and film controls. |
| nav | 18px | 400 | 1.25 | 0 | — | Matter-Regular | Primary site navigation links. |
| link | 18px | 400 | 1.25 | 0 | — | Matter-Regular | Inline project, credit, and information links. |

OpenType features in use: `"tnum"`.

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 3, 5, 11, 12, 13, 14, 16, 19, 23, 30, 36, 41, 44, 45, 53, 54 px.
- Section rhythm 90px · element gap — · card padding 70px · max content width —.

Use full-bleed media as the primary section format, with content positioned directly over the visual rather than inside a dense card grid. The measured opening viewport is a single-column hero. Place the identity frame toward the upper area and align the headline low on the left, leaving broad uninterrupted image space between them. Keep content density comfortable and section transitions spacious. No reliable page maximum width or grid measurements are supplied, so preserve the open composition without inventing fixed dimensions.

## Shape & elevation

- Radius: button `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The visual language is predominantly flat: measured shadows are absent, and content is not organized through raised panels. Use thin white framing as a graphic overlay rather than a card border system. Any layering should come from the video itself and its overlaid identity or headline, preserving a clean, cinematic surface.

## Imagery

The opening is a full-screen video with luminous, layered violet forms; the scaled full-page view shows a different scene of colorful, floating organic shapes against a dark background. Treat these colors and objects as video imagery, not brand palette tokens. Use bold, abstract or architectural motion imagery with a full-bleed crop, while keeping typography legible over its changing areas.

## Components

### Outlined identity frame

A thin white rectangular outline encloses the Tripolis-Park™ wordmark near the top of the opening video.

### Hero headline

A short white editorial statement sits low on the left over the full-bleed media.

### Text-led CTA

Use simple Matter Regular link-style calls to action, including the measured arrow-led “Learn more” treatment.

### Film control

A circular control may use a white outline and black icon or detail; keep it visually light.

### Content card

Where cards appear, measured examples use white with black text or a gray media surface, without shadow or rounded corners.

### Measured component styles

- **Primary button**: background #ffffff · text #000000 · border 1px solid #ffffff · radius 50% · padding 0px · 400 18px Matter-Regular
- **Secondary button**: transparent background · text #000000 · border 1px solid #ffffff · radius 50% · padding 0px · 400 18px Matter-Regular
- **Link** (“Design: MVRDV”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px Matter-Regular
- **Card** (“A vibrant city neighborhood A lush green”): background #ffffff · text #000000 · radius 0px · padding 63px 54px 108px 53.1px · 400 18px Matter-Regular
- **Navigation item** (“Heritage”): transparent background · text #ffffff · radius 0px · padding 0px · 400 18px Matter-Regular

## Do

- Use full-bleed media as the dominant visual field.
- Keep the interface palette to the measured white, black, and gray.
- Reserve violet and other vivid hues for the video itself.
- Pair Matter sans-serif utility text with an editorial serif headline.
- Use white framing and overlay text where the imagery allows.
- Preserve generous negative space around headlines.

## Don't

- Do not promote screenshot violet tones into interface color tokens.
- Do not add gradients to interface elements without evidence.
- Do not introduce shadows or elevated card styling.
- Do not crowd the hero with navigation or supporting copy.
- Do not use rounded card corners; measured cards are square-edged.
- Do not invent fixed page widths or spacing values.

## Agent prompt

Build a new Tripolis-Park-style page around immersive, full-bleed campus or architectural video. Keep interface colors faithful to the measured palette: Gallery White (#ffffff) for the canvas, outlined identity frame, and overlay text; Ink Black (#000000) for text and control details; Media Gray (#808080) only for subdued card surfaces. Do not treat the hero’s vivid violet as a UI token—it belongs to the video imagery. Use Matter-like sans-serif for navigation, body, links, and controls, with an editorial serif display face for the main statement. Compose the hero with a framed wordmark near the top, a concise headline low on the left, and ample open image space. Favor flat surfaces, square card edges, light borders, and comfortable section rhythm; avoid invented measurements, shadows, and decorative interface gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single-column, full-bleed video with a framed wordmark above and a compact headline aligned low on the left. | Full-screen media, Overlay brand identity, Concise headline | White outline frame, High-contrast overlay text, Editorial serif headline |

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