refactor(brand-style-guide): unify Do/Don’t blocks with shared components and apply across pages (Logo, Copywriting, Typography, Diagrams incl. Field Journal foundation, Iconography, Usage, Art Direction, Colors, Motion)
This commit is contained in:
tony
@@ -1,5 +1,6 @@
|
||||
import { div } from "three/tsl"
|
||||
import ScrollReveal from '@/components/ScrollReveal';
|
||||
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
|
||||
|
||||
export default function IconographyPage() {
|
||||
return (
|
||||
@@ -303,80 +304,53 @@ export default function IconographyPage() {
|
||||
<section className="mb-chorus-xxl">
|
||||
<h2 className="text-h3 mb-chorus-md">Usage Guidelines</h2>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
{/* DO Section */}
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100 flex items-center gap-chorus-sm">
|
||||
<span className="text-2xl">✓</span>
|
||||
DO
|
||||
</h3>
|
||||
|
||||
<div className="space-y-chorus-md">
|
||||
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Use Theme Variants</h4>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Standard Sizes</h4>
|
||||
<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="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>
|
||||
|
||||
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Semantic Meaning</h4>
|
||||
<p className="text-sm">Choose icons that clearly represent their function and maintain consistency across similar actions.</p>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* DON'T Section */}
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm text-coral-900 dark:text-coral-100 flex items-center gap-chorus-sm">
|
||||
<span className="text-2xl">✗</span>
|
||||
DON'T
|
||||
</h3>
|
||||
|
||||
<div className="space-y-chorus-md">
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Mix Icon Styles</h4>
|
||||
<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>
|
||||
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Arbitrary Sizing</h4>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Modify or Recolor</h4>
|
||||
<p className="text-sm">Never alter icon shapes, add effects, or change colors beyond the standard black/white variants.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user