Replace "FastNext" branding with "PragmaStack" across the project

- Updated all references, metadata, and templates to reflect the new branding, including layout files, components, and documentation. - Replaced hardcoded color tokens like `green-600` with semantic tokens (`success`, `warning`, etc.) for improved design consistency. - Enhanced `globals.css` with new color tokens for success, warning, and destructive states using the OKLCH color model. - Added comprehensive branding guidelines and updated the design system documentation to align with the new identity. - Updated tests and mocks to reflect the branding changes and ensured all visual/verbal references match "PragmaStack". - Added new `branding/README.md` and `branding` docs for mission, values, and visual identity definition.
2025-11-20 12:55:30 +01:00
parent 5a21847382
commit 28b1cc6e48
34 changed files with 191 additions and 62 deletions
--- a/frontend/src/app/[locale]/(authenticated)/layout.tsx
+++ b/frontend/src/app/[locale]/(authenticated)/layout.tsx
@@ -10,7 +10,7 @@ import { Footer } from '@/components/layout/Footer';

 export const metadata: Metadata = {
  title: {
-    template: '%s | FastNext Template',
+    template: '%s | PragmaStack',
    default: 'Dashboard',
  },
 };
--- a/frontend/src/app/[locale]/admin/layout.tsx
+++ b/frontend/src/app/[locale]/admin/layout.tsx
@@ -12,7 +12,7 @@ import { AdminSidebar, Breadcrumbs } from '@/components/admin';

 export const metadata: Metadata = {
  title: {
-    template: '%s | Admin | FastNext Template',
+    template: '%s | Admin | PragmaStack',
    default: 'Admin Dashboard',
  },
 };
