---
version: alpha
name: Paste
description: Friendly Mac-native productivity polish — Inter/SF-style geometric sans, a confident indigo-violet brand accent, generously rounded cards on a soft off-white canvas, and clipboard-snippet UI that feels playful but precise.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f6f7fb"
  surface-tint: "#f0eefc"
  ink: "#1b1b2e"
  ink-secondary: "#5b5b73"
  ink-muted: "#8a8aa0"

  # Brand accent — indigo / violet
  primary: "#5b54f0"
  primary-hover: "#4a44d6"
  primary-soft: "#eceafe"
  accent-violet: "#8b5cf6"
  accent-blue: "#3a8bfd"

  # Neutral scale
  gray-900: "#1b1b2e"
  gray-600: "#5b5b73"
  gray-400: "#8a8aa0"
  gray-200: "#e4e4ee"
  gray-100: "#eeeef4"
  gray-50: "#f6f7fb"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

  # Borders + status
  border: "#e4e4ee"
  border-strong: "#d4d4e2"
  success: "#22b07d"
  warning: "#f5a623"

typography:
  display-hero:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -1.0px
  card-title:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.1px
  caption:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  mono-snippet:
    fontFamily: "SF Mono, ui-monospace, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 6px
  sm: 10px
  md: 14px
  lg: 20px
  xl: 28px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"
  badge:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"
  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 40px
    borderColor: "{colors.gray-100}"
  snippet-tile:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-snippet}"
    rounded: "{rounded.md}"
    padding: 16px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 32px
    borderColor: "{colors.border}"
---

# Paste Design System

## Overview

Paste's website carries the warmth of a Mac-native productivity app that wants to feel friendly without losing its precision. The canvas is a clean white (`{colors.background}`) with soft off-white panels (`{colors.surface-soft}`) that separate sections through gentle tonal shifts rather than hard rules. Text sits in a deep desaturated indigo-black (`{colors.ink}`) rather than pure black, keeping the page soft on the eyes and quietly on-brand.

The signature move is the indigo-violet accent (`{colors.primary}`). It anchors every primary action, every active state, and the brand mark, and it gets a tinted companion (`{colors.primary-soft}`) for badges and highlight surfaces. This single confident accent against an otherwise neutral palette is what makes Paste feel both calm and decisive — there is never a question about where to click.

Geometry leans generous and rounded. Cards use large radii (`{rounded.lg}` to `{rounded.xl}`), pill-shaped buttons, and roomy padding, echoing the rounded-rectangle vocabulary of macOS itself. The product's clipboard-snippet metaphor surfaces in the UI as compact monospaced tiles (`{components.snippet-tile}`), giving the marketing surface a direct visual link to what the app actually does.

**Key Characteristics:**
- Single confident indigo-violet accent (`{colors.primary}`) for all primary actions and brand identity
- Inter / SF-style geometric sans with tight negative tracking on display sizes
- Deep desaturated indigo-black ink (`{colors.ink}`) instead of pure black
- Generously rounded cards and full-pill buttons echoing macOS chrome
- Soft off-white section panels (`{colors.surface-soft}`) for separation without borders
- Monospaced snippet tiles tying marketing to the clipboard product
- Tinted accent surfaces (`{colors.primary-soft}`) for badges and highlights

## Colors

### Primary
- **Ink** (`{colors.ink}`): Headings, primary body text. Desaturated indigo-black, never pure black.
- **White** (`{colors.background}`): Page canvas, card surfaces.
- **Brand Indigo** (`{colors.primary}`): Primary buttons, active states, brand mark, links.

### Accent
- **Indigo Hover** (`{colors.primary-hover}`): Pressed/hover state for the brand accent.
- **Indigo Soft** (`{colors.primary-soft}`): Badge backgrounds, highlight surfaces, tinted panels.
- **Violet** (`{colors.accent-violet}`): Secondary gradient/decorative accent.
- **Blue** (`{colors.accent-blue}`): Tertiary accent for variety in feature illustrations.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary text.
- **Gray 600** (`{colors.gray-600}`): Secondary/description copy.
- **Gray 400** (`{colors.gray-400}`): Muted text, placeholders.
- **Gray 200** (`{colors.gray-200}`): Borders, dividers.
- **Gray 100** (`{colors.gray-100}`): Subtle outlines on tinted panels.
- **Gray 50** (`{colors.gray-50}`): Soft section background.

