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, Tag, Timeline, Statistic } from 'antd';
|
||||
import { Typography, Row, Col, Card, Tag, Timeline } from 'antd';
|
||||
import {
|
||||
DatabaseIcon,
|
||||
FilterIcon,
|
||||
@@ -45,20 +45,6 @@ const scaleOnHover = {
|
||||
}
|
||||
};
|
||||
|
||||
// Mock context data
|
||||
const contextSources = [
|
||||
{ name: 'API Documentation', items: 1247, relevance: 92, category: 'technical' },
|
||||
{ name: 'Code Changes', items: 832, relevance: 88, category: 'development' },
|
||||
{ name: 'User Feedback', items: 456, relevance: 85, category: 'user-input' },
|
||||
{ name: 'Performance Logs', items: 2341, relevance: 78, category: 'metrics' },
|
||||
];
|
||||
|
||||
const recentActivity = [
|
||||
{ time: '2m ago', action: 'Context filtered for AI-Agent-Beta', type: 'filter' },
|
||||
{ time: '5m ago', action: 'New deprecation notice indexed', type: 'index' },
|
||||
{ time: '12m ago', action: 'Role permissions updated', type: 'permission' },
|
||||
{ time: '18m ago', action: 'Context relevance score updated', type: 'score' },
|
||||
];
|
||||
|
||||
export default function SLURPShowcase() {
|
||||
return (
|
||||
@@ -110,34 +96,45 @@ export default function SLURPShowcase() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{contextSources.map((source, index) => (
|
||||
<div key={index} className="bg-chorus-charcoal/50 rounded-lg p-4 border border-yellow-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Text className="text-white font-medium">{source.name}</Text>
|
||||
<Tag color={
|
||||
source.category === 'technical' ? 'blue' :
|
||||
source.category === 'development' ? 'green' :
|
||||
source.category === 'user-input' ? 'purple' : 'orange'
|
||||
}>
|
||||
{source.category}
|
||||
</Tag>
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">{source.items} items</Text>
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-yellow-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Text className="text-white font-medium">Hypercore Log Processing</Text>
|
||||
<Tag color="blue">Real-time</Tag>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<Text className="text-sm text-gray-300">Relevance Score</Text>
|
||||
<Text className="text-sm font-semibold text-yellow-500">{source.relevance}%</Text>
|
||||
</div>
|
||||
<Progress
|
||||
percent={source.relevance}
|
||||
strokeColor="#eab308"
|
||||
trailColor="#2a2a2a"
|
||||
showInfo={false}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<Text className="text-sm text-gray-400">Continuous ingestion and processing of append-only log entries with tamper-evident verification</Text>
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-yellow-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Text className="text-white font-medium">Semantic Analysis</Text>
|
||||
<Tag color="green">AI-Powered</Tag>
|
||||
</div>
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">Natural language processing for content understanding and automatic categorization</Text>
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-yellow-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Text className="text-white font-medium">Role-Based Filtering</Text>
|
||||
<Tag color="purple">Dynamic</Tag>
|
||||
</div>
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">Context filtering based on agent roles, permissions, and access control policies</Text>
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-yellow-500/20">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Text className="text-white font-medium">SQL Interface</Text>
|
||||
<Tag color="orange">Standards-Based</Tag>
|
||||
</div>
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">Standard SQL queries for flexible context retrieval and integration</Text>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Card>
|
||||
@@ -193,20 +190,47 @@ export default function SLURPShowcase() {
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-purple-500/20">
|
||||
<Title level={5} className="text-white mb-3">Recent Activity</Title>
|
||||
<Title level={5} className="text-white mb-3">Technical Architecture</Title>
|
||||
<Timeline
|
||||
size="small"
|
||||
items={recentActivity.map((activity, index) => ({
|
||||
color: activity.type === 'filter' ? 'green' :
|
||||
activity.type === 'index' ? 'blue' :
|
||||
activity.type === 'permission' ? 'orange' : 'purple',
|
||||
children: (
|
||||
<div>
|
||||
<Text className="text-gray-300 text-sm">{activity.action}</Text>
|
||||
<div className="text-xs text-gray-500">{activity.time}</div>
|
||||
</div>
|
||||
)
|
||||
}))}
|
||||
items={[
|
||||
{
|
||||
color: 'green',
|
||||
children: (
|
||||
<div>
|
||||
<Text className="text-gray-300 text-sm">Hypercore Protocol Integration</Text>
|
||||
<div className="text-xs text-gray-500">Tamper-evident append-only logs</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
color: 'blue',
|
||||
children: (
|
||||
<div>
|
||||
<Text className="text-gray-300 text-sm">HCFS Filesystem Integration</Text>
|
||||
<div className="text-xs text-gray-500">Transparent context access via FUSE</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
color: 'orange',
|
||||
children: (
|
||||
<div>
|
||||
<Text className="text-gray-300 text-sm">SQL Query Engine</Text>
|
||||
<div className="text-xs text-gray-500">Standard SQL interface for context retrieval</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
color: 'purple',
|
||||
children: (
|
||||
<div>
|
||||
<Text className="text-gray-300 text-sm">Role-Based Access Control</Text>
|
||||
<div className="text-xs text-gray-500">Agent permissions and content filtering</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -216,49 +240,43 @@ export default function SLURPShowcase() {
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Context Statistics */}
|
||||
{/* Context Architecture 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">Context Items</span>}
|
||||
value={48750}
|
||||
valueStyle={{ color: '#eab308', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<FileTextIcon size={20} className="text-yellow-500" />}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<FileTextIcon size={32} className="text-slate-400 mb-3" />
|
||||
<Title level={4} className="text-white mb-2">Hypercore</Title>
|
||||
<Text className="text-gray-400 text-sm">Append-only log for tamper-evident audit trails</Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6}>
|
||||
<Card className="glass-effect border-0 text-center">
|
||||
<Statistic
|
||||
title={<span className="text-gray-400">Queries/Hour</span>}
|
||||
value={5247}
|
||||
valueStyle={{ color: '#007aff', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<SearchIcon size={20} className="text-chorus-blue" />}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<SearchIcon size={32} className="text-slate-400 mb-3" />
|
||||
<Title level={4} className="text-white mb-2">SQL Interface</Title>
|
||||
<Text className="text-gray-400 text-sm">Standard SQL queries for flexible context retrieval</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 Roles</span>}
|
||||
value={23}
|
||||
valueStyle={{ color: '#30d158', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<UsersIcon size={20} className="text-green-500" />}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<UsersIcon size={32} className="text-slate-400 mb-3" />
|
||||
<Title level={4} className="text-white mb-2">Role-Based</Title>
|
||||
<Text className="text-gray-400 text-sm">Context filtering based on agent roles and permissions</Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6}>
|
||||
<Card className="glass-effect border-0 text-center">
|
||||
<Statistic
|
||||
title={<span className="text-gray-400">Avg Relevance</span>}
|
||||
value={87.3}
|
||||
precision={1}
|
||||
suffix="%"
|
||||
valueStyle={{ color: '#f97316', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<TrendingUpIcon size={20} className="text-orange-500" />}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<TrendingUpIcon size={32} className="text-slate-400 mb-3" />
|
||||
<Title level={4} className="text-white mb-2">Real-time</Title>
|
||||
<Text className="text-gray-400 text-sm">Live context updates as Hypercore log grows</Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
Reference in New Issue
Block a user