Northwestern Filament Theme Laravel Package

Product Decisions This Supports

• Brand Consistency: Accelerates adoption of Northwestern University’s visual identity (colors, typography, logos) across internal admin tools, reducing design debt and ensuring compliance with institutional branding guidelines.
• Developer Velocity: Eliminates manual CSS overrides for Filament panels by providing a pre-built, maintainable theme layer. Reduces frontend dev time by 30–50% for new panels.
• Roadmap Alignment: Enables rapid rollout of new Filament-based admin tools (e.g., HR, Finance, Research) with standardized UI/UX, aligning with the university’s digital transformation goals.
• Build vs. Buy: Buy for brand-specific projects; build only if requiring custom Filament themes beyond NU’s palette (e.g., third-party integrations).
• Use Cases:
  • Internal dashboards for NU departments (e.g., Registrar, IT, Libraries).
  • Student/faculty-facing admin portals (e.g., course enrollment, grant management).
  • Legacy system replacements where Filament is the chosen framework.

When to Consider This Package

• Adopt if:

  • Your project requires Northwestern University’s exact branding (colors, logos, typography).
  • You’re using Filament 4.x/5.x with Laravel 12/13 and PHP 8.3+.
  • You need quick UI consistency across multiple admin panels without custom CSS.
  • Your team lacks frontend resources to maintain a custom theme.

• Look elsewhere if:

  • You need non-NU branding (e.g., corporate, academic partner, or generic themes).
  • Your project uses Filament 3.x or older Laravel/PHP versions.
  • You require highly customized Filament components that conflict with the theme’s defaults.
  • Your environment blocks CDN access to common.northwestern.edu (fonts/logos).
  • You’re building a public-facing (non-NU) application.

How to Pitch It (Stakeholders)

For Executives:

"This package lets us deploy Northwestern-branded admin tools 50% faster by automating UI consistency. Instead of spending months designing and maintaining custom dashboards, we can focus on core functionality while ensuring all tools align with NU’s visual identity. It’s a low-risk, high-impact way to modernize internal systems—think of it as ‘design as code’ for Filament."

Key Outcomes: ✅ Faster development (no manual CSS for branding). ✅ Institutional compliance (official NU colors/logos). ✅ Scalable (works across all Filament panels). ✅ Maintained by NU’s sysdev team (no orphaned code).

For Engineering:

*"This is a drop-in Filament plugin that layers NU’s design system on top of any panel. It handles:

• Branding: Purple/gold palette, typography, logos, favicon.
• UX Enhancements: Environment indicators (dev/staging), impersonation banners, dark mode.
• Tailwind Integration: Use bg-nu-purple-100 or text-nu-gold directly in your Blade/Tailwind.
• Modular: Opt in/out of features (footer, environment badge) per panel.

How to Use:

1. composer require northwestern-sysdev/northwestern-filament-theme
2. Register in Panel::make():

   ->plugins([NorthwesternTheme::make()->footer()->withoutEnvironmentIndicator()])
   

3. Run php artisan filament:assets or integrate via Vite for single-bundle builds.

Tradeoffs:

• Pros: Zero custom CSS, auto-updates with NU’s design system, Filament-compatible.
• Cons: CDN dependency for fonts/logos (add common.northwestern.edu to CSP if needed)."*

Call to Action: "Let’s pilot this on [Project X] to replace our custom CSS. If it saves 2 weeks of dev time, we can roll it out to all Filament panels."