---
name: Vitaarchitecture
description: "This site is an excellent example of ultra-refined, high-end minimalist design, perfect for studying how extreme restraint and typography can create a premium, architectural feel."
version: alpha

colors:
  background: "#EFEFEF"
  primary: "#000000"
  neutral: "#9E9E9E"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 196px
    lineHeight: 1.0
    fontWeight: 200
    letterSpacing: "-7.84px"
  headline:
    fontFamily: grotesque-sans
    fontSize: 48px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "-0.2px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.16px"

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 refined architectural portfolio balancing austere minimalism with sophisticated typographic details.

*A pristine gallery space with a subtle serif accent.*

## Colors

Extreme restraint using high-contrast neutrals to let the architectural photography breathe.

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

## Typography

- **Display:** didone-serif
- **Body:** grotesque-sans

- Use didone-serif for large, elegant display elements like the '214' numeral.
- Use grotesque-sans for functional UI, navigation, and standard paragraph text.
- Maintain tight negative letter-spacing across all typography to preserve the refined aesthetic.

## Layout

A single-column or highly structured asymmetric grid dominated by massive empty space

*Rhythm:* generous whitespace with isolated vertical padding, e.g., 207px top/bottom

## Elevation & Depth

- Borders: Thin, crisp black lines used sparingly for separation

## Shapes

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

## Components

- **button:** Text-only with simple underline or state change on hover.
- **card:** Typography-driven with generous whitespace, no background containers.
- **hero:** Sparse typography with a massive didone numeral and thin horizontal rule.

## Do's and Don'ts

**Don't:**
- Don't use shadows — screenshot shows completely flat surfaces.
- Don't use border-radius — screenshot shows sharp, unrounded corners.
- Don't use vibrant colors — screenshot shows strictly monochrome/black and white.
- Don't use drop shadows — screenshot relies entirely on flat design.
- Don't clutter the interface — screenshot shows extreme negative space.
- Don't use sans-serif for display text — screenshot uses a didone-serif for the large numeral.

---

## System Prompt (paste into AI agent)

```
This is a refined architectural portfolio website. It positions itself through extreme restraint, high-end minimalism, and a gallery-like presentation of work. The key colors are a very light neutral gray (#EFEFEF) background with strict black (#000000) ink, creating a high-contrast, austere feel. Typography uses a sophisticated pairing of a thin didone-serif for large display elements (like the '214' numeral) and a clean, functional grotesque-sans for navigation and body text. Critical design rules: maintain generous, almost vast whitespace; use only thin, crisp lines for separation; and never introduce shadows, border-radius, or vibrant colors. The tone is confident, silent, and premium.
```