CURATED · OPEN · FREE

Opx Studio

A minimalist creative agency portfolio with a bold, black-and-white typographic identity.

StudioAgencyEditorialTypographyClean

↓ Download design system (31 MB)Open in OpenDesign

Visit: https://opx.studio

📦 Browse pack contents →

Identity DNA

brandingstudiocreativeagencyportfolio

A high-end creative agency showcasing bold typography and minimalist presentation to demonstrate design expertise.

Color

#ffffffInk

#000000BG

#9b9b9bMuted

rgba(255,255,255,0.1)Line

High-contrast, monochromatic palette using pure black and white for dramatic impact, with neutral grays for subtle secondary elements.

Typography

grotesque-sans · humanist-sans · monospace

display80px · 400
heading36px · 400
body18px · 400

Display typography uses tight letter-spacing and large sizes for visual impact. · Body text maintains generous line-height for readability. · Font weight stays consistent at 400 for a clean, uniform appearance.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous white space with large padding values (50px horizontal, 99px vertical) creating breathing room around elements.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

Minimal 1px borders in white or dark gray, used sparingly for subtle separation.

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-width hero sections with centered content, transitioning to image-focused project grids with generous spacing.

Motion & Interaction

200msmicro

300mssmall

600msmedium

cubic-bezier(0.19, 1, 0.22, 1)easing

Smooth opacity and transform transitions for element reveals. · Linear transitions for simple state changes. · Cubic-bezier easing for more complex entrance animations.

Subtle opacity or color transitions on interactive elements. · Immediate visual feedback through state changes.

Components

button Minimal text-based buttons with padding (7px 30px), likely with hover transitions.
card Project cards featuring large imagery with minimal framing, relying on typography for labeling.
chip No visible chips in the provided screenshots.
input No visible input fields in the provided screenshots.
hero Large, full-viewport typographic hero section with bold headline centered on black background.

Voice & Don'ts

Tone Confident, professional, and direct.
Headlines Bold, declarative statements with strong verbs ('invent', 'reinvigorate', 'transform').
CTAs Minimal and understated, likely text-based without flashy buttons.

Don't use multiple accent colors — screenshot shows strict monochromatic black-and-white palette.
Don't use serif typography — screenshot shows clean sans-serif display and body fonts.
Don't create cluttered layouts — screenshot shows generous white space and minimal elements.
Don't use decorative borders or shadows — screenshot shows minimal, clean edges.
Don't use small display typography — screenshot shows large, impactful headline sizes (80px).
Don't use inconsistent font weights — screenshot shows consistent 400 weight throughout.
Avoid: Avoid overly technical jargon.
Avoid: Avoid cluttered layouts with multiple competing elements.
Avoid: Avoid bright, saturated color accents.
Avoid: Avoid complex decorative elements or patterns.
Avoid: Avoid small, cramped typography.
Avoid: Avoid inconsistent spacing or alignment.

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a creative agency/studio portfolio website with a minimalist, high-contrast black-and-white design. The identity centers on bold typography and generous white space to showcase design expertise. Key colors are pure black (#000000) background with white (#ffffff) text and neutral gray (#9b9b9b) for secondary elements. Typography features grotesque-sans for display and humanist-sans for body text at 400 weight. Critical design principles: maintain high contrast, use generous spacing, keep typography clean and impactful. Avoid colored accents, cluttered layouts, serif fonts, decorative elements, small typography, and inconsistent weights. The design relies on the strength of typography and photography rather than complex UI patterns.

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