# Design System - Templates Modal

## Overview
A modal dialog for browsing and selecting templates. Uses the same structure as the Profile Modal with a sidebar navigation and content area. Features a search bar and a grid of template cards.

---

## Modal Specs

### Dimensions

| Property | Value |
|----------|-------|
| Width | 1296px |
| Height | 760px |
| Border Radius | 17px |
| Shadow | 0 4px 4px rgba(0, 0, 0, 0.15) |
| Background | #FAFAFA |

---

## Sidebar Navigation

### Layout

| Property | Value |
|----------|-------|
| Width | ~280px |
| Padding Left | 62px |
| Padding Top | 64px |

### Primary Navigation

| Item | Icon |
|------|------|
| All Templates | Grid icon |
| For you | User icon |
| Community | Users icon |

### Sectors Section

| Property | Value |
|----------|-------|
| Header | "Sectors" |
| Font Weight | 700 |
| Color | #262626 |
| Margin Top | 32px |
| Items Gap | 16px |

#### Sector Categories
- Health
- E-Commerce
- Saas

### Typography

| State | Color | Weight | Size |
|-------|-------|--------|------|
| Active | #383737 | 700 | 20px |
| Inactive | #848383 | 700 | 20px |
| Section Header | #262626 | 700 | 16px |
| Sector Items | #525252 | 400 | 16px |

---

## Search Bar

| Property | Value |
|----------|-------|
| Width | 100% (content area) |
| Height | 48px |
| Background | #FFFFFF |
| Border | 1px solid #E5E5E5 |
| Border Radius | 8px |
| Padding | 0 16px |
| Font Size | 16px |
| Placeholder Color | #A3A3A3 |
| Focus Border | #FB923C |

---

## Template Cards

Uses the Template Card component from the design system (design-system-cards.md).

### Card Specs

| Property | Value |
|----------|-------|
| Width | 190px |
| Height | 190px |
| Background | #FFFFFF |
| Border | 1px solid rgba(0,0,0,0.06) |
| Border Radius | 16px (outer), 12px (inner) |
| Shadow | 0 4px 20px rgba(0, 0, 0, 0.08) |
| Hover Shadow | 0 6px 24px rgba(0, 0, 0, 0.12) |
| Content Inset | 8px |
| Grid Pattern | 16px cells |

### Card Structure

1. **Grid Background** - 16px grid pattern with white overlay
2. **Title** - Space Grotesk, 18px, weight 700, positioned at (12px, 66px)
3. **Description** - Space Grotesk, 11px, with eye icon, positioned at (12px, 95px)
4. **Edit Button** - 14px icon, positioned at (12px, 121px)
5. **Star Button** - 14px icon, positioned at (35px, 121px)
6. **Popular Badge** - 34x10px, #2a2a2a background, 6px/300 font

### Badge Specs

| Property | Value |
|----------|-------|
| Size | 34 x 10px |
| Background | #2a2a2a |
| Font Size | 6px |
| Font Weight | 300 |
| Border Radius | 3px |
| Position | (125px, 122px) |

---

## Grid Layout

| Property | Value |
|----------|-------|
| Columns | auto-fill, 190px |
| Gap | 24px |
| Alignment | start |

---

## Code Reference

### HTML Structure

