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.