---
name: Tripolis Park
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#808080"
  bg-soft: "#E9EAEB"
  bg-quiet: "#F0E7EA"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 47px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.468px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A premium, eco-conscious workspace campus defined by bold typography, expressive 3D visuals, and clean layouts.

*A premium architectural portfolio that blends organic technology with structured minimalism*

## Colors

High-contrast monochrome base with rich, expressive 3D and gradient imagery

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* Generous whitespace and padding to emphasize premium architectural feel

## Elevation & Depth

- 0 10px 30px rgba(0,0,0,0.1)
- Borders: Thin 1px solid borders used selectively for structure and emphasis

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Text link with an arrow and underline, no background container
- **card:** Minimal, relying on large imagery and typography for hierarchy rather than containers
- **hero:** Full-screen or large background imagery with overlaid text and geometric accents

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```