Brand Guidelines
Managed AI, CRM & workflow automation for service businesses.
The Core Mandate
Wootomatic is a managed automation agency for service businesses. We build custom AI chatbots, CRM pipelines, workflow automation, sales funnels, reputation management, email/SMS marketing, and appointment booking on a flexible monthly subscription.
Wootomatic
AI Dispatcher
Operational Sovereignty
Encrypted data handling, role-based access controls, and configurable workflows for businesses with heightened security requirements.
24/7 AI Coverage
Instant lead qualification, appointment routing, and autonomous phone dispatching across web, SMS, WhatsApp, and social.
Workflow Mesh
Seamless multi-node integration across CRM, SMS, calendars, payments, and ad platforms.
Color Tokens
The primary brand color and accent drive global actions. Five service-accent tokens tint each of the 18 service categories across the site.
Primary actions, brand, AI chatbots
var(--brand-purple)Secondary actions, workflow, calendar
var(--brand-cyan)Funnels, email/SMS, e-commerce
oklch(0.6 0.2 140)CRM, audit, call tracking
oklch(0.7 0.18 30)Reputation, ads, mobile apps
oklch(0.65 0.24 350)Type System
Outfit
Weight: 500–900
Used for all headings, section banners, and primary CTA buttons. Loaded via Google Fonts in the root layout.
Plus Jakarta Sans
Weight: 400 / 500 / 600 / 700
Clean, highly readable geometric sans-serif for UI labels, body copy, documentation, and forms.
Monospace
Weight: 400 / 700
Used for API keys, workflow IDs, metric counters, dates, and technical logs. Stack: ui-monospace, SFMono-Regular, Menlo, Monaco.
Signature Glyphs
Each of the 18 Wootomatic services is represented by a Lucide React icon bound incontent.ts. These are the actual icons rendered across the navbar, services hub, and service detail pages.
Library: Lucide React · Stroke: 1.5px–2px · 18 service glyphs
Surface Standards
Radius Protocol
Cards and containers use rounded-2xl or rounded-[2rem] borders. Minimum radius is 1rem.
Glass Surfaces
Translucent frosted panels (glass-card utility) with subtle border tokens for layered depth.
Motion Physics
Weighted, swift, and confident. Avoid slow, bouncy transitions.
Official Logo Marks
Approved Usage
- •Use semantic tokens (primary, accent, muted) — never raw hex in components.
- •Keep Outfit on all headings; Plus Jakarta Sans for body and UI.
- •Use the service icon set from content.ts — don't introduce new icon families.
- •Maintain rounded-2xl / rounded-[2rem] on cards and containers.
- •Support both light and dark themes via the .dark variant.
Restricted Usage
- •Never use sharp corners — minimum border radius is 1rem.
- •Do not translate or abbreviate the "Wootomatic" name.
- •Don't hand-write vendor-prefixed CSS — the build handles prefixes.
- •Do not stretch, rotate, or alter the logo aspect ratio.
- •Avoid raw color classes (text-white, bg-black) — use design tokens.
Build Automation With Wootomatic
Explore our 18 managed automation services or book a consultation to map your workflow.