Pitch DESIGN.md

Collaborative presentation platform with a sleek dark aesthetic — matte black surfaces, vibrant cover accents, and presentation-canvas-first UI.

1. Visual Theme & Atmosphere

Pitch is what happens when a design team builds a presentation tool. The UI is confident and restrained, stepping back to let the slide content shine. Matte black surfaces frame a bright editing canvas; a vivid coral-pink accent signals active states and brand moments. The overall feel is premium, collaborative, and distinctly modern — closer to Figma than PowerPoint in sensibility.

2. Color Palette & Roles

3. Typography Rules

css--font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--font-display: 'Clash Display', 'Inter', 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: 28px;
--font-size-2xl: 40px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.2;
--line-height-base: 1.5;

4. Component Stylings

css/* Primary Button */
.button-primary {
  background: #FF4D4D;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.button-primary:hover { background: #D93636; }

/* Slide Thumbnail */
.slide-thumbnail {
  background: #FFFFFF;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  aspect-ratio: 16/9;
  overflow: hidden;
  transition: border-color 0.12s;
}
.slide-thumbnail:hover { border-color: #555555; }
.slide-thumbnail--active { border-color: #FF4D4D; }

/* Toolbar */
.toolbar {
  background: #1A1A1A;
  border: 1px solid #333333;
  border-radius: 10px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.toolbar-button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #A0A0A0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.toolbar-button:hover {
  background: #2A2A2A;
  color: #F5F5F5;
}
.toolbar-button--active {
  background: rgba(255,77,77,0.15);
  color: #FF4D4D;
}

/* Collaborator Avatar */
.collab-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #FF4D4D;
  object-fit: cover;
  margin-left: -6px;
}
.collab-avatar:first-child { margin-left: 0; }

/* Template Card */
.template-card {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16/9;
  position: relative;
  transition: transform 0.15s;
}
.template-card:hover { transform: scale(1.03); }
.template-card__label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  background: rgba(0,0,0,0.5);
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

5. Layout Principles

6. Depth & Elevation

css.shadow-canvas { box-shadow: 0 8px 40px rgba(0,0,0,0.6); }
.shadow-toolbar { box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
.shadow-dropdown { box-shadow: 0 8px 24px rgba(0,0,0,0.6); }

7. Do's and Don'ts

Do:

• Keep the canvas always white — it's the slide, not the app
• Use the coral-red accent for the active slide thumbnail border
• Show collaborator avatars stacked in the top-right of the editor
• Animate slide transitions smoothly (200–300ms ease)

Don't:

• Don't use heavy shadows on the toolbar — keep it light and floating
• Don't add decorative backgrounds to the editor shell — let slides stand out
• Don't use more than 2 accent colors in the same UI context

8. Responsive Behavior

9. Agent Prompt Guide

You are designing for Pitch — a collaborative presentation tool.
Use a matte black shell (#111111) with a bright white slide canvas as the hero.
Primary accent is coral-red (#FF4D4D) — for CTAs, active slide borders, and selected states.
The toolbar floats above the canvas as a dark rounded pill with icon buttons.
Slide thumbnails are white 16:9 cards with a red border when active.
Collaborator avatars stack in the top-right, each with a brand-color border.
Tone is premium, design-forward, and collaboration-first.