CURATED · OPEN · FREE

Def Studio

A design studio portfolio featuring large-scale typography over dark, atmospheric product photography.

StudioPortfolioDark ModeBold TypographyClean

↓ Download design system (6 MB)Open in OpenDesign

Visit: https://def.studio

📦 Browse pack contents →

Identity DNA

Design StudioPortfolioVisual IdentityWeb Development

A minimalist digital portfolio showcasing creative work through bold typography and high-contrast visuals.

Color

#EFEFEFInk

#000000BG

#747474Muted

rgba(239,239,239,0.1)Line

Strict high-contrast monochrome palette relying on pure black backgrounds and white/light-gray text for maximum legibility.

Typography

humanist-sans

display96px · 300
heading25px · 300
body16px · 400

Light weight (300) used for display and navigation text to maintain elegance. · Text hierarchy is established primarily through extreme size differences rather than weight variations. · Navigation items utilize the same typography as section headings but at a smaller scale.

Spacing

4px

8px

10px

16px

20px

24px

30px

48px

60px

100px

Generous, asymmetric spacing driven by specific padding values like 100px 30px 60px 30px.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

Minimal borders used, primarily text borders for navigation elements.

Layout

1400container

12columns

30pxgutter

768 / 1024breakpoints

Full-width dark background with large, left-aligned typography overlays.

Motion & Interaction

220msmicro

300mssmall

500msmedium

600mslarge

cubic-bezier(1, 0.5, 0.8, 1)easing

0.5s transitions applied broadly to top and opacity properties. · Opacity fades used for element visibility changes.

Pointer cursor indicates interactive elements, likely accompanied by subtle opacity or color shifts. · Direct navigation to portfolio sections or external links.

Components

button Text-only button with cursor pointer, no background fill.
card Image-based portfolio cards with text labels underneath, lacking borders or background containers.
hero Full-screen dark atmospheric image with massive left-aligned text navigation.

Voice & Don'ts

Tone Confident, minimalist, and professional.
Headlines Lowercase, massive scale, light weight, sans-serif.
CTAs Simple text-based links integrated into navigation or inline text.

don't use rounded corners — screenshot shows sharp edges on all cards and elements
don't add drop shadows — screenshot shows completely flat, borderless surfaces
don't use multi-column text layouts — screenshot shows left-aligned, wide typography
don't apply heavy font weights — screenshot shows predominantly light (300) and regular (400) weights
don't use decorative patterns — screenshot shows solid colors and photographic backgrounds
don't use centered text alignment — screenshot shows strong left alignment for navigation and headings
Avoid: Excessive decorative elements
Avoid: High-chroma accent colors
Avoid: Dense text blocks

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Def.studio is a design studio portfolio characterized by extreme typographic scale and a strict monochrome palette. The visual identity relies on light-weight sans-serif typography at massive sizes (96px) to create a bold, minimalist aesthetic against a solid black background (#000000). Key colors include pure black for the background and light gray (#EFEFEF) for primary text, with a secondary muted gray (#747474) for less prominent elements. The layout is asymmetric and full-bleed, using photography as a background texture rather than framing it. Critical constraints include avoiding rounded corners or shadows, maintaining strictly left-aligned text, and never using high-chroma accent colors, ensuring the focus remains entirely on the work and the typography.

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