tony/chorus-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2e1bb2e55ec3c7a5856ccb98f2a149c2c84e0c14
chorus-services/brand-assets/tailwind_theme_evaluation_playground.html
tony ba0e8c84ae feat: Add comprehensive iconography system and enhance brand guidelines 
- Add complete Iconography section with Coolicons v4.1 integration
- Implement theme-adaptive icons (black for light mode, white for dark mode)
- Add Visual Aid modal dialog for accessibility settings
- Replace theme toggle with semantic moon/sun icons
- Add personality trait icons with appropriate semantic choices
- Fix code block theming to respect light/dark mode toggle
- Include comprehensive icon categories: Interface, File/Data, Communication, Navigation
- Add detailed implementation guides for HTML, SVG, and Tailwind
- Create accessibility-aware color system with vision deficiency support
- Add Inconsolata and Inter Tight fonts for complete typography system

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-20 16:49:53 +10:00

1649 lines
92 KiB
HTML
Raw Blame History

<!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>Theme Evaluation Playground — Tailwind</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inconsolata:wght@200..900&display=swap');
</style>
<script src="https://cdn.tailwindcss.com"></script>
<script>
// Tailwind Play CDN custom config for extended palette + h7 utility
tailwind.config = {
darkMode: ["class", "[data-theme='dark']"],
theme: {
extend: {
fontFamily: {
sans: ["Inter Tight", "Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "sans-serif"],
mono: ["Inconsolata", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "monospace"],
logo: ["Exo", "Inter Tight", "sans-serif"]
},
colors: {
// CHORUS Brand Colors
carbon: {
50: '#f8f8f8',
100: '#f0f0f0',
200: '#e4e4e4',
300: '#d1d1d1',
400: '#b4b4b4',
500: '#9a9a9a',
600: '#818181',
700: '#6a6a6a',
800: '#5a5a5a',
900: '#4a4a4a',
950: '#000000', // Carbon Black
},
mulberry: {
50: '#f7f6f8',
100: '#efedf1',
200: '#ddd9e1',
300: '#c4bcc8',
400: '#a598a8',
500: '#8b7a8c',
600: '#746373',
700: '#60525e',
800: '#51454f',
900: '#453c44',
950: '#0b0213', // Dark Mulberry
},
walnut: {
50: '#f7f6f4',
100: '#ede9e4',
200: '#ddd4c9',
300: '#c6b8a6',
400: '#ad9680',
500: '#9d8168',
600: '#8f705d',
700: '#775b4e',
800: '#634c42',
900: '#524038',
950: '#403730', // Walnut Brown
},
paper: {
50: '#fdfdf9',
100: '#fdfbf0',
200: '#fbf7e0',
300: '#f7f0c4',
400: '#f1e59d',
500: '#e8d675',
600: '#dcc54e',
700: '#c6ab34',
800: '#a58a2d',
900: '#877128',
950: '#F5F5DC', // Natural Paper (moved to 950 for semantic meaning)
},
nickel: {
50: '#f9f9f8',
100: '#f2f2f0',
200: '#e6e5e1',
300: '#d5d3cb',
400: '#c1bfb1', // Brushed Nickel
500: '#a8a598',
600: '#928e7e',
700: '#7a7568',
800: '#666157',
900: '#545049',
950: '#2d2c27',
},
orchestration: {
50: '#f2f5f8',
100: '#e8ecf2',
200: '#d5dee8',
300: '#b8c7d8',
400: '#96abc5',
500: '#7c93b4',
600: '#6a80a3',
700: '#5a6c80', // Orchestration Blue
800: '#4e5c70',
900: '#424d5c',
950: '#2a303a',
},
harmony: {
50: '#f3f4f3',
100: '#e6e8e7',
200: '#ced2d0',
300: '#adb3b0',
400: '#88918d',
500: '#6d7570',
600: '#565d59',
700: '#515d54', // Harmony Green
800: '#424b46',
900: '#363e39',
950: '#1d211e',
},
resonance: {
50: '#f7f5f2',
100: '#ede8e1',
200: '#ddd1c2',
300: '#c7b49b',
400: '#b09572',
500: '#a07f5b',
600: '#936f50',
700: '#8e7b5e', // Resonance Amber
800: '#6e5d47',
900: '#5a4d3d',
950: '#2f2820',
},
alert: {
50: '#f7f4f4',
100: '#ede7e6',
200: '#ddd2d1',
300: '#c3b4b2',
400: '#a3908d',
500: '#8a716e',
600: '#745d5a',
700: '#624e4b',
800: '#593735', // Alert Coral
900: '#4a312f',
950: '#271a19',
}
},
boxShadow: {
soft: "0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.06)",
},
spacing: {
'micro': '4px',
'chorus-sm': '8px',
'chorus-md': '16px',
'chorus-lg': '32px',
'chorus-xl': '64px',
'chorus-xxl': '128px',
}
}
},
plugins: [function({ addUtilities }){
addUtilities({
'.h7': { fontSize: '0.7rem', lineHeight: '1rem', fontWeight: '700', letterSpacing: '0.05em', textTransform: 'uppercase' }
})
}]
};
</script>
<style>
/* CHORUS Brand CSS Variables - Ultra-Minimalist Implementation */
:root {
/* Core Brand Colors */
--color-carbon-black: #000000;
--color-dark-mulberry: #0b0213;
--color-walnut-brown: #403730;
--color-natural-paper: #F5F5DC;
--color-brushed-nickel: #c1bfb1;
/* Light Theme Variables */
--bg-primary: #FFFFFF;
--bg-secondary: #FEFEFE;
--bg-tertiary: #F5F5DC; /* Natural Paper */
--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; /* Dark Mulberry */
--accent-secondary: #403730; /* Walnut Brown */
--accent-system: #5a6c80; /* Orchestration Blue */
/* Spacing System */
--space-micro: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;
--space-xl: 64px;
--space-xxl: 128px;
--radius: 0px; /* Ultra-minimalist: no border radius */
}
/* Dark Theme Variables */
[data-theme='dark'], .dark {
--bg-primary: #000000; /* Carbon Black */
--bg-secondary: #0b0213; /* Dark Mulberry */
--bg-tertiary: #1a1a1a;
--bg-accent: #2d2d2d;
--text-primary: #F5F5DC; /* Natural Paper */
--text-secondary: #e5e5e5;
--text-tertiary: #c1c1c1;
--text-subtle: #999999;
--text-ghost: #666666;
--border-invisible: #1a1a1a;
--border-subtle: #2d2d2d;
--border-defined: #404040;
--border-emphasis: #666666;
--accent-primary: #F5F5DC; /* Natural Paper on dark */
--accent-secondary: #c1bfb1; /* Brushed Nickel */
--accent-system: #96abc5; /* Lighter Orchestration Blue */
}
.themed {
border-radius: var(--radius);
}
/* 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;
}
/* 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;
}
/* Orchestration Blue Progress */
.progress-orchestration::-webkit-progress-value {
background-color: #5a6c80;
border-radius: 0;
}
.dark .progress-orchestration::-webkit-progress-value {
background-color: #8ba3c4;
}
.progress-orchestration::-moz-progress-bar {
background-color: #5a6c80;
border-radius: 0;
}
.dark .progress-orchestration::-moz-progress-bar {
background-color: #8ba3c4;
}
/* Resonance Amber Progress */
.progress-resonance::-webkit-progress-value {
background-color: #8e7b5e;
border-radius: 0;
}
.dark .progress-resonance::-webkit-progress-value {
background-color: #b8a688;
}
.progress-resonance::-moz-progress-bar {
background-color: #8e7b5e;
border-radius: 0;
}
.dark .progress-resonance::-moz-progress-bar {
background-color: #b8a688;
}
/* Alert Coral Progress */
.progress-alert::-webkit-progress-value {
background-color: #593735;
border-radius: 0;
}
.dark .progress-alert::-webkit-progress-value {
background-color: #8b5a57;
}
.progress-alert::-moz-progress-bar {
background-color: #593735;
border-radius: 0;
}
.dark .progress-alert::-moz-progress-bar {
background-color: #8b5a57;
}
/* Mulberry Progress */
.progress-mulberry::-webkit-progress-value {
background-color: #0b0213;
border-radius: 0;
}
.dark .progress-mulberry::-webkit-progress-value {
background-color: #F5F5DC;
}
.progress-mulberry::-moz-progress-bar {
background-color: #0b0213;
border-radius: 0;
}
.dark .progress-mulberry::-moz-progress-bar {
background-color: #F5F5DC;
}
/* Custom meter styling */
meter {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
background-color: #E5E5E5;
border: none;
border-radius: 0;
}
.dark meter {
background-color: #374151;
}
.meter-harmony::-webkit-meter-bar {
background-color: #E5E5E5;
border-radius: 0;
}
.dark .meter-harmony::-webkit-meter-bar {
background-color: #374151;
}
.meter-harmony::-webkit-meter-optimum-value {
background-color: #515d54;
border-radius: 0;
}
.dark .meter-harmony::-webkit-meter-optimum-value {
background-color: #7a8a7f;
}
.meter-harmony::-moz-meter-bar {
background-color: #515d54;
border-radius: 0;
}
.dark .meter-harmony::-moz-meter-bar {
background-color: #7a8a7f;
}
</style>
</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-100 bg-white/95 p-chorus-lg backdrop-blur md:block dark:border-mulberry-800 dark:bg-mulberry-950/95">
<div class="mb-chorus-xl flex items-center gap-chorus-sm">
<!-- Simple geometric icon inspired by Mobius ring -->
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
<path d="M8 12l2 2 4-4"/>
</svg>
<span class="font-logo font-thin tracking-wide text-carbon-950 dark:text-white">CHORUS Theme</span>
</div>
<nav class="space-y-micro text-sm">
<a href="#typography" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Typography</a>
<a href="#colors" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Colorways</a>
<a href="#components" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Components</a>
<a href="#forms" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Forms + Validation</a>
<a href="#tables" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Tables</a>
<a href="#media" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Media</a>
<a href="#misc" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Misc Elements</a>
<a href="#modals" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Modals</a>
<a href="#footer" class="block px-chorus-md py-chorus-sm text-carbon-800 hover:text-mulberry-950 dark:text-paper-200 dark:hover:text-white">Footer</a>
</nav>
</aside>
<div class="md:pl-64">
<!-- Header / Toolbar -->
<header class="sticky top-0 z-40 border-b border-nickel-100 bg-white/90 backdrop-blur dark:border-nickel-950 dark:bg-mulberry-950/90">
<div class="mx-auto flex max-w-7xl items-center justify-between gap-chorus-lg px-chorus-lg py-chorus-xl">
<div class="flex items-center gap-chorus-lg">
<button id="btnSidebar" class="md:hidden p-chorus-sm hover:opacity-80" aria-label="Open sidebar">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
</button>
<a href="#" class="flex items-center gap-chorus-sm">
<!-- Mobius ring inspired logo -->
<span class="inline-flex h-8 w-8 items-center justify-center bg-mulberry-950 text-paper-950 dark:bg-paper-950 dark:text-carbon-950">○</span>
<span class="font-logo text-xl font-thin tracking-wide">CHORUS Theme Lab</span>
</a>
<nav aria-label="Breadcrumbs" class="hidden items-center gap-chorus-sm md:flex">
<span class="text-nickel-400">/</span>
<ol class="flex items-center gap-1 text-sm">
<li><a href="#" class="hover:text-mulberry-950 dark:hover:text-paper-950">Home</a></li>
<li><span class="mx-1 text-nickel-400">/</span></li>
<li><a href="#components" class="hover:text-mulberry-950 dark:hover:text-paper-950">Components</a></li>
<li><span class="mx-1 text-nickel-400">/</span></li>
<li aria-current="page" class="text-nickel-500 dark:text-nickel-400">Playground</li>
</ol>
</nav>
</div>
<!-- Toolbar actions -->
<div class="flex items-center gap-chorus-sm">
<div class="hidden items-center gap-1 border border-nickel-200 px-chorus-sm py-1 dark:border-nickel-800 md:flex">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
<input type="search" placeholder="Search components…" class="w-48 border-0 bg-transparent text-sm outline-none placeholder:text-nickel-400" />
</div>
<button id="toggleTheme" class="px-chorus-md py-chorus-sm text-sm font-medium border border-nickel-300 hover:opacity-80 dark:border-nickel-700">Toggle Theme</button>
<button id="openModal" class="bg-mulberry-950 px-chorus-md py-chorus-sm text-sm font-medium text-paper-950 hover:opacity-90 dark:bg-paper-950 dark:text-carbon-950">Open Modal</button>
</div>
</div>
</header>
<!-- Hero / Splash -->
<section class="relative isolate overflow-hidden bg-paper-950 py-chorus-xxl dark:bg-carbon-950">
<div class="mx-auto max-w-7xl px-chorus-lg">
<div class="grid items-center gap-chorus-xxl md:grid-cols-2">
<div>
<p class="mb-chorus-sm inline-flex border border-nickel-200 bg-white/60 px-chorus-sm py-1 text-xs text-mulberry-800 dark:border-nickel-800 dark:bg-mulberry-900/30 dark:text-nickel-300">CHORUS Demo</p>
<h1 class="mb-chorus-md font-logo text-4xl font-thin tracking-wide md:text-5xl">CHORUS Theme Evaluation</h1>
<p class="mb-chorus-xl max-w-prose text-carbon-700 dark:text-paper-200">Ultra-minimalist design system inspired by sophisticated orchestration. Experience radical simplicity with purposeful restraint and elegant typography hierarchy.</p>
<div class="flex flex-wrap gap-chorus-md">
<a href="#components" class="bg-mulberry-950 px-chorus-lg py-chorus-sm font-medium text-paper-950 hover:opacity-90 dark:bg-paper-950 dark:text-carbon-950">Explore Components</a>
<a href="#forms" class="border border-walnut-950 px-chorus-lg py-chorus-sm font-medium text-walnut-950 hover:opacity-80 dark:border-nickel-400 dark:text-nickel-400">Jump to Forms</a>
</div>
</div>
<div class="relative">
<!-- Ultra-minimalist placeholder representing the Mobius ring -->
<div class="themed mx-auto h-56 w-full max-w-xl bg-white border border-nickel-100 dark:bg-mulberry-900 dark:border-nickel-900 flex items-center justify-center">
<div class="h-24 w-24 border-4 border-mulberry-950 dark:border-paper-950" style="border-radius: 50%; transform: rotateX(45deg);"></div>
</div>
</div>
</div>
</div>
</section>
<!-- CHORUS Brand Colorways -->
<section id="colors" class="mx-auto max-w-7xl px-chorus-lg py-chorus-xxl">
<h2 class="mb-chorus-lg text-2xl font-bold">CHORUS Brand Colors</h2>
<p class="mb-chorus-xl text-sm text-carbon-600 dark:text-paper-400">Five core brand colors used across the CHORUS Services ecosystem to maintain sophisticated consistency.</p>
<div class="grid gap-chorus-xl sm:grid-cols-2 lg:grid-cols-5">
<!-- Dark Mulberry -->
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<div class="mb-chorus-md h-20 bg-mulberry-950"></div>
<div class="space-y-chorus-sm text-sm">
<div class="font-medium">Dark Mulberry</div>
<div class="text-xs text-carbon-600 dark:text-paper-400">#0b0213</div>
<div class="flex gap-chorus-sm">
<span class="bg-mulberry-950 px-chorus-sm py-1 text-paper-950 text-xs">Primary</span>
<span class="bg-mulberry-100 px-chorus-sm py-1 text-mulberry-900 text-xs dark:bg-mulberry-900 dark:text-mulberry-100">Soft</span>
</div>
</div>
</div>
<!-- Walnut Brown -->
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<div class="mb-chorus-md h-20 bg-walnut-950"></div>
<div class="space-y-chorus-sm text-sm">
<div class="font-medium">Walnut Brown</div>
<div class="text-xs text-carbon-600 dark:text-paper-400">#403730</div>
<div class="flex gap-chorus-sm">
<span class="bg-walnut-950 px-chorus-sm py-1 text-paper-950 text-xs">Primary</span>
<span class="bg-walnut-100 px-chorus-sm py-1 text-walnut-900 text-xs dark:bg-walnut-900 dark:text-walnut-100">Soft</span>
</div>
</div>
</div>
<!-- Orchestration Blue -->
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<div class="mb-chorus-md h-20 bg-orchestration-700"></div>
<div class="space-y-chorus-sm text-sm">
<div class="font-medium">Orchestration Blue</div>
<div class="text-xs text-carbon-600 dark:text-paper-400">#5a6c80</div>
<div class="flex gap-chorus-sm">
<span class="bg-orchestration-700 px-chorus-sm py-1 text-white text-xs">Primary</span>
<span class="bg-orchestration-100 px-chorus-sm py-1 text-orchestration-900 text-xs dark:bg-orchestration-900 dark:text-orchestration-100">Soft</span>
</div>
</div>
</div>
<!-- Harmony Green -->
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<div class="mb-chorus-md h-20 bg-harmony-700"></div>
<div class="space-y-chorus-sm text-sm">
<div class="font-medium">Harmony Green</div>
<div class="text-xs text-carbon-600 dark:text-paper-400">#515d54</div>
<div class="flex gap-chorus-sm">
<span class="bg-harmony-700 px-chorus-sm py-1 text-white text-xs">Primary</span>
<span class="bg-harmony-100 px-chorus-sm py-1 text-harmony-900 text-xs dark:bg-harmony-900 dark:text-harmony-100">Soft</span>
</div>
</div>
</div>
<!-- Brushed Nickel -->
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<div class="mb-chorus-md h-20 bg-nickel-400"></div>
<div class="space-y-chorus-sm text-sm">
<div class="font-medium">Brushed Nickel</div>
<div class="text-xs text-carbon-600 dark:text-paper-400">#c1bfb1</div>
<div class="flex gap-chorus-sm">
<span class="bg-nickel-400 px-chorus-sm py-1 text-carbon-950 text-xs">Primary</span>
<span class="bg-nickel-100 px-chorus-sm py-1 text-nickel-900 text-xs dark:bg-nickel-900 dark:text-nickel-100">Soft</span>
</div>
</div>
</div>
</div>
</section>
<!-- CHORUS Typography System -->
<section id="typography" class="mx-auto max-w-7xl px-chorus-lg py-chorus-xxl">
<div class="grid gap-chorus-xxl lg:grid-cols-2">
<div>
<h2 class="mb-chorus-xl text-2xl font-bold">CHORUS Typography</h2>
<p class="mb-chorus-xl text-sm text-carbon-600 dark:text-paper-400">Strong grid-based layout using Inter Tight for all content and Exo Thin for logotypes.</p>
<!-- Logotype Section -->
<div class="mb-chorus-xxl border-b border-nickel-100 pb-chorus-xl dark:border-nickel-900">
<h3 class="mb-chorus-lg text-lg font-medium">Logotype (Exo Thin 100)</h3>
<div class="space-y-chorus-lg">
<h1 class="font-logo text-6xl font-thin tracking-wide text-mulberry-950 dark:text-white">CHORUS</h1>
<h2 class="font-logo text-4xl font-thin tracking-wide text-mulberry-950 dark:text-white">CHORUS Services</h2>
<h3 class="font-logo text-2xl font-thin tracking-wide text-carbon-700 dark:text-paper-200">CHORUS Theme Lab</h3>
</div>
</div>
<!-- Content Typography (Inter Tight) -->
<div class="mb-chorus-xl">
<h3 class="mb-chorus-lg text-lg font-medium">Content Hierarchy (Inter Tight)</h3>
<div class="space-y-chorus-md">
<h1 class="text-4xl font-black tracking-tight">Display Heading</h1>
<h2 class="text-3xl font-bold tracking-tight">Section Heading</h2>
<h3 class="text-2xl font-semibold">Subsection</h3>
<h4 class="text-xl font-medium">Component Title</h4>
<h5 class="text-lg font-medium">Element Label</h5>
<h6 class="text-base font-medium">Micro Heading</h6>
<div class="h7">H7 OVERLINE</div>
</div>
</div>
<!-- Body Text Examples -->
<div class="space-y-chorus-lg">
<p class="text-lg font-normal leading-relaxed">Large body text for introductions and important content. Inter Tight provides excellent readability with its tight spacing and clean letterforms.</p>
<p class="text-base font-normal leading-relaxed">Regular body text with <strong class="font-semibold">strong emphasis</strong>, <em class="italic">italic emphasis</em>, <a href="#" class="text-orchestration-700 underline hover:opacity-80 dark:text-orchestration-400">linked content</a>, and <code class="bg-nickel-100 px-1 py-0.5 text-sm font-mono dark:bg-nickel-900">inline code</code>.</p>
<p class="text-sm font-normal leading-relaxed text-carbon-600 dark:text-paper-400">Small supporting text for captions, metadata, and secondary information that maintains readability.</p>
<p class="text-xs font-medium uppercase tracking-wide text-carbon-500 dark:text-purple-300">MICRO TEXT FOR LABELS</p>
</div>
<!-- Technical Typography (Inconsolata) -->
<div class="mt-chorus-xxl border-t border-nickel-100 pt-chorus-xl dark:border-nickel-900">
<h3 class="mb-chorus-lg text-lg font-medium">Technical Typography (Inconsolata)</h3>
<!-- Inline Code -->
<p class="mb-chorus-lg text-base leading-relaxed">
Use <code class="bg-nickel-100 px-1 py-0.5 font-mono text-sm dark:bg-nickel-900">font-mono</code> for inline code,
file paths like <code class="bg-nickel-100 px-1 py-0.5 font-mono text-sm dark:bg-nickel-900">/home/user/config.json</code>,
and commands like <kbd class="bg-nickel-200 border border-nickel-300 px-1 py-0.5 font-mono text-xs dark:bg-nickel-800 dark:border-nickel-700">⌘+K</kbd>.
</p>
<!-- Code Block -->
<div class="mb-chorus-lg">
<h4 class="mb-chorus-sm text-sm font-medium text-carbon-700 dark:text-paper-300">Code Block Example</h4>
<pre class="bg-carbon-950 p-chorus-lg font-mono text-sm text-paper-950 dark:bg-nickel-950"><code>// CHORUS Services Configuration
const chorusConfig = {
theme: 'ultra-minimalist',
fonts: {
logo: 'Exo Thin 100',
content: 'Inter Tight',
code: 'Inconsolata'
},
colors: {
primary: '#0b0213', // Dark Mulberry
secondary: '#403730', // Walnut Brown
accent: '#5a6c80' // Orchestration Blue
}
};</code></pre>
</div>
<!-- Terminal Example -->
<div class="mb-chorus-lg">
<h4 class="mb-chorus-sm text-sm font-medium text-carbon-700 dark:text-paper-300">Terminal Commands</h4>
<div class="bg-carbon-950 p-chorus-lg">
<div class="mb-chorus-sm font-mono text-sm text-harmony-400">$ chorus@theme-lab:~</div>
<div class="font-mono text-sm text-paper-950">npm run dev</div>
<div class="font-mono text-sm text-nickel-400">Starting development server...</div>
<div class="font-mono text-sm text-harmony-400">✓ Server running on http://localhost:3000</div>
</div>
</div>
<!-- API Documentation Style -->
<div class="mb-chorus-lg">
<h4 class="mb-chorus-sm text-sm font-medium text-carbon-700 dark:text-paper-300">API Documentation</h4>
<div class="border border-nickel-200 dark:border-nickel-800">
<div class="bg-nickel-50 px-chorus-lg py-chorus-sm dark:bg-nickel-900">
<code class="font-mono text-sm font-medium">GET /api/chorus/themes</code>
</div>
<div class="p-chorus-lg">
<p class="mb-chorus-sm text-sm">Returns available CHORUS theme configurations.</p>
<div class="font-mono text-xs text-carbon-600 dark:text-paper-400">
<div>Response: 200 OK</div>
<div>Content-Type: application/json</div>
</div>
</div>
</div>
</div>
</div>
<!-- Grid Examples -->
<div class="mt-chorus-xxl">
<h3 class="mb-chorus-lg text-lg font-medium">Grid-Based Layout</h3>
<div class="grid grid-cols-12 gap-chorus-sm">
<div class="col-span-3 bg-nickel-100 p-chorus-sm text-xs dark:bg-nickel-900">3 cols</div>
<div class="col-span-6 bg-nickel-100 p-chorus-sm text-xs dark:bg-nickel-900">6 cols</div>
<div class="col-span-3 bg-nickel-100 p-chorus-sm text-xs dark:bg-nickel-900">3 cols</div>
<div class="col-span-4 bg-nickel-100 p-chorus-sm text-xs dark:bg-nickel-900">4 cols</div>
<div class="col-span-8 bg-nickel-100 p-chorus-sm text-xs dark:bg-nickel-900">8 cols</div>
<div class="col-span-12 bg-nickel-100 p-chorus-sm text-xs dark:bg-nickel-900">12 cols full width</div>
</div>
</div>
</div>
<div>
<h2 class="mb-chorus-lg text-2xl font-bold">CHORUS Buttons / CTAs</h2>
<p class="mb-chorus-xl text-sm text-carbon-600 dark:text-paper-400">Ultra-minimalist button system following the "no shadows, gradients, or 3D effects" principle.</p>
<!-- Primary Actions -->
<div class="mb-chorus-xl">
<h3 class="mb-chorus-md text-lg font-medium">Primary Actions</h3>
<div class="flex flex-wrap gap-chorus-md">
<button class="bg-mulberry-950 px-chorus-lg py-chorus-sm font-medium text-paper-950 hover:opacity-90 dark:bg-paper-950 dark:text-carbon-950">Primary CTA</button>
<button class="bg-orchestration-700 px-chorus-lg py-chorus-sm font-medium text-white hover:opacity-90 dark:bg-orchestration-500">System Action</button>
</div>
</div>
<!-- Secondary Actions -->
<div class="mb-chorus-xl">
<h3 class="mb-chorus-md text-lg font-medium">Secondary Actions</h3>
<div class="flex flex-wrap gap-chorus-md">
<button class="border border-mulberry-950 px-chorus-lg py-chorus-sm font-medium text-mulberry-950 hover:opacity-85 dark:border-paper-950 dark:text-white">Secondary</button>
<button class="border border-walnut-950 px-chorus-lg py-chorus-sm font-medium text-walnut-950 hover:opacity-85 dark:border-nickel-400 dark:text-nickel-400">Tertiary</button>
</div>
</div>
<!-- System State Buttons -->
<div class="mb-chorus-xl">
<h3 class="mb-chorus-md text-lg font-medium">System States</h3>
<div class="flex flex-wrap gap-chorus-md">
<button class="bg-harmony-700 px-chorus-lg py-chorus-sm font-medium text-white hover:opacity-90 dark:bg-harmony-600">Success</button>
<button class="bg-resonance-700 px-chorus-lg py-chorus-sm font-medium text-white hover:opacity-90 dark:bg-resonance-600">Warning</button>
<button class="bg-alert-800 px-chorus-lg py-chorus-sm font-medium text-white hover:opacity-90 dark:bg-alert-700">Alert</button>
</div>
</div>
<!-- Text Actions -->
<div class="mb-chorus-xl">
<h3 class="mb-chorus-md text-lg font-medium">Text Actions</h3>
<div class="flex flex-wrap gap-chorus-xl">
<button class="font-medium text-mulberry-950 hover:opacity-80 dark:text-white">Text Link</button>
<button class="font-medium text-orchestration-700 underline hover:opacity-80 dark:text-orchestration-400">Underlined Link</button>
<button class="font-medium text-walnut-950 hover:opacity-80 dark:text-nickel-400">Subtle Action</button>
</div>
</div>
<!-- Disabled State -->
<div class="mb-chorus-xl">
<h3 class="mb-chorus-md text-lg font-medium">Disabled States</h3>
<div class="flex flex-wrap gap-chorus-md">
<button class="bg-nickel-300 px-chorus-lg py-chorus-sm font-medium text-nickel-600 opacity-40 dark:bg-nickel-800 dark:text-nickel-500" disabled>Disabled Primary</button>
<button class="border border-nickel-300 px-chorus-lg py-chorus-sm font-medium text-nickel-500 opacity-40 dark:border-nickel-700" disabled>Disabled Secondary</button>
</div>
</div>
<!-- Icon Actions & Social Links -->
<div class="mt-chorus-xxl">
<h3 class="mb-chorus-md text-lg font-medium">Icon Actions</h3>
<div class="flex flex-wrap items-center gap-chorus-lg text-sm">
<!-- CHORUS-styled Social Icons -->
<a href="#" aria-label="GitHub" class="inline-flex p-chorus-sm text-carbon-700 hover:text-mulberry-950 dark:text-paper-300 dark:hover:text-paper-950"><svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5a12 12 0 0 0-3.79 23.4c.6.11.82-.26.82-.58v-2.1c-3.34.73-4.04-1.61-4.04-1.61-.55-1.38-1.33-1.75-1.33-1.75-1.09-.74.08-.73.08-.73 1.21.09 1.85 1.25 1.85 1.25 1.07 1.84 2.81 1.31 3.5 1 .11-.78.42-1.31.76-1.61-2.66-.3-5.47-1.33-5.47-5.9 0-1.3.47-2.36 1.25-3.2-.13-.3-.54-1.52.12-3.18 0 0 1.01-.32 3.3 1.22a11.5 11.5 0 0 1 6 0c2.3-1.54 3.3-1.22 3.3-1.22.66 1.66.25 2.88.12 3.18.78.84 1.25 1.9 1.25 3.2 0 4.59-2.81 5.6-5.49 5.89.43.37.81 1.1.81 2.22v3.29c0 .32.21.7.82.58A12 12 0 0 0 12 .5z"/></svg></a>
<a href="#" aria-label="LinkedIn" class="inline-flex p-chorus-sm text-carbon-700 hover:text-orchestration-700 dark:text-paper-300 dark:hover:text-orchestration-400"><svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5A2.5 2.5 0 1 1 2.48 6 2.5 2.5 0 0 1 4.98 3.5ZM3 8h4v12H3zm7 0h3.8v1.7h.05A4.16 4.16 0 0 1 18.4 8c3.7 0 4.6 2.3 4.6 5.3V20h-4v-5.2c0-1.3 0-3-1.8-3s-2.1 1.4-2.1 2.9V20H10z"/></svg></a>
<!-- CHORUS Navigation Icons (Ultra-minimal) -->
<span class="inline-flex items-center gap-chorus-sm p-chorus-sm text-carbon-600 dark:text-paper-300">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
Menu
</span>
<span class="inline-flex items-center gap-chorus-sm p-chorus-sm text-carbon-600 dark:text-paper-300">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m6 18 6-6-6-6"/></svg>
Navigate
</span>
<span class="inline-flex items-center gap-chorus-sm p-chorus-sm text-carbon-600 dark:text-paper-300">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
Add
</span>
<span class="inline-flex items-center gap-chorus-sm p-chorus-sm text-carbon-600 dark:text-paper-300">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
Search
</span>
</div>
</div>
</div>
</div>
</section>
<!-- CHORUS Common Components -->
<section id="components" class="mx-auto max-w-7xl px-chorus-lg py-chorus-xxl">
<h2 class="mb-chorus-xl text-2xl font-bold">CHORUS Common Components</h2>
<p class="mb-chorus-xxl text-sm text-carbon-600 dark:text-paper-400">Ultra-minimalist component system with no border radius, clean CHORUS branding, and sophisticated orchestration theme.</p>
<div class="grid gap-chorus-xl lg:grid-cols-3">
<!-- CHORUS Service Card -->
<article class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<header class="mb-chorus-md flex items-center justify-between">
<div class="flex items-center gap-chorus-sm">
<div class="h-3 w-3 bg-harmony-700 dark:bg-harmony-400"></div>
<h3 class="text-lg font-medium">CHORUS Core</h3>
</div>
<span class="bg-harmony-100 px-chorus-sm py-1 text-xs text-harmony-800 dark:bg-harmony-900/30 dark:text-harmony-300">Active</span>
</header>
<p class="text-sm text-carbon-600 dark:text-paper-300">Orchestration service for distributed AI agents. Ensures context consistency and eliminates hallucinations across enterprise systems.</p>
<footer class="mt-chorus-lg flex gap-chorus-sm text-sm">
<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">Configure</button>
<button class="border border-walnut-950 px-chorus-md py-chorus-sm hover:opacity-85 dark:border-nickel-400 dark:text-nickel-400">Monitor</button>
</footer>
</article>
<!-- CHORUS Control Panel -->
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<div class="mb-chorus-md flex items-center justify-between">
<div class="text-sm font-medium">CHORUS Control Panel</div>
<div class="flex items-center gap-chorus-sm">
<button class="p-chorus-sm hover:opacity-80" aria-label="Refresh">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M21 12a9 9 0 1 1-3-6.7"/>
<path d="M21 3v6h-6"/>
</svg>
</button>
<button class="p-chorus-sm hover:opacity-80" aria-label="Settings">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z"/>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V22a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06A2 2 0 0 1 3.2 19.4l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H2a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06A2 2 0 1 1 6.04 3.2l.06.06c.5.5 1.23.65 1.82.33H8a1.65 1.65 0 0 0 1-1.51V2a2 2 0 1 1 4 0v.09c0 .67.39 1.27 1 1.51h.08c.59.32 1.31.17 1.82-.33l.06-.06A2 2 0 1 1 20.8 6.04l-.06.06a1.65 1.65 0 0 0-.33 1.82v.08c.24.61.84 1 1.51 1H22a2 2 0 0 1 0 4h-.09c-.67 0-1.27.39-1.51 1Z"/>
</svg>
</button>
</div>
</div>
<div class="flex items-center gap-chorus-sm border border-nickel-300 p-chorus-sm dark:border-nickel-700">
<svg class="h-5 w-5 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.3-4.3"/>
</svg>
<input type="search" placeholder="Search CHORUS services..." class="w-full border-0 bg-transparent outline-none" />
<kbd class="border border-nickel-300 px-1 text-xs dark:border-nickel-700">/</kbd>
</div>
<div class="mt-chorus-md grid grid-cols-2 gap-chorus-sm text-xs">
<button class="border border-nickel-300 px-chorus-sm py-1 hover:opacity-80 dark:border-nickel-700">WHOOSH</button>
<button class="border border-nickel-300 px-chorus-sm py-1 hover:opacity-80 dark:border-nickel-700">BZZZ</button>
</div>
</div>
<!-- CHORUS System Alert -->
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<div class="flex items-start gap-chorus-md">
<div class="mt-1 flex h-8 w-8 items-center justify-center bg-orchestration-700/10 text-orchestration-700 dark:bg-orchestration-400/10 dark:text-orchestration-400">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 9v4"/>
<path d="M12 17h.01"/>
<circle cx="12" cy="12" r="10"/>
</svg>
</div>
<div class="text-sm">
<div class="font-medium">System Update Available</div>
<p class="mt-1 text-carbon-600 dark:text-paper-300">CHORUS v2.1 includes enhanced orchestration capabilities and improved context management. <a href="#" class="text-orchestration-700 hover:text-mulberry-950 dark:text-orchestration-400 dark:hover:text-paper-950">Update now</a>.</p>
<div class="mt-chorus-md flex gap-chorus-sm text-xs">
<button class="bg-orchestration-700 px-chorus-md py-1 text-white hover:opacity-90 dark:bg-orchestration-400 dark:text-carbon-950">Install</button>
<button class="border border-nickel-300 px-chorus-md py-1 hover:opacity-80 dark:border-nickel-700">Later</button>
</div>
</div>
</div>
</div>
<!-- CHORUS Service Status -->
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<div class="mb-chorus-md flex items-center justify-between">
<h3 class="text-sm font-medium">Service Status</h3>
<div class="flex items-center gap-1">
<div class="h-2 w-2 bg-harmony-700 dark:bg-harmony-400"></div>
<span class="text-xs text-carbon-500 dark:text-purple-300">All Systems Operational</span>
</div>
</div>
<div class="space-y-chorus-sm text-sm">
<div class="flex items-center justify-between">
<span class="text-carbon-600 dark:text-paper-300">CHORUS Core</span>
<span class="text-harmony-700 dark:text-harmony-400">99.9%</span>
</div>
<div class="flex items-center justify-between">
<span class="text-carbon-600 dark:text-paper-300">WHOOSH Search</span>
<span class="text-orchestration-700 dark:text-orchestration-400">98.1%</span>
</div>
<div class="flex items-center justify-between">
<span class="text-carbon-600 dark:text-paper-300">BZZZ Tasks</span>
<span class="text-resonance-700 dark:text-resonance-400">97.3%</span>
</div>
</div>
</div>
<!-- CHORUS Quick Actions -->
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<h3 class="mb-chorus-md text-sm font-medium">Quick Actions</h3>
<div class="grid gap-chorus-sm">
<button class="flex items-center gap-chorus-sm border border-nickel-300 p-chorus-sm text-left text-sm hover:opacity-80 dark:border-nickel-700">
<div class="h-2 w-2 bg-mulberry-950 dark:bg-paper-950"></div>
<span>Deploy New Agent</span>
</button>
<button class="flex items-center gap-chorus-sm border border-nickel-300 p-chorus-sm text-left text-sm hover:opacity-80 dark:border-nickel-700">
<div class="h-2 w-2 bg-orchestration-700 dark:bg-orchestration-400"></div>
<span>View Analytics</span>
</button>
<button class="flex items-center gap-chorus-sm border border-nickel-300 p-chorus-sm text-left text-sm hover:opacity-80 dark:border-nickel-700">
<div class="h-2 w-2 bg-harmony-700 dark:bg-harmony-400"></div>
<span>System Health</span>
</button>
</div>
</div>
<!-- CHORUS Data Visualization -->
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<h3 class="mb-chorus-md text-sm font-medium">Performance Metrics</h3>
<div class="space-y-chorus-md">
<div>
<div class="mb-1 flex justify-between text-xs">
<span class="text-carbon-600 dark:text-paper-300">Context Accuracy</span>
<span class="text-harmony-700 dark:text-harmony-400">94%</span>
</div>
<div class="h-1 w-full bg-nickel-200 dark:bg-nickel-800">
<div class="h-full w-[94%] bg-harmony-700 dark:bg-harmony-400"></div>
</div>
</div>
<div>
<div class="mb-1 flex justify-between text-xs">
<span class="text-carbon-600 dark:text-paper-300">Response Time</span>
<span class="text-orchestration-700 dark:text-orchestration-400">87ms</span>
</div>
<div class="h-1 w-full bg-nickel-200 dark:bg-nickel-800">
<div class="h-full w-3/4 bg-orchestration-700 dark:bg-orchestration-400"></div>
</div>
</div>
<div>
<div class="mb-1 flex justify-between text-xs">
<span class="text-carbon-600 dark:text-paper-300">Agent Efficiency</span>
<span class="text-resonance-700 dark:text-resonance-400">91%</span>
</div>
<div class="h-1 w-full bg-nickel-200 dark:bg-nickel-800">
<div class="h-full w-[91%] bg-resonance-700 dark:bg-resonance-400"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CHORUS Forms & Validation -->
<section id="forms" class="mx-auto max-w-7xl px-chorus-lg py-chorus-xxl">
<h2 class="mb-chorus-xl text-2xl font-bold">CHORUS Forms & Validation</h2>
<p class="mb-chorus-xxl text-sm text-carbon-600 dark:text-paper-400">Ultra-minimalist form system with no border radius, clean validation states, and strong grid structure.</p>
<div class="grid gap-chorus-xxl lg:grid-cols-2">
<!-- CHORUS Form -->
<form class="space-y-chorus-xl border border-nickel-100 p-chorus-xl dark:border-nickel-900">
<fieldset class="grid gap-chorus-lg">
<legend class="mb-chorus-md text-sm font-medium">Account Information</legend>
<!-- Basic Inputs -->
<div>
<label for="chorus-name" class="mb-chorus-sm block text-sm font-medium">Full Name</label>
<input id="chorus-name" type="text" placeholder="Jane Doe" 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" />
</div>
<!-- Email Validation States -->
<div>
<label for="chorus-email-valid" class="mb-chorus-sm block text-sm font-medium">Email (Valid)</label>
<input id="chorus-email-valid" type="email" value="jane@chorus.services" required class="peer w-full border border-nickel-300 px-chorus-md py-chorus-sm outline-none focus:border-mulberry-950 valid:border-harmony-700 invalid:border-alert-800 dark:border-nickel-700 dark:bg-carbon-950 dark:focus:border-paper-950 dark:valid:border-harmony-500 dark:invalid:border-alert-600" />
<p class="mt-1 hidden text-xs text-alert-800 peer-invalid:block dark:text-alert-600">Please enter a valid email address.</p>
</div>
<div>
<label for="chorus-email-invalid" class="mb-chorus-sm block text-sm font-medium">Email (Invalid)</label>
<input id="chorus-email-invalid" type="email" value="not-an-email" required class="peer w-full border border-nickel-300 px-chorus-md py-chorus-sm outline-none focus:border-mulberry-950 valid:border-harmony-700 invalid:border-alert-800 dark:border-nickel-700 dark:bg-carbon-950 dark:focus:border-paper-950 dark:valid:border-harmony-500 dark:invalid:border-alert-600" />
<p class="mt-1 hidden text-xs text-alert-800 peer-invalid:block dark:text-alert-600">Invalid email format.</p>
</div>
<!-- Phone Validation -->
<div>
<label for="chorus-phone" class="mb-chorus-sm block text-sm font-medium">Phone</label>
<input id="chorus-phone" type="tel" value="+61 400 123 456" pattern="^\\+?[0-9\\s\\-]{7,15}$" class="peer w-full border border-nickel-300 px-chorus-md py-chorus-sm outline-none focus:border-mulberry-950 valid:border-harmony-700 invalid:border-alert-800 dark:border-nickel-700 dark:bg-carbon-950 dark:focus:border-paper-950 dark:valid:border-harmony-500 dark:invalid:border-alert-600" />
<p class="mt-1 hidden text-xs text-alert-800 peer-invalid:block dark:text-alert-600">Use digits, spaces or dashes.</p>
</div>
<!-- Grid Layout -->
<div class="grid grid-cols-2 gap-chorus-lg">
<div>
<label for="chorus-password" class="mb-chorus-sm block text-sm font-medium">Password</label>
<input id="chorus-password" type="password" required minlength="8" class="peer w-full border border-nickel-300 px-chorus-md py-chorus-sm outline-none focus:border-mulberry-950 invalid:border-alert-800 dark:border-nickel-700 dark:bg-carbon-950 dark:focus:border-paper-950 dark:invalid:border-alert-600" />
<p class="mt-1 hidden text-xs text-alert-800 peer-invalid:block dark:text-alert-600">Min 8 characters.</p>
</div>
<div>
<label for="chorus-number" class="mb-chorus-sm block text-sm font-medium">Number</label>
<input id="chorus-number" type="number" value="42" min="0" max="100" 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" />
</div>
</div>
<!-- Date and Color -->
<div class="grid grid-cols-2 gap-chorus-lg">
<div>
<label for="chorus-date" class="mb-chorus-sm block text-sm font-medium">Date</label>
<input id="chorus-date" type="date" class="w-full border border-nickel-300 px-chorus-md py-chorus-sm dark:border-nickel-700 dark:bg-carbon-950" />
</div>
<div>
<label for="chorus-color" class="mb-chorus-sm block text-sm font-medium">Color</label>
<input id="chorus-color" type="color" value="#0b0213" class="h-10 w-full border border-nickel-300 p-1 dark:border-nickel-700 dark:bg-carbon-950" />
</div>
</div>
<!-- Range and File -->
<div class="grid grid-cols-2 gap-chorus-lg">
<div>
<label for="chorus-range" class="mb-chorus-sm block text-sm font-medium">Range</label>
<input id="chorus-range" type="range" value="50" class="w-full accent-mulberry-950 dark:accent-paper-950" />
</div>
<div>
<label for="chorus-file" class="mb-chorus-sm block text-sm font-medium">File</label>
<input id="chorus-file" type="file" class="block w-full text-sm file:mr-4 file:border-0 file:bg-nickel-100 file:px-chorus-md file:py-chorus-sm file:font-medium file:text-carbon-950 hover:file:bg-nickel-200 dark:file:bg-nickel-900 dark:file:text-white dark:hover:file:bg-nickel-800" />
</div>
</div>
<!-- Select and Textarea -->
<div>
<label for="chorus-select" class="mb-chorus-sm block text-sm font-medium">Select Option</label>
<select id="chorus-select" class="w-full border border-nickel-300 px-chorus-md py-chorus-sm dark:border-nickel-700 dark:bg-carbon-950">
<option>CHORUS Services</option>
<option>WHOOSH Search</option>
<option>BZZZ Coordination</option>
</select>
</div>
<div>
<label for="chorus-textarea" class="mb-chorus-sm block text-sm font-medium">Message</label>
<textarea id="chorus-textarea" rows="3" class="w-full border border-nickel-300 px-chorus-md py-chorus-sm dark:border-nickel-700 dark:bg-carbon-950" placeholder="Enter your message..."></textarea>
</div>
<!-- Checkboxes and Radios -->
<div class="flex items-center gap-chorus-xl">
<label class="inline-flex items-center gap-chorus-sm">
<input type="checkbox" class="border-nickel-300 text-mulberry-950 focus:ring-mulberry-950 dark:border-nickel-700 dark:text-white dark:focus:ring-paper-950" checked />
<span>Newsletter</span>
</label>
<label class="inline-flex items-center gap-chorus-sm">
<input type="radio" name="chorus-radio" class="border-nickel-300 text-mulberry-950 focus:ring-mulberry-950 dark:border-nickel-700 dark:text-white dark:focus:ring-paper-950" checked />
<span>Individual</span>
</label>
<label class="inline-flex items-center gap-chorus-sm">
<input type="radio" name="chorus-radio" class="border-nickel-300 text-mulberry-950 focus:ring-mulberry-950 dark:border-nickel-700 dark:text-white dark:focus:ring-paper-950" />
<span>Enterprise</span>
</label>
</div>
<!-- Form Actions -->
<div class="grid grid-cols-3 gap-chorus-lg text-sm">
<button type="submit" class="bg-mulberry-950 px-chorus-lg py-chorus-sm font-medium text-paper-950 hover:opacity-90 dark:bg-paper-950 dark:text-carbon-950">Submit</button>
<button type="button" class="border border-walnut-950 px-chorus-lg py-chorus-sm hover:opacity-85 dark:border-nickel-400 dark:text-nickel-400">Cancel</button>
<button type="button" disabled class="border border-nickel-300 px-chorus-lg py-chorus-sm text-nickel-500 opacity-40 dark:border-nickel-700">Disabled</button>
</div>
</fieldset>
</form>
<!-- Form State Examples -->
<div class="space-y-chorus-xl border border-nickel-100 p-chorus-xl text-sm dark:border-nickel-900">
<div class="mb-chorus-md text-sm font-medium">Form State Examples</div>
<div class="grid gap-chorus-lg md:grid-cols-2">
<div>
<label class="mb-chorus-sm block font-medium">Readonly</label>
<input type="text" value="Readonly content" readonly class="w-full border border-nickel-200 bg-nickel-50 px-chorus-md py-chorus-sm text-carbon-600 dark:border-nickel-800 dark:bg-nickel-900 dark:text-paper-400" />
</div>
<div>
<label class="mb-chorus-sm block font-medium">Disabled</label>
<input type="text" value="Disabled field" disabled class="w-full border border-nickel-300 px-chorus-md py-chorus-sm text-nickel-500 opacity-40 dark:border-nickel-700" />
</div>
<div>
<label class="mb-chorus-sm block font-medium">Valid State</label>
<input type="email" value="valid@chorus.services" class="w-full border border-harmony-700 px-chorus-md py-chorus-sm outline-none focus:border-harmony-800 dark:border-harmony-500 dark:bg-carbon-950" />
</div>
<div>
<label class="mb-chorus-sm block font-medium">Invalid State</label>
<input type="email" value="invalid-email" class="w-full border border-alert-800 px-chorus-md py-chorus-sm outline-none focus:border-alert-900 dark:border-alert-600 dark:bg-carbon-950" />
</div>
</div>
<div>
<label class="mb-chorus-sm block font-medium">Input with Help Text</label>
<input type="text" placeholder="Enter CHORUS service name..." class="peer w-full border border-nickel-300 px-chorus-md py-chorus-sm outline-none focus:border-mulberry-950 invalid:border-alert-800 dark:border-nickel-700 dark:bg-carbon-950 dark:focus:border-paper-950 dark:invalid:border-alert-600" required />
<div class="mt-1 flex items-center justify-between">
<p class="text-xs text-carbon-500 dark:text-purple-300">Choose from CHORUS, WHOOSH, BZZZ, or SLURP.</p>
<p class="hidden text-xs text-alert-800 peer-invalid:block dark:text-alert-600">This field is required.</p>
</div>
</div>
</div>
</div>
</section>
<!-- CHORUS Tables -->
<section id="tables" class="mx-auto max-w-7xl px-chorus-lg py-chorus-xxl">
<h2 class="mb-chorus-xl text-2xl font-bold">CHORUS Tables</h2>
<p class="mb-chorus-xxl text-sm text-carbon-600 dark:text-paper-400">Ultra-minimalist table system with no border radius, clean grid structure, and CHORUS branding.</p>
<!-- Primary Data Table -->
<div class="mb-chorus-xxl">
<h3 class="mb-chorus-lg text-lg font-medium">Service Management Dashboard</h3>
<div class="overflow-x-auto border border-nickel-100 dark:border-nickel-900">
<table class="min-w-full divide-y divide-nickel-200 text-sm dark:divide-nickel-800">
<thead class="bg-nickel-50 dark:bg-nickel-950">
<tr>
<th class="px-chorus-lg py-chorus-md text-left font-medium">Service Name</th>
<th class="px-chorus-lg py-chorus-md text-left font-medium">Type</th>
<th class="px-chorus-lg py-chorus-md text-left font-medium">Status</th>
<th class="px-chorus-lg py-chorus-md text-left font-medium">Performance</th>
<th class="px-chorus-lg py-chorus-md text-left font-medium">Role</th>
<th class="px-chorus-lg py-chorus-md text-left font-medium">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-nickel-100 dark:divide-nickel-900">
<tr class="hover:bg-nickel-50 dark:hover:bg-nickel-950">
<td class="px-chorus-lg py-chorus-md">
<div class="flex items-center gap-chorus-sm">
<div class="h-2 w-2 bg-harmony-700 dark:bg-harmony-400"></div>
<span class="font-medium">CHORUS Core</span>
</div>
</td>
<td class="px-chorus-lg py-chorus-md text-carbon-600 dark:text-paper-300">Orchestration</td>
<td class="px-chorus-lg py-chorus-md">
<span class="bg-harmony-100 px-chorus-sm py-1 text-harmony-800 dark:bg-harmony-900/30 dark:text-harmony-300">Active</span>
</td>
<td class="px-chorus-lg py-chorus-md">
<div class="flex items-center gap-chorus-sm">
<div class="h-1 w-16 bg-nickel-200 dark:bg-nickel-800">
<div class="h-full w-5/6 bg-harmony-700 dark:bg-harmony-400"></div>
</div>
<span class="text-xs text-carbon-500 dark:text-purple-300">92%</span>
</div>
</td>
<td class="px-chorus-lg py-chorus-md">Primary</td>
<td class="px-chorus-lg py-chorus-md">
<button class="text-orchestration-700 hover:text-mulberry-950 dark:text-orchestration-400 dark:hover:text-paper-950">Configure</button>
</td>
</tr>
<tr class="hover:bg-nickel-50 dark:hover:bg-nickel-950">
<td class="px-chorus-lg py-chorus-md">
<div class="flex items-center gap-chorus-sm">
<div class="h-2 w-2 bg-resonance-700 dark:bg-resonance-400"></div>
<span class="font-medium">WHOOSH Search</span>
</div>
</td>
<td class="px-chorus-lg py-chorus-md text-carbon-600 dark:text-paper-300">Search Engine</td>
<td class="px-chorus-lg py-chorus-md">
<span class="bg-resonance-100 px-chorus-sm py-1 text-resonance-800 dark:bg-resonance-900/30 dark:text-resonance-300">Processing</span>
</td>
<td class="px-chorus-lg py-chorus-md">
<div class="flex items-center gap-chorus-sm">
<div class="h-1 w-16 bg-nickel-200 dark:bg-nickel-800">
<div class="h-full w-3/4 bg-resonance-700 dark:bg-resonance-400"></div>
</div>
<span class="text-xs text-carbon-500 dark:text-purple-300">78%</span>
</div>
</td>
<td class="px-chorus-lg py-chorus-md">Secondary</td>
<td class="px-chorus-lg py-chorus-md">
<button class="text-orchestration-700 hover:text-mulberry-950 dark:text-orchestration-400 dark:hover:text-paper-950">Monitor</button>
</td>
</tr>
<tr class="hover:bg-nickel-50 dark:hover:bg-nickel-950">
<td class="px-chorus-lg py-chorus-md">
<div class="flex items-center gap-chorus-sm">
<div class="h-2 w-2 bg-orchestration-700 dark:bg-orchestration-400"></div>
<span class="font-medium">BZZZ Coordination</span>
</div>
</td>
<td class="px-chorus-lg py-chorus-md text-carbon-600 dark:text-paper-300">Task Manager</td>
<td class="px-chorus-lg py-chorus-md">
<span class="bg-orchestration-100 px-chorus-sm py-1 text-orchestration-800 dark:bg-orchestration-900/30 dark:text-orchestration-300">Stable</span>
</td>
<td class="px-chorus-lg py-chorus-md">
<div class="flex items-center gap-chorus-sm">
<div class="h-1 w-16 bg-nickel-200 dark:bg-nickel-800">
<div class="h-full w-full bg-orchestration-700 dark:bg-orchestration-400"></div>
</div>
<span class="text-xs text-carbon-500 dark:text-purple-300">97%</span>
</div>
</td>
<td class="px-chorus-lg py-chorus-md">Core</td>
<td class="px-chorus-lg py-chorus-md">
<button class="text-orchestration-700 hover:text-mulberry-950 dark:text-orchestration-400 dark:hover:text-paper-950">Optimize</button>
</td>
</tr>
<tr class="hover:bg-nickel-50 dark:hover:bg-nickel-950">
<td class="px-chorus-lg py-chorus-md">
<div class="flex items-center gap-chorus-sm">
<div class="h-2 w-2 bg-alert-800 dark:bg-alert-600"></div>
<span class="font-medium">SLURP Analytics</span>
</div>
</td>
<td class="px-chorus-lg py-chorus-md text-carbon-600 dark:text-paper-300">Data Processor</td>
<td class="px-chorus-lg py-chorus-md">
<span class="bg-alert-100 px-chorus-sm py-1 text-alert-800 dark:bg-alert-900/30 dark:text-alert-300">Maintenance</span>
</td>
<td class="px-chorus-lg py-chorus-md">
<div class="flex items-center gap-chorus-sm">
<div class="h-1 w-16 bg-nickel-200 dark:bg-nickel-800">
<div class="h-full w-1/3 bg-alert-800 dark:bg-alert-600"></div>
</div>
<span class="text-xs text-carbon-500 dark:text-purple-300">34%</span>
</div>
</td>
<td class="px-chorus-lg py-chorus-md">Utility</td>
<td class="px-chorus-lg py-chorus-md">
<button class="text-alert-800 hover:opacity-80 dark:text-alert-600">Repair</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Secondary Information Table -->
<div class="mb-chorus-xxl">
<h3 class="mb-chorus-lg text-lg font-medium">API Usage Metrics</h3>
<div class="overflow-x-auto border border-nickel-100 dark:border-nickel-900">
<table class="min-w-full text-sm">
<thead class="border-b border-nickel-200 dark:border-nickel-800">
<tr>
<th class="px-chorus-lg py-chorus-md text-left font-medium">Endpoint</th>
<th class="px-chorus-lg py-chorus-md text-left font-medium">Requests/Hour</th>
<th class="px-chorus-lg py-chorus-md text-left font-medium">Avg Response</th>
<th class="px-chorus-lg py-chorus-md text-left font-medium">Success Rate</th>
<th class="px-chorus-lg py-chorus-md text-left font-medium">Trend</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-nickel-100 hover:bg-nickel-25 dark:border-nickel-900 dark:hover:bg-nickel-975">
<td class="px-chorus-lg py-chorus-md">
<code class="font-mono text-xs bg-nickel-100 px-1 dark:bg-nickel-900">/api/chorus/orchestrate</code>
</td>
<td class="px-chorus-lg py-chorus-md font-mono text-harmony-700 dark:text-harmony-400">1,247</td>
<td class="px-chorus-lg py-chorus-md font-mono text-orchestration-700 dark:text-orchestration-400">89ms</td>
<td class="px-chorus-lg py-chorus-md font-mono text-harmony-700 dark:text-harmony-400">99.7%</td>
<td class="px-chorus-lg py-chorus-md">
<div class="flex items-center gap-1">
<div class="h-1 w-1 bg-harmony-700 dark:bg-harmony-400"></div>
<div class="h-2 w-1 bg-harmony-700 dark:bg-harmony-400"></div>
<div class="h-3 w-1 bg-harmony-700 dark:bg-harmony-400"></div>
<div class="h-4 w-1 bg-harmony-700 dark:bg-harmony-400"></div>
</div>
</td>
</tr>
<tr class="border-b border-nickel-100 hover:bg-nickel-25 dark:border-nickel-900 dark:hover:bg-nickel-975">
<td class="px-chorus-lg py-chorus-md">
<code class="font-mono text-xs bg-nickel-100 px-1 dark:bg-nickel-900">/api/whoosh/search</code>
</td>
<td class="px-chorus-lg py-chorus-md font-mono text-resonance-700 dark:text-resonance-400">892</td>
<td class="px-chorus-lg py-chorus-md font-mono text-orchestration-700 dark:text-orchestration-400">156ms</td>
<td class="px-chorus-lg py-chorus-md font-mono text-resonance-700 dark:text-resonance-400">97.2%</td>
<td class="px-chorus-lg py-chorus-md">
<div class="flex items-center gap-1">
<div class="h-1 w-1 bg-resonance-700 dark:bg-resonance-400"></div>
<div class="h-2 w-1 bg-resonance-700 dark:bg-resonance-400"></div>
<div class="h-1 w-1 bg-resonance-700 dark:bg-resonance-400"></div>
<div class="h-2 w-1 bg-resonance-700 dark:bg-resonance-400"></div>
</div>
</td>
</tr>
<tr class="border-b border-nickel-100 hover:bg-nickel-25 dark:border-nickel-900 dark:hover:bg-nickel-975">
<td class="px-chorus-lg py-chorus-md">
<code class="font-mono text-xs bg-nickel-100 px-1 dark:bg-nickel-900">/api/bzzz/coordinate</code>
</td>
<td class="px-chorus-lg py-chorus-md font-mono text-orchestration-700 dark:text-orchestration-400">634</td>
<td class="px-chorus-lg py-chorus-md font-mono text-orchestration-700 dark:text-orchestration-400">73ms</td>
<td class="px-chorus-lg py-chorus-md font-mono text-harmony-700 dark:text-harmony-400">99.9%</td>
<td class="px-chorus-lg py-chorus-md">
<div class="flex items-center gap-1">
<div class="h-2 w-1 bg-orchestration-700 dark:bg-orchestration-400"></div>
<div class="h-3 w-1 bg-orchestration-700 dark:bg-orchestration-400"></div>
<div class="h-4 w-1 bg-orchestration-700 dark:bg-orchestration-400"></div>
<div class="h-3 w-1 bg-orchestration-700 dark:bg-orchestration-400"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Compact Summary Table -->
<div>
<h3 class="mb-chorus-lg text-lg font-medium">System Summary</h3>
<div class="grid gap-chorus-lg md:grid-cols-2 lg:grid-cols-4">
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<div class="mb-chorus-sm text-xs font-medium uppercase tracking-wide text-carbon-500 dark:text-purple-300">Total Services</div>
<div class="text-2xl font-bold text-harmony-700 dark:text-harmony-400">4</div>
<div class="text-xs text-carbon-600 dark:text-paper-400">Active orchestration</div>
</div>
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<div class="mb-chorus-sm text-xs font-medium uppercase tracking-wide text-carbon-500 dark:text-purple-300">Avg Performance</div>
<div class="text-2xl font-bold text-orchestration-700 dark:text-orchestration-400">91.5%</div>
<div class="text-xs text-carbon-600 dark:text-paper-400">System efficiency</div>
</div>
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<div class="mb-chorus-sm text-xs font-medium uppercase tracking-wide text-carbon-500 dark:text-purple-300">API Calls/Hour</div>
<div class="text-2xl font-bold text-resonance-700 dark:text-resonance-400">2,773</div>
<div class="text-xs text-carbon-600 dark:text-paper-400">Peak performance</div>
</div>
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<div class="mb-chorus-sm text-xs font-medium uppercase tracking-wide text-carbon-500 dark:text-purple-300">Uptime</div>
<div class="text-2xl font-bold text-harmony-700 dark:text-harmony-400">99.8%</div>
<div class="text-xs text-carbon-600 dark:text-paper-400">Last 30 days</div>
</div>
</div>
</div>
</section>
<!-- CHORUS Media & Embeds -->
<section id="media" class="mx-auto max-w-7xl px-chorus-lg py-chorus-xxl">
<h2 class="mb-chorus-xl text-2xl font-bold">CHORUS Media & Embeds</h2>
<p class="mb-chorus-xxl text-sm text-carbon-600 dark:text-paper-400">Ultra-minimalist media presentation with no border radius and clean CHORUS aesthetic.</p>
<div class="grid gap-chorus-xxl md:grid-cols-2">
<!-- Image with Caption -->
<figure class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<div class="mb-chorus-md h-48 w-full bg-nickel-100 dark:bg-nickel-900 flex items-center justify-center">
<div class="text-center">
<div class="mb-chorus-sm h-16 w-16 mx-auto bg-mulberry-950 dark:bg-paper-950 flex items-center justify-center">
<svg class="h-8 w-8 text-paper-950 dark:text-carbon-950" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
<circle cx="9" cy="9" r="2"/>
<path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
</svg>
</div>
<p class="text-xs text-carbon-500 dark:text-purple-300">CHORUS Brand Visual</p>
</div>
</div>
<figcaption class="text-sm text-carbon-600 dark:text-paper-300">Ultra-minimalist image container showcasing CHORUS visual identity with geometric precision and brand consistency.</figcaption>
</figure>
<!-- Video & Audio -->
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<div class="mb-chorus-md aspect-video w-full bg-nickel-100 dark:bg-nickel-900 flex items-center justify-center">
<div class="text-center">
<div class="mb-chorus-sm h-16 w-16 mx-auto bg-orchestration-700 dark:bg-orchestration-400 flex items-center justify-center">
<svg class="h-8 w-8 text-white dark:text-carbon-950" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<polygon points="5,3 19,12 5,21"/>
</svg>
</div>
<p class="text-xs text-carbon-500 dark:text-purple-300">CHORUS Demo Video</p>
</div>
</div>
<div class="h-8 w-full bg-nickel-100 dark:bg-nickel-900 flex items-center justify-center">
<div class="flex items-center gap-chorus-sm">
<div class="h-3 w-3 bg-harmony-700 dark:bg-harmony-400"></div>
<div class="h-1 w-32 bg-nickel-200 dark:bg-nickel-800">
<div class="h-full w-1/3 bg-orchestration-700 dark:bg-orchestration-400"></div>
</div>
<span class="text-xs text-carbon-500 dark:text-purple-300 font-mono">2:47</span>
</div>
</div>
</div>
<!-- Canvas & SVG -->
<div class="border border-nickel-100 p-chorus-lg dark:border-nickel-900">
<canvas id="chorusCanvas" width="400" height="120" class="mb-chorus-md w-full bg-nickel-50 dark:bg-nickel-950"></canvas>
<svg viewBox="0 0 120 40" class="h-24 w-full">
<!-- CHORUS Brand Colors in SVG -->
<rect x="0" y="10" width="20" height="20" class="fill-mulberry-950"></rect>
<rect x="25" y="10" width="20" height="20" class="fill-walnut-950"></rect>
<rect x="50" y="10" width="20" height="20" class="fill-orchestration-700"></rect>
<rect x="75" y="10" width="20" height="20" class="fill-harmony-700"></rect>
<rect x="100" y="10" width="20" height="20" class="fill-nickel-400"></rect>
</svg>
<p class="mt-chorus-sm text-xs text-carbon-500 dark:text-purple-300">CHORUS brand color palette visualization</p>
</div>
<!-- Embedded Content -->
<div class="border border-nickel-100 p-0 overflow-hidden dark:border-nickel-900">
<div class="bg-nickel-50 px-chorus-lg py-chorus-md border-b border-nickel-200 dark:bg-nickel-950 dark:border-nickel-800">
<div class="flex items-center gap-chorus-sm">
<div class="h-4 w-4 bg-harmony-700 dark:bg-harmony-400"></div>
<span class="text-sm font-medium">CHORUS Documentation</span>
</div>
</div>
<div class="h-48 bg-white dark:bg-carbon-950 flex items-center justify-center">
<div class="text-center">
<div class="mb-chorus-sm h-12 w-12 mx-auto bg-orchestration-700 dark:bg-orchestration-400 flex items-center justify-center">
<svg class="h-6 w-6 text-white dark:text-carbon-950" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14,2 14,8 20,8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<polyline points="10,9 9,9 8,9"/>
</svg>
</div>
<p class="text-xs text-carbon-500 dark:text-purple-300">API Reference</p>
<p class="text-xs text-carbon-400 dark:text-paper-400">chorus.services/docs</p>
</div>
</div>
</div>
</div>
<!-- Media Guidelines -->
<div class="mt-chorus-xxl border border-nickel-100 p-chorus-xl dark:border-nickel-900">
<h3 class="mb-chorus-lg text-lg font-medium">CHORUS Media Guidelines</h3>
<div class="grid gap-chorus-lg md:grid-cols-3">
<div>
<h4 class="mb-chorus-sm text-sm font-medium">Visual Identity</h4>
<ul class="space-y-1 text-sm text-carbon-600 dark:text-paper-400">
<li>• No border radius on any media containers</li>
<li>• Geometric precision in all layouts</li>
<li>• Brand colors for accents only</li>
<li>• Ultra-minimalist placeholder designs</li>
</ul>
</div>
<div>
<h4 class="mb-chorus-sm text-sm font-medium">Technical Requirements</h4>
<ul class="space-y-1 text-sm text-carbon-600 dark:text-paper-400">
<li>• SVG preferred for scalable graphics</li>
<li>• Canvas for dynamic visualizations</li>
<li>• Nickel backgrounds for media containers</li>
<li>• Monospace fonts for technical data</li>
</ul>
</div>
<div>
<h4 class="mb-chorus-sm text-sm font-medium">Brand Consistency</h4>
<ul class="space-y-1 text-sm text-carbon-600 dark:text-paper-400">
<li>• CHORUS color palette integration</li>
<li>• Service-specific iconography</li>
<li>• Clean, purposeful presentations</li>
<li>• Sophisticated orchestration theme</li>
</ul>
</div>
</div>
</div>
</section>
<!-- CHORUS Miscellaneous Elements -->
<section id="misc" class="mx-auto max-w-7xl px-chorus-lg py-chorus-xxl">
<h2 class="mb-chorus-xl text-2xl font-bold">CHORUS Miscellaneous Elements</h2>
<p class="mb-chorus-xxl text-sm text-carbon-600 dark:text-paper-400">Ultra-minimalist approach to common HTML elements with no border radius and clean CHORUS styling.</p>
<div class="grid gap-chorus-xxl md:grid-cols-2">
<!-- Interactive Elements -->
<div class="space-y-chorus-xl border border-nickel-100 p-chorus-xl text-sm dark:border-nickel-900">
<h3 class="mb-chorus-lg text-lg font-medium">Interactive Elements</h3>
<!-- Details & Summary -->
<details class="border border-nickel-200 p-chorus-md dark:border-nickel-800">
<summary class="cursor-pointer font-medium">CHORUS Services Details</summary>
<p class="mt-chorus-sm text-carbon-600 dark:text-paper-300">Expandable content areas for technical documentation, API details, and feature descriptions in the CHORUS ecosystem.</p>
</details>
<!-- Progress Bars - Corporate Colors -->
<div class="space-y-chorus-md">
<div>
<label class="mb-chorus-sm block font-medium">CHORUS Progress (Harmony Green)</label>
<progress max="100" value="73" class="progress-harmony h-2 w-full"></progress>
<p class="mt-1 text-xs text-carbon-500 dark:text-purple-300">CHORUS orchestration: 73% complete</p>
</div>
<div>
<label class="mb-chorus-sm block font-medium">Processing (Orchestration Blue)</label>
<progress max="100" value="89" class="progress-orchestration h-2 w-full"></progress>
<p class="mt-1 text-xs text-carbon-500 dark:text-purple-300">Data processing: 89% complete</p>
</div>
<div>
<label class="mb-chorus-sm block font-medium">Warning State (Resonance Amber)</label>
<progress max="100" value="45" class="progress-resonance h-2 w-full"></progress>
<p class="mt-1 text-xs text-carbon-500 dark:text-purple-300">System maintenance: 45% complete</p>
</div>
<div>
<label class="mb-chorus-sm block font-medium">Critical State (Alert Coral)</label>
<progress max="100" value="12" class="progress-alert h-2 w-full"></progress>
<p class="mt-1 text-xs text-carbon-500 dark:text-purple-300">Error recovery: 12% complete</p>
</div>
<div>
<label class="mb-chorus-sm block font-medium">Primary Action (Mulberry)</label>
<progress max="100" value="95" class="progress-mulberry h-2 w-full"></progress>
<p class="mt-1 text-xs text-carbon-500 dark:text-purple-300">Deployment ready: 95% complete</p>
</div>
</div>
<!-- Meter -->
<div>
<label class="mb-chorus-sm block font-medium">Performance Meter (Harmony Green)</label>
<meter min="0" max="100" value="89" class="meter-harmony w-full">89</meter>
<p class="mt-1 text-xs text-carbon-500 dark:text-purple-300">System efficiency: 89/100</p>
</div>
<!-- Address -->
<div>
<p class="font-medium">Contact Information:</p>
<address class="not-italic text-carbon-600 dark:text-paper-300">
CHORUS Services<br>
Enterprise AI Orchestration<br>
support@chorus.services
</address>
</div>
<!-- Technical Elements -->
<div class="space-y-chorus-sm">
<p><strong>Variable:</strong> <var class="font-mono text-orchestration-700 dark:text-orchestration-400">chorusConfig</var></p>
<p><strong>Sample Output:</strong> <samp class="font-mono bg-nickel-100 px-1 dark:bg-nickel-900">CHORUS initialized successfully</samp></p>
<p><strong>Calculation Result:</strong> <output class="font-mono text-harmony-700 dark:text-harmony-400">42 agents orchestrated</output></p>
</div>
</div>
<!-- Navigation Elements -->
<div class="space-y-chorus-xl border border-nickel-100 p-chorus-xl text-sm dark:border-nickel-900">
<h3 class="mb-chorus-lg text-lg font-medium">Navigation Elements</h3>
<!-- Pagination -->
<div>
<h4 class="mb-chorus-sm font-medium">Pagination</h4>
<nav aria-label="Pagination" class="flex items-center justify-between">
<button class="border border-nickel-300 px-chorus-md py-chorus-sm hover:opacity-80 dark:border-nickel-700">Previous</button>
<ul class="flex items-center gap-1">
<li><a class="px-chorus-sm py-1 hover:text-mulberry-950 dark:hover:text-paper-950" href="#">1</a></li>
<li><a class="bg-mulberry-950 px-chorus-sm py-1 text-paper-950 dark:bg-paper-950 dark:text-carbon-950" href="#">2</a></li>
<li><a class="px-chorus-sm py-1 hover:text-mulberry-950 dark:hover:text-paper-950" href="#">3</a></li>
</ul>
<button class="border border-nickel-300 px-chorus-md py-chorus-sm hover:opacity-80 dark:border-nickel-700">Next</button>
</nav>
</div>
<!-- Breadcrumbs -->
<div class="border border-nickel-200 p-chorus-md dark:border-nickel-800">
<h4 class="mb-chorus-sm font-medium">Breadcrumbs</h4>
<nav aria-label="Breadcrumbs">
<ol class="flex flex-wrap items-center gap-1 text-sm">
<li><a href="#" class="hover:text-mulberry-950 dark:hover:text-paper-950">CHORUS</a></li>
<li class="text-nickel-400">/</li>
<li><a href="#" class="hover:text-mulberry-950 dark:hover:text-paper-950">Services</a></li>
<li class="text-nickel-400">/</li>
<li><a href="#" class="hover:text-mulberry-950 dark:hover:text-paper-950">Orchestration</a></li>
<li class="text-nickel-400">/</li>
<li aria-current="page" class="text-nickel-500 dark:text-nickel-400">Dashboard</li>
</ol>
</nav>
</div>
<!-- Tabs -->
<div class="border border-nickel-200 p-chorus-md dark:border-nickel-800">
<h4 class="mb-chorus-sm font-medium">Tab Navigation</h4>
<div class="flex gap-chorus-sm">
<button class="bg-mulberry-950 px-chorus-md py-chorus-sm text-paper-950 dark:bg-paper-950 dark:text-carbon-950">CHORUS</button>
<button class="px-chorus-md py-chorus-sm hover:text-mulberry-950 dark:hover:text-paper-950">WHOOSH</button>
<button class="px-chorus-md py-chorus-sm hover:text-mulberry-950 dark:hover:text-paper-950">BZZZ</button>
<button class="px-chorus-md py-chorus-sm hover:text-mulberry-950 dark:hover:text-paper-950">SLURP</button>
</div>
</div>
<!-- Status Indicators -->
<div>
<h4 class="mb-chorus-sm font-medium">System Status</h4>
<div class="space-y-chorus-sm">
<div class="flex items-center gap-chorus-sm">
<div class="h-2 w-2 bg-harmony-700 dark:bg-harmony-400"></div>
<span>CHORUS Online</span>
</div>
<div class="flex items-center gap-chorus-sm">
<div class="h-2 w-2 bg-resonance-700 dark:bg-resonance-400"></div>
<span>WHOOSH Processing</span>
</div>
<div class="flex items-center gap-chorus-sm">
<div class="h-2 w-2 bg-alert-800 dark:bg-alert-600"></div>
<span>BZZZ Maintenance</span>
</div>
</div>
</div>
<!-- Tags/Labels -->
<div>
<h4 class="mb-chorus-sm font-medium">Service Tags</h4>
<div class="flex flex-wrap gap-chorus-sm">
<span class="bg-nickel-100 px-chorus-sm py-1 text-xs text-carbon-700 dark:bg-nickel-900 dark:text-paper-300">orchestration</span>
<span class="bg-nickel-100 px-chorus-sm py-1 text-xs text-carbon-700 dark:bg-nickel-900 dark:text-paper-300">ai-services</span>
<span class="bg-nickel-100 px-chorus-sm py-1 text-xs text-carbon-700 dark:bg-nickel-900 dark:text-paper-300">enterprise</span>
<span class="bg-nickel-100 px-chorus-sm py-1 text-xs text-carbon-700 dark:bg-nickel-900 dark:text-paper-300">distributed</span>
</div>
</div>
</div>
</div>
</section>
<!-- CHORUS Footer -->
<footer id="footer" class="border-t border-nickel-200 bg-paper-950 py-chorus-xxl dark:border-carbon-800 dark:bg-carbon-950">
<div class="mx-auto max-w-7xl px-chorus-lg">
<div class="grid gap-chorus-xl md:grid-cols-3">
<div>
<div class="mb-chorus-md flex items-center gap-chorus-sm font-medium">
<div class="flex h-6 w-6 items-center justify-center bg-mulberry-950 text-paper-950 dark:bg-paper-950 dark:text-carbon-950">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</div>
<span class="font-logo font-thin tracking-wide">CHORUS Services</span>
</div>
<p class="text-sm text-carbon-600 dark:text-paper-400">Enterprise-grade distributed AI orchestration without hallucinations.</p>
</div>
<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="text-sm">
<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-xs text-carbon-500 dark:text-purple-300">Updates on CHORUS Services and AI orchestration.</p>
</div>
</div>
<div class="mt-chorus-xl border-t border-nickel-200 pt-chorus-lg dark:border-carbon-800">
<p class="text-center text-xs text-carbon-500 dark:text-gray-400">© 2025 CHORUS Services. Sophisticated orchestration for enterprise AI.</p>
</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-100 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">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 12h18"/><path d="M3 6h18"/><path d="M3 18h18"/></svg>
<span class="text-sm font-medium">CHORUS Controls</span>
</div>
<div class="flex items-center gap-chorus-sm text-sm">
<button class="border border-walnut-950 px-chorus-md py-chorus-sm hover:opacity-85 dark:border-nickel-400 dark:text-nickel-400">Cancel</button>
<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">Apply Changes</button>
</div>
</div>
<!-- CHORUS Modal using dialog element -->
<dialog id="demoDialog" class="backdrop:bg-mulberry-950/50 backdrop:dark:bg-mulberry-950/70 p-0">
<form method="dialog" class="w-[min(560px,92vw)] border border-nickel-200 bg-white/90 p-chorus-xl text-carbon-950 backdrop-blur dark:border-mulberry-800 dark:bg-mulberry-950/90 dark:text-white">
<header class="mb-chorus-lg flex items-center justify-between">
<h3 class="font-logo text-xl font-thin tracking-wide">CHORUS Modal</h3>
<button value="cancel" aria-label="Close" class="p-chorus-sm hover:opacity-80">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 6 6 18M6 6l12 12"/></svg>
</button>
</header>
<div class="mb-chorus-lg">
<p class="mb-chorus-md text-sm text-carbon-600 dark:text-paper-300">This modal demonstrates CHORUS ultra-minimalist design principles using the native <code class="bg-nickel-100 px-1 font-mono text-xs dark:bg-nickel-900">&lt;dialog&gt;</code> element.</p>
<div class="border border-nickel-200 p-chorus-md dark:border-nickel-800">
<h4 class="mb-chorus-sm text-sm font-medium">Modal Features:</h4>
<ul class="space-y-1 text-sm text-carbon-600 dark:text-paper-400">
<li>• No border radius - geometric precision</li>
<li>• Mulberry-based backdrop in dark mode</li>
<li>• CHORUS brand typography and spacing</li>
<li>• Ultra-minimalist button styling</li>
<li>• Accessible focus management</li>
</ul>
</div>
<div class="mt-chorus-md border border-nickel-200 p-chorus-md dark:border-nickel-800">
<label for="modal-input" class="mb-chorus-sm block text-sm font-medium">Service Configuration</label>
<input
id="modal-input"
type="text"
placeholder="Enter CHORUS service name..."
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-mulberry-950 dark:focus:border-paper-950"
/>
<p class="mt-1 text-xs text-carbon-500 dark:text-purple-300">Configure CHORUS, WHOOSH, BZZZ, or SLURP services</p>
</div>
</div>
<div class="flex justify-end gap-chorus-md text-sm">
<button value="cancel" class="border border-walnut-950 px-chorus-lg py-chorus-sm hover:opacity-85 dark:border-nickel-400 dark:text-nickel-400">Cancel</button>
<button value="confirm" class="bg-mulberry-950 px-chorus-lg py-chorus-sm text-paper-950 hover:opacity-90 dark:bg-paper-950 dark:text-carbon-950">Confirm Changes</button>
</div>
</form>
</dialog>
<script>
// Theme toggle (defaults to dark mode)
const toggle = document.getElementById('toggleTheme');
toggle?.addEventListener('click', () => {
const root = document.documentElement;
const isDark = root.classList.toggle('dark');
root.setAttribute('data-theme', isDark ? 'dark' : 'light');
});
// Modal open
const dialog = document.getElementById('demoDialog');
document.getElementById('openModal')?.addEventListener('click', () => dialog.showModal());
// Canvas demo draw
const ctx = document.getElementById('demoCanvas')?.getContext('2d');
if (ctx) {
const w = ctx.canvas.width; const h = ctx.canvas.height;
ctx.fillStyle = '#E5E7EB'; ctx.fillRect(0,0,w,h);
ctx.fillStyle = '#6366F1'; ctx.fillRect(10, 20, w/3, 40);
ctx.fillStyle = '#10B981'; ctx.fillRect(20+w/3, 20, w/3, 40);
ctx.fillStyle = '#F43F5E'; ctx.fillRect(30+2*w/3, 20, w/3-40, 40);
ctx.font = '14px Inter, system-ui, sans-serif'; ctx.fillStyle = '#111827'; ctx.fillText('Canvas', 10, 90);
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink