# Tripolis Park · Design system migration spec

> Source: https://www.tripolis-park.com  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of how a premium architectural brand can use expressive 3D visuals and editorial typography within a highly restrained, clean UI framework.

## 1. Identity DNA

Tripolis Park presents itself as a premium architectural portfolio, where organic technology meets structured minimalism. The identity is defined by a bold, eco-conscious vision for a workspace campus, expressed through a refined and confident editorial lens.

**One-liner:** A premium, eco-conscious workspace campus defined by bold typography, expressive 3D visuals, and clean layouts.
**Keywords:** Premium · Eco-conscious · Campus · Visionary · Refined
**Analogy:** A premium architectural portfolio that blends organic technology with structured minimalism

## 2. Color

The color system is built on a strict monochrome foundation of black and white, creating a high-contrast canvas that serves as a gallery for content. Visual energy and focal points are delegated entirely to the vibrant 3D imagery and soft, expressive gradients.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#E9EAEB` | card background |
| `--bg-quiet` | `#F0E7EA` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#808080` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast monochrome base with rich, expressive 3D and gradient imagery

The principle is restraint; the palette provides a neutral stage, allowing the photography and renders to become the primary chromatic experience.

## 3. Typography

Typographic voice is established through a deliberate pairing of a transitional serif for display and a humanist sans-serif for body copy. The scale prioritizes clear hierarchy, using short, impactful headlines to guide the reader through a premium architectural narrative.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 47px | 1.1 | 500 | -0.468px | Main headlines |
| body | 18px | 1.25 | 400 | 0 | Paragraphs |

## 4. Spacing

Spacing operates on a generous, architectural rhythm, with abundant whitespace and padding that frame content like a curated exhibition.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace and padding to emphasize premium architectural feel

## 5. Surfaces

Surfaces are defined by depth and selectivity, using subtle, soft shadows and thin 1px solid borders for structure rather than decoration. The approach maintains the clean, monochrome integrity while providing necessary visual hierarchy.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - 0 10px 30px rgba(0,0,0,0.1)
- **Borders:** Thin 1px solid borders used selectively for structure and emphasis

## 6. Layout

The layout skeleton is composed of clean single-column or asymmetric arrangements, characterized by large negative spaces and offset text blocks. This creates an editorial flow that guides the eye deliberately through the campus story.

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

**Skeleton:** Clean single-column or asymmetric layouts with large negative space and offset text blocks

## 7. Motion & Interaction

Motion philosophy favors slow, deliberate ease-out transitions that reinforce the site's premium and refined character. Movement is purposeful, used to reveal imagery and content with a sense of considered pacing, like a camera pan across a finished building.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.42, 0, 0.31, 0.99)`
- **Patterns:**
  - Slow ease-out transitions
  - Parallax-like image reveals

- **Hover:** Subtle opacity or transform shifts
- **Click:** Immediate visual feedback with transform
- **Transition:** Smooth, multi-second transitions for hero elements
- **Keyboard:** Standard focus indicators

## 8. Voice & Don'ts

The editorial voice is visionary and confident, speaking in short, impactful phrases that match the typographic treatment. It avoids playful whimsy and corporate jargon, instead adopting the assured tone of a manifesto for future-forward workspaces.

- **Tone:** Visionary, confident, and premium
- **Headline style:** Short, impactful phrases often with trademark symbols or geometric accents
- **CTA style:** Underlined text with a leading arrow
- **Avoid:** Busy layouts / Low-contrast text / Rounded UI components / Playful or whimsical language / Cluttered interfaces / Overly corporate jargon

### Don'ts
- ❌ don't use rounded corners on cards or buttons — screenshot shows sharp, clean edges
- ❌ don't clutter the layout with multiple UI components — screenshot shows generous whitespace
- ❌ don't use low-contrast text — screenshot shows high-contrast black on white or white on dark
- ❌ don't use a single, dominant high-chroma accent color — screenshot relies on imagery for color
- ❌ don't use playful or whimsical typography — screenshot shows structured serif and sans-serif pairings
- ❌ don't use busy, grid-heavy layouts — screenshot shows clean, asymmetric, and spacious arrangements

The system deliberately forgoes rounded UI components, cluttered layouts, and low-contrast text, committing to a refined, sharp-edged, and spacious visual language.

## System Prompt (paste into AI tool)

```
This is a premium architectural and real estate website for Tripolis-Park, an eco-conscious campus in Amsterdam. It features a clean, high-contrast monochrome base (black ink on white background) with large, expressive 3D organic imagery and soft gradients as focal points. Typography uses a transitional serif for display and a humanist sans-serif for body text. The layout is spacious, asymmetric, and editorial. Key colors are #000000, #FFFFFF, and #808080. Critical donts: do not use rounded UI components, avoid cluttered layouts, and do not use low-contrast text. The design is refined, visionary, and relies on high-quality visuals rather than complex UI patterns.
```