# Bareis Nicolaus · Design system migration spec

> Source: https://www.bareis-nicolaus.com  ·  Curated by OpenDesign  ·  en

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

## 1. Identity DNA

Bareis Nicolaus operates as a sleek, monochromatic filing system for visual work. The agency's identity is a high-contrast, tag-driven portfolio where the project imagery itself provides all color.

**One-liner:** A high-contrast, tag-driven design portfolio for a visual communication agency.
**Keywords:** visual communication · portfolio · agency · curated
**Analogy:** A sleek, monochromatic filing system for visual work.

## 2. Color

The color system is strictly monochromatic, utilizing a pure black background with white text and borders, and a single muted gray for secondary elements. This restraint places full emphasis on the curated project photography.

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

**Color principle:** Strictly monochromatic with project imagery providing all color.

The principle is clear: color is the domain of the work, not the interface.

## 3. Typography

The type voice is professional and direct, set in the humanist sans-serif Lausanne. Font weight remains a consistent 400, with scale jumping dramatically from a dominant 24px body text to massive 72px headlines for primary navigation.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 400 | 0 | Main headings like 'Work', 'Info', and 'Contact'. |
| body | 24px | 1.2 | 400 | 0 | Navigation tags and main body text. |

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

## 4. Spacing

Rhythm is defined by the consistent vertical and horizontal padding on the interactive tag elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent vertical and horizontal rhythm defined by padding on interactive tag elements.

## 5. Surfaces

Surfaces are flat and border-based, eschewing depth for clarity. The primary structural element is the 2px solid white border, which defines the system's pill-shaped components.

- **Radius:** sm 4px · md 8px · lg 120px · pill 120px
- **Borders:** 2px solid white borders on tags and buttons.

## 6. Layout

The layout skeleton is a bold split-screen composition. The left column houses a dense, tag-based filtering system, while the right column is dedicated to large, high-quality project photography.

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

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

## 7. Motion & Interaction

Motion philosophy is one of refined polish. Smooth transitions on hover and flex-based expansions for sections use custom cubic-bezier easing, providing a deliberate feel to interactions without unnecessary flourish.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.16, 1, 0.3, 1)`
- **Patterns:**
  - Smooth transitions on hover for interactive tags.
  - Flex and opacity transitions for expanding and collapsing sections.

- **Hover:** Background fill or opacity change on tags.
- **Click:** Tags filter the project grid.
- **Transition:** Flex and opacity transitions with custom cubic-bezier easing.
- **Keyboard:** Standard tab navigation through interactive tags.

## 8. Voice & Don'ts

The editorial voice is professional, direct, and focused, using large, bold, sans-serif typography for headlines. The system relies on interactive pill-shaped tags to invite exploration, not traditional button language.

- **Tone:** Professional, direct, and focused.
- **Headline style:** Large, bold, sans-serif typography (72px) for main navigation.
- **CTA style:** Interactive pill-shaped tags inviting exploration and filtering.
- **Avoid:** Cursive fonts / Soft shadows / Decorative gradients

### Don'ts
- ❌ 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).

The system deliberately rejects decorative gradients, cursive fonts, soft shadows, and any colored accents that would compete with the monochrome framework.

## System Prompt (paste into AI tool)

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