Update branding assets and deployment configurations
- Enhanced moebius ring logo design in Blender - Updated Docker Compose for website-only deployment with improved config - Enhanced teaser layout with updated branding integration - Added installation and setup documentation - Consolidated planning and reports documentation - Updated gitignore to exclude Next.js build artifacts and archives 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tony
630
planning and reports/DESIGN_TOKENS_IMPLEMENTATION.md
Normal file
630
planning and reports/DESIGN_TOKENS_IMPLEMENTATION.md
Normal file
@@ -0,0 +1,630 @@
|
||||
# CHORUS Services Design Tokens Implementation Guide
|
||||
|
||||
## Overview
|
||||
|
||||
This document provides comprehensive implementation guidelines for the CHORUS Services design tokens system, aligned with the current brand specifications including the 8-color CHORUS system (carbon, mulberry, walnut, nickel, ocean, eucalyptus, sand, coral), three-font hierarchy (Exo Thin 100 for logos, Inter Tight for content, Inconsolata for code), ultra-minimalist aesthetic with no border radius, dark mode optimization, and comprehensive vision inclusivity features.
|
||||
|
||||
## 1. Color System Design Tokens
|
||||
|
||||
### 1.1 Primary Brand Colors
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* CHORUS 8-Color System - Authoritative Brand Colors */
|
||||
--chorus-carbon-950: #000000; /* Primary dark */
|
||||
--chorus-mulberry-950: #0b0213; /* Secondary dark */
|
||||
--chorus-mulberry-900: #1a1426; /* Lighter mulberry */
|
||||
--chorus-mulberry-800: #2a2639; /* Card backgrounds */
|
||||
--chorus-walnut-900: #403730; /* Accent warm */
|
||||
--chorus-walnut-800: #504743; /* Lighter walnut */
|
||||
--chorus-nickel-500: #c1bfb1; /* Neutral light */
|
||||
--chorus-nickel-400: #a0a0a0; /* Text tertiary */
|
||||
--chorus-nickel-100: #faf8f0; /* Light backgrounds */
|
||||
|
||||
/* CHORUS System Colors */
|
||||
--chorus-ocean-950: #2a3441; /* Info dark */
|
||||
--chorus-ocean-900: #3a4654; /* Info primary */
|
||||
--chorus-ocean-50: #cbefff; /* Info light */
|
||||
--chorus-eucalyptus-950: #2a3330; /* Success dark */
|
||||
--chorus-eucalyptus-900: #3a4540; /* Success primary */
|
||||
--chorus-eucalyptus-50: #bacfbf; /* Success light */
|
||||
--chorus-sand-950: #473e2f; /* Warning dark */
|
||||
--chorus-sand-900: #6a5c46; /* Warning primary */
|
||||
--chorus-sand-50: #cee1be; /* Warning light */
|
||||
--chorus-coral-950: #2e1d1c; /* Danger dark */
|
||||
--chorus-coral-900: #3e2d2c; /* Danger primary */
|
||||
--chorus-coral-50: #aea7ac; /* Danger light */
|
||||
|
||||
/* Natural Paper for contrast */
|
||||
--color-natural-paper: #F5F5DC;
|
||||
}
|
||||
```
|
||||
|
||||
### 1.2 Semantic Color Tokens
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* CHORUS Semantic Background Hierarchy */
|
||||
--bg-primary: var(--chorus-carbon-950); /* Pure black */
|
||||
--bg-secondary: var(--chorus-mulberry-950); /* Deep mulberry */
|
||||
--bg-tertiary: var(--chorus-mulberry-900); /* Card backgrounds */
|
||||
--bg-elevated: var(--chorus-mulberry-800); /* Elevated surfaces */
|
||||
--bg-overlay: rgba(11, 2, 19, 0.9); /* Mulberry overlay */
|
||||
--bg-accent: rgba(64, 55, 48, 0.1); /* Subtle walnut */
|
||||
|
||||
/* CHORUS Text Hierarchy */
|
||||
--text-primary: #FFFFFF; /* Pure white */
|
||||
--text-secondary: #e0e0e0; /* Light gray */
|
||||
--text-tertiary: #c0c0c0; /* Medium gray */
|
||||
--text-quaternary: #a0a0a0; /* Subtle gray */
|
||||
--text-disabled: #666666; /* Disabled state */
|
||||
--text-accent: var(--chorus-walnut-900); /* Walnut accent */
|
||||
--text-code: var(--chorus-nickel-500); /* Code text */
|
||||
|
||||
/* CHORUS Border Colors */
|
||||
--border-primary: rgba(255, 255, 255, 0.1); /* Subtle borders */
|
||||
--border-secondary: rgba(255, 255, 255, 0.05); /* Very subtle */
|
||||
--border-focus: var(--chorus-ocean-900); /* Ocean focus */
|
||||
--border-error: var(--chorus-coral-900); /* Coral error */
|
||||
--border-success: var(--chorus-eucalyptus-900); /* Eucalyptus success */
|
||||
--border-warning: var(--chorus-sand-900); /* Sand warning */
|
||||
|
||||
/* CHORUS Interactive States */
|
||||
--interactive-primary: var(--chorus-ocean-900);
|
||||
--interactive-primary-hover: var(--chorus-ocean-950);
|
||||
--interactive-secondary: var(--chorus-walnut-900);
|
||||
--interactive-secondary-hover: var(--chorus-walnut-800);
|
||||
--interactive-disabled: var(--chorus-nickel-400);
|
||||
|
||||
/* CHORUS Semantic Status Colors */
|
||||
--status-success: var(--chorus-eucalyptus-900);
|
||||
--status-warning: var(--chorus-sand-900);
|
||||
--status-error: var(--chorus-coral-900);
|
||||
--status-info: var(--chorus-ocean-900);
|
||||
--status-neutral: var(--chorus-nickel-500);
|
||||
}
|
||||
```
|
||||
|
||||
### 1.3 Alpha Transparency Tokens
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Background Alphas */
|
||||
--bg-alpha-10: rgba(255, 255, 255, 0.1);
|
||||
--bg-alpha-05: rgba(255, 255, 255, 0.05);
|
||||
--bg-alpha-02: rgba(255, 255, 255, 0.02);
|
||||
|
||||
/* Interactive Alphas */
|
||||
--interactive-alpha-hover: rgba(0, 122, 255, 0.1);
|
||||
--interactive-alpha-active: rgba(0, 122, 255, 0.2);
|
||||
--interactive-alpha-focus: rgba(0, 122, 255, 0.3);
|
||||
|
||||
/* Shadow Alphas */
|
||||
--shadow-alpha-light: rgba(0, 0, 0, 0.1);
|
||||
--shadow-alpha-medium: rgba(0, 0, 0, 0.2);
|
||||
--shadow-alpha-heavy: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
```
|
||||
|
||||
## 2. Typography System Design Tokens
|
||||
|
||||
### 2.1 Font Family Tokens
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* CHORUS Three-Font Hierarchy */
|
||||
--font-logo: 'Exo', 'Inter Tight', sans-serif; /* Exo Thin 100 for logos */
|
||||
--font-content: 'Inter Tight', 'Inter', system-ui, sans-serif; /* Inter Tight for content */
|
||||
--font-code: 'Inconsolata', ui-monospace, monospace; /* Inconsolata for code */
|
||||
|
||||
/* CHORUS Font Weight Tokens */
|
||||
--font-weight-logo: 100; /* Exo Thin for maximum sophistication */
|
||||
--font-weight-light: 300; /* Light weight */
|
||||
--font-weight-regular: 400; /* Inter Tight regular */
|
||||
--font-weight-medium: 500; /* Medium weight */
|
||||
--font-weight-semibold: 600; /* Inter Tight semibold */
|
||||
--font-weight-bold: 700; /* Bold weight */
|
||||
|
||||
/* Font Display Optimization */
|
||||
--font-display: swap; /* Optimize font loading */
|
||||
}
|
||||
```
|
||||
|
||||
### 2.2 Typography Scale Tokens
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Font Size Scale */
|
||||
--font-size-xs: 0.75rem; /* 12px */
|
||||
--font-size-sm: 0.875rem; /* 14px */
|
||||
--font-size-base: 1rem; /* 16px */
|
||||
--font-size-lg: 1.125rem; /* 18px */
|
||||
--font-size-xl: 1.25rem; /* 20px */
|
||||
--font-size-2xl: 1.5rem; /* 24px */
|
||||
--font-size-3xl: 1.875rem; /* 30px */
|
||||
--font-size-4xl: 2.25rem; /* 36px */
|
||||
--font-size-5xl: 3rem; /* 48px */
|
||||
--font-size-6xl: 3.75rem; /* 60px */
|
||||
--font-size-7xl: 4.5rem; /* 72px */
|
||||
--font-size-8xl: 6rem; /* 96px */
|
||||
|
||||
/* Line Height Tokens */
|
||||
--line-height-none: 1;
|
||||
--line-height-tight: 1.1;
|
||||
--line-height-snug: 1.2;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.6;
|
||||
--line-height-loose: 2;
|
||||
|
||||
/* Letter Spacing */
|
||||
--letter-spacing-tight: -0.025em;
|
||||
--letter-spacing-normal: 0;
|
||||
--letter-spacing-wide: 0.025em;
|
||||
--letter-spacing-wider: 0.05em;
|
||||
}
|
||||
```
|
||||
|
||||
### 2.3 Typography Component Tokens
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Hero Typography */
|
||||
--hero-font-family: var(--font-hero);
|
||||
--hero-font-weight: var(--font-weight-thin);
|
||||
--hero-font-size: clamp(3rem, 6vw, 6rem);
|
||||
--hero-line-height: var(--line-height-tight);
|
||||
--hero-letter-spacing: var(--letter-spacing-tight);
|
||||
|
||||
/* Heading Typography */
|
||||
--heading-h1-size: var(--font-size-5xl);
|
||||
--heading-h2-size: var(--font-size-4xl);
|
||||
--heading-h3-size: var(--font-size-3xl);
|
||||
--heading-h4-size: var(--font-size-2xl);
|
||||
--heading-h5-size: var(--font-size-xl);
|
||||
--heading-h6-size: var(--font-size-lg);
|
||||
|
||||
/* Body Typography */
|
||||
--body-large-size: var(--font-size-lg);
|
||||
--body-base-size: var(--font-size-base);
|
||||
--body-small-size: var(--font-size-sm);
|
||||
|
||||
/* Interface Typography */
|
||||
--ui-button-size: var(--font-size-base);
|
||||
--ui-label-size: var(--font-size-sm);
|
||||
--ui-caption-size: var(--font-size-xs);
|
||||
}
|
||||
```
|
||||
|
||||
## 3. Spacing System Design Tokens
|
||||
|
||||
### 3.1 Base Spacing Scale
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Base spacing unit: 4px */
|
||||
--space-0: 0;
|
||||
--space-px: 1px;
|
||||
--space-0-5: 0.125rem; /* 2px */
|
||||
--space-1: 0.25rem; /* 4px */
|
||||
--space-1-5: 0.375rem; /* 6px */
|
||||
--space-2: 0.5rem; /* 8px */
|
||||
--space-2-5: 0.625rem; /* 10px */
|
||||
--space-3: 0.75rem; /* 12px */
|
||||
--space-3-5: 0.875rem; /* 14px */
|
||||
--space-4: 1rem; /* 16px */
|
||||
--space-5: 1.25rem; /* 20px */
|
||||
--space-6: 1.5rem; /* 24px */
|
||||
--space-7: 1.75rem; /* 28px */
|
||||
--space-8: 2rem; /* 32px */
|
||||
--space-9: 2.25rem; /* 36px */
|
||||
--space-10: 2.5rem; /* 40px */
|
||||
--space-11: 2.75rem; /* 44px */
|
||||
--space-12: 3rem; /* 48px */
|
||||
--space-14: 3.5rem; /* 56px */
|
||||
--space-16: 4rem; /* 64px */
|
||||
--space-20: 5rem; /* 80px */
|
||||
--space-24: 6rem; /* 96px */
|
||||
--space-28: 7rem; /* 112px */
|
||||
--space-32: 8rem; /* 128px */
|
||||
--space-36: 9rem; /* 144px */
|
||||
--space-40: 10rem; /* 160px */
|
||||
--space-44: 11rem; /* 176px */
|
||||
--space-48: 12rem; /* 192px */
|
||||
--space-52: 13rem; /* 208px */
|
||||
--space-56: 14rem; /* 224px */
|
||||
--space-60: 15rem; /* 240px */
|
||||
--space-64: 16rem; /* 256px */
|
||||
--space-72: 18rem; /* 288px */
|
||||
--space-80: 20rem; /* 320px */
|
||||
--space-96: 24rem; /* 384px */
|
||||
}
|
||||
```
|
||||
|
||||
### 3.2 Semantic Spacing Tokens
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Component Spacing */
|
||||
--spacing-component-xs: var(--space-2);
|
||||
--spacing-component-sm: var(--space-4);
|
||||
--spacing-component-md: var(--space-6);
|
||||
--spacing-component-lg: var(--space-8);
|
||||
--spacing-component-xl: var(--space-12);
|
||||
|
||||
/* Layout Spacing */
|
||||
--spacing-layout-xs: var(--space-4);
|
||||
--spacing-layout-sm: var(--space-8);
|
||||
--spacing-layout-md: var(--space-16);
|
||||
--spacing-layout-lg: var(--space-24);
|
||||
--spacing-layout-xl: var(--space-32);
|
||||
|
||||
/* Section Spacing */
|
||||
--spacing-section-xs: var(--space-16);
|
||||
--spacing-section-sm: var(--space-24);
|
||||
--spacing-section-md: var(--space-32);
|
||||
--spacing-section-lg: var(--space-48);
|
||||
--spacing-section-xl: var(--space-64);
|
||||
}
|
||||
```
|
||||
|
||||
## 4. Border Radius Design Tokens
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* CHORUS Ultra-Minimalist Border Radius - Pure Geometry */
|
||||
--radius-none: 0; /* Default - no border radius */
|
||||
--radius-minimal: 1px; /* Only for critical accessibility needs */
|
||||
--radius-accessibility: 2px; /* Maximum for accessibility compliance */
|
||||
|
||||
/* CHORUS Component Radius - Ultra-Minimalist */
|
||||
--radius-button: var(--radius-none); /* Pure geometric buttons */
|
||||
--radius-card: var(--radius-none); /* Sharp-edged cards */
|
||||
--radius-input: var(--radius-minimal); /* Minimal for accessibility */
|
||||
--radius-modal: var(--radius-none); /* Geometric modals */
|
||||
--radius-logo: var(--radius-none); /* Sharp logo containers */
|
||||
|
||||
/* Note: Ultra-minimalist design philosophy */
|
||||
/* All components use sharp, geometric forms */
|
||||
/* Border radius only applied when accessibility requires it */
|
||||
}
|
||||
```
|
||||
|
||||
## 5. Shadow Design Tokens
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Shadow Scale */
|
||||
--shadow-xs: 0 1px 2px 0 var(--shadow-alpha-light);
|
||||
--shadow-sm: 0 1px 3px 0 var(--shadow-alpha-light), 0 1px 2px -1px var(--shadow-alpha-light);
|
||||
--shadow-base: 0 1px 3px 0 var(--shadow-alpha-light), 0 1px 2px -1px var(--shadow-alpha-light);
|
||||
--shadow-md: 0 4px 6px -1px var(--shadow-alpha-light), 0 2px 4px -2px var(--shadow-alpha-light);
|
||||
--shadow-lg: 0 10px 15px -3px var(--shadow-alpha-light), 0 4px 6px -4px var(--shadow-alpha-light);
|
||||
--shadow-xl: 0 20px 25px -5px var(--shadow-alpha-light), 0 8px 10px -6px var(--shadow-alpha-light);
|
||||
--shadow-2xl: 0 25px 50px -12px var(--shadow-alpha-medium);
|
||||
--shadow-inner: inset 0 2px 4px 0 var(--shadow-alpha-light);
|
||||
|
||||
/* Elevation Shadows for Dark Theme */
|
||||
--shadow-elevation-1: 0 2px 8px var(--shadow-alpha-medium);
|
||||
--shadow-elevation-2: 0 4px 16px var(--shadow-alpha-medium);
|
||||
--shadow-elevation-3: 0 8px 32px var(--shadow-alpha-heavy);
|
||||
--shadow-elevation-4: 0 16px 64px var(--shadow-alpha-heavy);
|
||||
|
||||
/* Interactive Shadows */
|
||||
--shadow-button-hover: 0 4px 12px var(--interactive-alpha-focus);
|
||||
--shadow-button-active: 0 2px 4px var(--interactive-alpha-active);
|
||||
--shadow-focus-ring: 0 0 0 3px var(--interactive-alpha-focus);
|
||||
}
|
||||
```
|
||||
|
||||
## 6. Animation and Transition Tokens
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Duration Tokens */
|
||||
--duration-instant: 0ms;
|
||||
--duration-fast: 150ms;
|
||||
--duration-normal: 250ms;
|
||||
--duration-slow: 350ms;
|
||||
--duration-slower: 500ms;
|
||||
|
||||
/* Easing Functions */
|
||||
--ease-linear: linear;
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
/* Component Transitions */
|
||||
--transition-button: all var(--duration-fast) var(--ease-out);
|
||||
--transition-hover: all var(--duration-normal) var(--ease-out);
|
||||
--transition-focus: all var(--duration-fast) var(--ease-out);
|
||||
--transition-modal: all var(--duration-normal) var(--ease-in-out);
|
||||
--transition-slide: transform var(--duration-normal) var(--ease-out);
|
||||
}
|
||||
```
|
||||
|
||||
## 7. Z-Index System Tokens
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Z-Index Scale */
|
||||
--z-auto: auto;
|
||||
--z-0: 0;
|
||||
--z-10: 10;
|
||||
--z-20: 20;
|
||||
--z-30: 30;
|
||||
--z-40: 40;
|
||||
--z-50: 50;
|
||||
|
||||
/* Component Z-Index */
|
||||
--z-dropdown: 1000;
|
||||
--z-sticky: 1020;
|
||||
--z-fixed: 1030;
|
||||
--z-modal-backdrop: 1040;
|
||||
--z-offcanvas: 1050;
|
||||
--z-modal: 1060;
|
||||
--z-popover: 1070;
|
||||
--z-tooltip: 1080;
|
||||
--z-toast: 1090;
|
||||
}
|
||||
```
|
||||
|
||||
## 8. Responsive Breakpoint Tokens
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Breakpoint Values */
|
||||
--breakpoint-xs: 320px;
|
||||
--breakpoint-sm: 640px;
|
||||
--breakpoint-md: 768px;
|
||||
--breakpoint-lg: 1024px;
|
||||
--breakpoint-xl: 1280px;
|
||||
--breakpoint-2xl: 1536px;
|
||||
}
|
||||
|
||||
/* Media Query Mixins */
|
||||
@custom-media --xs-up (min-width: 320px);
|
||||
@custom-media --sm-up (min-width: 640px);
|
||||
@custom-media --md-up (min-width: 768px);
|
||||
@custom-media --lg-up (min-width: 1024px);
|
||||
@custom-media --xl-up (min-width: 1280px);
|
||||
@custom-media --2xl-up (min-width: 1536px);
|
||||
|
||||
@custom-media --xs-down (max-width: 639px);
|
||||
@custom-media --sm-down (max-width: 767px);
|
||||
@custom-media --md-down (max-width: 1023px);
|
||||
@custom-media --lg-down (max-width: 1279px);
|
||||
@custom-media --xl-down (max-width: 1535px);
|
||||
```
|
||||
|
||||
## 9. Component-Specific Tokens
|
||||
|
||||
### 9.1 Button Tokens
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* CHORUS Button Tokens - Ultra-Minimalist Design */
|
||||
--button-height-sm: 2rem; /* 32px - mobile touch target */
|
||||
--button-height-md: 2.75rem; /* 44px - minimum touch target */
|
||||
--button-height-lg: 3rem; /* 48px - comfortable desktop */
|
||||
--button-height-xl: 3.5rem; /* 56px - hero buttons */
|
||||
|
||||
--button-padding-x-sm: var(--space-3); /* 12px */
|
||||
--button-padding-x-md: var(--space-6); /* 24px */
|
||||
--button-padding-x-lg: var(--space-8); /* 32px */
|
||||
--button-padding-x-xl: var(--space-12); /* 48px */
|
||||
|
||||
/* CHORUS Button Typography */
|
||||
--button-font-family: var(--font-content); /* Inter Tight */
|
||||
--button-font-size-sm: var(--font-size-sm);
|
||||
--button-font-size-md: var(--font-size-base);
|
||||
--button-font-size-lg: var(--font-size-lg);
|
||||
--button-font-weight: var(--font-weight-semibold);
|
||||
|
||||
/* CHORUS Button Colors with 8-Color System */
|
||||
--button-primary-bg: var(--chorus-ocean-900);
|
||||
--button-primary-bg-hover: var(--chorus-ocean-950);
|
||||
--button-primary-text: var(--text-primary);
|
||||
--button-primary-border: var(--chorus-ocean-900);
|
||||
|
||||
--button-secondary-bg: transparent;
|
||||
--button-secondary-border: var(--chorus-walnut-900);
|
||||
--button-secondary-text: var(--chorus-walnut-900);
|
||||
--button-secondary-bg-hover: var(--chorus-walnut-900);
|
||||
--button-secondary-text-hover: var(--text-primary);
|
||||
|
||||
--button-success-bg: var(--chorus-eucalyptus-900);
|
||||
--button-warning-bg: var(--chorus-sand-900);
|
||||
--button-danger-bg: var(--chorus-coral-900);
|
||||
|
||||
/* Geometric button styling - no border radius */
|
||||
--button-border-radius: var(--radius-none);
|
||||
--button-border-width: 2px;
|
||||
}
|
||||
```
|
||||
|
||||
### 9.2 Form Input Tokens
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* CHORUS Input Tokens */
|
||||
--input-height-sm: 2rem; /* 32px */
|
||||
--input-height-md: 2.75rem; /* 44px - accessibility minimum */
|
||||
--input-height-lg: 3rem; /* 48px */
|
||||
|
||||
--input-padding-x: var(--space-4); /* 16px */
|
||||
--input-padding-y: var(--space-3); /* 12px */
|
||||
|
||||
/* CHORUS Input Colors with 8-Color System */
|
||||
--input-bg: var(--chorus-mulberry-800);
|
||||
--input-border: var(--border-primary);
|
||||
--input-border-focus: var(--chorus-ocean-900);
|
||||
--input-text: var(--text-primary);
|
||||
--input-placeholder: var(--text-quaternary);
|
||||
--input-label: var(--text-primary);
|
||||
|
||||
/* CHORUS Input States */
|
||||
--input-border-error: var(--chorus-coral-900);
|
||||
--input-border-success: var(--chorus-eucalyptus-900);
|
||||
--input-border-warning: var(--chorus-sand-900);
|
||||
|
||||
/* CHORUS Input Typography */
|
||||
--input-font-family: var(--font-content); /* Inter Tight */
|
||||
--input-font-size: var(--font-size-base);
|
||||
--input-font-weight: var(--font-weight-regular);
|
||||
|
||||
/* Ultra-minimalist input styling */
|
||||
--input-border-radius: var(--radius-minimal);
|
||||
--input-border-width: 1px;
|
||||
}
|
||||
```
|
||||
|
||||
### 9.3 Card Tokens
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* CHORUS Card Tokens - Ultra-Minimalist Design */
|
||||
--card-bg: var(--chorus-mulberry-950);
|
||||
--card-border: var(--border-primary);
|
||||
--card-radius: var(--radius-none); /* Pure geometric form */
|
||||
--card-shadow: var(--shadow-elevation-1);
|
||||
--card-shadow-hover: var(--shadow-elevation-2);
|
||||
--card-shadow-focus: 0 0 0 3px rgba(58, 70, 84, 0.3); /* Ocean focus ring */
|
||||
|
||||
--card-padding-sm: var(--space-4); /* 16px */
|
||||
--card-padding-md: var(--space-8); /* 32px */
|
||||
--card-padding-lg: var(--space-12); /* 48px */
|
||||
|
||||
/* CHORUS Card Header */
|
||||
--card-header-border: var(--border-secondary);
|
||||
--card-header-padding: var(--space-6);
|
||||
--card-header-bg: transparent;
|
||||
|
||||
/* CHORUS Card Typography */
|
||||
--card-title-font: var(--font-content);
|
||||
--card-title-weight: var(--font-weight-semibold);
|
||||
--card-title-color: var(--text-primary);
|
||||
--card-body-font: var(--font-content);
|
||||
--card-body-color: var(--text-secondary);
|
||||
|
||||
/* Three.js Logo Integration */
|
||||
--card-logo-size: 32px;
|
||||
--card-logo-spacing: var(--space-3);
|
||||
}
|
||||
```
|
||||
|
||||
## 10. Usage Guidelines
|
||||
|
||||
### 10.1 CHORUS Token Naming Conventions
|
||||
|
||||
- **CHORUS Color tokens**: `--chorus-carbon`, `--chorus-mulberry`, `--chorus-walnut`, etc.
|
||||
- **Semantic tokens**: `--text-primary`, `--bg-secondary`, `--interactive-primary`
|
||||
- **Component tokens**: `--button-height-md`, `--card-padding-lg`, `--logo-size-default`
|
||||
- **Accessibility tokens**: `[data-accessibility="protanopia"]`, `[data-reduced-motion]`
|
||||
- **Font tokens**: `--font-logo` (Exo), `--font-content` (Inter Tight), `--font-code` (Inconsolata)
|
||||
|
||||
### 10.2 Token Application Examples
|
||||
|
||||
```css
|
||||
/* Using primitive tokens */
|
||||
.custom-element {
|
||||
color: var(--color-orchestration-blue);
|
||||
margin: var(--space-4);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
/* Using semantic tokens (preferred) */
|
||||
.text-content {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
/* Using component tokens */
|
||||
.custom-button {
|
||||
height: var(--button-height-md);
|
||||
padding: 0 var(--button-padding-x-md);
|
||||
font-size: var(--button-font-size-md);
|
||||
font-weight: var(--button-font-weight);
|
||||
}
|
||||
```
|
||||
|
||||
### 10.3 Dark Mode Considerations
|
||||
|
||||
All tokens are optimized for dark mode by default. When implementing components:
|
||||
|
||||
1. Always use semantic tokens for colors
|
||||
2. Test contrast ratios with tools like WebAIM
|
||||
3. Ensure focus states are clearly visible
|
||||
4. Verify readability across all typography scales
|
||||
|
||||
### 10.4 Responsive Implementation
|
||||
|
||||
```css
|
||||
/* Responsive spacing example */
|
||||
.section {
|
||||
padding: var(--spacing-section-sm);
|
||||
}
|
||||
|
||||
@media (--md-up) {
|
||||
.section {
|
||||
padding: var(--spacing-section-md);
|
||||
}
|
||||
}
|
||||
|
||||
@media (--xl-up) {
|
||||
.section {
|
||||
padding: var(--spacing-section-lg);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 11. Validation and Testing
|
||||
|
||||
### 11.1 Token Validation Checklist
|
||||
|
||||
- [ ] All color tokens meet WCAG contrast requirements
|
||||
- [ ] Typography tokens scale properly across breakpoints
|
||||
- [ ] Spacing tokens create consistent visual rhythm
|
||||
- [ ] Animation tokens respect reduced motion preferences
|
||||
- [ ] Z-index tokens prevent stacking conflicts
|
||||
|
||||
### 11.2 Automated Testing
|
||||
|
||||
Consider implementing automated tests for:
|
||||
- Color contrast validation
|
||||
- Typography scale consistency
|
||||
- Spacing rhythm verification
|
||||
- Component token completeness
|
||||
|
||||
## 12. Accessibility Design Tokens
|
||||
|
||||
### 12.1 Vision Inclusivity Token Overrides
|
||||
|
||||
```css
|
||||
/* CHORUS Accessibility Theme Overrides */
|
||||
/* Protanopia (Red-blind) Support */
|
||||
[data-accessibility=\"protanopia\"] {
|
||||
--chorus-danger: var(--chorus-ocean-900); /* Use ocean instead of coral */\n --chorus-success: var(--chorus-sand-900); /* Use sand instead of eucalyptus */\n --status-error: var(--chorus-ocean-900);\n --status-success: var(--chorus-sand-900);\n --border-error: var(--chorus-ocean-900);\n}\n\n/* Deuteranopia (Green-blind) Support */\n[data-accessibility=\"deuteranopia\"] {\n --chorus-success: var(--chorus-ocean-900); /* Use ocean instead of eucalyptus */\n --chorus-info: var(--chorus-sand-900); /* Use sand for info */\n --status-success: var(--chorus-ocean-900);\n --status-info: var(--chorus-sand-900);\n}\n\n/* Tritanopia (Blue-blind) Support */\n[data-accessibility=\"tritanopia\"] {\n --chorus-info: var(--chorus-coral-900); /* Use coral instead of ocean */\n --chorus-warning: var(--chorus-eucalyptus-900); /* Use eucalyptus instead of sand */\n --status-info: var(--chorus-coral-900);\n --status-warning: var(--chorus-eucalyptus-900);\n}\n\n/* Achromatopsia (Complete color blindness) Support */\n[data-accessibility=\"achromatopsia\"] {\n --chorus-primary: #000000; /* Pure black */\n --chorus-secondary: #333333; /* Dark gray */\n --chorus-accent: #666666; /* Medium gray */\n --chorus-neutral: #999999; /* Light gray */\n --chorus-info: #444444; /* Dark medium */\n --chorus-success: #222222; /* Very dark */\n --chorus-warning: #777777; /* Medium light */\n --chorus-danger: #111111; /* Almost black */\n}\n\n/* High Contrast Mode */\n[data-high-contrast] {\n --border-primary: rgba(255, 255, 255, 0.3);\n --border-focus: var(--chorus-nickel-500);\n --text-secondary: #ffffff;\n --button-border-width: 3px;\n}\n\n/* Reduced Motion */\n[data-reduced-motion] {\n --transition-duration: 0ms;\n --animation-duration: 0ms;\n}\n```
|
||||
|
||||
### 12.2 Touch Target Accessibility Tokens
|
||||
|
||||
```css\n:root {\n /* Minimum touch targets for accessibility */\n --touch-target-min: 44px; /* WCAG AA minimum */\n --touch-target-comfortable: 48px; /* Comfortable size */\n --touch-target-large: 56px; /* Large interactive elements */\n \n /* Focus ring specifications */\n --focus-ring-width: 3px;\n --focus-ring-color: var(--chorus-ocean-900);\n --focus-ring-offset: 2px;\n --focus-ring-style: solid;\n}\n```
|
||||
|
||||
## 13. Three.js Logo Design Tokens
|
||||
|
||||
### 13.1 M\u00f6bius Ring Logo Specifications
|
||||
|
||||
```css\n:root {\n /* Three.js Logo Sizing */\n --logo-size-xs: 24px; /* Inline usage */\n --logo-size-sm: 32px; /* Small components */\n --logo-size-md: 48px; /* Default size */\n --logo-size-lg: 64px; /* Header/hero usage */\n --logo-size-xl: 80px; /* Large hero sections */\n --logo-size-xxl: 128px; /* Special presentations */\n \n /* Mobile responsive logo sizing */\n --logo-size-mobile: var(--logo-size-sm);\n --logo-size-tablet: var(--logo-size-md);\n --logo-size-desktop: var(--logo-size-lg);\n \n /* Logo animation specifications */\n --logo-rotation-x: 0.005; /* Subtle X-axis rotation */\n --logo-rotation-y: 0.01; /* Y-axis rotation speed */\n --logo-opacity: 0.9; /* Slight transparency */\n --logo-material: 'phong'; /* Material type */\n \n /* Logo color themes */\n --logo-theme-carbon: var(--chorus-carbon-950);\n --logo-theme-mulberry: var(--chorus-mulberry-950);\n --logo-theme-walnut: var(--chorus-walnut-900);\n --logo-theme-nickel: var(--chorus-nickel-500);\n \n /* Accessibility logo overrides */\n --logo-animation-disabled: 'prefers-reduced-motion';\n --logo-high-contrast-outline: 2px solid var(--chorus-nickel-500);\n}\n\n/* Logo container specifications */\n.chorus-logo {\n width: var(--logo-size-md);\n height: var(--logo-size-md);\n display: inline-block;\n vertical-align: middle;\n}\n\n/* Responsive logo sizing */\n@media (max-width: 768px) {\n .chorus-logo {\n width: var(--logo-size-mobile);\n height: var(--logo-size-mobile);\n }\n}\n\n@media (min-width: 1024px) {\n .chorus-logo {\n width: var(--logo-size-desktop);\n height: var(--logo-size-desktop);\n }\n}\n\n/* Accessibility considerations */\n@media (prefers-reduced-motion: reduce) {\n .chorus-logo {\n animation: none !important;\n }\n}\n\n[data-high-contrast] .chorus-logo {\n outline: var(--logo-high-contrast-outline);\n outline-offset: 2px;\n}\n```
|
||||
|
||||
## 14. Implementation Success Criteria
|
||||
|
||||
### 14.1 Brand Compliance Checklist
|
||||
|
||||
- [ ] All 8 CHORUS colors implemented correctly\n- [ ] Three-font hierarchy (Exo Thin, Inter Tight, Inconsolata) functioning\n- [ ] Ultra-minimalist design with no border radius except accessibility needs\n- [ ] Dark mode optimized as default\n- [ ] Vision inclusivity themes working for all color-blind variations\n- [ ] Three.js M\u00f6bius logo rendering properly\n- [ ] Touch targets meeting 44px minimum\n- [ ] Focus indicators using CHORUS ocean color\n- [ ] Reduced motion preferences respected\n- [ ] High contrast mode functional
|
||||
|
||||
### 14.2 Performance Targets
|
||||
|
||||
- [ ] Font loading optimized with font-display: swap\n- [ ] Design token CSS under 15KB\n- [ ] Three.js logo rendering at 60fps\n- [ ] Accessibility theme switching under 100ms\n- [ ] Color contrast ratios >4.5:1 for all text\n- [ ] Touch target accessibility 100% compliant\n\n### 14.3 Technical Validation
|
||||
|
||||
- [ ] CSS custom properties supported in all target browsers\n- [ ] WebGL compatibility for Three.js logo\n- [ ] Screen reader compatibility with semantic color usage\n- [ ] Keyboard navigation with proper focus management\n- [ ] Color-blind simulation testing passed\n\nThis comprehensive design token system provides the foundation for consistent, accessible, and maintainable styling across the CHORUS Services platform while ensuring excellent user experience at scale with full brand compliance and vision inclusivity support."
|
||||
Reference in New Issue
Block a user