529 lines
10 KiB
Markdown
529 lines
10 KiB
Markdown
|
# 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
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<link rel="icon" href="imgs/favicon.svg" type="image/svg+xml">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- Hero section -->
|
||
|
|
<header class="hero">
|
||
|
|
<img src="imgs/typedialog_logo_h.svg" alt="TypeDialog" class="logo">
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.logo {
|
||
|
|
max-width: 240px;
|
||
|
|
height: auto;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
### React
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import logo from 'imgs/typedialog_logo_h.svg';
|
||
|
|
|
||
|
|
export default function Header() {
|
||
|
|
return (
|
||
|
|
<header className="hero">
|
||
|
|
<img
|
||
|
|
src={logo}
|
||
|
|
alt="TypeDialog"
|
||
|
|
className="logo"
|
||
|
|
width={240}
|
||
|
|
/>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### Vue
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<template>
|
||
|
|
<header class="hero">
|
||
|
|
<img
|
||
|
|
src="@/assets/imgs/typedialog_logo_h.svg"
|
||
|
|
alt="TypeDialog"
|
||
|
|
class="logo"
|
||
|
|
:width="240"
|
||
|
|
>
|
||
|
|
</header>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
// If using as component:
|
||
|
|
import TypeDialogLogo from '@/assets/imgs/typedialog_logo_h.svg';
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.logo {
|
||
|
|
max-width: 240px;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Svelte
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<script>
|
||
|
|
import logo from '../imgs/typedialog_logo_h.svg';
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<header class="hero">
|
||
|
|
<img src={logo} alt="TypeDialog" class="logo" width="240" />
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.logo {
|
||
|
|
max-width: 240px;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Angular
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// In template
|
||
|
|
<img
|
||
|
|
src="assets/imgs/typedialog_logo_h.svg"
|
||
|
|
alt="TypeDialog"
|
||
|
|
class="logo"
|
||
|
|
width="240"
|
||
|
|
/>
|
||
|
|
|
||
|
|
/* In component CSS */
|
||
|
|
.logo {
|
||
|
|
max-width: 240px;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Markdown / Documentation
|
||
|
|
|
||
|
|
### Simple Image
|
||
|
|
|
||
|
|
```markdown
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
### With Link
|
||
|
|
|
||
|
|
```markdown
|
||
|
|
[](https://yoursite.com)
|
||
|
|
```
|
||
|
|
|
||
|
|
### mdBook / GitHub Docs
|
||
|
|
|
||
|
|
```markdown
|
||
|
|
#  Welcome to TypeDialog
|
||
|
|
|
||
|
|
Content here...
|
||
|
|
```
|
||
|
|
|
||
|
|
### Rust Project README
|
||
|
|
|
||
|
|
```markdown
|
||
|
|
# TypeDialog
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
Typed dialogs for inputs, forms and schemas you can trust.
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Web Integration Patterns
|
||
|
|
|
||
|
|
### Favicon Set
|
||
|
|
|
||
|
|
```html
|
||
|
|
<link rel="icon" href="/imgs/favicon.svg" type="image/svg+xml">
|
||
|
|
<link rel="icon" href="/imgs/favicon-32.png" type="image/png" sizes="32x32">
|
||
|
|
<link rel="icon" href="/imgs/favicon-16.png" type="image/png" sizes="16x16">
|
||
|
|
<link rel="apple-touch-icon" href="/imgs/favicon-64.png">
|
||
|
|
<link rel="icon" href="/imgs/favicon.ico" sizes="16x16 32x32 64x64">
|
||
|
|
```
|
||
|
|
|
||
|
|
### Hero Section
|
||
|
|
|
||
|
|
```html
|
||
|
|
<section class="hero">
|
||
|
|
<div class="hero-content">
|
||
|
|
<img src="imgs/typedialog_logo_h.svg" alt="TypeDialog" class="hero-logo">
|
||
|
|
<h1>TypeDialog</h1>
|
||
|
|
<p>Typed dialogs for inputs, forms and schemas you can trust.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.hero-logo {
|
||
|
|
max-width: 300px;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
animation: fadeIn 0.6s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from { opacity: 0; transform: translateY(20px); }
|
||
|
|
to { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Navigation Bar
|
||
|
|
|
||
|
|
```html
|
||
|
|
<nav class="navbar">
|
||
|
|
<a href="/" class="nav-logo">
|
||
|
|
<img src="imgs/typedialog_icon_s.svg" alt="TypeDialog" width="32">
|
||
|
|
<span>TypeDialog</span>
|
||
|
|
</a>
|
||
|
|
<!-- Nav links -->
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.nav-logo {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-logo img {
|
||
|
|
width: 32px;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Email & Social Media
|
||
|
|
|
||
|
|
### Email HTML
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!-- Use static PNG export to avoid animation issues -->
|
||
|
|
<table style="width: 100%; max-width: 600px;">
|
||
|
|
<tr>
|
||
|
|
<td style="text-align: center; padding: 20px;">
|
||
|
|
<img
|
||
|
|
src="https://yoursite.com/imgs/typedialog-logo.png"
|
||
|
|
alt="TypeDialog"
|
||
|
|
width="240"
|
||
|
|
height="64"
|
||
|
|
style="border: 0; display: block;"
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Social Media
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!-- Meta tags for social sharing -->
|
||
|
|
<meta property="og:image" content="https://yoursite.com/imgs/typedialog_logo_h_s.png">
|
||
|
|
<meta property="twitter:image" content="https://yoursite.com/imgs/typedialog_logo_h_s.png">
|
||
|
|
<meta property="og:image:alt" content="TypeDialog Logo">
|
||
|
|
<meta property="og:image:width" content="1200">
|
||
|
|
<meta property="og:image:height" content="630">
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 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
|
||
|
|
<!-- SVG works on both light/dark backgrounds -->
|
||
|
|
<img src="imgs/typedialog_logo_h.svg" alt="TypeDialog">
|
||
|
|
|
||
|
|
<!-- If needing different versions: -->
|
||
|
|
<img
|
||
|
|
src="imgs/typedialog_logo_h.svg"
|
||
|
|
alt="TypeDialog"
|
||
|
|
class="logo-light"
|
||
|
|
style="display: block;"
|
||
|
|
/>
|
||
|
|
<img
|
||
|
|
src="imgs/typedialog_logo_h_bn.svg"
|
||
|
|
alt="TypeDialog"
|
||
|
|
class="logo-dark"
|
||
|
|
style="display: none;"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.logo-light { display: none; }
|
||
|
|
.logo-dark { display: block; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Performance Tips
|
||
|
|
|
||
|
|
### Optimize SVG
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!-- Use smallest necessary size -->
|
||
|
|
<img src="imgs/typedialog_icon_s.svg" alt="TypeDialog" width="32">
|
||
|
|
|
||
|
|
<!-- Avoid huge SVGs if PNG export available -->
|
||
|
|
<img src="imgs/typedialog_logo_h.png" alt="TypeDialog" width="240">
|
||
|
|
```
|
||
|
|
|
||
|
|
### 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
|
||
|
|
<!-- SVGs are cacheable -->
|
||
|
|
<img
|
||
|
|
src="imgs/typedialog_logo_h.svg?v=1.0"
|
||
|
|
alt="TypeDialog"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<!-- Or use service workers for offline support -->
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Accessibility
|
||
|
|
|
||
|
|
### Alt Text
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!-- Always include meaningful alt text -->
|
||
|
|
<img src="imgs/typedialog_logo_h.svg" alt="TypeDialog">
|
||
|
|
|
||
|
|
<!-- In links, alt is sometimes in parent -->
|
||
|
|
<a href="/">
|
||
|
|
<img src="imgs/typedialog_icon.svg" alt="Home">
|
||
|
|
</a>
|
||
|
|
```
|
||
|
|
|
||
|
|
### ARIA Labels
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!-- For complex contexts -->
|
||
|
|
<img
|
||
|
|
src="imgs/typedialog_logo_h.svg"
|
||
|
|
alt="TypeDialog"
|
||
|
|
aria-label="TypeDialog - Typed dialogs for inputs, forms and schemas you can trust"
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 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 `<link>` tags are in `<head>`
|
||
|
|
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 `<style>` block
|
||
|
|
4. Test in modern browser (Chrome 90+)
|
||
|
|
|
||
|
|
### Color Issues in Print
|
||
|
|
|
||
|
|
**Problem**: Colors look different in print
|
||
|
|
**Solutions**:
|
||
|
|
1. Use `_bn` (black & white) versions for print
|
||
|
|
2. Export to PDF instead of PNG
|
||
|
|
3. Adjust DPI (300 DPI for professional print)
|
||
|
|
4. Test color profile (RGB vs CMYK)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Export & File Conversion
|
||
|
|
|
||
|
|
### PNG Export
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# Using Inkscape
|
||
|
|
inkscape typedialog_logo_h.svg --export-filename=typedialog_logo_h.png
|
||
|
|
|
||
|
|
# Using ImageMagick
|
||
|
|
convert typedialog_logo_h.svg typedialog_logo_h.png
|
||
|
|
|
||
|
|
# Using online tool
|
||
|
|
# https://convertio.co/svg-png/
|
||
|
|
```
|
||
|
|
|
||
|
|
### PDF Export
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# Using Inkscape
|
||
|
|
inkscape typedialog_logo_h.svg --export-filename=typedialog_logo_h.pdf
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Summary Checklist
|
||
|
|
|
||
|
|
- [ ] Choose variant based on use case
|
||
|
|
- [ ] Include alt text on all images
|
||
|
|
- [ ] Test sizing at target resolution
|
||
|
|
- [ ] Verify color contrast on backgrounds
|
||
|
|
- [ ] Check animation preference support
|
||
|
|
- [ ] Optimize file size for web
|
||
|
|
- [ ] Test on target browsers
|
||
|
|
- [ ] Cache-bust SVG if needed
|
||
|
|
- [ ] Document source file location
|
||
|
|
- [ ] Use consistent sizing across site
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**Need Help?**
|
||
|
|
Refer to `BRANDING.md` for philosophy and `typedialog_logo_specs.html` for technical details.
|