From cb6aa2ff8213b9962b3581eedb06e67dd3e849ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesu=CC=81s=20Pe=CC=81rez?= Date: Thu, 18 Dec 2025 01:09:39 +0000 Subject: [PATCH] chore: add imgs --- imgs/BRANDING.md | 280 +++++++++++++++ imgs/README.md | 313 ++++++++++++++++ imgs/favicon.svg | 35 ++ imgs/how-to-use.md | 528 +++++++++++++++++++++++++++ imgs/index.html | 615 ++++++++++++++++++++++++++++++++ imgs/typedialog_ascii.txt | 8 + imgs/typedialog_icon.svg | 47 +++ imgs/typedialog_icon_bn.svg | 36 ++ imgs/typedialog_icon_s.svg | 35 ++ imgs/typedialog_logo.svg | 59 +++ imgs/typedialog_logo_bn.svg | 41 +++ imgs/typedialog_logo_h.svg | 58 +++ imgs/typedialog_logo_h_bn.svg | 40 +++ imgs/typedialog_logo_h_s.svg | 44 +++ imgs/typedialog_logo_s.svg | 45 +++ imgs/typedialog_logo_specs.html | 599 +++++++++++++++++++++++++++++++ imgs/typedialog_text.svg | 17 + imgs/typedialog_text_bn.svg | 7 + imgs/typedialog_text_s.svg | 10 + 19 files changed, 2817 insertions(+) create mode 100644 imgs/BRANDING.md create mode 100644 imgs/README.md create mode 100644 imgs/favicon.svg create mode 100644 imgs/how-to-use.md create mode 100644 imgs/index.html create mode 100644 imgs/typedialog_ascii.txt create mode 100644 imgs/typedialog_icon.svg create mode 100644 imgs/typedialog_icon_bn.svg create mode 100644 imgs/typedialog_icon_s.svg create mode 100644 imgs/typedialog_logo.svg create mode 100644 imgs/typedialog_logo_bn.svg create mode 100644 imgs/typedialog_logo_h.svg create mode 100644 imgs/typedialog_logo_h_bn.svg create mode 100644 imgs/typedialog_logo_h_s.svg create mode 100644 imgs/typedialog_logo_s.svg create mode 100644 imgs/typedialog_logo_specs.html create mode 100644 imgs/typedialog_text.svg create mode 100644 imgs/typedialog_text_bn.svg create mode 100644 imgs/typedialog_text_s.svg diff --git a/imgs/BRANDING.md b/imgs/BRANDING.md new file mode 100644 index 0000000..998a895 --- /dev/null +++ b/imgs/BRANDING.md @@ -0,0 +1,280 @@ +# 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; +``` + +### 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; +} +``` + +- **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; +} +``` + +- **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 +TypeDialog +``` + +### App - Favicon +```html + + +``` + +### Email - Static Logo +```html + +TypeDialog +``` + +### Print - Monochrome Logo +```html + +TypeDialog +``` + +--- + +## 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. diff --git a/imgs/README.md b/imgs/README.md new file mode 100644 index 0000000..d9753b9 --- /dev/null +++ b/imgs/README.md @@ -0,0 +1,313 @@ +# TypeDialog Logos + +Official logo assets for **TypeDialog** — typed dialogs for inputs, forms and schemas you can trust. + +## Quick Start + +### For Web + +```html + + + + + +TypeDialog +``` + +### For React/Vue + +```jsx +import logo from '/imgs/typedialog_logo_h.svg'; + +export default function Header() { + return TypeDialog; +} +``` + +### For Markdown/Docs + +```markdown +![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 + +```css +--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). + +```css +@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 + +```html +
+ +
+ + +``` + +### Markdown + +```markdown +# ![TypeDialog](/imgs/typedialog_logo_h.svg) Welcome + +[Link text](/) +``` + +### Rust / Markdown Docs + +```markdown +![TypeDialog](imgs/typedialog_logo_h.svg) +``` + +--- + +## Technical Details + +### SVG Structure + +```xml + + + + + + + +``` + +### 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** diff --git a/imgs/favicon.svg b/imgs/favicon.svg new file mode 100644 index 0000000..5cf7356 --- /dev/null +++ b/imgs/favicon.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + diff --git a/imgs/how-to-use.md b/imgs/how-to-use.md new file mode 100644 index 0000000..1fb4c73 --- /dev/null +++ b/imgs/how-to-use.md @@ -0,0 +1,528 @@ +# How to Use TypeDialog Logos + +Quick integration guide with code examples for different frameworks and contexts. + +--- + +## Choosing the Right Variant + +### Decision Tree + +**Is it for web/digital?** +- Yes → Use full-color animated or static versions +- No → Jump to "Is it for print?" + +**Does it need animation?** +- Yes, dynamic context → Use animated versions (no suffix) +- No, static/simple → Use static versions (`_s`) + +**Is it for print/physical media?** +- Yes → Use monochrome (`_bn`) versions +- No → Use full-color versions + +**What's the layout?** +- Horizontal (header, banner) → Use `_h` versions +- Vertical (stacked) → Use default versions (no `_h`) +- Icon only → Use `icon` variants + +### Quick Reference + +| Use Case | File | Format | +|----------|------|--------| +| **Web header** | `typedialog_logo_h.svg` | SVG, animated | +| **App icon** | `typedialog_icon.svg` | SVG, animated | +| **Favicon** | `typedialog_icon_s.svg` | SVG, static | +| **Social media** | `typedialog_logo_h_s.png` | PNG, static | +| **Print** | `typedialog_logo_bn.svg` | SVG, monochrome | +| **Email** | `typedialog_logo_h_s.png` | PNG, static | +| **Dark background** | `typedialog_logo_h.svg` | SVG, full color | +| **Light background** | `typedialog_logo_h.svg` | SVG, full color | + +--- + +## Framework Examples + +### HTML/CSS + +```html + + + + + + + +
+ +
+ + + + +``` + +### React + +```jsx +import logo from 'imgs/typedialog_logo_h.svg'; + +export default function Header() { + return ( +
+ TypeDialog +
+ ); +} +``` + +### Vue + +```vue + + + + + +``` + +### Svelte + +```svelte + + +
+ +
+ + +``` + +### Angular + +```typescript +// In template + + +/* In component CSS */ +.logo { + max-width: 240px; + height: auto; +} +``` + +--- + +## Markdown / Documentation + +### Simple Image + +```markdown +![TypeDialog](./imgs/typedialog_logo_h.svg) +``` + +### With Link + +```markdown +[![TypeDialog](./imgs/typedialog_logo_h.svg)](https://yoursite.com) +``` + +### mdBook / GitHub Docs + +```markdown +# ![TypeDialog](../imgs/typedialog_logo_h.svg) Welcome to TypeDialog + +Content here... +``` + +### Rust Project README + +```markdown +# TypeDialog + +![TypeDialog](imgs/typedialog_logo_h.svg) + +Typed dialogs for inputs, forms and schemas you can trust. +``` + +--- + +## Web Integration Patterns + +### Favicon Set + +```html + + + + + +``` + +### Hero Section + +```html +
+
+ +

