Ship Your Brand, Not Just Your Product
You've built something great. Before you launch, make sure your brand is ready. Here's the checklist.
Logo Files
- —☐ SVG — Vector format, scalable to any size
- —☐ PNG (1024x1024) — For social media and app stores
- —☐ PNG (512x512) — For larger web use
- —☐ PNG (192x192) — For web app manifest
- —☐ Favicon package — 16x16, 32x32, apple-touch-icon
- —☐ Dark mode variant — Logo that works on dark backgrounds
- —☐ Monochrome version — Single-color for watermarks and stamps
Color System
- —☐ Primary color — Your main brand color with hex, RGB, and HSL values
- —☐ Secondary color — Complementary or accent color
- —☐ Neutral palette — Background, surface, and text colors
- —☐ Semantic colors — Success (green), warning (yellow), error (red)
- —☐ Dark mode palette — Inverted or adjusted for dark contexts
- —☐ Accessibility audit — All text/background combos meet WCAG AA (4.5:1)
Typography
- —☐ Heading font — Name, weights, and fallback stack
- —☐ Body font — Name, weights, and fallback stack
- —☐ Mono font — For code and technical content
- —☐ Type scale — Defined sizes from caption to hero
- —☐ Line heights — Specified for headings and body
- —☐ Font files — Self-hosted or CDN links ready
Brand Strategy
- —☐ Mission statement — One sentence about why you exist
- —☐ Vision statement — Where you're headed
- —☐ Core values — 3-5 principles that guide decisions
- —☐ Tagline — Memorable one-liner for marketing
- —☐ Brand voice — Tone and personality guidelines
- —☐ Target audience — Who you're building for
Social & Marketing
- —☐ Twitter/X profile picture — 400x400 logo on brand background
- —☐ Twitter/X header — 1500x500 branded banner
- —☐ Open Graph image — 1200x630 for link previews
- —☐ LinkedIn banner — 1128x191 company page header
- —☐ Email signature — Logo + brand colors in email footer
Development
- —☐ CSS variables — Colors and spacing as custom properties
- —☐ Tailwind config — Theme tokens ready for tailwind.config
- —☐ React/component tokens — Brand values importable in code
- —☐ Figma file — Design source of truth with components
Documentation
- —☐ Brand guidelines PDF — One-pager or full guide with logo usage, color specs, typography rules
- —☐ Do's and don'ts — Logo minimum size, clear space, misuse examples
The Shortcut
Glyph generates all of this — every item on this checklist — from a single generation. Logo, colors, typography, strategy, social assets, code exports, and brand guidelines. One click.
Stop building checklists. Start building brands.