# Cargo · Design system migration spec

> Source: https://cargo.site  ·  Curated by OpenDesign  ·  en

> An exceptional reference for how to build a premium creative tool that steps back to let the user's work shine, using typography as the primary interface element.

## 1. Identity DNA

Cargo operates as a gallery-grade digital canvas for creatives, a minimalist site builder that prioritizes typography and creative work over platform chrome. Its design system is built on a single principle: the interface must recede, leaving a stark, white stage for the user's portfolio to command all attention.

**One-liner:** A minimalist site builder that prioritizes typography and creative work over platform chrome.
**Keywords:** creative · portfolio · builder · minimal
**Analogy:** A gallery-grade digital canvas for creatives

## 2. Color

The color system is a study in deliberate absence. A strictly monochromatic palette of pure white and deep charcoal ensures the user's own colorful work remains the only focal point.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#FCFCFC` | card background |
| `--ink` | `#3F3F3F` | body text |
| `--ink-soft` | `#000000` | secondary text |
| `--muted` | `#D9D9D9` | placeholder |
| `--line` | `rgba(0,0,0,0.75)` | divider |

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

The principle is one of high-contrast neutrality, creating a pristine backdrop rather than a competing aesthetic.

## 3. Typography

Typography serves as the primary interface element, utilizing a near-black humanist sans-serif throughout. Tight tracking on display sizes crafts a sophisticated, custom-lettered feel, while medium weight is reserved exclusively for interactive elements to provide clear affordance.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -2px | Main brand lockup and primary navigation links |
| heading | 40px | 1.0 | 400 | -1px | Section headers and template titles |
| body | 14.5px | 1.6 | 400 | normal | Paragraphs and descriptive text |

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

## 4. Spacing

Spacing follows an asymmetric layout driven by explicit grid placement rather than linear vertical rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Asymmetric layout driven by explicit grid placement rather than linear vertical rhythm.

## 5. Surfaces

Surfaces are rendered with stark flatness, relying entirely on spacing and typography for separation and hierarchy.

- **Radius:** sm 0px · md 4px · lg 8px · pill 999px
- **Borders:** None visible in the hero; relies entirely on spacing and typography for separation.

## 6. Layout

The layout skeleton is an asymmetric split-grid on desktop, with left-aligned branding anchoring one side and right-aligned actions balancing the other. This structure creates an editorial feel, deliberately breaking away from centered hero conventions.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is subtle and fast, prioritizing perceived performance over decorative animation. Interactions are minimal and immediate, using instant hover transitions and staggered page entry to maintain content visibility.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Instant transitions on hover states
  - Staggered page entry animations

- **Hover:** Cursor changes to pointer with no visible background change on text links.
- **Click:** Immediate state change with no perceived latency.
- **Transition:** Consistent use of all-property transitions across UI elements.
- **Keyboard:** Standard focus management without visible custom ring styles.

## 8. Voice & Don'ts

The editorial voice is sophisticated, direct, and slightly irreverent. Headlines are punchy, minimal commands or statements, while calls to action use simple, action-oriented text.

- **Tone:** Sophisticated, direct, and slightly irreverent.
- **Headline style:** Punchy, minimal two-word commands or statements.
- **CTA style:** Action-oriented text wrapped in brackets or simple text links.
- **Avoid:** Marketing buzzwords / Decorative gradients / Salesy exclamation points

### Don'ts
- ❌ 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

What this system deliberately omits—border-radius, drop shadows, vibrant backgrounds, and wide letter-spacing—is as defining as what it includes.

## System Prompt (paste into AI tool)

```
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.
```