---
version: alpha
name: Convicts
description: Editorial agency confidence — a near-black canvas, oversized bold display type with tight tracking, image-forward portfolio cards, and a single warm signal accent that punctuates an otherwise monochrome system.
colors:
  # Canvas + ink
  background: "#0c0c0c"
  surface: "#161616"
  surface-soft: "#1e1e1e"
  ink: "#f5f5f3"
  ink-secondary: "#a8a8a4"
  ink-muted: "#6f6f6c"

  # Accent — warm editorial signal
  primary: "#e8513a"
  primary-hover: "#ff6347"
  on-primary: "#0c0c0c"

  # Lines + chrome
  border: "#2a2a2a"
  border-strong: "#3a3a3a"

  # Neutral scale
  gray-950: "#0c0c0c"
  gray-900: "#161616"
  gray-800: "#1e1e1e"
  gray-600: "#6f6f6c"
  gray-400: "#a8a8a4"
  gray-100: "#e6e6e2"

  # On-color
  on-ink: "#0c0c0c"

typography:
  display-hero:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 88px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -2px
  display-large:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1px
  card-title:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.5px
  eyebrow:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.5px
  body-large:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 1px
  caption:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 120px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

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

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 28px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 28px
    borderColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  card-project:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.none}"
    padding: 20px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border}"
---

# Convicts Design System

## Overview

Convicts is a creative agency and production studio, and its site behaves like a portfolio reel rendered as a website — a near-black canvas (`{colors.background}`) where oversized, condensed display type and full-bleed imagery do the talking. The design system is built around contrast and conviction: almost everything is monochrome, drained to near-white ink (`{colors.ink}`) on deep charcoal, so that the work itself — the project thumbnails and films — supplies the color. This is editorial restraint deployed for a studio that wants its case studies, not its chrome, to be the spectacle.

