# AI Empower — Brand Guide

Updated: 2026-09-13. Online guide: https://www.aiempower.ca/brand

## Identity
**Your ambition. Built with AI.**

We turn business challenges and bold ideas into custom AI solutions—from intelligent assistants and connected workflows to apps, websites, and practical training.

- Practical technology, built around people
- Custom solutions, not a fixed menu of possibilities
- Clear conversations and useful next steps
- Canadian roots, working with businesses globally

Write the name **AI Empower**: two words, capital AI and E. The navigation's final period is a display treatment, not part of the name.

## Logos
- **markSvg:** /assets/brand/ai-empower-mark.svg
- **markPng:** /assets/brand/ai-empower-mark.png
- **stackedSvg:** /assets/brand/ai-empower-stacked.svg
- **stackedPng:** /assets/brand/ai-empower-stacked.png
- **stackedSvgLight:** /brand-assets/svgs/light/ai-empower-stacked.svg
- **stackedSvgDark:** /brand-assets/svgs/dark/ai-empower-stacked.svg
- **stackedPngLight:** /brand-assets/pngs/light/ai-empower-stacked.png
- **stackedPngDark:** /brand-assets/pngs/dark/ai-empower-stacked.png
- **brandAssetsZip:** /assets/brand/Brand-Assets.zip
- **formatNote:** The original SVG contains embedded raster artwork. It is self-contained, but is not a pure outlined vector. The PNG is a transparent 1024 × 1024 export of that original.
- **wordmark:** Use AI Empower in Urbanist 700 beside the original mark. The navigation adds a lilac period as a display treatment; the brand name itself has no period.
- **recommendedClearSpace:** At least one quarter of the displayed mark width on every side
- **recommendedMinimum:** 32px mark for general use; use 48px or more where space allows. Favicons are an exception.
- **lowercaseWordmark:** /assets/brand/email/aiempower-wordmark-transparent.png
- **wordmarkBanner:** /assets/brand/email/aiempower-wordmark-banner.png

Avoid:
- Stretching or cropping the mark
- Recolouring or regenerating the logo
- Adding shadows, outlines, or glow to the mark itself
- Placing it over busy artwork
- Distorting or changing logo proportions

## Colours
| Name | HEX | Role | Use |
| --- | --- | --- | --- |
| Primary purple | #A855F7 | identity | Primary brand colour. Leads the identity, purple surfaces, and brand highlights. |
| Secondary blue | #3B82F6 | identity | Secondary brand colour. Balances purple in gradients, glass artwork, and cool highlights. |
| Magenta accent | #EC4899 | identity | Accent colour. Use sparingly in the logo and finishing gradient details. |
| Lilac | #BBA6FF | interface | Interactive accents, selected states, and light purple details |
| Ice blue | #7DD3FC | interface | Focus rings, cool highlights, and gradient endpoints |
| Midnight | #080616 | neutral | Main dark page background |
| Panel | #111123 | neutral | Raised dark surfaces |
| Cloud | #F4F1FF | neutral | Primary text on dark surfaces |
| Muted lavender | #B4AFC8 | neutral | Supporting text on dark surfaces |

Use Cloud and Muted lavender text on Midnight. Check contrast for new combinations: 4.5:1 for normal text; 3:1 for large text. Decorative identity colours are not automatic text colours.

