---
version: alpha
name: Cargo
description: Minimal editorial design system for creative portfolio builders — custom variable grotesque at tight negative tracking, near-white canvas with charcoal ink, browser-default hyperlink blue as the sole accent, and a deliberately undecorated structure that puts the work first.

colors:
  # Surface / canvas
  background: "#f5f5f5"          # near-white — Cargo's canvas is warm paper, not pure white
  surface: "#ffffff"              # card and panel backgrounds

  # Ink / text
  ink: "#3f3f3f"                  # primary text — deep charcoal, never true black
  ink-secondary: "#7a7a7a"        # muted labels, captions, nav metadata
  on-background: "#3f3f3f"
  on-surface: "#3f3f3f"

  # Brand accent — browser-default hyperlink blue
  primary: "#0000ee"              # CTA links, interactive text, "Start" / "Login" links
  on-primary: "#ffffff"
  primary-hover: "#0000ff"        # slightly lighter blue on hover — opaque approx

  # Link states
  link-default: "#000000"         # was rgba(0,0,0,0.75) — opaque approx; base nav links
  link-muted: "#bfbfbf"           # disabled / secondary navigation items

  # Borders
  border: "#d9d9d9"               # hairline dividers and container edges

  # Shadow tints
  shadow-soft: "#d9d9d9"          # opaque approx used for any elevation; system is essentially flat

typography:
  display-hero:
    fontFamily: "CargoDiatypeVariable, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 49px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -1.23px
  display:
    fontFamily: "CargoDiatypeVariable, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.9px
  heading-section:
    fontFamily: "CargoDiatypeVariable, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.5px
  heading-sub:
    fontFamily: "CargoDiatypeVariable, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.4px
  body-large:
    fontFamily: "CargoDiatypeVariable, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: -1.23px
  body:
    fontFamily: "CargoDiatypeVariable, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  nav-link:
    fontFamily: "CargoDiatypeVariable, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "CargoDiatypeVariable, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "CargoDiatypeVariable, DM Sans, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 8px
  md: 15px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px

rounded:
  none: 0px
  sm: 2px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px

  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  button-ghost-hover:
    backgroundColor: "{colors.border}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 16px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px

  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px 15px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 12px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 12px

  badge:
    backgroundColor: "{colors.border}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 3px 8px
---

# Cargo Design System

## Overview

Cargo's interface practices an extreme form of negative space as brand identity. The canvas is a warm near-white — `{colors.background}` rather than stark white — against which `{colors.ink}` charcoal text sits with the quiet authority of a well-set book. There is nothing decorative anywhere in the chrome: no gradients, no shadows, no illustrated mascots, no motion flourishes beyond a discrete page transition. The whole system is tuned to recede and let the actual portfolio work — the sites people have built with Cargo — occupy every available pixel of attention. It is, in this sense, the anti-Squarespace: a tool designed by and for designers who find product ornamentation an insult to craft.

The typeface is CargoDiatypeVariable, a variable-axis version of ABC Diatype from Dinamo foundry, loaded as a self-hosted woff2. The choice is unmistakably typographically literate — Diatype is the grotesque of choice for the contemporary independent design community. At display scale (49px, weight 500, −1.23px tracking), the heading "Cargo Site Builder®" reads with confident density; the registered trademark glyph after the wordmark is a dry, self-aware signature. At UI scale (14px, weight 400), the same family becomes invisible — a perfectly neutral shell for navigation labels, form fields, and pricing copy. The variable axis means the font can travel the entire weight range without a typeface swap.

The accent strategy is the system's most distinctive choice. `{colors.primary}` is browser-default hyperlink blue — precisely `#0000ee`, the exact hex a 1990s browser would render before CSS existed. Cargo uses it entirely unironically: for "Start," "Login →," and inline CTAs, the blue is the whole brand accent, a nostalgic internet artifact elevated to design statement. Against the near-white canvas and charcoal ink, this particular blue lands as knowing and un-anxious — a tool built by people who understand the web's history deeply enough to quote it.