The typographic move is the identity. Headlines use a heavy condensed display face (Anton, standing in for the brand's compressed grotesque) set enormous and tight, with negative tracking that packs letters into dense, magazine-cover blocks. Against this, body and label copy use a clean grotesque (Archivo) at modest sizes, creating a deliberate gap between the shouting display layer and the quiet reading layer. Eyebrows and button labels are set small, uppercase, and letter-spaced wide — the inverse of the headlines — so the system breathes between extremes of compression and expansion.

Color is functional, not decorative. A single warm signal accent (`{colors.primary}`, a burnt vermilion) appears on primary actions, active states, and the occasional underline — a hot punctuation mark in an otherwise grayscale field. There are no rounded corners on structural elements: cards, buttons, and inputs are hard rectangles, reinforcing the architectural, no-nonsense agency posture. Borders are thin and low-contrast (`{colors.border}`), used to divide a dense grid rather than to decorate.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with drained near-white ink — the work supplies the color
- Oversized condensed display type (Anton) with tight negative tracking at hero sizes
- Clean grotesque (Archivo) for body and small uppercase, wide-tracked labels
- Single warm vermilion accent (`{colors.primary}`) reserved for actions and active states
- Sharp rectangular geometry — `{rounded.none}` on buttons, cards, and inputs
- Thin low-contrast borders (`{colors.border}`) dividing an image-forward portfolio grid
- Extreme type-scale contrast: 88px headlines against 12px wide-tracked eyebrows

## Colors

### Primary
- **Near Black** (`{colors.background}`): Page canvas, button text on accent, nav background.
- **Bone White** (`{colors.ink}`): Primary text, headings, logo wordmark.
- **Charcoal Surface** (`{colors.surface}`): Cards, inputs, raised panels against the canvas.

### Accent
- **Vermilion** (`{colors.primary}`): Primary CTAs, active links, underlines, the lone color in the system.
- **Vermilion Hover** (`{colors.primary-hover}`): Hover state of the accent.

### Ink Scale
- **Bone White** (`{colors.ink}`): Headings and primary reading text.
- **Secondary Ink** (`{colors.ink-secondary}`): Captions, project categories, muted copy.
- **Muted Ink** (`{colors.ink-muted}`): Disabled text, fine print, timestamps.

### Lines & Chrome
- **Border** (`{colors.border}`): Default dividers, card outlines, grid lines.
- **Border Strong** (`{colors.border-strong}`): Input outlines, secondary button edges.

## Typography

### Font Family
- **Display**: `Anton` (condensed heavy display), with fallbacks: `Oswald, Arial Narrow, sans-serif`
- **Text**: `Archivo` (clean grotesque), with fallbacks: `Helvetica Neue, Arial, sans-serif`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 88px hero — billboard headlines, maximum compression |
| `display-large` | 64px secondary headlines |
| `section-heading` | 40px section titles |
| `card-title` | 24px project / card titles (Archivo bold) |
| `eyebrow` | 12px uppercase wide-tracked labels |
| `body-large` | 20px lead paragraphs |
| `body` | 16px standard reading text |
| `body-small` | 14px captions, metadata |
| `button-ui` | 13px uppercase wide-tracked button labels |
| `caption` | 12px badges, fine metadata |

### Principles
- **Two-axis contrast**: Display type compresses (negative tracking, condensed face); labels expand (wide positive tracking, uppercase). The tension between the two carries the brand.
- **Display is condensed, never light**: Anton is a single heavy weight set huge — headlines are dense blocks, not airy.
- **Restraint in text**: Archivo body stays small and quiet so the imagery and headlines dominate.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a large jump to `{spacing.4xl}` (120px) for the generous vertical rhythm between portfolio sections.

### Grid & Container
- Max content width: roughly 1440px, often edge-to-edge for full-bleed imagery
- Hero: oversized condensed headline on the dark canvas with minimal surrounding chrome
- Work grid: 2–3 column image-forward project cards with title + category below
- Full-width image bands break the grid for featured films

### Whitespace Philosophy
- **Cinematic darkness**: The dark canvas acts as a black box around the work — negative space is literal black space.
- **Generous vertical rhythm**: Sections separated by `{spacing.4xl}` so each project gets room to land.
- **Tight type, open layout**: Compressed headlines are counterbalanced by spacious surrounding margins.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, canvas color | Page background, text blocks |
| Surface (Level 1) | `{colors.surface}` fill | Cards, inputs, panels |
| Bordered (Level 2) | 1px solid `{colors.border}` | Grid dividers, card outlines |
| Focus | `{colors.primary}` border / outline | Keyboard and input focus |

**Depth Philosophy**: There is almost no shadow in this system. Depth comes from value steps in the grayscale stack — canvas (`{colors.background}`) → surface (`{colors.surface}`) → soft surface (`{colors.surface-soft}`) — and from thin borders, not from blur or elevation. The aesthetic is flat, printed, architectural.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, inputs — the default sharp geometry |
| `xs` | 2px | Tiny inline elements |
| `sm` | 4px | Small chips |
| `md` | 8px | Occasional softened containers |
| `lg` | 12px | Rare larger panels |
| `pill` | 9999px | Category badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card-project}`).

### Buttons
- **`button-primary`** — Vermilion fill, near-black label, sharp rectangle, uppercase wide-tracked text.
- **`button-secondary`** — Transparent on canvas with a `{colors.border-strong}` edge; border brightens to `{colors.ink}` on hover.

### Pills & Badges
- **`badge`** — Surface fill, secondary ink, full-pill radius (the one place curves appear), used for project categories.

### Cards
- **`card`** — Surface panel with a thin `{colors.border}` outline, sharp corners, image-forward.
- **`card-project`** — Portfolio tile: full-bleed image with a 24px Archivo bold title and a wide-tracked category label below.

### Inputs
- **`input`** — Surface fill, sharp rectangle, `{colors.border-strong}` outline; focus switches the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Minimal dark bar, wordmark left, uppercase wide-tracked links, bottom hairline border `{colors.border}`.

## Do's and Don'ts

### Do
- Keep the canvas near-black and let imagery supply the color
- Set display headlines huge and condensed with negative tracking (Anton)
- Use uppercase, wide-tracked labels for eyebrows and buttons
- Reserve `{colors.primary}` vermilion for actions and active states only
- Keep structural geometry sharp (`{rounded.none}`)
- Use thin low-contrast borders to divide the grid

### Don't
- Don't introduce a second accent color — vermilion is the only signal
- Don't round buttons, cards, or inputs (badges are the lone exception)
- Don't set display type light or loosely tracked — it must read dense
- Don't lighten the canvas to gray — the black box is the brand
- Don't add drop shadows — depth is value steps and borders
- Don't widen body-text tracking — only labels expand

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column stacked work grid, hero scales down |
| Tablet | 600–1024px | 2-column project grid |
| Desktop | 1024–1440px | Full 2–3 column grid |
| Large Desktop | >1440px | Centered with generous margins, full-bleed bands |

### Collapsing Strategy
- Hero: 88px → scales down while preserving negative tracking
- Navigation: horizontal links → hamburger menu
- Work grid: 3-column → 2-column → single column
- Section spacing: 120px → ~48px on mobile

### Image Behavior
- Project thumbnails fill their card edge-to-edge at all sizes
- Featured films use full-width bleed bands
- Imagery keeps sharp corners across breakpoints

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Near Black `{colors.background}`
- Heading text: Bone White `{colors.ink}`
- Body text: Secondary Ink `{colors.ink-secondary}`
- Accent / CTA: Vermilion `{colors.primary}`
- Border: `{colors.border}`
- Surface: Charcoal `{colors.surface}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline in Anton at 88px, line-height 0.95, letter-spacing -2px, color `{colors.ink}`. Below it a 20px Archivo lead in `{colors.ink-secondary}`. A sharp vermilion CTA (`{colors.primary}` fill, `{colors.on-primary}` uppercase 13px wide-tracked label, `{rounded.none}`, 16px 28px padding)."
- "Design a project card: `{colors.surface}` panel, 1px `{colors.border}`, sharp corners, full-bleed image on top, 24px Archivo bold title `{colors.ink}`, and a 12px uppercase wide-tracked category in `{colors.ink-secondary}` below."
- "Build a category badge: `{colors.surface}` background, `{colors.ink-secondary}` text, `{rounded.pill}`, 4px 12px padding, 12px Archivo weight 500."
- "Create navigation: dark `{colors.background}` bar, bone-white wordmark left, uppercase 13px wide-tracked links, bottom hairline `{colors.border}`."

### Iteration Guide
1. Black canvas first — the design lives inside a black box
2. Push the type contrast: condensed huge headlines vs. tiny wide-tracked labels
3. One accent only — vermilion marks actions and active states
4. Sharp corners everywhere except category pills
5. Depth is value + border, never shadow

---

## 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 Convicts. Brand names and trademarks belong to their respective owners.