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, Badge, Statistic } from 'antd';
|
||||
import { Typography, Row, Col, Card, Badge } from 'antd';
|
||||
import {
|
||||
ZapIcon,
|
||||
NetworkIcon,
|
||||
@@ -43,14 +43,6 @@ const scaleOnHover = {
|
||||
}
|
||||
};
|
||||
|
||||
// Mock network nodes data
|
||||
const networkNodes = [
|
||||
{ id: 'node-1', status: 'active', load: 75, region: 'US-East' },
|
||||
{ id: 'node-2', status: 'active', load: 62, region: 'EU-West' },
|
||||
{ id: 'node-3', status: 'active', load: 88, region: 'AP-South' },
|
||||
{ id: 'node-4', status: 'syncing', load: 45, region: 'US-West' },
|
||||
{ id: 'node-5', status: 'active', load: 91, region: 'EU-North' },
|
||||
];
|
||||
|
||||
export default function BZZZShowcase() {
|
||||
return (
|
||||
@@ -104,27 +96,27 @@ export default function BZZZShowcase() {
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-chorus-green/20">
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-chorus-green">15ms</div>
|
||||
<Text className="text-sm text-gray-400">Avg Latency</Text>
|
||||
<div className="text-2xl font-bold text-chorus-green">libp2p</div>
|
||||
<Text className="text-sm text-gray-400">Protocol Foundation</Text>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-chorus-green">99.95%</div>
|
||||
<Text className="text-sm text-gray-400">Uptime</Text>
|
||||
<div className="text-2xl font-bold text-chorus-green">Go Runtime</div>
|
||||
<Text className="text-sm text-gray-400">High Performance</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Text className="text-gray-300">Network Stability</Text>
|
||||
<Badge status="processing" text="Excellent" />
|
||||
<Text className="text-gray-300">Network Architecture</Text>
|
||||
<Badge status="success" text="P2P Mesh" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Text className="text-gray-300">Peer Discovery</Text>
|
||||
<Badge status="success" text="Active" />
|
||||
<Text className="text-gray-300">Discovery Protocol</Text>
|
||||
<Badge status="success" text="mDNS + DHT" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Text className="text-gray-300">Load Balancing</Text>
|
||||
<Badge status="processing" text="Optimized" />
|
||||
<Text className="text-gray-300">Message Routing</Text>
|
||||
<Badge status="processing" text="Gossipsub" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -154,34 +146,41 @@ export default function BZZZShowcase() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{networkNodes.map((node, index) => (
|
||||
<div key={node.id} className="bg-chorus-charcoal/50 rounded-lg p-3 border border-blue-500/20">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className={`w-3 h-3 rounded-full ${
|
||||
node.status === 'active' ? 'bg-green-500' :
|
||||
node.status === 'syncing' ? 'bg-yellow-500' : 'bg-red-500'
|
||||
}`} />
|
||||
<Text className="text-white font-medium">{node.id}</Text>
|
||||
<Badge
|
||||
color={node.status === 'active' ? 'green' : 'orange'}
|
||||
text={node.region}
|
||||
/>
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">{node.load}% load</Text>
|
||||
</div>
|
||||
<Progress
|
||||
percent={node.load}
|
||||
size="small"
|
||||
strokeColor={
|
||||
node.load < 60 ? '#30d158' :
|
||||
node.load < 80 ? '#eab308' : '#ef4444'
|
||||
}
|
||||
trailColor="#2a2a2a"
|
||||
showInfo={false}
|
||||
/>
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-blue-500/20">
|
||||
<div className="flex items-center space-x-3 mb-3">
|
||||
<div className="w-3 h-3 rounded-full bg-green-500" />
|
||||
<Text className="text-white font-medium">Peer Discovery</Text>
|
||||
<Badge color="green" text="mDNS + DHT" />
|
||||
</div>
|
||||
))}
|
||||
<Text className="text-sm text-gray-400">Automatic peer discovery via multicast DNS and distributed hash table routing</Text>
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-blue-500/20">
|
||||
<div className="flex items-center space-x-3 mb-3">
|
||||
<div className="w-3 h-3 rounded-full bg-blue-500" />
|
||||
<Text className="text-white font-medium">Connection Multiplexing</Text>
|
||||
<Badge color="blue" text="yamux" />
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">Multiple streams over single connections for efficient resource utilization</Text>
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-blue-500/20">
|
||||
<div className="flex items-center space-x-3 mb-3">
|
||||
<div className="w-3 h-3 rounded-full bg-purple-500" />
|
||||
<Text className="text-white font-medium">NAT Traversal</Text>
|
||||
<Badge color="purple" text="AutoRelay" />
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">Automatic relay discovery and holepunching for firewall traversal</Text>
|
||||
</div>
|
||||
|
||||
<div className="bg-chorus-charcoal/50 rounded-lg p-4 border border-blue-500/20">
|
||||
<div className="flex items-center space-x-3 mb-3">
|
||||
<div className="w-3 h-3 rounded-full bg-orange-500" />
|
||||
<Text className="text-white font-medium">Transport Security</Text>
|
||||
<Badge color="orange" text="Noise Protocol" />
|
||||
</div>
|
||||
<Text className="text-sm text-gray-400">End-to-end encryption with forward secrecy for all peer communications</Text>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Card>
|
||||
@@ -189,51 +188,43 @@ export default function BZZZShowcase() {
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Network Statistics */}
|
||||
{/* Network Architecture Highlights */}
|
||||
<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">Active Peers</span>}
|
||||
value={127}
|
||||
valueStyle={{ color: '#30d158', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<ServerIcon size={20} className="text-green-500" />}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<ServerIcon size={32} className="text-slate-400 mb-3" />
|
||||
<Title level={4} className="text-white mb-2">libp2p</Title>
|
||||
<Text className="text-gray-400 text-sm">Peer-to-peer networking protocol with automatic discovery</Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6}>
|
||||
<Card className="glass-effect border-0 text-center">
|
||||
<Statistic
|
||||
title={<span className="text-gray-400">Messages/Sec</span>}
|
||||
value={2847}
|
||||
valueStyle={{ color: '#007aff', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<ActivityIcon size={20} className="text-chorus-blue" />}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<ActivityIcon size={32} className="text-slate-400 mb-3" />
|
||||
<Title level={4} className="text-white mb-2">Gossipsub</Title>
|
||||
<Text className="text-gray-400 text-sm">Efficient message propagation across the P2P mesh network</Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6}>
|
||||
<Card className="glass-effect border-0 text-center">
|
||||
<Statistic
|
||||
title={<span className="text-gray-400">Network Health</span>}
|
||||
value={99.8}
|
||||
precision={1}
|
||||
suffix="%"
|
||||
valueStyle={{ color: '#eab308', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<ShieldIcon size={20} className="text-yellow-500" />}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<ShieldIcon size={32} className="text-slate-400 mb-3" />
|
||||
<Title level={4} className="text-white mb-2">Noise Protocol</Title>
|
||||
<Text className="text-gray-400 text-sm">Cryptographic security for all peer communications</Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6}>
|
||||
<Card className="glass-effect border-0 text-center">
|
||||
<Statistic
|
||||
title={<span className="text-gray-400">Bandwidth</span>}
|
||||
value={1.2}
|
||||
precision={1}
|
||||
suffix="GB/s"
|
||||
valueStyle={{ color: '#f97316', fontSize: '2rem', fontWeight: 'bold' }}
|
||||
prefix={<WifiIcon size={20} className="text-orange-500" />}
|
||||
/>
|
||||
<div className="p-4">
|
||||
<WifiIcon size={32} className="text-slate-400 mb-3" />
|
||||
<Title level={4} className="text-white mb-2">DHT Routing</Title>
|
||||
<Text className="text-gray-400 text-sm">Distributed hash table for decentralized agent discovery</Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
Reference in New Issue
Block a user