CURATED · OPEN · FREE

Cargo

A minimalist site builder that prioritizes typography and creative work over platform chrome.

designportfoliotool

↓ Download design system (5 MB)Open in OpenDesign

Visit: https://cargo.site

📦 Browse pack contents →

Identity DNA

creativeportfoliobuilderminimal

A gallery-grade digital canvas for creatives

Color

#3F3F3FInk

#000000Ink soft

#FFFFFFBG

#FCFCFCBG soft

#D9D9D9Muted

rgba(0,0,0,0.75)Line

Strictly monochrome and neutral, using a high-contrast white background to ensure the user's colorful creative work remains the only focal point.

Typography

humanist-sans

display80px · 400
heading40px · 400
body14px · 400

Tight tracking on display sizes to create a sophisticated, custom-lettered feel · Medium weight (500) used exclusively for interactive elements to provide clear affordance

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Asymmetric layout driven by explicit grid placement rather than linear vertical rhythm.

Surfaces

sm · 0px

md · 4px

lg · 8px

pill · 999px

None visible in the hero; relies entirely on spacing and typography for separation.

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Asymmetric split-grid in desktop with left-aligned branding and right-aligned actions.

Motion & Interaction

220msmicro

400mssmall

800msmedium

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

Instant transitions on hover states · Staggered page entry animations

Cursor changes to pointer with no visible background change on text links. · Immediate state change with no perceived latency.

Components

button Solid blue filled button (inverted state) or text-only links with underlines.
card Template preview cards with zero border radius and heavy use of image bleed.
chip Simple tab-like dividers separating content views.
input Standard bordered text inputs with basic padding.
hero Full-screen asymmetric split layout with massive typography anchored to opposite corners.

Voice & Don'ts

Tone Sophisticated, direct, and slightly irreverent.
Headlines Punchy, minimal two-word commands or statements.
CTAs Action-oriented text wrapped in brackets or simple text links.

don't use border-radius on primary containers — screenshot shows completely square edges
don't use drop shadows for depth — screenshot shows completely flat surfaces
don't use a serif font for body copy — screenshot shows humanist sans-serif throughout
don't center-align large blocks of text — screenshot shows strict left-aligned or right-aligned positioning
don't use a vibrant background color — screenshot shows a strictly white or off-white canvas
don't use wide letter-spacing on headlines — screenshot shows tight negative tracking
Avoid: Marketing buzzwords
Avoid: Decorative gradients
Avoid: Salesy exclamation points

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Cargo is a premium portfolio site builder for designers, utilizing a stark white background and near-black humanist sans-serif typography to ensure creative work takes center stage. The layout relies on a sophisticated, asymmetric split-grid in the desktop hero with massive, tightly tracked headlines. Primary actions are driven by medium-weight text links, while secondary flows use solid inverted buttons (bright blue). Critical constraints include avoiding border-radius on all containers, eschewing drop shadows for flat depth, and maintaining strict left-alignment for all typography. The design vocabulary must remain sparse, geometric, and strictly monochrome.

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