# Design System - Backlog Cards

## Overview
Card components used in the backlog Kanban board to display tasks. Each card shows an icon, title, description, and category label. Features the signature Orange→Pink→Blue ripple effect on hover.

---

## Card Specs

### Dimensions

| Property | Value |
|----------|-------|
| Width | 284px |
| Min Height | 131px |
| Padding | 16px |
| Gap | 8px |
| Border Radius | 8px |

### Colors

| Element | Value |
|---------|-------|
| Background | #FFFFFF |
| Border | 1px solid #E5E5E5 (Gray 200) |
| Shadow | 0 2px 4px rgba(0, 0, 0, 0.08) |
| Hover Shadow | 0 4px 12px rgba(0, 0, 0, 0.12) |

### Typography

| Element | Font | Size | Weight | Letter Spacing |
|---------|------|------|--------|----------------|
| Title | Space Grotesk | 16px | 700 | -0.2px |
| Description | Space Grotesk | 14px | 400 | 0.1px |

### Icon

| Property | Value |
|----------|-------|
| Size | 15x15px |
| Stroke Color | #575461 |
| Stroke Width | 1.5px |

---

## Code Reference

### HTML Structure

```html
<div class="backlog-card">
  <div class="ripple-grid"></div>
  <div class="card-content">
    <svg class="card-icon" width="15" height="15" viewBox="0 0 15 15" fill="none">
      <circle cx="7.5" cy="4" r="2.5" stroke="#575461" stroke-width="1.5"/>
      <path d="M2 13.5c0-3 2.5-5 5.5-5s5.5 2 5.5 5" stroke="#575461" stroke-width="1.5" stroke-linecap="round"/>
    </svg>
    <h3 class="card-title">Usability test</h3>
    <p class="card-description">Research questions with Carina.</p>
    <div class="backlog-label">
      <span class="label-content">Research</span>
    </div>
  </div>
</div>
```

### CSS

```css
/* Backlog Card */
.backlog-card {
  position: relative;
  width: 284px;
  min-height: 131px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.backlog-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-color: #D4D4D4;
}

.backlog-card .ripple-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  z-index: 1;
  overflow: hidden;
  border-radius: 8px;
}

.card-content {
  position: relative;
  z-index: 2;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #262626;
  margin: 0;
}

.card-description {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1px;
  color: #525252;
  margin: 0;
}
```

---

## Ripple Effect

The card uses the same ripple effect as other components.

```css
.ripple-cell {
  background-color: rgba(0, 0, 0, 0.01);
  border: 0.5px solid rgba(0, 0, 0, 0.02);
  opacity: 0.5;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.ripple-cell.ripple-active {
  animation: cellRipple var(--duration, 150ms) ease-out var(--delay, 0ms);
}

@keyframes cellRipple {
  0% {
    background-color: rgba(251, 146, 60, 0.85);
    opacity: 1;
  }
  40% {
    background-color: rgba(244, 114, 182, 0.75);
    opacity: 1;
  }
  70% {
    background-color: rgba(147, 197, 253, 0.6);
    opacity: 0.9;
  }
  100% {
    background-color: rgba(0, 0, 0, 0.01);
    opacity: 0.5;
  }
}
```

---

## Category Labels

Cards include a category label at the bottom. Uses the backlog-label component.

| Category | Class |
|----------|-------|
| Research | `.backlog-label` (default) |
| Strategy | `.backlog-label` (default) |

---

## Design Tokens

### Spacing

| Token | Value |
|-------|-------|
| `--card-width` | 284px |
| `--card-min-height` | 131px |
| `--card-padding` | 16px |
| `--card-gap` | 8px |
| `--card-border-radius` | 8px |

### Colors

| Token | Value |
|-------|-------|
| `--card-bg` | #FFFFFF |
| `--card-border` | #E5E5E5 |
| `--card-border-hover` | #D4D4D4 |
| `--card-shadow` | 0 2px 4px rgba(0, 0, 0, 0.08) |
| `--card-shadow-hover` | 0 4px 12px rgba(0, 0, 0, 0.12) |
| `--card-title-color` | #262626 |
| `--card-description-color` | #525252 |
| `--card-icon-color` | #575461 |

---

## Usage in Kanban Board

Cards are displayed in columns representing task status:

| Column | Status |
|--------|--------|
| To Do | Pending tasks |
| Priority | High priority tasks |
| Completed | Finished tasks |

---

## Prototype
`backlog-cards-prototype/index.html`