feat(brand-system): Implement comprehensive CHORUS brand system with typography and design tokens
This commit implements a complete brand system overhaul including: TYPOGRAPHY SYSTEM: - Add Exo font family (Thin, Light, Regular, ExtraLight) as primary brand font - Implement SF Pro Display/Text hierarchy for UI components - Create comprehensive Typography component with all brand variants - Update all components to use new typography tokens DESIGN TOKEN SYSTEM: - Create complete design token system in theme/designTokens.ts - Define Carbon Black (#1a1a1a), Walnut Brown (#8B4513), Brushed Aluminum (#A8A8A8) palette - Implement CSS custom properties for consistent theming - Update Ant Design theme integration COMPONENT UPDATES: - Enhance Hero section with Exo Thin typography and improved layout - Update navigation with SF Pro font hierarchy - Redesign Button component with new variants and accessibility - Apply brand colors and typography across all showcase sections - Improve Footer with consistent brand application PERFORMANCE & ACCESSIBILITY: - Self-host Exo fonts for optimal loading performance - Implement proper font-display strategies - Add comprehensive accessibility audit documentation - Include responsive testing verification DOCUMENTATION: - Add brand system demo and implementation guides - Include QA testing reports and accessibility audits - Document design token usage and component patterns 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
anthonyrawlins
@@ -2,7 +2,7 @@
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Typography, Row, Col, Card, Progress, Rate, Badge, Statistic } from 'antd';
|
||||
import { Typography, Row, Col, Card, Badge } from 'antd';
|
||||
import {
|
||||
BrainCircuitIcon,
|
||||
ThumbsUpIcon,
|
||||
@@ -45,21 +45,6 @@ const scaleOnHover = {
|
||||
}
|
||||
};
|
||||
|
||||
// Mock feedback data
|
||||
const feedbackSamples = [
|
||||
{ id: 1, agent: 'AI-Agent-Alpha', context: 'API Documentation Update', rating: 5, feedback: 'Highly relevant and timely', timestamp: '2m ago' },
|
||||
{ id: 2, agent: 'AI-Agent-Beta', context: 'Code Review Context', rating: 4, feedback: 'Good context but could be more specific', timestamp: '5m ago' },
|
||||
{ id: 3, agent: 'Human-Operator', context: 'Performance Metrics', rating: 3, feedback: 'Adequate but needs improvement', timestamp: '12m ago' },
|
||||
{ id: 4, agent: 'AI-Agent-Gamma', context: 'User Feedback Analysis', rating: 5, feedback: 'Excellent contextual relevance', timestamp: '18m ago' },
|
||||
];
|
||||
|
||||
// Mock learning metrics
|
||||
const learningMetrics = [
|
||||
{ metric: 'Context Accuracy', current: 87.5, trend: '+2.3%', color: '#30d158' },
|
||||
{ metric: 'Response Relevance', current: 92.1, trend: '+1.8%', color: '#007aff' },
|
||||
{ metric: 'Agent Satisfaction', current: 4.2, trend: '+0.3', color: '#eab308', max: 5 },
|
||||
{ metric: 'Learning Rate', current: 78.9, trend: '+5.1%', color: '#f97316' },
|
||||
];
|
||||
|
||||
export default function COOEEShowcase() {
|
||||
return (
|
||||
@@ -111,34 +96,37 @@ export default function COOEEShowcase() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{learningMetrics.map((metric, index) => (
|
||||
<div key={index} className="bg-chorus-charcoal/50 rounded-lg p-4 border border-purple-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<Text className="text-white font-medium">{metric.metric}</Text>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Badge
|
||||
color={metric.trend.startsWith('+') ? 'green' : 'red'}
|
||||
text={metric.trend}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<Text className="text-sm text-gray-300">Current Performance</Text>
|
||||
<Text className="text-sm font-semibold" style={{ color: metric.color }}>
|
||||
{metric.current}{metric.max ? `/${metric.max}` : '%'}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Progress
|
||||
percent={metric.max ? (metric.current / metric.max) * 100 : metric.current}
|
||||
strokeColor={metric.color}
|
||||
trailColor="#2a2a2a"
|
||||
showInfo={false}
|
||||
size="small"
|
||||
/>
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-purple-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<Text className="text-white font-medium">Reinforcement Learning Engine</Text>
|
||||
<Badge color="green" text="Q-Learning" />
|
||||
</div>
|
||||
))}
|
||||
<Text className="text-sm text-gray-400">Deep Q-Network implementation for context relevance optimization</Text>
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-purple-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<Text className="text-white font-medium">Feedback Collection</Text>
|
||||
<Badge color="blue" text="Multi-Modal" />
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">Agent feedback via thumbs up/down, ratings, and detailed comments</Text>
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-purple-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<Text className="text-white font-medium">Context Relevance Tuning</Text>
|
||||
<Badge color="purple" text="Adaptive" />
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">Dynamic scoring adjustments based on real-world performance data</Text>
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-purple-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<Text className="text-white font-medium">Performance Analytics</Text>
|
||||
<Badge color="orange" text="Real-time" />
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">Continuous monitoring and metrics collection for system improvement</Text>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Card>
|
||||
@@ -165,33 +153,46 @@ export default function COOEEShowcase() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 max-h-96 overflow-y-auto">
|
||||
{feedbackSamples.map((sample) => (
|
||||
<div key={sample.id} className="bg-chorus-charcoal/50 rounded-lg p-4 border border-green-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Badge
|
||||
color={
|
||||
sample.agent.includes('Alpha') ? 'blue' :
|
||||
sample.agent.includes('Beta') ? 'green' :
|
||||
sample.agent.includes('Gamma') ? 'purple' : 'orange'
|
||||
}
|
||||
text={sample.agent}
|
||||
/>
|
||||
<Text className="text-xs text-gray-500">{sample.timestamp}</Text>
|
||||
</div>
|
||||
<Rate
|
||||
disabled
|
||||
defaultValue={sample.rating}
|
||||
style={{ fontSize: '14px' }}
|
||||
className="text-yellow-500"
|
||||
/>
|
||||
<div className="space-y-4">
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-green-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Badge color="blue" text="Feedback API" />
|
||||
</div>
|
||||
|
||||
<Text className="text-sm text-gray-300 mb-2">{sample.context}</Text>
|
||||
<Text className="text-xs text-gray-400 italic">"{sample.feedback}"</Text>
|
||||
</div>
|
||||
))}
|
||||
<Text className="text-sm text-gray-300 mb-2">RESTful API for collecting structured feedback from agents</Text>
|
||||
<Text className="text-xs text-gray-400">Supports ratings, comments, and contextual relevance scoring</Text>
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-green-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Badge color="green" text="Learning Models" />
|
||||
</div>
|
||||
</div>
|
||||
<Text className="text-sm text-gray-300 mb-2">Machine learning models for context quality prediction</Text>
|
||||
<Text className="text-xs text-gray-400">Continuous training on agent feedback and performance metrics</Text>
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-green-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Badge color="purple" text="A/B Testing" />
|
||||
</div>
|
||||
</div>
|
||||
<Text className="text-sm text-gray-300 mb-2">Automated experimentation framework for optimization</Text>
|
||||
<Text className="text-xs text-gray-400">Statistical significance testing for context improvements</Text>
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-green-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Badge color="orange" text="Real-time Updates" />
|
||||
</div>
|
||||
</div>
|
||||
<Text className="text-sm text-gray-300 mb-2">Live model updates based on feedback streams</Text>
|
||||
<Text className="text-xs text-gray-400">Immediate integration of new learning into context filtering</Text>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Card>
|
||||
@@ -199,49 +200,43 @@ export default function COOEEShowcase() {
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Learning Statistics */}
|
||||
{/* Feedback System Components */}
|
||||
<motion.div variants={fadeInUp} className="mb-16">
|
||||
<Row gutter={[24, 24]}>
|
||||
<Col xs={12} sm={6}>
|
||||
<Card className="glass-effect border-0 text-center">
|
||||
<Statistic
|
||||
title={<span className="text-gray-400">Total Feedback</span>}
|
||||
value={127834}
|
||||
valueStyle={{ color: '#a855f7', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<ThumbsUpIcon size={20} className="text-purple-500" />}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<ThumbsUpIcon size={32} className="text-slate-400 mb-3" />
|
||||
<Title level={4} className="text-white mb-2">RL Training</Title>
|
||||
<Text className="text-gray-400 text-sm">Reinforcement learning from human feedback</Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6}>
|
||||
<Card className="glass-effect border-0 text-center">
|
||||
<Statistic
|
||||
title={<span className="text-gray-400">Learning Cycles</span>}
|
||||
value={5847}
|
||||
valueStyle={{ color: '#30d158', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<RefreshCwIcon size={20} className="text-green-500" />}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<RefreshCwIcon size={32} className="text-slate-400 mb-3" />
|
||||
<Title level={4} className="text-white mb-2">Continuous</Title>
|
||||
<Text className="text-gray-400 text-sm">Real-time learning and model updates</Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6}>
|
||||
<Card className="glass-effect border-0 text-center">
|
||||
<Statistic
|
||||
title={<span className="text-gray-400">Accuracy Gain</span>}
|
||||
value={23.7}
|
||||
precision={1}
|
||||
suffix="%"
|
||||
valueStyle={{ color: '#eab308', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<TrendingUpIcon size={20} className="text-yellow-500" />}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<TrendingUpIcon size={32} className="text-slate-400 mb-3" />
|
||||
<Title level={4} className="text-white mb-2">Analytics</Title>
|
||||
<Text className="text-gray-400 text-sm">Performance tracking and improvement metrics</Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6}>
|
||||
<Card className="glass-effect border-0 text-center">
|
||||
<Statistic
|
||||
title={<span className="text-gray-400">Active Agents</span>}
|
||||
value={47}
|
||||
valueStyle={{ color: '#f97316', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<Users2Icon size={20} className="text-orange-500" />}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<Users2Icon size={32} className="text-slate-400 mb-3" />
|
||||
<Title level={4} className="text-white mb-2">Multi-Agent</Title>
|
||||
<Text className="text-gray-400 text-sm">Collaborative learning across agent networks</Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
Reference in New Issue
Block a user