4041 lines
241 KiB
HTML
4041 lines
241 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="dark h-full">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>CHORUS Services Brand Style Guide</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
darkMode: 'class',
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
// Core Brand Colors
|
||
'carbon': {
|
||
950: '#000000',
|
||
900: '#0a0a0a',
|
||
800: '#1a1a1a',
|
||
700: '#2a2a2a',
|
||
600: '#666666',
|
||
500: '#808080',
|
||
400: '#a0a0a0',
|
||
300: '#c0c0c0',
|
||
200: '#e0e0e0',
|
||
100: '#f0f0f0',
|
||
50: '#f8f8f8'
|
||
},
|
||
'mulberry': {
|
||
950: '#0b0213',
|
||
900: '#1a1426',
|
||
800: '#2a2639',
|
||
700: '#3a384c',
|
||
600: '#4a4a5f',
|
||
500: '#5a5c72',
|
||
400: '#7a7e95',
|
||
300: '#9aa0b8',
|
||
200: '#bac2db',
|
||
100: '#dae4fe',
|
||
50: '#f0f4ff'
|
||
},
|
||
'walnut': {
|
||
950: '#1E1815',
|
||
900: '#403730',
|
||
800: '#504743',
|
||
700: '#605756',
|
||
600: '#706769',
|
||
500: '#80777c',
|
||
400: '#90878f',
|
||
300: '#a09aa2',
|
||
200: '#b0adb5',
|
||
100: '#c0c0c8',
|
||
50: '#d0d3db',
|
||
25: '#e0e6ee'
|
||
},
|
||
'nickel': {
|
||
950: '#171717',
|
||
900: '#2a2a2a',
|
||
800: '#3d3d3d',
|
||
700: '#505050',
|
||
600: '#636363',
|
||
500: '#767676',
|
||
400: '#c1bfb1',
|
||
300: '#d4d2c6',
|
||
200: '#e7e5db',
|
||
100: '#faf8f0',
|
||
50: '#fdfcf8'
|
||
},
|
||
// System Colors
|
||
'ocean': {
|
||
950: '#2a3441',
|
||
900: '#3a4654',
|
||
800: '#4a5867',
|
||
700: '#5a6c80',
|
||
600: '#6a7e99',
|
||
500: '#7a90b2',
|
||
400: '#8ba3c4',
|
||
300: '#9bb6d6',
|
||
200: '#abc9e8',
|
||
100: '#bbdcfa',
|
||
50: '#cbefff'
|
||
},
|
||
'eucalyptus': {
|
||
950: '#2a3330',
|
||
900: '#3a4540',
|
||
800: '#4a5750',
|
||
700: '#515d54',
|
||
600: '#5a6964',
|
||
500: '#6a7974',
|
||
400: '#7a8a7f',
|
||
300: '#8a9b8f',
|
||
200: '#9aac9f',
|
||
100: '#aabdaf',
|
||
50: '#bacfbf'
|
||
},
|
||
'sand': {
|
||
950: '#8E7B5E', //'#473e2f',
|
||
900: '#99886E', //'#6a5c46',
|
||
800: '#A4957E', //'#655d4e',
|
||
700: '#AFA28E', //'#8e7b5e',
|
||
600: '#BAAF9F', //'#a19179',
|
||
500: '#C5BCAF', //'#b4a794',
|
||
400: '#D0C9BF', //'#c6bdae',
|
||
300: '#DBD6CF', //'#d9d3c9',
|
||
200: '#E6E3DF', //'#ece9e4',
|
||
100: '#F1F0EF', //'#bed1ae',
|
||
50: '#F1F0EF', //'#cee1be'
|
||
},
|
||
'coral': {
|
||
950: '#6A4A48',
|
||
900: '#7B5D5A',
|
||
800: '#8C706C',
|
||
700: '#9D8380',
|
||
600: '#AE9693',
|
||
500: '#BFAAA7',
|
||
400: '#D0BDBB',
|
||
300: '#E1D1CF',
|
||
200: '#F2E4E3',
|
||
100: '#9e979c',
|
||
50: '#aea7ac'
|
||
}
|
||
},
|
||
fontFamily: {
|
||
sans: ['Inter Tight', 'Inter', 'system-ui', 'sans-serif'],
|
||
mono: ['Inconsolata', 'ui-monospace', 'monospace'],
|
||
logo: ['Exo', 'Inter Tight', 'sans-serif']
|
||
},
|
||
spacing: {
|
||
'chorus-xxs': '0.854rem',
|
||
'chorus-xs': '0.945rem',
|
||
'chorus-sm': '1.0rem',
|
||
'chorus-base': '1.25rem',
|
||
'chorus-md': '1.953rem',
|
||
'chorus-lg': '2.441rem',
|
||
'chorus-xl': '3.052rem',
|
||
'chorus-xxl': '6.1rem',
|
||
},
|
||
// CHORUS Proportional Typography System (Major Third - 1.25 ratio)
|
||
fontSize: {
|
||
// Base scale using Minor Third (1.20) ratio for harmonious proportions
|
||
'xs': ['0.854rem', { lineHeight: '1.00rem', fontWeight: '600' }], // 10.24px
|
||
'sm': ['0.954rem', { lineHeight: '1.10rem', fontWeight: '500' }], // 12.8px
|
||
'base': ['1rem', { lineHeight: '1.50rem', fontWeight: '400' }], // 16px (foundation)
|
||
'lg': ['1.25rem', { lineHeight: '1.75rem', fontWeight: '400' }], // 20px
|
||
'xl': ['1.563rem', { lineHeight: '2.00rem', fontWeight: '400' }], // 25px
|
||
'2xl': ['1.953rem', { lineHeight: '2.50rem', fontWeight: '300' }], // 31.25px
|
||
'3xl': ['2.441rem', { lineHeight: '3.00rem', fontWeight: '200' }], // 39px
|
||
'4xl': ['3.052rem', { lineHeight: '3.50rem', fontWeight: '100' }], // 48.8px
|
||
'5xl': ['3.815rem', { lineHeight: '4.00rem', fontWeight: '100' }], // 61px
|
||
|
||
// Semantic heading sizes for easier usage
|
||
'h7': ['1.000rem', { lineHeight: '1.25rem', fontWeight: '400' }], // 14px
|
||
'h6': ['1.250rem', { lineHeight: '1.563rem', fontWeight: '500' }], // 16px
|
||
'h5': ['1.563rem', { lineHeight: '1.953rem', fontWeight: '500' }], // 20px
|
||
'h4': ['1.953rem', { lineHeight: '2.441rem', fontWeight: '600' }], // 25px
|
||
'h3': ['2.441rem', { lineHeight: '3.052rem', fontWeight: '600' }], // 31.25px
|
||
'h2': ['3.052rem', { lineHeight: '4.768rem', fontWeight: '700' }], // 39px
|
||
'h1': ['4.768rem', { lineHeight: '6.96rem', fontWeight: '700' }], // 76.3px
|
||
|
||
|
||
// Display sizes for hero sections
|
||
'display-sm': ['3.815rem', { lineHeight: '4rem', fontWeight: '800' }], // 61px
|
||
'display-md': ['4.768rem', { lineHeight: '5rem', fontWeight: '800' }], // 76.3px
|
||
'display-lg': ['5.96rem', { lineHeight: '6rem', fontWeight: '800' }], // 95.4px
|
||
},
|
||
|
||
// Extended rem-based sizing for complete system consistency
|
||
width: {
|
||
'rem-xs': '0.640rem',
|
||
'rem-sm': '0.800rem',
|
||
'rem-base': '1.000rem',
|
||
'rem-lg': '1.250rem',
|
||
'rem-xl': '1.563rem',
|
||
'rem-2xl': '1.953rem',
|
||
'rem-3xl': '2.441rem',
|
||
'rem-4xl': '3.052rem',
|
||
'rem-5xl': '3.815rem',
|
||
},
|
||
|
||
height: {
|
||
'rem-xs': '0.640rem',
|
||
'rem-sm': '0.800rem',
|
||
'rem-base': '1.000rem',
|
||
'rem-lg': '1.250rem',
|
||
'rem-xl': '1.563rem',
|
||
'rem-2xl': '1.953rem',
|
||
'rem-3xl': '2.441rem',
|
||
'rem-4xl': '3.052rem',
|
||
'rem-5xl': '3.815rem',
|
||
},
|
||
|
||
// Border radius using proportional scale
|
||
borderRadius: {
|
||
'none': '0',
|
||
'micro': '0.125rem', // 2px
|
||
'sm': '0.25rem', // 4px
|
||
'base': '0.375rem', // 6px
|
||
'md': '0.5rem', // 8px
|
||
'lg': '0.75rem', // 12px
|
||
'xl': '1rem', // 16px
|
||
'full': '9999px',
|
||
}
|
||
}
|
||
},
|
||
plugins: [function({ addUtilities }){
|
||
addUtilities({
|
||
'.h7': { fontSize: '0.8rem', lineHeight: '1.25rem', fontWeight: '700', letterSpacing: '0.05em', textTransform: 'uppercase' }
|
||
})
|
||
}]
|
||
};
|
||
</script>
|
||
<style>
|
||
/* CHORUS Proportional Typography System - 18px Base */
|
||
html {
|
||
font-size: 16px; /* Base size: 18px instead of browser default 16px */
|
||
}
|
||
|
||
/* CHORUS Brand CSS Variables - Ultra-Minimalist Implementation */
|
||
:root {
|
||
/* Core Brand Colors */
|
||
--color-carbon: #000000;
|
||
--color-mulberry: #0b0213;
|
||
--color-walnut: #403730;
|
||
--color-nickel: #c1bfb1;
|
||
|
||
/* CHORUS Semantic Color Tokens - 8 Color System */
|
||
--chorus-primary: #FFFFFF; /* carbon-950 */
|
||
--chorus-secondary: #CCCCCC; /* mulberry-950 */
|
||
--chorus-accent: #403730; /* walnut-900 */
|
||
--chorus-neutral: #c1bfb1; /* nickel-500 */
|
||
--chorus-info: #3a4654; /* ocean-900 */
|
||
--chorus-success: #3a4540; /* eucalyptus-900 */
|
||
--chorus-warning: #6a5c46; /* sand-900 */
|
||
--chorus-danger: #3e2d2c; /* coral-900 */
|
||
|
||
/* Light Theme Variables */
|
||
--bg-primary: #FFFFFF;
|
||
--bg-secondary: #CCCCCC;
|
||
--bg-tertiary: #AAAAAA;
|
||
--bg-accent: #F7F7E2;
|
||
|
||
--text-primary: #000000;
|
||
--text-secondary: #1A1A1A;
|
||
--text-tertiary: #333333;
|
||
--text-subtle: #666666;
|
||
--text-ghost: #999999;
|
||
|
||
--border-invisible: #FAFAFA;
|
||
--border-subtle: #F0F0F0;
|
||
--border-defined: #E5E5E5;
|
||
--border-emphasis: #CCCCCC;
|
||
|
||
--accent-primary: #0b0213; /* Mulberry */
|
||
--accent-secondary: #403730; /* Walnut */
|
||
--accent-system: #5a6c80; /* Ocean */
|
||
|
||
/* Spacing System */
|
||
--space-micro: 0.25rem; /* 8px */
|
||
--space-sm: 0.5rem; /* 16px */
|
||
--space-md: 1rem; /* 32px */
|
||
--space-lg: 2rem; /* 64px */
|
||
--space-xl: 4rem; /* 128px */
|
||
--space-xxl: 8rem; /* 256px */
|
||
}
|
||
|
||
/* Dark Theme Variables */
|
||
.dark {
|
||
--bg-primary: #000000;
|
||
--bg-secondary: #333333;
|
||
--bg-tertiary: #555555; /* Mulberry */
|
||
--bg-accent: #1a1426;
|
||
|
||
--text-primary: #FFFFFF;
|
||
--text-secondary: #E0E0E0;
|
||
--text-tertiary: #C0C0C0;
|
||
--text-subtle: #A0A0A0;
|
||
--text-ghost: #808080;
|
||
|
||
--border-invisible: #1a1a1a;
|
||
--border-subtle: #2a2a2a;
|
||
--border-defined: #3a3a3a;
|
||
--border-emphasis: #4a4a4a;
|
||
|
||
--accent-primary: #F5F5DC; /* Sand */
|
||
--accent-secondary: #c1bfb1; /* Nickel */
|
||
}
|
||
|
||
/* Accessibility theme overrides - non-conflicting */
|
||
[data-theme="protanopia"] {
|
||
--color-ring-primary: #1e40af; /* Blue-800 for logo materials only */
|
||
}
|
||
|
||
[data-theme="deuteranopia"] {
|
||
--color-ring-primary: #6b21a8; /* Purple-800 for logo materials only */
|
||
}
|
||
|
||
[data-theme="tritanopia"] {
|
||
--color-ring-primary: #991b1b; /* Red-800 for logo materials only */
|
||
}
|
||
|
||
[data-theme="achromatopsia"] {
|
||
--color-ring-primary: #374151; /* Gray-700 for logo materials only */
|
||
}
|
||
|
||
/* CHORUS 8-Color Accessibility System */
|
||
/* Protanopia (Red-blind) - Preserve carbon/mulberry/walnut, adjust coral/eucalyptus */
|
||
[data-accessibility="protanopia"] {
|
||
--chorus-danger: var(--chorus-info); /* Use ocean instead of coral */
|
||
--chorus-success: var(--chorus-warning); /* Use sand instead of eucalyptus */
|
||
--chorus-warning: var(--chorus-neutral); /* Neutral tone for sand */
|
||
}
|
||
|
||
/* Light mode protanopia adjustments */
|
||
:root:not(.dark)[data-accessibility="protanopia"],
|
||
.light[data-accessibility="protanopia"] {
|
||
--chorus-danger: #2a3441; /* ocean-950 */
|
||
--chorus-success: #473e2f; /* sand-950 */
|
||
--chorus-warning: #2a2a2a; /* nickel-900 */
|
||
}
|
||
|
||
/* Dark mode protanopia adjustments */
|
||
.dark[data-accessibility="protanopia"] {
|
||
--chorus-danger: #cbefff; /* ocean-50 */
|
||
--chorus-success: #cee1be; /* sand-50 */
|
||
--chorus-warning: #f5f5f5; /* nickel-50 */
|
||
}
|
||
|
||
/* Deuteranopia (Green-blind) - Enhance blue/yellow contrast */
|
||
[data-accessibility="deuteranopia"] {
|
||
--chorus-success: var(--chorus-info); /* Use ocean instead of eucalyptus */
|
||
--chorus-info: var(--chorus-warning); /* Use sand for info */
|
||
--chorus-accent: var(--chorus-danger); /* Use coral for accent */
|
||
}
|
||
|
||
/* Light mode deuteranopia adjustments */
|
||
:root:not(.dark)[data-accessibility="deuteranopia"],
|
||
.light[data-accessibility="deuteranopia"] {
|
||
--chorus-success: #2a3441; /* ocean-950 */
|
||
--chorus-info: #473e2f; /* sand-950 */
|
||
--chorus-accent: #2e1d1c; /* coral-950 */
|
||
}
|
||
|
||
/* Dark mode deuteranopia adjustments */
|
||
.dark[data-accessibility="deuteranopia"] {
|
||
--chorus-success: #cbefff; /* ocean-50 */
|
||
--chorus-info: #cee1be; /* sand-50 */
|
||
--chorus-accent: #ffd6d6; /* coral-50 */
|
||
}
|
||
|
||
/* Tritanopia (Blue-blind) - Replace blue/yellow distinctions */
|
||
[data-accessibility="tritanopia"] {
|
||
--chorus-info: var(--chorus-danger); /* Use coral instead of ocean */
|
||
--chorus-warning: var(--chorus-success); /* Use eucalyptus instead of sand */
|
||
--chorus-primary: var(--chorus-secondary); /* Use mulberry for primary */
|
||
}
|
||
|
||
/* Light mode tritanopia adjustments */
|
||
:root:not(.dark)[data-accessibility="tritanopia"],
|
||
.light[data-accessibility="tritanopia"] {
|
||
--chorus-info: #2e1d1c; /* coral-950 */
|
||
--chorus-warning: #2a3330; /* eucalyptus-950 */
|
||
--chorus-primary: #0b0213; /* mulberry-950 */
|
||
}
|
||
|
||
/* Dark mode tritanopia adjustments */
|
||
.dark[data-accessibility="tritanopia"] {
|
||
--chorus-info: #ffd6d6; /* coral-50 */
|
||
--chorus-warning: #bacfbf; /* eucalyptus-50 */
|
||
--chorus-primary: #f0f4ff; /* mulberry-50 */
|
||
}
|
||
|
||
/* Achromatopsia (Complete color blindness) - Use brightness/contrast only */
|
||
[data-accessibility="achromatopsia"] {
|
||
--chorus-primary: #000000; /* Pure black */
|
||
--chorus-secondary: #333333; /* Dark gray */
|
||
--chorus-accent: #666666; /* Medium gray */
|
||
--chorus-neutral: #999999; /* Light gray */
|
||
--chorus-info: #444444; /* Dark medium */
|
||
--chorus-success: #222222; /* Very dark */
|
||
--chorus-warning: #777777; /* Medium light */
|
||
--chorus-danger: #111111; /* Almost black */
|
||
}
|
||
|
||
/* Dark mode achromatopsia adjustments */
|
||
.dark[data-accessibility="achromatopsia"] {
|
||
--chorus-primary: #ffffff; /* Pure white */
|
||
--chorus-secondary: #cccccc; /* Light gray */
|
||
--chorus-accent: #999999; /* Medium gray */
|
||
--chorus-neutral: #666666; /* Darker gray */
|
||
--chorus-info: #bbbbbb; /* Light medium */
|
||
--chorus-success: #dddddd; /* Very light */
|
||
--chorus-warning: #888888; /* Medium dark */
|
||
--chorus-danger: #eeeeee; /* Almost white */
|
||
}
|
||
|
||
/* Typography optimizations for brand guide */
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
p {
|
||
line-height: 1.683;
|
||
margin-bottom: 1.2rem;
|
||
}
|
||
|
||
ul, ol {
|
||
padding-left: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
li {
|
||
margin-bottom: 0.5rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
code {
|
||
font-family: 'Inconsolata', monospace;
|
||
background: var(--border-subtle);
|
||
padding: 0.125rem 0.25rem;
|
||
font-size: 0.875em;
|
||
}
|
||
|
||
.dark code {
|
||
background: #2a2a2a;
|
||
}
|
||
|
||
/* Ultra-clean transitions following brand guide */
|
||
* {
|
||
transition: opacity 200ms ease-out, color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
|
||
}
|
||
|
||
/* Motion System CSS - Documentation Only */
|
||
/* Implementation to be done separately */
|
||
|
||
/* Custom progress bars with full browser compatibility */
|
||
progress {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 100%;
|
||
height: 8px;
|
||
background-color: #E5E5E5;
|
||
border: none;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.dark progress {
|
||
background-color: #374151;
|
||
}
|
||
|
||
/* WebKit Progress Bar */
|
||
progress::-webkit-progress-bar {
|
||
background-color: #E5E5E5;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.dark progress::-webkit-progress-bar {
|
||
background-color: #374151;
|
||
}
|
||
|
||
/* Harmony Green Progress */
|
||
.progress-harmony::-webkit-progress-value {
|
||
background-color: #515d54;
|
||
border-radius: 0;
|
||
}
|
||
.dark .progress-harmony::-webkit-progress-value {
|
||
background-color: #7a8a7f;
|
||
}
|
||
.progress-harmony::-moz-progress-bar {
|
||
background-color: #515d54;
|
||
border-radius: 0;
|
||
}
|
||
.dark .progress-harmony::-moz-progress-bar {
|
||
background-color: #7a8a7f;
|
||
}
|
||
|
||
.full-width {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.hero {
|
||
margin-bottom: var(--space-md);
|
||
padding-bottom: var(--space-lg);
|
||
}
|
||
.logo-hero.border,
|
||
#logo-hero.border {
|
||
border: none;
|
||
}
|
||
|
||
/* Canvas sizing for Three.js logos */
|
||
.chorus-logo {
|
||
display: block;
|
||
aspect-ratio: 1 / 1; /* Force square aspect ratio */
|
||
}
|
||
|
||
.chorus-logo.w32.h32 {
|
||
width: 32px !important;
|
||
height: 32px !important;
|
||
}
|
||
|
||
/* Ensure all chorus-logo canvases are square regardless of class */
|
||
canvas.chorus-logo {
|
||
aspect-ratio: 1 / 1 !important;
|
||
}
|
||
|
||
*.inconsolata,
|
||
.inconsolata,
|
||
.mono,
|
||
.monospace {
|
||
font-family: 'Inconsolata', monospace !important;
|
||
font-weight: 400 !important;
|
||
}
|
||
|
||
|
||
/* Warnings */
|
||
.info img,
|
||
.note img,
|
||
.caution img,
|
||
.security-warning img,
|
||
.error img,
|
||
.critical img,
|
||
img.icon {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
vertical-align: middle;
|
||
margin-right: 0rem; /* Space between icon and text */
|
||
position: relative;
|
||
top: -0.4rem; /* Adjust vertical alignment */
|
||
}
|
||
|
||
.info p,
|
||
.note p,
|
||
.caution p,
|
||
.security-warning p,
|
||
.error p,
|
||
.critical p {
|
||
margin-left: 0rem; /* Space for icon */
|
||
color: var(--text-white) !important;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.info h3,
|
||
.note h3,
|
||
.caution h3,
|
||
.security-warning h3,
|
||
.error h3,
|
||
.critical h3,
|
||
.info h4,
|
||
.note h4,
|
||
.caution h4,
|
||
.security-warning h4,
|
||
.error h4,
|
||
.critical h4
|
||
{
|
||
color: var(--text-white) !important;
|
||
}
|
||
|
||
.info button,
|
||
.note button,
|
||
.caution button,
|
||
.security-warning button,
|
||
.error button,
|
||
.critical button {
|
||
background-color: #0000002e !important;
|
||
color: var(--chorus-primary) !important;
|
||
padding: 0.5rem 1rem;
|
||
border: 1px solid #ffffff !important;
|
||
border-radius: 0.45rem;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
margin-top: 1.5rem;
|
||
margin-left: 0.5rem;
|
||
float: right;
|
||
}
|
||
.info button.default,
|
||
.note button.default,
|
||
.caution button.default,
|
||
.security-warning button.default,
|
||
.error button.default,
|
||
.critical button.default {
|
||
background-color: #ffffff2e !important;
|
||
}
|
||
|
||
.info button:hover,
|
||
.note button:hover,
|
||
.caution button:hover,
|
||
.security-warning button:hover,
|
||
.error button:hover,
|
||
.critical button:hover {
|
||
background-color: var(--text-white) !important;
|
||
box-shadow: 0 0 0.25rem var(--color-carbon);
|
||
}
|
||
|
||
.info {
|
||
background-color: var(--chorus-info) !important;
|
||
color: var(--text-white) !important;
|
||
}
|
||
.info button:hover {
|
||
background-color: #ffffff !important;
|
||
color: var(--chorus-info) !important;
|
||
}
|
||
.info button:active {
|
||
background-color: var(--chorus-info) !important;
|
||
color: var(--text-white) !important;
|
||
box-shadow: inset 0 0 0.25rem var(--chorus-info);
|
||
}
|
||
|
||
|
||
.note {
|
||
background-color: var(--chorus-success) !important;
|
||
color: var(--text-white) !important;
|
||
}
|
||
.note button:hover {
|
||
background-color: #ffffff !important;
|
||
color: var(--chorus-success) !important;
|
||
}
|
||
.note button:active {
|
||
background-color: var(--chorus-success) !important;
|
||
color: var(--text-white) !important;
|
||
box-shadow: inset 0 0 0.25rem var(--chorus-success);
|
||
}
|
||
|
||
|
||
.caution {
|
||
background-color: var(--chorus-warning) !important;
|
||
color: var(--text-white) !important;
|
||
}
|
||
.caution button:hover {
|
||
background-color: #ffffff !important;
|
||
color: var(--chorus-warning) !important;
|
||
}
|
||
.caution button:active {
|
||
background-color: var(--chorus-warning) !important;
|
||
color: var(--text-white) !important;
|
||
box-shadow: inset 0 0 0.25rem var(--chorus-warning);
|
||
}
|
||
|
||
|
||
.security-warning {
|
||
background-color: var(--chorus-warning) !important;
|
||
color: var(--text-white) !important;
|
||
}
|
||
.security-warning button:hover {
|
||
background-color: #ffffff !important;
|
||
color: var(--chorus-warning) !important;
|
||
}
|
||
.security-warning button:active {
|
||
background-color: var(--chorus-warning) !important;
|
||
color: var(--text-white) !important;
|
||
box-shadow: inset 0 0 0.25rem var(--chorus-warning);
|
||
}
|
||
|
||
.error {
|
||
background-color: var(--chorus-danger) !important;
|
||
color: var(--text-white) !important;
|
||
}
|
||
.error button:hover {
|
||
background-color: #ffffff !important;
|
||
color: var(--chorus-danger) !important;
|
||
}
|
||
.error button:active {
|
||
background-color: var(--chorus-danger) !important;
|
||
color: var(--text-white) !important;
|
||
box-shadow: inset 0 0 0.25rem var(--chorus-danger);
|
||
}
|
||
|
||
|
||
.critical {
|
||
background-color: var(--chorus-danger) !important;
|
||
color: var(--text-white) !important;
|
||
}
|
||
.critical button:hover {
|
||
background-color: #ffffff !important;
|
||
color: var(--chorus-danger) !important;
|
||
}
|
||
.critical button:active {
|
||
background-color: var(--chorus-danger) !important;
|
||
color: var(--text-white) !important;
|
||
box-shadow: inset 0 0 0.25rem var(--chorus-danger);
|
||
}
|
||
|
||
.info, .note, .caution, .security-warning, .error, .critical {
|
||
padding: 1rem;
|
||
border-radius: 0.25rem; /* Consistent with CHORUS design */
|
||
}
|
||
|
||
|
||
/* https://codepen.io/sosuke/pen/Pjoqqp */
|
||
.red-icon {
|
||
filter: invert(32%) sepia(21%) saturate(646%) hue-rotate(317deg) brightness(88%) contrast(87%);
|
||
display: inline-block;
|
||
text-align: center;
|
||
}
|
||
|
||
/* https://codepen.io/sosuke/pen/Pjoqqp */
|
||
.green-icon {
|
||
filter: invert(16%) sepia(9%) saturate(832%) hue-rotate(109deg) brightness(90%) contrast(87%);
|
||
display: inline-block;
|
||
text-align: center;
|
||
}
|
||
|
||
main * a {
|
||
color: var(--chorus-primary);
|
||
text-decoration: none;
|
||
transition: color 200ms ease-in-out;
|
||
}
|
||
main * a:hover {
|
||
color: var(--chorus-primary);
|
||
background-color: var(--chorus-accent);
|
||
border: var(--chorus-accent) solid 3px;
|
||
border-radius: 0.25rem;
|
||
text-decoration: none;
|
||
}
|
||
main * a:focus {
|
||
color: var(--chorus-secondary);
|
||
background-color: var(--chorus-accent);
|
||
}
|
||
main * a:visited {
|
||
color: var(--chorus-primary);
|
||
}
|
||
main * a:active {
|
||
color: var(--chorus-danger);
|
||
}
|
||
|
||
</style>
|
||
<!-- Custom CHORUS Syntax Highlighting Theme -->
|
||
<style>
|
||
/* CHORUS Custom Prism.js Theme - Light Mode */
|
||
:root {
|
||
--syntax-bg: var(--color-natural-paper);
|
||
--syntax-text: var(--chorus-primary);
|
||
--syntax-comment: var(--chorus-neutral);
|
||
--syntax-keyword: var(--chorus-accent);
|
||
--syntax-string: var(--chorus-success);
|
||
--syntax-number: var(--chorus-warning);
|
||
--syntax-function: var(--chorus-info);
|
||
--syntax-operator: var(--chorus-secondary);
|
||
--syntax-property: var(--chorus-danger);
|
||
--syntax-punctuation: var(--chorus-neutral);
|
||
}
|
||
|
||
/* CHORUS Custom Prism.js Theme - Dark Mode */
|
||
.dark {
|
||
--syntax-bg: var(--chorus-primary);
|
||
--syntax-text: #f8f8f2;
|
||
--syntax-comment: #6272a4;
|
||
--syntax-keyword: #ff79c6;
|
||
--syntax-string: #50fa7b;
|
||
--syntax-number: #ffb86c;
|
||
--syntax-function: #8be9fd;
|
||
--syntax-operator: #ff79c6;
|
||
--syntax-property: #f1fa8c;
|
||
--syntax-punctuation: #f8f8f2;
|
||
}
|
||
|
||
/* Apply CHORUS colors to Prism elements */
|
||
.token.comment,
|
||
.token.prolog,
|
||
.token.doctype,
|
||
.token.cdata {
|
||
color: var(--syntax-comment);
|
||
font-style: italic;
|
||
}
|
||
|
||
.token.punctuation {
|
||
color: var(--syntax-punctuation);
|
||
}
|
||
|
||
.token.property,
|
||
.token.tag,
|
||
.token.constant,
|
||
.token.symbol,
|
||
.token.deleted {
|
||
color: var(--syntax-property);
|
||
}
|
||
|
||
.token.boolean,
|
||
.token.number {
|
||
color: var(--syntax-number);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.token.selector,
|
||
.token.attr-name,
|
||
.token.string,
|
||
.token.char,
|
||
.token.builtin,
|
||
.token.inserted {
|
||
color: var(--syntax-string);
|
||
}
|
||
|
||
.token.operator,
|
||
.token.entity,
|
||
.token.url,
|
||
.language-css .token.string,
|
||
.style .token.string,
|
||
.token.variable {
|
||
color: var(--syntax-operator);
|
||
}
|
||
|
||
.token.atrule,
|
||
.token.attr-value,
|
||
.token.function,
|
||
.token.class-name {
|
||
color: var(--syntax-function);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.token.keyword {
|
||
color: var(--syntax-keyword);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.token.regex,
|
||
.token.important {
|
||
color: var(--syntax-warning);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.token.important,
|
||
.token.bold {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.token.italic {
|
||
font-style: italic;
|
||
}
|
||
|
||
.token.entity {
|
||
cursor: help;
|
||
}
|
||
|
||
/* Custom code block styling with CHORUS theme */
|
||
code[class*="language-"],
|
||
pre[class*="language-"] {
|
||
background: var(--syntax-bg) !important;
|
||
color: var(--syntax-text) !important;
|
||
font-family: 'Inconsolata', 'JetBrains Mono', 'Fira Code', monospace !important;
|
||
font-size: 0.875rem !important;
|
||
line-height: 1.5 !important;
|
||
border: 0px solid var(--chorus-neutral) !important;
|
||
border-radius: 0 !important; /* Ultra-minimalist: no border radius */
|
||
}
|
||
|
||
pre[class*="language-"] {
|
||
padding: 1rem !important;
|
||
margin: 0 !important;
|
||
overflow: auto !important;
|
||
}
|
||
|
||
:not(pre) > code[class*="language-"] {
|
||
padding: 0.25rem 0.5rem !important;
|
||
border-radius: 0 !important;
|
||
white-space: normal !important;
|
||
}
|
||
|
||
/* Accessibility theme support for syntax highlighting */
|
||
[data-accessibility="protanopia"] {
|
||
--syntax-keyword: var(--chorus-info);
|
||
--syntax-string: var(--chorus-warning);
|
||
--syntax-property: var(--chorus-info);
|
||
}
|
||
|
||
[data-accessibility="deuteranopia"] {
|
||
--syntax-keyword: var(--chorus-info);
|
||
--syntax-string: var(--chorus-accent);
|
||
--syntax-property: var(--chorus-accent);
|
||
}
|
||
|
||
[data-accessibility="tritanopia"] {
|
||
--syntax-keyword: var(--chorus-warning);
|
||
--syntax-string: var(--chorus-warning);
|
||
--syntax-property: var(--chorus-info);
|
||
}
|
||
|
||
[data-accessibility="achromatopsia"] {
|
||
--syntax-comment: var(--chorus-neutral);
|
||
--syntax-keyword: var(--chorus-info);
|
||
--syntax-string: var(--chorus-danger);
|
||
--syntax-number: var(--chorus-warning);
|
||
--syntax-function: var(--chorus-info);
|
||
--syntax-operator: var(--chorus-danger);
|
||
--syntax-property: var(--chorus-info);
|
||
}
|
||
</style>
|
||
|
||
<!-- Prism.js CSS (using Tomorrow Night theme as base) -->
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Inconsolata:wght@200..900&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||
|
||
|
||
|
||
</head>
|
||
<body class="h-full bg-white text-carbon-950 antialiased dark:bg-carbon-950 dark:text-white">
|
||
<!-- Docked panels -->
|
||
|
||
<aside class="fixed inset-y-0 left-0 hidden w-64 border-r border-nickel-200 bg-white/95 p-0 backdrop-blur md:block dark:border-mulberry-800 dark:bg-mulberry-950/95">
|
||
|
||
<div class="mb-chorus-sm flex items-center gap-chorus-sm p-chorus-lg">
|
||
<span class="text-2xl font-black text-carbon-600 dark:text-white mb-chorus-lg">Brand Guide</span>
|
||
</div>
|
||
<nav class="space-y-micro text-sm" id="brand-nav">
|
||
<a href="#overview" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="overview">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Brand Overview</span>
|
||
</a>
|
||
<a href="#identity" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="identity">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/User/User_01.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/User/User_01.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Brand Identity</span>
|
||
</a>
|
||
<a href="#usage" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="usage">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Book.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Book.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Usage Guidelines</span>
|
||
</a>
|
||
<a href="#logo" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="logo">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Logo System</span>
|
||
</a>
|
||
<a href="#typography" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="typography">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Edit/Text.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Edit/Text.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Typography</span>
|
||
</a>
|
||
<a href="#colors" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="colors">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Edit/Swatches_Palette.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Edit/Swatches_Palette.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Color Palette</span>
|
||
</a>
|
||
<a href="#iconography" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="iconography">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Main_Component.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Main_Component.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Iconography</span>
|
||
</a>
|
||
<a href="#accessibility" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="accessibility">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Heart_01.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Accessibility</span>
|
||
</a>
|
||
<a href="#components" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="components">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Components</span>
|
||
</a>
|
||
<a href="#motion" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="motion">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Link.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Link.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Motion System</span>
|
||
</a>
|
||
<a href="#implementation" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="implementation">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Implementation</span>
|
||
</a>
|
||
|
||
<a href="#communications" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="communications">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Language Support</span>
|
||
</a>
|
||
<a href="#public-relations" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="public-relations">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Public Relations</span>
|
||
</a>
|
||
<a href="#investor-relations" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="investor-relations">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Investor Relations</span>
|
||
</a>
|
||
<a href="#collaborators" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="collaborators">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Collaborators</span>
|
||
</a>
|
||
<a href="#social-media" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="social-media">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Social Media</span>
|
||
</a>
|
||
<a href="#visual-identity" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="visual-identity">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Visual Identity</span>
|
||
</a>
|
||
<a href="#presentations-decks" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="presentations-decks">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Presentations & Decks</span>
|
||
</a>
|
||
<a href="#culture" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="culture">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Culture</span>
|
||
</a>
|
||
<a href="#video-capture" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="video-capture">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Video Capture</span>
|
||
</a>
|
||
<a href="#still-photography" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="still-photography">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Still Photography</span>
|
||
</a>
|
||
<a href="#ai-generated-imagery" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="ai-generated-imagery">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">AI Generated Imagery</span>
|
||
</a>
|
||
<a href="#print-media" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="print-media">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Print Media</span>
|
||
</a>
|
||
<a href="#advertising" class="nav-link flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 group" data-section="advertising">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" class="w-4 h-4 dark:hidden transition-transform duration-300 group-hover:scale-110">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" class="w-4 h-4 hidden dark:block transition-transform duration-300 group-hover:scale-110">
|
||
<span class="transition-all duration-300 group-hover:font-medium">Advertising Standards</span>
|
||
</a>
|
||
|
||
</nav>
|
||
|
||
|
||
</aside>
|
||
|
||
<!-- Padding Left: 64ems for menu system -->
|
||
<div class="md:pl-64">
|
||
<!-- Header -->
|
||
<header class="md:block inset-y-0 left-0 border-b border-nickel-200 bg-white/95 backdrop-blur dark:border-mulberry-800 dark:bg-mulberry-950/95 shadow-lg">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-chorus-lg">
|
||
<div class="flex items-center gap-chorus-sm px-chorus-md py-chorus-md">
|
||
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
||
<noscript>
|
||
<img src="chorus-logo.png" width="32" height="32" alt="CHORUS Logo"/>
|
||
</noscript>
|
||
<div>
|
||
<div class="font-thin font-logo">CHORUS</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<main class="dark:bg-mulberry-950 light:bg-white min-h-screen">
|
||
|
||
<!-- Hero Section -->
|
||
<section class="mb-chorus-xxl hero full-width py-chorus-xxl text-center bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-950 from-sand-300 to-white p-chorus-lg">
|
||
<div class="text-center">
|
||
<h1 class="font-logo text-6xl font-regular tracking-wide text-mulberry-950 dark:text-white mb-chorus-md">CHORUS</h1>
|
||
<h2 class="text-2xl mb-chorus-xl text-mulberry-400">A distributed, semantic and temporal knowledge fabric<br/>for humans and AI agents alike<br/>to share reasoning, context, and intent,<br/>not just files.</h2>
|
||
|
||
|
||
<h2 class="text-8xl font-bold text-carbon-600 dark:text-white mb-chorus-lg">Brand Guide</h2>
|
||
<h4 class="text-h4 font-semibold mb-chorus-lg">version 1.0</h4>
|
||
<p class="text-lg text-carbon-500 dark:text-mulberry-500 max-w-2xl mx-auto">This living document is your comprehensive visual identity system<br/>for our brand of distributed AI orchestration.</p>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<!-- Brand Overview -->
|
||
<section id="overview" class="mb-chorus-xxl">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto mb-chorus-lg">
|
||
<h2 class="text-h2 mb-chorus-lg">Brand Overview</h2>
|
||
|
||
<div class="py-chorus-lg space-y-chorus-lg">
|
||
<div class="grid gap-chorus-md md:grid-cols-3">
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Mission</h3>
|
||
<p>CHORUS Services eliminates context loss, reduces hallucinations, and enables scalable multi-agent collaboration through intelligent context management and distributed reasoning.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Promise</h3>
|
||
<p>Enterprise-ready distributed AI orchestration that delivers reliable, context-aware results for global teams building the future of intelligent software.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Position</h3>
|
||
<p>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.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Audience</h3>
|
||
|
||
<div class="grid gap-chorus-sm md:grid-cols-3">
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">Technical Decision Makers</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">CTOs, VP Engineering</p>
|
||
<ul class="text-sm space-y-1">
|
||
<li>ROI justification</li>
|
||
<li>Technical depth</li>
|
||
<li>Security assurance</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">AI Research Leads</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">Principal Engineers</p>
|
||
<ul class="text-sm space-y-1">
|
||
<li>Technical specifications</li>
|
||
<li>API documentation</li>
|
||
<li>Research validation</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">Business Stakeholders</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">Executives</p>
|
||
<ul class="text-sm space-y-1">
|
||
<li>Business outcomes</li>
|
||
<li>Competitive positioning</li>
|
||
<li>Implementation support</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Brand Identity -->
|
||
<section id="identity" class="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-950 dark:to-mulberry-700 to-sand-400 from-white">
|
||
<div class="max-w-5xl mx-auto mb-chorus-lg px-chorus-lg">
|
||
<h2 class="text-h2 mb-chorus-lg ">Brand Identity Concept</h2>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-sm">Design Philosophy</h3>
|
||
<p>The CHORUS brand identity embodies <strong>sophisticated orchestration</strong> through an <strong>ultra-minimalist aesthetic</strong> that connects technological precision with elegant simplicity. The system reflects:</p>
|
||
|
||
<ul class="mt-chorus-md space-y-2">
|
||
<li><strong>Minimalist Precision:</strong> Clean, uncluttered design with purposeful use of white space</li>
|
||
<li><strong>Subtle Sophistication:</strong> Understated elegance through refined typography and gentle color gradients</li>
|
||
<li><strong>Mobius Continuity:</strong> The infinite loop of the Mobius ring representing seamless, continuous processes</li>
|
||
<li><strong>Sophisticated Simplicity:</strong> Premium quality through restraint and intentional design choices</li>
|
||
<li><strong>Global Accessibility:</strong> Internationally appropriate and inclusive design principles</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-sm ">Brand Personality</h3>
|
||
<p>CHORUS represents enthusiastic wonder, respect for nature, an analytical view of the natural world. We seek to better understand cognition, expand our minds through education and experimentation, and work with like-minded people and AIs.</p>
|
||
<p>We understand that working together produces a better outcome for all, and that only through a safe and equal experience can we accomplish great things.</p>
|
||
<div class="grid mt-chorus-lg pt-chorus-lg gap-chorus-lg md:grid-cols-2">
|
||
<div class="flex items-start gap-chorus-base">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Edit/Remove_Minus.png" alt="Minimalist" class="icon w-5 h-5 mt-0.5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Edit/Remove_Minus.png" alt="Minimalist" class="icon w-5 h-5 mt-0.5 hidden dark:block">
|
||
<div>
|
||
<h4 class="text-h4 mb-1">Minimalist</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300">Clean, uncluttered aesthetic that eliminates visual noise</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-chorus-base">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="Sophisticated" class="icon w-5 h-5 mt-0.5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="Sophisticated" class="icon w-5 h-5 mt-0.5 hidden dark:block">
|
||
<div>
|
||
<h4 class="text-h4 mb-1">Sophisticated</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300">Premium quality through purposeful restraint and elegant simplicity</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-chorus-base">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Link.png" alt="Seamless" class="icon w-5 h-5 mt-0.5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Link.png" alt="Seamless" class="icon w-5 h-5 mt-0.5 hidden dark:block">
|
||
<div>
|
||
<h4 class="text-h4 mb-1">Seamless</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300">Like the Mobius ring, every element flows naturally into the next</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-chorus-base">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check_Big.png" alt="Reliable" class="icon w-5 h-5 mt-0.5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Check_Big.png" alt="Reliable" class="icon w-5 h-5 mt-0.5 hidden dark:block">
|
||
<div>
|
||
<h4 class="text-h4 mb-1">Reliable</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300">Consistent, trustworthy visual language that builds confidence through clarity</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-chorus-base">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Accessible" class="icon w-5 h-5 mt-0.5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Heart_01.png" alt="Accessible" class="icon w-5 h-5 mt-0.5 hidden dark:block">
|
||
<div>
|
||
<h4 class="text-h4 mb-1">Accessible</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300">Ultra-simple design making complex technology feel globally approachable</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-chorus-base">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Calendar/Clock.png" alt="Timeless" class="icon w-5 h-5 mt-0.5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Calendar/Clock.png" alt="Timeless" class="icon w-5 h-5 mt-0.5 hidden dark:block">
|
||
<div>
|
||
<h4 class="text-h4 mb-1">Timeless</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300">Classic, enduring aesthetic that transcends trends</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-chorus-base">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Shape/Shield.png" alt="Timeless" class="icon w-5 h-5 mt-0.5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Shape/Shield.png" alt="Timeless" class="icon w-5 h-5 mt-0.5 hidden dark:block">
|
||
<div>
|
||
<h4 class="text-h4 mb-1">Secure</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300">Best efforts and best practice</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-chorus-base">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock.png" alt="Timeless" class="icon w-5 h-5 mt-0.5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock.png" alt="Timeless" class="icon w-5 h-5 mt-0.5 hidden dark:block">
|
||
<div>
|
||
<h4 class="text-h4 mb-1">Private</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300">Self-control of your data - it's none of our business</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Brand Guidelines: Usage -->
|
||
<section id="usage" class="py-chorus-xxl dark:bg-mulberry-700 bg-sand-400">
|
||
<div class="max-w-5xl mx-auto mb-chorus-lg px-chorus-lg">
|
||
|
||
<h2 class="text-h2 mb-chorus-lg">How to use these Brand Guidelines</h2>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Navigating the Guide</h3>
|
||
<p class="mb-chorus-md">This comprehensive brand guide is organized with logical navigation flow. Use the sidebar menu to jump between sections, each with semantic icons for easy identification.</p>
|
||
|
||
<div class="bg-sand-50 dark:bg-mulberry-900 border border-sand-200 dark:border-mulberry-800 p-chorus-md">
|
||
<h4 class="text-h4 mb-2">Navigation Features</h4>
|
||
<ul class="text-sm space-y-1 text-carbon-600 dark:text-mulberry-300">
|
||
<li><strong>Theme Toggle:</strong> Switch between dark/light modes (dark is default)</li>
|
||
<li><strong>Visual Aid:</strong> Access color-blindness accommodations via bottom toolbar</li>
|
||
<li><strong>Semantic Icons:</strong> Each section has corresponding Coolicons for visual clarity</li>
|
||
<li><strong>Accessibility First:</strong> All navigation supports keyboard and screen readers</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Main Hero Logo -->
|
||
<section id="logo-hero" class="py-chorus-xl bg-gradient-to-b dark:from-mulberry-700 dark:to-mulberry-950 to-white from-sand-400 backdrop-blur">
|
||
<!-- 3D Möbius Ring Display -->
|
||
<div class="max-w-5xl mx-auto mb-chorus-lg flex items-center">
|
||
<div class="mx-auto item h-100 overflow-hidden" id="logo-container">
|
||
<canvas class="chorus-logo"></canvas>
|
||
<!-- <div class="absolute bottom-4 left-4 text-white">
|
||
<p class="text-sm opacity-80">Interactive 3D Möbius Ring</p>
|
||
</div> -->
|
||
<h2 style="text-align: center;" class="item text-6xl logo-font font-logo text-carbon-950 dark:text-white">CHORUS</h2>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- Logo System -->
|
||
<section id="logo" class="py-chorus-xxl ">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2 mb-chorus-lg">Logo System</h2>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Primary Logo: "The Möbius Ring"</h3>
|
||
<div class="border border-nickel-200 p-chorus-xxl dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">Visual Description</h4>
|
||
<p class="text-carbon-600 dark:text-mulberry-300">The CHORUS logo is a 3D Möbius Ring with a triangular cross-section, symbolizing the core principles of the brand: continuous context, seamless collaboration, and multi-faceted intelligence. The single, continuous surface of the ring represents the unbroken flow of information and context within the CHORUS ecosystem, while the three faces of its triangular profile allude to the key pillars of the product: security, self-determinance, resiliance.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid gap-chorus--1 md:grid-cols-2">
|
||
<div class="border-r border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md py-chorus-lg">Core Elements</h3>
|
||
<ol class="space-y-chorus-sm">
|
||
<li><strong>3D Mobius Ring:</strong> The primary visual element featuring elegant metallic rendering with sophisticated lighting and materials, representing infinite collaboration and seamless process flow.</li>
|
||
<li><strong>2D Minimalist Icon:</strong> An ultra-clean, geometric abstraction of the Mobius ring for UI applications and small-scale use.</li>
|
||
<li><strong>Clean Wordmark:</strong> "CHORUS" in refined typography with generous spacing, accompanied by "services" in subtle, lighter weight for hierarchy.</li>
|
||
<li><strong>Subtle Gradient System:</strong> Gentle color transitions derived from the ring's metallic surface for UI depth without complexity.</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<!-- Logo Usage -->
|
||
<div class="border-l border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md py-chorus-lg">Logo Usage Guidelines</h3>
|
||
<ul class="list-disc pl-6 space-y-2">
|
||
<li>Always maintain clear space around the logo equal to the height of the "C" in "CHORUS".</li>
|
||
<li>Do not alter the proportions or colors of the logo.</li>
|
||
<li>Use the 3D version for high-impact applications; use the 2D version for smaller formats.</li>
|
||
<li>Ensure sufficient contrast with background colors for legibility.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Logo Orientation -->
|
||
<div class="my-chorus-lg">
|
||
<h3 class="text-h3 mb-chorus-md">Logo Orientation</h3>
|
||
|
||
<div class="grid gap-chorus--1 md:grid-cols-2">
|
||
<div class="border border-nickel-300 shadow-lg p-chorus-md dark:border-nickel-900 dark:bg-mulberry-900 bg-white">
|
||
<div class="flex mx-auto items-center gap-chorus-sm py-chorus-md dark:bg-mulberry-900 bg-white dark:text-white">
|
||
<canvas class="chorus-logo" style="width: 128px; height: 128px;"></canvas>
|
||
<noscript>
|
||
<img src="chorus-logo.png" alt="CHORUS Logo"/>
|
||
</noscript>
|
||
|
||
<div>
|
||
<div class="font-logo">CHORUS</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h4 class="text-h4 mb-chorus-md light:text-carbon-950 dark:text-white">Horizontal 2D Layout</h4>
|
||
<p>When used inline, left-aligned, or with other elements or logos.</p>
|
||
|
||
</div>
|
||
|
||
<div class="border border-nickel-300 shadow-lg p-chorus-md dark:border-nickel-900 dark:bg-mulberry-900 bg-white">
|
||
<div class="items-center gap-chorus-sm py-chorus-md dark:bg-mulberry-900 bg-white dark:text-white">
|
||
<canvas class="mx-auto chorus-logo" style="width: 128px; height: 128px;"></canvas>
|
||
<noscript>
|
||
<img src="chorus-logo.png" alt="CHORUS Logo"/>
|
||
</noscript>
|
||
|
||
<div>
|
||
<div class="font-logo" style="text-align: center;">CHORUS</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h4 class="text-h4 mb-chorus-md light:text-carbon-950 dark:text-white">Stacked 2D Layout / Icon</h4>
|
||
<p>When used center-aligned, or in a vertical stack of logos.</p>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Download Logo Packages -->
|
||
<div class="shadow-lg bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-600 from-sand-400 to-sand-200 backdrop-blur dark:bg-mulberry-800 border dark:border-mulberry-600 light:border-nickel-300 p-chorus-lg light:text-carbon-950 dark:text-white">
|
||
<h3 class="text-h3 mb-chorus-md">Download our Logo Packs</h3>
|
||
<p class="text-sm text-carbon-800 dark:text-mulberry-300">The full logo package including vector files, PNGs, Blender file, Three.js Implementation, and full motion and usage guidelines:</p>
|
||
<p class="py-2"><a href="logos/chorus-logo-package-web.zip" class="inline-block bg-sand-700 text-white px-4 py-2 rounded hover:bg-sand-800 dark:bg-mulberry-300 dark:text-carbon-950 dark:hover:bg-gray-200 transition-colors">Download Logo Package (Web)</a></p>
|
||
<p class="py-2"><a href="logos/chorus-logo-package-print.zip" class="inline-block bg-sand-700 text-white px-4 py-2 rounded hover:bg-sand-800 dark:bg-mulberry-300 dark:text-carbon-950 dark:hover:bg-gray-200 transition-colors">Download Logo Package (Print)</a></p>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Typography Section -->
|
||
<section id="typography" class="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-950 dark:to-carbon-950 from-sand-200 to-white">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2 mb-chorus-md">Typography</h2>
|
||
<p class="text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS typography system is designed for clarity, hierarchy, and accessibility across all devices.</p>
|
||
|
||
<h4 class="text-h4 mb-chorus-sm text-chorus-success">✓ Complete System Scaling</h4>
|
||
<p class="">All spacing, sizing, and proportions automatically scale with the 18px base. CHORUS spacing system (chorus-xs, chorus-md, etc.) maintains perfect proportional relationships.</p>
|
||
|
||
<!-- Font Families -->
|
||
<div class="my-chorus-xxl">
|
||
<h3 class="text-h3 mb-chorus-md">Font Families</h3>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-3 pr-chorus-lg">
|
||
<div class="pl-chorus-lg">
|
||
<h1 class="inter text-3xl">Inter Tight</h1>
|
||
<p class="my-chorus-lg">The primary typeface for CHORUS is <strong>Inter Tight</strong>, a modern sans-serif font designed for high legibility and versatility.</p>
|
||
<p class="text-carbon-500 dark:text-mulberry-300">Fallback fonts include Arial, Helvetica, sans-serif.</p>
|
||
<p class="text-carbon-500 dark:text-mulberry-300">Inter is available for free under the SIL Open Font License and can be downloaded from <a href="https://rsms.me/inter/">rsms.me/inter</a>.</p>
|
||
</div>
|
||
<div class="border-l border-nickel-200 dark:border-nickel-900 pl-chorus-md">
|
||
<h1 class="font-logo text-3xl">Exo</h1>
|
||
<p class="my-chorus-lg">The logo typeface for CHORUS is <strong>Exo</strong>, a modern sans-serif font designed for high legibility and versatility.</p>
|
||
<p class="text-carbon-500 dark:text-mulberry-300">Fallback fonts should be avoided but can include Arial, Helvetica, sans-serif.</p>
|
||
<p class="text-carbon-500 dark:text-mulberry-300">Inter is available for free under the SIL Open Font License and can be downloaded from <a href="https://rsms.me/inter/">rsms.me/inter</a>.</p>
|
||
</div>
|
||
<div class="border-l border-nickel-200 dark:border-nickel-900 pl-chorus-md">
|
||
<h1 class="inconsolata text-3xl">Inconsolata</h1>
|
||
<p class="my-chorus-lg">The code typeface for CHORUS is <span class="inconsolata">Inconsolata</span>, a modern mono-spaced font designed for high legibility at small sizes.</p>
|
||
<p class="text-carbon-500 dark:text-mulberry-300">Fallback fonts include Fira Sans, Noto, sans-serif.</p>
|
||
<p class="text-carbon-500 dark:text-mulberry-300">Inter is available for free under the SIL Open Font License and can be downloaded from <a href="https://rsms.me/inter/">rsms.me/inter</a>.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="grid gap-chorus-lg md:grid-cols-2">
|
||
<!-- Begin: DO -->
|
||
<div class="pb-chorus-lg">
|
||
|
||
<h3 class="text-h3 mb-chorus-sm">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png" alt="" class="icon w-16 h-16 green-icon inline-block dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Check.png" alt="" class="icon w-16 h-16 green-icon hidden dark:inline-block">
|
||
DO
|
||
</h3>
|
||
<div class="mb-chorus-lg">
|
||
<p >This column represents to <strong>correct</strong> typographic approach to font selection, weight, scaling, coloration.</p>
|
||
</div>
|
||
|
||
<!-- Headings -->
|
||
<div class="p-chorus-lg">
|
||
<h3 class="text-h3 mb-chorus-md">Headings</h3>
|
||
<div class="space-y-chorus-sm">
|
||
<h1 class="text-5xl font-logo font-thin">Masthead</h1>
|
||
<h1 class="text-h1">Heading 1</h1>
|
||
<h2 class="text-h2">Heading 2</h2>
|
||
<h3 class="text-h3">Heading 3</h3>
|
||
<h4 class="text-h4">Heading 4</h4>
|
||
<h5 class="text-h5">Heading 5</h5>
|
||
<h6 class="text-h6">Heading 6</h6>
|
||
<h7 class="text-h7">Heading 7</h7>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Font Weights -->
|
||
<div class="p-chorus-lg border-l border-nickel-200 dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Adjust Weight for Contrast</h3>
|
||
<div class="space-y-chorus-sm">
|
||
<p class="font-thin">Thin (100)</p>
|
||
<p class="font-extralight">Extra Light (200)</p>
|
||
<p class="font-light">Light (300)</p>
|
||
<p class="font-normal">Normal (400)</p>
|
||
<p class="font-medium">Medium (500)</p>
|
||
<p class="font-semibold">Semi Bold (600)</p>
|
||
<p class="font-bold">Bold (700)</p>
|
||
<p class="font-extrabold">Extra Bold (800)</p>
|
||
<p class="font-black">Black (900)</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Body Text -->
|
||
<div class="p-chorus-lg">
|
||
<h3 class="text-h3 mb-chorus-md">Weight for emphasis </h3>
|
||
<p class="font-bold text-base text-carbon-600 dark:text-white mb-chorus-sm">This body text has been set for particular emphasis of a single paragraph.</p>
|
||
<p class="text-base text-carbon-600 dark:text-white mb-chorus-sm">This is normal paragraph text used throughout the CHORUS design system. It is designed for readability and accessibility. It has already been scaled, weighted, and set for maximum legibility and aesthetics.</p>
|
||
<p class="text-sm text-carbon-500 dark:text-white">This is smaller body text for secondary information.</p>
|
||
</div>
|
||
|
||
<!-- Links -->
|
||
<div class="p-chorus-lg border-l border-nickel-200 dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Links</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">Links are styled to be clear and accessible:</p>
|
||
<ul class="list-disc pl-5 space-y-2">
|
||
<li><a href="#" class="">Primary Link</a></li>
|
||
<li><a href="#" class="">Secondary Link</a></li>
|
||
<li><a href="#" class="">Muted Link</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Leading and Paragraphs -->
|
||
<div class="p-chorus-lg">
|
||
<h3 class="text-h3 mb-chorus-md">Typeset Paragraphs</h3>
|
||
<p class="font-bold text-base text-carbon-600 dark:text-white mb-chorus-sm">This body text has been set for particular emphasis of a single paragrpah.</p>
|
||
<p class="text-base text-carbon-600 dark:text-white mb-chorus-sm">This is normal paragraph text used throughout the CHORUS design system. It is designed for readability and accessibility. It has already been scaled, weighted, and set for maximum legibility and aesthetics.</p>
|
||
<p class="text-sm text-carbon-500 dark:text-white">This is smaller body text for secondary information.</p>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- End: DO -->
|
||
|
||
<!-- Begin: DON'T -->
|
||
<div class="pb-chorus-lg">
|
||
<h3 class="text-h3 mb-chorus-sm">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Stop_Sign.png" alt="" class="icon w-16 h-16 red-icon inline-block dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Stop_Sign.png" alt="" class="icon w-16 h-16 red-icon hidden dark:inline-block">
|
||
DON'T
|
||
</h3>
|
||
<div class="mb-chorus-lg">
|
||
<p>This column represents the <strong>incorrect</strong> typographic approach to font selection, weight, scaling, coloration.</p>
|
||
</div>
|
||
<!-- Headings -->
|
||
<div class="p-chorus-lg border-l border-nickel-200 dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md" >Adjust Weights or Sizes</h3>
|
||
<div class="space-y-chorus-sm">
|
||
<h1 class="text-3xl font-logo font-bold">Masthead</h1>
|
||
<h1 class="text-h1 font-semibold">Heading 1</h1>
|
||
<h2 class="text-h2 font-medium">Heading 2</h2>
|
||
<h3 class="text-h3 font-black">Heading 3</h3>
|
||
<h4 class="text-xl">Heading 4</h4>
|
||
<h5 class="text-xs">Heading 5</h5>
|
||
<h6 class="text-sm">Heading 6</h6>
|
||
<h7 class="text-lg">Heading 7</h7>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Font Weights -->
|
||
<div class="p-chorus-lg border-l border-nickel-200 dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Set weights arbitrarily</h3>
|
||
<div class="space-y-chorus-sm">
|
||
<p class="font-thin">Thin (100)</p>
|
||
<p class="font-extralight">Extra Light (200)</p>
|
||
<p class="font-light">Light (300)</p>
|
||
<p class="font-normal">Normal (400)</p>
|
||
<p class="font-medium">Medium (500)</p>
|
||
<p class="font-semibold">Semi Bold (600)</p>
|
||
<p class="font-bold">Bold (700)</p>
|
||
<p class="font-extrabold">Extra Bold (800)</p>
|
||
<p class="font-black">Black (900)</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Body Text -->
|
||
<div class="p-chorus-lg">
|
||
<h3 class="text-h3 mb-chorus-md">Color for emphasis </h3>
|
||
<p class="text-base text-coral-800 dark:text-coral-700 mb-chorus-sm">Body text should not be colored to emphasise a paragrpah.</p>
|
||
<p class="text-base text-carbon-600 dark:text-white mb-chorus-sm">This is normal paragraph text used throughout the CHORUS design system. It is designed for readability and accessibility. It has already been scaled, weighted, and set for maximum legibility and aesthetics.</p>
|
||
<p class="text-sm text-carbon-500 dark:text-white">This is smaller body text for secondary information.</p>
|
||
</div>
|
||
|
||
<!-- Links -->
|
||
<div class="p-chorus-lg border-l border-nickel-200 dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Links</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">Links are styled to be clear and accessible:</p>
|
||
<ul class="list-disc pl-5 space-y-2">
|
||
<li><a href="#" class="text-mulberry-950 hover:text-mulberry-700 dark:text-paper-200 dark:hover:text-paper-100">Primary Link</a></li>
|
||
<li><a href="#" class="text-carbon-600 hover:text-carbon-800 dark:text-mulberry-300 dark:hover:text-mulberry-200">Secondary Link</a></li>
|
||
<li><a href="#" class="text-gray-500 hover:text-gray-700 dark:text-mulberry-400 dark:hover:text-mulberry-300">Muted Link</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Leading and Paragraphs -->
|
||
<div class="p-chorus-lg">
|
||
<h3 class="text-h3">Set text 'solid'</h3>
|
||
<p class="font-bold text-base text-carbon-600 dark:text-white ">This body text has been set with insufficient leading for the paragrpah.</p>
|
||
<p class="text-base text-carbon-600 dark:text-white ">Paragraphs should have sufficient space to let them 'breathe', while maintaining logical connection. Set for maximum legibility and aesthetics.</p>
|
||
<p class="text-sm text-carbon-500 dark:text-white">This is smaller body text for secondary information.</p>
|
||
</div>
|
||
<div class="p-chorus-lg">
|
||
<h3 class="text-h3 mb-chorus-xxl">Overset Leading</h3>
|
||
<p class="font-bold text-base text-carbon-600 dark:text-white mb-chorus-xl">This text has been set with excessive leading for the paragrpah and its associated heading.</p>
|
||
<p class="text-base text-carbon-600 dark:text-white mb-chorus-lg">Paragraphs should have sufficient space to let them 'breathe', while maintaining logical connection. Set for maximum legibility and aesthetics.</p>
|
||
<p class="text-sm text-carbon-500 dark:text-white mb-chorus-lg">This smaller body text for secondary information appears orphaned.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End: DON'T -->
|
||
</div>
|
||
<!-- Heading Weights - Inverse proportionality -->
|
||
<div class="mt-chorus-lg p-chorus-lg border border-nickel-200 dark:border-nickel-900 ">
|
||
<h3 class="text-h3 mb-chorus-md">Heading Weights</h3>
|
||
<p>Heading weights have an inverse relationship to size.</p>
|
||
<div class="space-y-chorus-sm mt-chorus-md">
|
||
<div class="flex flex-col gap-chorus-sm border border-nickel-200 dark:border-nickel-900 p-chorus-lg">
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1 text-h5">Size</div>
|
||
<div class="flex-1 text-h5">Example</div>
|
||
<div class="flex-1 text-h5">Class</div>
|
||
<div class="flex-1 text-h5">Match with</div>
|
||
</div>
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1 text-h5">h1</div>
|
||
<div class="flex-1 text-h1">Example</div>
|
||
<div class="flex-1 font-semibold">text-h1</div>
|
||
<div class="flex-1 text-xl">text-xl</div>
|
||
</div>
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1 text-h5">h2</div>
|
||
<div class="flex-1 text-h2 ">Example</div>
|
||
<div class="flex-1 font-semibold">text-h2</div>
|
||
<div class="flex-1 text-lg">text-lg</div>
|
||
</div>
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1 text-h5">h3</div>
|
||
<div class="flex-1 text-h3">Example</div>
|
||
<div class="flex-1 font-semibold">text-h3</div>
|
||
<div class="flex-1 text-md">text-md</div>
|
||
</div>
|
||
<div class="flex gap-chorus-sm ">
|
||
<div class="flex-1 text-h5">h4</div>
|
||
<div class="flex-1 text-h4">Example</div>
|
||
<div class="flex-1 font-semibold">text-h4</div>
|
||
<div class="flex-1 text-sm">text-base</div>
|
||
</div>
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1 text-h5">h5</div>
|
||
<div class="flex-1 text-h5">Example</div>
|
||
<div class="flex-1 font-semibold">text-h5</div>
|
||
<div class="flex-1 text-sm">text-sm</div>
|
||
</div>
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1 text-h5">h6</div>
|
||
<div class="flex-1 text-h6">Example</div>
|
||
<div class="flex-1 font-semibold">text-h6</div>
|
||
<div class="flex-1 text-sm">text-sm</div>
|
||
</div>
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1 text-h5">h7</div>
|
||
<div class="flex-1 text-h7">Example</div>
|
||
<div class="flex-1 font-semibold">text-h7</div>
|
||
<div class="flex-1 text-sm">text-sm</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Font Sizes -->
|
||
<div class="mt-chorus--1 border border-nickel-200 dark:border-nickel-900 p-chorus-lg">
|
||
<h3 class="text-h3 mb-chorus-md">Proportional Font Scale</h3>
|
||
<p class="text-sm text-carbon-500 dark:text-mulberry-300 mb-chorus-lg">Based on Major Third (1.25×) ratio with 18px foundation for enhanced readability</p>
|
||
<div class="space-y-chorus-sm">
|
||
|
||
<div class="flex flex-col gap-chorus-sm border border-nickel-200 dark:border-nickel-900 p-chorus-lg">
|
||
<div class="flex gap-chorus-sm font-semibold">
|
||
<div class="flex-1 font-semibold">Size</div>
|
||
<div class="flex-1 font-semibold">Class</div>
|
||
<div class="flex-1 font-semibold">Size (rem)</div>
|
||
<div class="flex-1 font-semibold">Size (px)</div>
|
||
<div class="flex-1 font-semibold">Sample</div>
|
||
|
||
</div>
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1">Extra Small</div>
|
||
<div class="flex-1">text-sm</div>
|
||
<div class="flex-1">0.64</div>
|
||
<div class="flex-1">11.5</div>
|
||
<div class="flex-1 text-sm">O</div>
|
||
</div>
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1">Small</div>
|
||
<div class="flex-1">text-sm</div>
|
||
<div class="flex-1">0.8</div>
|
||
<div class="flex-1">14.4</div>
|
||
<div class="flex-1 text-sm">O</div>
|
||
</div>
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1">Base</div>
|
||
<div class="flex-1">text-base</div>
|
||
<div class="flex-1">1.0</div>
|
||
<div class="flex-1">18</div>
|
||
<div class="flex-1 text-base">O</div>
|
||
</div>
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1">Large</div>
|
||
<div class="flex-1">text-lg</div>
|
||
<div class="flex-1">1.25</div>
|
||
<div class="flex-1">22.5</div>
|
||
<div class="flex-1 text-lg">O</div>
|
||
</div>
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1">Extra Large</div>
|
||
<div class="flex-1">text-xl</div>
|
||
<div class="flex-1">1.563</div>
|
||
<div class="flex-1">28.1</div>
|
||
<div class="flex-1 text-xl">O</div>
|
||
</div>
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1">2X Large</div>
|
||
<div class="flex-1">text-2xl</div>
|
||
<div class="flex-1">1.953</div>
|
||
<div class="flex-1">35.2</div>
|
||
<div class="flex-1 text-2xl">O</div>
|
||
</div>
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1">3X Large</div>
|
||
<div class="flex-1">text-3xl</div>
|
||
<div class="flex-1">2.441</div>
|
||
<div class="flex-1">43.9</div>
|
||
<div class="flex-1 text-3xl">O</div>
|
||
</div>
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1">4X Large</div>
|
||
<div class="flex-1">text-4xl</div>
|
||
<div class="flex-1">3.052</div>
|
||
<div class="flex-1">54.9</div>
|
||
<div class="flex-1 text-4xl">O</div>
|
||
</div>
|
||
<div class="flex gap-chorus-sm">
|
||
<div class="flex-1">5X Large</div>
|
||
<div class="flex-1">text-5xl</div>
|
||
<div class="flex-1">3.815</div>
|
||
<div class="flex-1">68.7</div>
|
||
<div class="flex-1 text-5xl">O</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Typography Implementation -->
|
||
<div class="mt-chorus--1 border border-nickel-200 dark:border-nickel-900 p-chorus-lg">
|
||
<h3 class="text-h3 mb-chorus-md">Implementation Guide</h3>
|
||
<p class="text-carbon-600 dark:text-mulberry-300 mb-chorus-lg">The CHORUS typography system uses a proportional scale with 18px base font size, ensuring consistent scaling across all elements and devices.</p>
|
||
|
||
<div class="implementation-note bg-gradient-to-r from-mulberry-50 to-coral-50 border border-mulberry-100 p-6 dark:from-mulberry-900/20 dark:to-coral-900/20 dark:border-mulberry-700">
|
||
<h4 class="text-base font-semibold text-mulberry-700 dark:text-mulberry-300 mb-3">Implementation Steps</h4>
|
||
<p class="text-sm text-gray-700 dark:text-gray-300 mb-4">Configure your build system to use the proportional typography scale with 18px base:</p>
|
||
|
||
<!-- CSS Base Font Size -->
|
||
<div class="mb-4">
|
||
<h5 class="text-sm text-gray-700 dark:text-gray-300 mb-2">1. Set Root Font Size (CSS)</h5>
|
||
<div class="bg-white dark:bg-carbon-950 p-4 border border-gray-200 dark:border-mulberry-700">
|
||
<pre><code class="language-css">/* Set 18px as the root font size for complete system scaling */
|
||
html {
|
||
font-size: 18px; /* Base size: 18px instead of browser default 16px */
|
||
}</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tailwind Configuration -->
|
||
<div class="mb-4">
|
||
<h5 class="text-sm text-gray-700 dark:text-gray-300 mb-2">2. Configure Tailwind Typography (JavaScript)</h5>
|
||
<div class="bg-white dark:bg-carbon-950 p-4 border border-gray-200 dark:border-mulberry-700">
|
||
<pre><code class="language-javascript">// tailwind.config.js - Proportional Typography Override
|
||
module.exports = {
|
||
theme: {
|
||
extend: {
|
||
fontSize: {
|
||
'xs': ['0.64rem', { lineHeight: '0.9rem', fontWeight: '400' }], // 11.52px @ 18px base
|
||
'sm': ['0.8rem', { lineHeight: '1.125rem', fontWeight: '400' }], // 14.4px @ 18px base
|
||
'base': ['1rem', { lineHeight: '1.5rem', fontWeight: '400' }], // 18px @ 18px base
|
||
'lg': ['1.25rem', { lineHeight: '1.75rem', fontWeight: '400' }], // 22.5px @ 18px base
|
||
'xl': ['1.563rem', { lineHeight: '2.125rem', fontWeight: '400' }], // 28.1px @ 18px base
|
||
'2xl': ['1.953rem', { lineHeight: '2.375rem', fontWeight: '400' }], // 35.2px @ 18px base
|
||
'3xl': ['2.441rem', { lineHeight: '2.75rem', fontWeight: '400' }], // 43.9px @ 18px base
|
||
'4xl': ['3.052rem', { lineHeight: '3.25rem', fontWeight: '400' }], // 55.0px @ 18px base
|
||
'5xl': ['3.815rem', { lineHeight: '4rem', fontWeight: '400' }], // 68.7px @ 18px base
|
||
'6xl': ['4.768rem', { lineHeight: '4.75rem', fontWeight: '400' }], // 85.8px @ 18px base
|
||
}
|
||
}
|
||
}
|
||
}</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Usage Examples -->
|
||
<div>
|
||
<h5 class="text-sm text-gray-700 dark:text-gray-300 mb-2">3. Usage Examples (HTML)</h5>
|
||
<div class="bg-white dark:bg-carbon-950 p-4 border border-gray-200 dark:border-mulberry-700">
|
||
<pre><code class="language-html"><!-- Typography classes scale proportionally from 18px base -->
|
||
<h1 class="text-4xl font-bold">Main Heading (55px)</h1>
|
||
<h2 class="text-2xl font-semibold">Section Heading (35.2px)</h2>
|
||
<p class="text-base">Body text (18px)</p>
|
||
<small class="text-sm text-gray-600">Caption text (14.4px)</small>
|
||
|
||
<!-- Spacing also scales proportionally with rem units -->
|
||
<div class="p-4 mb-6">Padding and margins scale with base font</div></code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4 p-3 bg-blue-50 dark:bg-ocean-900/20 border border-ocean-200 dark:border-ocean-700 text-sm text-ocean-800 dark:text-ocean-300">
|
||
<strong>Benefit:</strong> Changing the root font-size automatically scales all typography and rem-based spacing throughout your application, ensuring consistent proportional relationships across all screen sizes and user preferences.
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Color Palette -->
|
||
<section id="colors" class="py-chorus-xxl bg-gradient-to-b dark:from-carbon-950 dark:to-mulberry-950 from-white to-sand-200">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2 mb-chorus-lg">Color Palette</h2>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Brand Color Philosophy</h3>
|
||
<p>The CHORUS color palette draws inspiration from premium natural materials in the Australian Landscape, and sophisticated technology, creating a system that works across dark digital interfaces and light print materials while maintaining accessibility and international appeal.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<!-- Themes -->
|
||
<h3 class="text-h3 mb-chorus-md">Theme Implementation of Color Palettes</h3>
|
||
|
||
<div class="grid md:grid-cols-2">
|
||
|
||
<!-- Dark Mode Example -->
|
||
<div class="p-chorus-lg px-chorus-lg bg-mulberry-900 shadow-lg">
|
||
<h2 class="text-3xl font-black mb-chorus-sm text-white"><!-- Moon icon for light mode (click to go dark) -->
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Environment/Moon.png" alt="Switch to Dark Mode" class="w-8 h-8 icon-lg">
|
||
Dark Mode</h2>
|
||
<h4 class="mb-chorus-sm text-white">(Default/Preferred)</h4>
|
||
<p class="text-sm text-white dark:text-mulberry-300 mb-chorus-md">Dark mode is the preferred default for all CHORUS Services applications</p>
|
||
<ul class="text-base space-y-1 text-mulberry-100">
|
||
<li><strong>Background Hierarchy:</strong> Carbon Black → Mulberry Variants → Cool Gray → Border Gray</li>
|
||
<li><strong>Text Hierarchy:</strong> Clean White → Light Gray → Purple Accents → Brand Colors</li>
|
||
<li><strong>Aesthetic:</strong> Ultra-minimalist with sophisticated mulberry accents</li>
|
||
<li><strong>Contrast:</strong> All combinations tested for WCAG 2.1 AA compliance</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Light Mode Example -->
|
||
<div class="py-chorus-lg px-chorus-lg bg-white shadow-lg">
|
||
<h2 class="text-3xl font-black mb-chorus-sm text-carbon-900"><!-- Sun icon for dark mode (click to go light) -->
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Environment/Sun.png" alt="Switch to Light Mode" class="w-8 h-8 icon-lg">
|
||
Light Mode</h2>
|
||
<h4 class="mb-chorus-sm text-sand-900">(Alternative)</h4>
|
||
<p class="text-sm text-carbon-800 mb-chorus-md">Available as alternative but dark mode is strongly preferred</p>
|
||
<ul class="text-base space-y-1 text-carbon-800">
|
||
<li><strong>Background Hierarchy:</strong> Pure White → Sand Variants → Eucalyptus</li>
|
||
<li><strong>Text Hierarchy:</strong> Carbon Black → Medium Gray → Light Gray</li>
|
||
<li><strong>Usage:</strong> Available as alternative but dark mode is strongly preferred</li>
|
||
<li><strong>Contrast:</strong> Optimized for readability on warm, natural backgrounds</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<!-- Dark Mode Colors -->
|
||
<div class="pl-chorus-lg pb-chorus-lg bg-mulberry-900 shadow-lg">
|
||
<!-- OCEAN -->
|
||
<div class="border border-ocean-400 p-chorus-lg dark:bg-ocean-950 bg-ocean-700 text-ocean-200">
|
||
<div class="flex items-center gap-chorus-sm mb-chorus-sm ">
|
||
<div>
|
||
<h4 class="text-h4 mb-chorus-md">Ocean</h4>
|
||
<code class="bg-ocean-800 px-2 py-1 text-sm text-ocean-200">#5a6c80</code>
|
||
<p class="my-chorus-md text-sm text-ocean-950 dark:text-ocean-200">Usage: Primary actions, interactive elements, system feedback. Psychology: Trust, reliability, technological precision.</p>
|
||
</div>
|
||
</div>
|
||
<!--
|
||
Ocean Shades
|
||
950: '#2a3441',
|
||
900: '#3a4654',
|
||
800: '#4a5867',
|
||
700: '#5a6c80',
|
||
600: '#6a7e99',
|
||
500: '#7a90b2',
|
||
400: '#8ba3c4',
|
||
300: '#9bb6d6',
|
||
200: '#abc9e8',
|
||
100: '#bbdcfa',
|
||
50: '#cbefff'
|
||
-->
|
||
<div class="grid grid-cols-1 font-semibold text-sm">
|
||
<div class="p-2 bg-ocean-950 text-ocean-300 dark:text-ocean-300">bg-ocean-950 <span style="float: right; text-align: left;" class="font-code inconsolata">#2a3441</span></div>
|
||
<div class="p-2 bg-ocean-900 text-ocean-200 dark:text-ocean-200">bg-ocean-900 <span style="float: right; text-align: left;" class="font-code inconsolata">#3a4654</span></div>
|
||
<div class="p-2 bg-ocean-800 text-ocean-100 dark:text-ocean-100">bg-ocean-800 <span style="float: right; text-align: left;" class="font-code inconsolata">#4a5867</span></div>
|
||
<div class="p-2 bg-ocean-700 text-ocean-100 dark:text-white">bg-ocean-700<span style="float: right; text-align: left;" class="font-code inconsolata">#5a6c80</span></div>
|
||
<div class="p-2 bg-ocean-600 text-ocean-900 dark:text-ocean-900">bg-ocean-600 <span style="float: right; text-align: left;" class="font-code inconsolata">#6a7e99</span></div>
|
||
<div class="p-2 bg-ocean-500 text-ocean-800 dark:text-ocean-900">bg-ocean-500 <span style="float: right; text-align: left;" class="font-code inconsolata">#7a90b2</span></div>
|
||
<div class="p-2 bg-ocean-400 text-ocean-700 dark:text-ocean-800">bg-ocean-400 <span style="float: right; text-align: left;" class="font-code inconsolata">#8ba3c4</span></div>
|
||
<div class="p-2 bg-ocean-300 text-ocean-600 dark:text-ocean-700">bg-ocean-300 <span style="float: right; text-align: left;" class="font-code inconsolata">#9bb6d6</span></div>
|
||
<div class="p-2 bg-ocean-200 text-ocean-500 dark:text-ocean-600">bg-ocean-200 <span style="float: right; text-align: left;" class="font-code inconsolata">#abc9e8</span></div>
|
||
<div class="p-2 bg-ocean-100 text-ocean-500 dark:text-ocean-600">bg-ocean-100 <span style="float: right; text-align: left;" class="font-code inconsolata">#bbdcfa</span></div>
|
||
<div class="p-2 bg-ocean-50 text-ocean-500 dark:text-ocean-600">bg-ocean-50 <span style="float: right; text-align: left;" class="font-code inconsolata">#cbefff</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- EUCALYPTUS -->
|
||
<div class="border border-eucalyptus-400 p-chorus-lg dark:bg-eucalyptus-950 bg-eucalyptus-700 text-eucalyptus-200">
|
||
<div class="flex items-center gap-chorus-sm mb-chorus-sm">
|
||
<div>
|
||
<h4 class="text-h4 mb-chorus-md">Eucalyptus</h4>
|
||
<code class="bg-eucalyptus-800 px-2 py-1 text-sm text-eucalyptus-200">#515d54</code>
|
||
<p class="my-chorus-md text-sm text-eucalyptus-950 dark:text-eucalyptus-200">Usage: Success states, positive feedback, growth indicators. Applications: Success messages, positive data visualization.</p>
|
||
|
||
</div>
|
||
</div>
|
||
<!--
|
||
Eucalyptus Shades
|
||
950: '#2a3330',
|
||
900: '#3a4540',
|
||
800: '#4a5750',
|
||
700: '#515d54',
|
||
600: '#5a6964',
|
||
500: '#6a7974',
|
||
400: '#7a8a7f',
|
||
300: '#8a9b8f',
|
||
200: '#9aac9f',
|
||
100: '#aabdaf',
|
||
50: '#bacfbf'
|
||
-->
|
||
<div class="grid grid-cols-1 font-semibold text-sm">
|
||
<div class="p-2 bg-eucalyptus-950 text-eucalyptus-300 dark:text-eucalyptus-300">bg-eucalyptus-950 <span style="float: right; text-align: left;" class="font-code inconsolata">#2a3330</span></div>
|
||
<div class="p-2 bg-eucalyptus-900 text-eucalyptus-200 dark:text-eucalyptus-200">bg-eucalyptus-900 <span style="float: right; text-align: left;" class="font-code inconsolata">#3a4540</span></div>
|
||
<div class="p-2 bg-eucalyptus-800 text-eucalyptus-100 dark:text-eucalyptus-100">bg-eucalyptus-800 <span style="float: right; text-align: left;" class="font-code inconsolata">#4a5750</span></div>
|
||
<div class="p-2 bg-eucalyptus-700 text-eucalyptus-100 dark:text-white">bg-eucalyptus-700 <span style="float: right; text-align: left;" class="font-code inconsolata">#515d54</span></div>
|
||
<div class="p-2 bg-eucalyptus-600 text-eucalyptus-900 dark:text-eucalyptus-900">bg-eucalyptus-600 <span style="float: right; text-align: left;" class="font-code inconsolata">#5a6964</span></div>
|
||
<div class="p-2 bg-eucalyptus-500 text-eucalyptus-800 dark:text-eucalyptus-900">bg-eucalyptus-500 <span style="float: right; text-align: left;" class="font-code inconsolata">#6a7974</span></div>
|
||
<div class="p-2 bg-eucalyptus-400 text-eucalyptus-700 dark:text-eucalyptus-800">bg-eucalyptus-400 <span style="float: right; text-align: left;" class="font-code inconsolata">#7a8a7f</span></div>
|
||
<div class="p-2 bg-eucalyptus-300 text-eucalyptus-600 dark:text-eucalyptus-700">bg-eucalyptus-300 <span style="float: right; text-align: left;" class="font-code inconsolata">#8a9b8f</span></div>
|
||
<div class="p-2 bg-eucalyptus-200 text-eucalyptus-500 dark:text-eucalyptus-600">bg-eucalyptus-200 <span style="float: right; text-align: left;" class="font-code inconsolata">#9aac9f</span></div>
|
||
<div class="p-2 bg-eucalyptus-100 text-eucalyptus-500 dark:text-eucalyptus-600">bg-eucalyptus-100 <span style="float: right; text-align: left;" class="font-code inconsolata">#aabdaf</span></div>
|
||
<div class="p-2 bg-eucalyptus-50 text-eucalyptus-500 dark:text-eucalyptus-600">bg-eucalyptus-50 <span style="float: right; text-align: left;" class="font-code inconsolata">#bacfbf</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- NICKEL -->
|
||
<div class="dark:bg-nickel-950 bg-nickel-400 border border-nickel-400 p-chorus-lg text-nickel-700 ">
|
||
<div class="mb-chorus-sm">
|
||
<h4 class="text-h4 dark:text-nickel-200 text-nickel-950 mb-chorus-md">Nickel</h4>
|
||
<code class="bg-nickel-800 px-2 py-1 text-sm text-nickel-200">#c1bfb1</code>
|
||
<p class="my-chorus-md text-sm text-nickel-950 dark:text-nickel-700">Usage: UI elements, borders, technical precision. Psychology: Modern sophistication, precision, technology.</p>
|
||
</div>
|
||
<!--
|
||
Nickel Shades
|
||
950: '#171717',
|
||
900: '#2a2a2a',
|
||
800: '#3d3d3d',
|
||
700: '#505050',
|
||
600: '#636363',
|
||
500: '#767676',
|
||
400: '#c1bfb1',
|
||
300: '#d4d2c6',
|
||
200: '#e7e5db',
|
||
100: '#faf8f0',
|
||
50: '#fdfcf8'
|
||
-->
|
||
<div class="grid grid-cols-1 font-semibold text-sm">
|
||
<div class="p-2 bg-nickel-950 text-nickel-300 dark:text-nickel-300">bg-nickel-950 <span style="float: right; text-align: left;" class="font-code inconsolata">#171717</span></div>
|
||
<div class="p-2 bg-nickel-900 text-nickel-200 dark:text-nickel-200">bg-nickel-900 <span style="float: right; text-align: left;" class="font-code inconsolata">#2a2a2a</span></div>
|
||
<div class="p-2 bg-nickel-800 text-nickel-100 dark:text-nickel-100">bg-nickel-800 <span style="float: right; text-align: left;" class="font-code inconsolata">#3d3d3d</span></div>
|
||
<div class="p-2 bg-nickel-700 text-nickel-100 dark:text-white">bg-nickel-700 <span style="float: right; text-align: left;" class="font-code inconsolata">#505050</span></div>
|
||
<div class="p-2 bg-nickel-600 text-nickel-900 dark:text-nickel-900">bg-nickel-600 <span style="float: right; text-align: left;" class="font-code inconsolata">#636363</span></div>
|
||
<div class="p-2 bg-nickel-500 text-nickel-800 dark:text-nickel-900">bg-nickel-500 <span style="float: right; text-align: left;" class="font-code inconsolata">#767676</span></div>
|
||
<div class="p-2 bg-nickel-400 text-nickel-700 dark:text-nickel-800">bg-nickel-400 <span style="float: right; text-align: left;" class="font-code inconsolata">#c1bfb1</span></div>
|
||
<div class="p-2 bg-nickel-300 text-nickel-600 dark:text-nickel-700">bg-nickel-300 <span style="float: right; text-align: left;" class="font-code inconsolata">#d4d2c6</span></div>
|
||
<div class="p-2 bg-nickel-200 text-nickel-500 dark:text-nickel-600">bg-nickel-200 <span style="float: right; text-align: left;" class="font-code inconsolata">#e7e5db</span></div>
|
||
<div class="p-2 bg-nickel-100 text-nickel-500 dark:text-nickel-600">bg-nickel-100 <span style="float: right; text-align: left;" class="font-code inconsolata">#faf8f0</span></div>
|
||
<div class="p-2 bg-nickel-50 text-nickel-500 dark:text-nickel-600">bg-nickel-50 <span style="float: right; text-align: left;" class="font-code inconsolata">#fdfcf8</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!--
|
||
MULBERRY
|
||
950: '#0b0213',
|
||
900: '#1a1426',
|
||
800: '#2a2639',
|
||
700: '#3a384c',
|
||
600: '#4a4a5f',
|
||
500: '#5a5c72',
|
||
400: '#7a7e95',
|
||
300: '#9aa0b8',
|
||
200: '#bac2db',
|
||
100: '#dae4fe',
|
||
50: '#f0f4ff'
|
||
-->
|
||
<div class="bg-mulberry-700 border border-mulberry-400 dark:bg-mulberry-950 p-chorus-lg text-mulberry-200">
|
||
<div class="mb-chorus-sm">
|
||
<h4 class="text-h4 text-white mb-chorus-md">Mulberry</h4>
|
||
<code class="bg-mulberry-800 px-2 py-1 text-sm text-mulberry-200">#0b0213</code>
|
||
<p class="my-chorus-md text-sm text-mulberry-950 dark:text-mulberry-200">Usage: Hero backgrounds, dark accents, secondary elements. Psychology: Richness, mystery, luxury, power, and depth.</p>
|
||
</div>
|
||
<!-- Mulberry Shades -->
|
||
<div class="grid grid-cols-1 font-semibold text-sm">
|
||
<div class="p-2 bg-mulberry-950 text-mulberry-300 dark:text-mulberry-300">bg-mulberry-950 <span style="float: right; text-align: left;" class="font-code inconsolata">#0b0213</span></div>
|
||
<div class="p-2 bg-mulberry-900 text-mulberry-200 dark:text-mulberry-200">bg-mulberry-900 <span style="float: right; text-align: left;" class="font-code inconsolata">#1a1426</span></div>
|
||
<div class="p-2 bg-mulberry-800 text-mulberry-100 dark:text-mulberry-100">bg-mulberry-800 <span style="float: right; text-align: left;" class="font-code inconsolata">#2a2639</span></div>
|
||
<div class="p-2 bg-mulberry-700 text-mulberry-100 dark:text-white">bg-mulberry-700 <span style="float: right; text-align: left;" class="font-code inconsolata">#3a384c</span></div>
|
||
<div class="p-2 bg-mulberry-600 text-mulberry-900 dark:text-mulberry-900">bg-mulberry-600 <span style="float: right; text-align: left;" class="font-code inconsolata">#4a4a5f</span></div>
|
||
<div class="p-2 bg-mulberry-500 text-mulberry-800 dark:text-mulberry-900">bg-mulberry-500 <span style="float: right; text-align: left;" class="font-code inconsolata">#5a5c72</span></div>
|
||
<div class="p-2 bg-mulberry-400 text-mulberry-700 dark:text-mulberry-800">bg-mulberry-400 <span style="float: right; text-align: left;" class="font-code inconsolata">#7a7e95</span></div>
|
||
<div class="p-2 bg-mulberry-300 text-mulberry-600 dark:text-mulberry-700">bg-mulberry-300 <span style="float: right; text-align: left;" class="font-code inconsolata">#9aa0b8</span></div>
|
||
<div class="p-2 bg-mulberry-200 text-mulberry-500 dark:text-mulberry-600">bg-mulberry-200 <span style="float: right; text-align: left;" class="font-code inconsolata">#bac2db</span></div>
|
||
<div class="p-2 bg-mulberry-100 text-mulberry-500 dark:text-mulberry-600">bg-mulberry-100 <span style="float: right; text-align: left;" class="font-code inconsolata">#dae4fe</span></div>
|
||
<div class="p-2 bg-mulberry-50 text-mulberry-500 dark:text-mulberry-600">bg-mulberry-50 <span style="float: right; text-align: left;" class="font-code inconsolata">#f0f4ff</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- Light Mode Colors -->
|
||
<div class="pb-chorus-lg pr-chorus-lg bg-white shadow-lg">
|
||
<!-- SAND -->
|
||
<div class="border border-sand-400 p-chorus-lg dark:bg-sand-950 bg-sand-700 text-sand-200">
|
||
<div class="flex items-center gap-chorus-sm mb-chorus-sm">
|
||
<div>
|
||
<h4 class="text-h4 mb-chorus-md">Sand</h4>
|
||
<code class="bg-sand-800 px-2 py-1 text-sm text-sand-200">#8e7b5e</code>
|
||
<p class="my-chorus-md text-sm text-sand-950 dark:text-sand-200">Usage: Warning states, attention indicators, energy elements. Applications: Warnings, attention callouts, active processes.</p>
|
||
|
||
</div>
|
||
</div>
|
||
<!--
|
||
Sand Shades
|
||
950: '#8E7B5E',
|
||
900: '#99886E',
|
||
800: '#A4957E',
|
||
700: '#AFA28E',
|
||
600: '#BAAF9F',
|
||
500: '#C5BCAF',
|
||
400: '#D0C9BF',
|
||
300: '#DBD6CF',
|
||
200: '#E6E3DF',
|
||
100: '#F1F0EF',
|
||
50: '#F1F0EF'
|
||
-->
|
||
<div class="grid grid-cols-1 font-semibold text-sm">
|
||
<div class="p-2 bg-sand-950 text-sand-300 dark:text-sand-300">bg-sand-950 <span style="float: right; text-align: left;" class="font-code inconsolata">#8E7B5E</span></div>
|
||
<div class="p-2 bg-sand-900 text-sand-200 dark:text-sand-200">bg-sand-900 <span style="float: right; text-align: left;" class="font-code inconsolata">#99886E</span></div>
|
||
<div class="p-2 bg-sand-800 text-sand-100 dark:text-sand-100">bg-sand-800 <span style="float: right; text-align: left;" class="font-code inconsolata">#A4957E</span></div>
|
||
<div class="p-2 bg-sand-700 text-sand-100 dark:text-white">bg-sand-700 <span style="float: right; text-align: left;" class="font-code inconsolata">#AFA28E</span></div>
|
||
<div class="p-2 bg-sand-600 text-sand-900 dark:text-sand-900">bg-sand-600 <span style="float: right; text-align: left;" class="font-code inconsolata">#BAAF9F</span></div>
|
||
<div class="p-2 bg-sand-500 text-sand-800 dark:text-sand-900">bg-sand-500 <span style="float: right; text-align: left;" class="font-code inconsolata">#C5BCAF</span></div>
|
||
<div class="p-2 bg-sand-400 text-sand-700 dark:text-sand-800">bg-sand-400 <span style="float: right; text-align: left;" class="font-code inconsolata">#D0C9BF</span></div>
|
||
<div class="p-2 bg-sand-300 text-sand-600 dark:text-sand-700">bg-sand-300 <span style="float: right; text-align: left;" class="font-code inconsolata">#DBD6CF</span></div>
|
||
<div class="p-2 bg-sand-200 text-sand-500 dark:text-sand-600">bg-sand-200 <span style="float: right; text-align: left;" class="font-code inconsolata">#E6E3DF</span></div>
|
||
<div class="p-2 bg-sand-100 text-sand-500 dark:text-sand-600">bg-sand-100 <span style="float: right; text-align: left;" class="font-code inconsolata">#F1F0EF</span></div>
|
||
<div class="p-2 bg-sand-50 text-sand-500 dark:text-sand-600">bg-sand-50 <span style="float: right; text-align: left;" class="font-code inconsolata">#F1F0EF</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!--
|
||
CORAL
|
||
|
||
-->
|
||
<div class="border border-coral-400 p-chorus-lg dark:bg-coral-950 bg-coral-700 text-coral-200">
|
||
<div class="flex items-center gap-chorus-sm mb-chorus-sm">
|
||
<div>
|
||
<h4 class="text-h4 mb-chorus-md">Coral</h4>
|
||
<code class="bg-coral-800 px-2 py-1 text-sm text-coral-200">#593735</code>
|
||
<p class="my-chorus-md text-sm text-coral-950 dark:text-coral-200">Usage: Error states, critical alerts, problem indicators. Applications: Error messages, critical warnings, urgent notifications.</p>
|
||
|
||
</div>
|
||
</div>
|
||
<!--
|
||
Coral Shades
|
||
950: '#6A4A48',
|
||
900: '#7B5D5A',
|
||
800: '#8C706C',
|
||
700: '#9D8380',
|
||
600: '#AE9693',
|
||
500: '#BFAAA7',
|
||
400: '#D0BDBB',
|
||
300: '#E1D1CF',
|
||
200: '#F2E4E3',
|
||
100: '#9e979c',
|
||
50: '#aea7ac'
|
||
-->
|
||
<div class="grid grid-cols-1 font-semibold text-sm">
|
||
<div class="p-2 bg-coral-950 text-coral-300 dark:text-coral-300">bg-coral-950 <span style="float: right; text-align: left;" class="font-code inconsolata">#6A4A48</span></div>
|
||
<div class="p-2 bg-coral-900 text-coral-200 dark:text-coral-200">bg-coral-900 <span style="float: right; text-align: left;" class="font-code inconsolata">#7B5D5A</span></div>
|
||
<div class="p-2 bg-coral-800 text-coral-100 dark:text-coral-100">bg-coral-800 <span style="float: right; text-align: left;" class="font-code inconsolata">#8C706C</span></div>
|
||
<div class="p-2 bg-coral-700 text-coral-100 dark:text-white">bg-coral-700 <span style="float: right; text-align: left;" class="font-code inconsolata">#9D8380</span></div>
|
||
<div class="p-2 bg-coral-600 text-coral-900 dark:text-coral-900">bg-coral-600 <span style="float: right; text-align: left;" class="font-code inconsolata">#AE9693</span></div>
|
||
<div class="p-2 bg-coral-500 text-coral-800 dark:text-coral-900">bg-coral-500 <span style="float: right; text-align: left;" class="font-code inconsolata">#BFAAA7</span></div>
|
||
<div class="p-2 bg-coral-400 text-coral-700 dark:text-coral-800">bg-coral-400 <span style="float: right; text-align: left;" class="font-code inconsolata">#D0BDBB</span></div>
|
||
<div class="p-2 bg-coral-300 text-coral-600 dark:text-coral-700">bg-coral-300 <span style="float: right; text-align: left;" class="font-code inconsolata">#E1D1CF</span></div>
|
||
<div class="p-2 bg-coral-200 text-coral-500 dark:text-coral-600">bg-coral-200 <span style="float: right; text-align: left;" class="font-code inconsolata">#F2E4E3</span></div>
|
||
<div class="p-2 bg-coral-100 text-coral-500 dark:text-coral-600">bg-coral-100 <span style="float: right; text-align: left;" class="font-code inconsolata">#9e979c</span></div>
|
||
<div class="p-2 bg-coral-50 text-coral-500 dark:text-coral-600">bg-coral-50 <span style="float: right; text-align: left;" class="font-code inconsolata">#aea7ac</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CARBON -->
|
||
<div class=" dark:bg-carbon-950 bg-carbon-700 border border-carbon-800 p-chorus-lg text-carbon-200">
|
||
<div class="mb-chorus-sm">
|
||
<h4 class="text-h4 text-white mb-chorus-md">Carbon</h4>
|
||
<code class="bg-carbon-800 px-2 py-1 text-sm text-carbon-200">#000000</code>
|
||
<p class="my-chorus-md text-sm dark:text-carbon-200">Usage: Primary backgrounds, high-contrast text, logo applications. Psychology: Authority, sophistication, premium quality.</p>
|
||
</div>
|
||
<!--
|
||
Carbon Shades
|
||
950: '#000000',
|
||
900: '#0a0a0a',
|
||
800: '#1a1a1a',
|
||
700: '#2a2a2a',
|
||
600: '#666666',
|
||
500: '#808080',
|
||
400: '#a0a0a0',
|
||
300: '#c0c0c0',
|
||
200: '#e0e0e0',
|
||
100: '#f0f0f0',
|
||
50: '#f8f8f8'
|
||
-->
|
||
<div class="grid grid-cols-1 font-semibold text-sm">
|
||
<div class="p-2 bg-carbon-950 text-carbon-300 dark:text-carbon-300">bg-carbon-950 <span style="float: right; text-align: left;" class="font-code inconsolata">#000000</span></div>
|
||
<div class="p-2 bg-carbon-900 text-carbon-200 dark:text-carbon-200">bg-carbon-900 <span style="float: right; text-align: left;" class="font-code inconsolata">#0a0a0a</span></div>
|
||
<div class="p-2 bg-carbon-800 text-carbon-100 dark:text-carbon-100">bg-carbon-800 <span style="float: right; text-align: left;" class="font-code inconsolata">#1a1a1a</span></div>
|
||
<div class="p-2 bg-carbon-700 text-carbon-100 dark:text-white">bg-carbon-700 <span style="float: right; text-align: left;" class="font-code inconsolata">#2a2a2a</span></div>
|
||
<div class="p-2 bg-carbon-600 text-carbon-900 dark:text-carbon-800">bg-carbon-600 <span style="float: right; text-align: left;" class="font-code inconsolata">#666666</span></div>
|
||
<div class="p-2 bg-carbon-500 text-carbon-800 dark:text-carbon-900">bg-carbon-500 <span style="float: right; text-align: left;" class="font-code inconsolata">#808080</span></div>
|
||
<div class="p-2 bg-carbon-400 text-carbon-700 dark:text-carbon-800">bg-carbon-400 <span style="float: right; text-align: left;" class="font-code inconsolata">#a0a0a0</span></div>
|
||
<div class="p-2 bg-carbon-300 text-carbon-600 dark:text-carbon-700">bg-carbon-300 <span style="float: right; text-align: left;" class="font-code inconsolata">#c0c0c0</span></div>
|
||
<div class="p-2 bg-carbon-200 text-carbon-500 dark:text-carbon-600">bg-carbon-200 <span style="float: right; text-align: left;" class="font-code inconsolata">#e0e0e0</span></div>
|
||
<div class="p-2 bg-carbon-100 text-carbon-500 dark:text-carbon-600">bg-carbon-100 <span style="float: right; text-align: left;" class="font-code inconsolata">#f0f0f0</span></div>
|
||
<div class="p-2 bg-carbon-50 text-carbon-500 dark:text-carbon-600">bg-carbon-50 <span style="float: right; text-align: left;" class="font-code inconsolata">#f8f8f8</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- WALNUT -->
|
||
<div class="bg-walnut-700 border border-walnut-400 dark:bg-walnut-950 p-chorus-lg text-walnut-200">
|
||
<div class="mb-chorus-sm">
|
||
<h4 class="text-h4 text-white mb-chorus-md">Walnut</h4>
|
||
<code class="bg-walnut-800 px-2 py-1 text-sm text-walnut-200">#403730</code>
|
||
<p class="my-chorus-md text-sm text-walnut-950 dark:text-walnut-200">Usage: Warm accents, secondary elements, natural touches. Psychology: Reliability, craftsmanship, approachable intelligence.</p>
|
||
</div>
|
||
<!--
|
||
Walnut Shades
|
||
950: '#1E1815',
|
||
900: '#403730',
|
||
800: '#504743',
|
||
700: '#605756',
|
||
600: '#706769',
|
||
500: '#80777c',
|
||
400: '#90878f',
|
||
300: '#a09aa2',
|
||
200: '#b0adb5',
|
||
100: '#c0c0c8',
|
||
50: '#d0d3db',
|
||
25: '#e0e6ee'
|
||
-->
|
||
<div class="grid grid-cols-1 font-semibold text-sm">
|
||
<div class="p-2 bg-walnut-950 text-walnut-300 dark:text-walnut-300">bg-walnut-950 <span style="float: right; text-align: left;" class="font-code inconsolata">#1E1815</span></div>
|
||
<div class="p-2 bg-walnut-900 text-walnut-200 dark:text-walnut-200">bg-walnut-900 <span style="float: right; text-align: left;" class="font-code inconsolata">#403730</span></div>
|
||
<div class="p-2 bg-walnut-800 text-walnut-100 dark:text-walnut-100">bg-walnut-800 <span style="float: right; text-align: left;" class="font-code inconsolata">#504743</span></div>
|
||
<div class="p-2 bg-walnut-700 text-walnut-100 dark:text-white">bg-walnut-700 <span style="float: right; text-align: left;" class="font-code inconsolata">#605756</span></div>
|
||
<div class="p-2 bg-walnut-600 text-walnut-900 dark:text-walnut-900">bg-walnut-600 <span style="float: right; text-align: left;" class="font-code inconsolata">#706769</span></div>
|
||
<div class="p-2 bg-walnut-500 text-walnut-800 dark:text-walnut-800">bg-walnut-500 <span style="float: right; text-align: left;" class="font-code inconsolata">#80777c</span></div>
|
||
<div class="p-2 bg-walnut-400 text-walnut-700 dark:text-walnut-800">bg-walnut-400 <span style="float: right; text-align: left;" class="font-code inconsolata">#90878f</span></div>
|
||
<div class="p-2 bg-walnut-300 text-walnut-600 dark:text-walnut-700">bg-walnut-300 <span style="float: right; text-align: left;" class="font-code inconsolata">#a09aa2</span></div>
|
||
<div class="p-2 bg-walnut-200 text-walnut-500 dark:text-walnut-600">bg-walnut-200 <span style="float: right; text-align: left;" class="font-code inconsolata">#b0adb5</span></div>
|
||
<div class="p-2 bg-walnut-100 text-walnut-500 dark:text-walnut-600">bg-walnut-100 <span style="float: right; text-align: left;" class="font-code inconsolata">#c0c0c8</span></div>
|
||
<div class="p-2 bg-walnut-50 text-walnut-500 dark:text-walnut-600">bg-walnut-50 <span style="float: right; text-align: left;" class="font-code inconsolata">#d0d3db</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Iconography System -->
|
||
<section id="iconography" class="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-950 dark:to-carbon-800 from-sand-200 to-white">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2 mb-chorus-lg">Iconography System</h2>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Philosophy</h3>
|
||
<p>The CHORUS iconography system uses the <strong>Coolicons v4.1</strong> library, providing a comprehensive set of clean, minimalist icons that align with our ultra-modern aesthetic. Icons serve as visual anchors and functional indicators, maintaining clarity across both light and dark themes while supporting our vision-inclusive design principles.</p>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-3 mt-chorus-lg">
|
||
<div class="border border-nickel-200 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">Clarity & Recognition</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300">Icons communicate instantly without language barriers</p>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">Theme Adaptive</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300">Black and white variants ensure perfect contrast in all modes</p>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">Consistent Scale</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300">Standardized sizing maintains visual harmony</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Icon Categories</h3>
|
||
<p class="mb-chorus-md">The Coolicons library organizes icons into logical categories, each serving specific interface functions while maintaining design consistency.</p>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<!-- Interface Icons -->
|
||
<div class="shadow-lg bg-white dark:bg-mulberry-800 border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">Interface & Navigation</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Core UI elements for user interaction and navigation</p>
|
||
<div class="grid grid-cols-8 gap-4">
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search_Magnifying_Glass.png" alt="Search" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search_Magnifying_Glass.png" alt="Search" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Search</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Settings" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Settings" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Settings</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Filter.png" alt="Filter" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Filter.png" alt="Filter" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Filter</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png" alt="Check" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Check.png" alt="Check" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Check</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/External_Link.png" alt="External Link" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/External_Link.png" alt="External Link" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Link</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock.png" alt="Lock" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock.png" alt="Lock" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Security</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="Star" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="Star" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Favorite</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Trash_Empty.png" alt="Delete" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Trash_Empty.png" alt="Delete" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Delete</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- File & Data Icons -->
|
||
<div class="shadow-lg bg-white dark:bg-mulberry-800 border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">File & Data Management</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Document, folder, and cloud storage representations</p>
|
||
<div class="grid grid-cols-8 gap-4">
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Document.png" alt="Document" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Document.png" alt="Document" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Document</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Folder.png" alt="Folder" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Folder.png" alt="Folder" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Folder</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Cloud.png" alt="Cloud" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Cloud.png" alt="Cloud" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Cloud</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Download.png" alt="Download" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Download.png" alt="Download" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Download</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Upload.png" alt="Upload" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Upload.png" alt="Upload" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Upload</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Archive.png" alt="Archive" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Archive.png" alt="Archive" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Archive</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="Code" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="Code" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Code</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Search.png" alt="Search Files" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Search.png" alt="Search Files" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Search</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Communication Icons -->
|
||
<div class="shadow-lg bg-white dark:bg-mulberry-800 border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">Communication & Notifications</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Message, alert, and social interaction indicators</p>
|
||
<div class="grid grid-cols-8 gap-4">
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Mail.png" alt="Mail" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Mail.png" alt="Mail" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Mail</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="Chat" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="Chat" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Chat</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Bell.png" alt="Notifications" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Bell.png" alt="Notifications" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Alerts</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Phone.png" alt="Phone" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Phone.png" alt="Phone" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Call</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Share_Android.png" alt="Share" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Share_Android.png" alt="Share" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Share</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Paper_Plane.png" alt="Send" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Paper_Plane.png" alt="Send" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Send</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Bell_Notification.png" alt="Notification" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Bell_Notification.png" alt="Notification" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Notice</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat_Dots.png" alt="Chat Dots" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat_Dots.png" alt="Chat Dots" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Typing</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Arrow & Navigation Icons -->
|
||
<div class="shadow-lg bg-white dark:bg-mulberry-800 border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">Navigation & Direction</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Directional indicators and navigation controls</p>
|
||
<div class="grid grid-cols-8 gap-4">
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Left_MD.png" alt="Arrow Left" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Left_MD.png" alt="Arrow Left" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Back</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Right_MD.png" alt="Arrow Right" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Right_MD.png" alt="Arrow Right" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Forward</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Up_MD.png" alt="Arrow Up" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Up_MD.png" alt="Arrow Up" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Up</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Down_MD.png" alt="Arrow Down" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Down_MD.png" alt="Arrow Down" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Down</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Chevron_Down.png" alt="Chevron Down" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Chevron_Down.png" alt="Chevron Down" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Expand</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Chevron_Right.png" alt="Chevron Right" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Chevron_Right.png" alt="Chevron Right" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Next</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrows_Reload_01.png" alt="Reload" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrows_Reload_01.png" alt="Reload" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Refresh</span>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Expand.png" alt="Expand" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Expand.png" alt="Expand" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-sm">Fullscreen</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="my-chorus-lg">
|
||
<h3 class="text-h3 mb-chorus-md">Icon Sizing & Usage</h3>
|
||
<!-- Icon Sizes -->
|
||
<div class="grid gap-chorus--1 md:grid-cols-2">
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-800 bg-gradient-to-r dark:from-mulberry-900 dark:to-mulberry-950 from-sand-200 to-white">
|
||
<h4 class="text-h4 mb-chorus-md">Standard Sizes</h4>
|
||
<div class="space-y-chorus-sm">
|
||
<div class="flex items-center gap-chorus-md">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Small Icon" class="w-4 h-4 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Small Icon" class="w-4 h-4 hidden dark:block">
|
||
<span class="text-base"><strong>16px (w-4 h-4):</strong> Inline text, small buttons</span>
|
||
</div>
|
||
<div class="flex items-center gap-chorus-md">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Medium Icon" class="w-5 h-5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Medium Icon" class="w-5 h-5 hidden dark:block">
|
||
<span class="text-base"><strong>20px (w-5 h-5):</strong> Standard UI elements</span>
|
||
</div>
|
||
<div class="flex items-center gap-chorus-md">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Large Icon" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Large Icon" class="w-6 h-6 hidden dark:block">
|
||
<span class="text-base"><strong>24px (w-6 h-6):</strong> Primary actions, headers</span>
|
||
</div>
|
||
<div class="flex items-center gap-chorus-md">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="XL Icon" class="w-8 h-8 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="XL Icon" class="w-8 h-8 hidden dark:block">
|
||
<span class="text-base"><strong>32px (w-8 h-8):</strong> Feature highlights, cards</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Icon usage -->
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-800 bg-gradient-to-l dark:from-mulberry-900 dark:to-mulberry-950 from-sand-200 to-white">
|
||
<h4 class="text-h4 mb-chorus-md">Usage Guidelines</h4>
|
||
<ul class="text-base space-y-2 text-carbon-600 dark:text-mulberry-300">
|
||
<li><strong>Consistency:</strong> Use same size for similar functions</li>
|
||
<li><strong>Alignment:</strong> Center icons within their containers</li>
|
||
<li><strong>Spacing:</strong> Minimum 8px padding around clickable icons</li>
|
||
<li><strong>Context:</strong> Choose appropriate semantic meaning</li>
|
||
<li><strong>Contrast:</strong> Black icons for light themes, white for dark</li>
|
||
<li><strong>Accessibility:</strong> Always include alt text descriptions</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="my-chorus-xxl">
|
||
<h3 class="text-h3 mb-chorus-md">Implementation Examples</h3>
|
||
|
||
<div class="">
|
||
<!-- HTML Implementation -->
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">HTML Implementation</h4>
|
||
<div class="overflow-hidden border border-nickel-200 dark:border-nickel-900">
|
||
<pre class="language-html"><code class="language-html"><!-- Theme-adaptive icon with dark/light variants -->
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search_Magnifying_Glass.png"
|
||
alt="Search"
|
||
class="w-5 h-5 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search_Magnifying_Glass.png"
|
||
alt="Search"
|
||
class="w-5 h-5 hidden dark:block">
|
||
|
||
<!-- Button with icon -->
|
||
<button class="flex items-center gap-2 px-4 py-2">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Download.png"
|
||
alt="Download"
|
||
class="w-4 h-4 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Download.png"
|
||
alt="Download"
|
||
class="w-4 h-4 hidden dark:block">
|
||
Download File
|
||
</button></code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SVG Implementation -->
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">SVG Implementation (Preferred)</h4>
|
||
<div class="overflow-hidden border border-nickel-200 dark:border-nickel-900">
|
||
<pre class="language-html"><code class="language-html"><!-- SVG with CSS theme adaptation -->
|
||
<svg class="w-5 h-5 text-carbon-950 dark:text-white">
|
||
<use href="icons/coolicons.v4.1/coolicons SVG/Interface/Search_Magnifying_Glass.svg#icon"></use>
|
||
</svg>
|
||
|
||
<!-- Inline SVG with CSS fill -->
|
||
<svg class="w-5 h-5 fill-current text-carbon-950 dark:text-white" viewBox="0 0 24 24">
|
||
<path d="M21 21L16.514 16.506M19 10.5C19 15.194 15.194 19 10.5 19S2 15.194 2 10.5 5.806 2 10.5 2 19 5.806 19 10.5Z"/>
|
||
</svg></code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tailwind Utility Classes -->
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">Tailwind Utility Classes</h4>
|
||
<div class="overflow-hidden border border-nickel-200 dark:border-nickel-900">
|
||
<pre class="language-css"><code class="language-css">/* Icon sizing utilities */
|
||
.icon-xs { @apply w-3 h-3; } /* 12px - minimal inline */
|
||
.icon-sm { @apply w-4 h-4; } /* 16px - small buttons */
|
||
.icon-md { @apply w-5 h-5; } /* 20px - standard UI */
|
||
.icon-lg { @apply w-6 h-6; } /* 24px - primary actions */
|
||
.icon-xl { @apply w-8 h-8; } /* 32px - feature highlights */
|
||
|
||
/* Theme-adaptive coloring */
|
||
.icon-adaptive { @apply text-carbon-950 dark:text-white; }
|
||
.icon-accent { @apply text-mulberry-950 dark:text-paper-200; }
|
||
.icon-muted { @apply text-carbon-600 dark:text-mulberry-300; }</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="shadow-lg bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-600 from-sand-400 to-sand-200 backdrop-blur dark:bg-mulberry-800 border dark:border-mulberry-600 light:border-nickel-300 p-chorus-lg light:text-carbon-950 dark:text-white">
|
||
<h3 class="text-h3 mb-chorus-md">Icon Library Access</h3>
|
||
<p class="text-sm text-carbon-800 dark:text-mulberry-300">The complete Coolicons v4.1 library is available in the brand assets directory with both PNG and SVG formats.</p>
|
||
|
||
</div>
|
||
|
||
<!-- Example Dialogs -->
|
||
<div class="mt-chorus-xxl">
|
||
<h3 class="text-h3 mb-chorus-md">Example Dialogs</h3>
|
||
<p class="text-base">The following classes are available to style messages to the user in various scenarios.</p>
|
||
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-200 mb-chorus-md">These examples demonstrate how to use icons effectively in different dialog contexts.</p>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-chorus-lg">
|
||
<!-- Example Dialogs: Info -->
|
||
<div class="info border border-nickel-200 p-chorus-lg dark:border-nickel-900 flex items-start gap-chorus-base">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Info.png" alt="Info Icon" class="icon w-8 h-8 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Info.png" alt="Info Icon" class="icon w-8 h-8 hidden dark:block">
|
||
<div>
|
||
<h4 class="text-h4 ">Information</h4>
|
||
<p class="text-base text-carbon-600 dark:text-white">Use the info icon to indicate general information.</p>
|
||
<button class="default">OK</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Example Dialogs: Note -->
|
||
<div class="note border border-nickel-200 p-chorus-lg dark:border-nickel-900 flex items-start gap-chorus-base">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Square_Warning.png" alt="Note Icon" class="icon w-8 h-8 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Square_Warning.png" alt="Note Icon" class="icon w-8 h-8 hidden dark:block">
|
||
<div>
|
||
<h4 class="text-h4">Please Note</h4>
|
||
<p class="text-base text-carbon-600 dark:text-white">Use the note icon for additional context or tips.</p>
|
||
<button>Cancel</button>
|
||
<button class="default">OK</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Example Dialogs: Caution -->
|
||
<div class="caution border border-nickel-200 p-chorus-lg dark:border-nickel-900 flex items-start gap-chorus-base">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Triangle_Warning.png" alt="Caution Icon" class="icon w-8 h-8 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Triangle_Warning.png" alt="Caution Icon" class="icon w-8 h-8 hidden dark:block">
|
||
<div>
|
||
<h4 class="text-h4">Caution</h4>
|
||
<p class="text-base text-carbon-600 dark:text-white">Use the caution icon to alert users to potential issues.</p>
|
||
<button>Cancel</button>
|
||
<button class="default">OK</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Example Dialogs: Security -->
|
||
<div class="security-warning border border-nickel-200 p-chorus-lg dark:border-nickel-900 flex items-start gap-chorus-base">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Shield_Warning.png" alt="Security Icon" class="w-6 h-6 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Shield_Warning.png" alt="Security Icon" class="w-6 h-6 hidden dark:block">
|
||
<div>
|
||
<h4 class="text-h4">Security Alert</h4>
|
||
<p class="text-base text-carbon-600 dark:text-white">Use the warning icon to indicate critical issues that require attention.</p>
|
||
<button>Cancel</button>
|
||
<button class="default">OK</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Example Dialogs: Error -->
|
||
<div class="error border border-nickel-200 p-chorus-lg dark:border-nickel-900 flex items-start gap-chorus-base">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Octagon_Warning.png" alt="Error Icon" class="icon w-8 h-8 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Octagon_Warning.png" alt="Error Icon" class="icon w-8 h-8 hidden dark:block">
|
||
<div>
|
||
<h4 class="text-h4">Error</h4>
|
||
<p class="text-base text-carbon-600 dark:text-white">Use the error icon to indicate a problem that needs resolution.</p>
|
||
<button>Cancel</button>
|
||
<button class="default">OK</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Example Dialogs: Critical -->
|
||
<div class="critical border border-nickel-200 p-chorus-lg dark:border-nickel-900 flex items-start gap-chorus-base">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Wavy_Warning.png" alt="Critical Icon" class="icon w-8 h-8 dark:hidden">
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Wavy_Warning.png" alt="Critical Icon" class="icon w-8 h-8 hidden dark:block">
|
||
<div>
|
||
<h4 class="text-h4">Critical Error</h4>
|
||
<p class="text-base text-carbon-600 dark:text-white">Use the critical icon for severe issues that require immediate action.</p>
|
||
<button class="default">OK</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Accessibility & Vision Inclusivity -->
|
||
<section id="accessibility" class="py-chorus-xxl bg-gradient-to-b dark:from-carbon-800 dark:to-walnut-950 from-sand-200 to-white">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2 mb-chorus-lg">Accessibility & Vision Inclusivity</h2>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Inclusive Design Philosophy</h3>
|
||
<p>The CHORUS brand system extends beyond standard accessibility to provide <strong>vision-inclusive design</strong> that supports users with different forms of vision differences while maintaining our sophisticated metallic aesthetic. Our approach prioritizes contrast, brightness, and texture cues over exact hue fidelity.</p>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-3 mt-chorus-lg">
|
||
<div class="border border-nickel-200 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">Universal Access</h4>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300">8%+ of users experience color blindness</p>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">Brand Integrity</h4>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300">Metallic identity remains intact and aesthetically pleasing across all vision modes</p>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">Technical Excellence</h4>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300">All combinations exceed WCAG 2.1 AA standards with strategic texture and brightness</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Vision Types & Support</h3>
|
||
|
||
<div class="">
|
||
<!-- Deuteranopia Support -->
|
||
<div class="mb-chorus--1 border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">Deuteranopia (Green-Blind) - 75% of Color Blind Users</h4>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Our metallic palette works exceptionally well for deuteranopia - carbon, nickel, and mulberry maintain distinct contrast.</p>
|
||
|
||
<div class="grid gap-chorus-sm md:grid-cols-4">
|
||
<div class="bg-carbon-950 border border-carbon-800 p-chorus-md text-white">
|
||
<h5 class="font-black text-white">Carbon</h5>
|
||
<p class="text-sm text-carbon-300 mt-1">Excellent contrast, appears as expected</p>
|
||
</div>
|
||
<div class="bg-mulberry-950 border border-mulberry-800 p-chorus-md text-white">
|
||
<h5 class="font-black text-white">Mulberry</h5>
|
||
<p class="text-sm text-mulberry-300 mt-1">Maintains dark richness, slight blue shift</p>
|
||
</div>
|
||
<div class="bg-nickel-400 border border-nickel-300 p-chorus-md text-carbon-950">
|
||
<h5 class="font-black text-carbon-950">Nickel</h5>
|
||
<p class="text-sm text-carbon-700 mt-1">Perfect metallic appearance maintained</p>
|
||
</div>
|
||
<div class="bg-ocean-700 border border-ocean-600 p-chorus-md text-white">
|
||
<h5 class="font-black text-white">Ocean</h5>
|
||
<p class="text-sm text-white mt-1">Appears more blue-gray, excellent contrast</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Protanopia Support -->
|
||
<div class="mb-chorus--1 border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">Protanopia (Red-Blind) - 20% of Color Blind Users</h4>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Our strategic use of brightness differences ensures full accessibility for protanopia users.</p>
|
||
|
||
<div class="grid gap-chorus-sm md:grid-cols-4">
|
||
<div class="bg-carbon-950 border border-carbon-800 p-chorus-md text-white">
|
||
<h5 class="font-black text-white">Carbon</h5>
|
||
<p class="text-sm text-carbon-300 mt-1">Perfect contrast, no color dependency</p>
|
||
</div>
|
||
<div class="bg-coral-700 border border-coral-600 p-chorus-md text-white">
|
||
<h5 class="font-black text-white">Coral</h5>
|
||
<p class="text-sm text-white mt-1">Appears dark brown, maintains warning context</p>
|
||
</div>
|
||
<div class="bg-eucalyptus-700 border border-eucalyptus-600 p-chorus-md text-white">
|
||
<h5 class="font-black text-white">Eucalyptus</h5>
|
||
<p class="text-sm text-white mt-1">Appears yellow-brown, retains positive association</p>
|
||
</div>
|
||
<div class="bg-sand-700 border border-sand-600 p-chorus-md text-white">
|
||
<h5 class="font-black text-white">Sand</h5>
|
||
<p class="text-sm text-white mt-1">Enhanced yellow appearance, excellent for warnings</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tritanopia Support -->
|
||
<div class="mb-chorus--1 border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">Tritanopia (Blue-Blind) - 5% of Color Blind Users</h4>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Our earth-tone palette performs excellently for tritanopia, with warm tones remaining distinct.</p>
|
||
|
||
<div class="grid gap-chorus-sm md:grid-cols-4">
|
||
<div class="bg-walnut-950 border border-walnut-800 p-chorus-md text-white">
|
||
<h5 class="font-black text-white">Walnut</h5>
|
||
<p class="text-sm text-paper-200 mt-1">Enhanced warmth, excellent contrast</p>
|
||
</div>
|
||
<div class="bg-ocean-700 border border-ocean-600 p-chorus-md text-white">
|
||
<h5 class="font-black text-white">Ocean</h5>
|
||
<p class="text-sm text-white mt-1">Appears green-gray, maintains cool contrast</p>
|
||
</div>
|
||
<div class="bg-sand-400 border border-sand-300 p-chorus-md text-carbon-950">
|
||
<h5 class="font-black text-carbon-950">Sand</h5>
|
||
<p class="text-sm text-carbon-700 mt-1">Bright, warm appearance maintained</p>
|
||
</div>
|
||
<div class="bg-mulberry-950 border border-mulberry-800 p-chorus-md text-white">
|
||
<h5 class="font-black text-white">Mulberry</h5>
|
||
<p class="text-sm text-mulberry-300 mt-1">Appears more red, luxury feel preserved</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Accessibility Features</h3>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-2">
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">Built-in Support</h4>
|
||
<ul class="text-base space-y-2 text-carbon-600 dark:text-mulberry-300">
|
||
<li><strong>High Contrast:</strong> All color combinations exceed WCAG 2.1 AA (4.5:1 ratio)</li>
|
||
<li><strong>Brightness Hierarchy:</strong> Distinct luminance levels for non-color differentiation</li>
|
||
<li><strong>Texture Cues:</strong> Borders, gradients, and patterns support color-blind users</li>
|
||
<li><strong>Semantic Meaning:</strong> Context never relies solely on color</li>
|
||
<li><strong>Focus States:</strong> High-contrast borders and backgrounds for navigation</li>
|
||
<li><strong>Error Indication:</strong> Icons and text accompany color-coded feedback</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">Implementation Guidelines</h4>
|
||
<ul class="text-base space-y-2 text-carbon-600 dark:text-mulberry-300">
|
||
<li><strong>Test Early:</strong> Use simulators during design phase</li>
|
||
<li><strong>Multiple Cues:</strong> Combine color with icons, text, and spacing</li>
|
||
<li><strong>Consistent Patterns:</strong> Establish reliable visual hierarchies</li>
|
||
<li><strong>User Controls:</strong> Provide theme and contrast options</li>
|
||
<li><strong>Documentation:</strong> Include alt text and aria labels</li>
|
||
<li><strong>Real Testing:</strong> Validate with users who have color vision differences</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-950 from-sand-300 to-white p-chorus-lg border border-nickel-200 dark:border-mulberry-800">
|
||
<h4 class="text-h4 mb-chorus-md">Interactive Accessibility Tool</h4>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Experience our brand palette through different vision types using the built-in accessibility simulator.</p>
|
||
|
||
<div class="flex items-center gap-chorus-sm p-chorus-sm bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-700">
|
||
<svg class="h-5 w-5 text-carbon-600 dark:text-mulberry-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/>
|
||
<circle cx="12" cy="12" r="3"/>
|
||
</svg>
|
||
<span class="text-base font-medium text-mulberry-200">Click "Visual Aid" in the bottom toolbar to access vision-inclusive settings</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Component System -->
|
||
<section id="components" class="py-chorus-xxl bg-gradient-to-b dark:from-walnut-950 dark:to-carbon-950 from-sand-200 to-white">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2 mb-chorus-lg">Component System</h2>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">UI Component Library</h3>
|
||
<p>The CHORUS component system provides a comprehensive set of accessible, ultra-minimalist UI elements built with the 8-color accessibility system and three-font typography hierarchy.</p>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-3 mt-chorus-lg">
|
||
<div class="border border-nickel-200 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">Buttons & Actions</h4>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300">Primary, secondary, and ghost button variants with accessibility-compliant focus states</p>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">Forms & Inputs</h4>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300">Clean form elements with validation states and accessibility features</p>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">Navigation & Layout</h4>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300">Header, sidebar, and breadcrumb components with responsive behavior</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Component Standards</h3>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">Design Principles</h4>
|
||
<ul class="text-base space-y-2 text-carbon-600 dark:text-mulberry-300">
|
||
<li><strong>Ultra-Minimalist:</strong> Every element serves a clear functional purpose</li>
|
||
<li><strong>Accessible First:</strong> WCAG 2.1 AA compliance built into every component</li>
|
||
<li><strong>Theme Adaptive:</strong> Seamless dark/light mode transitions</li>
|
||
<li><strong>Vision Inclusive:</strong> Support for all forms of color blindness</li>
|
||
<li><strong>Responsive Design:</strong> Mobile-first approach with progressive enhancement</li>
|
||
<li><strong>Performance Optimized:</strong> Lightweight CSS and minimal DOM impact</li>
|
||
<li><strong>Keyboard Navigation:</strong> Full keyboard accessibility for all interactive elements</li>
|
||
<li><strong>Focus Management:</strong> Clear focus indicators and logical tab order</li>
|
||
<li><strong>Screen Reader Support:</strong> Proper ARIA labels and semantic markup</li>
|
||
<li><strong>Touch Friendly:</strong> Minimum 44px touch targets for mobile interfaces</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="shadow-lg bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-600 from-sand-400 to-sand-200 backdrop-blur dark:bg-mulberry-800 border dark:border-mulberry-600 light:border-nickel-300 p-chorus-lg light:text-carbon-950 dark:text-white">
|
||
<h3 class="text-h3 mb-chorus-md">Component Library Access</h3>
|
||
<p class="text-base text-carbon-800 dark:text-mulberry-300">Full component specifications and code examples are available in the technical implementation section.</p>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Motion Design System -->
|
||
<section id="motion" class="py-chorus-xxl bg-gradient-to-b dark:from-carbon-950 dark:to-mulberry-950 from-white to-sand-200">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2 mb-chorus-lg">Motion Design System</h2>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Motion Philosophy</h3>
|
||
<p>The CHORUS motion system embodies the continuous flow of the Möbius ring, creating <strong>sophisticated orchestration</strong> through purposeful, elegant animations. Every movement serves a functional purpose while maintaining the ultra-minimalist aesthetic.</p>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-3 mt-chorus-lg">
|
||
<div class="border border-nickel-200 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">Seamless Flow</h4>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300">Like the Möbius ring, animations flow naturally without jarring interruptions</p>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">Purposeful Motion</h4>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300">Every animation guides attention and enhances understanding</p>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-md dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-sm">Performance First</h4>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300">Optimized animations that respect user preferences and device capabilities</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Animation Principles</h3>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<!-- Easing Functions -->
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">Easing & Timing</h4>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Sophisticated easing creates natural, comfortable motion that feels organic and polished.</p>
|
||
|
||
<div class="grid gap-chorus-md md:grid-cols-2">
|
||
<div>
|
||
<h5 class="text-h5 mb-chorus-sm">Primary Easing</h5>
|
||
<div class="bg-gray-100 dark:bg-carbon-950 p-chorus-md border border-nickel-200 dark:border-nickel-900 font-mono text-base">
|
||
<code class="text-carbon-950 dark:text-white">cubic-bezier(0.4, 0.0, 0.2, 1)</code>
|
||
</div>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300 mt-1">Standard Material Design easing for most interactions</p>
|
||
</div>
|
||
<div>
|
||
<h5 class="text-h5 mb-chorus-sm">Chorus Signature</h5>
|
||
<div class="bg-gray-100 dark:bg-carbon-950 p-chorus-md border border-nickel-200 dark:border-nickel-900 font-mono text-base">
|
||
<code class="text-carbon-950 dark:text-white">cubic-bezier(0.25, 0.46, 0.45, 0.94)</code>
|
||
</div>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300 mt-1">Custom easing for signature CHORUS animations</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Duration Standards -->
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">Duration Guidelines</h4>
|
||
<div class="grid gap-chorus-sm md:grid-cols-4">
|
||
<div class="text-center p-chorus-md border border-nickel-200 dark:border-nickel-900">
|
||
<div class="font-black text-lg">150ms</div>
|
||
<div class="text-base text-carbon-600 dark:text-mulberry-300">Micro Interactions</div>
|
||
<div class="text-sm text-carbon-500 dark:text-mulberry-400 mt-1">Hover states, button press</div>
|
||
</div>
|
||
<div class="text-center p-chorus-md border border-nickel-200 dark:border-nickel-900">
|
||
<div class="font-black text-lg">300ms</div>
|
||
<div class="text-base text-carbon-600 dark:text-mulberry-300">UI Transitions</div>
|
||
<div class="text-sm text-carbon-500 dark:text-mulberry-400 mt-1">Modal open, drawer slide</div>
|
||
</div>
|
||
<div class="text-center p-chorus-md border border-nickel-200 dark:border-nickel-900">
|
||
<div class="font-black text-lg">500ms</div>
|
||
<div class="text-base text-carbon-600 dark:text-mulberry-300">Page Transitions</div>
|
||
<div class="text-sm text-carbon-500 dark:text-mulberry-400 mt-1">Route changes, complex layouts</div>
|
||
</div>
|
||
<div class="text-center p-chorus-md border border-nickel-200 dark:border-nickel-900">
|
||
<div class="font-black text-lg">800ms</div>
|
||
<div class="text-base text-carbon-600 dark:text-mulberry-300">Attention & Delight</div>
|
||
<div class="text-sm text-carbon-500 dark:text-mulberry-400 mt-1">Logo reveal, success states</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Implementation Standards</h3>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<!-- CSS Animations -->
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">CSS Implementation</h4>
|
||
<div class="bg-gray-100 dark:bg-carbon-950 p-chorus-lg text-carbon-950 dark:text-white font-mono text-sm overflow-x-auto">
|
||
<pre><code>/* CHORUS Motion System Variables */
|
||
:root {
|
||
--chorus-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
|
||
--chorus-ease-signature: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
--chorus-duration-micro: 150ms;
|
||
--chorus-duration-ui: 300ms;
|
||
--chorus-duration-page: 500ms;
|
||
--chorus-duration-attention: 800ms;
|
||
}
|
||
|
||
/* Standard Transition Classes */
|
||
.transition-chorus-micro {
|
||
transition: all var(--chorus-duration-micro) var(--chorus-ease-standard);
|
||
}
|
||
|
||
.transition-chorus-ui {
|
||
transition: all var(--chorus-duration-ui) var(--chorus-ease-standard);
|
||
}
|
||
|
||
.transition-chorus-signature {
|
||
transition: all var(--chorus-duration-ui) var(--chorus-ease-signature);
|
||
}</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Accessibility Considerations -->
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h4 class="text-h4 mb-chorus-md">Accessibility & Performance</h4>
|
||
<ul class="text-sm space-y-2 text-carbon-600 dark:text-mulberry-300">
|
||
<li><strong>Reduced Motion:</strong> Respect prefers-reduced-motion user preferences</li>
|
||
<li><strong>Performance Budget:</strong> Limit concurrent animations to maintain 60fps</li>
|
||
<li><strong>Progressive Enhancement:</strong> Ensure functionality without animation</li>
|
||
<li><strong>Focus Management:</strong> Preserve focus during animated transitions</li>
|
||
<li><strong>Content Priority:</strong> Never let animation delay critical content</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="shadow-lg bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-600 from-sand-400 to-sand-200 backdrop-blur dark:bg-mulberry-800 border dark:border-mulberry-600 light:border-nickel-300 p-chorus-lg light:text-carbon-950 dark:text-white">
|
||
<h3 class="text-h3 mb-chorus-md">Motion Design Resources</h3>
|
||
<p class="text-sm text-carbon-800 dark:text-mulberry-300">Complete motion specifications, example animations, and implementation guides are available in the technical section.</p>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Implementation Section -->
|
||
<section id="implementation" class="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-950 dark:to-carbon-700 from-sand-200 to-white">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
|
||
<h2 class="text-h2 mb-chorus-lg">Implementation</h2>
|
||
|
||
<div class="space-y-chorus-lg">
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Technical Specifications</h3>
|
||
<p>Complete implementation guide for the CHORUS brand system including Tailwind CSS configuration, Three.js logo integration, and accessibility features.</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">Tailwind CSS Configuration</h3>
|
||
<div class="overflow-hidden border border-nickel-200 dark:border-nickel-900">
|
||
<pre class="language-javascript"><code class="language-javascript">// tailwind.config.js
|
||
module.exports = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
carbon: { 950: '#000000', 900: '#0a0a0a', /* ... */ },
|
||
mulberry: { 950: '#0b0213', 900: '#1a1426', /* ... */ },
|
||
walnut: { 950: '#1E1815', 900: '#403730', /* ... */ },
|
||
nickel: { 950: '#2a2823', 900: '#5a5750', /* ... */ },
|
||
ocean: { 950: '#0f1419', 900: '#1e2832', /* ... */ },
|
||
eucalyptus: { 950: '#141a16', 900: '#2b3f30', /* ... */ },
|
||
sand: { 950: '#1a1612', 900: '#3d3322', /* ... */ },
|
||
coral: { 950: '#1a1413', 900: '#593735', /* ... */ }
|
||
},
|
||
spacing: {
|
||
'chorus-xs': '0.25rem',
|
||
'chorus-sm': '0.5rem',
|
||
'chorus-md': '1rem',
|
||
'chorus-lg': '1.5rem',
|
||
'chorus-xl': '2rem',
|
||
'chorus-xxl': '3rem'
|
||
},
|
||
fontFamily: {
|
||
'sans': ['Inter', 'system-ui', 'sans-serif'],
|
||
'display': ['Inter Display', 'Inter', 'sans-serif'],
|
||
'mono': ['JetBrains Mono', 'Consolas', 'monospace']
|
||
}
|
||
}
|
||
}
|
||
}</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">CSS Implementation</h3>
|
||
<div class="overflow-hidden border border-nickel-200 dark:border-nickel-900">
|
||
<pre class="language-css"><code class="language-css">/* CHORUS Brand CSS Variables */
|
||
:root {
|
||
--chorus-primary: #000000; /* carbon-950 */
|
||
--chorus-secondary: #0b0213; /* mulberry-950 */
|
||
--chorus-accent: #403730; /* walnut-900 */
|
||
--chorus-neutral: #c1bfb1; /* nickel-500 */
|
||
}
|
||
|
||
.chorus-button {
|
||
background: var(--chorus-primary);
|
||
color: var(--chorus-neutral);
|
||
padding: 1rem 2rem;
|
||
border: none;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.chorus-button:hover {
|
||
background: var(--chorus-accent);
|
||
transform: translateY(-1px);
|
||
}</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-h3 mb-chorus-md">HTML Structure</h3>
|
||
<div class="overflow-hidden border border-nickel-200 dark:border-nickel-900">
|
||
<pre class="language-html"><code class="language-html"><!-- CHORUS Brand Component -->
|
||
<div class="chorus-hero">
|
||
<canvas class="chorus-logo" width="200" height="200"></canvas>
|
||
<h1 class="font-logo text-5xl font-thin">
|
||
CHORUS Services
|
||
</h1>
|
||
<p class="text-carbon-600 dark:text-mulberry-300">
|
||
Enterprise AI Orchestration Platform
|
||
</p>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="shadow-lg bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-600 from-sand-400 to-sand-200 backdrop-blur dark:bg-mulberry-800 border dark:border-mulberry-600 light:border-nickel-300 p-chorus-lg light:text-carbon-950 dark:text-white">
|
||
<h3 class="text-h3 mb-chorus-md">Download Complete Implementation</h3>
|
||
<p class="text-sm text-carbon-800 dark:text-mulberry-300">Full technical specifications, code examples, and implementation guides with syntax highlighting support.</p>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TODO: Responsive Design -->
|
||
<section id="responsive" class="py-chorus-xxl bg-gradient-to-b dark:from-carbon-700 dark:to-carbon-950 from-white to-coral-200">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2">Layout - Responsive Design</h2>
|
||
<div class="grid gap-chorus-lg md:grid-cols-2">
|
||
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Responsive Design Principles</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system is built with responsive design principles to ensure a
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 ">Responsive design principles ensure the CHORUS brand system adapts seamlessly across devices, maintaining visual integrity and usability.</p>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300">By utilizing fluid layouts, flexible typography, and responsive images, the system provides an optimal user experience on any screen size.</p>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Key Features</h3>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Fluid grid layouts that adapt to screen size</li>
|
||
<li>Flexible typography that scales with viewport</li>
|
||
<li>Responsive images and media queries for optimal performance</li>
|
||
<li>Mobile-first design approach for progressive enhancement</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- Fluid Layouts -->
|
||
<div class="mt-chorus-lg">
|
||
<h3 class="text-h3 mb-chorus-md">Fluid Layouts</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300">Fluid layouts use relative units like percentages and viewport units to ensure content scales smoothly across devices.</p>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<pre class="language-css"><code class="language-css">.container {
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 1rem;
|
||
}
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 1rem;
|
||
}</code></pre>
|
||
</div>
|
||
</div>
|
||
<!-- Flexible Typography -->
|
||
<div class="mt-chorus-lg">
|
||
<h3 class="text-h3 mb-chorus-md">Flexible Typography</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300">Typography scales fluidly using responsive units like 'rem' and 'vw', ensuring readability on all devices.</p>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<pre class="language-css"><code class="language-css">body {
|
||
font-size: 1rem; /* Base size */
|
||
}
|
||
h1 {
|
||
font-size: 2.5rem; /* Scales with viewport */
|
||
}
|
||
p {
|
||
font-size: 1rem; /* Responsive text */
|
||
}</code></pre>
|
||
</div>
|
||
</div>
|
||
<!-- Responsive Images -->
|
||
<div class="mt-chorus-lg">
|
||
<h3 class="text-h3 mb-chorus-md">Responsive Images</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300">Images adapt to screen size using CSS properties like 'max-width' and 'height: auto', ensuring they maintain aspect ratio and do not overflow their containers.</p>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<pre class="language-css"><code class="language-css">img {
|
||
max-width: 100%;
|
||
height: auto; /* Maintains aspect ratio */
|
||
}</code></pre>
|
||
</div>
|
||
</div>
|
||
<!-- Media Queries -->
|
||
<div class="mt-chorus-lg">
|
||
<h3 class="text-h3 mb-chorus-md">Media Queries</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300">Media queries allow for specific styles to be applied based on device characteristics, such as screen width, ensuring optimal layout and usability.</p>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<pre class="language-css"><code class="language-css">@media (max-width: 768px) {
|
||
body {
|
||
font-size: 0.875rem; /* Smaller text on mobile */
|
||
}
|
||
.container {
|
||
padding: 0 0.5rem; /* Reduced padding on smaller screens */
|
||
}
|
||
}</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TODO: Communication - Language Support -->
|
||
<section id="communications" class="py-chorus-xxl bg-gradient-to-b dark:from-carbon-700 dark:to-carbon-950 from-white to-coral-200">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2">Communication - Language Support</h2>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system is designed to support multiple languages, ensuring that our communication is accessible and inclusive for a global audience.</p>
|
||
<div class="grid gap-chorus-lg md:grid-cols-2">
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Language Support Overview</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system supports multiple languages to ensure global accessibility and inclusivity. This includes:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Multilingual content management</li>
|
||
<li>Right-to-left (RTL) language support</li>
|
||
<li>Language-specific typography adjustments</li>
|
||
<li>Localization of UI components</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Implementation Guidelines</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">To implement language support in the CHORUS brand system, follow these guidelines:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Use Unicode (UTF-8) encoding for all text content</li>
|
||
<li>Implement language selection options in the UI</li>
|
||
<li>Ensure all text elements are translatable</li>
|
||
<li>Use CSS for language-specific styles, such as font families and sizes</li>
|
||
<li>Test for proper rendering of different scripts and characters</li>
|
||
<li>Provide clear instructions for users to switch languages</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TODO: Communication - Public Relations -->
|
||
<section id="public-relations" class="py-chorus-xxl bg-gradient-to-b dark:from-carbon-950 dark:to-walnut-950 from-coral-200 to-white">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2">Communication - Public Relations</h2>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system provides guidelines for effective public relations communication, ensuring consistency and clarity across all channels.</p>
|
||
<div class="grid gap-chorus-lg md:grid-cols-2">
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Public Relations Overview</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system supports public relations efforts by providing a consistent framework for communication. This includes:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Clear messaging guidelines</li>
|
||
<li>Brand voice and tone specifications</li>
|
||
<li>Visual identity standards for press materials</li>
|
||
<li>Templates for press releases and media kits</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Implementation Guidelines</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">To implement public relations communication effectively, follow these guidelines:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Use the CHORUS brand voice consistently across all PR materials</li>
|
||
<li>Ensure all press releases follow the established templates</li>
|
||
<li>Maintain visual consistency with the brand's color palette and typography</li>
|
||
<li>Provide clear contact information for media inquiries</li>
|
||
<li>Regularly update media kits with the latest company information</li>
|
||
<li>Monitor and respond to media coverage in a timely manner</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TODO: Communication - Investor Relations -->
|
||
<section id="investor-relations" class="py-chorus-xxl bg-gradient-to-b dark:from-walnut-950 dark:to-carbon-950 from-white to-sand-200">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2">Communication - Investor Relations</h2>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system provides guidelines for investor relations communication, ensuring transparency and consistency in all financial disclosures.</p>
|
||
<div class="grid gap-chorus-lg md:grid-cols-2">
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Investor Relations Overview</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system supports investor relations by providing a consistent framework for financial communication. This includes:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Clear financial reporting guidelines</li>
|
||
<li>Brand voice and tone specifications for investor communications</li>
|
||
<li>Visual identity standards for investor presentations</li>
|
||
<li>Templates for earnings releases and investor updates</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Implementation Guidelines</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">To implement investor relations communication effectively, follow these guidelines:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Use the CHORUS brand voice consistently in all investor materials</li>
|
||
<li>Ensure all financial reports follow the established templates</li>
|
||
<li>Maintain visual consistency with the brand's color palette and typography</li>
|
||
<li>Provide clear and transparent financial information</li>
|
||
<li>Regularly update investor presentations with the latest company performance data</li>
|
||
<li>Facilitate open communication channels for investor inquiries</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TODO: Communication - Collaborators -->
|
||
<section id="collaborators" class="py-chorus-xxl bg-gradient-to-b dark:from-carbon-950 dark:to-mulberry-950 from-sand-200 to-sand-200">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2">Communication - Collaborators</h2>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system provides guidelines for effective communication with collaborators, ensuring clarity and consistency in all partnership interactions.</p>
|
||
<div class="grid gap-chorus-lg md:grid-cols-3">
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Collaborator Communication Overview</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system supports collaboration by providing a consistent framework for communication. This includes:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Clear messaging guidelines for partner interactions</li>
|
||
<li>Brand voice and tone specifications for collaborative communications</li>
|
||
<li>Visual identity standards for joint marketing materials</li>
|
||
<li>Templates for partnership agreements and collaboration proposals</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Implementation Guidelines</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">To implement effective communication with collaborators, follow these guidelines:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Use the CHORUS brand voice consistently in all collaborative materials</li>
|
||
<li>Ensure all partnership documents follow the established templates</li>
|
||
<li>Maintain visual consistency with the brand's color palette and typography</li>
|
||
<li>Provide clear and transparent information about collaboration goals</li>
|
||
<li>Regularly update partners with the latest project developments</li>
|
||
<li>Facilitate open communication channels for feedback and inquiries</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Collaboration Tools</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Utilize collaboration tools to enhance communication and project management with partners:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Project management platforms (e.g., Asana, Trello)</li>
|
||
<li>Communication tools (e.g., Slack, Microsoft Teams)</li>
|
||
<li>Document sharing and collaboration (e.g., Google Workspace, Microsoft 365)</li>
|
||
<li>Video conferencing tools for remote meetings (e.g., Zoom, Google Meet)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TODO: Social Media - Language and Tone -->
|
||
<section id="social-media" class="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-950 dark:to-mulberry-800 from-sand-200 to-ocean-200">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2">Social Media - Lanuage and Tone</h2>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system provides guidelines for social media communication, ensuring a consistent and engaging presence across platforms.</p>
|
||
<div class="grid gap-chorus-lg md:grid-cols-2">
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Social Media Overview</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system supports social media communication by providing a consistent framework for engagement. This includes:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Clear messaging guidelines for social media posts</li>
|
||
<li>Brand voice and tone specifications for online interactions</li>
|
||
<li>Visual identity standards for social media graphics</li>
|
||
<li>Templates for social media campaigns and promotions</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Implementation Guidelines</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">To implement effective social media communication, follow these guidelines:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Use the CHORUS brand voice consistently in all social media posts</li>
|
||
<li>Ensure all graphics follow the established visual identity</li>
|
||
<li>Maintain a consistent posting schedule across platforms</li>
|
||
<li>Engage with followers in a friendly and professional manner</li>
|
||
<li>Monitor social media channels for feedback and inquiries</li>
|
||
<li>Use analytics tools to track engagement and adjust strategies</li>
|
||
</ul>
|
||
</div>
|
||
<!-- Analytics Tool List -->
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Social Media Analytics Tools</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Utilize analytics tools to measure the effectiveness of social media campaigns:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Platform-specific analytics (e.g., Facebook Insights, Twitter Analytics)</li>
|
||
<li>Third-party tools (e.g., Hootsuite, Buffer, Sprout Social)</li>
|
||
<li>Google Analytics for tracking referral traffic from social media</li>
|
||
<li>Social listening tools to monitor brand mentions and sentiment</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TODO: Social Media - Visual Identity -->
|
||
<section id="visual-identity" class="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-800 dark:to-carbon-950 from-ocean-200 to-white">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2">Social Media - Visual Identity</h2>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system provides visual identity guidelines for social media, ensuring a cohesive and recognizable presence across platforms.</p>
|
||
<div class="grid gap-chorus-lg md:grid-cols-2">
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Visual Identity Overview</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system supports social media visual identity by providing a consistent framework for graphics and imagery. This includes:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Brand color palette for social media graphics</li>
|
||
<li>Typography guidelines for social media posts</li>
|
||
<li>Logo usage specifications for profile pictures and banners</li>
|
||
<li>Image style guidelines for consistency across platforms</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Implementation Guidelines</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">To implement effective social media visual identity, follow these guidelines:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Use the CHORUS brand color palette consistently in all graphics</li>
|
||
<li>Ensure typography is legible and aligns with brand standards</li>
|
||
<li>Use the CHORUS logo appropriately in profile pictures and banners</li>
|
||
<li>Maintain a consistent image style that reflects the brand's identity</li>
|
||
<li>Regularly update social media graphics to reflect current campaigns</li>
|
||
<li>Test graphics on different devices to ensure proper display</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Visual Identity Tools</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Utilize design tools to create and manage social media graphics:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Graphic design software (e.g., Adobe Photoshop, Illustrator)</li>
|
||
<li>Online design tools (e.g., Canva, Figma)</li>
|
||
<li>Social media image size guides for optimal display</li>
|
||
<li>Asset libraries for storing and sharing brand graphics</li>
|
||
</ul>
|
||
</div>
|
||
<!-- Clothing / Corporate Wear -->
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Clothing / Corporate Wear</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system includes guidelines for corporate wear to ensure a professional and cohesive appearance for employees and representatives:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Use of brand colors in corporate apparel</li>
|
||
<li>Logo placement on clothing items</li>
|
||
<li>Guidelines for professional attire that reflects the brand's identity</li>
|
||
<li>Recommendations for fabric and material choices that align with brand values</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TODO: Presentations and Decks -->
|
||
<section id="presentations-decks" class="py-chorus-xxl bg-gradient-to-b dark:from-carbon-950 dark:to-carbon-700 from-white to-walnut-500">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2">Presentations and Decks</h2>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system provides guidelines for creating effective presentations and decks, ensuring a professional and cohesive visual identity.</p>
|
||
<div class="grid gap-chorus-lg md:grid-cols-3">
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Presentation Overview</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system supports presentations by providing a consistent framework for visual communication. This includes:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Brand color palette for slides</li>
|
||
<li>Typography guidelines for headings and body text</li>
|
||
<li>Logo usage specifications for slide headers and footers</li>
|
||
<li>Image style guidelines for consistency across slides</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Implementation Guidelines</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">To implement effective presentations, follow these guidelines:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Use the CHORUS brand color palette consistently in all slides</li>
|
||
<li>Ensure typography is legible and aligns with brand standards</li>
|
||
<li>Use the CHORUS logo appropriately in slide headers and footers</li>
|
||
<li>Maintain a consistent image style that reflects the brand's identity</li>
|
||
<li>Limit text on slides to key points for clarity</li>
|
||
<li>Use high-quality images and graphics to enhance visual appeal</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Presentation Tools</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Utilize presentation tools to create and manage slides:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Presentation software (e.g., Microsoft PowerPoint, Google Slides)</li>
|
||
<li>Online design tools (e.g., Canva, Prezi)</li>
|
||
<li>Slide templates for consistent formatting</li>
|
||
<li>Asset libraries for storing and sharing brand graphics</li>
|
||
</ul>
|
||
|
||
<div class="mt-chorus-lg">
|
||
<h3 class="text-h3 mt-chorus-lg mb-chorus-md">Example Presentation Template</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Download the example presentation template to get started with creating your own CHORUS presentations:</p>
|
||
<a href="presentation-template.zip">Download Presentation Template</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TODO: Culture -->
|
||
<section id="culture" class="py-chorus-xxl bg-gradient-to-b dark:from-carbon-700 dark:to-eucalyptus-950 from-walnut-500 to-walnut-200">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2">Culture</h2>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TODO: Video Capture Standards -->
|
||
<section id="video-capture" class="py-chorus-xxl bg-gradient-to-b dark:from-eucalyptus-950 dark:to-carbon-950 from-walnut-200 to-walnut-200">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2">Video Capture Standards</h2>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system provides guidelines for video capture, ensuring high-quality and consistent visual content across all media.</p>
|
||
<div class="grid gap-chorus-lg md:grid-cols-2">
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Video Capture Overview</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system supports video capture by providing a consistent framework for visual content. This includes:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Camera settings and equipment recommendations</li>
|
||
<li>Lighting and sound guidelines for optimal quality</li>
|
||
<li>Framing and composition standards for shots</li>
|
||
<li>Post-production editing guidelines for consistency</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Implementation Guidelines</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">To implement effective video capture, follow these guidelines:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Use high-quality cameras and lenses for clear visuals</li>
|
||
<li>Ensure proper lighting to avoid shadows and glare</li>
|
||
<li>Use external microphones for clear audio capture</li>
|
||
<li>Frame shots according to the rule of thirds for balanced composition</li>
|
||
<li>Maintain consistent branding elements in all video content</li>
|
||
<li>Follow post-production editing guidelines to enhance video quality</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Video Capture Tools</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Utilize video capture tools to create and manage high-quality content:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Camera equipment (e.g., DSLR, mirrorless cameras)</li>
|
||
<li>Lighting kits for controlled illumination</li>
|
||
<li>External microphones for improved audio quality</li>
|
||
<li>Video editing software (e.g., Adobe Premiere Pro, Final Cut Pro)</li>
|
||
<li>Asset libraries for storing and sharing video content</li>
|
||
</ul>
|
||
<div class="mt-chorus-lg">
|
||
<h3 class="text-h3 mt-chorus-lg mb-chorus-md">Example Video Capture Checklist</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Download the example video capture checklist to ensure all aspects of video production are covered:</p>
|
||
<a href="video-capture-checklist.pdf">Download Video Capture Checklist</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TODO: Still Photography Capture Standards -->
|
||
<section id="still-photography" class="py-chorus-xxl bg-gradient-to-b dark:from-carbon-950 dark:to-carbon-800 from-walnut-200 to-sand-200">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2">Still Photography Capture Standards</h2>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TODO: AI Generated Imagery Standards -->
|
||
<section id="ai-generated-imagery" class="py-chorus-xxl bg-gradient-to-b dark:from-carbon-800 dark:to-mulberry-950 from-sand-200 to-white">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2">AI Generated Imagery Standards</h2>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system provides guidelines for AI-generated imagery, ensuring high-quality and consistent visual content across all media.</p>
|
||
<div class="grid gap-chorus-lg md:grid-cols-2">
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">AI Imagery Overview</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system supports AI-generated imagery by providing a consistent framework for visual content. This includes:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>AI model selection and training guidelines</li>
|
||
<li>Image quality standards for AI-generated content</li>
|
||
<li>Ethical considerations for AI-generated imagery</li>
|
||
<li>Post-processing guidelines for enhancing AI-generated images</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Implementation Guidelines</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">To implement effective AI-generated imagery, follow these guidelines:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Select appropriate AI models based on project requirements</li>
|
||
<li>Ensure high-resolution output for all AI-generated images</li>
|
||
<li>Maintain ethical standards in AI-generated content creation</li>
|
||
<li>Use post-processing techniques to enhance image quality</li>
|
||
<li>Incorporate brand elements consistently in AI-generated imagery</li>
|
||
<li>Regularly review and update AI models to improve output quality</li>
|
||
</ul>
|
||
</div>
|
||
<div class="caution border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<img src="warning-icon.png" alt="Warning Icon" class="icon"/>
|
||
<h3 class="text-h3 mb-chorus-md"><strong>Do not</strong> generate imagery of humans, be it a likeness or representation of a living person or <u>not</u>.</h3>
|
||
<p>This cheapens the brand and goes against the CHORUS ethos of utilising human talents.</p>
|
||
<p>We already use AI to its best abilities to generate our customers products and our own, assigning human likeness is misguided.</p>
|
||
</div>
|
||
<div class="note border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<img src="warning-icon.png" alt="Warning Icon" class="icon"/>
|
||
<h3 class="text-h3 mb-chorus-md">Generated imagery of systems or diagrams is an <em>acceptable use</em> <u>provided results are checked</u></h3>
|
||
<p>Use AI to the best of its talents and sometimes that means creating imagery beyond human capability or budgets.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TODO: Print Media Standards -->
|
||
<section id="print-media" class="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-950 dark:to-carbon-950 from-white to-eucalyptus-100">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2">Print Media Standards</h2>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system provides guidelines for print media, ensuring high-quality and consistent visual content across all printed materials.</p>
|
||
<div class="grid gap-chorus-lg md:grid-cols-2">
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Print Media Overview</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system supports print media by providing a consistent framework for visual content. This includes:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Brand color palette for printed materials</li>
|
||
<li>Typography guidelines for headings and body text</li>
|
||
<li>Logo usage specifications for print media</li>
|
||
<li>Image style guidelines for consistency across printed content</li>
|
||
<li>Ethical use and sourcing of paper stocks</li>
|
||
<li>Eco-friendly publishers</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Implementation Guidelines</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">To implement effective print media, follow these guidelines:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Use the CHORUS brand color palette consistently in all printed materials</li>
|
||
<li>Ensure typography is legible and aligns with brand standards</li>
|
||
<li>Use the CHORUS logo appropriately in print media</li>
|
||
<li>Maintain a consistent image style that reflects the brand's identity</li>
|
||
<li>Use high-quality recycled and recyclable paper stocks that align with brand values</li>
|
||
<li>Work with eco-friendly publishers to minimize environmental impact</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TODO: Advertising Standards -->
|
||
<section id="advertising" class="py-chorus-xxl bg-gradient-to-b dark:from-carbon-950 dark:to-eucalyptus-900 from-eucalyptus-100 to-eucalyptus-400">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<h2 class="text-h2">Advertising Standards</h2>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system provides guidelines for advertising, ensuring high-quality and consistent visual content across all advertising channels.</p>
|
||
<div class="grid gap-chorus-lg md:grid-cols-2">
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Advertising Overview</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">The CHORUS brand system supports advertising by providing a consistent framework for visual content. This includes:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Brand color palette for advertising materials</li>
|
||
<li>Typography guidelines for headlines and body text</li>
|
||
<li>Logo usage specifications for advertisements</li>
|
||
<li>Image style guidelines for consistency across ads</li>
|
||
<li>Ethical advertising practices</li>
|
||
<li>Transparency in advertising claims</li>
|
||
<li>Pricing transparency and responsibilities</li>
|
||
<li>Warranties and claims</li>
|
||
<li>Promotions an sales</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Implementation Guidelines</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">To implement effective advertising, follow these guidelines:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Use the CHORUS brand color palette consistently in all advertising materials</li>
|
||
<li>Ensure typography is legible and aligns with brand standards</li>
|
||
<li>Use the CHORUS logo appropriately in advertisements</li>
|
||
<li>Maintain a consistent image style that reflects the brand's identity</li>
|
||
<li>Follow ethical advertising practices to build trust with customers</li>
|
||
<li>Be transparent in advertising claims and avoid misleading information</li>
|
||
<li>Clearly and truthfully communicate pricing, warranties, and claims to customers</li>
|
||
<li>Ensure promotions and sales have clearly defined and communicated scopes, end dates, and waivers</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||
<h3 class="text-h3 mb-chorus-md">Advertising Tools</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Utilize advertising tools to create and manage campaigns:</p>
|
||
<ul class="list-disc pl-5 space-y-2 text-base text-carbon-600 dark:text-mulberry-300">
|
||
<li>Advertising platforms (e.g., Google Ads, Facebook Ads)</li>
|
||
<li>Graphic design software for ad creation (e.g., Adobe Photoshop, Illustrator)</li>
|
||
<li>Online design tools (e.g., Canva, Figma)</li>
|
||
<li>Analytics tools to measure ad performance and ROI</li>
|
||
<li>Asset libraries for storing and sharing ad graphics</li>
|
||
</ul>
|
||
<div class="mt-chorus-lg">
|
||
<h3 class="text-h3 mt-chorus-lg mb-chorus-md">Example Advertising Campaign Template</h3>
|
||
<p class="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Download the example advertising campaign template to get started with creating your own CHORUS advertising campaigns:</p>
|
||
<a href="advertising-campaign-template.zip">Download Advertising Campaign Template</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<!-- Promotions -->
|
||
<section class="py-chorus-xxl bg-gradient-to-b dark:from-eucalyptus-900 from-eucalyptus-400 dark:to-eucalyptus-700 to-eucalyptus-100">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<!-- Three.js Canvas Container -->
|
||
<div id="hero-scene-container">
|
||
|
||
<!-- <canvas id="hero-canvas" class="w-full h-full"></canvas> -->
|
||
|
||
</div>
|
||
|
||
<div class="relative z-10 flex items-center justify-center h-full min-h-[60vh] px-chorus-lg">
|
||
<div class="text-center text-white max-w-4xl">
|
||
<h2 class="font-logo text-5xl font-thin tracking-wide mb-chorus-lg">Enterprise AI Orchestration</h2>
|
||
<p class="text-xl text-gray-300 mb-chorus-xl max-w-2xl mx-auto leading-relaxed">Sophisticated distributed reasoning without hallucinations. Built for global teams building the future of intelligent software.</p>
|
||
<div class="flex flex-col sm:flex-row gap-chorus-md justify-center">
|
||
<button class="bg-paper-950 text-carbon-950 px-chorus-xl py-chorus-md font-medium hover:bg-paper-900 transition-colors">
|
||
Explore Platform
|
||
</button>
|
||
<button class="border border-paper-300 text-paper-100 px-chorus-xl py-chorus-md font-medium hover:bg-white/10 transition-colors">
|
||
View Documentation
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="max-w-4xl mx-auto py-14">
|
||
<h1 class="mx-auto text-6xl font-logo text-white font-thin" style="text-align: center;">Call to Action</h1>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
<!-- CHORUS Footer -->
|
||
<footer id="footer" class="border-t border-nickel-200 bg-ocean-100 py-chorus-xxl dark:border-carbon-800 dark:bg-carbon-950">
|
||
<div class="px-chorus-lg max-w-5xl mx-auto">
|
||
<div class="grid gap-chorus-xl md:grid-cols-2">
|
||
|
||
<div class="flex items-center gap-chorus-sm px-chorus-md py-chorus-md">
|
||
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
||
<noscript>
|
||
<img src="chorus-logo.png" width="32" height="32" alt="CHORUS Logo"/>
|
||
</noscript>
|
||
<div>
|
||
<div class="font-thin font-logo ">CHORUS</div>
|
||
</div>
|
||
<p class="text-sm text-carbon-600 dark:text-paper-400">Enterprise-grade distributed AI orchestration without hallucinations.</p>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="text-sm">
|
||
<nav class="text-sm">
|
||
<div class="mb-chorus-md font-medium">Navigation</div>
|
||
<ul class="space-y-1">
|
||
<li><a href="#typography" class="text-carbon-600 hover:text-mulberry-950 dark:text-paper-400 dark:hover:text-paper-950">Typography</a></li>
|
||
<li><a href="#forms" class="text-carbon-600 hover:text-mulberry-950 dark:text-paper-400 dark:hover:text-paper-950">Forms</a></li>
|
||
<li><a href="#tables" class="text-carbon-600 hover:text-mulberry-950 dark:text-paper-400 dark:hover:text-paper-950">Tables</a></li>
|
||
<li><a href="#media" class="text-carbon-600 hover:text-mulberry-950 dark:text-paper-400 dark:hover:text-paper-950">Media</a></li>
|
||
</ul>
|
||
</nav>
|
||
<div class="mb-chorus-md font-medium">Stay Connected</div>
|
||
<form class="flex gap-chorus-sm">
|
||
<input type="email" placeholder="your@email.com" class="w-full border border-nickel-300 px-chorus-md py-chorus-sm outline-none focus:border-mulberry-950 dark:border-nickel-700 dark:bg-carbon-950 dark:focus:border-paper-950" />
|
||
<button class="bg-mulberry-950 px-chorus-md py-chorus-sm text-paper-950 hover:opacity-90 dark:bg-paper-950 dark:text-carbon-950">Join</button>
|
||
</form>
|
||
<p class="mt-chorus-sm text-sm text-carbon-500 dark:text-mulberry-300">Updates on CHORUS Services and AI orchestration.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- CHORUS Bottom Dock -->
|
||
<div class="fixed inset-x-0 bottom-0 z-40 hidden items-center justify-between gap-chorus-md border-t border-nickel-200 bg-white/90 p-chorus-md backdrop-blur md:flex dark:border-mulberry-800 dark:bg-mulberry-950/90">
|
||
<div class="flex items-center gap-chorus-sm">
|
||
<!-- Theme Toggle -->
|
||
<button id="toggleTheme" class="flex items-center justify-center gap-2 p-chorus-sm text-carbon-600 hover:text-carbon-950 dark:text-paper-300 dark:hover:text-white border border-nickel-200 dark:border-nickel-900 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||
<!-- Moon icon for light mode (click to go dark) -->
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Environment/Moon.png" alt="Switch to Dark Mode" class="w-4 h-4 dark:hidden">
|
||
<!-- Sun icon for dark mode (click to go light) -->
|
||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Environment/Sun.png" alt="Switch to Light Mode" class="w-4 h-4 hidden dark:block">
|
||
<span class="text-sm">Toggle Theme</span>
|
||
</button>
|
||
|
||
<!-- Visual Aid Button -->
|
||
<button id="openVisualAid" class="flex items-center justify-center gap-2 p-chorus-sm text-carbon-600 hover:text-carbon-950 dark:text-paper-300 dark:hover:text-white border border-nickel-200 dark:border-nickel-900 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/>
|
||
<circle cx="12" cy="12" r="3"/>
|
||
</svg>
|
||
<span class="text-sm">Visual Aid</span>
|
||
</button>
|
||
</div>
|
||
<div class="flex items-center gap-chorus-sm text-sm"><p class="text-center text-sm text-carbon-500 dark:text-gray-400">© 2025 CHORUS Services. Sophisticated orchestration for enterprise AI.</p>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Visual Aid Modal Dialog -->
|
||
<div id="visualAidModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm">
|
||
<div class="relative bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 max-w-lg w-full mx-4 p-chorus-lg shadow-xl">
|
||
<!-- Modal Header -->
|
||
<div class="flex items-center justify-between mb-chorus-md">
|
||
<h3 class="text-h3 text-carbon-950 dark:text-white">Visual Aid Settings</h3>
|
||
<button id="closeVisualAid" class="text-carbon-600 hover:text-carbon-950 dark:text-gray-400 dark:hover:text-white">
|
||
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M18 6L6 18M6 6L18 18"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Modal Content -->
|
||
<div class="space-y-chorus-md">
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300">
|
||
Adjust the visual appearance for different color vision conditions. These settings affect the Möbius ring logo materials while preserving the overall design integrity.
|
||
</p>
|
||
|
||
<!-- Vision Condition Buttons -->
|
||
<div class="space-y-chorus-sm">
|
||
<h4 class="text-h4 text-carbon-950 dark:text-white">Color Vision Support</h4>
|
||
<p class="text-sm text-carbon-600 dark:text-mulberry-300 mb-2">
|
||
8-color CHORUS system adaptations that preserve brand integrity while ensuring accessibility
|
||
</p>
|
||
<div class="grid grid-cols-1 gap-2">
|
||
<button data-accessibility-theme="standard" class="modal-vision-btn bg-white text-carbon-950 border border-gray-300 px-4 py-2 text-sm hover:bg-gray-50 transition-all cursor-pointer text-left">
|
||
<div class="font-medium">Standard Vision</div>
|
||
<div class="text-sm text-gray-600">Default CHORUS 8-color palette</div>
|
||
</button>
|
||
|
||
<button data-accessibility-theme="protanopia" class="modal-vision-btn bg-blue-800 text-white px-4 py-2 text-sm hover:bg-blue-700 transition-all cursor-pointer text-left">
|
||
<div class="font-medium">Protanopia (Red-blind)</div>
|
||
<div class="text-sm text-blue-200">Ocean replaces coral, sand replaces eucalyptus</div>
|
||
</button>
|
||
|
||
<button data-accessibility-theme="deuteranopia" class="modal-vision-btn bg-purple-800 text-white px-4 py-2 text-sm hover:bg-purple-700 transition-all cursor-pointer text-left">
|
||
<div class="font-medium">Deuteranopia (Green-blind)</div>
|
||
<div class="text-sm text-mulberry-200">Ocean replaces eucalyptus, coral becomes accent</div>
|
||
</button>
|
||
|
||
<button data-accessibility-theme="tritanopia" class="modal-vision-btn bg-red-800 text-white px-4 py-2 text-sm hover:bg-red-700 transition-all cursor-pointer text-left">
|
||
<div class="font-medium">Tritanopia (Blue-blind)</div>
|
||
<div class="text-sm text-red-200">Coral replaces ocean, eucalyptus replaces sand</div>
|
||
</button>
|
||
|
||
<button data-accessibility-theme="achromatopsia" class="modal-vision-btn bg-gray-700 text-white px-4 py-2 text-sm hover:bg-gray-600 transition-all cursor-pointer text-left">
|
||
<div class="font-medium">Achromatopsia (Complete color blindness)</div>
|
||
<div class="text-sm text-gray-300">Grayscale system preserving contrast hierarchy</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Information -->
|
||
<div class="text-sm text-carbon-500 dark:text-gray-400 p-chorus-sm bg-gray-50 dark:bg-mulberry-900 border-l-4 border-mulberry-600">
|
||
<p><strong>Note:</strong> These settings only affect logo materials. Your selection is automatically saved for future visits.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="importmap">
|
||
{
|
||
"imports": {
|
||
"three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
|
||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
|
||
}
|
||
}
|
||
</script>
|
||
<script src="logo.js" type="module"></script>
|
||
<script type="module">
|
||
|
||
|
||
|
||
// Function to update ring material based on theme
|
||
// Removed obsolete updateRingMaterial function - now handled by logo.js module
|
||
|
||
// Theme toggle (defaults to dark mode)
|
||
const toggle = document.getElementById('toggleTheme');
|
||
toggle?.addEventListener('click', () => {
|
||
const root = document.documentElement;
|
||
const isDark = root.classList.toggle('dark');
|
||
// Note: Don't set data-theme here as it conflicts with accessibility themes
|
||
|
||
console.log('Theme toggled to:', isDark ? 'dark' : 'light');
|
||
console.log('updateAllLogoMaterials function available:', typeof window.updateAllLogoMaterials);
|
||
|
||
// Update all logo materials from the external module
|
||
if (window.updateAllLogoMaterials) {
|
||
console.log('Calling updateAllLogoMaterials with isDark:', isDark);
|
||
try {
|
||
window.updateAllLogoMaterials(isDark);
|
||
console.log('updateAllLogoMaterials completed successfully');
|
||
} catch (error) {
|
||
console.error('Error calling updateAllLogoMaterials:', error);
|
||
}
|
||
} else {
|
||
console.warn('updateAllLogoMaterials not available - logo.js may not be loaded yet');
|
||
}
|
||
});
|
||
|
||
// Motion System JavaScript - Documentation Only
|
||
// Implementation to be done separately
|
||
|
||
// Accessibility Theme Switching
|
||
function setAccessibilityTheme(themeName) {
|
||
console.log(`Setting accessibility theme: ${themeName}`);
|
||
|
||
// Remove any existing accessibility attributes
|
||
document.documentElement.removeAttribute('data-theme'); // For logo materials
|
||
document.documentElement.removeAttribute('data-accessibility'); // For CSS system
|
||
|
||
// Set new theme if not standard vision
|
||
if (themeName !== 'standard') {
|
||
document.documentElement.setAttribute('data-theme', themeName); // Logo materials
|
||
document.documentElement.setAttribute('data-accessibility', themeName); // CSS system
|
||
}
|
||
|
||
// Store preference
|
||
localStorage.setItem('chorus-accessibility-theme', themeName);
|
||
|
||
// Force update logo materials immediately - call the update function directly
|
||
const isDark = document.documentElement.classList.contains('dark');
|
||
if (window.updateAllLogoMaterials) {
|
||
try {
|
||
window.updateAllLogoMaterials(isDark);
|
||
console.log('updateAllLogoMaterials called after accessibility theme change');
|
||
} catch (error) {
|
||
console.error('Error calling updateAllLogoMaterials after accessibility change:', error);
|
||
}
|
||
} else {
|
||
console.warn('updateLogoAccessibilityTheme not available - logo.js may not be loaded yet');
|
||
}
|
||
|
||
// Update button states
|
||
updateAccessibilityButtonStates(themeName);
|
||
}
|
||
|
||
function updateAccessibilityButtonStates(activeTheme) {
|
||
const buttons = document.querySelectorAll('[data-accessibility-theme]');
|
||
buttons.forEach(button => {
|
||
const buttonTheme = button.getAttribute('data-accessibility-theme');
|
||
if (buttonTheme === activeTheme) {
|
||
// For modal buttons, add different styling
|
||
if (button.classList.contains('modal-vision-btn')) {
|
||
button.classList.add('ring-2', 'ring-offset-2');
|
||
if (buttonTheme === 'standard') {
|
||
button.classList.add('ring-mulberry-600');
|
||
} else {
|
||
button.classList.add('ring-white');
|
||
}
|
||
} else {
|
||
button.classList.add('ring-2', 'ring-white', 'ring-offset-2');
|
||
}
|
||
} else {
|
||
button.classList.remove('ring-2', 'ring-white', 'ring-offset-2', 'ring-mulberry-600');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Modal functionality
|
||
function openVisualAidModal() {
|
||
const modal = document.getElementById('visualAidModal');
|
||
modal.classList.remove('hidden');
|
||
modal.classList.add('flex');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeVisualAidModal() {
|
||
const modal = document.getElementById('visualAidModal');
|
||
modal.classList.add('hidden');
|
||
modal.classList.remove('flex');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
// Initialize accessibility theme from localStorage
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const savedTheme = localStorage.getItem('chorus-accessibility-theme') || 'standard';
|
||
setAccessibilityTheme(savedTheme);
|
||
});
|
||
|
||
// Add event listeners when page loads
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// Accessibility theme buttons
|
||
const accessibilityButtons = document.querySelectorAll('[data-accessibility-theme]');
|
||
accessibilityButtons.forEach(button => {
|
||
button.addEventListener('click', () => {
|
||
const theme = button.getAttribute('data-accessibility-theme');
|
||
setAccessibilityTheme(theme);
|
||
|
||
// If this is a modal button, close the modal after selection
|
||
if (button.classList.contains('modal-vision-btn')) {
|
||
closeVisualAidModal();
|
||
}
|
||
});
|
||
});
|
||
|
||
// Modal control buttons
|
||
const openModalBtn = document.getElementById('openVisualAid');
|
||
const closeModalBtn = document.getElementById('closeVisualAid');
|
||
const modal = document.getElementById('visualAidModal');
|
||
|
||
if (openModalBtn) {
|
||
openModalBtn.addEventListener('click', openVisualAidModal);
|
||
}
|
||
|
||
if (closeModalBtn) {
|
||
closeModalBtn.addEventListener('click', closeVisualAidModal);
|
||
}
|
||
|
||
// Close modal when clicking outside
|
||
if (modal) {
|
||
modal.addEventListener('click', (e) => {
|
||
if (e.target === modal) {
|
||
closeVisualAidModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Close modal with Escape key
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
|
||
closeVisualAidModal();
|
||
}
|
||
});
|
||
});
|
||
|
||
// Navigation enhancement: active section highlighting and smooth scrolling
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const navLinks = document.querySelectorAll('.nav-link');
|
||
|
||
// Style for active navigation items
|
||
const activeStyles = `
|
||
.nav-link.active {
|
||
background: linear-gradient(135deg, rgba(107, 33, 168, 0.08), rgba(64, 55, 48, 0.06)) !important;
|
||
border-left: 3px solid var(--chorus-accent) !important;
|
||
color: var(--chorus-accent) !important;
|
||
font-weight: 500 !important;
|
||
transform: translateX(2px) !important;
|
||
}
|
||
.dark .nav-link.active {
|
||
background: linear-gradient(135deg, rgba(203, 239, 255, 0.08), rgba(186, 207, 191, 0.06)) !important;
|
||
border-left: 3px solid var(--chorus-warning) !important;
|
||
color: var(--chorus-warning) !important;
|
||
}
|
||
.nav-link.active img {
|
||
transform: scale(1.1) !important;
|
||
}
|
||
`;
|
||
|
||
// Inject active styles
|
||
if (!document.getElementById('nav-active-styles')) {
|
||
const styleSheet = document.createElement('style');
|
||
styleSheet.id = 'nav-active-styles';
|
||
styleSheet.textContent = activeStyles;
|
||
document.head.appendChild(styleSheet);
|
||
}
|
||
|
||
// Get section positions and update active navigation
|
||
function updateActiveNavigation() {
|
||
const scrollY = window.scrollY + 100; // Offset for better UX
|
||
|
||
// Find which section is currently in view
|
||
let currentSection = null;
|
||
|
||
// Check each major section
|
||
const sectionIds = ['overview', 'identity', 'logo', 'typography', 'colors', 'iconography', 'accessibility', 'components', 'motion', 'implementation', 'usage'];
|
||
|
||
for (const sectionId of sectionIds) {
|
||
const element = document.getElementById(sectionId);
|
||
if (element) {
|
||
const rect = element.getBoundingClientRect();
|
||
const elementTop = rect.top + window.scrollY;
|
||
const elementBottom = elementTop + rect.height;
|
||
|
||
if (scrollY >= elementTop && scrollY < elementBottom) {
|
||
currentSection = sectionId;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
// If no section found, check for closest
|
||
if (!currentSection) {
|
||
let closestSection = null;
|
||
let closestDistance = Infinity;
|
||
|
||
for (const sectionId of sectionIds) {
|
||
const element = document.getElementById(sectionId);
|
||
if (element) {
|
||
const rect = element.getBoundingClientRect();
|
||
const elementTop = rect.top + window.scrollY;
|
||
const distance = Math.abs(scrollY - elementTop);
|
||
|
||
if (distance < closestDistance) {
|
||
closestDistance = distance;
|
||
closestSection = sectionId;
|
||
}
|
||
}
|
||
}
|
||
|
||
currentSection = closestSection;
|
||
}
|
||
|
||
// Update navigation active state
|
||
navLinks.forEach(link => {
|
||
const section = link.getAttribute('data-section');
|
||
link.classList.toggle('active', section === currentSection);
|
||
});
|
||
}
|
||
|
||
// Smooth scrolling for navigation links
|
||
navLinks.forEach(link => {
|
||
link.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
const targetId = link.getAttribute('href').substring(1);
|
||
const targetElement = document.getElementById(targetId);
|
||
|
||
if (targetElement) {
|
||
const offsetTop = targetElement.offsetTop - 80; // Account for spacing
|
||
window.scrollTo({
|
||
top: offsetTop,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// Listen for scroll events with throttling
|
||
let ticking = false;
|
||
function onScroll() {
|
||
if (!ticking) {
|
||
requestAnimationFrame(() => {
|
||
updateActiveNavigation();
|
||
ticking = false;
|
||
});
|
||
ticking = true;
|
||
}
|
||
}
|
||
|
||
window.addEventListener('scroll', onScroll);
|
||
|
||
// Initial call to set active state
|
||
updateActiveNavigation();
|
||
});
|
||
</script>
|
||
|
||
<!-- Prism.js JavaScript -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||
|
||
<!-- Theme-aware syntax highlighting enhancement -->
|
||
<script>
|
||
// Reinitialize Prism when theme changes
|
||
function reinitializeSyntaxHighlighting() {
|
||
if (window.Prism && window.Prism.highlightAll) {
|
||
window.Prism.highlightAll();
|
||
}
|
||
}
|
||
|
||
// Listen for theme changes and reinitialize syntax highlighting
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// Initial highlighting
|
||
reinitializeSyntaxHighlighting();
|
||
|
||
// Listen for accessibility theme changes
|
||
const observer = new MutationObserver((mutations) => {
|
||
mutations.forEach((mutation) => {
|
||
if (mutation.type === 'attributes' &&
|
||
(mutation.attributeName === 'data-accessibility' ||
|
||
mutation.attributeName === 'class')) {
|
||
// Reinitialize highlighting when theme changes
|
||
setTimeout(reinitializeSyntaxHighlighting, 100);
|
||
}
|
||
});
|
||
});
|
||
|
||
observer.observe(document.documentElement, {
|
||
attributes: true,
|
||
attributeFilter: ['class', 'data-accessibility']
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |