---
name: Cargo
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#3F3F3F"
  secondary: "#000000"
  neutral: "#D9D9D9"
  bg-soft: "#FCFCFC"
  line: "rgba(0,0,0,0.75)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2px"
  heading:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 14.5px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 0px
  md: 4px
  lg: 8px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*A gallery-grade digital canvas for creatives*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#3F3F3F`)** — uses `ink` token
- **Secondary text (`#000000`)** — uses `ink-soft` token
- **Muted (`#D9D9D9`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.75)`)** — uses `line` token

## Typography

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

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

## Layout

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

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

## Elevation & Depth

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

## Shapes

- `sm`: 0px
- `md`: 4px
- `lg`: 8px
- `pill`: 999px

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

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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