CURATED · OPEN · FREE

Xihestudio

A minimal, dark-themed personal design portfolio showcasing high-profile agency work.

PortfolioStudioBold TypographyPremiumClean

↓ Download design system (14 MB)Open in OpenDesign

Visit: https://xihestudio.com

📦 Browse pack contents →

Identity DNA

PortfolioDesign StudioArt DirectionMinimalClean

A digital archive of a high-end design portfolio, presented as a stark, minimal interface.

Color

#FE2A2AAccent

#ffffffInk

rgba(255,255,255,0.75)Ink soft

#131312BG

rgba(255,255,255,0.1)Line

High-contrast dark mode with a single, sparse red accent to maintain focus on work.

Typography

geometric-sans · mono

display46px · 400
body14px · 400
caption12px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Strict grid with generous padding.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(255,255,255,0.1)

Layout

1400container

12columns

24pxgutter

768 / 1024breakpoints

Multi-column grid for text, large masonry-like layout for portfolio images.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Opacity transitions for hover states and page loads.

Subtle opacity changes on links and portfolio items. · Direct navigation to project detail pages.

Components

button Text links with directional arrows, minimal border or none.
card Large image blocks with minimal padding, acting as the primary navigation.
hero Large typography headline with a grid of portfolio thumbnails below.

Voice & Don'ts

Tone Professional, concise, and understated.
Headlines Large, tight-kerned, all-caps or bold sentence case for impact.
CTAs Subtle, directional arrows indicating movement to the next section.

Don't use bright or neon colors — the screenshot shows a dark, almost black background with white text.
Don't use decorative or script fonts — the typography is strictly geometric and monospaced sans-serifs.
Don't use rounded, friendly UI elements — the layout uses sharp, clean, architectural grids.
Don't add drop shadows or glassmorphism — the surfaces are completely flat and solid.
Don't use multiple accent colors — the screenshot shows only a single red accent (#FE2A2A) used sparingly.
Don't center all content — the layout relies on a strong left-aligned text grid.
Avoid: Flashy animations
Avoid: Loud colors
Avoid: Dense paragraph text

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a high-end personal design portfolio for an Art Director. The design is a stark, dark-themed minimal interface (#131312) focusing on large geometric sans-serif typography (Monument Grotesk) and a strict grid of portfolio images. Text is primarily white (#ffffff) with a secondary muted white (rgba(255,255,255,0.75)). A single, high-chroma red accent (#FE2A2A) is used very sparingly. The layout is column-based with generous whitespace. Critical donts: Do not use bright backgrounds, do not use decorative fonts, do not use heavy drop shadows or complex animations, do not use multiple accent colors, do not use a dense or cluttered layout, and do not use centered text for the main content.

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