TypeDialog/imgs/README.md

# TypeDialog Logos

Official logo assets for **TypeDialog** — typed dialogs for inputs, forms and schemas you can trust.

## Quick Start

### For Web

```html
<!-- Favicon -->
<link rel="icon" href="/imgs/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/imgs/favicon-32.png" type="image/png" sizes="32x32">

<!-- Logo in header -->
<img src="/imgs/typedialog_logo_h.svg" alt="TypeDialog" width="240">
```

### For React/Vue

```jsx
import logo from '/imgs/typedialog_logo_h.svg';

export default function Header() {
  return <img src={logo} alt="TypeDialog" width={240} />;
}
```

### For Markdown/Docs

```markdown
![TypeDialog](/imgs/typedialog_logo_h.svg)
```

---

## File Structure

### 📦 Logo Variants (12 files)

| Category | Files | Purpose |
|----------|-------|---------|
| **Animated** | `typedialog_icon.svg`, `typedialog_logo.svg`, `typedialog_logo_h.svg`, `typedialog_text.svg` | Web, digital, dynamic contexts |
| **Static** | `typedialog_icon_s.svg`, `typedialog_logo_s.svg`, `typedialog_logo_h_s.svg`, `typedialog_text_s.svg` | Print, email, performance-critical |
| **Monochrome** | `typedialog_icon_bn.svg`, `typedialog_logo_bn.svg`, `typedialog_logo_h_bn.svg`, `typedialog_text_bn.svg` | Print, stamping, single-color |

### 🎨 Favicons (5 files)

| File | Size | Use |
|------|------|-----|
| `favicon.svg` | Scalable | Modern browsers (primary) |
| `favicon-16.png` | 16×16 | Legacy browsers |
| `favicon-32.png` | 32×32 | Browser tabs, standard |
| `favicon-64.png` | 64×64 | Apple touch icon, taskbar |
| `favicon.ico` | Multi-res | Windows compatibility |

### 📄 Documentation (4 files)

- `index.html` - Interactive gallery showcase
- `typedialog_logo_specs.html` - Technical specifications
- `BRANDING.md` - Brand guidelines & philosophy
- `how-to-use.md` - Integration examples & best practices

---

## Naming Convention

### Format: `typedialog_[component]_[variant].svg`

**Components**:
- `logo` = Full logo (icon + text)
- `icon` = Icon/mark only
- `text` = Text/wordmark only

**Variants**:
- (none) = Animated cursor blink + text pulse
- `_h` = Horizontal layout
- `_s` = Static (no animations)
- `_bn` = Black & White (monochrome)

**Examples**:
- `typedialog_logo_h.svg` → Horizontal animated logo
- `typedialog_icon_s.svg` → Static icon (good for favicon base)
- `typedialog_text_bn.svg` → Black & white text only

---

## Design Specifications

### Visual Elements

| Element | Value | Color |
|---------|-------|-------|
| Speech Bubble | Rounded rectangle | #3a3a50 |
| Angle Brackets | `< >` chevrons | #ffffff |
| Cursor | Vertical bar, 1s blink | #4f46e5 |
| Text | Inter 500 | #3a3a50 |

### ViewBox Sizes

| Variant | ViewBox | Aspect |
|---------|---------|--------|
| Icon | 0 0 64 64 | 1:1 (square) |
| Logo Vertical | 0 0 100 100 | 1:1 (square) |
| Logo Horizontal | 0 0 200 64 | 3.125:1 (wide) |
| Text | 0 0 140 30 | 4.67:1 (very wide) |

### Color Palette

```css
--td-primary: #3a3a50;     /* Primary gray */
--td-accent: #4f46e5;      /* Accent indigo */
--td-white: #ffffff;       /* Contrast */
```

---

## Animation Specifications

### Cursor Blink
- **Duration**: 1 second
- **Function**: ease-in-out
- **Cycle**: 50% visible, 50% hidden
- **Repeat**: Infinite

### Text Pulse
- **Duration**: 3 seconds
- **Function**: ease-in-out
- **Opacity Range**: 1 → 0.7 → 1
- **Repeat**: Infinite

---

## Browser Support