TypeDialog

+

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

+
+
+ + +``` + +### Navigation Bar + +```html + + + +``` + +--- + +## Email & Social Media + +### Email HTML + +```html + + + + + +
+ TypeDialog +
+``` + +### Social Media + +```html + + + + + + +``` + +--- + +## Sizing Guidelines + +### Web Sizes + +| Context | Width | Notes | +|---------|-------|-------| +| **Favicon** | 32px | Use `typedialog_icon_s.svg` | +| **Nav logo** | 32-48px | Use `typedialog_icon.svg` | +| **Header** | 200-300px | Use `typedialog_logo_h.svg` | +| **Hero** | 400-600px | Use `typedialog_logo_h.svg` | +| **Small badge** | 80px | Use `typedialog_icon.svg` | + +### Print Sizes + +| Context | Width | DPI | +|---------|-------|-----| +| **Business card** | 1 inch | 300 DPI | +| **Letter size** | 3-4 inches | 300 DPI | +| **Poster** | 8-12 inches | 150 DPI | + +### Mobile Sizes + +| Device | Width | Notes | +|--------|-------|-------| +| **Phone** | 100-150px | Full logo may be too wide | +| **Tablet** | 150-250px | Responsive sizing | +| **Desktop** | 240-300px | Standard size | + +--- + +## Dark Mode Support + +### CSS Variables Approach + +```css +:root { + --logo-url: url('imgs/typedialog_logo_h.svg'); +} + +body.dark-mode { + --logo-url: url('imgs/typedialog_logo_h.svg'); + /* Logo works on both light and dark */ +} + +.header-logo { + background-image: var(--logo-url); + width: 240px; + height: 64px; +} +``` + +### SVG Direct Approach + +```html + +TypeDialog + + +TypeDialog + + + +``` + +--- + +## Performance Tips + +### Optimize SVG + +```html + +TypeDialog + + +TypeDialog +``` + +### CSS Loading + +```css +/* Avoid multiple requests --> +.logo-light { background-image: url('imgs/typedialog_logo_h.svg'); } +.logo-dark { background-image: url('imgs/typedialog_logo_h_bn.svg'); } + +/* Use data URIs for very small files */ +.logo { background-image: url('data:image/svg+xml;...'); } +``` + +### Caching + +```html + +TypeDialog + + +``` + +--- + +## Accessibility + +### Alt Text + +```html + +TypeDialog + + + + Home + +``` + +### ARIA Labels + +```html + +TypeDialog +``` + +### Animation Preferences + +```css +/* Respect user's motion preferences */ +@media (prefers-reduced-motion: reduce) { + /* Option 1: Use static version */ + img.logo { content: url('imgs/typedialog_logo_h_s.svg'); } + + /* Option 2: Disable animations */ + .logo * { animation: none !important; } +} +``` + +--- + +## Common Issues & Solutions + +### Favicon Not Showing + +**Problem**: Favicon doesn't appear in browser tab +**Solutions**: +1. Clear browser cache (Ctrl+Shift+Delete) +2. Check file paths are correct +3. Ensure `` tags are in `` +4. Test in incognito mode + +### SVG Scaling Issues + +**Problem**: SVG doesn't scale smoothly +**Solutions**: +1. Verify `viewBox` attribute is set +2. Don't specify both `width/height` and `viewBox` +3. Use CSS for sizing: + ```css + img.logo { max-width: 100%; height: auto; } + ``` + +### Animation Not Working + +**Problem**: Cursor blink not visible +**Solutions**: +1. Use animated variant (no `_s` suffix) +2. Check browser supports CSS animations +3. Verify `@keyframes` in ` + + +
+
+
+