**Key Characteristics:**
- `{colors.background}` warm near-white canvas — not pure paper, not grey; occupies the space between both
- `{colors.ink}` deep charcoal (#3f3f3f) as primary text — the system avoids true black throughout
- `{colors.primary}` browser-default blue (#0000ee) as the sole brand accent — used exclusively for primary links and CTAs
- CargoDiatypeVariable (ABC Diatype variable) self-hosted at all scales — a single typeface running the full weight axis
- −1.23px letter-spacing at display scale (49px, weight 500) — tight-tracked grotesque as the typographic signature
- `{rounded.none}` across the entire system — zero border-radius; every interactive element is a hard rectangle
- Flat elevation model: no drop shadows, no card chrome, no hover scale lifts — depth is structural whitespace only
- Navigation as raw text labels — "Templates," "Community," "Information," "Start," "Login" — no icons, no separators, no active indicators
- `{spacing.md}` (15px) as the micro-rhythm unit — smaller-than-standard gap scale suited to editorial density
- Community-forward hero: featured member site tiles and the Dinamo typeface partnership prominently displayed at load
- Weight 300 for large feature descriptions alongside weight 500 for headings — a three-weight scale (300/400/500) that covers every hierarchy need
- Gradient-free, shadow-free, animation-free — the design deliberately signals that Cargo is a tool, not a product demo

## Colors

### Primary

- **Near-White Canvas** (`{colors.background}`): The page field — warm paper tone rather than pure white. Forms the consistent ground across all pages, dashboard, and builder interface.
- **Deep Charcoal** (`{colors.ink}`): Primary text color, `#3f3f3f`. Cargo avoids true black; this charcoal reads as print-like and considered rather than harsh.

### Brand Accent

- **Browser Blue** (`{colors.primary}`): The system's only chromatic color — intentionally the browser-default hyperlink blue `#0000ee`. Applied to primary CTAs ("Start," "Login →"), interactive inline links, and active states. The choice is a deliberate design reference, not an oversight.

### Text States

- **Secondary Text** (`{colors.ink-secondary}`): Supporting labels, captions, dates, and non-primary metadata at reduced contrast.
- **Primary Text Link** (`{colors.link-default}`): Opaque approximation of `rgba(0,0,0,0.75)` — semi-transparent black that renders as a dark mid-grey, used for base navigation links before color-coded hover states.
- **Muted Link** (`{colors.link-muted}`): Disabled or tertiary navigation items, inactive section markers, footer footnotes.

### Borders and Surfaces

- **Hairline Border** (`{colors.border}`): `#d9d9d9` — present on form fields, thumbnail frames, and section dividers. Low-contrast and recessive, present only as a structural necessity.
- **White Surface** (`{colors.surface}`): Pure white for panels and inset cards where contrast with the warm near-white background is needed.

### Shadow

The system is essentially flat. `{colors.shadow-soft}` exists only as a fallback for any panel overlap states in the builder UI; it never appears on the marketing site.

## Typography

### Font Family

- **Primary**: `CargoDiatypeVariable` (ABC Diatype variable axis, self-hosted woff2), with fallbacks: `DM Sans, system-ui, -apple-system, sans-serif`
- Diatype is a neo-grotesque from Dinamo Typefaces — a condensed, optically precise form strongly associated with the contemporary design and art publishing community
- The variable axis covers weights 300 through 700; Cargo uses 300 (feature descriptions), 400 (body/UI), and 500 (display headings) as its three active stops
- **Monospace**: Not present on the marketing site
- **OpenType features**: No custom feature settings detected; the variable axis carries the expressive work

*Note: CargoDiatypeVariable is a licensed proprietary typeface. For external implementations, `DM Sans` (weight 300–500) at matching tracking values is the closest open-source substitute. Avoid `Inter` — its proportions differ significantly from Diatype's narrower geometry.*

### Hierarchy

The complete type scale is declared in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | Hero headings — "Cargo Site Builder®" at 49px weight 500, −1.23px tracking |
| `display` | Section headers, feature titles, pricing tier names |
| `heading-section` | Sub-section labels, template category headers |
| `heading-sub` | Card titles, sidebar section labels |
| `body-large` | Feature descriptions at 20px weight 300 — the same large scale as display but with the lightest weight for contrast |
| `body` | Standard reading copy, form labels, pricing descriptions |
| `nav-link` | Navigation items, footer links, contextual text links |
| `button-ui` | Button labels, CTA text, inline action labels |
| `caption` | Attribution lines, timestamp metadata, template tags |

### Principles

- One typeface, three weights (300 / 400 / 500) — the axis covers every hierarchy tier without a secondary family
- Negative tracking at display scale (−1.23px at ~49px) is the system's typographic fingerprint; it creates optical density without heaviness
- Weight 300 at large sizes produces a distinctive "light display" effect where the heading reads as generous rather than assertive
- UI type at 14px weight 400 with zero tracking is deliberately neutral — it provides information without calling attention to itself
- No uppercase, no small-caps, no condensed transforms — sentence case throughout; the letterforms carry the character

## Layout

### Spacing System

The complete spacing scale is in the `spacing:` token block above. Base unit: ~5px (derived from the 4.92px value in dembrandt output, rounded to 5px for practical use).

Cargo's spacing rhythm is deliberately tighter than a typical SaaS product. The `{spacing.md}` (15px) unit acts where most systems use 16–20px; sections breathe but don't sprawl. Large vertical gaps appear only at the very top of the hero, where the massive area of empty near-white acts as a compositional device — a pause before content rather than padding.

### Grid & Container

- Max content width: full-viewport with approximately 15px gutters — Cargo does not constrain content to a centred column
- Hero layout: split two-column (left: wordmark/heading; right: featured site tile with community description)
- Navigation: single horizontal bar flush left (wordmark) and right (actions) with nothing centered
- Templates/Community pages: dense grid of site thumbnails at variable aspect ratios

### Whitespace Philosophy

- Whitespace as content — the large empty field above "Cargo Site Builder®" is intentional dead space, not an unfinished hero
- Structural separation only: sections are divided by proximity rules, never by background color changes or divider lines in the marketing chrome
- The compact 15px micro-gap scale keeps the UI tight without feeling cramped; it matches the visual density of design-community publications that Cargo's audience reads

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, heading text, navigation bar |
| Hairline (Level 1) | `1px solid {colors.border}` | Thumbnail frames, form field borders, structural edges |
| Inset Surface (Level 2) | Background shifts to `{colors.surface}` white | Inset card panels within the near-white background |
| Focus State | `outline: 2px solid {colors.ink}` | Keyboard navigation focus — restrained but present |
| Dialog | Overlay with `{colors.surface}` panel | Signup/login modal; no shadow, defined by edge alone |

**Shadow Philosophy**: Cargo's depth system is entirely non-skeuomorphic. No `box-shadow` value is detectable on the marketing site. Depth is communicated through structural means: the placement of elements on the page, the near-white vs. white surface distinction, and hairline borders where a physical edge is necessary. The effect is that of a well-designed print publication where paper layers and trim lines establish hierarchy — no simulated lighting, no softbox glow.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — buttons, inputs, cards, thumbnails, navigation items |
| `sm` | 2px | Occasional badge chips if rounded at all; extremely rare |
| `pill` | 9999px | Not used in the marketing chrome; available for edge cases |

Cargo is one of the few contemporary web products to use `{rounded.none}` as its universal radius. Buttons are rectangular. Inputs have square corners. Thumbnail frames are hard-edged. This is a deliberate signal: Cargo is a tool for people who have thought about corner radii and chosen zero. The absence of rounding communicates precision, craft, and an implicit critique of the default "friendly pill" aesthetic that pervades SaaS design.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — `{colors.primary}` blue fill, white text, zero radius. Used for primary CTAs like "Start." The blue fill is the most visually active element in the entire chrome.
- **`button-ghost`** — `{colors.surface}` white fill, `{colors.ink}` text, zero radius. Secondary actions and navigation-adjacent controls.
- **Text link** — No background, no padding, `{colors.primary}` blue text with no underline by default. The majority of Cargo's interactive actions are pure text links, consistent with the editorial anti-UI stance.

### Cards

Template preview tiles use `{rounded.none}` with `{colors.border}` hairline frames. No card chrome, no title bar, no shadow lift. Images fill to the edge of the frame. Caption text sits below the tile at `{typography.caption}` scale.

### Inputs

Form inputs use `{rounded.none}` with a `{colors.border}` perimeter border. On focus the border shifts to `{colors.ink}` — a charcoal outline rather than a colored ring. No glow, no transition, no filled background change. Placeholder text renders at `{colors.ink-secondary}`.

### Badges

Template category and site-type tags use `{rounded.sm}` (2px) — the only place in the system where a radius appears, and even here it is barely perceptible. `{typography.caption}` size, `{colors.border}` background, `{colors.ink}` text.

### Navigation

The global nav is a minimal horizontal bar: "Cargo" wordmark at far left in `{typography.display-hero}` scale and weight 500, right-side items ("Templates," "Community," "Information," "Start," "Login →") in `{typography.nav-link}` 14px weight 400. "Start" and "Login →" render in `{colors.primary}` blue — the only colored text in the nav. No active state indicator, no dropdown mega-menus, no sticky behavior visible on the marketing page.

## Do's and Don'ts

### Do

- Use `{colors.background}` (#f5f5f5) as the page canvas — not pure white; the warmth is part of the identity
- Apply `{colors.primary}` (#0000ee) exclusively to interactive text links and primary CTAs — it is the sole accent and its scarcity is the whole point
- Set all interactive elements (buttons, inputs, badges) to `{rounded.none}` — the zero-radius system is a design philosophy, not an oversight
- Use `{colors.ink}` (#3f3f3f) for primary text; never reach for true black (#000000) — charcoal is the system's text standard
- Keep navigation as plain text labels in `{typography.nav-link}` — no icons, no separators, no hover animations beyond a color shift
- Lean on negative letter-spacing (−1.23px at display scale) in `{typography.display-hero}` — removing the tracking makes headings feel generic
- Use weight 300 for large feature descriptions alongside weight 500 headings — the weight contrast between `{typography.body-large}` and `{typography.display-hero}` is the hierarchy
- Separate sections with structural whitespace alone — no divider lines, no background color alternation, no decorative rules

### Don't

- Don't introduce rounded corners on buttons or inputs — even 2–4px radius signals a different design philosophy than Cargo's
- Don't use any accent color besides `{colors.primary}` blue in the marketing chrome — no brand gradient, no secondary hue, no success-green highlights
- Don't add drop shadows to cards, navigation, or panels — the flat model is intentional and part of the aesthetic signal
- Don't substitute a system font for CargoDiatypeVariable — Inter or SF Pro at matching weights reads completely differently; use DM Sans as the closest open-source substitute
- Don't apply letter-spacing of 0 to display headings — the −1.23px tracking at large scale is the typographic identity
- Don't add icons to navigation or buttons — the system is text-only throughout
- Don't use animation or transitions on hover states beyond instantaneous color shifts — no 200ms fades, no scale transforms
- Don't introduce a mid-grey background for hover states — `{colors.border}` or white is the only permitted hover surface change
- Don't uppercase labels or navigation items — sentence case is consistent throughout; all-caps would break the editorial register
- Don't add inline images, illustrations, or decorative SVGs to the marketing chrome — the work of Cargo's users is the only imagery permitted

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single-column layout, hero stacks to one column, nav collapses |
| Mobile | 480–768px | Stacked hero, abbreviated nav, template grid goes 2-up |
| Tablet | 768–1024px | Split hero reappears, nav fully visible, template grid 3-up |
| Desktop | 1024–1440px | Full two-column hero, all nav items, template grid 4-up |
| Large Desktop | >1440px | Content layout widens with outer padding; no hard max-width cap |

### Touch Targets

Cargo's touch target sizing is minimal for a design-community tool — the assumption is a mouse/trackpad user. Text link CTAs like "Start" and "Login →" have effective tap areas of ~36–40px via surrounding padding. Template tiles provide a full-tile tap surface. On mobile, nav items gain vertical padding to reach 44px touch height.

### Collapsing Strategy

- **Navigation**: At mobile, the primary nav collapses to a minimal list; the "Cargo" wordmark remains visible at all breakpoints as the brand anchor
- **Hero**: The two-column split (heading left, featured tile right) stacks vertically on mobile; the massive whitespace gap above the heading compresses proportionally
- **Type scale**: Heading type steps down from 49px to approximately 32–36px on mobile; the tracking stays at −1.23px to preserve the visual signature
- **Template grid**: Steps from 4-column to 2-column to 1-column; aspect ratios of individual tiles are preserved

### Image Behavior

- Template preview thumbnails are fixed-ratio tiles; `object-fit: cover` fills the container without distortion
- Featured community site previews in the hero are presented at actual screenshot proportions — no forced crop
- No hero background imagery; the visual field is typography and near-white only

---

## Agent Prompt Guide

### Quick Color Reference

- Background: `{colors.background}` (#f5f5f5)
- Text: `{colors.ink}` (#3f3f3f)
- Brand accent: `{colors.primary}` (#0000ee)
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- CTA: `{colors.primary}`

### Example Component Prompts

- "Build a Cargo-style hero section: `{colors.background}` near-white canvas, two-column layout with `{typography.display-hero}` heading (CargoDiatypeVariable 49px weight 500 letter-spacing −1.23px) in `{colors.ink}` at left, featured thumbnail tile at right. Large empty vertical space above the heading. No hero image, no gradient, no shadow. Right-aligned 'Start' and 'Login →' links in `{colors.primary}` at the top nav."
- "Create a Cargo navigation bar: `{colors.background}` background, wordmark 'Cargo' far left in `{typography.display-hero}` weight 500 `{colors.ink}`, center items 'Templates · Community · Information' in `{typography.nav-link}` `{colors.link-default}`, far right 'Start' and 'Login →' in `{colors.primary}`. No hover animation, no border, no shadow. Flat horizontal strip."
- "Design a Cargo template gallery grid: 4-column desktop layout, each tile a `{rounded.none}` hard-edged frame with `1px solid {colors.border}` border. Screenshot image fills the tile. Below: site name in `{typography.body}` `{colors.ink}`, category tag in `{typography.caption}` `{colors.ink-secondary}`. No shadow, no hover scale transform, no overlay on hover."
- "Build a Cargo-style form: inputs with `{rounded.none}`, `1px solid {colors.border}` border, `{typography.body}` text in `{colors.ink}`, placeholder in `{colors.ink-secondary}`. On focus, border becomes `1px solid {colors.ink}`. Submit button: `{components.button-primary}` with `{colors.primary}` fill, white text, zero radius, 8px×16px padding."
- "Create a Cargo feature description block: `{typography.heading-section}` section label in `{colors.ink}` at 24px weight 500 −0.5px tracking, followed by `{typography.body-large}` description at 20px weight 300 −1.23px tracking in `{colors.ink}`. Generous vertical space before and after. `{colors.primary}` inline link 'Learn more →' with no underline."
- "Design a Cargo-style site badge/tag: `{rounded.sm}` 2px radius, `{colors.border}` background, `{colors.ink}` text in `{typography.caption}` 12px weight 400. Compact padding 3px×8px. Used for template category labels like 'Photography' or 'Portfolio'."

### Iteration Guide

1. Start with `{colors.background}` (#f5f5f5) — the near-white canvas sets the editorial register; pure white (#ffffff) changes the character
2. Use `{colors.primary}` (#0000ee) only for interactive text links and primary CTAs — it is the system's only chromatic element; treat it as scarce
3. Set `{rounded.none}` on every interactive control — zero radius is the system's most distinctive rule; any rounding breaks the aesthetic signal
4. Apply `{typography.display-hero}` weight 500 with −1.23px tracking for all display headings — the negative tracking is inseparable from the typeface identity
5. Build hierarchy through weight axis: 300 for large feature descriptions, 400 for body/UI, 500 for headings — scale and weight together, never bold alone
6. Use structural whitespace (large top margins, 15px micro-gaps) as the depth system — no shadows, no background color alternation
7. Keep all interactive elements as flat rectangles; `{colors.border}` hairlines provide the only visible edges

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Cargo. Brand names and trademarks belong to their respective owners.