---
title: "Bareis + Nicolaus design system"
variant: extended
source: https://www.bareis-nicolaus.com/
captured_at: 2026-10-12
theme: dark
industry: design
generator: Design DNA (https://four.wiralomi.com/style/bareis-nicolaus-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Bareis + Nicolaus · Design System

> A monochrome index for image-led creative work.

**Theme:** dark · **Industry:** design · **Source:** https://www.bareis-nicolaus.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A stark black-and-white portfolio homepage pairs an extensive category index with a vertical stream of project imagery. Oversized Lausanne typography, fine white rules, and outlined pill controls keep the interface direct while giving the work most of the visual variation.

## North star

Keep the interface strictly black and white, and let project imagery provide the colour and visual character.

## Overview

The page is built on a strict black-and-white palette: black fills the navigation and information column, while white carries type, outlines, dividers, and the selected category. Project photography supplies nearly all other colour, so the interface remains neutral as images change from a pale product close-up to a basketball campaign. Lausanne is the dominant sans serif, used in large, regular-weight headings and compact, readable category labels; Victor Serif is the secondary measured face. The desktop composition places a dense index on the left and a tall, scrolling project-image column on the right. Thin white horizontal rules divide the left-side blocks, while rounded outline pills distinguish navigable categories without adding filled surfaces. The layout feels deliberately packed in its index but spacious around the large imagery. Use flat black fields, crisp white borders, and image-led contrast rather than shadows, gradients, or decorative colour.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#000000` | `--color-studio-black` | brand | Canvas for the navigation and information column; also the dominant page background. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Headings, labels, outlines, dividers, and the selected category pill. |

### Semantic aliases

`--color-canvas` → `#000000` (Studio Black) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#000000` (Studio Black) · `--color-border` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Lausanne | `--font-body` | webfont | 400 | Display headings, body labels, category controls, and navigation | Inter |
| Victor Serif | `--font-victor-serif` | webfont | 400 | Secondary measured serif face; use sparingly where a serif accent is needed | Lora |

- **Lausanne:** Measured at regular weight; large, unembellished display text and consistent sentence-case labels, with neutral tracking.
- **Victor Serif:** Measured at regular weight; secondary to the dominant sans-serif system.

### Type scale — Custom (ratio ≈ 3, base 24px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1 | 0 | — | Lausanne | Large section headings such as Work, Info, and Contact. |
| body | 24px | 400 | 1 | 0 | — | Lausanne | Category labels, project titles, and compact information text. |
| nav | 24px | 400 | 1 | 0 | — | Lausanne | Top-level Archive and Research links and category navigation. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 10, 12, 13, 20 px.
- Section rhythm — · element gap — · card padding — · max content width —.

A desktop split composition places a dense black index and information stack on the left beside a vertical project-image feed on the right. The left column aligns content to a consistent inset, with thin horizontal rules separating the brand, Work, Info, and Contact areas. The image stream is edge-to-edge within its column and continues below the viewport. Category pills wrap into tightly packed rows; preserve this dense rhythm and let imagery occupy the contrasting open field. Measurements do not specify a maximum width or section gap.

## Shape & elevation

- Radius: button `9999px` · nav `50%` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s cubic-bezier(0.16, 1, 0.3, 1)` on interactive elements.

The interface is flat, with no measured shadows or gradients. White hairline rules and outlined pills define structure against the black canvas. Project media sits directly in its column; use image boundaries and occasional overlaid labels for layering rather than cards, drop shadows, or raised surfaces.

## Imagery

Use large, edge-to-edge project photography and video rather than decorative illustrations. The visible work includes a cool-toned close-up of a Nothing phone and a basketball campaign; their colour and subject matter change independently of the monochrome interface. Preserve broad image crops and allow project-title pills to sit over imagery with white outlines and text.

## Components

### Brand header

Large two-line Bareis + Nicolaus wordmark sits at upper left, with outlined Archive and Research pills aligned alongside it.

### Category index

Work heading and a wrapping set of outlined white category pills; Selected is the white-filled active pill.

### Project image feed

Vertical, edge-to-edge column of project photography and video, with concise white outlined title labels over some images.

### Section dividers

Thin white horizontal rules divide the brand header, Work index, Info, and Contact areas.

### Contact block

Large Contact heading paired with a compact outlined Imprint pill.

### Ticker strip

A narrow white footer-like strip carries black studio and location information in a single horizontal line.

### Measured component styles

- **Primary button** (“Selected”): background #ffffff · text #ffffff · border 2px solid #ffffff · radius 120px · padding 12px 13.2px 9.6px 13.2px · 400 24px Lausanne
- **Secondary button** (“Archive”): transparent background · text #ffffff · border 2px solid #ffffff · radius 120px · padding 12px 13.2px 9.6px 13.2px · 400 24px Lausanne
- **Link** (“Nothing OS 4.0”): transparent background · text #ffffff · radius 0px · padding 0px · 400 24px Lausanne
- **Navigation item** (“Archive Research Work Selected 3D Animat”): transparent background · text #ffffff · radius 0px · padding 0px · 400 24px Lausanne

## Do

- Use black as the interface canvas.
- Use white for text, rules, and outlines.
- Keep category controls rounded and densely wrapped.
- Let project photography provide colour.
- Separate left-side blocks with fine white rules.
- Keep typography regular-weight and unembellished.

## Don't

- Don't introduce accent colours into interface controls.
- Don't add shadows or gradients.
- Don't place project images inside decorative cards.
- Don't loosen the category index into sparse rows.
- Don't replace the flat split layout with a centered hero.
- Don't use heavy typography or decorative type effects.

## Agent prompt

Build a new creative-studio portfolio page with the stark monochrome character of Bareis + Nicolaus. Use Studio Black (#000000) for the main interface canvas and Gallery White (#ffffff) for typography, rules, outlines, and active controls. Set large, regular sans-serif headings in Lausanne or a close alternative such as Inter; use compact labels and rounded outline pills for navigation and filters. Create a dense index-and-information column beside a vertical, edge-to-edge project media feed. Separate content blocks with thin white rules, and let photography or video supply the page’s colour. Keep surfaces flat: no shadows, gradients, or decorative cards. Preserve the contrast between tightly packed category labels and large image crops, and use restrained white title pills over selected project imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Desktop split view: dense black category and information column beside a vertical, edge-to-edge project media feed. | category filtering, project browsing, section navigation | wrapping outline pills, selected filled pill, thin white dividers, overlay project labels |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/bareis-nicolaus-com