# TypeDialog

Logos v1.0

Typed dialogs for inputs, forms and schemas you can trust.

## Logo Previews

## Design Concept

### 💬 Dialog + 🔤 Typed Interface

TypeDialog's visual identity combines three core elements:

### 💬 Speech Bubble

Rounded rectangle with asymmetric pointer tail. Represents bidirectional communication and user interaction through dialogs.

Fill: #3a3a50
Radius: 6px
Tail: 16px pointer

### <> Type Brackets

Chevron-style angle brackets flanking the cursor. Symbols of code, typing interface, and type-safety.

Stroke: #ffffff
Width: 2.5px
Positioned: ±14px from center

### | Blinking Cursor

Vertical bar with smooth blink animation. Represents active typing, interactivity, and real-time input processing.

Fill: #4f46e5
Size: 4×12px
Animation: 1s blink cycle

### ✍️ Typography

Clean, modern sans-serif font. Conveystech-forward aesthetic while maintaining readability and accessibility.

Font: Inter
Weight: 500
Size: 16-20px

## Technical Specifications

Specification | Value | Notes
--- | --- | ---
Icon ViewBox | 0 0 64 64 | Square format, 1:1 aspect ratio
Logo Horizontal ViewBox | 0 0 200 64 | Wide format for horizontal layouts
Logo Vertical ViewBox | 0 0 100 100 | Stacked format: icon above, text below
Bubble Dimensions | 40×26px (64px canvas) | Rounded corners: 6px radius
Bracket Positioning | ±14px from center | Chevron style, 6px height
Cursor Size | 4×12px | Centered vertically in bubble
Primary Color | #3a3a50 | Bubble fill, body text
Accent Color | #4f46e5 | Cursor, interactive elements
Bracket Stroke | #ffffff | 2.5px width, rounded caps
File Format | SVG (scalable) | ~1.5KB per file, no dependencies

## Color Palette

Official TypeDialog brand colors

Primary Gray
#3a3a50
Bubble, primary text
Accent Indigo
#4f46e5
Cursor, interactive
White
#ffffff
Brackets, accents

## Animations

Animation | Duration | Function | Applied To
--- | --- | --- | ---
Cursor Blink | 1s | ease-in-out | Animated icon & logo variants
Text Pulse | 3s | ease-in-out | Animated logo & text variants

CSS Cursor Blink:
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
CSS Text Pulse:
@keyframes text-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}

## Usage Guidelines

### ✓ Best Practices

- Use full-color version on light & dark backgrounds
- Maintain minimum 32px width for visibility
- Keep 10px clear space around logo
- Use static versions in print/email
- Combine with brand typography (Inter)
- Scale proportionally (don't distort)
- Use monochrome for single-color applications
- Preserve all three components (bubble, brackets, cursor)

### ✗ Avoid These

- Removing or hiding any component
- Changing proportions or distorting shape
- Using unapproved colors
- Rotating or tilting the logo
- Adding drop shadows or effects
- Using sizes below 32px without testing
- Changing typography or font
- Removing animation without purpose

## File Information

### File Variants

- 📄 typedialog_icon.svg
- 📄 typedialog_icon_s.svg
- 📄 typedialog_logo.svg
- 📄 typedialog_logo_h.svg
- 📄 typedialog_text.svg
- 📄 Plus B&W variants (*_bn.svg)

### Browser Support

- ✓ Chrome 90+
- ✓ Firefox 88+
- ✓ Safari 14+
- ✓ Edge 90+
- ✓ iOS Safari 14+
- ✓ Android Chrome

### Export Options

- 📦 PNG (16, 32, 64, 128px)
- 📦 ICO (multi-resolution)
- 📦 PDF (print quality)
- 📦 EPS (vector editing)
- 📦 SVG (web-optimized)
- 📦 WebP (modern browsers)