🎨 TypeDialog Logos

+

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

+
+ +
+ + +
+

📋 Logo Variants

+
+
+
+ +
+
+
typedialog_logo.svg
+
Vertical • Animated • Full Color
+
+
+ +
+
+ +
+
+ +
+
+
typedialog_logo_h.svg
+
Horizontal • Animated • Full Color
+
+
+ +
+
+ +
+
+ +
+
+
typedialog_logo_s.svg
+
Vertical • Static • Full Color
+
+
+ +
+
+ +
+
+ +
+
+
typedialog_logo_h_s.svg
+
Horizontal • Static • Full Color
+
+
+ +
+
+
+
+ + +
+

🎯 Icon & Mark

+
+
+
+ +
+
+
typedialog_icon.svg
+
64×64 • Animated • App Icon
+
+
+ +
+
+ +
+
+ +
+
+
typedialog_icon_s.svg
+
64×64 • Static • Favicon
+
+
+ +
+
+
+
+ + +
+

✍️ Typography

+
+
+
+ +
+
+
typedialog_text.svg
+
Text • Animated • Wordmark
+
+
+ +
+
+ +
+
+ +
+
+
typedialog_text_s.svg
+
Text • Static • Wordmark
+
+
+ +
+
+
+
+ + +
+

⚫ Black & White

+

For print, stamping, and monochrome contexts

+
+
+
+ +
+
+
typedialog_icon_bn.svg
+
Icon • Monochrome • Print
+
+
+ +
+
+ +
+
+ +
+
+
typedialog_logo_h_bn.svg
+
Horizontal • Monochrome • Print
+
+
+ +
+
+
+
+ + +
+

📏 Scalability Test

+

Icon clarity at different sizes

+
+
+
+ +
+
16×16
+
Favicon
+
+ +
+
+ +
+
32×32
+
Browser tab
+
+ +
+
+ +
+
64×64
+
App icon
+
+ +
+
+ +
+
128×128
+
Apple touch
+
+
+
+ + +
+

🎨 Color Palette

+

Official TypeDialog brand colors (click to copy)

+
+
+
+
Primary Gray
+
#3a3a50
+
Bubble, primary text
+
+ +
+
+
Accent Indigo
+
#4f46e5
+
Cursor, interactive
+
+ +
+
+
Secondary Gray
+
#8f96a3
+
Text, secondary elements
+
+ +
+
+
White
+
#ffffff
+
Brackets, accents
+
+
+
+ + +
+

✏️ Typography

+
+
+
TypeDialog
+
Font: Inter • Weight: 500 • Size: 16-20px
+
+
+

Usage: Inter is used for all typography in TypeDialog branding. The font is clean, modern, and highly readable at all sizes.

+

Import: @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');

+

Font-family: font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;

+
+
+
+ +
+

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

+

Made with ❤️ • Built in Rust

