# TypeDialog Brand Guidelines

## Overview

TypeDialog is a developer tool for type-safe interactive configuration. The brand identity combines the concepts of **dialogue** (interactive communication) and **typed** (code, type-safety, validation) through a clean, minimalist visual system.

**Tagline**: "Typed dialogs for inputs, forms and schemas you can trust."

---

## Visual Identity

### Logo Components

The TypeDialog logo is composed of three essential elements that work together to communicate the brand:

#### 1. Speech Bubble
- **Purpose**: Represents dialogue and bidirectional communication
- **Metaphor**: User-system interaction through interactive dialogs
- **Visual**: Rounded rectangle with asymmetric pointer tail
- **Color**: #3a3a50 (primary gray)

#### 2. Angle Brackets `<>`
- **Purpose**: Symbolizes code, typing interface, and type-safety
- **Metaphor**: Programming languages, generics, type declarations
- **Visual**: Chevron-style brackets flanking the cursor
- **Color**: #ffffff (white, high contrast)

#### 3. Blinking Cursor `|`
- **Purpose**: Indicates active typing and real-time interactivity
- **Metaphor**: User input, active engagement, responsiveness
- **Visual**: Vertical bar with smooth 1-second blink animation
- **Color**: #4f46e5 (accent indigo)

---

## Color System

### Primary Colors

| Color | Hex | Usage |
|-------|-----|-------|
| Primary Gray | #3a3a50 | Bubble, primary text, body elements |
| Accent Indigo | #4f46e5 | Cursor, interactive elements, highlights |
| White | #ffffff | Contrast, angle brackets, light text |

### Application

- **Dark Backgrounds**: Use full-color logo (all colors as defined)
- **Light Backgrounds**: Use full-color logo (maintains contrast)
- **Monochrome**: Use black & white variants for print/stamping
- **Grayscale**: Bubble #404040, Brackets #808080, Cursor #606060

---

## Typography

### Primary Font

**Inter** (weights: 400 regular, 500 medium, 600 semibold)

- **Origin**: Google Fonts
- **Category**: Geometric sans-serif
- **Characteristics**: Clean, modern, highly readable
- **Use Cases**: All text, headings, body copy, UI

### Integration

```css
/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* CSS usage */
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
```text

### Sizing

- **Headlines**: 18-24px
- **Body Text**: 14-16px
- **Captions**: 12px
- **Logo Text**: 16-20px (weight: 500)

---

## Logo Variants

### By Component

- **Logo**: Icon + text combined (horizontal or vertical)
- **Icon**: Mark/symbol only (square format)
- **Text**: Typography only (wordmark)

### By Style

- **Animated**: Cursor blink (1s cycle) + text pulse (3s cycle)
- **Static** (`_s`): No animations, always visible
- **Monochrome** (`_bn`): Black & white, print-ready

### Selection Guide

| Context | Recommended | Format |
|---------|-------------|--------|
| Web headers | typedialog_logo_h.svg | Animated, full color |
| App icons | typedialog_icon.svg | Animated, square |
| Social media | typedialog_logo_h_s.svg | Static, horizontal |
| Print/PDF | typedialog_logo_bn.svg | Static, monochrome |
| Email | typedialog_logo_h_s.svg (export as PNG) | Static, PNG |
| Favicon | typedialog_icon_s.svg | Static, 32-64px |

---

## Clear Space & Sizing

### Minimum Size
- **Icon Only**: 32×32px (visible bubble + brackets + cursor)
- **Logo with Text**: 100×64px (readable text)
- **Favicon**: 16×16px (simplified, tested)

### Clear Space
- **Recommended**: 10px minimum padding around logo
- **Purpose**: Ensures logo isn't cramped; maintains visual balance
- **Exception**: In compact layouts (favicons), space can be reduced

---

## Prohibited Uses

### ❌ Do NOT

- Remove, hide, or isolate individual components
- Change proportions or distort the shape
- Use unapproved colors or color combinations
- Rotate, tilt, or flip the logo
- Add drop shadows, blurs, or other effects
- Resize below 32px without testing clarity
- Change typography or substitute fonts
- Remove animation without purpose
- Place text too close to logo (violate clear space)
- Use the logo on backgrounds where it lacks contrast

### ✓ DO

- Use the full-color version on light and dark backgrounds
- Test clarity at the intended size before publishing
- Maintain aspect ratio when scaling
- Use static versions in time-sensitive or performance-critical contexts
- Combine with Inter typography consistently
- Preserve all three components (bubble, brackets, cursor)
- Use monochrome variants for print and stamping
- Reference the official specifications before implementation

---

## Animation Specifications

### Cursor Blink

```css
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.cursor {
  animation: blink 1s ease-in-out infinite;
}
```text

- **Duration**: 1 second
- **Function**: ease-in-out (smooth acceleration/deceleration)
- **Repeat**: Infinite
- **Element**: 4×12px rectangle, #4f46e5

### Text Pulse

```css
@keyframes text-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.text-pulse {
  animation: text-pulse 3s ease-in-out infinite;
}
```text

- **Duration**: 3 seconds
- **Function**: ease-in-out
- **Repeat**: Infinite
- **Opacity Range**: 1 → 0.7 → 1 (subtle breathing effect)
- **Elements**: Text elements in logo variants

---

## File Naming Convention

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

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

### Variants
- (none/default) = animated
- `_h` = horizontal layout
- `_s` = static (no animation)
- `_bn` = black & white (monochrome)

### Examples
- `typedialog_logo.svg` - Vertical animated logo
- `typedialog_logo_h.svg` - Horizontal animated logo
- `typedialog_icon_s.svg` - Static icon (favicon base)
- `typedialog_text_bn.svg` - Black & white text only

---

## Browser & Format Support

### SVG Support
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Mobile browsers (iOS 14+, Android Chrome)

### Export Formats
- PNG (16, 32, 64, 128, 256px)
- ICO (favicon, multi-resolution)
- PDF (print, vector editing)
- EPS (Adobe Suite compatibility)
- WebP (modern browsers)

---

## Accessibility

- **Color Contrast**: Meets WCAG AA standards (#3a3a50 on white, #ffffff on #3a3a50)
- **Animation**: Respects `prefers-reduced-motion` media query (disable animations if needed)
- **SVG**: Includes title/description attributes for screen readers
- **Scaling**: Maintains legibility from 16px to 600px+

---

## Usage Examples

### Web - Header Logo
```html
<img src="/assets/typedialog_logo_h.svg" alt="TypeDialog" width="240" height="64">
```text

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

### Email - Static Logo
```html
<!-- Export typedialog_logo_h_s.svg as PNG, then embed -->
<img src="typedialog-logo.png" alt="TypeDialog" width="240" height="64">
```text

### Print - Monochrome Logo
```html
<!-- Use typedialog_logo_bn.svg -->
<img src="typedialog_logo_bn.svg" alt="TypeDialog" width="100%">
```text

---

## Questions & Support

For branding questions, icon modifications, or usage clarifications:
- Review `typedialog_logo_specs.html` for technical details
- Check `index.html` for interactive logo gallery
- Consult `how-to-use.md` for integration examples

**Remember**: The logo represents TypeDialog's commitment to type-safety, trust, and interactive excellence. Use it consistently across all touchpoints.
