TypeDialog/imgs

TypeDialog Logos

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

Quick Start

For Web

<!-- 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

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

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

For Markdown/Docs

![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

--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).

@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

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

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

Markdown

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

[Link text](/)

Rust / Markdown Docs

![TypeDialog](imgs/typedialog_logo_h.svg)

---

Technical Details

SVG Structure

<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