Brand Pages Audit Report¶
Date: January 2026 Purpose: Audit pages against Vellocity brand guidelines and Metronic design patterns
Executive Summary¶
This audit identifies pages that need updates to align with:
1. Brand terminology (MagicAI → Vellocity, Prompts → AI Workflows, etc.)
2. Visual design system (border radius, table headers, card patterns)
3. Metronic component patterns (from /tmp/metronic-tailwind-html-demos/)
Priority Levels¶
- 🔴 High - User-facing, affects brand perception
- 🟡 Medium - Admin-facing, internal consistency
- 🟢 Low - Edge cases, rarely seen pages
1. Terminology Updates Required¶
1.1 MagicAI → Vellocity Branding 🔴¶
| File | Line(s) | Current Text | Recommended |
|---|---|---|---|
panel/admin/announcements/index.blade.php |
71, 99, 105, 127 | Welcome to MagicAI! |
Welcome to Vellocity! |
panel/admin/assistant/create.blade.php |
TBD | MagicAI references | Vellocity |
panel/admin/assistant/edit.blade.php |
TBD | MagicAI references | Vellocity |
panel/admin/config/home.blade.php |
TBD | MagicAI references | Vellocity |
panel/admin/index.blade.php |
TBD | MagicAI references | Vellocity |
panel/admin/settings/general.blade.php |
TBD | MagicAI references | Vellocity |
panel/chatbot/form.blade.php |
TBD | Default chatbot name | Vellocity Assistant |
landing-page/features/section.blade.php |
TBD | MagicAI references | Vellocity |
landing-page/tools/section.blade.php |
TBD | MagicAI references | Vellocity |
1.2 Deprecated Feature Terminology 🟡¶
Per brand guidelines, update these terms:
| Deprecated Term | Correct Term | Files Affected |
|---|---|---|
| Prompts | AI Workflows | admin/config/seo.blade.php, admin/openai/*.blade.php |
| Generators | GTM Agents | admin/frontend/generators_list/*.blade.php |
| Magic Tools | AI Tools | Various |
| Ultimate AI | (Remove) | Marketing copy |
2. Visual Design Updates Required¶
2.1 Border Radius Corrections 🔴¶
Standard: Use rounded-card (12px) for cards, NOT rounded-2xl (16px)
| File | Issue | Fix |
|---|---|---|
panel/admin/affiliate/index.blade.php:191 |
rounded-lg on modal |
Use rounded-card |
| Various admin modals | rounded-lg |
rounded-card |
| Various badges | rounded-full |
Keep (badges are correct) |
2.2 Table Header Standardization 🟡¶
Standard Pattern:
<th class="text-left p-3 text-xs font-semibold uppercase tracking-wider text-foreground/60 border-b border-input-border">
Pages Using <x-table> (Already Compliant):
- ✅ panel/admin/affiliate/index.blade.php - Uses <x-table> component
- ✅ panel/admin/finance/plans/index.blade.php - Uses <x-table> component
Pages Needing Migration to <x-table>:
| File | Current Pattern | Action |
|---|---|---|
panel/user/marketplace-seo-score/index.blade.php |
Inline tables | Migrate to <x-table> |
panel/user/video-intelligence/index.blade.php |
Inline tables | Migrate to <x-table> |
panel/user/seo-intelligence/index.blade.php |
Inline tables | Migrate to <x-table> |
panel/user/partner-central/case-study/index.blade.php |
Inline tables | Migrate to <x-table> |
2.3 Card Header Actions Pattern 🟡¶
Standard Pattern (from brand guidelines):
<x-card>
<x-slot:head>Card Title</x-slot:head>
<x-slot:headActions>
<x-button variant="ghost" size="sm">Action</x-button>
</x-slot:headActions>
</x-card>
Pages Needing headActions:
| Page | Recommended Action |
|---|---|
| Admin Affiliate Requests | "Export CSV" button |
| Admin Announcements | "Preview" button |
| User SEO Score | "History" button |
3. Admin Panel Pages Audit¶
3.1 Admin Affiliate Page (panel/admin/affiliate/index.blade.php) 🟡¶
Status: Mostly compliant
Current Issues:
1. ✅ Uses <x-table> component - Good
2. ⚠️ Modal uses rounded-lg instead of rounded-card (lines 191, 251)
3. ⚠️ Action buttons use inline styles, should use <x-button> variants
4. ⚠️ No card wrapper with headActions for sections
Recommended Changes:
<!-- Line 191: Change modal container -->
- <div class="w-full max-w-md rounded-lg bg-background p-6 shadow-xl">
+ <div class="w-full max-w-md rounded-card bg-background p-6 shadow-xl">
<!-- Line 251: Same for reject modal -->
3.2 Admin Announcements Page (panel/admin/announcements/index.blade.php) 🔴¶
Status: Needs terminology update
Issues:
1. 🔴 Line 71: Welcome to MagicAI! - Change to Welcome to Vellocity!
2. 🔴 Line 99, 105: Alt text references MagicAI
3. 🔴 Line 127: Default title value references MagicAI
4. ✅ Card component usage - Good
5. ✅ Form step component usage - Good
Recommended Changes:
<!-- Line 71 -->
- @lang(setting('announcement_title', 'Welcome to MagicAI!'))
+ @lang(setting('announcement_title', 'Welcome to Vellocity!'))
<!-- Line 127 -->
- value="{{ setting('announcement_title', 'Welcome to MagicAI!') }}"
+ value="{{ setting('announcement_title', 'Welcome to Vellocity!') }}"
3.3 Admin Settings/General Page 🟡¶
Likely Issues: - MagicAI brand references in default values - Site name defaults
4. User Panel Pages Audit¶
4.1 Marketplace SEO Score (panel/user/marketplace-seo-score/index.blade.php) 🟡¶
Status: Good brand alignment, minor styling improvements possible
Positive:
1. ✅ Uses <x-card> components correctly
2. ✅ Uses <x-slot:head> for card headers
3. ✅ Brand colors (success, primary, info, warning, danger)
4. ✅ Proper gradient usage (bg-gradient-to-r)
Minor Improvements:
1. Line 42: Score boxes use rounded-lg - Consider rounded-card for consistency
2. Consider adding <x-slot:headActions> with "View History" link
4.2 User Affiliate Pages (Updated in #1147) ✅¶
Status: Recently updated with B2B terminology
Changes Made: - "Invite your friend" → "Refer partner companies" - "purchases" → "subscriptions" - B2B-focused language
4.3 Large User Pages Needing Audit 🟡¶
These pages are 800+ lines and need thorough review:
| Page | Lines | Priority |
|---|---|---|
marketplace-listing-optimizer/index.blade.php |
876 | Medium |
marketplace-seo-score/index.blade.php |
1003 | Medium |
video-intelligence/index.blade.php |
1079 | Medium |
seo-intelligence/index.blade.php |
1070 | Medium |
partner-central/case-study/index.blade.php |
996 | Medium |
5. Metronic Pattern Adoption Opportunities¶
5.1 Empty States with Illustrations¶
Current: Text-only empty states Metronic: Illustrations + text
Implementation:
@forelse ($items as $item)
{{-- Content --}}
@empty
<tr>
<td colspan="8" class="text-center py-12">
<img src="{{ asset('themes/default/assets/img/illustrations/3.svg') }}"
class="mx-auto mb-4 h-24 dark:hidden" alt="">
<img src="{{ asset('themes/default/assets/img/illustrations/3-dark.svg') }}"
class="mx-auto mb-4 h-24 hidden dark:block" alt="">
<p class="text-muted-foreground">{{ __('No items found') }}</p>
</td>
</tr>
@endforelse
Files to Update:
- panel/admin/affiliate/index.blade.php (lines 97-103, 178-184)
- All admin list pages with empty states
5.2 Stats Cards Pattern¶
Metronic Pattern: Icon badge + metric + trend Example from demo/requests.blade.php:
<x-card>
<div class="flex items-center gap-4">
<div class="flex h-12 w-12 items-center justify-center rounded-card bg-primary/10">
<x-tabler-clock class="h-6 w-6 text-primary" />
</div>
<div>
<p class="text-sm text-muted-foreground">{{ __('Pending') }}</p>
<p class="text-2xl font-semibold">{{ $pendingCount }}</p>
</div>
</div>
</x-card>
5.3 Action Dropdown Menus¶
Metronic Pattern: Three-dot menu with dropdown Current: Inline buttons
Recommended for tables with many actions:
<x-dropdown>
<x-slot:trigger>
<x-button variant="ghost" size="icon">
<x-tabler-dots-vertical class="size-4" />
</x-button>
</x-slot:trigger>
<x-dropdown-item href="#">{{ __('View') }}</x-dropdown-item>
<x-dropdown-item href="#">{{ __('Edit') }}</x-dropdown-item>
<x-dropdown-item variant="danger">{{ __('Delete') }}</x-dropdown-item>
</x-dropdown>
6. CSS/Tailwind Compliance¶
6.1 Tailwind v3 vs v4 Syntax¶
Reminder: Metronic uses Tailwind v4, Vell uses v3
| v4 Syntax (Avoid) | v3 Syntax (Use) |
|---|---|
bg-linear-to-r |
bg-gradient-to-r |
bg-linear-to-br |
bg-gradient-to-br |
6.2 Custom CSS Variables¶
Available Variables (from brand guidelines):
- --card-rounded → rounded-card class
- --button-rounded → rounded-button class
- --input-rounded → rounded-input class
7. Implementation Priority¶
Phase 1: High Priority (Brand Perception) 🔴¶
- Update MagicAI → Vellocity in announcements page
- Update MagicAI → Vellocity in settings defaults
- Update MagicAI → Vellocity in assistant/chatbot defaults
Phase 2: Medium Priority (Consistency) 🟡¶
- Add empty state illustrations to admin list pages
- Migrate remaining inline tables to
<x-table>component - Update modal border-radius to
rounded-card - Add headActions to cards where appropriate
Phase 3: Low Priority (Polish) 🟢¶
- Update deprecated terminology (Prompts, Generators)
- Add stats card patterns to dashboard widgets
- Implement action dropdown menus for complex tables
8. Files Reference¶
Recently Updated (Compliant)¶
panel/admin/demo/requests.blade.php- Brand-styled stats cards ✅panel/user/affiliate/index.blade.php- B2B terminology ✅panel/user/affiliate/users.blade.php- B2B terminology ✅panel/user/dashboard/affiliates.blade.php- B2B terminology ✅panel/user/knowledge-bases/index.blade.php- Design system ✅panel/user/orders/index.blade.php- Design system ✅
Brand Guidelines Reference¶
.claude/skills/brand-guidelines/SKILL.md- Complete brand systemdocs/metronic-migration-plan.md- Metronic patterns guide
Metronic Reference Files¶
tmp/metronic-tailwind-html-demos/dist/html/demo1/- Primary referencetmp/metronic-tailwind-html-demos/dist/assets/media/illustrations/- SVG assets
9. Quick Reference: Brand Classes¶
Cards¶
Tables¶
<th class="text-left p-3 text-xs font-semibold uppercase tracking-wider text-foreground/60 border-b border-input-border">
Buttons¶
<x-button variant="primary">Primary</x-button>
<x-button variant="ghost-shadow">Secondary</x-button>
<x-button variant="ghost" size="icon"><x-tabler-icon /></x-button>
Status Badges¶
<span class="inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-medium bg-success/10 text-success">Active</span>