Paperclip

---
version: alpha
name: "Paperclip Dark Canvas"
description: "Paperclip is an AI agent management platform with a bold dark-canvas design anchored by a near-black (#0a0a0a) background and white (#ffffff) foreground text. The hero is defined by a vivid multi-color gradient illustration of stacked pill/capsule shapes in magenta, violet, teal, orange, and yellow. creating a chromatic, energetic visual identity against the dark field. Typography pairs Inter Tight (condensed, heavy headlines with negative letter-spacing) with Inter (body/UI) and JetBrains Mono (code/status). The primary CTA uses a white pill-shaped button on dark background. A semantic green (#22c55e) status system signals agent and task states throughout the product UI. Navigation is minimal and flat with a subtle bottom border."
colors:
  amber-status: "#f59e0b"
  canvas-black: "#0a0a0a"
  charcoal-surface: "#141413"
  signal-green: "#22c55e"
  bond-white: "#ffffff"
  deep-green-icon: "#16a34a"
  green-light: "#86efac"
  muted-warm-gray: "#6a6560"
  border-subtle: "#e5e5e5"
  primary-button: "#1a1a1a"
  charcoal: "#141413"
  ink-black: "#0a0a0a"
typography:
  hero-headline:
    fontFamily: "Inter Tight"
    fontSize: "60px"
    fontWeight: "600"
    lineHeight: "1.05"
    letterSpacing: "-1.344px"
  display-headline:
    fontFamily: "Inter Tight"
    fontSize: "44.8px"
    fontWeight: "600"
    lineHeight: "47.04px"
    letterSpacing: "-1.344px"
  label-tight:
    fontFamily: "Inter Tight"
    fontSize: "14.4px"
    fontWeight: "600"
    lineHeight: "18px"
  body-default:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24.8px"
  body-medium:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "500"
    lineHeight: "22.4px"
  body-small:
    fontFamily: "Inter"
    fontSize: "14.4px"
    fontWeight: "400"
    lineHeight: "22.32px"
  caption-xs:
    fontFamily: "Inter"
    fontSize: "13.6px"
    fontWeight: "400"
    lineHeight: "20.4px"
  code-default:
    fontFamily: "JetBrains Mono"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "15.6px"
  code-label:
    fontFamily: "JetBrains Mono"
    fontSize: "12px"
    fontWeight: "500"
    lineHeight: "18.6px"
    letterSpacing: "0.96px"
  micro-label:
    fontFamily: "Inter"
    fontSize: "9.6px"
    fontWeight: "500"
    lineHeight: "14.88px"
rounded:
  radius-sm: "4px"
  radius-md: "6px"
  radius-base: "8px"
  radius-lg: "100px"
  radius-pill: "9999px"
  radius-999: "999px"
spacing:
  space-1: "2px"
  space-2: "4px"
  space-3: "6.4px"
  space-4: "7px"
  space-5: "7.2px"
  space-6: "8px"
  space-7: "9.6px"
  space-8: "10px"
  space-9: "12px"
  space-10: "12.8px"
  space-11: "14px"
  space-12: "14.4px"
  space-13: "16px"
  space-14: "17.6px"
  space-15: "19.2px"
  space-16: "20px"
---

## Overview