--- a/frontend/src/app/[locale]/demos/page.tsx
+++ b/frontend/src/app/[locale]/demos/page.tsx
@@ -26,9 +26,9 @@ import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';

 export const metadata: Metadata = {
-  title: 'Demo Tour | FastNext Template',
+  title: 'Demo Tour | PragmaStack',
  description:
-    'Try all features with demo credentials - comprehensive guide to the FastNext template',
+    'Try all features with demo credentials - comprehensive guide to the PragmaStack',
 };

 const demoCategories = [
--- a/frontend/src/app/[locale]/dev/docs/page.tsx
+++ b/frontend/src/app/[locale]/dev/docs/page.tsx
@@ -120,7 +120,7 @@ export default function DocsHub() {
            <h2 className="text-4xl font-bold tracking-tight mb-4">Design System Documentation</h2>
            <p className="text-lg text-muted-foreground mb-8">
              Comprehensive guides, best practices, and references for building consistent,
-              accessible, and maintainable user interfaces with the FastNext design system.
+              accessible, and maintainable user interfaces with the PragmaStack design system.
            </p>
            <div className="flex flex-wrap gap-3 justify-center">
              <Link href="/dev/docs/design-system/00-quick-start">
--- a/frontend/src/app/[locale]/dev/page.tsx
+++ b/frontend/src/app/[locale]/dev/page.tsx
@@ -14,7 +14,7 @@ import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';

 export const metadata: Metadata = {
-  title: 'Design System Hub | FastNext Template',
+  title: 'Design System Hub | PragmaStack',
  description:
    'Interactive design system demonstrations with live examples - explore components, layouts, spacing, and forms built with shadcn/ui and Tailwind CSS',
 };
@@ -90,7 +90,7 @@ export default function DesignSystemHub() {
            </div>
            <p className="text-lg text-muted-foreground">
              Interactive demonstrations, live examples, and comprehensive documentation for the
-              FastNext design system. Built with shadcn/ui + Tailwind CSS 4.
+              PragmaStack design system. Built with shadcn/ui + Tailwind CSS 4.
            </p>
          </div>
        </div>
--- a/frontend/src/app/[locale]/page.tsx
+++ b/frontend/src/app/[locale]/page.tsx
@@ -1,6 +1,6 @@
 /**
 * Homepage / Landing Page
- * Main landing page for the FastNext Template project
+ * Main landing page for the PragmaStack project
 * Showcases features, tech stack, and provides demos for developers
 */

@@ -67,7 +67,7 @@ export default function Home() {
        <div className="container mx-auto px-6 py-8">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <div className="text-sm text-muted-foreground">
-              © {new Date().getFullYear()} FastNext Template. MIT Licensed.
+              © {new Date().getFullYear()} PragmaStack. MIT Licensed.
            </div>
            <div className="flex items-center gap-6 text-sm text-muted-foreground">
              <Link href="/demos" className="hover:text-foreground transition-colors">
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1,7 +1,7 @@
@import 'tailwindcss';

 /**
- * FastNext Template Design System
+ * PragmaStack Design System
 * Theme: Modern Minimal (from tweakcn.com)
 * Primary: Blue | Color Space: OKLCH
 *
@@ -27,6 +27,10 @@
  --accent-foreground: oklch(0.3791 0.1378 265.5222);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
+  --success: oklch(0.6231 0.188 145);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.75 0.15 85);
+  --warning-foreground: oklch(0.1529 0 0);
  --border: oklch(0.9276 0.0058 264.5313);
  --input: oklch(0.9276 0.0058 264.5313);
  --ring: oklch(0.6231 0.188 259.8145);
@@ -91,6 +95,10 @@
  --accent-foreground: oklch(0.8823 0.0571 254.1284);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
+  --success: oklch(0.6231 0.188 145);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.75 0.15 85);
+  --warning-foreground: oklch(0.1529 0 0);
  --border: oklch(0.3715 0 0);
  --input: oklch(0.3715 0 0);
  --ring: oklch(0.6231 0.188 259.8145);
@@ -127,6 +135,10 @@
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
@@ -206,4 +218,4 @@ button:disabled,
 a[aria-disabled='true'],
 select:disabled {
  cursor: not-allowed;
-}
+}
--- a/frontend/src/components/dev/DevLayout.tsx
+++ b/frontend/src/components/dev/DevLayout.tsx
@@ -95,7 +95,7 @@ export function DevLayout({ children }: DevLayoutProps) {
            {/* Left: Logo + Badge */}
            <div className="flex items-center gap-3 shrink-0">
              <Code2 className="h-5 w-5 text-primary" />
-              <h1 className="text-base font-semibold">FastNext</h1>
+              <h1 className="text-base font-semibold">PragmaStack</h1>
              <Badge variant="secondary" className="text-xs">
                Dev
              </Badge>
--- a/frontend/src/components/home/AnimatedTerminal.tsx
+++ b/frontend/src/components/home/AnimatedTerminal.tsx
@@ -83,9 +83,9 @@ export function AnimatedTerminal() {
          {/* Terminal Header */}
          <div className="flex items-center gap-2 border-b bg-muted/50 px-4 py-3">
            <div className="flex gap-1.5">
-              <div className="h-3 w-3 rounded-full bg-red-500" aria-hidden="true" />
-              <div className="h-3 w-3 rounded-full bg-yellow-500" aria-hidden="true" />
-              <div className="h-3 w-3 rounded-full bg-green-500" aria-hidden="true" />
+              <div className="h-3 w-3 rounded-full bg-destructive" aria-hidden="true" />
+              <div className="h-3 w-3 rounded-full bg-warning" aria-hidden="true" />
+              <div className="h-3 w-3 rounded-full bg-success" aria-hidden="true" />
            </div>
            <div className="flex items-center gap-2 ml-4 text-sm text-muted-foreground">
              <Terminal className="h-4 w-4" aria-hidden="true" />
@@ -105,15 +105,14 @@ export function AnimatedTerminal() {
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.2 }}
-                  className={`${
-                    line.isSuccess
-                      ? 'text-green-400'
+                  className={`${line.isSuccess
+                      ? 'text-success'
                      : line.text.startsWith('#')
                        ? 'text-slate-500'
                        : line.text.startsWith('$')
-                          ? 'text-blue-400'
+                          ? 'text-primary'
                          : 'text-slate-300'
-                  }`}
+                    }`}
                >
                  {line.text || '\u00A0'}
                  {index === displayedLines.length - 1 && isAnimating && !line.isSuccess && (
--- a/frontend/src/components/home/ContextSection.tsx
+++ b/frontend/src/components/home/ContextSection.tsx
@@ -45,7 +45,7 @@ export function ContextSection() {
                viewport={{ once: true }}
                transition={{ duration: 0.3, delay: index * 0.1 }}
              >
-                <CheckCircle2 className="h-4 w-4 text-green-600" aria-hidden="true" />
+                <CheckCircle2 className="h-4 w-4 text-success" aria-hidden="true" />
                <span>{feature}</span>
              </motion.div>
            ))}
--- a/frontend/src/components/home/DemoCredentialsModal.tsx
+++ b/frontend/src/components/home/DemoCredentialsModal.tsx
@@ -68,7 +68,7 @@ export function DemoCredentialsModal({ open, onClose }: DemoCredentialsModalProp
                className="h-8 gap-2"
              >
                {copiedRegular ? (
-                  <Check className="h-4 w-4 text-green-600" aria-hidden="true" />
+                  <Check className="h-4 w-4 text-success" aria-hidden="true" />
                ) : (
                  <Copy className="h-4 w-4" aria-hidden="true" />
                )}
@@ -108,7 +108,7 @@ export function DemoCredentialsModal({ open, onClose }: DemoCredentialsModalProp
                className="h-8 gap-2"
              >
                {copiedAdmin ? (
-                  <Check className="h-4 w-4 text-green-600" aria-hidden="true" />
+                  <Check className="h-4 w-4 text-success" aria-hidden="true" />
                ) : (
                  <Copy className="h-4 w-4" aria-hidden="true" />
                )}
--- a/frontend/src/components/home/Header.tsx
+++ b/frontend/src/components/home/Header.tsx
@@ -32,7 +32,7 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
          {/* Logo */}
          <Link href="/" className="font-bold text-xl hover:opacity-80 transition-opacity">
            <span className="bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
-              FastNext
+              PragmaStack
            </span>{' '}
            <span className="text-foreground">Template</span>
          </Link>
--- a/frontend/src/components/home/HeroSection.tsx
+++ b/frontend/src/components/home/HeroSection.tsx
@@ -41,7 +41,7 @@ export function HeroSection({ onOpenDemoModal }: HeroSectionProps) {
          >
            <div className="inline-flex items-center gap-2 rounded-full border bg-background/50 px-4 py-1.5 text-sm backdrop-blur">
              <span
-                className="inline-block h-2 w-2 rounded-full bg-green-500 animate-pulse"
+                className="inline-block h-2 w-2 rounded-full bg-success animate-pulse"
                aria-hidden="true"
              />
              <span className="font-medium">MIT Licensed</span>
--- a/frontend/src/components/home/PhilosophySection.tsx
+++ b/frontend/src/components/home/PhilosophySection.tsx
@@ -58,13 +58,13 @@ export function PhilosophySection() {
            transition={{ duration: 0.5 }}
          >
            <h3 className="text-xl font-semibold mb-4 flex items-center gap-2">
-              <X className="h-5 w-5 text-red-600" aria-hidden="true" />
+              <X className="h-5 w-5 text-destructive" aria-hidden="true" />
              What You Won&apos;t Find Here
            </h3>
            <ul className="space-y-3">
              {wontFind.map((item) => (
                <li key={item} className="flex items-start gap-3">
-                  <X className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" aria-hidden="true" />
+                  <X className="h-5 w-5 text-destructive flex-shrink-0 mt-0.5" aria-hidden="true" />
                  <span className="text-muted-foreground">{item}</span>
                </li>
              ))}
@@ -80,14 +80,14 @@ export function PhilosophySection() {
            transition={{ duration: 0.5 }}
          >
            <h3 className="text-xl font-semibold mb-4 flex items-center gap-2">
-              <Check className="h-5 w-5 text-green-600" aria-hidden="true" />
+              <Check className="h-5 w-5 text-success" aria-hidden="true" />
              What You Will Find
            </h3>
            <ul className="space-y-3">
              {willFind.map((item) => (
                <li key={item} className="flex items-start gap-3">
                  <Check
-                    className="h-5 w-5 text-green-600 flex-shrink-0 mt-0.5"
+                    className="h-5 w-5 text-success flex-shrink-0 mt-0.5"
                    aria-hidden="true"
                  />
                  <span className="text-muted-foreground">{item}</span>
--- a/frontend/src/components/home/QuickStartCode.tsx
+++ b/frontend/src/components/home/QuickStartCode.tsx
@@ -55,13 +55,13 @@ export function QuickStartCode() {
          {/* Header with Copy Button */}
          <div className="flex items-center justify-between border-b bg-muted/50 px-4 py-3">
            <div className="flex items-center gap-2 text-sm text-muted-foreground font-mono">
-              <span className="inline-block h-2 w-2 rounded-full bg-green-500" aria-hidden="true" />
+              <span className="inline-block h-2 w-2 rounded-full bg-success" aria-hidden="true" />
              <span>bash</span>
            </div>
            <Button variant="ghost" size="sm" onClick={copyToClipboard} className="gap-2">
              {copied ? (
                <>
-                  <Check className="h-4 w-4 text-green-600" aria-hidden="true" />
+                  <Check className="h-4 w-4 text-success" aria-hidden="true" />
                  <span>Copied!</span>
                </>
              ) : (
--- a/frontend/src/components/layout/Footer.tsx
+++ b/frontend/src/components/layout/Footer.tsx
@@ -15,7 +15,7 @@ export function Footer() {
      <div className="container mx-auto px-4 py-6">
        <div className="flex flex-col items-center justify-between space-y-4 md:flex-row md:space-y-0">
          <div className="text-center text-sm text-muted-foreground md:text-left">
-            © {currentYear} FastNext Template. All rights reserved.
+            © {currentYear} PragmaStack. All rights reserved.
          </div>
          <div className="flex space-x-6">
            <Link
@@ -25,7 +25,7 @@ export function Footer() {
              Settings
            </Link>
            <a
-              href="https://github.com/yourusername/fastnext-stack"
+              href="https://github.com/cardosofelipe/pragmastack"
              target="_blank"
              rel="noopener noreferrer"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -83,7 +83,7 @@ export function Header() {
        {/* Logo */}
        <div className="flex items-center space-x-8">
          <Link href="/" className="flex items-center space-x-2">
-            <span className="text-xl font-bold text-foreground">FastNext</span>
+            <span className="text-xl font-bold text-foreground">PragmaStack</span>
          </Link>

          {/* Navigation Links */}
--- a/frontend/src/lib/i18n/metadata.ts
+++ b/frontend/src/lib/i18n/metadata.ts
@@ -13,8 +13,8 @@ export type Locale = 'en' | 'it';
 */
 export const siteConfig = {
  name: {
-    en: 'FastNext Template',
-    it: 'FastNext Template',
+    en: 'PragmaStack',
+    it: 'PragmaStack',
  },
  description: {
    en: 'Production-ready FastAPI + Next.js full-stack template with authentication, admin panel, and comprehensive testing',