Brand logo
The logo reflects the core premise of Agent Witch: secure, local AI automation that feels like magic but is grounded in strict rules.
Logo lockup
Use the full lockup in headers, onboarding, and marketing surfaces.
Symbol meaning
Use this language in brand guidelines, team onboarding, or landing page copy.
- The Outer Diamond (Security & The Local Mac)
- The solid geometric boundary represents the secure, enclosed environment of the user's local machine. Unlike cloud-based AI that sends data everywhere, the diamond visually communicates that the work is contained, safe, and governed by company rules.
- The Intersecting Axis (The Agent)
- The bold vertical and horizontal lines (+) represent the intersection of two things: Human Intent (from the browser) and Machine Execution (on the Mac). It is the structural crosshairs of a task being targeted and completed with precision. It also subtly nods to a classic four-point spark, hinting at the Witch or magical aspect of AI.
- The Diagonal Slash (The Command)
- The offset diagonal line represents motion, dispatch, and the command line (/). It symbolizes the exact moment a task is sent from the cloud down to the local computer. It breaks the perfect symmetry of the cross, giving the logo forward momentum and making it feel like a dynamic, active tool rather than a static shape.
App surfaces
Shared page shells for panels, heroes, accent callouts, and terminal blocks. Use these instead of copying Tailwind color classes in feature code.
AppPanel
Default white card for reports, agent composer, marketplace, and admin sections.
AppAccentPanel
Brand-tinted surface for onboarding and highlights.
AppHero neutral
Welcome surfaces
Home dashboard hero and similar top-of-page introductions.
AppHero brand
Connect your Mac
Install and pairing flows use the brand hero variant.
LocalTerminalPre
curl -fsSL https://agentwitch.com/install/agent-witch.sh | bash
App CTAs
Logged-in pages use zinc primary buttons and ring-based secondary actions — not brand-500 fills.
Alerts
Success Alert
Success Message
Be cautious when performing this action.
Warning Alert
Warning Message
Be cautious when performing this action.
Error Alert
Error Message
Be cautious when performing this action.
Info Alert
Info Message
Be cautious when performing this action.
Badges
With Light Background
With Solid Background
Light Background with Left Icon
Solid Background with Right Icon
Avatars
Default Avatar
Avatar with online indicator
Avatar with offline indicator
Avatar with busy indicator
Images
Responsive image

Image in 2 Grid


Image in 3 Grid



Videos
Video Ratio 16:9
Video Ratio 4:3
Video Ratio 21:9
Video Ratio 1:1
Modals
Default Modal
Vertically Centered Modal
Form In Modal
Full Screen Modal
Modal Based Alerts
Form elements
Default Inputs
Select Inputs
Selected Values:
Textarea input field
Please enter a valid message.
Input States
Validation styles for error, success and disabled states on form controls.
Valid email!
This field is disabled.
Input Group
File Input
Checkbox
Radio Buttons
Toggle switch input
Dropzone
Tables
Basic Table
| User | Project Name | Team | Status | Budget |
|---|---|---|---|---|
Lindsey CurtisWeb Designer | Agency Website | Active | 3.9K | |
Kaiya GeorgeProject Manager | Technology | Pending | 24.9K | |
Zain GeidtContent Writing | Blog Writing | Active | 12.7K | |
Abram SchleiferDigital Marketer | Social Media | Cancel | 2.8K | |
Carla GeorgeFront-end Developer | Website | Active | 4.5K |