Paperclip is an AI agent management platform with a bold dark-canvas design anchored by a near-black (#0a0a0a) background and white (#ffffff) foreground text. The hero is defined by a vivid multi-color gradient illustration of stacked pill/capsule shapes in magenta, violet, teal, orange, and yellow. creating a chromatic, energetic visual identity against the dark field. Typography pairs Inter Tight (condensed, heavy headlines with negative letter-spacing) with Inter (body/UI) and JetBrains Mono (code/status). The primary CTA uses a white pill-shaped button on dark background. A semantic green (#22c55e) status system signals agent and task states throughout the product UI. Navigation is minimal and flat with a subtle bottom border.

**Signature traits:**
- Dual typeface system: Pairs Inter Tight and Inter across the type hierarchy.
- Soft, rounded geometry: Generous corner rounding up to 9999px.

## Colors

The palette uses 17 validated color tokens across 2 theme profiles. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **surface-background** maps to `canvas-black`: Role "background" is grounded by usage context "Full-bleed page background and nav background; --background, --foreground inverse, --ink".
- **action-text** maps to `bond-white`: Role "text" is grounded by usage context "Primary text, nav links, hero headline, logo; --bond, --foreground inverse in dark mode".
- **content-background** maps to `signal-green`: Role "background" is grounded by usage context "Agent/task done status indicator, glow shadows, signal badge; --status-task-done, --signal".
- **content-text** maps to `muted-warm-gray`: Role "text" is grounded by usage context "Secondary/muted body text, nav item subdued labels".

### Dark Theme

### Text Scale
- **Bond White** (#ffffff): Primary text, nav links, hero headline, logo; --bond, --foreground inverse in dark mode. Role: text. {authored: rgb(255, 255, 255), space: rgb, alpha: 0.04}
- **Deep Green Icon** (#16a34a): Done task icon color; --status-task-icon-done. Role: text. {authored: rgb(22, 163, 74), space: rgb}
- **Green Light** (#86efac): Lighter green for status text labels and borders in done/success states. Role: text. {authored: rgb(134, 239, 172), space: rgb}
- **Muted Warm Gray** (#6a6560): Secondary/muted body text, nav item subdued labels. Role: text. {authored: rgb(106, 101, 96), space: rgb}

### Interactive
- **Border Subtle** (#e5e5e5): Rule lines, input borders; --border, --stone, --steel. Role: border.

### Surface & Shadows
- **Amber Status** (#f59e0b): Agent paused and task todo status color; --status-agent-paused, --amber. Role: background. {authored: rgb(245, 158, 11), space: rgb}
- **Canvas Black** (#0a0a0a): Full-bleed page background and nav background; --background, --foreground inverse, --ink. Role: background. {authored: rgb(10, 10, 10), space: rgb}
- **Charcoal Surface** (#141413): Secondary surface, card backgrounds in dark UI; --charcoal. Role: background. {authored: rgb(20, 20, 19), space: rgb}
- **Signal Green** (#22c55e): Agent/task done status indicator, glow shadows, signal badge; --status-task-done, --signal. Role: background. {authored: rgb(34, 197, 94), space: rgb, alpha: 0.15}

### Light Theme

### Text Scale
- **Charcoal** (#141413): Dark surface text and link color; --charcoal. Role: text. {authored: rgb(20, 20, 19), space: rgb}
- **Ink Black** (#0a0a0a): Primary foreground text; --foreground, --ink. Role: text. {authored: rgb(10, 10, 10), space: rgb}
- **Muted Warm Gray** (#6a6560): Subdued secondary text. Role: text. {authored: rgb(106, 101, 96), space: rgb}

### Interactive
- **Border Subtle** (#e5e5e5): Dividers, input borders; --border. Role: border.

### Surface & Shadows
- **Amber Status** (#f59e0b): Paused/todo status; --status-agent-paused. Role: background. {authored: rgb(245, 158, 11), space: rgb}
- **Bond White** (#ffffff): Page background in light mode; --background, --bond, --card. Role: background. {authored: rgb(255, 255, 255), space: rgb, alpha: 0.04}
- **Primary Button** (#1a1a1a): Primary button background in light mode; --primary. Role: background. {authored: rgb(26, 26, 26), space: rgb}
- **Signal Green** (#22c55e): Done status, signal badge; --status-task-done, --signal. Role: background. {authored: rgb(34, 197, 94), space: rgb, alpha: 0.15}

## Typography

Typography uses Inter Tight, Inter, JetBrains Mono across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes Inter Tight and Inter and JetBrains Mono for visual contrast. Weight range spans semi-bold, regular, medium. Sizes range from 9.6px to 60px.

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Primary hero heading — large, condensed, bold with tight negative letter-spacing | Inter Tight | 60px | 600 | 1.05 | -1.344px | Inter Tight, sans-serif, sans-serif; features: "cv11", "ss01" | Extracted token |
| Section display headings, confirmed by CSSOM tuple (×10) | Inter Tight | 44.8px | 600 | 47.04px | -1.344px | Inter Tight, sans-serif, sans-serif; features: "cv11", "ss01" | Extracted token |
| UI labels, nav items, badge text — condensed semi-bold | Inter Tight | 14.4px | 600 | 18px | normal | Inter Tight, sans-serif, sans-serif; features: "cv11", "ss01" | Extracted token |
| Primary body text, paragraph content — most frequent tuple (×874) | Inter | 16px | 400 | 24.8px | normal | Inter, sans-serif, sans-serif; features: "cv11", "ss01" | Extracted token |
| Emphasized body text, button labels, nav links | Inter | 16px | 500 | 22.4px | normal | Inter, sans-serif, sans-serif; features: "cv11", "ss01" | Extracted token |
| Secondary body text, captions, metadata | Inter | 14.4px | 400 | 22.32px | normal | Inter, sans-serif, sans-serif; features: "cv11", "ss01" | Extracted token |
| Fine print, helper text, timestamps | Inter | 13.6px | 400 | 20.4px | normal | Inter, sans-serif, sans-serif; features: "cv11", "ss01" | Extracted token |
| Code blocks, terminal output, monospace data | JetBrains Mono | 12px | 400 | 15.6px | normal | JetBrains Mono, monospace, monospace; features: "cv11", "ss01" | Extracted token |
| Code labels, status badges with tracked spacing | JetBrains Mono | 12px | 500 | 18.6px | 0.96px | JetBrains Mono, monospace, monospace; features: "cv11", "ss01" | Extracted token |
| Micro badges, tiny status indicators | Inter | 9.6px | 500 | 14.88px | normal | Inter, sans-serif, sans-serif; features: "cv11", "ss01" | Extracted token |

## Layout

Responsive system uses 2 breakpoint tier(s): mobile, desktop.

This system uses a 8px base grid with scale values 2, 4, 6.4, 7, 7.2, 8, 9.6, 10, 12, 12.8, 14, 14.4, 16, 17.6, 19.2, 20, 24, 43.2, 50, 70.4.

### Responsive Strategy
- **mobile (<= 1200px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **desktop (Unknown)**: Expand layout density and horizontal composition for wide viewports.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| space-1 | 2px | 2 | Extracted spacing token |
| space-2 | 4px | 4 | Extracted spacing token |
| space-3 | 6.4px | 6.4 | Extracted spacing token |
| space-4 | 7px | 7 | Extracted spacing token |
| space-5 | 7.2px | 7.2 | Extracted spacing token |
| space-6 | 8px | 8 | Extracted spacing token |
| space-7 | 9.6px | 9.6 | Extracted spacing token |
| space-8 | 10px | 10 | Extracted spacing token |
| space-9 | 12px | 12 | Extracted spacing token |
| space-10 | 12.8px | 12.8 | Extracted spacing token |
| space-11 | 14px | 14 | Extracted spacing token |
| space-12 | 14.4px | 14.4 | Extracted spacing token |
| space-13 | 16px | 16 | Extracted spacing token |
| space-14 | 17.6px | 17.6 | Extracted spacing token |
| space-15 | 19.2px | 19.2 | Extracted spacing token |
| space-16 | 20px | 20 | Extracted spacing token |
| space-17 | 24px | 24 | Extracted spacing token |
| space-18 | 43.2px | 43.2 | Extracted spacing token |
| space-19 | 50px | 50 | Extracted spacing token |
| space-20 | 70.4px | 70.4 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| n/a | 0 | No validated shadow payload |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | outline-color | lab(98.26 0 0) ; lab(66.128 -0.0000298023 0.0000119209) ; rgb(255, 255, 255) |
| Light | outline-width | 3px |
| Light | outline-offset | 0px |
| Light | transform | matrix(1, 0, 0, 1, 0, 0) ; matrix(1, 0, 0, 1, -5, -10) ; matrix(1, 0, 0, 1, 0, 8) |
| Dark | outline-color | lab(98.26 0 0) ; lab(66.128 -0.0000298023 0.0000119209) ; rgb(255, 255, 255) |
| Dark | outline-width | 3px |
| Dark | outline-offset | 0px |
| Dark | transform | matrix(1, 0, 0, 1, 0, 0) ; matrix(1, 0, 0, 1, -5, -10) ; matrix(1, 0, 0, 1, 0, 8) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-sm | 4px | 4 | Subtle corner |
| radius-md | 6px | 6 | Subtle corner |
| radius-base | 8px | 8 | Control corner |
| radius-lg | 100px | 100 | Large surface corner |
| radius-999 | 999px | 999 | Large surface corner |
| radius-pill | 9999px | 9999 | Large surface corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-sm | 4px | px |
| radius-md | 6px | px |
| radius-base | 8px | px |
| radius-lg | 100px | px |
| radius-pill | 9999px | px |
| radius-999 | 999px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Dual typeface system, Soft, rounded geometry without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 480px | (max-width: 480px) |
| Mobile | <= 640px | (max-width: 640px) |
| Mobile | <= 720px | (max-width: 720px) |
| Breakpoint 4 | <= 768px | (max-width: 768px) |
| Breakpoint 5 | <= 900px | (max-width: 900px) |
| Breakpoint 6 | <= 1023px | (max-width: 1023px) |
| Breakpoint 7 | <= 1200px | (max-width: 1200px) |
| Breakpoint 8 | Unknown | (prefers-reduced-motion: reduce) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.