Add new branding SVG files for wordmark in white and default colors

- Created wordmark-white.svg with white text for branding use.
- Created wordmark.svg with dark text for branding use.
This commit is contained in:
SnapOtter
2026-05-10 21:25:43 +08:00
parent 78ca9720e7
commit 8aa5d9a5f2
113 changed files with 61 additions and 8353 deletions
+42
View File
@@ -0,0 +1,42 @@
# SnapOtter Brand Assets
Press kit for use in blog posts, articles, reviews, and other publications about SnapOtter. Free to use when referencing SnapOtter.
## Files
| File | Size | Use |
|------|------|-----|
| `logo-512.png` | 512x512 | High-res logo with transparency |
| `logo-256.png` | 256x256 | Medium logo |
| `logo-192.png` | 192x192 | Web/PWA icon size |
| `logo-128.png` | 128x128 | Standard logo |
| `logo-64.png` | 64x64 | Small inline logo |
| `favicon-32.png` | 32x32 | Favicon |
| `logo-512-on-white.png` | 512x512 | Logo on white background (no transparency) |
| `logo-512-on-dark.png` | 512x512 | Logo on dark background (no transparency) |
| `social-preview.png` | 1280x640 | OpenGraph / social media preview |
| `wordmark.svg` | Scalable | "SnapOtter" text mark (dark text) |
| `wordmark-white.svg` | Scalable | "SnapOtter" text mark (white text, for dark backgrounds) |
| `banner.svg` | Scalable | Logo + tagline banner on dark background |
## Brand Colors
| Name | Hex | Usage |
|------|-----|-------|
| Primary Blue | `#3b82f6` | "Otter" in wordmark, buttons, accents |
| Dark | `#0f172a` | "Snap" in wordmark, dark mode background |
| Slate | `#94a3b8` | Subtitle/muted text |
| White | `#ffffff` | Light mode background |
## Typography
- **Headings / brand name**: Nunito (weight 800)
- **Body text**: Inter
## Usage Guidelines
- Use the transparent PNG logos when placing on your own backgrounds.
- Use `logo-512-on-white.png` or `logo-512-on-dark.png` when transparency is not supported.
- Keep the logo proportions intact. Do not stretch or distort.
- Maintain reasonable clear space around the logo.
- The wordmark is always written as "SnapOtter" (capital S, capital O, one word).
+9
View File
@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 720 200" fill="none">
<rect width="720" height="200" rx="16" fill="#0f172a"/>
<text x="220" y="105" font-family="Nunito, Inter, system-ui, sans-serif" font-size="64" font-weight="800" fill="#ffffff">
<tspan>Snap</tspan><tspan fill="#3b82f6">Otter</tspan>
</text>
<text x="220" y="140" font-family="Inter, system-ui, sans-serif" font-size="18" fill="#94a3b8">
Self-hosted image processing suite
</text>
</svg>

After

Width:  |  Height:  |  Size: 523 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 288 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 289 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 291 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 80" fill="none">
<text x="0" y="58" font-family="Nunito, Inter, system-ui, sans-serif" font-size="56" font-weight="800" fill="#ffffff">
<tspan>Snap</tspan><tspan fill="#3b82f6">Otter</tspan>
</text>
</svg>

After

Width:  |  Height:  |  Size: 271 B

+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 80" fill="none">
<text x="0" y="58" font-family="Nunito, Inter, system-ui, sans-serif" font-size="56" font-weight="800" fill="#0f172a">
<tspan>Snap</tspan><tspan fill="#3b82f6">Otter</tspan>
</text>
</svg>

After

Width:  |  Height:  |  Size: 271 B