+
+
+ +
+ + + + diff --git a/imgs/typedialog_ascii.txt b/imgs/typedialog_ascii.txt new file mode 100644 index 0000000..4387d0d --- /dev/null +++ b/imgs/typedialog_ascii.txt @@ -0,0 +1,8 @@ + ╺┳╸╻ ╻┏━┓┏━╸╺┳┓╻┏━┓╻ ┏━┓┏━╸ + ┃ ┗┳┛┣━┛┣╸ ┃┃┃┣━┫┃ ┃ ┃┃╺┓ + ╹ ╹ ╹ ┗━╸╺┻┛╹╹ ╹┗━╸┗━┛┗━┛ +╔══════════════════════════════════╗ +║ ▲ Typed Dialogs you can tRust. ║ +║ ■ Inputs, Forms and Schemas. ║ +║ typedialog.dev ║ +╚══════════════════════════════════╝ diff --git a/imgs/typedialog_icon.svg b/imgs/typedialog_icon.svg new file mode 100644 index 0000000..b871311 --- /dev/null +++ b/imgs/typedialog_icon.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + diff --git a/imgs/typedialog_icon_bn.svg b/imgs/typedialog_icon_bn.svg new file mode 100644 index 0000000..5471060 --- /dev/null +++ b/imgs/typedialog_icon_bn.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + diff --git a/imgs/typedialog_icon_s.svg b/imgs/typedialog_icon_s.svg new file mode 100644 index 0000000..5cf7356 --- /dev/null +++ b/imgs/typedialog_icon_s.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + diff --git a/imgs/typedialog_logo.svg b/imgs/typedialog_logo.svg new file mode 100644 index 0000000..c1bab71 --- /dev/null +++ b/imgs/typedialog_logo.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + TypeDialog + diff --git a/imgs/typedialog_logo_bn.svg b/imgs/typedialog_logo_bn.svg new file mode 100644 index 0000000..ca528a4 --- /dev/null +++ b/imgs/typedialog_logo_bn.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + TypeDialog + diff --git a/imgs/typedialog_logo_h.svg b/imgs/typedialog_logo_h.svg new file mode 100644 index 0000000..b6e35a3 --- /dev/null +++ b/imgs/typedialog_logo_h.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + TypeDialog + diff --git a/imgs/typedialog_logo_h_bn.svg b/imgs/typedialog_logo_h_bn.svg new file mode 100644 index 0000000..da5e09b --- /dev/null +++ b/imgs/typedialog_logo_h_bn.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + TypeDialog + diff --git a/imgs/typedialog_logo_h_s.svg b/imgs/typedialog_logo_h_s.svg new file mode 100644 index 0000000..e874dfa --- /dev/null +++ b/imgs/typedialog_logo_h_s.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + TypeDialog + diff --git a/imgs/typedialog_logo_s.svg b/imgs/typedialog_logo_s.svg new file mode 100644 index 0000000..ede9854 --- /dev/null +++ b/imgs/typedialog_logo_s.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + TypeDialog + diff --git a/imgs/typedialog_logo_specs.html b/imgs/typedialog_logo_specs.html new file mode 100644 index 0000000..39e1f16 --- /dev/null +++ b/imgs/typedialog_logo_specs.html @@ -0,0 +1,599 @@ + + + + + + TypeDialog Logo - Specifications & Preview + + + +
+
+

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationValueNotes
Icon ViewBox0 0 64 64Square format, 1:1 aspect ratio
Logo Horizontal ViewBox0 0 200 64Wide format for horizontal layouts
Logo Vertical ViewBox0 0 100 100Stacked format: icon above, text below
Bubble Dimensions40×26px (64px canvas)Rounded corners: 6px radius
Bracket Positioning±14px from centerChevron style, 6px height
Cursor Size4×12pxCentered vertically in bubble
Primary Color#3a3a50Bubble fill, body text
Accent Color#4f46e5Cursor, interactive elements
Bracket Stroke#ffffff2.5px width, rounded caps
File FormatSVG (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

+ + + + + + + + + + + + + + + + + + + + + + + +
AnimationDurationFunctionApplied To
Cursor Blink1sease-in-outAnimated icon & logo variants
Text Pulse3sease-in-outAnimated 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)
    • +
+
+
+
+ +
+

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

+

Version 1.0 • December 2025 • Built with ❤️ in Rust

+
+
+ + diff --git a/imgs/typedialog_text.svg b/imgs/typedialog_text.svg new file mode 100644 index 0000000..5354a48 --- /dev/null +++ b/imgs/typedialog_text.svg @@ -0,0 +1,17 @@ + + + + + + + TypeDialog + diff --git a/imgs/typedialog_text_bn.svg b/imgs/typedialog_text_bn.svg new file mode 100644 index 0000000..14d214e --- /dev/null +++ b/imgs/typedialog_text_bn.svg @@ -0,0 +1,7 @@ + + + + + + TypeDialog + diff --git a/imgs/typedialog_text_s.svg b/imgs/typedialog_text_s.svg new file mode 100644 index 0000000..08bf92e --- /dev/null +++ b/imgs/typedialog_text_s.svg @@ -0,0 +1,10 @@ + + + + + + + TypeDialog +