Display · Anton
Publish boldly.
Use Anton for short marketing statements. Never use it for paragraphs or controls.
Canonical brand system
Bold tools for better publishing.
BlogBat helps small businesses publish with clear human control. The brand is fast, capable, and clear. It stays bold without adding noise.
Read design.mdIdentity
One name. One clear promise.
Lead with what a person or agent can accomplish. Prefer direct verbs such as Draft, Publish, Discover, and Syndicate. Never replace a useful outcome with an AI claim.
- Product
- BlogBat
- Code and repository
blogbat- Public copy
- Sentence case for headings and controls
Mark and wordmark
Bat mark
Keep the silhouette intact.
- Reuse the existing BatMark component and BAT_PATH_D path.
- Let inline marks inherit the current text color.
- Label meaningful marks. Hide decorative marks from assistive technology.
- Use the tracked header and footer logos on their intended surfaces.
- Do not redraw, stretch, crop, rotate, outline, or decorate the mark.
Color
Dusk violet, warm amber, calm surfaces.
Use semantic tokens in product code. The generated asset pack uses #6D4AFF as its fixed brand field. Do not hardcode that value inside product components.
| Role | Token | Light | Dark | Use |
|---|---|---|---|---|
| Canvas | --background | oklch(0.99 0.004 285) | oklch(0.16 0.025 285) | Page background |
| Ink | --foreground | oklch(0.17 0.02 285) | oklch(0.96 0.006 285) | Text and strong borders |
| Card | --card | oklch(1 0.003 285) | oklch(0.21 0.03 285) | Persistent panels |
| Dusk violet | --primary / --ring | oklch(0.55 0.23 285) | oklch(0.68 0.2 285) | Main actions, brand accents, and focus |
| Secondary | --secondary | oklch(0.96 0.02 285) | oklch(0.28 0.04 285) | Supporting actions |
| Violet neutral | --muted | oklch(0.965 0.008 285) | oklch(0.27 0.025 285) | Quiet surfaces |
| Dusk amber | --accent | oklch(0.96 0.04 75) | oklch(0.32 0.05 75) | Warm emphasis |
| Border | --border | oklch(0.92 0.01 285) | oklch(0.98 0.02 285 / 14%) | Dividers and boundaries |
| Link | --link | oklch(0.55 0.23 285) | oklch(0.74 0.18 285) | Text links |
Pair every background with its matching foreground token. Use status colors only for their named meaning. Never rely on color alone to communicate state.
Typography
Product · Geist Sans
Clear work, clear controls.
Use Geist Sans for navigation, forms, settings, body copy, and product workflows.
Technical · Geist Mono
blogbat publish
Use Geist Mono for commands, code, counts, identifiers, and structured values.
Voice and character
Sound capable and direct.
- Lead with the task a person can finish.
- Use specific verbs and measured claims.
- Keep controls short and sentences clear.
- State where a person reviews or approves the work.
“Draft an article, review it, then publish.”
Avoid noise and unsupported claims.
- Do not lead with the model or automation.
- Do not call a result effortless, perfect, or fully autonomous.
- Do not hide review, approval, or authentication requirements.
- Do not use hype, filler, or repeated exclamation marks.
Avoid: “Let AI transform your content forever!”
Asset pack
Use the supplied file.
The generated source pack lives in branding/. Runtime assets live in apps/web/public/. Never edit one generated SVG independently.
- favicon.svg, apple-touch-180.svg
- Browser and home-screen icons
- icon-512.svg, icon-maskable-512.svg
- Application and PWA icons
- logo-on-brand.svg
- Logo on the violet brand field
- mark-transparent.svg, mark-outline.svg
- Controlled mark treatments
- profile-512.svg, profile-square-512.svg
- Social profile images
- og-1200x630.svg
- Open Graph and link previews
- linkedin-cover-1584x396.svg, x-header-1500x500.svg
- Social covers
Product and tenant boundary
Product brand
Marketing and product tools use the fixed BlogBat tokens, bat path, type, and shared components. “Powered by BlogBat” stays separate from a tenant identity.
Tenant themes
Public sites keep each owner's fonts, colors, logos, and layouts. Never write tenant values into global tokens or force the BlogBat palette over a tenant theme.
Do
Make every use recognizable.
- Use semantic tokens and shared product primitives.
- Preserve visible keyboard focus and logical heading order.
- Check text contrast in both color modes.
- Label meaningful images and hide decorative marks.
- Test narrow layouts, zoom, and reduced motion.
Don't
Do not make a new BlogBat.
- Do not redraw, distort, or add effects to the bat.
- Do not hardcode the brand field in product components.
- Do not use display type for long copy or controls.
- Do not communicate a result through color alone.
- Do not mix product identity with a tenant theme.