CURATED · OPEN · FREE

Bareis Nicolaus

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

AgencyCleanCurationProductivityApp UI

↓ Download design system (13 MB)Open in OpenDesign

Visit: https://www.bareis-nicolaus.com

📦 Browse pack contents →

Identity DNA

visual communicationportfolioagencycurated

A sleek, monochromatic filing system for visual work.

Color

#FFFFFFInk

#000000BG

#A9A9A9Muted

rgba(255, 255, 255, 1.0)Line

Strictly monochromatic with project imagery providing all color.

Typography

geometric-sans · humanist-sans

display72px · 400
body24px · 400

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 4px

md · 8px

lg · 120px

pill · 120px

2px solid white borders on tags and buttons.

Layout

1920container

12columns

20pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.16, 1, 0.3, 1)easing

Smooth transitions on hover for interactive tags. · Flex and opacity transitions for expanding and collapsing sections.

Background fill or opacity change on tags. · Tags filter the project grid.

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.

Voice & Don'ts

Tone Professional, direct, and focused.
Headlines Large, bold, sans-serif typography (72px) for main navigation.
CTAs Interactive pill-shaped tags inviting exploration and filtering.

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).
Avoid: Cursive fonts
Avoid: Soft shadows
Avoid: Decorative gradients

Inside the pack — real screenshots

Bareis Nicolaus — 桌面首屏（hero） — 桌面首屏（hero）

Bareis Nicolaus — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko