# Thegreenspace · Design system migration spec

> Source: https://thegreenspace.com  ·  Curated by OpenDesign  ·  en

> This site exemplifies brutalist-minimalist design with its bold typography and stark contrast, making it a strong reference for agency portfolios.

## 1. Identity DNA

The Greenspace operates like a gallery designed to frame its own work: architecture and typography are the exhibits, while the interface itself is the white wall, the polished concrete, the deliberate emptiness that gives each project room to breathe.

**One-liner:** Minimalist design agency portfolio with bold typography and photographic hero sections
**Keywords:** design agency · architecture · brutalist · minimalist
**Analogy:** A gallery space with large-scale typography and ample negative space

## 2. Color

The palette is a strict monochrome discipline—black, white, and a single gray accent—rendering color a deliberate absence rather than an addition. Every element exists in high contrast, with the gray serving only to establish typographic hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#BEBEBE` | placeholder |
| `--line` | `rgba(0,0,0,0)` | divider |

**Color principle:** High contrast monochrome palette with gray accents for hierarchy

This restraint ensures visual hierarchy is communicated through weight and scale, never through chromatic decoration.

## 3. Typography

Typography carries the full expressive weight, using a single grotesque-sans family in **haas_grotesk** at a display scale to create a brutalist, architectural presence. The tight line heights against large point sizes produce a monumental, sculptural effect.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 400 | 0px | Large hero typography and project titles |
| body | 24px | 1.17 | 400 | 0px | Navigation and secondary text |

## 4. Spacing

Vertical spacing follows a generous rhythm, creating distinct typographic blocks separated by ample negative space.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous vertical spacing with tight line heights for display text

## 5. Surfaces

Surfaces are entirely flat, with no shadows, no borders, and no visible depth cues. The visual plane is singular and absolute, reinforcing the gallery-like austerity of the composition.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** none visible

## 6. Layout

The skeleton is a series of large typographic blocks stacked with minimal chrome, allowing the content itself to define the structure. An asymmetric arrangement of text and full-width photographic sections creates a dynamic, editorial flow without conventional containers.

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

**Skeleton:** Large typographic blocks with minimal chrome

## 7. Motion & Interaction

Motion philosophy is one of quiet, inevitable progression—elements reveal themselves through controlled opacity fades and staggered timing rather than kinetic drama. Transitions operate at two distinct tempos (0.4s and 1.2s) to differentiate immediate feedback from environmental shifts.

- **Durations:** micro 400ms · small 400ms · medium 1200ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - opacity transitions
  - staggered reveals

- **Hover:** opacity change on interactive elements
- **Click:** pointer cursor on 37 elements
- **Transition:** all 0.4s and 1.2s transitions
- **Keyboard:** standard tab navigation

## 8. Voice & Don'ts

The editorial voice is confident and understated, matching the visual starkness with prose that is direct and unadorned. Calls to action are text-only, headlines are bold and lowercase-first, and decorative language is systematically excluded.

- **Tone:** confident and understated
- **Headline style:** large, bold, lowercase-first or sentence case
- **CTA style:** minimal, text-only
- **Avoid:** decorative elements / busy layouts / colorful accents

### Don'ts
- ❌ don't use multiple fonts — screenshot shows consistent grotesque-sans throughout
- ❌ don't add drop shadows — screenshot shows completely flat design
- ❌ don't use rounded corners — screenshot shows sharp 0px radius on all elements
- ❌ don't add decorative borders — screenshot shows no visible borders
- ❌ don't use bright accent colors — screenshot shows only black, white, and gray
- ❌ don't clutter the layout — screenshot shows generous whitespace and minimal elements

The system deliberately forgoes decorative elements, busy layouts, colorful accents, and any visual ornamentation that might compromise its architectural clarity.

## System Prompt (paste into AI tool)

```
This is a minimalist design agency portfolio site for The Greenspace. The design features a high-contrast monochrome palette with a white background (#FFFFFF), black ink (#000000), and gray muted text (#BEBEBE). Typography uses grotesque-sans fonts (haas_grotesk) with large display sizes (72px) and tight line heights for dramatic effect. The layout is spacious with generous whitespace and minimal chrome. Critical don'ts: don't use multiple font families, don't add shadows or rounded corners, don't introduce colorful accents, don't clutter with decorative elements, don't use borders, don't break the minimalist aesthetic. The site uses opacity transitions and staggered reveals for subtle motion effects.
```