CURATED · OPEN · FREE

Spacelab

A minimalist, photo-led portfolio for an architectural design studio.

StudioArchitectureCleanPortfolioPremium

↓ Download design system (12 MB)Open in OpenDesign

Visit: https://spacelab.co.uk

📦 Browse pack contents →

Identity DNA

architecturalexploratorystudiospaceminimal

An open-plan studio where light, space, and structural honesty define the environment.

Color

#2C2222Ink

#B2B4B1Ink soft

#FFFFFFBG

rgba(255,255,255,0)Line

Strict monochrome palette where photography provides all color.

Typography

grotesque-sans

display62px · 400
heading30px · 400
body21px · 400

Use a uniform font-weight of 400 across all sizes · Maintain a tight line-height of 1.05 to 1.2 for clean vertical rhythm · Use slight positive letter-spacing for clarity

Spacing

4px

8px

16px

21px

32px

42px

84px

Based on a 4px baseline, with prominent use of 21px (1.5rem) and 42px (3rem) increments.

Surfaces

sm · 4px

md · 0px

lg · 0px

pill · 999px

No visible borders; relies on spacing and high-contrast photography.

Layout

1280container

12columns

42pxgutter

768 / 1024breakpoints

Asymmetrical split layout with a fixed left navigation column and a fluid right content area.

Motion & Interaction

250msmicro

400mssmall

800msmedium

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

Standard 0.4s fade and color transitions for UI interactions

Subtle color shifts (0.4s transition) on navigation links. · Standard link navigation.

Components

button Minimal text links without borders or backgrounds.
card No traditional cards; content is presented as full-bleed architectural photography.
chip None.
input None.
hero A massive typographic manifesto statement followed by a full-width hero image.

Voice & Don'ts

Tone Direct, confident, and minimalist.
Headlines Bold, declarative, and typographically dominant.
CTAs Quiet and functional text links.

don't use bold font-weights — screenshot shows all text in a regular 400 weight
don't add decorative UI borders — screenshot shows a completely borderless layout
don't use vibrant accent colors — screenshot relies strictly on neutral text and photography
don't use a serif font — screenshot uses a clean, uniform grotesque sans-serif
don't create a rigid grid layout — screenshot shows a split layout with a distinct left column
don't use drop shadows on elements — screenshot shows a completely flat, 2D surface treatment
Avoid: Marketing jargon
Avoid: Overly complex sentences
Avoid: Visual clutter or decorative borders

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

A minimalist, photo-led portfolio for an architectural design studio. Positioning: High-end architectural studio. Key hex colors: #FFFFFF background, #2C2222 ink, #B2B4B1 muted. Font categories: Grotesque sans-serif at a uniform 400 weight. Critical donts: Do not use bold font-weights; do not add decorative UI borders; do not use vibrant accent colors; do not use serif fonts; do not use drop shadows. The design prioritizes massive typography and full-bleed photography over traditional UI components, creating a clean, spacious feel.

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