/** * 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 }