# Robutlers — Logo & Brand Asset Pack v1.0 All assets produced from the locked brand guidelines (see `robutlers-brand-guidelines.md`). **Palette** - Primary navy: `#1A365D` - Stack middle: `#5A7192` - Stack back: `#A8B6C8` - Accent orange: `#FF8C00` (not used in mark — reserved for CTAs and accents) - Background (OG): `#F8F9FA` **Typography** - Mark: Inter Black (900) — outlined as vector paths in every SVG, so no font dependency at render time - Wordmark: JetBrains Mono Bold (700) — also outlined Every SVG in this pack uses **outlined glyph paths**, not `` elements, so they render identically everywhere — browsers, email clients, print, social previews, favicons. --- ## File index ### `/svg/` — vector source files | File | Use for | |---|---| | `mark-stacked.svg` | Primary mark. 3-layer navy stack. Use on light backgrounds. | | `mark-stacked-reversed.svg` | Same mark adapted for navy background — front R is white, layers shift. | | `mark-solid-navy.svg` | Compressed form of the mark. Use at small sizes (≤32px) where stacking becomes muddy. | | `mark-solid-white.svg` | White knockout version for use over photography or dark fills. | | `mark-solid-black.svg` | Single-color print version. | | `wordmark-navy.svg` | Just the word "Robutlers" in JetBrains Mono Bold, navy. | | `wordmark-white.svg` | Same wordmark in white for dark backgrounds. | | `lockup-horizontal.svg` | Primary lockup — mark left, wordmark right. Default brand signature. | | `lockup-horizontal-reversed.svg` | Horizontal lockup on a navy panel. | | `lockup-stacked.svg` | Vertical lockup — mark above, wordmark below, centered. Use for square formats. | | `lockup-stacked-reversed.svg` | Vertical lockup on a navy panel. | | `og-image.svg` | Social link preview — 1200×630. | | `social-avatar.svg` | Square profile image — 400×400, white R on navy. | | `favicon-source.svg` | Single solid navy R for favicon rasterization. | | `safari-pinned-tab.svg` | Black R for Safari's pinned-tab monochrome slot. | | `apple-touch-icon-source.svg` | Source for the 180×180 apple-touch-icon PNG (white R on navy). | ### `/png/` — raster files | File | Use for | |---|---| | `favicon.ico` | Multi-size (16/32/48) — drop into site root. | | `favicon-16.png` | Tab/bookmark icon. | | `favicon-32.png` | Retina tab/bookmark icon. | | `favicon-48.png` | Windows taskbar / larger browser tab. | | `apple-touch-icon.png` | 180×180, for iOS home-screen icon. Must have solid background per iOS spec. | | `android-chrome-192x192.png` | Android PWA icon. | | `android-chrome-512x512.png` | Android PWA splash / large icon. | | `og-image.png` | Open Graph / Twitter card / LinkedIn preview. Reference from `` tags. | | `social-avatar-400.png` | Profile picture for Instagram, LinkedIn company page, X/Twitter. | | `social-avatar-800.png` | Retina profile picture, same image at 2x. | --- ## How to wire favicons into the site Add to the `` of every page: ```html ``` And create `site.webmanifest`: ```json { "name": "Robutlers", "short_name": "Robutlers", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#1A365D", "background_color": "#F8F9FA", "display": "standalone" } ``` --- ## How to wire OG image into the site Add to the ``: ```html ``` --- ## Regenerating or modifying If you ever need to tweak the mark (wider/narrower stack, different accent color, etc.), all assets are generated from two Python scripts: - `generate.py` — all the logo SVGs - `gen_favicons.py` — favicon rasters - `gen_og.py` — OG image and social avatar Re-run them after editing any constants at the top of the file. --- ## What's still not in this pack Intentionally left for later: - LinkedIn banner (1584×396) - X/Twitter header (1500×500) - Animated mark / loading-state Lottie - Maskable PWA icon with Android safe-zone padding - Email signature block Add these when the need is real, not before. --- *End of README. Generated April 17, 2026.*