Compare commits
23 Commits
master
...
feature/re
| Author | SHA1 | Date | |
|---|---|---|---|
|
2e1bb2e55e | ||
|
|
074a82bfb6 | ||
|
|
284942fb6c | ||
|
|
9e1e1ccd6d | ||
|
|
1ec3b459bc | ||
|
|
4ed167e734 | ||
|
|
8162496c11 | ||
|
|
4aef079def | ||
|
|
843f6bc252 | ||
|
|
68cfaf7c63 | ||
|
|
c8fb816775 | ||
|
|
630d1c26ad | ||
|
|
9cf92f9fcf | ||
|
|
e9d6e8465a | ||
|
|
a344934db4 | ||
|
|
25107c2c8a | ||
|
|
9ca343bd01 | ||
|
|
dd63993570 | ||
|
|
d83dbdce46 | ||
|
|
e73df0b20d | ||
|
|
b25886a88c | ||
|
|
ba0e8c84ae | ||
|
|
4511f4c801 |
10
.gitignore
vendored
10
.gitignore
vendored
@@ -45,4 +45,12 @@ logs/
|
|||||||
|
|
||||||
# Temporary files
|
# Temporary files
|
||||||
tmp/
|
tmp/
|
||||||
temp/
|
temp/
|
||||||
|
|
||||||
|
# Next.js build artifacts
|
||||||
|
.next/
|
||||||
|
out/
|
||||||
|
|
||||||
|
# Package archives
|
||||||
|
*.tar.gz
|
||||||
|
*.zip
|
||||||
1
.obsidian/app.json
vendored
Normal file
1
.obsidian/app.json
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{}
|
||||||
0
.obsidian/appearance.json
vendored
Normal file
0
.obsidian/appearance.json
vendored
Normal file
33
.obsidian/core-plugins.json
vendored
Normal file
33
.obsidian/core-plugins.json
vendored
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"file-explorer": true,
|
||||||
|
"global-search": true,
|
||||||
|
"switcher": true,
|
||||||
|
"graph": true,
|
||||||
|
"backlink": true,
|
||||||
|
"canvas": true,
|
||||||
|
"outgoing-link": true,
|
||||||
|
"tag-pane": true,
|
||||||
|
"properties": false,
|
||||||
|
"page-preview": true,
|
||||||
|
"daily-notes": true,
|
||||||
|
"templates": true,
|
||||||
|
"note-composer": true,
|
||||||
|
"command-palette": true,
|
||||||
|
"slash-command": false,
|
||||||
|
"editor-status": true,
|
||||||
|
"bookmarks": true,
|
||||||
|
"markdown-importer": false,
|
||||||
|
"zk-prefixer": false,
|
||||||
|
"random-note": false,
|
||||||
|
"outline": true,
|
||||||
|
"word-count": true,
|
||||||
|
"slides": false,
|
||||||
|
"audio-recorder": false,
|
||||||
|
"workspaces": false,
|
||||||
|
"file-recovery": true,
|
||||||
|
"publish": false,
|
||||||
|
"sync": true,
|
||||||
|
"webviewer": false,
|
||||||
|
"footnotes": false,
|
||||||
|
"bases": true
|
||||||
|
}
|
||||||
210
.obsidian/workspace.json
vendored
Normal file
210
.obsidian/workspace.json
vendored
Normal file
@@ -0,0 +1,210 @@
|
|||||||
|
{
|
||||||
|
"main": {
|
||||||
|
"id": "49f18c78518039c8",
|
||||||
|
"type": "split",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"id": "fea88e09bce7fef2",
|
||||||
|
"type": "tabs",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"id": "472092e9ada7a8e6",
|
||||||
|
"type": "leaf",
|
||||||
|
"state": {
|
||||||
|
"type": "markdown",
|
||||||
|
"state": {
|
||||||
|
"file": "brand-assets/CHORUS-BRAND-GUIDE.md",
|
||||||
|
"mode": "source",
|
||||||
|
"source": false
|
||||||
|
},
|
||||||
|
"icon": "lucide-file",
|
||||||
|
"title": "CHORUS-BRAND-GUIDE"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"direction": "vertical"
|
||||||
|
},
|
||||||
|
"left": {
|
||||||
|
"id": "b510957437397946",
|
||||||
|
"type": "split",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"id": "157d722a91bc8e15",
|
||||||
|
"type": "tabs",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"id": "9001986372506f85",
|
||||||
|
"type": "leaf",
|
||||||
|
"state": {
|
||||||
|
"type": "file-explorer",
|
||||||
|
"state": {
|
||||||
|
"sortOrder": "alphabetical",
|
||||||
|
"autoReveal": false
|
||||||
|
},
|
||||||
|
"icon": "lucide-folder-closed",
|
||||||
|
"title": "Files"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1d6f26c2d2402f8e",
|
||||||
|
"type": "leaf",
|
||||||
|
"state": {
|
||||||
|
"type": "search",
|
||||||
|
"state": {
|
||||||
|
"query": "",
|
||||||
|
"matchingCase": false,
|
||||||
|
"explainSearch": false,
|
||||||
|
"collapseAll": false,
|
||||||
|
"extraContext": false,
|
||||||
|
"sortOrder": "alphabetical"
|
||||||
|
},
|
||||||
|
"icon": "lucide-search",
|
||||||
|
"title": "Search"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "5b830db8721ad2ed",
|
||||||
|
"type": "leaf",
|
||||||
|
"state": {
|
||||||
|
"type": "bookmarks",
|
||||||
|
"state": {},
|
||||||
|
"icon": "lucide-bookmark",
|
||||||
|
"title": "Bookmarks"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"direction": "horizontal",
|
||||||
|
"width": 252.5
|
||||||
|
},
|
||||||
|
"right": {
|
||||||
|
"id": "a1ab5e22b95db49c",
|
||||||
|
"type": "split",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"id": "245785f7c0bf960b",
|
||||||
|
"type": "tabs",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"id": "31a2e09288336a61",
|
||||||
|
"type": "leaf",
|
||||||
|
"state": {
|
||||||
|
"type": "backlink",
|
||||||
|
"state": {
|
||||||
|
"file": "modules/whoosh/backend/DOCUMENTATION_SUMMARY.md",
|
||||||
|
"collapseAll": false,
|
||||||
|
"extraContext": false,
|
||||||
|
"sortOrder": "alphabetical",
|
||||||
|
"showSearch": true,
|
||||||
|
"searchQuery": "",
|
||||||
|
"backlinkCollapsed": false,
|
||||||
|
"unlinkedCollapsed": true
|
||||||
|
},
|
||||||
|
"icon": "links-coming-in",
|
||||||
|
"title": "Backlinks for DOCUMENTATION_SUMMARY"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "57211ee20d0c9d61",
|
||||||
|
"type": "leaf",
|
||||||
|
"state": {
|
||||||
|
"type": "outgoing-link",
|
||||||
|
"state": {
|
||||||
|
"file": "modules/whoosh/backend/DOCUMENTATION_SUMMARY.md",
|
||||||
|
"linksCollapsed": false,
|
||||||
|
"unlinkedCollapsed": true
|
||||||
|
},
|
||||||
|
"icon": "links-going-out",
|
||||||
|
"title": "Outgoing links from DOCUMENTATION_SUMMARY"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "071c40df45653454",
|
||||||
|
"type": "leaf",
|
||||||
|
"state": {
|
||||||
|
"type": "tag",
|
||||||
|
"state": {
|
||||||
|
"sortOrder": "frequency",
|
||||||
|
"useHierarchy": true,
|
||||||
|
"showSearch": false,
|
||||||
|
"searchQuery": ""
|
||||||
|
},
|
||||||
|
"icon": "lucide-tags",
|
||||||
|
"title": "Tags"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "1a55201803c42e38",
|
||||||
|
"type": "leaf",
|
||||||
|
"state": {
|
||||||
|
"type": "outline",
|
||||||
|
"state": {
|
||||||
|
"file": "modules/whoosh/backend/DOCUMENTATION_SUMMARY.md",
|
||||||
|
"followCursor": false,
|
||||||
|
"showSearch": false,
|
||||||
|
"searchQuery": ""
|
||||||
|
},
|
||||||
|
"icon": "lucide-list",
|
||||||
|
"title": "Outline of DOCUMENTATION_SUMMARY"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"direction": "horizontal",
|
||||||
|
"width": 300,
|
||||||
|
"collapsed": true
|
||||||
|
},
|
||||||
|
"left-ribbon": {
|
||||||
|
"hiddenItems": {
|
||||||
|
"switcher:Open quick switcher": false,
|
||||||
|
"graph:Open graph view": false,
|
||||||
|
"canvas:Create new canvas": false,
|
||||||
|
"daily-notes:Open today's daily note": false,
|
||||||
|
"templates:Insert template": false,
|
||||||
|
"command-palette:Open command palette": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"active": "472092e9ada7a8e6",
|
||||||
|
"lastOpenFiles": [
|
||||||
|
"brand-assets/logos/moebius-ring.blend",
|
||||||
|
"brand-assets/logos/moebius-ring.glb",
|
||||||
|
"brand-assets/logos/moebius-ring.blend@",
|
||||||
|
"brand-assets/logos/moebius-ring.blend1",
|
||||||
|
"brand-assets/logos/chorus-logo-concept.md",
|
||||||
|
"brand-assets/guidelines/brand-usage-guidelines.md",
|
||||||
|
"brand-assets/colors/chorus-color-system.md",
|
||||||
|
"modules/slurp/hcfs-python/hcfs/core/__pycache__/filesystem.cpython-310.pyc",
|
||||||
|
"modules/slurp/hcfs-python/hcfs/core/__pycache__/context_db.cpython-310.pyc",
|
||||||
|
"modules/slurp/hcfs-python/hcfs/core/__pycache__/__init__.cpython-310.pyc",
|
||||||
|
"modules/slurp/hcfs-python/hcfs/core/__pycache__",
|
||||||
|
"modules/slurp/hcfs-python/hcfs/__pycache__/__init__.cpython-310.pyc",
|
||||||
|
"modules/slurp/hcfs-python/hcfs/__pycache__",
|
||||||
|
"modules/whoosh/EVENT_CONFIGURATION_SYSTEM.md",
|
||||||
|
"modules/whoosh/EVENT_CONFIGURATION_SYSTEM.md.tmp.1675830.1754294063541",
|
||||||
|
"homepage-content.md",
|
||||||
|
"modules/posthuman/docs/operations.md",
|
||||||
|
"modules/posthuman/docs/development.md",
|
||||||
|
"modules/posthuman/docs/api.md",
|
||||||
|
"modules/posthuman/docs/deployment.md",
|
||||||
|
"modules/posthuman/docs/architecture.md",
|
||||||
|
"modules/posthuman/conductor-kernel/PERFORMANCE_OPTIMIZATION.md",
|
||||||
|
"modules/posthuman/PROJECT_PLAN.md",
|
||||||
|
"modules/posthuman/README.md",
|
||||||
|
"modules/hmmm/PROJECT_PLAN.md",
|
||||||
|
"modules/whoosh/backend/DEPLOYMENT_FIXES.md",
|
||||||
|
"modules/whoosh/backend/DOCUMENTATION_SUMMARY.md",
|
||||||
|
"modules/whoosh/docs/project-complete.md",
|
||||||
|
"modules/whoosh/docs/environment-requirements.md",
|
||||||
|
"modules/whoosh/docs/implementation-complete.md",
|
||||||
|
"modules/whoosh/docs/LOCAL_DEVELOPMENT.md",
|
||||||
|
"modules/whoosh/docs/phase3-completion-summary.md",
|
||||||
|
"modules/whoosh/docs/phase4-completion-summary.md",
|
||||||
|
"modules/whoosh/docs/phase5-completion-summary.md",
|
||||||
|
"modules/whoosh/frontend/TESTING.md",
|
||||||
|
"modules/whoosh/results/rosewood_qa_report_1751891435.md"
|
||||||
|
]
|
||||||
|
}
|
||||||
421
DESIGN.md
421
DESIGN.md
@@ -1,421 +0,0 @@
|
|||||||
## **Revised Implementation Guide: CHORUS Services with Ant Design**
|
|
||||||
|
|
||||||
### **Why Ant Design Works Well for CHORUS**
|
|
||||||
|
|
||||||
Based on my research, Ant Design is actually perfect for your use case:
|
|
||||||
- **Enterprise-Grade Components**: Built specifically for complex, data-driven applications[1][2]
|
|
||||||
- **Advanced Theming**: CSS-in-JS with dynamic theme capabilities[3][4]
|
|
||||||
- **Performance Optimized**: When properly configured, can achieve 80% bundle size reduction[5][6]
|
|
||||||
- **React Integration**: Seamless integration with Framer Motion for animations[7]
|
|
||||||
|
|
||||||
## **Updated Technology Stack**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// Core Dependencies
|
|
||||||
- Next.js 13+ (App Router)
|
|
||||||
- Ant Design 5.25+ (latest with CSS variables support)
|
|
||||||
- Framer Motion (for parallax and animations)
|
|
||||||
- @ant-design/cssinjs (for custom theming)
|
|
||||||
- antd-style (for additional CSS-in-JS capabilities)
|
|
||||||
```
|
|
||||||
|
|
||||||
## **Bundle Optimization Strategy**
|
|
||||||
|
|
||||||
First, let's implement tree-shaking to avoid the performance issues:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// ❌ Avoid: Full library import
|
|
||||||
import { Button, Card, Layout } from 'antd';
|
|
||||||
|
|
||||||
// ✅ Optimized: Component-level imports
|
|
||||||
import Button from 'antd/es/button';
|
|
||||||
import Card from 'antd/es/card';
|
|
||||||
import Layout from 'antd/es/layout';
|
|
||||||
|
|
||||||
// Or create a centralized import file
|
|
||||||
// components/antd/index.js
|
|
||||||
export { default as Button } from 'antd/es/button';
|
|
||||||
export { default as Card } from 'antd/es/card';
|
|
||||||
export { default as Layout } from 'antd/es/layout';
|
|
||||||
```
|
|
||||||
|
|
||||||
## **Custom Theme Configuration**
|
|
||||||
|
|
||||||
Here's how to implement your technology-focused aesthetic with Ant Design theming:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// theme/chorousTheme.js
|
|
||||||
import { theme } from 'antd';
|
|
||||||
|
|
||||||
export const chorusTheme = {
|
|
||||||
algorithm: theme.darkAlgorithm, // Enable dark mode by default
|
|
||||||
token: {
|
|
||||||
// Color System (replacing our previous color palette)
|
|
||||||
colorPrimary: '#007aff', // Electric blue
|
|
||||||
colorSuccess: '#30d158', // Emerald green
|
|
||||||
colorWarning: '#ff9f0a', // Amber orange
|
|
||||||
colorError: '#ff453a', // System red
|
|
||||||
colorInfo: '#007aff', // Electric blue
|
|
||||||
|
|
||||||
// Background Colors
|
|
||||||
colorBgContainer: '#1a1a1a', // Deep charcoal
|
|
||||||
colorBgElevated: '#2d2d30', // Cool gray
|
|
||||||
colorBgLayout: '#000000', // Pure black
|
|
||||||
|
|
||||||
// Typography
|
|
||||||
fontFamily: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif`,
|
|
||||||
fontSize: 16,
|
|
||||||
fontSizeHeading1: 84, // Large headlines
|
|
||||||
fontSizeHeading2: 48, // Section headers
|
|
||||||
fontSizeHeading3: 36, // Subsection headers
|
|
||||||
|
|
||||||
// Spacing & Layout
|
|
||||||
borderRadius: 8, // Consistent 8px radius
|
|
||||||
wireframe: false, // Enable modern styling
|
|
||||||
|
|
||||||
// Performance & Motion
|
|
||||||
motionDurationSlow: '0.3s', // Matching Apple's timing
|
|
||||||
motionDurationMid: '0.2s',
|
|
||||||
motionDurationFast: '0.1s',
|
|
||||||
},
|
|
||||||
|
|
||||||
components: {
|
|
||||||
// Custom Button Styling
|
|
||||||
Button: {
|
|
||||||
primaryShadow: '0 12px 24px rgba(0, 122, 255, 0.3)',
|
|
||||||
controlHeight: 48, // Larger touch targets
|
|
||||||
fontWeight: 600,
|
|
||||||
},
|
|
||||||
|
|
||||||
// Custom Card Styling
|
|
||||||
Card: {
|
|
||||||
borderRadiusLG: 12, // Slightly larger for cards
|
|
||||||
paddingLG: 32,
|
|
||||||
},
|
|
||||||
|
|
||||||
// Custom Layout
|
|
||||||
Layout: {
|
|
||||||
headerBg: 'rgba(26, 26, 26, 0.8)', // Semi-transparent header
|
|
||||||
headerHeight: 72,
|
|
||||||
},
|
|
||||||
|
|
||||||
// Typography Components
|
|
||||||
Typography: {
|
|
||||||
titleMarginTop: 0,
|
|
||||||
titleMarginBottom: 24,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
## **Component Architecture**
|
|
||||||
|
|
||||||
Here's how to structure your components with Ant Design:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// components/ui/PerformanceCard.jsx
|
|
||||||
import { Card, Typography, Space, Tag } from 'antd';
|
|
||||||
import { motion } from 'framer-motion';
|
|
||||||
|
|
||||||
const { Title, Text } = Typography;
|
|
||||||
|
|
||||||
export const PerformanceCard = ({ title, description, metrics, delay = 0 }) => {
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 40 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.6, delay }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
>
|
|
||||||
<Card
|
|
||||||
hoverable
|
|
||||||
className="performance-card"
|
|
||||||
styles={{
|
|
||||||
body: { padding: '32px' }
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Space direction="vertical" size="large" style={{ width: '100%' }}>
|
|
||||||
<Title level={3} style={{ margin: 0, color: '#f2f2f7' }}>
|
|
||||||
{title}
|
|
||||||
</Title>
|
|
||||||
|
|
||||||
<Text style={{ fontSize: '16px', lineHeight: '1.6', color: '#a1a1a6' }}>
|
|
||||||
{description}
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<Space wrap>
|
|
||||||
{metrics.map((metric, index) => (
|
|
||||||
<Tag
|
|
||||||
key={index}
|
|
||||||
color="processing"
|
|
||||||
style={{
|
|
||||||
padding: '8px 16px',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: 600,
|
|
||||||
border: 'none',
|
|
||||||
background: 'rgba(0, 122, 255, 0.1)',
|
|
||||||
color: '#007aff'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{metric}
|
|
||||||
</Tag>
|
|
||||||
))}
|
|
||||||
</Space>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
## **Framer Motion Integration**
|
|
||||||
|
|
||||||
Ant Design components work seamlessly with Framer Motion:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// components/sections/HeroSection.jsx
|
|
||||||
import { Layout, Typography, Button, Space } from 'antd';
|
|
||||||
import { motion } from 'framer-motion';
|
|
||||||
|
|
||||||
const { Header } = Layout;
|
|
||||||
const { Title, Text } = Typography;
|
|
||||||
|
|
||||||
export const HeroSection = () => {
|
|
||||||
return (
|
|
||||||
<Header
|
|
||||||
style={{
|
|
||||||
height: '100vh',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
background: 'linear-gradient(135deg, #000000 0%, #1a1a1a 100%)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
transition={{ duration: 1 }}
|
|
||||||
style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 24px' }}
|
|
||||||
>
|
|
||||||
<Space direction="vertical" size="large" align="center">
|
|
||||||
<motion.div
|
|
||||||
initial={{ y: 40, opacity: 0 }}
|
|
||||||
animate={{ y: 0, opacity: 1 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.2 }}
|
|
||||||
>
|
|
||||||
<Title
|
|
||||||
level={1}
|
|
||||||
style={{
|
|
||||||
fontSize: '84px',
|
|
||||||
fontWeight: 700,
|
|
||||||
textAlign: 'center',
|
|
||||||
margin: 0,
|
|
||||||
background: 'linear-gradient(135deg, #f2f2f7 0%, #007aff 100%)',
|
|
||||||
WebkitBackgroundClip: 'text',
|
|
||||||
WebkitTextFillColor: 'transparent'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
CHORUS Services
|
|
||||||
</Title>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ y: 40, opacity: 0 }}
|
|
||||||
animate={{ y: 0, opacity: 1 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.4 }}
|
|
||||||
>
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontSize: '36px',
|
|
||||||
textAlign: 'center',
|
|
||||||
color: '#a1a1a6'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Distributed AI Orchestration Without the Hallucinations
|
|
||||||
</Text>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ y: 40, opacity: 0 }}
|
|
||||||
animate={{ y: 0, opacity: 1 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.6 }}
|
|
||||||
>
|
|
||||||
<Space size="large">
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
size="large"
|
|
||||||
style={{ height: '56px', padding: '0 32px', fontSize: '16px' }}
|
|
||||||
>
|
|
||||||
Explore the Platform
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="large"
|
|
||||||
style={{ height: '56px', padding: '0 32px', fontSize: '16px' }}
|
|
||||||
>
|
|
||||||
See Technical Demos
|
|
||||||
</Button>
|
|
||||||
</Space>
|
|
||||||
</motion.div>
|
|
||||||
</Space>
|
|
||||||
</motion.div>
|
|
||||||
</Header>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
## **Parallax Implementation with Ant Design**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// components/sections/ParallaxSection.jsx
|
|
||||||
import { Layout, Row, Col, Card } from 'antd';
|
|
||||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
|
||||||
import { useRef } from 'react';
|
|
||||||
|
|
||||||
const { Content } = Layout;
|
|
||||||
|
|
||||||
export const ParallaxSection = ({ children }) => {
|
|
||||||
const ref = useRef(null);
|
|
||||||
const { scrollYProgress } = useScroll({
|
|
||||||
target: ref,
|
|
||||||
offset: ["start end", "end start"]
|
|
||||||
});
|
|
||||||
|
|
||||||
const y1 = useTransform(scrollYProgress, [0, 1], [0, -200]);
|
|
||||||
const y2 = useTransform(scrollYProgress, [0, 1], [0, 200]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Layout ref={ref} style={{ minHeight: '100vh', position: 'relative' }}>
|
|
||||||
{/* Background Layer */}
|
|
||||||
<motion.div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
background: 'radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000000 100%)',
|
|
||||||
y: y1
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Content Layer */}
|
|
||||||
<Content style={{ position: 'relative', zIndex: 1, padding: '120px 24px' }}>
|
|
||||||
<motion.div style={{ y: y2 }}>
|
|
||||||
{children}
|
|
||||||
</motion.div>
|
|
||||||
</Content>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
## **App Configuration**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// app/layout.jsx
|
|
||||||
'use client';
|
|
||||||
import { ConfigProvider } from 'antd';
|
|
||||||
import { chorusTheme } from '../theme/chorusTheme';
|
|
||||||
import 'antd/dist/reset.css'; // Use reset instead of full CSS
|
|
||||||
|
|
||||||
export default function RootLayout({ children }) {
|
|
||||||
return (
|
|
||||||
<html lang="en">
|
|
||||||
<body>
|
|
||||||
<ConfigProvider theme={chorusTheme}>
|
|
||||||
{children}
|
|
||||||
</ConfigProvider>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## **Performance Optimizations**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// next.config.js
|
|
||||||
module.exports = {
|
|
||||||
// Enable tree shaking for Ant Design
|
|
||||||
transpilePackages: ['antd'],
|
|
||||||
|
|
||||||
// Optimize bundle splitting
|
|
||||||
webpack: (config) => {
|
|
||||||
config.optimization.splitChunks.cacheGroups.antd = {
|
|
||||||
name: 'antd',
|
|
||||||
test: /[\\/]node_modules[\\/]antd[\\/]/,
|
|
||||||
chunks: 'all',
|
|
||||||
priority: 10,
|
|
||||||
};
|
|
||||||
|
|
||||||
return config;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
## **Key Advantages of This Approach**
|
|
||||||
|
|
||||||
1. **Enterprise-Ready**: Ant Design's components are built for complex applications[8]
|
|
||||||
2. **Consistent Design Language**: Built-in design system ensures consistency[1]
|
|
||||||
3. **Performance**: Proper tree-shaking reduces bundle size by up to 80%[6]
|
|
||||||
4. **Accessibility**: Ant Design has excellent built-in accessibility features[2]
|
|
||||||
5. **Theming Power**: CSS-in-JS enables dynamic theme switching[4]
|
|
||||||
6. **Animation Integration**: Works seamlessly with Framer Motion[7]
|
|
||||||
|
|
||||||
This approach gives you all the sophisticated theming and component capabilities of Ant Design while maintaining the Apple-inspired, technology-focused aesthetic we designed. The bundle optimization ensures performance remains excellent, and the CSS-in-JS theming provides the flexibility to create your unique visual identity.
|
|
||||||
|
|
||||||
Sources
|
|
||||||
[1] Ant Design - The world's second most popular React UI framework https://ant.design
|
|
||||||
[2] Ant Design 101 – Introduction to a Design System for Enterprises https://www.uxpin.com/studio/blog/ant-design-introduction/
|
|
||||||
[3] ant design app development-en https://www.appleute.de/en/app-entwickler-bibliothek/app-development-with-ant-design/
|
|
||||||
[4] Ant Design System Dark Mode and Other Theme Customization https://betterprogramming.pub/ant-design-system-dark-mode-and-other-theme-customization-fa4ff14359a4
|
|
||||||
[5] Reduce Ant Design Bundle Size Multiple Times - Octa Labs Insights https://blog.octalabs.com/reduce-ant-design-bundle-size-multiple-times-simple-strategies-and-steps-for-smaller-bundles-66d5b7b898d3
|
|
||||||
[6] Ant Design Bundle Size Optimization: The Tree Shaking Approach ... https://dev.to/anaselbahrawy/ant-design-bundle-size-optimization-the-tree-shaking-approach-every-react-developer-should-know-2l5a
|
|
||||||
[7] How to use framer-motion with ant design - DEV Community https://dev.to/a4addel/how-to-use-framer-motion-with-ant-design-57j5
|
|
||||||
[8] 2025's Best CSS Frameworks for React: Speed, Flexibility & UI Power https://www.linkedin.com/pulse/2025s-best-css-frameworks-react-speed-flexibility-ui-power-srikanth-r-s2pjc
|
|
||||||
[9] Tailwind CSS vs Ant Design for React Component Styling - MoldStud https://moldstud.com/articles/p-comparing-tailwind-css-and-ant-design-for-react-component-styling-which-framework-wins
|
|
||||||
[10] Changelog - Ant Design https://ant.design/changelog/
|
|
||||||
[11] Tailwind CSS vs. Ant Design: Choosing the Right UI Framework for ... https://www.linkedin.com/pulse/tailwind-css-vs-ant-design-choosing-right-ui-your-project-lalwani-ckibf
|
|
||||||
[12] Customize Theme - Ant Design https://ant.design/docs/react/customize-theme/
|
|
||||||
[13] Updates - Ant Design System for Figma https://www.antforfigma.com/updates
|
|
||||||
[14] Tailwind CSS+UI or Ant Design for an enterprise CMS built ... - Reddit https://www.reddit.com/r/webdev/comments/1af9kdx/tailwind_cssui_or_ant_design_for_an_enterprise/
|
|
||||||
[15] Introduction to Customization - Ant Design System for Figma https://www.antforfigma.com/docs/customization-intro
|
|
||||||
[16] Ant Design Select: Features, Benefits & Best Practices https://www.creolestudios.com/ant-design-select-guide/
|
|
||||||
[17] Tailwind CSS vs Ant Design https://www.csshunter.com/tailwind-css-vs-ant-design/
|
|
||||||
[18] Ant Design System for Figma - UI Kit https://www.antforfigma.com
|
|
||||||
[19] Tailwind CSS vs Ant Design Comparison for React Styling | MoldStud https://moldstud.com/articles/p-tailwind-css-vs-ant-design-a-comprehensive-comparison-for-react-component-styling
|
|
||||||
[20] CSS Frameworks 2024: Tailwind vs. Others - Tailkits https://tailkits.com/blog/popular-css-frameworks/
|
|
||||||
[21] Customize theme with ConfigProvider - Ant Design Vue https://www.antdv.com/docs/vue/customize-theme
|
|
||||||
[22] Best 19 React UI Component Libraries in 2025 - Prismic https://prismic.io/blog/react-component-libraries
|
|
||||||
[23] Top 5 CSS Frameworks in 2024: Tailwind, Material-UI, Ant Design ... https://www.codingwallah.org/blog/2024-top-css-frameworks-tailwind-material-ui-ant-design-shadcn-chakra-ui
|
|
||||||
[24] Ant Design System Overview: Versions, Basics & Resources - Motiff https://motiff.com/design-system-wiki/design-systems-overview/ant-design
|
|
||||||
[25] The 10 Best Alternatives to Ant Design in 2025 - Subframe https://www.subframe.com/tips/ant-design-alternatives
|
|
||||||
[26] antd vs Tailwind CSS - compare differences and reviews? | LibHunt https://www.libhunt.com/compare-ant-design-vs-tailwindcss
|
|
||||||
[27] ant-design/cssinjs - GitHub https://github.com/ant-design/cssinjs
|
|
||||||
[28] How to use Ant Design Icons and customize them in ReactJS app https://www.youtube.com/watch?v=faUYaR4Nb1E
|
|
||||||
[29] React Bootstrap vs Ant Design: Which One is Better in 2025? https://www.subframe.com/tips/react-bootstrap-vs-ant-design
|
|
||||||
[30] How to customize Ant.design styles - Stack Overflow https://stackoverflow.com/questions/48620712/how-to-customize-ant-design-styles
|
|
||||||
[31] Reduce Ant Design Bundle Size Multiple Times - LinkedIn https://www.linkedin.com/posts/octa-labs-official_reduce-ant-design-bundle-size-multiple-times-activity-7192040213894905858-emnS
|
|
||||||
[32] How to update style element in Ant Design React component using ... https://stackoverflow.com/questions/71974731/how-to-update-style-element-in-ant-design-react-component-using-javascript
|
|
||||||
[33] Bundle size optimization #22698 - ant-design/ant-design - GitHub https://github.com/ant-design/ant-design/issues/22698
|
|
||||||
[34] CSS in v6 - Ant Design https://ant.design/docs/blog/css-tricks/
|
|
||||||
[35] Ant Design - The world's second most popular React UI framework https://ant-design.antgroup.com
|
|
||||||
[36] Does Ant Design Library size effect website performance? https://stackoverflow.com/questions/73658638/does-ant-design-library-size-effect-website-performance
|
|
||||||
[37] ant-design/antd-style: css-in-js library with antd v5 token system https://github.com/ant-design/antd-style
|
|
||||||
[38] Icon - Ant Design https://ant.design/components/icon/
|
|
||||||
[39] Optimizing Performance in React Apps Using Ant Design - Till it's done https://tillitsdone.com/blogs/react-performance-with-ant-design/
|
|
||||||
[40] Quick Start to CSS in JS - Ant Design Style https://ant-design.github.io/antd-style/guide/css-in-js-intro/
|
|
||||||
[41] Ant Design vs Shadcn: Which One is Better in 2025? - Subframe https://www.subframe.com/tips/ant-design-vs-shadcn
|
|
||||||
[42] Ant Design Theme Customization in React JS - YouTube https://www.youtube.com/watch?v=tgD-csfLNUs
|
|
||||||
[43] Build Smooth Scrolling Parallax Effects with React & Framer Motion https://www.youtube.com/watch?v=E5NK61vO_sg
|
|
||||||
[44] Are you going to continue using css-in-js? It negatively affects the ... https://github.com/ant-design/ant-design/discussions/43668
|
|
||||||
[45] Taking Control of the Browser Dark Mode with Ant Design and ... - TY https://www.tzeyiing.com/posts/taking-control-of-the-browser-dark-mode-with-ant-design-and-tailwindcss-for-dark-mode-wizardry
|
|
||||||
[46] How to Use Framer Motion for React Animations https://blog.pixelfreestudio.com/how-to-use-framer-motion-for-react-animations/
|
|
||||||
[47] Dark Mode - Ant Design https://ant.design/docs/spec/dark/
|
|
||||||
[48] Motion - Ant Design https://ant.design/docs/spec/motion/
|
|
||||||
[49] Blueprint vs Ant Design: Which One is Better in 2025? - Subframe https://www.subframe.com/tips/blueprint-vs-ant-design
|
|
||||||
[50] Is there a way to change the colour palette for light and dark themes ... https://stackoverflow.com/questions/74653488/is-there-a-way-to-change-the-colour-palette-for-light-and-dark-themes-in-ant-des
|
|
||||||
[51] Create clipped parallax with framer motion - Stack Overflow https://stackoverflow.com/questions/76777374/create-clipped-parallax-with-framer-motion
|
|
||||||
[52] @ant-design/cssinjs CDN by jsDelivr - A CDN for npm and GitHub https://www.jsdelivr.com/package/npm/@ant-design/cssinjs
|
|
||||||
[53] Build a Parallax Section Transition with React and Framer Motion https://www.youtube.com/watch?v=nZ2LDB7Q7Rk
|
|
||||||
[54] Theming - Refine dev https://refine.dev/docs/ui-integrations/ant-design/theming/
|
|
||||||
[55] 13 Awesome React Animation Libraries To Elevate Your Design ... https://magicui.design/blog/react-animation-libraries
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
# Website Integration - Ready for Submodule Addition
|
|
||||||
|
|
||||||
## Status: Prepared ✅
|
|
||||||
|
|
||||||
The CHORUS Services platform is fully configured for the www.chorus.services website integration. All configuration is ready for when the website project is created.
|
|
||||||
|
|
||||||
## Configuration Complete
|
|
||||||
|
|
||||||
### Docker Swarm Configuration
|
|
||||||
- `docker-compose.swarm.yml` includes `chorus-website` service
|
|
||||||
- Traefik labels configured for `www.chorus.services` and `chorus.services`
|
|
||||||
- Domain redirect: `chorus.services` → `www.chorus.services`
|
|
||||||
- SSL/TLS certificates via Let's Encrypt
|
|
||||||
- Registry image: `registry.home.deepblack.cloud/tony/chorus-website:latest`
|
|
||||||
|
|
||||||
### Build Scripts
|
|
||||||
- `build-and-push.sh` includes website build support
|
|
||||||
- Individual build command: `./build-and-push.sh website`
|
|
||||||
- Integrated with unified build: `./chorus.sh build`
|
|
||||||
|
|
||||||
### Management Integration
|
|
||||||
- `./chorus.sh deploy` includes website in production deployment
|
|
||||||
- Production endpoints configured and documented
|
|
||||||
|
|
||||||
## Next Steps (When Website Project is Ready)
|
|
||||||
|
|
||||||
1. **Add Git Submodule:**
|
|
||||||
```bash
|
|
||||||
git submodule add <website-repo-url> modules/website
|
|
||||||
```
|
|
||||||
|
|
||||||
2. **Build and Deploy:**
|
|
||||||
```bash
|
|
||||||
./chorus.sh build # Includes website
|
|
||||||
./chorus.sh deploy # Deploys to production
|
|
||||||
```
|
|
||||||
|
|
||||||
3. **Access Points:**
|
|
||||||
- **Marketing**: https://www.chorus.services
|
|
||||||
- **Dashboard**: https://dashboard.chorus.services
|
|
||||||
- **API**: https://api.chorus.services
|
|
||||||
|
|
||||||
## Domain Configuration ✅
|
|
||||||
|
|
||||||
External domains configured with DNS pointing to 202.171.184.242:
|
|
||||||
- `chorus.services` (redirects to www)
|
|
||||||
- `www.chorus.services` (marketing website)
|
|
||||||
- `dashboard.chorus.services` (WHOOSH dashboard)
|
|
||||||
- `api.chorus.services` (API endpoints)
|
|
||||||
- `*.chorus.services` (wildcard for future services)
|
|
||||||
|
|
||||||
All Traefik labels and routing ready for production deployment.
|
|
||||||
@@ -1,444 +0,0 @@
|
|||||||
# CHORUS Services Brand Guide
|
|
||||||
*Comprehensive Visual Identity & Brand Standards*
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Table of Contents
|
|
||||||
|
|
||||||
1. [Brand Overview](#brand-overview)
|
|
||||||
2. [Brand Identity Concept](#brand-identity-concept)
|
|
||||||
3. [Logo System](#logo-system)
|
|
||||||
4. [Color Palette](#color-palette)
|
|
||||||
5. [Typography](#typography)
|
|
||||||
6. [Component Brand System](#component-brand-system)
|
|
||||||
7. [Usage Guidelines](#usage-guidelines)
|
|
||||||
8. [Implementation Examples](#implementation-examples)
|
|
||||||
9. [Brand Protection](#brand-protection)
|
|
||||||
10. [Quick Reference](#quick-reference)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Brand Overview
|
|
||||||
|
|
||||||
### Mission Statement
|
|
||||||
CHORUS Services eliminates context loss, reduces hallucinations, and enables scalable multi-agent collaboration through intelligent context management and distributed reasoning.
|
|
||||||
|
|
||||||
### Brand Promise
|
|
||||||
Enterprise-ready distributed AI orchestration that delivers reliable, context-aware results for global teams building the future of intelligent software.
|
|
||||||
|
|
||||||
### Brand Positioning
|
|
||||||
CHORUS Services positions itself as the premium, enterprise-grade solution for distributed AI orchestration, combining technical sophistication with approachable design to serve global enterprise customers seeking reliable, scalable AI coordination.
|
|
||||||
|
|
||||||
### Target Audiences
|
|
||||||
|
|
||||||
#### Primary: Technical Decision Makers (CTOs, VP Engineering)
|
|
||||||
- **Needs**: ROI justification, technical depth, security assurance
|
|
||||||
- **Communication**: Professional authority, technical precision, enterprise reliability
|
|
||||||
|
|
||||||
#### Secondary: AI Research Leads/Principal Engineers
|
|
||||||
- **Needs**: Technical specifications, API documentation, research validation
|
|
||||||
- **Communication**: Technical sophistication, innovation focus, capability depth
|
|
||||||
|
|
||||||
#### Tertiary: Business Stakeholders/Executives
|
|
||||||
- **Needs**: Business outcomes, competitive positioning, implementation support
|
|
||||||
- **Communication**: Clear value proposition, measurable benefits, strategic advantage
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Brand Identity Concept
|
|
||||||
|
|
||||||
### Design Philosophy
|
|
||||||
The CHORUS brand identity embodies **sophisticated orchestration** through visual metaphors that connect musical harmony with technological precision. The system reflects:
|
|
||||||
|
|
||||||
- **Distributed Intelligence**: Interconnected nodes representing AI agent coordination
|
|
||||||
- **Orchestral Harmony**: Musical conducting metaphors for workflow orchestration
|
|
||||||
- **Enterprise Sophistication**: Premium materials and refined typography
|
|
||||||
- **Global Accessibility**: Internationally appropriate and inclusive design
|
|
||||||
|
|
||||||
### Visual Metaphors
|
|
||||||
- **The Orchestration Symbol**: Central hub with radiating connections representing the conductor orchestrating distributed AI agents
|
|
||||||
- **Musical Harmony**: References to symphony and coordination without being literal
|
|
||||||
- **Premium Materials**: Carbon black, walnut brown, brushed aluminum, natural paper
|
|
||||||
- **Technological Precision**: Clean geometry and sophisticated proportions
|
|
||||||
|
|
||||||
### Brand Personality
|
|
||||||
- **Sophisticated**: Premium aesthetic reflecting enterprise-grade capabilities
|
|
||||||
- **Reliable**: Consistent, trustworthy visual language building confidence
|
|
||||||
- **Approachable**: Human-centered design making complex technology accessible
|
|
||||||
- **Global**: Culturally neutral and internationally appropriate
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Logo System
|
|
||||||
|
|
||||||
### Primary Logo: "The Orchestration Mark"
|
|
||||||
|
|
||||||
#### Visual Description
|
|
||||||
The CHORUS logo consists of a stylized orchestration symbol formed by interconnected nodes representing the five core components (WHOOSH, BZZZ, SLURP, COOEE, Monitoring) connected to a central hub, creating an abstract musical note when viewed holistically.
|
|
||||||
|
|
||||||
#### Core Elements
|
|
||||||
1. **Orchestration Symbol (Icon)**: Central hub with five radiating connections
|
|
||||||
2. **Wordmark**: "CHORUS" in SF Pro Display Bold with "Services" subtitle
|
|
||||||
3. **Integration System**: Modular design enabling component combinations
|
|
||||||
|
|
||||||
### Logo Configurations
|
|
||||||
|
|
||||||
#### Primary Horizontal Layout
|
|
||||||
```
|
|
||||||
[Orchestration Icon] CHORUS Services
|
|
||||||
```
|
|
||||||
- **Usage**: Website headers, business cards, letterhead, primary applications
|
|
||||||
- **Minimum Size**: 120px width (digital), 1.5" width (print)
|
|
||||||
- **Aspect Ratio**: 4:1 (width:height)
|
|
||||||
|
|
||||||
#### Stacked Vertical Layout
|
|
||||||
```
|
|
||||||
[Orchestration Icon]
|
|
||||||
CHORUS
|
|
||||||
Services
|
|
||||||
```
|
|
||||||
- **Usage**: Square formats, mobile applications, social media profiles
|
|
||||||
- **Minimum Size**: 80px width (digital), 1" width (print)
|
|
||||||
- **Aspect Ratio**: 1:1.2 (width:height)
|
|
||||||
|
|
||||||
#### Icon-Only Version
|
|
||||||
```
|
|
||||||
[Orchestration Icon]
|
|
||||||
```
|
|
||||||
- **Usage**: Favicons, app icons, navigation elements, profile images
|
|
||||||
- **Size Range**: 16px to 512px (digital), 0.25" to 4" (print)
|
|
||||||
- **Aspect Ratio**: 1:1 (perfect square)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Color Palette
|
|
||||||
|
|
||||||
### Brand Color Philosophy
|
|
||||||
The CHORUS color palette draws inspiration from premium natural materials and sophisticated technology, creating a system that works across dark digital interfaces and light print materials while maintaining accessibility and international appeal.
|
|
||||||
|
|
||||||
### Core Brand Colors
|
|
||||||
|
|
||||||
#### Carbon Black `#000000`
|
|
||||||
- **Usage**: Primary backgrounds, high-contrast text, logo applications
|
|
||||||
- **Psychology**: Authority, sophistication, premium quality
|
|
||||||
- **Applications**: Website backgrounds, app interfaces, business cards
|
|
||||||
|
|
||||||
#### Natural Paper `#F5F5DC`
|
|
||||||
- **Usage**: Light backgrounds, high-contrast text, accessibility contrast
|
|
||||||
- **Psychology**: Clarity, simplicity, natural intelligence
|
|
||||||
- **Applications**: Print materials, light themes, text on dark backgrounds
|
|
||||||
|
|
||||||
#### Walnut Brown `#8B4513`
|
|
||||||
- **Usage**: Warm accents, secondary elements, natural touches
|
|
||||||
- **Psychology**: Reliability, craftsmanship, approachable intelligence
|
|
||||||
- **Applications**: Secondary text, accent elements, print materials
|
|
||||||
|
|
||||||
#### Brushed Aluminum `#C0C0C0`
|
|
||||||
- **Usage**: UI elements, borders, technical precision
|
|
||||||
- **Psychology**: Modern sophistication, precision, technology
|
|
||||||
- **Applications**: Interface elements, technical diagrams, secondary text
|
|
||||||
|
|
||||||
### System Colors
|
|
||||||
|
|
||||||
#### Orchestration Blue `#007AFF`
|
|
||||||
- **Usage**: Primary actions, interactive elements, system feedback
|
|
||||||
- **Psychology**: Trust, reliability, technological precision
|
|
||||||
- **Applications**: Buttons, links, primary CTAs, logo accents
|
|
||||||
|
|
||||||
#### Harmony Green `#30D158`
|
|
||||||
- **Usage**: Success states, positive feedback, growth indicators
|
|
||||||
- **Applications**: Success messages, positive data visualization
|
|
||||||
|
|
||||||
#### Resonance Amber `#FF9F0A`
|
|
||||||
- **Usage**: Warning states, attention indicators, energy elements
|
|
||||||
- **Applications**: Warnings, attention callouts, active processes
|
|
||||||
|
|
||||||
#### Alert Coral `#FF453A`
|
|
||||||
- **Usage**: Error states, critical alerts, problem indicators
|
|
||||||
- **Applications**: Error messages, critical warnings, urgent notifications
|
|
||||||
|
|
||||||
### Dark Mode Implementation
|
|
||||||
- **Background Hierarchy**: Pure Black → Carbon Gray → Cool Gray → Border Gray
|
|
||||||
- **Text Hierarchy**: Natural Paper → Light Gray → Medium Gray → Orchestration Blue
|
|
||||||
- **Contrast**: All combinations tested for WCAG 2.1 AA compliance
|
|
||||||
|
|
||||||
### Light Mode Implementation
|
|
||||||
- **Background Hierarchy**: Pure White → Natural Paper → Light Gray → Border Light
|
|
||||||
- **Text Hierarchy**: Carbon Black → Medium Gray → Light Gray → Orchestration Blue
|
|
||||||
- **Contrast**: Optimized for readability on warm, natural backgrounds
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Typography
|
|
||||||
|
|
||||||
### Font System
|
|
||||||
**Primary**: SF Pro Display/Text (Apple System Fonts)
|
|
||||||
**Fallback**: -apple-system, BlinkMacSystemFont, Inter, Segoe UI, Roboto, sans-serif
|
|
||||||
**Monospace**: SF Mono, Monaco, Inconsolata, Fira Code
|
|
||||||
|
|
||||||
### Typography Scale
|
|
||||||
|
|
||||||
#### Display Typography (Headlines)
|
|
||||||
- **Hero Display**: `clamp(48px, 8vw, 84px)` - SF Pro Display Heavy (800)
|
|
||||||
- **Section Display**: `clamp(32px, 5vw, 48px)` - SF Pro Display Bold (700)
|
|
||||||
- **Subsection Display**: `clamp(24px, 4vw, 36px)` - SF Pro Display Semibold (600)
|
|
||||||
|
|
||||||
#### Body Typography (Content)
|
|
||||||
- **Body Large**: 18px - SF Pro Text Regular (400)
|
|
||||||
- **Body Regular**: 16px - SF Pro Text Regular (400)
|
|
||||||
- **Body Small**: 14px - SF Pro Text Regular (400)
|
|
||||||
|
|
||||||
#### Interface Typography (UI)
|
|
||||||
- **Button Text**: 16px/14px - SF Pro Text Semibold (600)
|
|
||||||
- **Navigation**: 16px - SF Pro Text Medium (500)
|
|
||||||
- **Labels**: 14px - SF Pro Text Medium (500)
|
|
||||||
|
|
||||||
#### Technical Typography (Code)
|
|
||||||
- **Code Primary**: 14px - SF Mono, monospace
|
|
||||||
- **Code Inline**: 90% of parent size - SF Mono
|
|
||||||
|
|
||||||
### Responsive Implementation
|
|
||||||
- **Fluid Scaling**: CSS clamp() functions for responsive typography
|
|
||||||
- **Line Height**: Optimized for readability (1.4-1.6 for body text)
|
|
||||||
- **Letter Spacing**: Optical corrections for large display sizes
|
|
||||||
- **Accessibility**: Meets WCAG 2.1 AA contrast requirements
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Component Brand System
|
|
||||||
|
|
||||||
### Modular Design Framework
|
|
||||||
Each CHORUS component (WHOOSH, BZZZ, SLURP, COOEE, Monitoring) has its own visual identity that integrates seamlessly with the main CHORUS brand through shared design language and connection systems.
|
|
||||||
|
|
||||||
### Component Identities
|
|
||||||
|
|
||||||
#### WHOOSH - Orchestration Engine
|
|
||||||
- **Visual Concept**: Stylized orchestration podium with flowing conductor lines
|
|
||||||
- **Color**: Orchestration Blue (#007AFF) primary
|
|
||||||
- **Integration**: "WHOOSH powered by CHORUS"
|
|
||||||
|
|
||||||
#### BZZZ - P2P Agent Coordination
|
|
||||||
- **Visual Concept**: Hexagonal mesh network pattern (honeycomb reference)
|
|
||||||
- **Color**: Harmony Green (#30D158) primary
|
|
||||||
- **Integration**: Network mesh connects to CHORUS orchestration hub
|
|
||||||
|
|
||||||
#### SLURP - Context Curator Service
|
|
||||||
- **Visual Concept**: Stacked information layers with intelligent filtering
|
|
||||||
- **Color**: Walnut Brown (#8B4513) gradient primary
|
|
||||||
- **Integration**: Context layers flow into CHORUS orchestration symbol
|
|
||||||
|
|
||||||
#### COOEE - Feedback & Learning System
|
|
||||||
- **Visual Concept**: Circular feedback loop with learning arrows
|
|
||||||
- **Color**: Resonance Amber (#FF9F0A) primary
|
|
||||||
- **Integration**: Feedback loop surrounds CHORUS node connection
|
|
||||||
|
|
||||||
#### Monitoring & Analytics
|
|
||||||
- **Visual Concept**: Modern dashboard with real-time metrics
|
|
||||||
- **Color**: Brushed Aluminum (#C0C0C0) primary
|
|
||||||
- **Integration**: Dashboard metrics emanate from CHORUS central hub
|
|
||||||
|
|
||||||
### Integration Patterns
|
|
||||||
- **Horizontal**: Component Icon + Name → CHORUS Icon + Name
|
|
||||||
- **Vertical**: Component above, CHORUS below with connection
|
|
||||||
- **Compact**: Side-by-side icons with combined wordmark
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Usage Guidelines
|
|
||||||
|
|
||||||
### Logo Applications
|
|
||||||
|
|
||||||
#### Approved Uses
|
|
||||||
- Website headers and navigation (horizontal layout preferred)
|
|
||||||
- Business cards and letterhead (minimum size requirements)
|
|
||||||
- Digital presentations and documents (appropriate contexts)
|
|
||||||
- Social media profiles and posts (optimized versions)
|
|
||||||
- Marketing materials and advertisements (brand-compliant designs)
|
|
||||||
|
|
||||||
#### Prohibited Uses
|
|
||||||
- Stretching or distorting logo proportions
|
|
||||||
- Using colors outside approved brand palette
|
|
||||||
- Placing on backgrounds that fail contrast requirements
|
|
||||||
- Adding effects (shadows, outlines, gradients) to logo
|
|
||||||
- Altering spacing between logo elements
|
|
||||||
|
|
||||||
### Color Usage Standards
|
|
||||||
|
|
||||||
#### Digital Applications
|
|
||||||
- **Dark Mode**: Primary brand version on Carbon Black backgrounds
|
|
||||||
- **Light Mode**: Reversed version on Natural Paper or White backgrounds
|
|
||||||
- **Interactive Elements**: Orchestration Blue for buttons, links, active states
|
|
||||||
- **System Feedback**: Appropriate system colors for success/warning/error states
|
|
||||||
|
|
||||||
#### Print Applications
|
|
||||||
- **Business Collateral**: Carbon Black on Natural Paper for professional materials
|
|
||||||
- **Marketing Materials**: Full color palette with accessibility considerations
|
|
||||||
- **Single Color**: Monochrome versions for cost-effective printing
|
|
||||||
|
|
||||||
### Typography Applications
|
|
||||||
|
|
||||||
#### Marketing Content
|
|
||||||
- **Headlines**: Display typography with proper hierarchy and spacing
|
|
||||||
- **Body Copy**: Readable sizes with optimal line length (45-75 characters)
|
|
||||||
- **CTAs**: Clear, action-oriented language with appropriate typography weight
|
|
||||||
|
|
||||||
#### Technical Documentation
|
|
||||||
- **Structure**: Clear headings, numbered procedures, code examples
|
|
||||||
- **Language**: Precise, assumption-free technical communication
|
|
||||||
- **Format**: Consistent formatting with monospace fonts for code
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Implementation Examples
|
|
||||||
|
|
||||||
### Website Header
|
|
||||||
```html
|
|
||||||
<header class="site-header">
|
|
||||||
<div class="container">
|
|
||||||
<a href="/" class="logo-link">
|
|
||||||
<img src="chorus-logo-horizontal-color.svg"
|
|
||||||
alt="CHORUS Services - Distributed AI Orchestration"
|
|
||||||
class="chorus-logo chorus-logo--horizontal">
|
|
||||||
</a>
|
|
||||||
<nav class="main-navigation">
|
|
||||||
<!-- Navigation items -->
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
```
|
|
||||||
|
|
||||||
### CSS Implementation
|
|
||||||
```css
|
|
||||||
:root {
|
|
||||||
/* Brand Colors */
|
|
||||||
--color-carbon-black: #000000;
|
|
||||||
--color-natural-paper: #F5F5DC;
|
|
||||||
--color-orchestration-blue: #007AFF;
|
|
||||||
--color-walnut-brown: #8B4513;
|
|
||||||
--color-brushed-aluminum: #C0C0C0;
|
|
||||||
|
|
||||||
/* Typography */
|
|
||||||
--font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
|
|
||||||
--font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
|
|
||||||
--font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chorus-logo {
|
|
||||||
display: inline-block;
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-header {
|
|
||||||
background: var(--color-carbon-black);
|
|
||||||
color: var(--color-natural-paper);
|
|
||||||
font-family: var(--font-text);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Business Card Example
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────────────┐
|
|
||||||
│ [CHORUS Logo - Horizontal, 1.5" width] │
|
|
||||||
│ │
|
|
||||||
│ John Smith │
|
|
||||||
│ VP of Engineering │
|
|
||||||
│ CHORUS Services │
|
|
||||||
│ │
|
|
||||||
│ john.smith@chorus.services │
|
|
||||||
│ +1 (555) 123-4567 │
|
|
||||||
│ https://www.chorus.services │
|
|
||||||
│ │
|
|
||||||
│ Distributed AI Orchestration │
|
|
||||||
│ Without the Hallucinations │
|
|
||||||
└─────────────────────────────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
### Email Signature
|
|
||||||
```html
|
|
||||||
<table cellpadding="0" cellspacing="0" border="0">
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<img src="chorus-logo-horizontal-120px.png"
|
|
||||||
alt="CHORUS Services Logo"
|
|
||||||
width="120" height="30">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td style="font-family: -apple-system, sans-serif; font-size: 14px; color: #1a1a1a;">
|
|
||||||
<strong>John Smith</strong><br>
|
|
||||||
VP of Engineering, CHORUS Services<br>
|
|
||||||
<a href="mailto:john.smith@chorus.services">john.smith@chorus.services</a> | +1 (555) 123-4567<br>
|
|
||||||
<a href="https://www.chorus.services">https://www.chorus.services</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td style="font-family: -apple-system, sans-serif; font-size: 12px; color: #6d6d73; padding-top: 8px;">
|
|
||||||
Distributed AI Orchestration Without the Hallucinations
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Brand Protection
|
|
||||||
|
|
||||||
### Trademark Usage
|
|
||||||
- CHORUS Services is a trademark and should be used consistently
|
|
||||||
- Always use proper trademark symbols (™ or ®) when legally required
|
|
||||||
- Do not modify or abbreviate the brand name without authorization
|
|
||||||
|
|
||||||
### Quality Control
|
|
||||||
- All brand applications must meet accessibility requirements (WCAG 2.1 AA)
|
|
||||||
- Print applications require brand team approval before production
|
|
||||||
- Digital applications should follow responsive design principles
|
|
||||||
- International applications may require cultural sensitivity review
|
|
||||||
|
|
||||||
### Approval Process
|
|
||||||
1. **Internal Review**: Brand Manager → Design Lead → Marketing Director
|
|
||||||
2. **External Applications**: Require brand license agreement and approval
|
|
||||||
3. **Media Usage**: Provide official logo package with usage guidelines
|
|
||||||
4. **Partner Materials**: Review and approval process with brand compliance
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Quick Reference
|
|
||||||
|
|
||||||
### Logo Minimum Sizes
|
|
||||||
- **Horizontal**: 120px width (digital), 1.5" width (print)
|
|
||||||
- **Stacked**: 80px width (digital), 1" width (print)
|
|
||||||
- **Icon-Only**: 16px (favicon), 32px (standard), 512px (high-res)
|
|
||||||
|
|
||||||
### Primary Colors (Hex Codes)
|
|
||||||
- **Carbon Black**: `#000000`
|
|
||||||
- **Natural Paper**: `#F5F5DC`
|
|
||||||
- **Orchestration Blue**: `#007AFF`
|
|
||||||
- **Walnut Brown**: `#8B4513`
|
|
||||||
- **Brushed Aluminum**: `#C0C0C0`
|
|
||||||
|
|
||||||
### Typography Hierarchy
|
|
||||||
- **Hero**: 48-84px, SF Pro Display Heavy (800)
|
|
||||||
- **Headlines**: 32-48px, SF Pro Display Bold (700)
|
|
||||||
- **Subheads**: 24-36px, SF Pro Display Semibold (600)
|
|
||||||
- **Body**: 16-18px, SF Pro Text Regular (400)
|
|
||||||
- **Small**: 14px, SF Pro Text Regular (400)
|
|
||||||
|
|
||||||
### File Formats
|
|
||||||
- **Web**: SVG (preferred), PNG (2x retina)
|
|
||||||
- **Print**: PDF (vector), AI/EPS (native)
|
|
||||||
- **Social**: PNG (platform-specific sizes)
|
|
||||||
- **Apps**: PNG (multiple resolutions), ICO (favicons)
|
|
||||||
|
|
||||||
### Contact Information
|
|
||||||
**Brand inquiries**: brand@chorus.services
|
|
||||||
**Asset requests**: assets@chorus.services
|
|
||||||
**Usage questions**: marketing@chorus.services
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
*This brand guide is a living document that evolves with the CHORUS Services platform. For the most current version and additional assets, visit the internal brand portal or contact the brand team.*
|
|
||||||
|
|
||||||
**Document Version**: 1.0
|
|
||||||
**Last Updated**: 2025-08-01
|
|
||||||
**Next Review**: Quarterly
|
|
||||||
@@ -4,7 +4,7 @@ This directory contains the complete visual identity system for CHORUS Services,
|
|||||||
|
|
||||||
## 📁 Directory Structure
|
## 📁 Directory Structure
|
||||||
|
|
||||||
```
|
|
||||||
brand-assets/
|
brand-assets/
|
||||||
├── 📋 README.md # This overview file
|
├── 📋 README.md # This overview file
|
||||||
├── 📘 CHORUS-BRAND-GUIDE.md # Complete brand guide
|
├── 📘 CHORUS-BRAND-GUIDE.md # Complete brand guide
|
||||||
@@ -22,27 +22,27 @@ brand-assets/
|
|||||||
│ └── website-mockup-concept.md # Implementation examples
|
│ └── website-mockup-concept.md # Implementation examples
|
||||||
└── 📄 templates/
|
└── 📄 templates/
|
||||||
└── [Future templates will be added here]
|
└── [Future templates will be added here]
|
||||||
```
|
|
||||||
|
|
||||||
## 🎯 Quick Start Guide
|
## 🎯 Quick Start Guide
|
||||||
|
|
||||||
### For Designers
|
### For Designers
|
||||||
1. **Start with**: [`CHORUS-BRAND-GUIDE.md`](./CHORUS-BRAND-GUIDE.md) for complete overview
|
1. **Start with**: [CHORUS-BRAND-GUIDE.md](./CHORUS-BRAND-GUIDE.md) for complete overview
|
||||||
2. **Logo Usage**: [`logos/chorus-logo-concept.md`](./logos/chorus-logo-concept.md) for primary logo specifications
|
2. **Logo Usage**: [logos/chorus-logo-concept.md](./logos/chorus-logo-concept.md) for primary logo specifications
|
||||||
3. **Color System**: [`colors/chorus-color-system.md`](./colors/chorus-color-system.md) for color palette
|
3. **Color System**: [colors/chorus-color-system.md](./colors/chorus-color-system.md) for color palette
|
||||||
4. **Typography**: [`typography/chorus-typography-system.md`](./typography/chorus-typography-system.md) for font system
|
4. **Typography**: [typography/chorus-typography-system.md](./typography/chorus-typography-system.md) for font system
|
||||||
|
|
||||||
### For Developers
|
### For Developers
|
||||||
1. **Implementation Guide**: [`CHORUS-BRAND-GUIDE.md`](./CHORUS-BRAND-GUIDE.md) (Implementation Examples section)
|
1. **Implementation Guide**: [CHORUS-BRAND-GUIDE.md](./CHORUS-BRAND-GUIDE.md) (Implementation Examples section)
|
||||||
2. **Color Variables**: [`colors/chorus-color-system.md`](./colors/chorus-color-system.md) (CSS Custom Properties)
|
2. **Color Variables**: [colors/chorus-color-system.md](./colors/chorus-color-system.md) (CSS Custom Properties)
|
||||||
3. **Typography CSS**: [`typography/chorus-typography-system.md`](./typography/chorus-typography-system.md) (Utility Classes)
|
3. **Typography CSS**: [typography/chorus-typography-system.md](./typography/chorus-typography-system.md) (Utility Classes)
|
||||||
4. **Logo Integration**: [`logos/logo-variations-specifications.md`](./logos/logo-variations-specifications.md) (SVG & CSS)
|
4. **Logo Integration**: [logos/logo-variations-specifications.md](./logos/logo-variations-specifications.md) (SVG & CSS)
|
||||||
|
|
||||||
### For Marketing Teams
|
### For Marketing Teams
|
||||||
1. **Usage Guidelines**: [`guidelines/brand-usage-guidelines.md`](./guidelines/brand-usage-guidelines.md)
|
1. **Usage Guidelines**: [guidelines/brand-usage-guidelines.md](./guidelines/brand-usage-guidelines.md)
|
||||||
2. **Component Branding**: [`logos/component-logo-system.md`](./logos/component-logo-system.md)
|
2. **Component Branding**: [logos/component-logo-system.md](./logos/component-logo-system.md)
|
||||||
3. **Mockup Examples**: [`mockups/website-mockup-concept.md`](./mockups/website-mockup-concept.md)
|
3. **Mockup Examples**: [mockups/website-mockup-concept.md](./mockups/website-mockup-concept.md)
|
||||||
4. **Brand Voice**: [`guidelines/brand-usage-guidelines.md`](./guidelines/brand-usage-guidelines.md) (Content Guidelines)
|
4. **Brand Voice**: [guidelines/brand-usage-guidelines.md](./guidelines/brand-usage-guidelines.md) (Content Guidelines)
|
||||||
|
|
||||||
## 🎨 Brand System Overview
|
## 🎨 Brand System Overview
|
||||||
|
|
||||||
@@ -78,21 +78,21 @@ brand-assets/
|
|||||||
- **Icon Only**: 16px (favicon) to 512px (high-resolution)
|
- **Icon Only**: 16px (favicon) to 512px (high-resolution)
|
||||||
|
|
||||||
### Color Values (Primary)
|
### Color Values (Primary)
|
||||||
```css
|
css
|
||||||
--color-carbon-black: #000000;
|
--color-carbon-black: #000000;
|
||||||
--color-natural-paper: #F5F5DC;
|
--color-natural-paper: #F5F5DC;
|
||||||
--color-orchestration-blue: #007AFF;
|
--color-orchestration-blue: #007AFF;
|
||||||
--color-walnut-brown: #8B4513;
|
--color-walnut-brown: #8B4513;
|
||||||
--color-brushed-aluminum: #C0C0C0;
|
--color-brushed-aluminum: #C0C0C0;
|
||||||
```
|
|
||||||
|
|
||||||
### Typography Scale
|
### Typography Scale
|
||||||
```css
|
css
|
||||||
--text-hero: clamp(48px, 8vw, 84px); /* SF Pro Display Heavy */
|
--text-hero: clamp(48px, 8vw, 84px); /* SF Pro Display Heavy */
|
||||||
--text-display-1: clamp(32px, 5vw, 48px); /* SF Pro Display Bold */
|
--text-display-1: clamp(32px, 5vw, 48px); /* SF Pro Display Bold */
|
||||||
--text-body: 16px; /* SF Pro Text Regular */
|
--text-body: 16px; /* SF Pro Text Regular */
|
||||||
--text-small: 14px; /* SF Pro Text Regular */
|
--text-small: 14px; /* SF Pro Text Regular */
|
||||||
```
|
|
||||||
|
|
||||||
## 🛡️ Brand Protection
|
## 🛡️ Brand Protection
|
||||||
|
|
||||||
@@ -154,14 +154,14 @@ brand-assets/
|
|||||||
## 📚 Related Documentation
|
## 📚 Related Documentation
|
||||||
|
|
||||||
### Project Documentation
|
### Project Documentation
|
||||||
- [`../../README.md`](../../README.md): Main project overview
|
- [../../README.md](../../README.md): Main project overview
|
||||||
- [`../../DESIGN.md`](../../DESIGN.md): Technical design implementation
|
- [../../DESIGN.md](../../DESIGN.md): Technical design implementation
|
||||||
- [`../../UX_DESIGN_STRATEGY.md`](../../UX_DESIGN_STRATEGY.md): User experience strategy
|
- [../../UX_DESIGN_STRATEGY.md](../../UX_DESIGN_STRATEGY.md): User experience strategy
|
||||||
|
|
||||||
### Technical Integration
|
### Technical Integration
|
||||||
- [`../../modules/whoosh/frontend/`](../../modules/whoosh/frontend/): Frontend implementation
|
- [../../modules/whoosh/frontend/](../../modules/whoosh/frontend/): Frontend implementation
|
||||||
- [`../../website/`](../../website/): Marketing website implementation
|
- [../../website/](../../website/): Marketing website implementation
|
||||||
- [`../../docker-compose.yml`](../../docker-compose.yml): Service configuration
|
- [../../docker-compose.yml](../../docker-compose.yml): Service configuration
|
||||||
|
|
||||||
## 💡 Implementation Tips
|
## 💡 Implementation Tips
|
||||||
|
|
||||||
|
|||||||
4170
brand-assets/chorus_brand_style_guide.html
Normal file
4170
brand-assets/chorus_brand_style_guide.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,199 +0,0 @@
|
|||||||
# CHORUS Services Color System
|
|
||||||
|
|
||||||
## Brand Color Philosophy
|
|
||||||
|
|
||||||
The CHORUS Services color palette reflects sophisticated orchestration, enterprise reliability, and technological innovation. Drawing inspiration from natural materials (carbon black, walnut brown, brushed aluminum) and warmer accents, the system creates a premium, approachable aesthetic that works in both digital dark themes and print materials.
|
|
||||||
|
|
||||||
## Primary Color Palette
|
|
||||||
|
|
||||||
### Core Brand Colors
|
|
||||||
|
|
||||||
#### Carbon Black
|
|
||||||
- **Primary**: `#000000`
|
|
||||||
- **Usage**: Primary backgrounds, high-contrast text, logo applications
|
|
||||||
- **Psychology**: Authority, sophistication, premium quality
|
|
||||||
- **Print**: Rich black (C:91, M:79, Y:62, K:97)
|
|
||||||
|
|
||||||
#### Walnut Brown
|
|
||||||
- **Primary**: `#8B4513` (Deep Walnut)
|
|
||||||
- **Secondary**: `#A0522D` (Medium Walnut)
|
|
||||||
- **Light**: `#D2691E` (Warm Walnut)
|
|
||||||
- **Usage**: Accent elements, warm touches, secondary branding
|
|
||||||
- **Psychology**: Reliability, craftsmanship, natural intelligence
|
|
||||||
- **Print**: C:30, M:70, Y:100, K:20
|
|
||||||
|
|
||||||
#### Brushed Aluminum
|
|
||||||
- **Primary**: `#C0C0C0` (Metallic Silver)
|
|
||||||
- **Dark**: `#708090` (Slate Gray)
|
|
||||||
- **Light**: `#E5E5E5` (Light Silver)
|
|
||||||
- **Usage**: UI elements, borders, technical diagrams
|
|
||||||
- **Psychology**: Precision, technology, modern sophistication
|
|
||||||
- **Print**: C:15, M:10, Y:12, K:0
|
|
||||||
|
|
||||||
#### Natural Fiber Paper
|
|
||||||
- **Primary**: `#F5F5DC` (Warm Cream)
|
|
||||||
- **Pure**: `#FFFEF7` (Off-White)
|
|
||||||
- **Aged**: `#F0E68C` (Light Parchment)
|
|
||||||
- **Usage**: Light backgrounds, print materials, accessibility contrast
|
|
||||||
- **Psychology**: Clarity, simplicity, natural intelligence
|
|
||||||
- **Print**: C:6, M:4, Y:15, K:0
|
|
||||||
|
|
||||||
## Secondary Palette (Warmer Accents)
|
|
||||||
|
|
||||||
### Orchestration Blue (Primary System Color)
|
|
||||||
- **Electric Blue**: `#007AFF` - Primary actions, links, system elements
|
|
||||||
- **Deep Blue**: `#0051D5` - Hover states, pressed elements
|
|
||||||
- **Light Blue**: `#4A90E2` - Secondary actions, info states
|
|
||||||
|
|
||||||
### Harmony Green (Success/Growth)
|
|
||||||
- **Emerald**: `#30D158` - Success states, positive feedback
|
|
||||||
- **Forest**: `#228B22` - Secondary success, stable states
|
|
||||||
- **Sage**: `#9CAF88` - Subtle positive indicators
|
|
||||||
|
|
||||||
### Resonance Amber (Warning/Energy)
|
|
||||||
- **Warm Amber**: `#FF9F0A` - Warnings, attention states
|
|
||||||
- **Golden**: `#FFD700` - Premium features, highlights
|
|
||||||
- **Copper**: `#B87333` - Secondary attention elements
|
|
||||||
|
|
||||||
### Alert Coral (Error/Critical)
|
|
||||||
- **System Red**: `#FF453A` - Errors, critical states
|
|
||||||
- **Warm Red**: `#FF6B6B` - Secondary errors, warnings
|
|
||||||
- **Rose**: `#E55B5B` - Soft error states
|
|
||||||
|
|
||||||
## Dark Mode Implementation
|
|
||||||
|
|
||||||
### Background Hierarchy
|
|
||||||
1. **Pure Black**: `#000000` - App backgrounds, highest contrast
|
|
||||||
2. **Carbon Gray**: `#1A1A1A` - Card backgrounds, elevated surfaces
|
|
||||||
3. **Cool Gray**: `#2D2D30` - Secondary surfaces, input fields
|
|
||||||
4. **Border Gray**: `#48484A` - Dividers, subtle borders
|
|
||||||
|
|
||||||
### Text Colors (Dark Mode)
|
|
||||||
1. **Primary Text**: `#F2F2F7` - Headlines, primary content
|
|
||||||
2. **Secondary Text**: `#A1A1A6` - Descriptions, secondary content
|
|
||||||
3. **Tertiary Text**: `#6D6D73` - Captions, disabled text
|
|
||||||
4. **Accent Text**: `#007AFF` - Links, interactive elements
|
|
||||||
|
|
||||||
## Light Mode Implementation
|
|
||||||
|
|
||||||
### Background Hierarchy
|
|
||||||
1. **Pure White**: `#FFFFFF` - Clean backgrounds
|
|
||||||
2. **Natural Paper**: `#F5F5DC` - Warm backgrounds, print materials
|
|
||||||
3. **Light Gray**: `#F2F2F2` - Secondary surfaces
|
|
||||||
4. **Border Light**: `#E5E5E5` - Dividers, subtle borders
|
|
||||||
|
|
||||||
### Text Colors (Light Mode)
|
|
||||||
1. **Primary Text**: `#1A1A1A` - Headlines, primary content
|
|
||||||
2. **Secondary Text**: `#6D6D73` - Descriptions, secondary content
|
|
||||||
3. **Tertiary Text**: `#A1A1A6` - Captions, disabled text
|
|
||||||
4. **Accent Text**: `#007AFF` - Links, interactive elements
|
|
||||||
|
|
||||||
## Accessibility Standards
|
|
||||||
|
|
||||||
### WCAG 2.1 AA Compliance
|
|
||||||
- **Normal Text**: Minimum 4.5:1 contrast ratio
|
|
||||||
- **Large Text**: Minimum 3:1 contrast ratio
|
|
||||||
- **Interactive Elements**: Clear focus indicators with 3:1 contrast
|
|
||||||
|
|
||||||
### Tested Combinations (Dark Mode)
|
|
||||||
- White (#F2F2F7) on Black (#000000): 19.96:1 ✅
|
|
||||||
- Primary Blue (#007AFF) on Black (#000000): 8.59:1 ✅
|
|
||||||
- Secondary Text (#A1A1A6) on Black (#000000): 6.64:1 ✅
|
|
||||||
- Tertiary Text (#6D6D73) on Black (#000000): 4.51:1 ✅
|
|
||||||
|
|
||||||
### Tested Combinations (Light Mode)
|
|
||||||
- Black (#1A1A1A) on Natural Paper (#F5F5DC): 18.2:1 ✅
|
|
||||||
- Primary Blue (#007AFF) on White (#FFFFFF): 4.5:1 ✅
|
|
||||||
- Secondary Text (#6D6D73) on Natural Paper (#F5F5DC): 7.8:1 ✅
|
|
||||||
|
|
||||||
## Color Usage Guidelines
|
|
||||||
|
|
||||||
### Do's
|
|
||||||
- Use Carbon Black for premium, high-contrast applications
|
|
||||||
- Apply Walnut Brown for warmth and approachability
|
|
||||||
- Use Brushed Aluminum for technical, precise elements
|
|
||||||
- Apply warmer accents sparingly for energy and focus
|
|
||||||
- Maintain hierarchy with background/text contrast levels
|
|
||||||
|
|
||||||
### Don'ts
|
|
||||||
- Never use pure white text on colored backgrounds without contrast testing
|
|
||||||
- Avoid mixing warm and cool grays in the same interface
|
|
||||||
- Don't use accent colors as primary backgrounds
|
|
||||||
- Never sacrifice accessibility for aesthetic preferences
|
|
||||||
- Avoid using more than 3 accent colors in a single design
|
|
||||||
|
|
||||||
## Brand Color Applications
|
|
||||||
|
|
||||||
### Logo Applications
|
|
||||||
- **Primary Logo**: Carbon Black on Natural Paper or White
|
|
||||||
- **Reversed Logo**: Natural Paper on Carbon Black
|
|
||||||
- **Accent Logo**: Orchestration Blue accent with Carbon Black text
|
|
||||||
|
|
||||||
### UI Applications
|
|
||||||
- **Primary Actions**: Orchestration Blue
|
|
||||||
- **Secondary Actions**: Brushed Aluminum
|
|
||||||
- **Success States**: Harmony Green
|
|
||||||
- **Warning States**: Resonance Amber
|
|
||||||
- **Error States**: Alert Coral
|
|
||||||
|
|
||||||
### Print Applications
|
|
||||||
- **Business Cards**: Carbon Black on Natural Paper
|
|
||||||
- **Brochures**: Full color palette with Natural Paper base
|
|
||||||
- **Technical Documentation**: Monochrome with Orchestration Blue accents
|
|
||||||
|
|
||||||
## Technical Implementation
|
|
||||||
|
|
||||||
### CSS Custom Properties
|
|
||||||
```css
|
|
||||||
:root {
|
|
||||||
/* Core Brand Colors */
|
|
||||||
--color-carbon-black: #000000;
|
|
||||||
--color-walnut-brown: #8B4513;
|
|
||||||
--color-brushed-aluminum: #C0C0C0;
|
|
||||||
--color-natural-paper: #F5F5DC;
|
|
||||||
|
|
||||||
/* System Colors */
|
|
||||||
--color-orchestration-blue: #007AFF;
|
|
||||||
--color-harmony-green: #30D158;
|
|
||||||
--color-resonance-amber: #FF9F0A;
|
|
||||||
--color-alert-coral: #FF453A;
|
|
||||||
|
|
||||||
/* Dark Mode Backgrounds */
|
|
||||||
--bg-primary-dark: #000000;
|
|
||||||
--bg-secondary-dark: #1A1A1A;
|
|
||||||
--bg-elevated-dark: #2D2D30;
|
|
||||||
--bg-border-dark: #48484A;
|
|
||||||
|
|
||||||
/* Light Mode Backgrounds */
|
|
||||||
--bg-primary-light: #FFFFFF;
|
|
||||||
--bg-secondary-light: #F5F5DC;
|
|
||||||
--bg-elevated-light: #F2F2F2;
|
|
||||||
--bg-border-light: #E5E5E5;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Design Token Structure
|
|
||||||
```javascript
|
|
||||||
export const colorTokens = {
|
|
||||||
brand: {
|
|
||||||
carbon: '#000000',
|
|
||||||
walnut: '#8B4513',
|
|
||||||
aluminum: '#C0C0C0',
|
|
||||||
paper: '#F5F5DC'
|
|
||||||
},
|
|
||||||
system: {
|
|
||||||
blue: '#007AFF',
|
|
||||||
green: '#30D158',
|
|
||||||
amber: '#FF9F0A',
|
|
||||||
coral: '#FF453A'
|
|
||||||
},
|
|
||||||
semantic: {
|
|
||||||
primary: 'var(--color-orchestration-blue)',
|
|
||||||
success: 'var(--color-harmony-green)',
|
|
||||||
warning: 'var(--color-resonance-amber)',
|
|
||||||
error: 'var(--color-alert-coral)'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
This color system provides a sophisticated, accessible foundation for the CHORUS Services brand that works across all applications while maintaining the premium, technology-focused aesthetic required for enterprise clients.
|
|
||||||
BIN
brand-assets/favicon_io/android-chrome-192x192.png
Normal file
BIN
brand-assets/favicon_io/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
brand-assets/favicon_io/android-chrome-512x512.png
Normal file
BIN
brand-assets/favicon_io/android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
brand-assets/favicon_io/apple-touch-icon.png
Normal file
BIN
brand-assets/favicon_io/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
brand-assets/favicon_io/favicon-16x16.png
Normal file
BIN
brand-assets/favicon_io/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 784 B |
BIN
brand-assets/favicon_io/favicon-32x32.png
Normal file
BIN
brand-assets/favicon_io/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
brand-assets/favicon_io/favicon.ico
Normal file
BIN
brand-assets/favicon_io/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
1
brand-assets/favicon_io/site.webmanifest
Normal file
1
brand-assets/favicon_io/site.webmanifest
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||||
Binary file not shown.
93
brand-assets/fonts/Inconsolata/OFL.txt
Normal file
93
brand-assets/fonts/Inconsolata/OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
Copyright 2006 The Inconsolata Project Authors
|
||||||
|
|
||||||
|
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||||
|
This license is copied below, and is also available with a FAQ at:
|
||||||
|
https://openfontlicense.org
|
||||||
|
|
||||||
|
|
||||||
|
-----------------------------------------------------------
|
||||||
|
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||||
|
-----------------------------------------------------------
|
||||||
|
|
||||||
|
PREAMBLE
|
||||||
|
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||||
|
development of collaborative font projects, to support the font creation
|
||||||
|
efforts of academic and linguistic communities, and to provide a free and
|
||||||
|
open framework in which fonts may be shared and improved in partnership
|
||||||
|
with others.
|
||||||
|
|
||||||
|
The OFL allows the licensed fonts to be used, studied, modified and
|
||||||
|
redistributed freely as long as they are not sold by themselves. The
|
||||||
|
fonts, including any derivative works, can be bundled, embedded,
|
||||||
|
redistributed and/or sold with any software provided that any reserved
|
||||||
|
names are not used by derivative works. The fonts and derivatives,
|
||||||
|
however, cannot be released under any other type of license. The
|
||||||
|
requirement for fonts to remain under this license does not apply
|
||||||
|
to any document created using the fonts or their derivatives.
|
||||||
|
|
||||||
|
DEFINITIONS
|
||||||
|
"Font Software" refers to the set of files released by the Copyright
|
||||||
|
Holder(s) under this license and clearly marked as such. This may
|
||||||
|
include source files, build scripts and documentation.
|
||||||
|
|
||||||
|
"Reserved Font Name" refers to any names specified as such after the
|
||||||
|
copyright statement(s).
|
||||||
|
|
||||||
|
"Original Version" refers to the collection of Font Software components as
|
||||||
|
distributed by the Copyright Holder(s).
|
||||||
|
|
||||||
|
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||||
|
or substituting -- in part or in whole -- any of the components of the
|
||||||
|
Original Version, by changing formats or by porting the Font Software to a
|
||||||
|
new environment.
|
||||||
|
|
||||||
|
"Author" refers to any designer, engineer, programmer, technical
|
||||||
|
writer or other person who contributed to the Font Software.
|
||||||
|
|
||||||
|
PERMISSION & CONDITIONS
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||||
|
redistribute, and sell modified and unmodified copies of the Font
|
||||||
|
Software, subject to the following conditions:
|
||||||
|
|
||||||
|
1) Neither the Font Software nor any of its individual components,
|
||||||
|
in Original or Modified Versions, may be sold by itself.
|
||||||
|
|
||||||
|
2) Original or Modified Versions of the Font Software may be bundled,
|
||||||
|
redistributed and/or sold with any software, provided that each copy
|
||||||
|
contains the above copyright notice and this license. These can be
|
||||||
|
included either as stand-alone text files, human-readable headers or
|
||||||
|
in the appropriate machine-readable metadata fields within text or
|
||||||
|
binary files as long as those fields can be easily viewed by the user.
|
||||||
|
|
||||||
|
3) No Modified Version of the Font Software may use the Reserved Font
|
||||||
|
Name(s) unless explicit written permission is granted by the corresponding
|
||||||
|
Copyright Holder. This restriction only applies to the primary font name as
|
||||||
|
presented to the users.
|
||||||
|
|
||||||
|
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||||
|
Software shall not be used to promote, endorse or advertise any
|
||||||
|
Modified Version, except to acknowledge the contribution(s) of the
|
||||||
|
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||||
|
permission.
|
||||||
|
|
||||||
|
5) The Font Software, modified or unmodified, in part or in whole,
|
||||||
|
must be distributed entirely under this license, and must not be
|
||||||
|
distributed under any other license. The requirement for fonts to
|
||||||
|
remain under this license does not apply to any document created
|
||||||
|
using the Font Software.
|
||||||
|
|
||||||
|
TERMINATION
|
||||||
|
This license becomes null and void if any of the above conditions are
|
||||||
|
not met.
|
||||||
|
|
||||||
|
DISCLAIMER
|
||||||
|
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||||
|
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||||
|
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
|
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||||
|
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||||
|
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||||
135
brand-assets/fonts/Inconsolata/README.txt
Normal file
135
brand-assets/fonts/Inconsolata/README.txt
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
Inconsolata Variable Font
|
||||||
|
=========================
|
||||||
|
|
||||||
|
This download contains Inconsolata as both a variable font and static fonts.
|
||||||
|
|
||||||
|
Inconsolata is a variable font with these axes:
|
||||||
|
wdth
|
||||||
|
wght
|
||||||
|
|
||||||
|
This means all the styles are contained in a single file:
|
||||||
|
Inconsolata/Inconsolata-VariableFont_wdth,wght.ttf
|
||||||
|
|
||||||
|
If your app fully supports variable fonts, you can now pick intermediate styles
|
||||||
|
that aren’t available as static fonts. Not all apps support variable fonts, and
|
||||||
|
in those cases you can use the static font files for Inconsolata:
|
||||||
|
Inconsolata/static/Inconsolata_UltraCondensed-ExtraLight.ttf
|
||||||
|
Inconsolata/static/Inconsolata_UltraCondensed-Light.ttf
|
||||||
|
Inconsolata/static/Inconsolata_UltraCondensed-Regular.ttf
|
||||||
|
Inconsolata/static/Inconsolata_UltraCondensed-Medium.ttf
|
||||||
|
Inconsolata/static/Inconsolata_UltraCondensed-SemiBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_UltraCondensed-Bold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_UltraCondensed-ExtraBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_UltraCondensed-Black.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraCondensed-ExtraLight.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraCondensed-Light.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraCondensed-Regular.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraCondensed-Medium.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraCondensed-SemiBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraCondensed-Bold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraCondensed-ExtraBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraCondensed-Black.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Condensed-ExtraLight.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Condensed-Light.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Condensed-Regular.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Condensed-Medium.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Condensed-SemiBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Condensed-Bold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Condensed-ExtraBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Condensed-Black.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiCondensed-ExtraLight.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiCondensed-Light.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiCondensed-Regular.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiCondensed-Medium.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiCondensed-SemiBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiCondensed-Bold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiCondensed-ExtraBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiCondensed-Black.ttf
|
||||||
|
Inconsolata/static/Inconsolata-ExtraLight.ttf
|
||||||
|
Inconsolata/static/Inconsolata-Light.ttf
|
||||||
|
Inconsolata/static/Inconsolata-Regular.ttf
|
||||||
|
Inconsolata/static/Inconsolata-Medium.ttf
|
||||||
|
Inconsolata/static/Inconsolata-SemiBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata-Bold.ttf
|
||||||
|
Inconsolata/static/Inconsolata-ExtraBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata-Black.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiExpanded-ExtraLight.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiExpanded-Light.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiExpanded-Regular.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiExpanded-Medium.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiExpanded-SemiBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiExpanded-Bold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiExpanded-ExtraBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_SemiExpanded-Black.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Expanded-ExtraLight.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Expanded-Light.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Expanded-Regular.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Expanded-Medium.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Expanded-SemiBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Expanded-Bold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Expanded-ExtraBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_Expanded-Black.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraExpanded-ExtraLight.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraExpanded-Light.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraExpanded-Regular.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraExpanded-Medium.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraExpanded-SemiBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraExpanded-Bold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraExpanded-ExtraBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_ExtraExpanded-Black.ttf
|
||||||
|
Inconsolata/static/Inconsolata_UltraExpanded-ExtraLight.ttf
|
||||||
|
Inconsolata/static/Inconsolata_UltraExpanded-Light.ttf
|
||||||
|
Inconsolata/static/Inconsolata_UltraExpanded-Regular.ttf
|
||||||
|
Inconsolata/static/Inconsolata_UltraExpanded-Medium.ttf
|
||||||
|
Inconsolata/static/Inconsolata_UltraExpanded-SemiBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_UltraExpanded-Bold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_UltraExpanded-ExtraBold.ttf
|
||||||
|
Inconsolata/static/Inconsolata_UltraExpanded-Black.ttf
|
||||||
|
|
||||||
|
Get started
|
||||||
|
-----------
|
||||||
|
|
||||||
|
1. Install the font files you want to use
|
||||||
|
|
||||||
|
2. Use your app's font picker to view the font family and all the
|
||||||
|
available styles
|
||||||
|
|
||||||
|
Learn more about variable fonts
|
||||||
|
-------------------------------
|
||||||
|
|
||||||
|
https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
|
||||||
|
https://variablefonts.typenetwork.com
|
||||||
|
https://medium.com/variable-fonts
|
||||||
|
|
||||||
|
In desktop apps
|
||||||
|
|
||||||
|
https://theblog.adobe.com/can-variable-fonts-illustrator-cc
|
||||||
|
https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
|
||||||
|
|
||||||
|
Online
|
||||||
|
|
||||||
|
https://developers.google.com/fonts/docs/getting_started
|
||||||
|
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
|
||||||
|
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
|
||||||
|
|
||||||
|
Installing fonts
|
||||||
|
|
||||||
|
MacOS: https://support.apple.com/en-us/HT201749
|
||||||
|
Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
|
||||||
|
Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
|
||||||
|
|
||||||
|
Android Apps
|
||||||
|
|
||||||
|
https://developers.google.com/fonts/docs/android
|
||||||
|
https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
|
||||||
|
|
||||||
|
License
|
||||||
|
-------
|
||||||
|
Please read the full license text (OFL.txt) to understand the permissions,
|
||||||
|
restrictions and requirements for usage, redistribution, and modification.
|
||||||
|
|
||||||
|
You can use them in your products & projects – print or digital,
|
||||||
|
commercial or otherwise.
|
||||||
|
|
||||||
|
This isn't legal advice, please consider consulting a lawyer and see the full
|
||||||
|
license for all details.
|
||||||
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-Black.ttf
Normal file
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-Black.ttf
Normal file
Binary file not shown.
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-Bold.ttf
Normal file
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-Bold.ttf
Normal file
Binary file not shown.
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-ExtraBold.ttf
Normal file
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-ExtraBold.ttf
Normal file
Binary file not shown.
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-ExtraLight.ttf
Normal file
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-ExtraLight.ttf
Normal file
Binary file not shown.
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-Light.ttf
Normal file
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-Light.ttf
Normal file
Binary file not shown.
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-Medium.ttf
Normal file
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-Medium.ttf
Normal file
Binary file not shown.
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-Regular.ttf
Normal file
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-Regular.ttf
Normal file
Binary file not shown.
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-SemiBold.ttf
Normal file
BIN
brand-assets/fonts/Inconsolata/static/Inconsolata-SemiBold.ttf
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
brand-assets/fonts/Inter_Tight/InterTight-VariableFont_wght.ttf
Normal file
BIN
brand-assets/fonts/Inter_Tight/InterTight-VariableFont_wght.ttf
Normal file
Binary file not shown.
93
brand-assets/fonts/Inter_Tight/OFL.txt
Normal file
93
brand-assets/fonts/Inter_Tight/OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
Copyright 2022 The Inter Project Authors (https://github.com/rsms/inter-tight)
|
||||||
|
|
||||||
|
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||||
|
This license is copied below, and is also available with a FAQ at:
|
||||||
|
https://openfontlicense.org
|
||||||
|
|
||||||
|
|
||||||
|
-----------------------------------------------------------
|
||||||
|
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||||
|
-----------------------------------------------------------
|
||||||
|
|
||||||
|
PREAMBLE
|
||||||
|
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||||
|
development of collaborative font projects, to support the font creation
|
||||||
|
efforts of academic and linguistic communities, and to provide a free and
|
||||||
|
open framework in which fonts may be shared and improved in partnership
|
||||||
|
with others.
|
||||||
|
|
||||||
|
The OFL allows the licensed fonts to be used, studied, modified and
|
||||||
|
redistributed freely as long as they are not sold by themselves. The
|
||||||
|
fonts, including any derivative works, can be bundled, embedded,
|
||||||
|
redistributed and/or sold with any software provided that any reserved
|
||||||
|
names are not used by derivative works. The fonts and derivatives,
|
||||||
|
however, cannot be released under any other type of license. The
|
||||||
|
requirement for fonts to remain under this license does not apply
|
||||||
|
to any document created using the fonts or their derivatives.
|
||||||
|
|
||||||
|
DEFINITIONS
|
||||||
|
"Font Software" refers to the set of files released by the Copyright
|
||||||
|
Holder(s) under this license and clearly marked as such. This may
|
||||||
|
include source files, build scripts and documentation.
|
||||||
|
|
||||||
|
"Reserved Font Name" refers to any names specified as such after the
|
||||||
|
copyright statement(s).
|
||||||
|
|
||||||
|
"Original Version" refers to the collection of Font Software components as
|
||||||
|
distributed by the Copyright Holder(s).
|
||||||
|
|
||||||
|
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||||
|
or substituting -- in part or in whole -- any of the components of the
|
||||||
|
Original Version, by changing formats or by porting the Font Software to a
|
||||||
|
new environment.
|
||||||
|
|
||||||
|
"Author" refers to any designer, engineer, programmer, technical
|
||||||
|
writer or other person who contributed to the Font Software.
|
||||||
|
|
||||||
|
PERMISSION & CONDITIONS
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||||
|
redistribute, and sell modified and unmodified copies of the Font
|
||||||
|
Software, subject to the following conditions:
|
||||||
|
|
||||||
|
1) Neither the Font Software nor any of its individual components,
|
||||||
|
in Original or Modified Versions, may be sold by itself.
|
||||||
|
|
||||||
|
2) Original or Modified Versions of the Font Software may be bundled,
|
||||||
|
redistributed and/or sold with any software, provided that each copy
|
||||||
|
contains the above copyright notice and this license. These can be
|
||||||
|
included either as stand-alone text files, human-readable headers or
|
||||||
|
in the appropriate machine-readable metadata fields within text or
|
||||||
|
binary files as long as those fields can be easily viewed by the user.
|
||||||
|
|
||||||
|
3) No Modified Version of the Font Software may use the Reserved Font
|
||||||
|
Name(s) unless explicit written permission is granted by the corresponding
|
||||||
|
Copyright Holder. This restriction only applies to the primary font name as
|
||||||
|
presented to the users.
|
||||||
|
|
||||||
|
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||||
|
Software shall not be used to promote, endorse or advertise any
|
||||||
|
Modified Version, except to acknowledge the contribution(s) of the
|
||||||
|
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||||
|
permission.
|
||||||
|
|
||||||
|
5) The Font Software, modified or unmodified, in part or in whole,
|
||||||
|
must be distributed entirely under this license, and must not be
|
||||||
|
distributed under any other license. The requirement for fonts to
|
||||||
|
remain under this license does not apply to any document created
|
||||||
|
using the Font Software.
|
||||||
|
|
||||||
|
TERMINATION
|
||||||
|
This license becomes null and void if any of the above conditions are
|
||||||
|
not met.
|
||||||
|
|
||||||
|
DISCLAIMER
|
||||||
|
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||||
|
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||||
|
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
|
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||||
|
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||||
|
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||||
81
brand-assets/fonts/Inter_Tight/README.txt
Normal file
81
brand-assets/fonts/Inter_Tight/README.txt
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
Inter Tight Variable Font
|
||||||
|
=========================
|
||||||
|
|
||||||
|
This download contains Inter Tight as both variable fonts and static fonts.
|
||||||
|
|
||||||
|
Inter Tight is a variable font with this axis:
|
||||||
|
wght
|
||||||
|
|
||||||
|
This means all the styles are contained in these files:
|
||||||
|
Inter_Tight/InterTight-VariableFont_wght.ttf
|
||||||
|
Inter_Tight/InterTight-Italic-VariableFont_wght.ttf
|
||||||
|
|
||||||
|
If your app fully supports variable fonts, you can now pick intermediate styles
|
||||||
|
that aren’t available as static fonts. Not all apps support variable fonts, and
|
||||||
|
in those cases you can use the static font files for Inter Tight:
|
||||||
|
Inter_Tight/static/InterTight-Thin.ttf
|
||||||
|
Inter_Tight/static/InterTight-ExtraLight.ttf
|
||||||
|
Inter_Tight/static/InterTight-Light.ttf
|
||||||
|
Inter_Tight/static/InterTight-Regular.ttf
|
||||||
|
Inter_Tight/static/InterTight-Medium.ttf
|
||||||
|
Inter_Tight/static/InterTight-SemiBold.ttf
|
||||||
|
Inter_Tight/static/InterTight-Bold.ttf
|
||||||
|
Inter_Tight/static/InterTight-ExtraBold.ttf
|
||||||
|
Inter_Tight/static/InterTight-Black.ttf
|
||||||
|
Inter_Tight/static/InterTight-ThinItalic.ttf
|
||||||
|
Inter_Tight/static/InterTight-ExtraLightItalic.ttf
|
||||||
|
Inter_Tight/static/InterTight-LightItalic.ttf
|
||||||
|
Inter_Tight/static/InterTight-Italic.ttf
|
||||||
|
Inter_Tight/static/InterTight-MediumItalic.ttf
|
||||||
|
Inter_Tight/static/InterTight-SemiBoldItalic.ttf
|
||||||
|
Inter_Tight/static/InterTight-BoldItalic.ttf
|
||||||
|
Inter_Tight/static/InterTight-ExtraBoldItalic.ttf
|
||||||
|
Inter_Tight/static/InterTight-BlackItalic.ttf
|
||||||
|
|
||||||
|
Get started
|
||||||
|
-----------
|
||||||
|
|
||||||
|
1. Install the font files you want to use
|
||||||
|
|
||||||
|
2. Use your app's font picker to view the font family and all the
|
||||||
|
available styles
|
||||||
|
|
||||||
|
Learn more about variable fonts
|
||||||
|
-------------------------------
|
||||||
|
|
||||||
|
https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
|
||||||
|
https://variablefonts.typenetwork.com
|
||||||
|
https://medium.com/variable-fonts
|
||||||
|
|
||||||
|
In desktop apps
|
||||||
|
|
||||||
|
https://theblog.adobe.com/can-variable-fonts-illustrator-cc
|
||||||
|
https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
|
||||||
|
|
||||||
|
Online
|
||||||
|
|
||||||
|
https://developers.google.com/fonts/docs/getting_started
|
||||||
|
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
|
||||||
|
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
|
||||||
|
|
||||||
|
Installing fonts
|
||||||
|
|
||||||
|
MacOS: https://support.apple.com/en-us/HT201749
|
||||||
|
Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
|
||||||
|
Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
|
||||||
|
|
||||||
|
Android Apps
|
||||||
|
|
||||||
|
https://developers.google.com/fonts/docs/android
|
||||||
|
https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
|
||||||
|
|
||||||
|
License
|
||||||
|
-------
|
||||||
|
Please read the full license text (OFL.txt) to understand the permissions,
|
||||||
|
restrictions and requirements for usage, redistribution, and modification.
|
||||||
|
|
||||||
|
You can use them in your products & projects – print or digital,
|
||||||
|
commercial or otherwise.
|
||||||
|
|
||||||
|
This isn't legal advice, please consider consulting a lawyer and see the full
|
||||||
|
license for all details.
|
||||||
BIN
brand-assets/fonts/Inter_Tight/static/InterTight-Black.ttf
Normal file
BIN
brand-assets/fonts/Inter_Tight/static/InterTight-Black.ttf
Normal file
Binary file not shown.
BIN
brand-assets/fonts/Inter_Tight/static/InterTight-BlackItalic.ttf
Normal file
BIN
brand-assets/fonts/Inter_Tight/static/InterTight-BlackItalic.ttf
Normal file
Binary file not shown.
BIN
brand-assets/fonts/Inter_Tight/static/InterTight-Bold.ttf
Normal file
BIN
brand-assets/fonts/Inter_Tight/static/InterTight-Bold.ttf
Normal file
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user