Paperclip

---
version: alpha
name: "Paperclip Dark Warm"
description: "Primary visual anchor uses #141413 with primary page background and navbar fill; --charcoal css variable; covers ~17.5% area. Typography baseline relies on Inter Tight for hero headline — large display text; tight tracking creates compressed, impactful feel."
colors:
  charcoal: "#141413"
  amber-warning: "#e5a536"
  dark-raised-surface: "#3a3836"
  dark-surface: "#1f1d1a"
  green-success: "#22c55e"
  bond-white: "#ffffff"
  dim-text: "#6a6560"
  manila: "#f3e6c4"
  stone-muted: "#9a958a"
  dark-border: "#2f2c28"
  manila-cream: "#f3e6c4"
  border-stone: "#2f2c28"
typography:
  hero-display:
    fontFamily: "Inter Tight"
    fontSize: "44.8px"
    fontWeight: "600"
    lineHeight: "47.04px"
    letterSpacing: "-1.344px"
  section-heading:
    fontFamily: "Inter Tight"
    fontSize: "44.8px"
    fontWeight: "600"
    lineHeight: "47.04px"
    letterSpacing: "-1.344px"
  nav-label:
    fontFamily: "Inter Tight"
    fontSize: "14.4px"
    fontWeight: "600"
    lineHeight: "18px"
  body-regular:
    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: "23.328px"
  code-regular:
    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"
  cta-button:
    fontFamily: "Inter"
    fontSize: "15.2px"
    fontWeight: "400"
    lineHeight: "23.56px"
rounded:
  sm: "4px"
  md: "8px"
  lg: "12px"
  pill: "9999px"
  large-pill: "999px"
  circle: "100px"
spacing:
  xs: "0.5rem"
  sm: "1rem"
  md: "1.5rem"
  lg: "clamp(2rem, calc(1.5rem + 1.5vw), 3rem)"
  xl: "clamp(3rem, calc(2rem + 3vw), 5rem)"
  2xl: "clamp(4rem, calc(2.5rem + 4.5vw), 7rem)"
  3xl: "clamp(5rem, calc(3rem + 6vw), 10rem)"
  section: "clamp(5rem, calc(3rem + 5.5vw), 9rem)"
  section-gap: "clamp(2rem, 5vw, 6rem)"
  base-17-6: "17.6px"
  base-24: "24px"
  base-12: "12px"
  base-43-2: "43.2px"
  base-50: "50px"
---

## Overview

Primary visual anchor uses #141413 with primary page background and navbar fill; --charcoal css variable; covers ~17.5% area. Typography baseline relies on Inter Tight for hero headline — large display text; tight tracking creates compressed, impactful feel.

This system uses a 8px base grid with scale values 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 80.

**Signature traits:**
- Core token rhythm: Token evidence indicates consistent color, spacing, and radius rhythm across visible UI.

## Colors

The palette uses 18 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-primary** maps to `charcoal`: Role "primary" is grounded by usage context "Primary page background and navbar fill; --charcoal CSS variable; covers ~17.5% area".
- **action-text** maps to `manila`: Role "text" is grounded by usage context "Primary text, headings, nav links, button fill, icon strokes; --manila CSS variable; 1546 hits".
- **content-text** maps to `stone-muted`: Role "text" is grounded by usage context "Secondary/muted text, subheadings, captions; 940 hits across footer, header, main".
- **action-background** maps to `dark-surface`: Role "background" is grounded by usage context "Elevated card/button surfaces, slightly lighter than charcoal; 74 hits in footer zone".

### Dark Theme