✅ **Fully Supported**:
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- iOS Safari 14+
- Android Chrome

---

## File Sizes

| Category | Typical Size | Notes |
|----------|--------------|-------|
| SVG (animated) | ~1.3 KB | Includes inline styles |
| SVG (static) | ~1.1 KB | No animation overhead |
| SVG (monochrome) | ~1.0 KB | Simplified grayscale |
| PNG (32px) | ~2.5 KB | Optimized for web |
| favicon.ico | ~3.5 KB | Multi-resolution |

---

## Usage Guide

### ✅ Recommended Uses

- **Web headers**: `typedialog_logo_h.svg` (animated, full color)
- **App icons**: `typedialog_icon.svg` (animated, square)
- **Favicons**: `typedialog_icon_s.svg` (static, optimized)
- **Social media**: `typedialog_logo_h_s.svg` (static PNG export)
- **Print/PDF**: `typedialog_logo_bn.svg` (monochrome, static)
- **Email**: PNG exports of static versions only

### ⚠️ Things to Avoid

- Distorting proportions
- Changing colors arbitrarily
- Removing components
- Using below 32px without testing
- Adding effects (shadows, blurs)
- Substituting fonts

---

## Export Options

For different use cases, export SVGs as:

- **PNG**: High-resolution static image (email, social)
- **PDF**: Vector print-ready format
- **WebP**: Modern browser optimization
- **EPS**: Adobe Suite compatibility

### Favicon Generation

See `FAVICON_GENERATION.md` for step-by-step instructions on creating PNG and ICO files from the SVG source.

---

## Typography

All TypeDialog branding uses **Inter** font (Google Fonts).

```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
```

- **Weights**: 400 (regular), 500 (medium), 600 (semibold)
- **Sizes**: 14-24px (responsive)
- **Letter Spacing**: 0 (neutral)

---

## Integration Examples

### HTML + CSS

```html
<div class="header">
  <img class="logo" src="typedialog_logo_h.svg" alt="TypeDialog">
</div>

<style>
  .logo {
    max-width: 240px;
    height: auto;
  }
</style>
```

### Markdown

```markdown
# ![TypeDialog](/imgs/typedialog_logo_h.svg) Welcome

[Link text](/)
```

### Rust / Markdown Docs

```markdown
![TypeDialog](imgs/typedialog_logo_h.svg)
```

---

## Technical Details

### SVG Structure

```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 64" fill="none">
  <defs>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
    </style>
  </defs>
  <!-- Path elements for bubble, brackets, cursor -->
  <!-- Text element for wordmark -->
</svg>
```

### Scalability

- **Minimum**: 16×16px (favicon, with testing)
- **Recommended minimum**: 32×32px
- **Optimal**: 64-256px
- **Maximum**: Unlimited (SVG is infinitely scalable)

### Performance

- **No external images**: SVG is all paths and text
- **Small file size**: ~1.3 KB per file
- **No dependencies**: Animated versions use CSS only
- **GPU optimized**: CSS animations use hardware acceleration

---

## Accessibility

- **Color Contrast**: WCAG AA compliant
- **Reduced Motion**: Respects `prefers-reduced-motion` media query
- **Alt Text**: Always include `alt="TypeDialog"` on images
- **SVG**: Includes title/description for screen readers

---

## License & Usage

TypeDialog logo is part of the TypeDialog project. Use according to project license.

**For unauthorized or commercial use**, please contact the TypeDialog team.

---

## Resources

- **Interactive Gallery**: `index.html` — View all variants with live previews
- **Technical Specs**: `typedialog_logo_specs.html` — Detailed design specifications
- **Brand Guidelines**: `BRANDING.md` — Complete branding philosophy
- **Integration Guide**: `how-to-use.md` — Code examples & best practices
- **Favicon Guide**: `FAVICON_GENERATION.md` — Export PNG/ICO from SVG

---

## Questions?

Refer to the comprehensive documentation:
1. `index.html` for visual reference
2. `BRANDING.md` for brand philosophy
3. `typedialog_logo_specs.html` for technical details
4. `how-to-use.md` for integration examples

---

**Version**: 1.0
**Updated**: December 2025
**Made with ❤️ in Rust**