---
name: Bareis Nicolaus
description: "This site is a perfect example of a modern, curated agency portfolio that relies on high-contrast typography and a massive tag system rather than traditional menu structures."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  neutral: "#A9A9A9"
  line: "rgba(255, 255, 255, 1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 120px
  pill: 120px

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

---

## Overview

A high-contrast, tag-driven design portfolio for a visual communication agency.

*A sleek, monochromatic filing system for visual work.*

## Colors

Strictly monochromatic with project imagery providing all color.

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

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans

- Font family: Lausanne, sans-serif
- Font weight: 400 consistently used across 856 elements.
- Font size: 24px is the dominant text size.

## Layout

Split-screen layout with navigation/filter tags on the left and project imagery on the right.

*Rhythm:* Consistent vertical and horizontal rhythm defined by padding on interactive tag elements.

## Elevation & Depth

- Borders: 2px solid white borders on tags and buttons.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 120px
- `pill`: 120px

## Components

- **button:** Tags with 2px solid white borders, pill-shaped (border-radius 120px), black background, white text.
- **card:** Full-bleed photographic imagery with overlaid pill-shaped text labels.
- **chip:** Used extensively for filtering categories, styled identically to tags.
- **input:** Minimal search or filter input implied by the tag-based interaction.
- **hero:** Large split-screen combining massive typography for navigation and high-quality project photography.

## Do's and Don'ts

**Don't:**
- Don't use a white background — the screenshot shows a pure black background.
- Don't use decorative or serif fonts for primary UI — the screenshot shows a clean sans-serif.
- Don't use colored buttons or accents — the screenshot shows strictly monochromatic UI elements.
- Don't use heavy drop shadows — the screenshot shows flat, border-based elements.
- Don't use complex multi-column text layouts — the screenshot shows a clean, tag-based grid.
- Don't use rounded corners smaller than pill-shaped — the screenshot shows highly rounded borders (120px).

---

## System Prompt (paste into AI agent)

```
A high-contrast, monochromatic design portfolio for a visual communication agency. Key colors are pure black (#000000) backgrounds and pure white (#FFFFFF) text and borders. The primary font is a humanist-sans (Lausanne), used for both massive 72px headlines and 24px body text. The layout features a split-screen with a comprehensive tag-based filtering system on the left and large photographic project showcases on the right. Critically, do not use any background other than black, do not introduce colored accents, and do not use serif fonts for the UI. All interactive elements should be pill-shaped with a 2px solid white border.
```