TypeDialog

Logos v1.0

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

Logo Previews

TypeDialog
TypeDialog
TypeDialog
TypeDialog

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)