jesus/TypeDialog

Fork 0

Jesús Pérez 9ca1bfb8cf

chore: new projet folders structure

2025-12-24 03:11:32 +00:00

7.4 KiB

Raw Blame History

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="/assets/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/assets/favicon-32.png" type="image/png" sizes="32x32">

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

For React/Vue

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

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

For Markdown/Docs

![TypeDialog](/assets/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](/assets/typedialog_logo_h.svg) Welcome

[Link text](/)

Rust / Markdown Docs

![TypeDialog](assets/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:

index.html for visual reference
BRANDING.md for brand philosophy
typedialog_logo_specs.html for technical details
how-to-use.md for integration examples

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

7.4 KiB Raw Blame History Unescape Escape