426 lines
30 KiB
TypeScript
426 lines
30 KiB
TypeScript
import { div } from "three/tsl"
|
|
import ScrollReveal from '@/components/ScrollReveal';
|
|
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
|
|
|
|
export default function IconographyPage() {
|
|
return (
|
|
<div className="py-chorus-xxl">
|
|
<section>
|
|
<div className="max-w-5xl mx-auto px-chorus-lg pt-chorus-xxl">
|
|
<ScrollReveal delay={200} duration={600} direction="up">
|
|
<div className="mb-chorus-xxl">
|
|
<h1 className="text-h2 mb-chorus-lg">Iconography System</h1>
|
|
|
|
<div className="mb-chorus-lg">
|
|
<h2 className="text-h3 mb-chorus-md">Philosophy</h2>
|
|
<p className="mb-chorus-md">
|
|
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 className="grid gap-chorus-md md:grid-cols-3 mt-chorus-lg">
|
|
<ScrollReveal delay={300} duration={600} direction="up">
|
|
<div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
|
|
<h4 className="text-h4 mb-chorus-sm">Clarity & Recognition</h4>
|
|
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Icons communicate instantly without language barriers</p>
|
|
</div>
|
|
</ScrollReveal>
|
|
<ScrollReveal delay={400} duration={600} direction="up">
|
|
<div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
|
|
<h4 className="text-h4 mb-chorus-sm">Theme Adaptive</h4>
|
|
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Black and white variants ensure perfect contrast in all modes</p>
|
|
</div>
|
|
</ScrollReveal>
|
|
<ScrollReveal delay={500} duration={600} direction="up">
|
|
<div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
|
|
<h4 className="text-h4 mb-chorus-sm">Consistent Scale</h4>
|
|
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Standardized sizing maintains visual harmony</p>
|
|
</div>
|
|
</ScrollReveal>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</ScrollReveal>
|
|
{/* Icon Categories */}
|
|
|
|
<section className="mb-chorus-xxl">
|
|
<h2 className="text-h3 mb-chorus-md">Icon Categories</h2>
|
|
<p className="mb-chorus-md">
|
|
The Coolicons library organizes icons into logical categories, each serving specific interface functions while maintaining design consistency.
|
|
</p>
|
|
|
|
<div className="space-y-chorus-lg">
|
|
<ScrollReveal delay={500} duration={600} direction="up">
|
|
{/* Interface Icons */}
|
|
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
|
|
<h4 className="text-h4 mb-chorus-md">Interface & Navigation</h4>
|
|
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Core UI elements for user interaction and navigation</p>
|
|
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search_Magnifying_Glass.png" alt="Search" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search_Magnifying_Glass.png" alt="Search" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Search</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Settings" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Settings" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Settings</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Filter.png" alt="Filter" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Filter.png" alt="Filter" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Filter</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png" alt="Check" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Check.png" alt="Check" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Check</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/External_Link.png" alt="External Link" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/External_Link.png" alt="External Link" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Link</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Heart" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Heart_01.png" alt="Heart" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Heart</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="Star" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="Star" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Star</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Trash_Full.png" alt="Trash" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Trash_Full.png" alt="Trash" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Delete</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal delay={500} duration={600} direction="up">
|
|
{/* Navigation Icons */}
|
|
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
|
|
<h4 className="text-h4 mb-chorus-md">Navigation & Direction</h4>
|
|
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Directional indicators and navigation controls</p>
|
|
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="Home" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="Home" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Home</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Left_MD.png" alt="Arrow Left" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Left_MD.png" alt="Arrow Left" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Left</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Right_MD.png" alt="Arrow Right" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Right_MD.png" alt="Arrow Right" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Right</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Up_MD.png" alt="Arrow Up" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Up_MD.png" alt="Arrow Up" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Up</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Down_MD.png" alt="Arrow Down" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Down_MD.png" alt="Arrow Down" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Down</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/Map_Pin.png" alt="Map Pin" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/Map_Pin.png" alt="Map Pin" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Location</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/Globe.png" alt="Globe" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/Globe.png" alt="Globe" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Globe</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Menu/Hamburger_LG.png" alt="Menu" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Menu/Hamburger_LG.png" alt="Menu" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Menu</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
<ScrollReveal delay={500} duration={600} direction="up">
|
|
{/* File & System Icons */}
|
|
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
|
|
<h4 className="text-h4 mb-chorus-md">File & System Operations</h4>
|
|
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">File management and system-level actions</p>
|
|
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Document.png" alt="Document" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Document.png" alt="Document" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Document</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="Code File" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="Code File" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Code</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Folder.png" alt="Folder" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Folder.png" alt="Folder" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Folder</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Download_Package.png" alt="Download" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Download_Package.png" alt="Download" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Download</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Cloud_Upload.png" alt="Upload" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Cloud_Upload.png" alt="Upload" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Upload</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/System/Save.png" alt="Save" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/System/Save.png" alt="Save" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Save</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Edit/Copy.png" alt="Copy" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Edit/Copy.png" alt="Copy" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Copy</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Archive.png" alt="Archive" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Archive.png" alt="Archive" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Archive</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
<ScrollReveal delay={500} duration={600} direction="up">
|
|
{/* Communication Icons */}
|
|
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
|
|
<h4 className="text-h4 mb-chorus-md">Communication & Social</h4>
|
|
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Messaging, notifications, and social interaction</p>
|
|
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Mail.png" alt="Mail" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Mail.png" alt="Mail" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Mail</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="Chat" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="Chat" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Chat</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Bell.png" alt="Notification" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Bell.png" alt="Notification" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Notify</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Phone.png" alt="Phone" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Phone.png" alt="Phone" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Phone</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Share_iOS_Export.png" alt="Share" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Share_iOS_Export.png" alt="Share" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Share</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/User/User_01.png" alt="User" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/User/User_01.png" alt="User" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">User</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/User/Users_Group.png" alt="Team" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/User/Users_Group.png" alt="Team" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Team</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Paper_Plane.png" alt="Send" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Paper_Plane.png" alt="Send" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Send</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
<ScrollReveal delay={500} duration={600} direction="up">
|
|
{/* Status & Warning Icons */}
|
|
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
|
|
<h4 className="text-h4 mb-chorus-md">Status & Feedback</h4>
|
|
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Status indicators, warnings, and user feedback</p>
|
|
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Circle_Check.png" alt="Success" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Circle_Check.png" alt="Success" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Success</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Circle_Warning.png" alt="Warning" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Circle_Warning.png" alt="Warning" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Warning</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Stop_Sign.png" alt="Error" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Stop_Sign.png" alt="Error" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Error</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Info.png" alt="Info" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Info.png" alt="Info" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Info</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Help.png" alt="Help" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Help.png" alt="Help" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Help</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Loading.png" alt="Loading" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Loading.png" alt="Loading" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Loading</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock.png" alt="Secure" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock.png" alt="Secure" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Secure</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock_Open.png" alt="Unlock" className="w-8 h-8 dark:hidden" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock_Open.png" alt="Unlock" className="w-8 h-8 hidden dark:block" />
|
|
<span className="text-xs text-center">Unlock</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
</div>
|
|
</section>
|
|
|
|
<ScrollReveal delay={200} duration={600} direction="up">
|
|
{/* Usage Guidelines */}
|
|
<section className="mb-chorus-xxl">
|
|
<h2 className="text-h3 mb-chorus-md">Usage Guidelines</h2>
|
|
|
|
<DoDontGrid>
|
|
<DoSection>
|
|
<DoItemCard title="Use Theme Variants">
|
|
<p className="text-sm mb-chorus-sm">Always provide both black and white variants for proper contrast in light and dark themes.</p>
|
|
<div className="flex gap-chorus-sm items-center">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Black Settings" className="w-6 h-6" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="White Settings" className="w-6 h-6 bg-carbon-900 p-1" />
|
|
<span className="text-sm text-carbon-600 dark:text-mulberry-300">Black & White variants</span>
|
|
</div>
|
|
</DoItemCard>
|
|
<DoItemCard title="Standard Sizes">
|
|
<p className="text-sm mb-chorus-sm">Use consistent sizing: 16px, 20px, 24px, or 32px for different interface contexts.</p>
|
|
<div className="flex gap-chorus-sm items-center">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="16px" className="w-4 h-4" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="20px" className="w-5 h-5" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="24px" className="w-6 h-6" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="32px" className="w-8 h-8" />
|
|
</div>
|
|
</DoItemCard>
|
|
<DoItemCard title="Semantic Meaning">
|
|
<p className="text-sm">Choose icons that clearly represent their function and maintain consistency across similar actions.</p>
|
|
</DoItemCard>
|
|
</DoSection>
|
|
<DontSection>
|
|
<DontItemCard title="Mix Icon Styles">
|
|
<p className="text-sm mb-chorus-sm">Avoid mixing Coolicons with other icon libraries as this breaks visual consistency.</p>
|
|
<div className="flex gap-chorus-sm items-center opacity-75">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Coolicon" className="w-6 h-6" />
|
|
<span className="text-sm">+</span>
|
|
<div className="w-6 h-6 border-2 border-carbon-400 flex items-center justify-center text-xs">?</div>
|
|
<span className="text-sm text-coral-700 dark:text-coral-300">Mixed styles</span>
|
|
</div>
|
|
</DontItemCard>
|
|
<DontItemCard title="Arbitrary Sizing">
|
|
<p className="text-sm mb-chorus-sm">Don't use random sizes that break the visual hierarchy and spacing system.</p>
|
|
<div className="flex gap-chorus-sm items-center opacity-75">
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-3 h-3" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-7 h-7" />
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-10 h-10" />
|
|
<span className="text-sm text-coral-700 dark:text-coral-300">Inconsistent sizes</span>
|
|
</div>
|
|
</DontItemCard>
|
|
<DontItemCard title="Modify or Recolor">
|
|
<p className="text-sm">Never alter icon shapes, add effects, or change colors beyond the standard black/white variants.</p>
|
|
</DontItemCard>
|
|
</DontSection>
|
|
</DoDontGrid>
|
|
</section>
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal delay={200} duration={600} direction="up">
|
|
{/* Implementation Guide */}
|
|
<section>
|
|
<h2 className="text-h3 mb-chorus-md">Implementation Guide</h2>
|
|
<p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-lg">
|
|
The CHORUS iconography system is implemented using the Coolicons v4.1 library with theme-aware variants for optimal accessibility.
|
|
</p>
|
|
|
|
<div className="bg-gradient-to-r from-mulberry-50 to-ocean-50 border border-mulberry-100 p-chorus-lg dark:from-mulberry-900/20 dark:to-ocean-900/20 dark:border-mulberry-700">
|
|
<h4 className="text-base font-semibold text-mulberry-700 dark:text-mulberry-300 mb-chorus-sm">
|
|
Implementation Steps
|
|
</h4>
|
|
<p className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-md">
|
|
Use theme-aware icon implementation with automatic dark/light mode switching:
|
|
</p>
|
|
|
|
<div className="space-y-chorus-md">
|
|
<div>
|
|
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
|
1. Theme-Aware Icon Implementation (HTML/React)
|
|
</h5>
|
|
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto">
|
|
<pre>{`<!-- Light theme icon (visible in light mode) -->
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png"
|
|
alt="Settings"
|
|
className="w-6 h-6 dark:hidden" />
|
|
|
|
<!-- Dark theme icon (visible in dark mode) -->
|
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png"
|
|
alt="Settings"
|
|
className="w-6 h-6 hidden dark:block" />`}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
|
2. Standard Icon Sizes (CSS Classes)
|
|
</h5>
|
|
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto">
|
|
<pre>{`/* Standard icon sizes following CHORUS spacing system */
|
|
.icon-sm { width: 1rem; height: 1rem; } /* 16px */
|
|
.icon-md { width: 1.25rem; height: 1.25rem; } /* 20px */
|
|
.icon-lg { width: 1.5rem; height: 1.5rem; } /* 24px */
|
|
.icon-xl { width: 2rem; height: 2rem; } /* 32px */`}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
|
3. Icon Library Structure
|
|
</h5>
|
|
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto">
|
|
<pre>{`public/icons/coolicons.v4.1/
|
|
├── coolicons PNG/
|
|
│ ├── Black/ # Light theme icons
|
|
│ └── White/ # Dark theme icons
|
|
├── coolicons SVG/ # Vector versions
|
|
└── Webfont/ # Icon font (optional)`}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</ScrollReveal>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|