### Primary Brand
- **Charcoal** (#141413): Primary page background and navbar fill; --charcoal CSS variable; covers ~17.5% area. Role: primary. {authored: rgb(20, 20, 19), space: rgb}

### Text Scale
- **Bond White** (#ffffff): High-contrast text on colored surfaces, icon fills; --bond CSS variable; 110 hits. Role: text. {authored: rgb(255, 255, 255), space: rgb, alpha: 0.04}
- **Dim Text** (#6a6560): Dimmed/disabled text, placeholder text; 24 hits in footer/button zones. Role: text. {authored: rgb(106, 101, 96), space: rgb}
- **Manila** (#f3e6c4): Primary text, headings, nav links, button fill, icon strokes; --manila CSS variable; 1546 hits. Role: text. {authored: rgb(243, 230, 196), space: rgb}
- **Stone Muted** (#9a958a): Secondary/muted text, subheadings, captions; 940 hits across footer, header, main. Role: text. {authored: rgb(154, 149, 138), space: rgb}

### Interactive
- **Dark Border** (#2f2c28): Navbar bottom border, card borders, dividers; 78 hits; confirmed in navbar probe borderColor. Role: border. {authored: rgb(47, 44, 40), space: rgb}

### Surface & Shadows
- **Amber Warning** (#e5a536): Warning state indicators; 6 hits; --warning semantic token. Role: background. {authored: rgb(229, 165, 54), space: rgb}
- **Dark Raised Surface** (#3a3836): Raised surface variant for cards/panels; 6 hits; --color-surface-raised. Role: background. {authored: rgb(58, 56, 54), space: rgb}
- **Dark Surface** (#1f1d1a): Elevated card/button surfaces, slightly lighter than charcoal; 74 hits in footer zone. Role: background. {authored: rgb(31, 29, 26), space: rgb}
- **Green Success** (#22c55e): Success state indicators, status badges, glow shadows; 24 hits; --success semantic token. Role: background. {authored: rgb(34, 197, 94), space: rgb, alpha: 0.15}

### Light Theme

### Primary Brand
- **Charcoal** (#141413): Primary body text, nav text, button text on light surfaces; --charcoal; 59 hits. Role: primary. {authored: rgb(20, 20, 19), space: rgb}

### Text Scale
- **Manila Cream** (#f3e6c4): Hero headline text, CTA button fill, brand accent; --manila; 1546 hits. Role: text. {authored: rgb(243, 230, 196), space: rgb}
- **Stone Muted** (#9a958a): Secondary text, muted labels; 940 hits. Role: text. {authored: rgb(154, 149, 138), space: rgb}

### Interactive
- **Border Stone** (#2f2c28): Dividers, card borders; 78 hits. Role: border. {authored: rgb(47, 44, 40), space: rgb}

### Surface & Shadows
- **Amber Warning** (#e5a536): Warning indicators; --warning. Role: background. {authored: rgb(229, 165, 54), space: rgb}
- **Bond White** (#ffffff): Primary page background in light mode; --bond / --bg CSS variable. Role: background. {authored: rgb(255, 255, 255), space: rgb, alpha: 0.04}
- **Dark Surface** (#1f1d1a): Dark card/button surfaces in light mode; 74 hits. Role: background. {authored: rgb(31, 29, 26), space: rgb}
- **Green Success** (#22c55e): Success indicators, status glows; --success. 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 12px to 44.8px.

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Hero headline — large display text; tight tracking creates compressed, impactful feel | Inter Tight | 44.8px | 600 | 47.04px | -1.344px | Inter Tight | Extracted token |
| Section-level headings like 'Quickstart'; same scale as hero display | Inter Tight | 44.8px | 600 | 47.04px | -1.344px | Inter Tight | Extracted token |
| Navigation links, button labels, small headings; semibold weight for emphasis | Inter Tight | 14.4px | 600 | 18px | normal | Inter Tight | Extracted token |
| Primary body copy, paragraph text; most frequent tuple (864 hits) | Inter | 16px | 400 | 24.8px | normal | Inter | Extracted token |
| Emphasized body text, UI labels, button text | Inter | 16px | 500 | 22.4px | normal | Inter | Extracted token |
| Secondary body text, captions, metadata | Inter | 14.4px | 400 | 23.328px | normal | Inter | Extracted token |
| Code blocks, terminal output, inline code | JetBrains Mono | 12px | 400 | 15.6px | normal | JetBrains Mono | Extracted token |
| Code labels, badges, monospace UI elements with tracked spacing | JetBrains Mono | 12px | 500 | 18.6px | 0.96px | JetBrains Mono | Extracted token |
| Primary CTA button text; probe-confirmed at 15.2px | Inter | 15.2px | 400 | 23.56px | normal | Inter | Extracted token |

## Layout

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

### Responsive Strategy
- **mobile (<= 900px)**: 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 |
|------|-------|----|-------|
| xs | 0.5rem | 8 | Mapped to --space-xs |
| base-12 | 12px | 12 | Extracted spacing token |
| sm | 1rem | 16 | Mapped to --space-sm |
| base-17.6 | 17.6px | 17.6 | Extracted spacing token |
| md | 1.5rem | 24 | Mapped to --space-md |
| base-24 | 24px | 24 | Extracted spacing token |
| lg | clamp(2rem, calc(1.5rem + 1.5vw), 3rem) | 32 | Mapped to --space-lg |
| section-gap | clamp(2rem, 5vw, 6rem) | 32 | Mapped to --space-section-gap |
| base-43.2 | 43.2px | 43.2 | Extracted spacing token |
| xl | clamp(3rem, calc(2rem + 3vw), 5rem) | 48 | Mapped to --space-xl |
| base-50 | 50px | 50 | Extracted spacing token |
| 2xl | clamp(4rem, calc(2.5rem + 4.5vw), 7rem) | 64 | Mapped to --space-2xl |
| 3xl | clamp(5rem, calc(3rem + 6vw), 10rem) | 80 | Mapped to --space-3xl |
| section | clamp(5rem, calc(3rem + 5.5vw), 9rem) | 80 | Mapped to --space-section |

## 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 | rgb(243, 230, 196) ; rgb(154, 149, 138) ; rgba(255, 255, 255, 0.3) |
| 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 | rgb(243, 230, 196) ; rgb(154, 149, 138) ; rgba(255, 255, 255, 0.3) |
| 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 |
|------|-------|----|--------------|
| sm | 4px | 4 | Subtle corner |
| md | 8px | 8 | Control corner |
| lg | 12px | 12 | Control corner |
| circle | 100px | 100 | Large surface corner |
| large-pill | 999px | 999 | Large surface corner |
| pill | 9999px | 9999 | Large surface corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| sm | 4px | px |
| md | 8px | px |
| lg | 12px | px |
| pill | 9999px | px |
| large-pill | 999px | px |
| circle | 100px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Core token rhythm 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) |
| Breakpoint 3 | <= 768px | (max-width: 768px) |
| Breakpoint 4 | <= 900px | (max-width: 900px) |
| Breakpoint 5 | 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.