```html
<div class="modal-overlay">
  <div class="templates-modal">
    <button class="modal-close">
      <div class="ripple-grid"></div>
      <svg><!-- X icon --></svg>
    </button>

    <aside class="modal-sidebar">
      <nav class="sidebar-nav">
        <a class="nav-item active">
          <div class="ripple-grid"></div>
          <svg class="nav-icon"><!-- grid icon --></svg>
          <span>All Templates</span>
        </a>
        <a class="nav-item">
          <div class="ripple-grid"></div>
          <svg class="nav-icon"><!-- user icon --></svg>
          <span>For you</span>
        </a>
        <a class="nav-item">
          <div class="ripple-grid"></div>
          <svg class="nav-icon"><!-- users icon --></svg>
          <span>Community</span>
        </a>
      </nav>

      <div class="sectors-section">
        <h3 class="sectors-title">Sectors</h3>
        <ul class="sectors-list">
          <li><a class="sector-item">Health</a></li>
          <li><a class="sector-item">E-Commerce</a></li>
          <li><a class="sector-item">Saas</a></li>
        </ul>
      </div>
    </aside>

    <main class="modal-content">
      <div class="search-bar">
        <input type="text" placeholder="Search...">
      </div>

      <div class="templates-grid">
        <div class="template-card">
          <div class="ripple-grid"></div>
          <div class="card-content">
            <div class="content-inner"><div class="grid-bg"></div></div>
            <h1 class="card-title">Template Name</h1>
            <p class="card-description">
              An app for strategy idea...
              <svg class="eye-icon"><!-- eye icon --></svg>
            </p>
            <button class="edit-btn"><!-- edit icon --></button>
            <button class="star-btn"><!-- star icon --></button>
            <span class="badge">Popular</span>
          </div>
        </div>
        <!-- More cards... -->
      </div>
    </main>
  </div>
</div>
```

### CSS

```css
/* Templates Modal */
.templates-modal {
  position: relative;
  width: 1296px;
  height: 760px;
  background: #FAFAFA;
  border-radius: 17px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
  display: flex;
  overflow: hidden;
}

/* Search Bar */
.search-bar {
  margin-bottom: 24px;
}

.search-bar input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  color: #383737;
}

.search-bar input::placeholder {
  color: #A3A3A3;
}

.search-bar input:focus {
  outline: none;
  border-color: #FB923C;
}

/* Sectors Section */
.sectors-section {
  margin-top: 32px;
}

.sectors-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #262626;
  margin-bottom: 16px;
}

.sectors-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sector-item {
  display: block;
  padding: 8px 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #525252;
  cursor: pointer;
  transition: color 0.2s ease;
}

.sector-item:hover,
.sector-item.active {
  color: #383737;
}

/* Templates Grid */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 190px);
  gap: 24px;
  overflow-y: auto;
  justify-content: start;
}

/* Template Card */
.template-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  cursor: pointer;
  width: 190px;
  height: 190px;
}

.template-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.template-card .content-inner {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
}

.template-card .grid-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 16px 16px;
  border-radius: 12px;
}

.template-card .card-title {
  position: absolute;
  left: 12px;
  top: 66px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}

.template-card .card-description {
  position: absolute;
  left: 12px;
  top: 95px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  color: #4a4a4a;
  display: flex;
  align-items: center;
  gap: 4px;
}

.template-card .edit-btn,
.template-card .star-btn {
  position: absolute;
  top: 121px;
  background: none;
  border: none;
  cursor: pointer;
  color: #3a3a3a;
}

.template-card .edit-btn { left: 12px; }
.template-card .star-btn { left: 35px; }

.template-card .badge {
  position: absolute;
  left: 125px;
  top: 122px;
  width: 34px;
  height: 10px;
  background: #2a2a2a;
  color: white;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 6px;
  font-weight: 300;
  line-height: 10px;
  text-align: center;
  border-radius: 3px;
}
```

---

## Ripple Effect

All interactive elements feature the signature Orange→Pink→Blue ripple animation:
- Navigation items
- Sector items
- Template cards
- Close button

---

## Design Tokens

### Modal

| Token | Value |
|-------|-------|
| `--modal-width` | 1296px |
| `--modal-height` | 760px |
| `--modal-radius` | 17px |
| `--modal-bg` | #FAFAFA |

### Template Cards

| Token | Value |
|-------|-------|
| `--card-width` | 190px |
| `--card-height` | 190px |
| `--card-radius-outer` | 16px |
| `--card-radius-inner` | 12px |
| `--card-inset` | 8px |
| `--card-gap` | 24px |
| `--badge-bg` | #2a2a2a |

---

## Prototype
`templates-modal-prototype/index.html`