Files

defiQUG 9daf1fd378 Apply Composer changes: comprehensive API updates, migrations, middleware, and infrastructure improvements

- Add comprehensive database migrations (001-024) for schema evolution
- Enhance API schema with expanded type definitions and resolvers
- Add new middleware: audit logging, rate limiting, MFA enforcement, security, tenant auth
- Implement new services: AI optimization, billing, blockchain, compliance, marketplace
- Add adapter layer for cloud integrations (Cloudflare, Kubernetes, Proxmox, storage)
- Update Crossplane provider with enhanced VM management capabilities
- Add comprehensive test suite for API endpoints and services
- Update frontend components with improved GraphQL subscriptions and real-time updates
- Enhance security configurations and headers (CSP, CORS, etc.)
- Update documentation and configuration files
- Add new CI/CD workflows and validation scripts
- Implement design system improvements and UI enhancements

2025-12-12 18:01:35 -08:00

3.4 KiB

Raw Blame History

Phoenix Nexus Design System

Overview

The unified design system for Sankofa's Phoenix Nexus Cloud, ensuring consistent identity and experience across all three layers (Public Marketing, Portals, Documentation).

Color System

Primary Colors

Phoenix Fire (#FF4500)

Primary brand color
Used for CTAs, highlights, active states
CSS variable: --phoenix-fire

Sankofa Gold (#FFD700)

Secondary brand color
Used for accents, premium features
CSS variable: --sankofa-gold

Sovereignty Purple (#6A0DAD)

Trust and compliance
Used for security, enterprise features
CSS variable: --sovereignty-purple

Neutral Colors

Studio Black (#0A0A0A)

Primary background
CSS variable: --studio-black

Studio Dark (#1A1A1A)

Secondary background
CSS variable: --studio-dark

Studio Medium (#2A2A2A)

Borders, dividers
CSS variable: --studio-medium

Status Colors

Success: #00FF88 (green)
Warning: #FFB800 (yellow)
Error: #FF0040 (red)
Info: #00B8FF (blue)

Typography

Font Families

Sans: Inter (via Next.js font optimization)
Mono: System monospace

Scale

Display: 5xl, 4xl, 3xl (hero sections)
Heading: 2xl, xl, lg (section headers)
Body: base, sm (content)
Caption: xs (metadata, labels)

Components

Buttons

Variants:

phoenix - Primary action (Phoenix Fire)
outline - Secondary action
ghost - Tertiary action
destructive - Destructive action

Sizes:

lg - Large (hero CTAs)
default - Standard
sm - Small (compact spaces)

Cards

Consistent card styling across all layers:

Border: border-studio-medium
Background: bg-studio-black or bg-studio-dark
Hover: hover:border-phoenix-fire/50

Forms

Input fields with consistent styling
Labels with proper spacing
Error states with red accents
Success states with green accents

Spacing System

Using Tailwind's spacing scale:

xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px
2xl: 48px
3xl: 64px

Responsive Breakpoints

Mobile: < 640px
Tablet: 640px - 1024px
Desktop: > 1024px

Accessibility

WCAG Compliance

✅ Semantic HTML
✅ ARIA labels where needed
✅ Keyboard navigation
✅ Focus indicators
✅ Color contrast ratios
✅ Screen reader support

Best Practices

Use lang="en" on <html>
Provide <title> elements
Use proper heading hierarchy
Include alt text for images
Ensure touch targets are at least 44x44px

Animation

Transitions

Standard: transition-colors
Duration: 200-300ms
Easing: ease-in-out

Loading States

Spinner: animate-spin
Pulse: animate-pulse
Fade: animate-fade-in

Usage Guidelines

Public Marketing Site

Use Phoenix Fire for primary CTAs
Use Sankofa Gold for premium features
Maintain high contrast for readability
Focus on conversion and trust

Portals

Use Studio Dark backgrounds
Phoenix Fire for active states
Clear visual hierarchy for tasks
Consistent navigation patterns

Documentation

Clean, readable typography
Code blocks with proper syntax highlighting
Clear section navigation
Search-first UX

Implementation

All components are in src/components/ui/ using shadcn/ui as the base, customized with Phoenix Nexus colors and styling.

Last Updated: Current Version: 1.0

3.4 KiB Raw Blame History