Canny DESIGN.md

Customer feedback management platform with a clean, upvote-centric aesthetic — white surfaces, blue brand accents, and feedback-board-first UI patterns.

1. Visual Theme & Atmosphere

Canny is where companies collect, organize, and respond to customer feedback. The design borrows the familiar vocabulary of voting platforms — upvote buttons, status badges, and comment threads — wrapped in a clean, trustworthy interface. Blue accents signal interactivity and the democratic nature of voting. The UI is deliberately simple: a feedback post, a vote count, and a status badge are the three building blocks of everything.

2. Color Palette & Roles

3. Typography Rules

css--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-size-xs: 11px;
--font-size-sm: 13px;
--font-size-base: 14px;
--font-size-md: 16px;
--font-size-lg: 20px;
--font-size-xl: 26px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-base: 1.5;
--line-height-body: 1.6;

4. Component Stylings

css/* Vote Button */
.vote-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid #E3E6F0;
  cursor: pointer;
  min-width: 52px;
  transition: border-color 0.12s, background 0.12s;
  background: #FFFFFF;
}
.vote-button:hover {
  border-color: #2D7FF9;
  background: #EBF3FF;
}
.vote-button--voted {
  border-color: #2D7FF9;
  background: #EBF3FF;
  color: #2D7FF9;
}
.vote-button__arrow {
  font-size: 12px;
  color: inherit;
}
.vote-button__count {
  font-size: 14px;
  font-weight: 700;
  color: inherit;
}

/* Feedback Post Row */
.post-row {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid #EEF0FA;
  cursor: pointer;
  transition: background 0.08s;
}
.post-row:hover { background: #F8F9FB; }
.post-row__content { flex: 1; }
.post-row__title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1E2E;
  margin-bottom: 4px;
}
.post-row__meta {
  font-size: 12px;
  color: #9DA3BE;
  display: flex;
  align-items: center;
  gap: 8px;
}
.post-row__comments {
  font-size: 12px;
  color: #9DA3BE;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Status Badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
}
.status-badge--open { background: #EBF3FF; color: #1A6AE0; }
.status-badge--planned { background: #FEF3DC; color: #B8760A; }
.status-badge--in-progress { background: #F3EEFF; color: #6C3483; }
.status-badge--complete { background: #E8F5EE; color: #1A7F37; }
.status-badge--closed { background: #F0F2F5; color: #6B7280; }

/* Primary Button */
.button-primary {
  background: #2D7FF9;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.button-primary:hover { background: #1A6AE0; }

/* Input */
.input {
  border: 1.5px solid #E3E6F0;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 14px;
  color: #1A1E2E;
  background: #FFFFFF;
  transition: border-color 0.15s;
}
.input:focus {
  outline: none;
  border-color: #2D7FF9;
  box-shadow: 0 0 0 3px rgba(45,127,249,0.12);
}

5. Layout Principles

6. Depth & Elevation

css.shadow-post { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.shadow-hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.shadow-modal { box-shadow: 0 16px 48px rgba(0,0,0,0.12); }

7. Do's and Don'ts

Do:

• Place the vote button on the left side of each post row — it's the primary action
• The voted state turns the vote button blue-filled
• Status badges are color-coded pills: each status has a consistent color
• Sort posts by vote count by default

Don't:

• Don't hide the vote count — it's the primary social signal
• Don't use the same color for multiple statuses
• Don't add heavy visual weight to comment counts — they're secondary
• Don't reorder feedback boards without user control

8. Responsive Behavior

9. Agent Prompt Guide

You are designing for Canny — a customer feedback and voting platform.
Use a white background with blue (#2D7FF9) as the primary accent for votes and CTAs.
Every feedback post row has a vote button on the left (upward arrow + count) that turns blue when voted.
Status badges are color-coded pills on each post: blue=open, orange=planned, purple=in-progress, green=complete.
Post rows hover with a subtle gray background; vote buttons hover with a blue tint.
Keep UI minimal: post title + vote count + status badge is all that's needed per row.
Tone is community-driven, democratic, and feedback-first.