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
This commit is contained in:
defiQUG
189
docs/DESIGN_SYSTEM.md
Normal file
189
docs/DESIGN_SYSTEM.md
Normal file
@@ -0,0 +1,189 @@
|
||||
# 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
|
||||
|
||||
Reference in New Issue
Block a user