### Gradients
- **Identity:** linear-gradient(90deg, #3b82f6, #a855f7, #ec4899)
  Wordmark treatment and small brand accents
- **Heading emphasis:** linear-gradient(110deg, #e5c3ff, #b6a0ff 48%, #7dd3fc)
  Selected words; never an entire paragraph
- **Primary action:** linear-gradient(135deg, #d6caff, #bda5ff)
  Primary buttons with dark #201537 text
- **Glass icon:** linear-gradient(135deg, #0b0620, #1d4ed8 38%, #d946ef)
  Footer-inspired icon tiles with a white glyph

## Typography
### Urbanist
- Family: AI Empower Urbanist; fallback: Inter, ui-sans-serif, sans-serif
- Weight/style: 700 normal
- Role: Headings and strong short statements
- Size: Hero 44–78px; section heading 34–54px
- Line height: 1.05 hero; 1.12 section
- Letter spacing: -0.045em hero; -0.035em section

### Instrument Serif
- Family: AI Empower Instrument Serif; fallback: Georgia, serif
- Weight/style: 400 italic
- Role: A short expressive phrase in a hero only
- Size: Inherit the hero heading size
- Line height: 1.08
- Letter spacing: -0.025em

### Inter
- Family: Inter; fallback: ui-sans-serif, system-ui, sans-serif
- Weight/style: 400–700 normal
- Role: Body copy, navigation, labels, and controls
- Size: Body 16–18px; controls 14–16px; labels 11–12px
- Line height: 1.65–1.75 body; 1.4 controls
- Letter spacing: Normal body; 0.2em uppercase labels

Keep Instrument Serif italics in short hero phrases. Use gradient emphasis, not a second typeface, in ordinary section headings. Font binaries are not bundled in this kit. Obtain them from their publishers and retain the applicable licence when redistributing.

## Visual elements
- materials: Polished blue and purple glass, translucent layers, precise edges, soft reflections
- background: Deep navy and purple with generous negative space
- balance: Keep both blue and purple present; magenta is an accent

Avoid:
- Fake UI or invented product screenshots
- Generated text and logos
- Overcrowded particles and neon effects
- Using decorative art as evidence of a real product interface

Glass artwork is decorative. Use genuine screenshots to represent working products. The stacked square lockup pairs the mark above the wordmark. The small gold Free badge is a functional accent.

## Layout and interface
- contentMax: 1240px
- desktopGutter: 40px
- mobileGutter: 20px
- sectionSpace: 56–88px
- spacingScale: 4, 8, 12, 16, 24, 32, 48, 64, 88
- cardRadius: 24px
- buttonRadius: 15px
- iconRadius: 13px
- iconSize: 44px
- border: 1px solid #b9a5ff26
- cardBackground: linear-gradient(145deg, #191629aa, #0e101faa)

Use simple white line glyphs around 20–24px on glass icon tiles. Use meaningful labels, visible keyboard focus, and comfortable touch targets of at least 44px. Preserve the gold Free badge beside the primary contact CTA. Scope styles to components rather than changing unrelated pages.

## Signature punctuation
Match the navbar dot. Accent only the final period of major hero statements; retain normal punctuation in body copy, lists, and ordinary section headings.

Colour: #B9A0FF

CSS: color: #b9a0ff; -webkit-text-fill-color: #b9a0ff;

## Motion
- Easing: cubic-bezier(0.23, 1, 0.32, 1)
- Hover: 200ms
- Disclosure: 280ms
- Entrance: 600ms; 18px travel
- Animate transform and opacity where possible
- Respect prefers-reduced-motion
- Pause ongoing effects offscreen and when the tab is hidden
- Use pointer effects only on fine-pointer devices
- Keep keyboard focus visible
- Show progress and a pause control for automatically advancing content
- Do not require hover to access content on touchscreens

## Voice
Clear · Capable · Welcoming · Practical

- Start with what the person wants to do
- Use plain language and concrete examples
- Say what we could build without promising unverified results
- Use short action labels with a clear destination
- Describe AI as a useful tool, not magic

Preferred CTA: **Tell us your idea**, with a small **Free** badge for the consultation.

Avoid:
- Unverified growth, time-saving, or accuracy guarantees
- Jargon-heavy claims such as revolutionary AI-powered synergy
- Implying every project needs AI
- Invented clients, certifications, awards, or partnerships

## Contact and social links
- Website: https://www.aiempower.ca
- Email: info@aiempower.ca
- Phone: 647-484-3886
- 24/7 AI phone support: 647-484-3886 (tel:+16474843886)
- Location: Hamilton, Ontario, Canada
- LinkedIn — AI Empower Consultants: https://www.linkedin.com/company/aiempower-consultants?originalSubdomain=ca
- Instagram — @_aiempower: https://www.instagram.com/_aiempower/
- Facebook — AI Empower Consultants: https://www.facebook.com/AIEmpowerInc/
- WhatsApp — Join our community: https://chat.whatsapp.com/G8kROPWo5q2B9ZQmiWuGdd
- YouTube — AI Empower videos: https://www.youtube.com/channel/UCeiTvEYzTLbRvUe8XFW_toQ

## Asset inventory
- Lowercase wordmark — transparent PNG: assets/brand/email/aiempower-wordmark-transparent.png (logo)
- Lowercase wordmark banner: assets/brand/email/aiempower-wordmark-banner.png (banner)
- Primary mark — original SVG: assets/brand/ai-empower-mark.svg (logo)
- Primary mark — transparent PNG: assets/brand/ai-empower-mark.png (logo)
- Stacked brand lockup — transparent SVG: assets/brand/ai-empower-stacked.svg (logo)
- Stacked brand lockup — transparent PNG: assets/brand/ai-empower-stacked.png (logo)
- Brand toolkit: assets/nav-art/brand.webp (decorative-art)
- Connected flow: assets/home-features/connected-flow.webp (decorative-art)
- Modular build: assets/home-features/modular-build.webp (decorative-art)
- Signal core: assets/home-features/signal-core.webp (decorative-art)
- Ambient background: assets/brand/ambient-background.svg (editable-element)
- Glass icon tile: assets/brand/glass-icon-tile.svg (editable-element)

## For AI tools and developers
Read brand.json for structured context and asset-manifest.json for the asset inventory, file sizes, and SHA-256 checksums. brand-tokens.css contains matching CSS variables. All paths beginning /assets/ are relative to the website root; matching assets/ paths are included in the ZIP. Use the supplied logo rather than generating or redrawing it. Do not infer new certifications, performance claims, social accounts, or brand colours.

## Reference and usage
Reference assembled from the current website. Spacing, minimum sizes, and writing examples are recommended usage guidance.

Use these assets to represent AI Empower accurately. For co-branding or uses beyond that purpose, contact info@aiempower.ca. This guide does not create a new asset licence.

Source files:
- src/components/Services/ServiceDesign.css
- src/components/Home/AIWorkflowHero.jsx
- src/components/DesktopNavigation.jsx
- src/components/Footer.jsx
- public/assets/favicon.svg
- public/assets/home-features/seal-monogram.svg