mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
SnapOtterandGitHub
5b86eaa2c5
- Recolor banner/wordmark SVGs to the Otter Orange palette with brand fonts - Rebuild social-preview.png as a hero-style OG card (trust badges, headline, five modality cards with section counts), synced to apps/landing + apps/web og-image.png - Replace static dashboard PNGs with dashboard.gif: a guided tab tour of all 157 tools across the five modalities - Update branding/README.md (Otter Palette, brand fonts, asset list); add scripts/branding generator + sync helpers
SnapOtter Brand Assets
Press kit for use in blog posts, articles, reviews, and other publications about SnapOtter. Free to use when referencing SnapOtter.
SnapOtter is an open-source, self-hosted file processing suite with 157 tools across image, video, audio, PDF, and file workflows.
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 | Wordmark + tagline banner on dark background |
dashboard.gif |
Animated | Scrolling tour of all 157 tools across the five modalities (README hero) |
Brand Colors
| Name | Hex | Usage |
|---|---|---|
| Otter Orange | #E07832 |
"Otter" in wordmark, buttons, links, CTAs |
| Orange Light | #F09550 |
Hover states |
| Orange Dark | #C06520 |
Text emphasis on light backgrounds |
| Dark Chocolate | #1A1210 |
Dark sections, banner background |
| Foreground | #1A1814 |
"Snap" in wordmark, primary text |
| Cream | #FAFAF7 |
Page / light background |
| Muted | #6B6560 |
Secondary / subtitle text |
Typography
- Headings / brand name: Bricolage Grotesque (weight 800)
- Body text: Instrument Sans
- Code / monospace: JetBrains Mono
Usage Guidelines
- Use the transparent PNG logos when placing on your own backgrounds.
- Use
logo-512-on-white.pngorlogo-512-on-dark.pngwhen 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).