chore: add imgs
This commit is contained in:
Jesús Pérez
parent
fbfde113cd
commit
cb6aa2ff82
GPG Key ID:
9F243E355E0BC939
280
imgs/BRANDING.md
Normal file
280
imgs/BRANDING.md
Normal file
@ -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
|
||||
<img src="/imgs/typedialog_logo_h.svg" alt="TypeDialog" width="240" height="64">
|
||||
```
|
||||
|
||||
### App - Favicon
|
||||
```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">
|
||||
```
|
||||
|
||||
### Email - Static Logo
|
||||
```html
|
||||
<!-- Export typedialog_logo_h_s.svg as PNG, then embed -->
|
||||
<img src="typedialog-logo.png" alt="TypeDialog" width="240" height="64">
|
||||
```
|
||||
|
||||
### Print - Monochrome Logo
|
||||
```html
|
||||
<!-- Use typedialog_logo_bn.svg -->
|
||||
<img src="typedialog_logo_bn.svg" alt="TypeDialog" width="100%">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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.
|
||||
313
imgs/README.md
Normal file
313
imgs/README.md
Normal file
@ -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
|
||||
<!-- 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
|
||||
|
||||
```jsx
|
||||
import logo from '/imgs/typedialog_logo_h.svg';
|
||||
|
||||
export default function Header() {
|
||||
return <img src={logo} alt="TypeDialog" width={240} />;
|
||||
}
|
||||
```
|
||||
|
||||
### For Markdown/Docs
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
<div class="header">
|
||||
<img class="logo" src="typedialog_logo_h.svg" alt="TypeDialog">
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.logo {
|
||||
max-width: 240px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Markdown
|
||||
|
||||
```markdown
|
||||
#  Welcome
|
||||
|
||||
[Link text](/)
|
||||
```
|
||||
|
||||
### Rust / Markdown Docs
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Technical Details
|
||||
|
||||
### SVG Structure
|
||||
|
||||
```xml
|
||||
<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**
|
||||
35
imgs/favicon.svg
Normal file
35
imgs/favicon.svg
Normal file
@ -0,0 +1,35 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
|
||||
<!-- Speech bubble con esquinas redondeadas y cola asimétrica -->
|
||||
<path
|
||||
d="M 12 14
|
||||
C 12 9, 15 6, 19 6
|
||||
L 45 6
|
||||
C 49 6, 52 9, 52 14
|
||||
L 52 32
|
||||
C 52 37, 49 40, 45 40
|
||||
L 26 40
|
||||
L 20 46
|
||||
L 20 40
|
||||
L 19 40
|
||||
C 15 40, 12 37, 12 32
|
||||
Z"
|
||||
fill="#3a3a50"
|
||||
/>
|
||||
|
||||
<!-- Type brackets < > -->
|
||||
<!-- Left bracket < -->
|
||||
<path d="M 20 17 L 16 23 L 20 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<!-- Right bracket > -->
|
||||
<path d="M 44 17 L 48 23 L 44 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
|
||||
<!-- Static cursor (always visible) -->
|
||||
<rect
|
||||
x="30"
|
||||
y="17"
|
||||
width="4"
|
||||
height="12"
|
||||
rx="2"
|
||||
fill="#4f46e5"
|
||||
opacity="1"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 909 B |
528
imgs/how-to-use.md
Normal file
528
imgs/how-to-use.md
Normal file
@ -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
|
||||
<!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.
|
||||
615
imgs/index.html
Normal file
615
imgs/index.html
Normal file
@ -0,0 +1,615 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>TypeDialog Logos</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet" />
|
||||
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--td-primary: #3a3a50;
|
||||
--td-accent: #4f46e5;
|
||||
--td-white: #ffffff;
|
||||
--td-text-dark: #1f2937;
|
||||
--td-bg-light: #f9fafb;
|
||||
--td-border: #e5e7eb;
|
||||
|
||||
/* Light mode */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f9fafb;
|
||||
--text-primary: #1f2937;
|
||||
--text-secondary: #6b7280;
|
||||
--border-color: #e5e7eb;
|
||||
--card-bg: #ffffff;
|
||||
--card-shadow: rgba(58, 58, 80, 0.1);
|
||||
}
|
||||
|
||||
body.dark-mode {
|
||||
--bg-primary: #0f0f1e;
|
||||
--bg-secondary: #0a0a14;
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #cbd5e1;
|
||||
--border-color: #404040;
|
||||
--card-bg: #1a1a2e;
|
||||
--card-shadow: rgba(79, 70, 229, 0.2);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
transition: background 0.3s ease, color 0.3s ease;
|
||||
padding: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 50px;
|
||||
padding: 40px;
|
||||
background: linear-gradient(135deg, var(--td-primary) 0%, var(--td-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
header p {
|
||||
opacity: 0.9;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
padding: 12px 24px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 2px solid rgba(255, 255, 255, 0.4);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 30px;
|
||||
color: var(--td-accent);
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px var(--card-shadow);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px var(--card-shadow);
|
||||
}
|
||||
|
||||
.card-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 200px;
|
||||
margin-bottom: 20px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.card-preview svg {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.card-preview object {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-filename {
|
||||
font-family: "Monaco", "Courier New", monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
word-break: break-all;
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.card-filename:hover {
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
transition: all 0.2s ease;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--td-accent);
|
||||
color: white;
|
||||
border-color: var(--td-accent);
|
||||
}
|
||||
|
||||
.scalability-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.scalability-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scalability-item-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.color-palette {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 8px var(--card-shadow);
|
||||
}
|
||||
|
||||
.color-box {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid var(--border-color);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.color-box:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.color-code {
|
||||
font-family: "Monaco", "Courier New", monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
word-break: break-all;
|
||||
padding: 8px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-code:hover {
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
.color-label {
|
||||
font-weight: 600;
|
||||
margin-top: 10px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: var(--text-secondary);
|
||||
border-top: 1px solid var(--border-color);
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.notification {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: var(--td-primary);
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.notification.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="header-left">
|
||||
<h1>🎨 TypeDialog Logos</h1>
|
||||
<p>Typed dialogs for inputs, forms and schemas you can trust.</p>
|
||||
</div>
|
||||
<button class="theme-toggle" onclick="toggleTheme()">🌙 Dark Mode</button>
|
||||
</header>
|
||||
|
||||
<!-- Logo Variants -->
|
||||
<section>
|
||||
<h2>📋 Logo Variants</h2>
|
||||
<div class="gallery">
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<object data="typedialog_logo.svg" type="image/svg+xml" width="150"></object>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-filename" onclick="copyToClipboard('typedialog_logo.svg')">typedialog_logo.svg</div>
|
||||
<div class="card-meta">Vertical • Animated • Full Color</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="btn" onclick="downloadSvg('typedialog_logo.svg')">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<object data="typedialog_logo_h.svg" type="image/svg+xml" width="200" height="64"></object>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-filename" onclick="copyToClipboard('typedialog_logo_h.svg')">typedialog_logo_h.svg</div>
|
||||
<div class="card-meta">Horizontal • Animated • Full Color</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="btn" onclick="downloadSvg('typedialog_logo_h.svg')">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<object data="typedialog_logo_s.svg" type="image/svg+xml" width="150"></object>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-filename" onclick="copyToClipboard('typedialog_logo_s.svg')">typedialog_logo_s.svg</div>
|
||||
<div class="card-meta">Vertical • Static • Full Color</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="btn" onclick="downloadSvg('typedialog_logo_s.svg')">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<object data="typedialog_logo_h_s.svg" type="image/svg+xml" width="200" height="64"></object>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-filename" onclick="copyToClipboard('typedialog_logo_h_s.svg')">typedialog_logo_h_s.svg</div>
|
||||
<div class="card-meta">Horizontal • Static • Full Color</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="btn" onclick="downloadSvg('typedialog_logo_h_s.svg')">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Icon & Mark -->
|
||||
<section>
|
||||
<h2>🎯 Icon & Mark</h2>
|
||||
<div class="gallery">
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<object data="typedialog_icon.svg" type="image/svg+xml" width="120"></object>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-filename" onclick="copyToClipboard('typedialog_icon.svg')">typedialog_icon.svg</div>
|
||||
<div class="card-meta">64×64 • Animated • App Icon</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="btn" onclick="downloadSvg('typedialog_icon.svg')">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<object data="typedialog_icon_s.svg" type="image/svg+xml" width="120"></object>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-filename" onclick="copyToClipboard('typedialog_icon_s.svg')">typedialog_icon_s.svg</div>
|
||||
<div class="card-meta">64×64 • Static • Favicon</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="btn" onclick="downloadSvg('typedialog_icon_s.svg')">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Text Only -->
|
||||
<section>
|
||||
<h2>✍️ Typography</h2>
|
||||
<div class="gallery">
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<object data="typedialog_text.svg" type="image/svg+xml" width="200"></object>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-filename" onclick="copyToClipboard('typedialog_text.svg')">typedialog_text.svg</div>
|
||||
<div class="card-meta">Text • Animated • Wordmark</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="btn" onclick="downloadSvg('typedialog_text.svg')">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview">
|
||||
<object data="typedialog_text_s.svg" type="image/svg+xml" width="200"></object>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-filename" onclick="copyToClipboard('typedialog_text_s.svg')">typedialog_text_s.svg</div>
|
||||
<div class="card-meta">Text • Static • Wordmark</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="btn" onclick="downloadSvg('typedialog_text_s.svg')">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Black & White -->
|
||||
<section>
|
||||
<h2>⚫ Black & White</h2>
|
||||
<p style="color: var(--text-secondary); margin-bottom: 20px;">For print, stamping, and monochrome contexts</p>
|
||||
<div class="gallery">
|
||||
<div class="card">
|
||||
<div class="card-preview" style="background-color: #f5f5f5;">
|
||||
<object data="typedialog_icon_bn.svg" type="image/svg+xml" width="120"></object>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-filename" onclick="copyToClipboard('typedialog_icon_bn.svg')">typedialog_icon_bn.svg</div>
|
||||
<div class="card-meta">Icon • Monochrome • Print</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="btn" onclick="downloadSvg('typedialog_icon_bn.svg')">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-preview" style="background-color: #f5f5f5;">
|
||||
<object data="typedialog_logo_h_bn.svg" type="image/svg+xml" width="200" height="64"></object>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-filename" onclick="copyToClipboard('typedialog_logo_h_bn.svg')">typedialog_logo_h_bn.svg</div>
|
||||
<div class="card-meta">Horizontal • Monochrome • Print</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="btn" onclick="downloadSvg('typedialog_logo_h_bn.svg')">Download</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Scalability -->
|
||||
<section>
|
||||
<h2>📏 Scalability Test</h2>
|
||||
<p style="color: var(--text-secondary); margin-bottom: 30px;">Icon clarity at different sizes</p>
|
||||
<div class="scalability-grid">
|
||||
<div class="scalability-item">
|
||||
<div class="scalability-item-display">
|
||||
<object data="typedialog_icon_s.svg" type="image/svg+xml" width="16" height="16"></object>
|
||||
</div>
|
||||
<div style="font-weight: 600; color: var(--text-primary);">16×16</div>
|
||||
<div style="font-size: 0.9rem; color: var(--text-secondary);">Favicon</div>
|
||||
</div>
|
||||
|
||||
<div class="scalability-item">
|
||||
<div class="scalability-item-display">
|
||||
<object data="typedialog_icon_s.svg" type="image/svg+xml" width="32" height="32"></object>
|
||||
</div>
|
||||
<div style="font-weight: 600; color: var(--text-primary);">32×32</div>
|
||||
<div style="font-size: 0.9rem; color: var(--text-secondary);">Browser tab</div>
|
||||
</div>
|
||||
|
||||
<div class="scalability-item">
|
||||
<div class="scalability-item-display">
|
||||
<object data="typedialog_icon_s.svg" type="image/svg+xml" width="64" height="64"></object>
|
||||
</div>
|
||||
<div style="font-weight: 600; color: var(--text-primary);">64×64</div>
|
||||
<div style="font-size: 0.9rem; color: var(--text-secondary);">App icon</div>
|
||||
</div>
|
||||
|
||||
<div class="scalability-item">
|
||||
<div class="scalability-item-display">
|
||||
<object data="typedialog_icon_s.svg" type="image/svg+xml" width="128" height="128"></object>
|
||||
</div>
|
||||
<div style="font-weight: 600; color: var(--text-primary);">128×128</div>
|
||||
<div style="font-size: 0.9rem; color: var(--text-secondary);">Apple touch</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Color Palette -->
|
||||
<section>
|
||||
<h2>🎨 Color Palette</h2>
|
||||
<p style="color: var(--text-secondary); margin-bottom: 20px;">Official TypeDialog brand colors (click to copy)</p>
|
||||
<div class="color-palette">
|
||||
<div class="color-swatch">
|
||||
<div class="color-box" style="background: #3a3a50;" onclick="copyToClipboard('#3a3a50')"></div>
|
||||
<div class="color-label">Primary Gray</div>
|
||||
<div class="color-code" onclick="copyToClipboard('#3a3a50')">#3a3a50</div>
|
||||
<div style="font-size: 0.8rem; color: var(--text-secondary);">Bubble, primary text</div>
|
||||
</div>
|
||||
|
||||
<div class="color-swatch">
|
||||
<div class="color-box" style="background: #4f46e5;" onclick="copyToClipboard('#4f46e5')"></div>
|
||||
<div class="color-label">Accent Indigo</div>
|
||||
<div class="color-code" onclick="copyToClipboard('#4f46e5')">#4f46e5</div>
|
||||
<div style="font-size: 0.8rem; color: var(--text-secondary);">Cursor, interactive</div>
|
||||
</div>
|
||||
|
||||
<div class="color-swatch">
|
||||
<div class="color-box" style="background: #8f96a3;" onclick="copyToClipboard('#8f96a3')"></div>
|
||||
<div class="color-label">Secondary Gray</div>
|
||||
<div class="color-code" onclick="copyToClipboard('#8f96a3')">#8f96a3</div>
|
||||
<div style="font-size: 0.8rem; color: var(--text-secondary);">Text, secondary elements</div>
|
||||
</div>
|
||||
|
||||
<div class="color-swatch">
|
||||
<div class="color-box" style="background: #ffffff; border: 2px solid #e5e7eb;" onclick="copyToClipboard('#ffffff')"></div>
|
||||
<div class="color-label">White</div>
|
||||
<div class="color-code" onclick="copyToClipboard('#ffffff')">#ffffff</div>
|
||||
<div style="font-size: 0.8rem; color: var(--text-secondary);">Brackets, accents</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Typography -->
|
||||
<section>
|
||||
<h2>✏️ Typography</h2>
|
||||
<div style="background: var(--card-bg); padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px var(--card-shadow);">
|
||||
<div style="margin-bottom: 30px;">
|
||||
<div style="font-family: Inter, sans-serif; font-size: 2rem; font-weight: 600; margin-bottom: 10px;">TypeDialog</div>
|
||||
<div style="font-size: 0.95rem; color: var(--text-secondary);">Font: Inter • Weight: 500 • Size: 16-20px</div>
|
||||
</div>
|
||||
<div style="color: var(--text-secondary); font-size: 0.95rem; line-height: 1.8;">
|
||||
<p><strong>Usage:</strong> Inter is used for all typography in TypeDialog branding. The font is clean, modern, and highly readable at all sizes.</p>
|
||||
<p style="margin-top: 15px;"><strong>Import:</strong> <code style="background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px;">@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');</code></p>
|
||||
<p style="margin-top: 15px;"><strong>Font-family:</strong> <code style="background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px;">font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 TypeDialog. Typed dialogs for inputs, forms and schemas you can trust.</p>
|
||||
<p style="margin-top: 10px; font-size: 0.9rem;">Made with <span style="color: var(--td-accent);">❤️</span> • Built in Rust</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="notification" id="notification"></div>
|
||||
|
||||
<script>
|
||||
// Theme toggle
|
||||
function toggleTheme() {
|
||||
const isDark = document.body.classList.toggle('dark-mode');
|
||||
localStorage.setItem('typedialog-theme', isDark ? 'dark' : 'light');
|
||||
updateThemeButton();
|
||||
}
|
||||
|
||||
function updateThemeButton() {
|
||||
const btn = document.querySelector('.theme-toggle');
|
||||
const isDark = document.body.classList.contains('dark-mode');
|
||||
btn.textContent = isDark ? '☀️ Light Mode' : '🌙 Dark Mode';
|
||||
}
|
||||
|
||||
// Load theme preference
|
||||
if (localStorage.getItem('typedialog-theme') === 'dark') {
|
||||
document.body.classList.add('dark-mode');
|
||||
}
|
||||
updateThemeButton();
|
||||
|
||||
// Copy to clipboard
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
showNotification('Copied: ' + text);
|
||||
});
|
||||
}
|
||||
|
||||
function downloadSvg(filename) {
|
||||
showNotification('Download: ' + filename);
|
||||
// In a real app, this would trigger a download
|
||||
}
|
||||
|
||||
function showNotification(message) {
|
||||
const notification = document.getElementById('notification');
|
||||
notification.textContent = message;
|
||||
notification.classList.add('show');
|
||||
setTimeout(() => {
|
||||
notification.classList.remove('show');
|
||||
}, 2000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
8
imgs/typedialog_ascii.txt
Normal file
8
imgs/typedialog_ascii.txt
Normal file
@ -0,0 +1,8 @@
|
||||
╺┳╸╻ ╻┏━┓┏━╸╺┳┓╻┏━┓╻ ┏━┓┏━╸
|
||||
┃ ┗┳┛┣━┛┣╸ ┃┃┃┣━┫┃ ┃ ┃┃╺┓
|
||||
╹ ╹ ╹ ┗━╸╺┻┛╹╹ ╹┗━╸┗━┛┗━┛
|
||||
╔══════════════════════════════════╗
|
||||
║ ▲ Typed Dialogs you can tRust. ║
|
||||
║ ■ Inputs, Forms and Schemas. ║
|
||||
║ typedialog.dev ║
|
||||
╚══════════════════════════════════╝
|
||||
47
imgs/typedialog_icon.svg
Normal file
47
imgs/typedialog_icon.svg
Normal file
@ -0,0 +1,47 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
|
||||
<defs>
|
||||
<style>
|
||||
.cursor {
|
||||
animation: blink 1s ease-in-out infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<!-- Speech bubble con esquinas redondeadas y cola asimétrica -->
|
||||
<path
|
||||
d="M 12 14
|
||||
C 12 9, 15 6, 19 6
|
||||
L 45 6
|
||||
C 49 6, 52 9, 52 14
|
||||
L 52 32
|
||||
C 52 37, 49 40, 45 40
|
||||
L 26 40
|
||||
L 20 46
|
||||
L 20 40
|
||||
L 19 40
|
||||
C 15 40, 12 37, 12 32
|
||||
Z"
|
||||
fill="#3a3a50"
|
||||
/>
|
||||
|
||||
<!-- Type brackets < > -->
|
||||
<!-- Left bracket < -->
|
||||
<path d="M 20 17 L 16 23 L 20 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<!-- Right bracket > -->
|
||||
<path d="M 44 17 L 48 23 L 44 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
|
||||
<!-- Blinking cursor -->
|
||||
<rect
|
||||
class="cursor"
|
||||
x="30"
|
||||
y="17"
|
||||
width="4"
|
||||
height="12"
|
||||
rx="2"
|
||||
fill="#4f46e5"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
36
imgs/typedialog_icon_bn.svg
Normal file
36
imgs/typedialog_icon_bn.svg
Normal file
@ -0,0 +1,36 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
|
||||
<!-- Black & White - Monochrome variant for print/stamping -->
|
||||
|
||||
<!-- Speech bubble -->
|
||||
<path
|
||||
d="M 12 14
|
||||
C 12 9, 15 6, 19 6
|
||||
L 45 6
|
||||
C 49 6, 52 9, 52 14
|
||||
L 52 32
|
||||
C 52 37, 49 40, 45 40
|
||||
L 26 40
|
||||
L 20 46
|
||||
L 20 40
|
||||
L 19 40
|
||||
C 15 40, 12 37, 12 32
|
||||
Z"
|
||||
fill="#404040"
|
||||
/>
|
||||
|
||||
<!-- Type brackets < > -->
|
||||
<!-- Left bracket < -->
|
||||
<path d="M 20 17 L 16 23 L 20 29" stroke="#808080" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<!-- Right bracket > -->
|
||||
<path d="M 44 17 L 48 23 L 44 29" stroke="#808080" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
|
||||
<!-- Cursor -->
|
||||
<rect
|
||||
x="30"
|
||||
y="17"
|
||||
width="4"
|
||||
height="12"
|
||||
rx="2"
|
||||
fill="#606060"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 891 B |
35
imgs/typedialog_icon_s.svg
Normal file
35
imgs/typedialog_icon_s.svg
Normal file
@ -0,0 +1,35 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
|
||||
<!-- Speech bubble con esquinas redondeadas y cola asimétrica -->
|
||||
<path
|
||||
d="M 12 14
|
||||
C 12 9, 15 6, 19 6
|
||||
L 45 6
|
||||
C 49 6, 52 9, 52 14
|
||||
L 52 32
|
||||
C 52 37, 49 40, 45 40
|
||||
L 26 40
|
||||
L 20 46
|
||||
L 20 40
|
||||
L 19 40
|
||||
C 15 40, 12 37, 12 32
|
||||
Z"
|
||||
fill="#3a3a50"
|
||||
/>
|
||||
|
||||
<!-- Type brackets < > -->
|
||||
<!-- Left bracket < -->
|
||||
<path d="M 20 17 L 16 23 L 20 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<!-- Right bracket > -->
|
||||
<path d="M 44 17 L 48 23 L 44 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
|
||||
<!-- Static cursor (always visible) -->
|
||||
<rect
|
||||
x="30"
|
||||
y="17"
|
||||
width="4"
|
||||
height="12"
|
||||
rx="2"
|
||||
fill="#4f46e5"
|
||||
opacity="1"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 909 B |
59
imgs/typedialog_logo.svg
Normal file
59
imgs/typedialog_logo.svg
Normal file
@ -0,0 +1,59 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
|
||||
<defs>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
|
||||
.cursor {
|
||||
animation: blink 1s ease-in-out infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
.text-pulse {
|
||||
animation: text-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes text-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<!-- Icon (scaled and positioned at top) -->
|
||||
<g transform="translate(18, 4) scale(0.625)">
|
||||
<!-- Speech bubble -->
|
||||
<path
|
||||
d="M 12 14
|
||||
C 12 9, 15 6, 19 6
|
||||
L 45 6
|
||||
C 49 6, 52 9, 52 14
|
||||
L 52 32
|
||||
C 52 37, 49 40, 45 40
|
||||
L 26 40
|
||||
L 20 46
|
||||
L 20 40
|
||||
L 19 40
|
||||
C 15 40, 12 37, 12 32
|
||||
Z"
|
||||
fill="#3a3a50"
|
||||
/>
|
||||
|
||||
<!-- Type brackets < > -->
|
||||
<path d="M 20 17 L 16 23 L 20 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<path d="M 44 17 L 48 23 L 44 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
|
||||
<!-- Cursor -->
|
||||
<rect
|
||||
class="cursor"
|
||||
x="30"
|
||||
y="17"
|
||||
width="4"
|
||||
height="12"
|
||||
rx="2"
|
||||
fill="#4f46e5"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<!-- Text below icon -->
|
||||
<text class="text-pulse" x="37" y="48" font-family="Inter, sans-serif" font-size="14" font-weight="500" fill="#8f96a3" text-anchor="middle">TypeDialog</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
41
imgs/typedialog_logo_bn.svg
Normal file
41
imgs/typedialog_logo_bn.svg
Normal file
@ -0,0 +1,41 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
|
||||
<!-- Black & White - Monochrome vertical variant for print/stamping -->
|
||||
|
||||
<!-- Icon (scaled and positioned at top) -->
|
||||
<g transform="translate(18, 4) scale(0.625)">
|
||||
<!-- Speech bubble -->
|
||||
<path
|
||||
d="M 12 14
|
||||
C 12 9, 15 6, 19 6
|
||||
L 45 6
|
||||
C 49 6, 52 9, 52 14
|
||||
L 52 32
|
||||
C 52 37, 49 40, 45 40
|
||||
L 26 40
|
||||
L 20 46
|
||||
L 20 40
|
||||
L 19 40
|
||||
C 15 40, 12 37, 12 32
|
||||
Z"
|
||||
fill="#404040"
|
||||
/>
|
||||
|
||||
<!-- Type brackets < > -->
|
||||
<path d="M 20 17 L 16 23 L 20 29" stroke="#808080" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<path d="M 44 17 L 48 23 L 44 29" stroke="#808080" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
|
||||
<!-- Cursor -->
|
||||
<rect
|
||||
x="30"
|
||||
y="17"
|
||||
width="4"
|
||||
height="12"
|
||||
rx="2"
|
||||
fill="#606060"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<!-- Text: TypeDialog converted to paths (use Inkscape Text > Convert to Path) -->
|
||||
<!-- For now, using text element. Convert to <path> elements using design tool -->
|
||||
<text x="37" y="48" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#2a2a2a" text-anchor="middle">TypeDialog</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
58
imgs/typedialog_logo_h.svg
Normal file
58
imgs/typedialog_logo_h.svg
Normal file
@ -0,0 +1,58 @@
|
||||
<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');
|
||||
.cursor {
|
||||
animation: blink 1s ease-in-out infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
.text-pulse {
|
||||
animation: text-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes text-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<!-- Speech bubble con esquinas redondeadas y cola asimétrica -->
|
||||
<path
|
||||
d="M 12 14
|
||||
C 12 9, 15 6, 19 6
|
||||
L 45 6
|
||||
C 49 6, 52 9, 52 14
|
||||
L 52 32
|
||||
C 52 37, 49 40, 45 40
|
||||
L 26 40
|
||||
L 20 46
|
||||
L 20 40
|
||||
L 19 40
|
||||
C 15 40, 12 37, 12 32
|
||||
Z"
|
||||
fill="#3a3a50"
|
||||
/>
|
||||
|
||||
<!-- Type brackets < > -->
|
||||
<!-- Left bracket < -->
|
||||
<path d="M 20 17 L 16 23 L 20 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<!-- Right bracket > -->
|
||||
<path d="M 44 17 L 48 23 L 44 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
|
||||
<!-- Blinking cursor -->
|
||||
<rect
|
||||
class="cursor"
|
||||
x="30"
|
||||
y="17"
|
||||
width="4"
|
||||
height="12"
|
||||
rx="2"
|
||||
fill="#4f46e5"
|
||||
/>
|
||||
|
||||
<!-- Text: TypeDialog with pulse animation -->
|
||||
<text class="text-pulse" x="58" y="36" font-family="Inter, sans-serif" font-size="20" font-weight="500" fill="#8f96a3">TypeDialog</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
40
imgs/typedialog_logo_h_bn.svg
Normal file
40
imgs/typedialog_logo_h_bn.svg
Normal file
@ -0,0 +1,40 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 64" fill="none">
|
||||
<!-- Black & White - Monochrome variant for print/stamping -->
|
||||
|
||||
<!-- Speech bubble -->
|
||||
<path
|
||||
d="M 12 14
|
||||
C 12 9, 15 6, 19 6
|
||||
L 45 6
|
||||
C 49 6, 52 9, 52 14
|
||||
L 52 32
|
||||
C 52 37, 49 40, 45 40
|
||||
L 26 40
|
||||
L 20 46
|
||||
L 20 40
|
||||
L 19 40
|
||||
C 15 40, 12 37, 12 32
|
||||
Z"
|
||||
fill="#404040"
|
||||
/>
|
||||
|
||||
<!-- Type brackets < > -->
|
||||
<!-- Left bracket < -->
|
||||
<path d="M 20 17 L 16 23 L 20 29" stroke="#808080" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<!-- Right bracket > -->
|
||||
<path d="M 44 17 L 48 23 L 44 29" stroke="#808080" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
|
||||
<!-- Cursor -->
|
||||
<rect
|
||||
x="30"
|
||||
y="17"
|
||||
width="4"
|
||||
height="12"
|
||||
rx="2"
|
||||
fill="#606060"
|
||||
/>
|
||||
|
||||
<!-- Text: TypeDialog converted to paths (use Inkscape Text > Convert to Path) -->
|
||||
<!-- For now, using text element. Convert to <path> elements using design tool -->
|
||||
<text x="58" y="36" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#2a2a2a">TypeDialog</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
44
imgs/typedialog_logo_h_s.svg
Normal file
44
imgs/typedialog_logo_h_s.svg
Normal file
@ -0,0 +1,44 @@
|
||||
<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>
|
||||
|
||||
<!-- Speech bubble con esquinas redondeadas y cola asimétrica -->
|
||||
<path
|
||||
d="M 12 14
|
||||
C 12 9, 15 6, 19 6
|
||||
L 45 6
|
||||
C 49 6, 52 9, 52 14
|
||||
L 52 32
|
||||
C 52 37, 49 40, 45 40
|
||||
L 26 40
|
||||
L 20 46
|
||||
L 20 40
|
||||
L 19 40
|
||||
C 15 40, 12 37, 12 32
|
||||
Z"
|
||||
fill="#3a3a50"
|
||||
/>
|
||||
|
||||
<!-- Type brackets < > -->
|
||||
<!-- Left bracket < -->
|
||||
<path d="M 20 17 L 16 23 L 20 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<!-- Right bracket > -->
|
||||
<path d="M 44 17 L 48 23 L 44 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
|
||||
<!-- Static cursor (always visible) -->
|
||||
<rect
|
||||
x="30"
|
||||
y="17"
|
||||
width="4"
|
||||
height="12"
|
||||
rx="2"
|
||||
fill="#4f46e5"
|
||||
opacity="1"
|
||||
/>
|
||||
|
||||
<!-- Static text -->
|
||||
<text x="58" y="36" font-family="Inter, sans-serif" font-size="20" font-weight="500" fill="#8f96a3">TypeDialog</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
45
imgs/typedialog_logo_s.svg
Normal file
45
imgs/typedialog_logo_s.svg
Normal file
@ -0,0 +1,45 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
|
||||
<defs>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<!-- Icon (scaled and positioned at top) -->
|
||||
<g transform="translate(18, 4) scale(0.625)">
|
||||
<!-- Speech bubble -->
|
||||
<path
|
||||
d="M 12 14
|
||||
C 12 9, 15 6, 19 6
|
||||
L 45 6
|
||||
C 49 6, 52 9, 52 14
|
||||
L 52 32
|
||||
C 52 37, 49 40, 45 40
|
||||
L 26 40
|
||||
L 20 46
|
||||
L 20 40
|
||||
L 19 40
|
||||
C 15 40, 12 37, 12 32
|
||||
Z"
|
||||
fill="#3a3a50"
|
||||
/>
|
||||
|
||||
<!-- Type brackets < > -->
|
||||
<path d="M 20 17 L 16 23 L 20 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<path d="M 44 17 L 48 23 L 44 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
|
||||
<!-- Static cursor -->
|
||||
<rect
|
||||
x="30"
|
||||
y="17"
|
||||
width="4"
|
||||
height="12"
|
||||
rx="2"
|
||||
fill="#4f46e5"
|
||||
opacity="1"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<!-- Static text -->
|
||||
<text x="37" y="48" font-family="Inter, sans-serif" font-size="14" font-weight="500" fill="#8f96a3" text-anchor="middle">TypeDialog</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
599
imgs/typedialog_logo_specs.html
Normal file
599
imgs/typedialog_logo_specs.html
Normal file
@ -0,0 +1,599 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>TypeDialog Logo - Specifications & Preview</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 50%, #16213e 100%);
|
||||
color: #fff;
|
||||
padding: 2rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 2px solid rgba(76, 194, 241, 0.3);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(135deg, #4f46e5, #3a3a50, #4f46e5);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.version-badge {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #4f46e5, #3a3a50);
|
||||
color: white;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 25px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
margin-top: 1rem;
|
||||
box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #8d9ccf;
|
||||
font-size: 1.3rem;
|
||||
margin-top: 1.5rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
color: #4f46e5;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid rgba(79, 70, 229, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #4f46e5;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo-display-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.logo-card {
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 300px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.logo-card.dark {
|
||||
background: #0f0f1e;
|
||||
}
|
||||
|
||||
.logo-card.light {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.logo-card.gradient {
|
||||
background: linear-gradient(135deg, #3a3a50 0%, #4f46e5 100%);
|
||||
}
|
||||
|
||||
.logo-card.black {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.component-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.component-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(79, 70, 229, 0.3);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.component-card h3 {
|
||||
color: #4f46e5;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.spec-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 30px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.spec-table th {
|
||||
background: rgba(79, 70, 229, 0.2);
|
||||
color: #4f46e5;
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid rgba(79, 70, 229, 0.4);
|
||||
}
|
||||
|
||||
.spec-table td {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.spec-table tr:hover {
|
||||
background: rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 25px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.color-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.color-box {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.color-box:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.color-label {
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.color-code {
|
||||
font-family: "Monaco", monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #8d9ccf;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.guidelines {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 40px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.guideline-section {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(79, 70, 229, 0.3);
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.guideline-section h3 {
|
||||
color: #4f46e5;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.guideline-section ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.guideline-section li {
|
||||
margin-bottom: 12px;
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.guideline-section li::before {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #4f46e5;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.guideline-section.avoid li::before {
|
||||
content: "✗";
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #8d9ccf;
|
||||
border-top: 1px solid rgba(79, 70, 229, 0.3);
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.logo-display-grid,
|
||||
.guidelines {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>TypeDialog</h1>
|
||||
<div class="version-badge">Logos v1.0</div>
|
||||
<p class="subtitle">Typed dialogs for inputs, forms and schemas you can trust.</p>
|
||||
</div>
|
||||
|
||||
<!-- Logo Preview -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">Logo Previews</h2>
|
||||
<div class="logo-display-grid">
|
||||
<div class="logo-card dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 64" fill="none" width="250">
|
||||
<path d="M 12 14 C 12 9, 15 6, 19 6 L 45 6 C 49 6, 52 9, 52 14 L 52 32 C 52 37, 49 40, 45 40 L 26 40 L 20 46 L 20 40 L 19 40 C 15 40, 12 37, 12 32 Z" fill="#3a3a50"/>
|
||||
<path d="M 20 17 L 16 23 L 20 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<path d="M 44 17 L 48 23 L 44 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<rect x="30" y="17" width="4" height="12" rx="2" fill="#4f46e5"/>
|
||||
<text x="56" y="32" font-family="Inter, sans-serif" font-size="16" font-weight="500" fill="#3a3a50">TypeDialog</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="logo-card light">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 64" fill="none" width="250">
|
||||
<path d="M 12 14 C 12 9, 15 6, 19 6 L 45 6 C 49 6, 52 9, 52 14 L 52 32 C 52 37, 49 40, 45 40 L 26 40 L 20 46 L 20 40 L 19 40 C 15 40, 12 37, 12 32 Z" fill="#3a3a50"/>
|
||||
<path d="M 20 17 L 16 23 L 20 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<path d="M 44 17 L 48 23 L 44 29" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<rect x="30" y="17" width="4" height="12" rx="2" fill="#4f46e5"/>
|
||||
<text x="56" y="32" font-family="Inter, sans-serif" font-size="16" font-weight="500" fill="#3a3a50">TypeDialog</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="logo-card gradient">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 64" fill="none" width="250">
|
||||
<path d="M 12 14 C 12 9, 15 6, 19 6 L 45 6 C 49 6, 52 9, 52 14 L 52 32 C 52 37, 49 40, 45 40 L 26 40 L 20 46 L 20 40 L 19 40 C 15 40, 12 37, 12 32 Z" fill="#ffffff"/>
|
||||
<path d="M 20 17 L 16 23 L 20 29" stroke="#3a3a50" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<path d="M 44 17 L 48 23 L 44 29" stroke="#3a3a50" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<rect x="30" y="17" width="4" height="12" rx="2" fill="#3a3a50"/>
|
||||
<text x="56" y="32" font-family="Inter, sans-serif" font-size="16" font-weight="500" fill="#3a3a50">TypeDialog</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="logo-card black">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 64" fill="none" width="250">
|
||||
<path d="M 12 14 C 12 9, 15 6, 19 6 L 45 6 C 49 6, 52 9, 52 14 L 52 32 C 52 37, 49 40, 45 40 L 26 40 L 20 46 L 20 40 L 19 40 C 15 40, 12 37, 12 32 Z" fill="#ffffff"/>
|
||||
<path d="M 20 17 L 16 23 L 20 29" stroke="#3a3a50" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<path d="M 44 17 L 48 23 L 44 29" stroke="#3a3a50" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||||
<rect x="30" y="17" width="4" height="12" rx="2" fill="#3a3a50"/>
|
||||
<text x="56" y="32" font-family="Inter, sans-serif" font-size="16" font-weight="500" fill="#3a3a50">TypeDialog</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Design Concept -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">Design Concept</h2>
|
||||
<div style="background: rgba(79, 70, 229, 0.1); border: 2px solid rgba(79, 70, 229, 0.3); border-radius: 12px; padding: 30px; margin-bottom: 30px;">
|
||||
<h3 style="color: #4f46e5; margin-bottom: 15px; font-size: 1.2rem;">💬 Dialog + 🔤 Typed Interface</h3>
|
||||
<p style="color: #cbd5e1; line-height: 1.8;">
|
||||
TypeDialog's visual identity combines three core elements:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="component-grid">
|
||||
<div class="component-card">
|
||||
<h3>💬 Speech Bubble</h3>
|
||||
<p style="color: #cbd5e1; font-size: 0.95rem; line-height: 1.8;">
|
||||
Rounded rectangle with asymmetric pointer tail. Represents bidirectional communication and user interaction through dialogs.
|
||||
</p>
|
||||
<div style="margin-top: 15px; font-size: 0.85rem; color: #8d9ccf; font-family: monospace;">
|
||||
Fill: #3a3a50<br>Radius: 6px<br>Tail: 16px pointer
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="component-card">
|
||||
<h3><> Type Brackets</h3>
|
||||
<p style="color: #cbd5e1; font-size: 0.95rem; line-height: 1.8;">
|
||||
Chevron-style angle brackets flanking the cursor. Symbols of code, typing interface, and type-safety.
|
||||
</p>
|
||||
<div style="margin-top: 15px; font-size: 0.85rem; color: #8d9ccf; font-family: monospace;">
|
||||
Stroke: #ffffff<br>Width: 2.5px<br>Positioned: ±14px from center
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="component-card">
|
||||
<h3>| Blinking Cursor</h3>
|
||||
<p style="color: #cbd5e1; font-size: 0.95rem; line-height: 1.8;">
|
||||
Vertical bar with smooth blink animation. Represents active typing, interactivity, and real-time input processing.
|
||||
</p>
|
||||
<div style="margin-top: 15px; font-size: 0.85rem; color: #8d9ccf; font-family: monospace;">
|
||||
Fill: #4f46e5<br>Size: 4×12px<br>Animation: 1s blink cycle
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="component-card">
|
||||
<h3>✍️ Typography</h3>
|
||||
<p style="color: #cbd5e1; font-size: 0.95rem; line-height: 1.8;">
|
||||
Clean, modern sans-serif font. Conveystech-forward aesthetic while maintaining readability and accessibility.
|
||||
</p>
|
||||
<div style="margin-top: 15px; font-size: 0.85rem; color: #8d9ccf; font-family: monospace;">
|
||||
Font: Inter<br>Weight: 500<br>Size: 16-20px
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technical Specifications -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">Technical Specifications</h2>
|
||||
<table class="spec-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Specification</th>
|
||||
<th>Value</th>
|
||||
<th>Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Icon ViewBox</strong></td>
|
||||
<td>0 0 64 64</td>
|
||||
<td>Square format, 1:1 aspect ratio</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Logo Horizontal ViewBox</strong></td>
|
||||
<td>0 0 200 64</td>
|
||||
<td>Wide format for horizontal layouts</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Logo Vertical ViewBox</strong></td>
|
||||
<td>0 0 100 100</td>
|
||||
<td>Stacked format: icon above, text below</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Bubble Dimensions</strong></td>
|
||||
<td>40×26px (64px canvas)</td>
|
||||
<td>Rounded corners: 6px radius</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Bracket Positioning</strong></td>
|
||||
<td>±14px from center</td>
|
||||
<td>Chevron style, 6px height</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Cursor Size</strong></td>
|
||||
<td>4×12px</td>
|
||||
<td>Centered vertically in bubble</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Primary Color</strong></td>
|
||||
<td>#3a3a50</td>
|
||||
<td>Bubble fill, body text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Accent Color</strong></td>
|
||||
<td>#4f46e5</td>
|
||||
<td>Cursor, interactive elements</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Bracket Stroke</strong></td>
|
||||
<td>#ffffff</td>
|
||||
<td>2.5px width, rounded caps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>File Format</strong></td>
|
||||
<td>SVG (scalable)</td>
|
||||
<td>~1.5KB per file, no dependencies</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<!-- Color Palette -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<p style="color: #cbd5e1; margin-bottom: 20px;">Official TypeDialog brand colors</p>
|
||||
<div class="color-grid">
|
||||
<div class="color-item">
|
||||
<div class="color-box" style="background: #3a3a50;"></div>
|
||||
<div class="color-label">Primary Gray</div>
|
||||
<div class="color-code">#3a3a50</div>
|
||||
<div style="font-size: 0.85rem; color: #8d9ccf; margin-top: 8px;">Bubble, primary text</div>
|
||||
</div>
|
||||
|
||||
<div class="color-item">
|
||||
<div class="color-box" style="background: #4f46e5;"></div>
|
||||
<div class="color-label">Accent Indigo</div>
|
||||
<div class="color-code">#4f46e5</div>
|
||||
<div style="font-size: 0.85rem; color: #8d9ccf; margin-top: 8px;">Cursor, interactive</div>
|
||||
</div>
|
||||
|
||||
<div class="color-item">
|
||||
<div class="color-box" style="background: #ffffff; border: 2px solid #4f46e5;"></div>
|
||||
<div class="color-label">White</div>
|
||||
<div class="color-code">#ffffff</div>
|
||||
<div style="font-size: 0.85rem; color: #8d9ccf; margin-top: 8px;">Brackets, accents</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Animations -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">Animations</h2>
|
||||
<table class="spec-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Animation</th>
|
||||
<th>Duration</th>
|
||||
<th>Function</th>
|
||||
<th>Applied To</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Cursor Blink</strong></td>
|
||||
<td>1s</td>
|
||||
<td>ease-in-out</td>
|
||||
<td>Animated icon & logo variants</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Text Pulse</strong></td>
|
||||
<td>3s</td>
|
||||
<td>ease-in-out</td>
|
||||
<td>Animated logo & text variants</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div style="background: rgba(79, 70, 229, 0.1); border: 1px solid rgba(79, 70, 229, 0.3); border-radius: 12px; padding: 20px; margin-top: 20px; font-family: monospace; font-size: 0.85rem;">
|
||||
<div style="color: #4f46e5; margin-bottom: 10px;"><strong>CSS Cursor Blink:</strong></div>
|
||||
<div style="color: #cbd5e1; margin-bottom: 15px;">
|
||||
@keyframes blink {<br> 0%, 50% { opacity: 1; }<br> 51%, 100% { opacity: 0; }<br>}
|
||||
</div>
|
||||
|
||||
<div style="color: #4f46e5; margin-bottom: 10px;"><strong>CSS Text Pulse:</strong></div>
|
||||
<div style="color: #cbd5e1;">
|
||||
@keyframes text-pulse {<br> 0%, 100% { opacity: 1; }<br> 50% { opacity: 0.7; }<br>}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Usage Guidelines -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">Usage Guidelines</h2>
|
||||
<div class="guidelines">
|
||||
<div class="guideline-section">
|
||||
<h3>✓ Best Practices</h3>
|
||||
<ul>
|
||||
<li>Use full-color version on light & dark backgrounds</li>
|
||||
<li>Maintain minimum 32px width for visibility</li>
|
||||
<li>Keep 10px clear space around logo</li>
|
||||
<li>Use static versions in print/email</li>
|
||||
<li>Combine with brand typography (Inter)</li>
|
||||
<li>Scale proportionally (don't distort)</li>
|
||||
<li>Use monochrome for single-color applications</li>
|
||||
<li>Preserve all three components (bubble, brackets, cursor)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="guideline-section avoid">
|
||||
<h3>✗ Avoid These</h3>
|
||||
<ul>
|
||||
<li>Removing or hiding any component</li>
|
||||
<li>Changing proportions or distorting shape</li>
|
||||
<li>Using unapproved colors</li>
|
||||
<li>Rotating or tilting the logo</li>
|
||||
<li>Adding drop shadows or effects</li>
|
||||
<li>Using sizes below 32px without testing</li>
|
||||
<li>Changing typography or font</li>
|
||||
<li>Removing animation without purpose</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- File Information -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">File Information</h2>
|
||||
<div class="component-grid">
|
||||
<div class="component-card">
|
||||
<h3>File Variants</h3>
|
||||
<ul style="list-style: none; color: #cbd5e1; font-size: 0.95rem;">
|
||||
<li style="margin-bottom: 10px;">📄 typedialog_icon.svg</li>
|
||||
<li style="margin-bottom: 10px;">📄 typedialog_icon_s.svg</li>
|
||||
<li style="margin-bottom: 10px;">📄 typedialog_logo.svg</li>
|
||||
<li style="margin-bottom: 10px;">📄 typedialog_logo_h.svg</li>
|
||||
<li style="margin-bottom: 10px;">📄 typedialog_text.svg</li>
|
||||
<li style="margin-bottom: 10px;">📄 Plus B&W variants (*_bn.svg)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="component-card">
|
||||
<h3>Browser Support</h3>
|
||||
<ul style="list-style: none; color: #cbd5e1; font-size: 0.95rem;">
|
||||
<li style="margin-bottom: 10px;">✓ Chrome 90+</li>
|
||||
<li style="margin-bottom: 10px;">✓ Firefox 88+</li>
|
||||
<li style="margin-bottom: 10px;">✓ Safari 14+</li>
|
||||
<li style="margin-bottom: 10px;">✓ Edge 90+</li>
|
||||
<li style="margin-bottom: 10px;">✓ iOS Safari 14+</li>
|
||||
<li style="margin-bottom: 10px;">✓ Android Chrome</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="component-card">
|
||||
<h3>Export Options</h3>
|
||||
<ul style="list-style: none; color: #cbd5e1; font-size: 0.95rem;">
|
||||
<li style="margin-bottom: 10px;">📦 PNG (16, 32, 64, 128px)</li>
|
||||
<li style="margin-bottom: 10px;">📦 ICO (multi-resolution)</li>
|
||||
<li style="margin-bottom: 10px;">📦 PDF (print quality)</li>
|
||||
<li style="margin-bottom: 10px;">📦 EPS (vector editing)</li>
|
||||
<li style="margin-bottom: 10px;">📦 SVG (web-optimized)</li>
|
||||
<li style="margin-bottom: 10px;">📦 WebP (modern browsers)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 TypeDialog. Typed dialogs for inputs, forms and schemas you can trust.</p>
|
||||
<p style="margin-top: 10px; font-size: 0.95rem;">Version 1.0 • December 2025 • Built with ❤️ in Rust</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
17
imgs/typedialog_text.svg
Normal file
17
imgs/typedialog_text.svg
Normal file
@ -0,0 +1,17 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 30" fill="none">
|
||||
<defs>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
|
||||
.text-pulse {
|
||||
animation: text-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes text-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<!-- Text: TypeDialog with pulse animation -->
|
||||
<text class="text-pulse" x="70" y="24" font-family="Inter, sans-serif" font-size="20" font-weight="500" fill="#8f96a3" text-anchor="middle">TypeDialog</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 614 B |
7
imgs/typedialog_text_bn.svg
Normal file
7
imgs/typedialog_text_bn.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 30" fill="none">
|
||||
<!-- Black & White - Monochrome text variant for print/stamping -->
|
||||
<!-- NOTE: Text should be converted to <path> elements using Inkscape (Text > Convert to Path) -->
|
||||
|
||||
<!-- Text: TypeDialog (convert to paths for print independence) -->
|
||||
<text x="4" y="24" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#2a2a2a">TypeDialog</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 443 B |
10
imgs/typedialog_text_s.svg
Normal file
10
imgs/typedialog_text_s.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 30" fill="none">
|
||||
<defs>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<!-- Static text -->
|
||||
<text x="70" y="24" font-family="Inter, sans-serif" font-size="20" font-weight="500" fill="#8f96a3" text-anchor="middle">TypeDialog</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 385 B |
Loading…
x
Reference in New Issue
Block a user