CURATED · OPEN · FREE

Rauno Freiberg

A bold, typographic portfolio site defined by extreme scale and stark contrast.

portfoliominimaldesign-engineering

↓ Download design system (1 MB)Open in OpenDesign

Visit: https://rauno.me

📦 Browse pack contents →

Identity DNA

minimalistbold typographyhigh contrastdeveloper

A stark, brutalist exhibition space for interaction design work.

Color

#FFFF02Accent

#000000Ink

#171717Ink soft

#8f8f8fBG

#edededBG soft

#6f6f6fMuted

rgba(0, 0, 0, 1)Line

High-contrast monochrome base with a single high-chroma accent.

Typography

grotesque-sans · system-sans · monospace

display85px · 400
body16px · 400
label14px · 400

Use extremely large font sizes for key text elements. · Maintain tight line-heights for display text. · Limit font weight to mostly 400.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous padding within containers.

Surfaces

sm · 4px

md · 12px

lg · 12px

pill · 9999px

1px solid black borders on some elements.

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Asymmetric, card-based layout.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Hover transitions on containers.

Cursor changes to pointer on interactive elements. · Standard click behavior.

Components

button Not clearly visible as standard buttons; interactions are primarily hover states on large containers.
card White rectangular cards on a gray background.
chip Not present.
input Not present.
hero Large typography on a white card, sometimes overlapping with a large geometric shape.

Voice & Don'ts

Tone Direct, confident, and minimal.
Headlines Extremely large, lowercase, or sentence-case typographic statements.
CTAs Subtle or non-existent, relying on visual hierarchy.

don't use heavy drop shadows — screenshot shows flat, borderless white cards.
don't use bright, saturated background colors everywhere — screenshot shows a dominant neutral gray.
don't use small, delicate typography for headlines — screenshot shows massive, bold text.
don't use multiple font weights — screenshot shows a reliance on 400 weight.
don't use traditional navigation bars — screenshot shows a minimalist, custom top navigation.
don't use rounded corners on everything — screenshot shows sharp or only slightly rounded corners.
Avoid: Decorative elements
Avoid: Complex gradients
Avoid: Cluttered layouts

Inside the pack — real screenshots

Rauno Freiberg — 桌面首屏（hero） — 桌面首屏（hero）

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

Captured from the live site · real computed styles

System prompt

Design a minimalist, typography-driven portfolio site inspired by brutalist web design. Use a stark, high-contrast palette dominated by neutral grays (#8f8f8f, #ededed) and pure black (#000000), with a single, vibrant accent color like electric yellow (#FFFF02) used sparingly for geometric shapes. The typography should be bold and large, using grotesque-sans categories for display and system-sans for body text, maintaining a mostly uniform 400 weight. Layout should be asymmetric and card-based, with generous padding (e.g., 64px) inside containers. Critical constraints: avoid decorative elements or complex gradients, never use small delicate typography for headlines, and always prioritize bold, impactful typographic statements over dense paragraphs.

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