### Status
- **Success** (`{colors.success}`): Positive confirmation states.
- **Warning** (`{colors.warning}`): Cautionary states.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif`
- **Monospace**: `SF Mono`, with fallbacks: `ui-monospace, Menlo, monospace` — used for clipboard snippet tiles.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 56px hero headline, bold, tight tracking |
| `section-heading` | Feature section titles |
| `card-title` | Card and feature headings |
| `body-large` | Hero subtitle, intros |
| `body` | Standard reading text |
| `body-small` | UI text, secondary copy |
| `button-ui` | Buttons and nav links |
| `caption` | Badges, metadata |
| `mono-snippet` | Clipboard snippet tiles |

### Principles
- **Bold display, calm body**: Headlines are 700 weight with negative tracking; body relaxes to 400 with comfortable 1.6 line-height.
- **Two weights carry the load**: 400 for reading, 600/700 for emphasis and action.
- **Mono signals the product**: SF Mono appears only in snippet tiles, connecting marketing visuals to the clipboard app.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px with a generous jump to `{spacing.3xl}` and `{spacing.4xl}` for section rhythm.

### Grid & Container
- Max content width: approximately 1120px
- Hero: centered single column with large device imagery below
- Feature sections: 2-column and 3-column card grids
- Testimonial wall: multi-column masonry of quote cards

### Whitespace Philosophy
- **Soft separation**: Sections divide through off-white panels (`{colors.surface-soft}`), not hard borders.
- **Roomy cards**: 32px–40px padding inside cards keeps content breathing.
- **Generous vertical rhythm**: Large section gaps (`{spacing.4xl}`) give the page a calm pace.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 6px | Inline tags, small chips |
| `sm` | 10px | Inputs |
| `md` | 14px | Snippet tiles |
| `lg` | 20px | Standard cards |
| `xl` | 28px | Feature cards |
| `pill` | 9999px | Buttons, badges |

## Components

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

### Buttons
- **`button-primary`** — Brand indigo fill, white text, full pill, generous padding. The default CTA.
- **`button-secondary`** — Soft off-white fill, ink text, subtle border. Secondary actions.

### Pills & Badges
- **`badge`** — Indigo-soft surface, indigo text, full pill. Section eyebrows and labels.

### Cards
- **`card`** — White surface, `{rounded.lg}`, light border, roomy padding.
- **`card-feature`** — Off-white surface, larger `{rounded.xl}` radius, extra padding for feature blocks.
- **`snippet-tile`** — White surface, monospaced text, `{rounded.md}`. The clipboard-snippet motif.

### Inputs
- **`input`** — White surface, light border, `{rounded.sm}`. Focus shifts the border to brand indigo.

### Navigation
- **`nav-bar`** — White header, ink links, indigo pill CTA on the right, bottom border.

## Do's and Don'ts

### Do
- Use the single indigo accent (`{colors.primary}`) for all primary actions and active states
- Keep buttons full-pill with generous horizontal padding
- Separate sections with off-white panels, not hard rules
- Use `{colors.ink}` (desaturated indigo-black) instead of pure black for text
- Use monospaced snippet tiles to reference the clipboard product
- Keep card radii large and padding roomy

### Don't
- Don't introduce competing accent colors against the indigo brand
- Don't use sharp corners — the system is rounded throughout
- Don't use pure black text
- Don't crowd cards with tight padding
- Don't apply the mono font outside snippet contexts

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards, reduced hero |
| Tablet | 600–1024px | 2-column grids appear |
| Desktop | >1024px | Full multi-column layout, max 1120px content |

### Collapsing Strategy
- Hero: 56px headline scales down, device imagery stacks
- Feature grids: 3-column → 2-column → single column
- Testimonial wall: masonry → single column
- Navigation: links → hamburger menu, CTA pill persists
- Section spacing: 96px → 48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Brand Indigo `{colors.primary}`
- Background: White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Gray 600 `{colors.gray-600}`
- Badge: `{colors.primary-soft}` bg + `{colors.primary}` text
- Focus border: `{colors.primary}`

### Example Component Prompts
- "Create a hero on white. Headline 56px Inter weight 700, line-height 1.08, letter-spacing -1.6px, color `{colors.ink}`. Subtitle 20px weight 400 `{colors.gray-600}`. Indigo pill CTA (`{colors.primary}`, full pill, 14px 28px padding, white text) plus a soft secondary pill (`{colors.surface-soft}`, ink text, light border)."
- "Design a feature card: off-white background `{colors.surface-soft}`, 28px radius, 40px padding. Title 24px Inter weight 600 letter-spacing -0.4px. Body 17px weight 400 `{colors.gray-600}`."
- "Build a snippet tile: white surface, SF Mono 14px, 14px radius, 16px padding, light border `{colors.border}`."
- "Create a badge: `{colors.primary-soft}` background, `{colors.primary}` text, full pill, 4px 12px padding, 13px weight 500."

### Iteration Guide
1. One accent only — indigo carries all action and identity
2. Everything is rounded: pills for buttons, large radii for cards
3. Separate with tonal panels, never hard borders
4. Ink is desaturated indigo-black, not pure black
5. Mono snippet tiles tie the marketing surface to the clipboard product

---

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