Initial Phoenix Sankofa Cloud setup

- Complete project structure with Next.js frontend - GraphQL API backend with Apollo Server - Portal application with NextAuth - Crossplane Proxmox provider - GitOps configurations - CI/CD pipelines - Testing infrastructure (Vitest, Jest, Go tests) - Error handling and monitoring - Security hardening - UI component library - Documentation
2025-11-28 12:54:33 -08:00
commit 6f28146ac3
229 changed files with 43136 additions and 0 deletions
--- a/src/lib/design-system.ts
+++ b/src/lib/design-system.ts
@@ -0,0 +1,150 @@
+/**
+ * Phoenix Sankofa Cloud Design System
+ * 
+ * Design tokens and utilities for the brand
+ */
+
+// Color Palette
+export const colors = {
+  phoenix: {
+    fire: '#FF4500',
+    flame: '#FF8C00',
+    ember: '#FF6B35',
+  },
+  sankofa: {
+    gold: '#FFD700',
+    earth: '#8B4513',
+  },
+  sovereignty: {
+    purple: '#6A0DAD',
+    deep: '#4B0082',
+  },
+  ancestral: {
+    blue: '#1E3A8A',
+    deep: '#0F1B3D',
+  },
+  studio: {
+    black: '#0A0A0A',
+    dark: '#1A1A1A',
+    medium: '#2A2A2A',
+  },
+  neon: {
+    teal: '#00FFD1',
+    magenta: '#FF00FF',
+    cyan: '#00FFFF',
+    amber: '#FFB800',
+  },
+  status: {
+    success: '#00FF88',
+    warning: '#FFB800',
+    error: '#FF0040',
+    info: '#00B8FF',
+  },
+} as const
+
+// Typography Scale
+export const typography = {
+  fontFamily: {
+    sans: 'var(--font-inter), system-ui, sans-serif',
+    mono: 'var(--font-mono), monospace',
+  },
+  fontSize: {
+    xs: '0.75rem',    // 12px
+    sm: '0.875rem',   // 14px
+    base: '1rem',     // 16px
+    lg: '1.125rem',   // 18px
+    xl: '1.25rem',    // 20px
+    '2xl': '1.5rem',  // 24px
+    '3xl': '2rem',    // 32px
+    '4xl': '3rem',    // 48px
+    '5xl': '4rem',    // 64px
+  },
+  fontWeight: {
+    light: 300,
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+  },
+} as const
+
+// Spacing Scale (4px base unit)
+export const spacing = {
+  xs: '4px',
+  sm: '8px',
+  md: '16px',
+  lg: '24px',
+  xl: '32px',
+  '2xl': '48px',
+  '3xl': '64px',
+  '4xl': '96px',
+  '5xl': '128px',
+} as const
+
+// Animation Durations
+export const animation = {
+  fast: '150ms',
+  normal: '200ms',
+  slow: '300ms',
+  slower: '500ms',
+} as const
+
+// Well-Architected Framework Pillars
+export const pillars = {
+  SECURITY: {
+    code: 'SECURITY',
+    name: 'Security',
+    color: colors.status.error,
+  },
+  RELIABILITY: {
+    code: 'RELIABILITY',
+    name: 'Reliability',
+    color: colors.status.success,
+  },
+  COST_OPTIMIZATION: {
+    code: 'COST_OPTIMIZATION',
+    name: 'Cost Optimization',
+    color: colors.neon.cyan,
+  },
+  PERFORMANCE_EFFICIENCY: {
+    code: 'PERFORMANCE_EFFICIENCY',
+    name: 'Performance Efficiency',
+    color: colors.neon.teal,
+  },
+  OPERATIONAL_EXCELLENCE: {
+    code: 'OPERATIONAL_EXCELLENCE',
+    name: 'Operational Excellence',
+    color: colors.neon.magenta,
+  },
+  SUSTAINABILITY: {
+    code: 'SUSTAINABILITY',
+    name: 'Sustainability',
+    color: colors.status.success,
+  },
+} as const
+
+// Health Score Colors
+export const healthScoreColors = {
+  excellent: colors.status.success,    // 90-100
+  good: colors.neon.amber,              // 70-89
+  fair: colors.phoenix.flame,          // 50-69
+  poor: colors.status.error,            // 0-49
+} as const
+
+/**
+ * Get health score color based on score (0-100)
+ */
+export function getHealthScoreColor(score: number): string {
+  if (score >= 90) return healthScoreColors.excellent
+  if (score >= 70) return healthScoreColors.good
+  if (score >= 50) return healthScoreColors.fair
+  return healthScoreColors.poor
+}
+
+/**
+ * Get pillar color
+ */
+export function getPillarColor(pillarCode: keyof typeof pillars): string {
+  return pillars[pillarCode]?.color || colors.neon.cyan
+}
+