The GrowthMatic brand.
Everything you need to talk about GrowthMatic accurately — logo files, colours, typography, voice. Downloadable assets below. Reuse freely in honest-to-the-product contexts.
Logo system
Mark
SVGThe mark is the smallest piece of the brand — three ascending dots in a primary-tinted rounded square. Use it as a favicon, app icon, or anywhere the wordmark would be illegible.
Mark (maskable)
SVGAndroid adaptive-icon variant with extra padding inside the safe area. Use for PWA manifests. Tile shows it on the primary fill so you can see the padding clearly.
Logo (square)
SVGThe default 24×24 mark exported as a standalone SVG with the primary blue baked in (#1d4ed8). Suitable for OG images, press kit, external embeds where currentColor isn't available.
Wordmark + lockup
SVGThe mark beside the GrowthMatic wordmark on one baseline. Use anywhere the brand has room to breathe — headers, footers, splash screens. Wordmark stays as text-rendered SVG so search engines see the name. Carries a prefers-color-scheme media query inside the SVG so the wordmark text flips to a light token on dark canvas automatically — works whether the file is embedded as an <img> or downloaded for press use.
Colour palette
Hex values are canonical for static exports (OG images, press kits). The app uses HSL via CSS variables so dark mode can shift the primary lightness without changing the hue.
hsl(231, 70%, 56%)
CTAs, links, focus-state outlines, gradient accents. The standalone logo mark keeps a deeper blue (#1d4ed8).
hsl(222, 47%, 11%)
Body text, headings, primary UI labels.
hsl(210, 40%, 96%)
Surface backgrounds, card tints, dividers.
hsl(160, 84%, 39%)
Success / 'available now' states, status indicators.
hsl(38, 92%, 50%)
Degraded / warning states.
hsl(0, 84%, 60%)
Errors, failed sends, deletion confirmations.
Typography
Weights 400–800. Used for everything except mono tokens. Self-hosted as latin-subset woff2 with display=swap so first paint is never blocked by a font fetch.
Regular — 400
Medium — 500
Semibold — 600
Bold — 700
Extrabold — 800
Weights 400/500/600. Used for inline code, commit hashes, IDs, and tabular numbers. Renders ligatures by default — works equally well for IDs and for <= != arrows.
const score = 0.92;
// confidence rises with the data
Voice
Direct, not breathless.
Skip the marketing scaffolding. "Paste your URL. Get customers." is the tagline because it does the whole sales pitch in five words.
Specific over impressive.
Numbers beat adjectives. "Reviewed by a human before sending" beats "compliant outreach." Show the actual mechanic, not the category.
Honest about what hasn't shipped.
Roadmap items are labelled "Coming soon" on the features page, and the product reflects what actually went out. We don't promise things that aren't yet real.
Builders, not buyers.
The audience is operators — founders, agencies, consultants who'll be the user. Write like you're explaining the product to a peer, not a procurement form.
Usage guidelines
- Place the mark on a neutral background, or on primary blue using the maskable variant.
- Keep the wordmark as text — never replace "GrowthMatic" with an image-only render.
- Maintain clear-space of at least the mark's own height around the lockup.
- Use the site fonts (Plus Jakarta Sans for UI, JetBrains Mono for code) so partner materials match what's on the site.
- Don't recolor the dots or the connector line. The mark uses currentColor for theming; recoloring breaks the contrast story.
- Don't stretch, skew, or rotate the mark.
- Don't drop the mark onto busy photographic backgrounds — its contrast is tuned for solid fills.
- Don't combine "GrowthMatic" with another wordmark in the same lockup unless it's a clear co-marketing context.