Add comprehensive brand guidelines to brand guide site
- Create new brand guideline pages: • Copywriting guidelines with voice, tone by channel, and quick checklist • Diagram style guide with field guide-inspired approach • Press & media kit with narrative guidelines and suggested language - Enhance existing pages with Visual Identity integration: • Visual Identity: Add three-pillar philosophy (Bauhaus typography, field journal illustration, infrared photography) • Typography: Merge Bauhaus typography guidelines with cross-references • Art Direction: Add infrared photography foundation with visual identity connection • Diagrams: Add field journal illustration foundation - Update navigation with new sections in appropriate categories - Add cross-links between related sections throughout the site - Follow existing design patterns and icon usage All pages now connect to the cohesive visual identity system while providing detailed, actionable guidelines. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tony
@@ -0,0 +1,334 @@
|
||||
import ScrollReveal from '@/components/ScrollReveal';
|
||||
|
||||
export default function ArtDirectionPage() {
|
||||
return (
|
||||
<div className="py-chorus-xxl">
|
||||
<section className="mb-chorus-xxl pt-chorus-xxl">
|
||||
|
||||
<img src="https://placehold.co/1280x720/black/white?text=Hero+Image" alt="Black-and-white macro of eucalyptus end grain, concentric rings and a hairline crack—evokes layered time." className="w-full h-auto rounded-md" />
|
||||
|
||||
|
||||
|
||||
<div className="mb-chorus-xxl max-w-5xl mx-auto px-chorus-lg ">
|
||||
<ScrollReveal delay={300} duration={600} direction="up">
|
||||
<h1 className="text-h2 mb-chorus-md">Photography & Imagery</h1>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-md">
|
||||
Our imagery makes a single claim: intelligence is already written into the natural world. We reveal it—not by inventing graphics—but by photographing Australian ecologies where structure, time, and emergence are visible in the raw. Everything is <strong>true B&W</strong>, documentary-lean, and free of human artifacts.
|
||||
</p>
|
||||
|
||||
{/* Visual Identity Connection */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800 rounded mb-chorus-lg">
|
||||
<h3 className="text-xl font-semibold text-carbon-950 dark:text-white mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Media/Image_01.png"
|
||||
alt=""
|
||||
className="h-5 w-5 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Media/Image_01.png"
|
||||
alt=""
|
||||
className="hidden h-5 w-5 dark:block"
|
||||
/>
|
||||
Infrared Photography Foundation
|
||||
</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 mb-chorus-md">
|
||||
<strong>Infrared photography</strong> is one of our three core visual identity pillars, adding a layer of revelation that suggests we see beneath the obvious surface — uncovering hidden patterns, structures, and truths invisible to the naked eye. This aligns metaphorically with our mission: exposing the invisible scaffolding of reasoning and collaboration.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-chorus-md md:grid-cols-2">
|
||||
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-md dark:border-emerald-700">
|
||||
<h4 className="font-semibold text-emerald-800 dark:text-emerald-300 mb-2">Photography Do's</h4>
|
||||
<ul className="text-sm space-y-1 text-emerald-700 dark:text-emerald-300">
|
||||
<li>• High-contrast B&W infrared or false-color IR with natural subjects</li>
|
||||
<li>• Highlight hidden textures (leaf veins, canopy structures, coral, termite mounds)</li>
|
||||
<li>• Keep tone observational, almost documentary</li>
|
||||
<li>• Look for mathematical, symmetrical, or self-organizing structure</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 p-chorus-md dark:border-red-700">
|
||||
<h4 className="font-semibold text-red-800 dark:text-red-300 mb-2">Photography Don'ts</h4>
|
||||
<ul className="text-sm space-y-1 text-red-700 dark:text-red-300">
|
||||
<li>• Avoid stocky, staged human imagery ("smiling people in offices")</li>
|
||||
<li>• Don't use saturated, lifestyle-style photos — they break the scientific tone</li>
|
||||
<li>• No generic tech clichés (server racks, neon circuit boards)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-chorus-md p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300">
|
||||
<strong>Cross-reference:</strong> See the <a href="/visual-identity" className="text-ocean-600 dark:text-ocean-400 hover:underline">Visual Identity page</a> for how infrared photography integrates with our complete design philosophy including Bauhaus typography and field journal illustration.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={400} duration={600} direction="up">
|
||||
<div className="py-chorus-xl">
|
||||
<h2 className="text-h3 mb-chorus-md">Core principles</h2>
|
||||
<ul className="list-disc pl-5 space-y-2">
|
||||
<li><strong>Truth-effect:</strong> Real photographs, not illustrations or composites. No synthetic “data” overlays.</li>
|
||||
<li><strong>Australian, untouched:</strong> Native species, landscapes, textures. No human objects, infrastructure, or tracks.</li>
|
||||
<li><strong>Metaphor first:</strong> Every subject must embody at least one of our pillars—<strong>structure, intelligence, time, growth, ecosystems, emergence</strong>.</li>
|
||||
<li><strong>High contrast, fine detail:</strong> Deep blacks, crisp midtones, visible micro-texture (grain, fibers, pores).</li>
|
||||
<li><strong>Modular:</strong> Images should stand alone or grid together without stylistic clash.</li>
|
||||
<li><strong>Brand echo (optional):</strong> A <strong>subtle circular light falloff</strong> (“ring”) at 2–4% opacity—felt, never seen.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={500} duration={600} direction="up">
|
||||
<div className="py-chorus-xl">
|
||||
<h2 className="text-h3 mb-chorus-md">Visual motifs & how to use them</h2>
|
||||
|
||||
<div className="space-y-chorus-lg">
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm">1) Time & Accretion</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-chorus-lg">
|
||||
<div className="space-y-chorus-md">
|
||||
<img src="https://placehold.co/600x400/black/white?text=Tree+Growth+Rings" alt="Black-and-white macro of eucalyptus end grain, concentric rings and a hairline crack—evokes layered time." className="w-full h-auto rounded-md" />
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300"><strong>Tree growth rings:</strong> Temporal layers and auditability for roadmaps and governance.</p>
|
||||
</div>
|
||||
<div className="space-y-chorus-md">
|
||||
<img src="https://placehold.co/600x400/black/white?text=Stromatolites" alt="Black-and-white of layered microbial rock formations, showing deep time and iterative deposition." className="w-full h-auto rounded-md" />
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300"><strong>Stromatolites:</strong> Deep time and iterative deposition for foundations and first principles.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm">2) Structure & Emergent Geometry</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-chorus-lg">
|
||||
<div className="space-y-chorus-md">
|
||||
<img src="https://placehold.co/600x400/black/white?text=Termite+Mound" alt="Black-and-white macro of termite mound interior, showing ventilation lattices and chambers—evokes distributed control." className="w-full h-auto rounded-md" />
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300"><strong>Termite mound interiors:</strong> Distributed control and self-regulation for orchestration and load-balancing.</p>
|
||||
</div>
|
||||
<div className="space-y-chorus-md">
|
||||
<img src="https://placehold.co/600x400/black/white?text=Canopy+Occlusion" alt="Black-and-white aerial of eucalyptus canopy, forming emergent boundaries and negative-space networks—evokes graph partitioning." className="w-full h-auto rounded-md" />
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300"><strong>Aerial canopy occlusion:</strong> Graph partitioning for clustering, sharding, and routing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm">3) Growth & Recurrence</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-chorus-lg">
|
||||
<div className="space-y-chorus-md">
|
||||
<img src="https://placehold.co/600x400/black/white?text=Fern+Frond" alt="Black-and-white of a fern frond unfurling, showing fractal patterns—evokes recursion and expansion." className="w-full h-auto rounded-md" />
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300"><strong>Ferns:</strong> Recursion and expansion for scaling and onboarding.</p>
|
||||
</div>
|
||||
<div className="space-y-chorus-md">
|
||||
<img src="https://placehold.co/600x400/black/white?text=Banksia+Cone" alt="Black-and-white macro of a Banksia cone, with repeating modules—evokes indexed storage and redundancy." className="w-full h-auto rounded-md" />
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300"><strong>Banksia cones:</strong> Indexed storage and redundancy for indexing and caching.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm">4) Signals & Flow</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-chorus-lg">
|
||||
<div className="space-y-chorus-md">
|
||||
<img src="https://placehold.co/600x400/black/white?text=River+Braids" alt="Black-and-white aerial of river braids, showing dynamic routing and back-pressure—evokes scheduling and retries." className="w-full h-auto rounded-md" />
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300"><strong>River braids:</strong> Dynamic routing for scheduling and congestion control.</p>
|
||||
</div>
|
||||
<div className="space-y-chorus-md">
|
||||
<img src="https://placehold.co/600x400/black/white?text=Eucalyptus+Bark" alt="Black-and-white of peeling eucalyptus bark, showing layers—evokes rolling updates and surface renewal." className="w-full h-auto rounded-md" />
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300"><strong>Eucalyptus bark sheeting:</strong> Rolling updates and surface renewal for upgrade paths and migrations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={600} duration={600} direction="up">
|
||||
<div className="py-chorus-xl">
|
||||
<h2 className="text-h3 mb-chorus-md">Composition & tone</h2>
|
||||
<ul className="list-disc pl-5 space-y-2">
|
||||
<li><strong>Format:</strong> Prefer portrait 4:5 for social (1080×1350), landscape 16:9 for web hero, square 1:1 for grids.</li>
|
||||
<li><strong>Safe zones:</strong> Keep type/logo inside a 6–8% inset.</li>
|
||||
<li><strong>Subject dominance:</strong> 1 clear motif per frame. Avoid busy composites.</li>
|
||||
<li><strong>Negative space:</strong> Intentionally reserve clean bands for headlines.</li>
|
||||
<li><strong>Motion (video):</strong> If used, ultra-slow push or light sweep only (2–3% over 4–8 s).</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={700} duration={600} direction="up">
|
||||
<div className="py-chorus-xl">
|
||||
<h2 className="text-h3 mb-chorus-md">Post-processing standard (B&W only)</h2>
|
||||
<ol className="list-decimal pl-5 space-y-2">
|
||||
<li>Convert to monochrome (no tint/sepia).</li>
|
||||
<li>Curves: gentle S-curve; protect highlights from clipping.</li>
|
||||
<li>Local contrast: texture/clarity +10–20; modest sharpening.</li>
|
||||
<li>Grain: 2–5% to unify.</li>
|
||||
<li>Optional brand ring: soft elliptical dodge/burn at 2–4% centered on the “organizing nucleus” (pith, node, vertex).</li>
|
||||
<li><strong>Never:</strong> fake film borders, heavy vignettes, light leaks, glitch effects, “data” overlays.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={800} duration={600} direction="up">
|
||||
<div className="py-chorus-xl">
|
||||
<h2 className="text-h3 mb-chorus-md">Do / Don’t</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-chorus-lg">
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100">Do</h3>
|
||||
<ul className="list-disc pl-5 space-y-2">
|
||||
<li>Use raking light and macro to reveal micro-structure.</li>
|
||||
<li>Prefer abstraction over literal “hero animal” portraits.</li>
|
||||
<li>Shoot in harsh midday sun when textures pop; underexpose slightly.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm text-coral-900 dark:text-coral-100">Don’t</h3>
|
||||
<ul className="list-disc pl-5 space-y-2">
|
||||
<li>Show people, roads, fences, fire trails, boats, or gear.</li>
|
||||
<li>Use illustrative icons, neon circuits, fake network lines.</li>
|
||||
<li>Tone images (no cyanotypes, warm washes).</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={800} duration={600} direction="up">
|
||||
<div className="py-chorus-xl">
|
||||
<h2 className="text-h3 mb-chorus-md">Shot list starter (Australia-first)</h2>
|
||||
<ul className="list-disc pl-5 space-y-2">
|
||||
<li>End-grain cross-sections (fallen snapped limbs only not human-cut, petrified wood would be ideal!), paperbark peels, stringybark sheets.</li>
|
||||
<li>Termite mound, fossil, or coral interiors (fracture/reveal), not tourist exteriors.</li>
|
||||
<li>Aerial canopy mosaics and rainforest edge ecotones.</li>
|
||||
<li>Mangrove pneumatophore fields; root lattices.</li>
|
||||
<li>Spinifex ripple fields; salt-pan polygon crackle.</li>
|
||||
<li>Coral texture macros (branching vs massive forms).</li>
|
||||
<li>Tree fern frond spirals; fern vein networks.</li>
|
||||
<li>Banksia cones; grass tree (Xanthorrhoea) leaf fans.</li>
|
||||
<li>River braidplains; oxbow patterns; dune slipfaces.</li>
|
||||
<li>Fungi, mushrooms, mycelium networks</li>
|
||||
<li>Macro detail of feathers / plumage.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={800} duration={600} direction="up">
|
||||
<div className="py-chorus-xl">
|
||||
<h2 className="text-h3 mb-chorus-md">Delivery specs</h2>
|
||||
<ul className="list-disc pl-5 space-y-2">
|
||||
<li><strong>Social (portrait):</strong> 1080×1350 PNG/JPEG (quality 90+).</li>
|
||||
<li><strong>Hero (web):</strong> 2400×1350 WEBP + 1600×900 fallback.</li>
|
||||
<li><strong>Grid (brand library):</strong> 2048×2048, consistent grain and contrast.</li>
|
||||
<li><strong>Color master:</strong> Keep original full-size RAWs archived; deliver final B&W exports.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={800} duration={600} direction="up">
|
||||
<div className="py-chorus-xl">
|
||||
<h2 className="text-h3 mb-chorus-md">Decision checklist (before publishing)</h2>
|
||||
<ul className="list-disc pl-5 space-y-2">
|
||||
<li>Does the photo show a <strong>natural Australian</strong> subject with no human artifacts?</li>
|
||||
<li>Can you point to <strong>one pillar</strong> (structure/intelligence/time/growth/ecosystems/emergence) the image clearly expresses?</li>
|
||||
<li>Is the B&W treatment <strong>neutral, high-contrast, and grain-truthful</strong>?</li>
|
||||
<li>Is there <strong>clean space</strong> for type or is the image strong enough to run without it?</li>
|
||||
<li>Would this image still feel on-brand if placed next to three others from different biomes? (If yes, it’s modular; ship it.)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={800} duration={600} direction="up">
|
||||
<div className="py-chorus-xl">
|
||||
<h2 className="text-h3 mb-chorus-md">Do / Don’t</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-chorus-lg">
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100">Do</h3>
|
||||
<div className="space-y-chorus-md">
|
||||
<img src="https://placehold.co/600x400/black/white?text=DO:+Raking+Light" alt="Black-and-white macro shot of stringybark with harsh, raking light revealing deep texture and abstract patterns." className="w-full h-auto rounded-md" />
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">DO: Use raking light and macro to reveal micro-structure.</p>
|
||||
</div>
|
||||
<ul className="list-disc pl-5 space-y-2 mt-chorus-md">
|
||||
<li>Use raking light and macro to reveal micro-structure.</li>
|
||||
<li>Prefer abstraction over literal “hero animal” portraits.</li>
|
||||
<li>Shoot in harsh midday sun when textures pop; underexpose slightly.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm text-coral-900 dark:text-coral-100">Don’t</h3>
|
||||
<div className="space-y-chorus-md">
|
||||
<img src="https://placehold.co/600x400/969696/white?text=DON'T:+Person+on+Path" alt="A color-toned image of a forest with a person walking on a path, illustrating multiple 'don't' examples." className="w-full h-auto rounded-md" />
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">DON'T: Show people, roads, or use color toning.</p>
|
||||
</div>
|
||||
<ul className="list-disc pl-5 space-y-2 mt-chorus-md">
|
||||
<li>Show people, roads, fences, fire trails, boats, or gear.</li>
|
||||
<li>Use illustrative icons, neon circuits, fake network lines.</li>
|
||||
<li>Tone images (no cyanotypes, warm washes).</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={800} duration={600} direction="up">
|
||||
<div className="py-chorus-xl">
|
||||
<h2 className="text-h3 mb-chorus-md">Addendum — Infrared (IR) Imagery for Structure Discovery</h2>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-md">
|
||||
This is an addendum to our imagery section — it keeps the B&W discipline while revealing structure you can’t see in visible light.
|
||||
</p>
|
||||
<div className="space-y-chorus-md">
|
||||
<img src="https://placehold.co/600x400/black/white?text=IR+Canopy" alt="Infrared (near-IR) black-and-white aerial of eucalyptus canopy — bright leaves, dark voids forming network-like negative space." className="w-full h-auto rounded-md" />
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Near-IR reveals canopy boundaries—local rules, global structure.</p>
|
||||
</div>
|
||||
<h3 className="text-h4 mt-chorus-lg mb-chorus-sm">Why use IR</h3>
|
||||
<ul className="list-disc pl-5 space-y-2">
|
||||
<li><strong>Reveals non-obvious structure:</strong> Vegetation reflects strongly in <strong>near-IR (NIR)</strong> → canopy boundaries pop; stress/drought reduce reflectance → natural contrast.</li>
|
||||
<li><strong>Separates materials:</strong> Sky and water go <strong>very dark</strong> in NIR; healthy leaves go <strong>very bright</strong> (Wood effect) → clean masks, graph-like negative spaces.</li>
|
||||
<li><strong>Texture contrast:</strong> Bark, termite-mound interiors, spinifex, salt-pan polygons pick up micro-relief under harsh sun that looks flat in RGB.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={900} duration={600} direction="up">
|
||||
<div className="py-chorus-xl">
|
||||
<h2 className="text-h3 mb-chorus-md">Free Australian National Imagery Resources</h2>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-lg">
|
||||
Excellent free imagery resources from Australian national institutions that align perfectly with our brand guidelines.
|
||||
</p>
|
||||
|
||||
<div className="space-y-chorus-lg">
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm">Major National Collections</h3>
|
||||
<div className="space-y-chorus-md">
|
||||
<h4 className="text-h5">National Library of Australia (NLA)</h4>
|
||||
<ul className="list-disc pl-5 space-y-1">
|
||||
<li>Black and white historical photographs covering Australian landscapes, flora, and fauna.</li>
|
||||
</ul>
|
||||
<a href="https://www.library.gov.au/discover/what-we-collect/pictures" className="text-ocean-600 dark:text-ocean-400 hover:underline">Visit NLA Pictures</a>
|
||||
</div>
|
||||
<div className="space-y-chorus-md mt-chorus-md">
|
||||
<h4 className="text-h5">CSIRO Data Access Portal</h4>
|
||||
<ul className="list-disc pl-5 space-y-1">
|
||||
<li>Australian National Herbarium (ANH) specimen images.</li>
|
||||
<li>High-resolution botanical specimen photography.</li>
|
||||
<li>Perfect for your <strong>Growth & Recurrence</strong> and <strong>Structure</strong> motifs.</li>
|
||||
</ul>
|
||||
<a href="https://research.csiro.au/dap/discover/scientific-domains/national-research-collections-australia-nrca/" className="text-ocean-600 dark:text-ocean-400 hover:underline">Visit CSIRO Data Access Portal</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-h4 mb-chorus-sm">Strategic Recommendations</h3>
|
||||
<h4 className="text-h5 mt-chorus-md mb-chorus-sm">Primary Sources:</h4>
|
||||
<ol className="list-decimal pl-5 space-y-1">
|
||||
<li><strong>CSIRO Herbarium Collections</strong> - Perfect for your <strong>Banksia cones, fern spirals, and coral morphologies</strong></li>
|
||||
<li><strong>State Library Wikimedia Commons</strong> - Broad landscape and natural subject coverage</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
342
brand-assets/brand-style-guide-site/src/app/copywriting/page.tsx
Normal file
342
brand-assets/brand-style-guide-site/src/app/copywriting/page.tsx
Normal file
@@ -0,0 +1,342 @@
|
||||
export default function Copywriting() {
|
||||
return (
|
||||
<div className="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-950 to-white from-sand-200">
|
||||
<section id="copywriting" className="pt-chorus-xxl">
|
||||
<div className="max-w-5xl mx-auto mb-chorus-lg px-chorus-lg">
|
||||
|
||||
<header className="border-b border-nickel-200 pb-chorus-lg dark:border-mulberry-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight text-carbon-950 dark:text-white">
|
||||
Copywriting Guidelines
|
||||
</h1>
|
||||
<p className="mt-chorus-sm text-lg text-carbon-600 dark:text-mulberry-200">
|
||||
Voice, tone, and style guidelines for CHORUS communications
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Text.png"
|
||||
alt="Copywriting"
|
||||
className="h-12 w-12 dark:hidden opacity-60"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Text.png"
|
||||
alt="Copywriting"
|
||||
className="hidden h-12 w-12 dark:block opacity-60"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="mt-chorus-xl space-y-chorus-xl">
|
||||
|
||||
{/* Overall Voice Section */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800 rounded">
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg flex items-center gap-3">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Bulb.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Bulb.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
Overall Voice
|
||||
</h2>
|
||||
<div className="prose prose-carbon dark:prose-invert max-w-none">
|
||||
<p className="text-lg mb-chorus-md">
|
||||
Our voice is <strong>observational, reflective, and precise</strong>. We write like naturalists documenting a landscape: noticing patterns, highlighting strengths, and gently pointing out limits. We avoid hype and jargon in favor of clarity and curiosity.
|
||||
</p>
|
||||
<div className="grid gap-chorus-md md:grid-cols-2">
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-md border border-sand-200 dark:border-carbon-700">
|
||||
<p className="font-medium mb-2">We aim to sound:</p>
|
||||
<ul className="text-sm space-y-1">
|
||||
<li>• Thoughtful, not promotional</li>
|
||||
<li>• Curious, not dismissive</li>
|
||||
<li>• Analytical, not academic</li>
|
||||
<li>• Confident, but humble</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-md border border-sand-200 dark:border-carbon-700">
|
||||
<p className="font-medium mb-2">Visual Identity Note:</p>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
[Placeholder for example of voice alignment with brand visuals - field guide aesthetic]
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tone by Channel */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg flex items-center gap-3">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
Tone by Channel
|
||||
</h2>
|
||||
|
||||
<div className="grid gap-chorus-lg">
|
||||
|
||||
{/* Social Media */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800">
|
||||
<h3 className="text-xl font-semibold text-carbon-950 dark:text-white mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Share_iOS_Export.png"
|
||||
alt=""
|
||||
className="h-5 w-5 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Share_iOS_Export.png"
|
||||
alt=""
|
||||
className="hidden h-5 w-5 dark:block"
|
||||
/>
|
||||
Social Media
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 gap-chorus-md">
|
||||
<div>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 mb-chorus-sm">
|
||||
Conversational, approachable. Start with a <strong>hook</strong> that invites curiosity or sparks recognition.
|
||||
</p>
|
||||
<ul className="text-sm text-carbon-600 dark:text-mulberry-300 space-y-1">
|
||||
<li>• Use metaphors sparingly but effectively (ecosystem, species, patterns)</li>
|
||||
<li>• End with open-ended questions to encourage discussion</li>
|
||||
<li>• Keep posts scannable (short paragraphs, line breaks, 1-2 emojis max)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-sm border border-sand-200 dark:border-carbon-700">
|
||||
<p className="font-medium text-sm mb-2">Example:</p>
|
||||
<p className="text-sm italic text-carbon-600 dark:text-mulberry-300">
|
||||
"Every ecosystem has its generalists — in automation, n8n plays that role. Adaptable, flexible, everywhere at once. But generalists have limits. Where do you feel them most in your own workflows?"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Blogs / Long-Form */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800">
|
||||
<h3 className="text-xl font-semibold text-carbon-950 dark:text-white mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Book.png"
|
||||
alt=""
|
||||
className="h-5 w-5 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Book.png"
|
||||
alt=""
|
||||
className="hidden h-5 w-5 dark:block"
|
||||
/>
|
||||
Blogs / Long-Form Content
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 gap-chorus-md">
|
||||
<div>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 mb-chorus-sm">
|
||||
Deeper analysis, but still readable and flowing.
|
||||
</p>
|
||||
<ul className="text-sm text-carbon-600 dark:text-mulberry-300 space-y-1">
|
||||
<li>• Use metaphors as framing devices (not as gimmicks)</li>
|
||||
<li>• Organize content with clear sections (Strengths, Limitations, Use Cases)</li>
|
||||
<li>• Respect other tools — acknowledge achievements before surfacing friction</li>
|
||||
<li>• Invite reflection at the end</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-sm border border-sand-200 dark:border-carbon-700">
|
||||
<p className="font-medium text-sm mb-2">Example:</p>
|
||||
<p className="text-sm italic text-carbon-600 dark:text-mulberry-300">
|
||||
"Zapier, IFTTT, and Make.com are the sparrows of the automation world: ubiquitous, approachable, and instantly recognizable. They thrive in simple habitats, connecting APIs with ease. But sparrows struggle when the environment changes..."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* White Papers / Research Notes */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800">
|
||||
<h3 className="text-xl font-semibold text-carbon-950 dark:text-white mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png"
|
||||
alt=""
|
||||
className="h-5 w-5 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png"
|
||||
alt=""
|
||||
className="hidden h-5 w-5 dark:block"
|
||||
/>
|
||||
White Papers / Research Notes
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 gap-chorus-md">
|
||||
<div>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 mb-chorus-sm">
|
||||
More formal, structured, citation-friendly.
|
||||
</p>
|
||||
<ul className="text-sm text-carbon-600 dark:text-mulberry-300 space-y-1">
|
||||
<li>• Use precise language but keep readability a priority</li>
|
||||
<li>• Frame findings as observations and implications, not just claims</li>
|
||||
<li>• Introduce diagrams like "plates" in a field guide</li>
|
||||
<li>• Maintain consistent narrative: what was observed, what it means, why it matters</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-sm border border-sand-200 dark:border-carbon-700">
|
||||
<p className="font-medium text-sm mb-2">Example:</p>
|
||||
<p className="text-sm italic text-carbon-600 dark:text-mulberry-300">
|
||||
"Temporal systems such as Argo Workflows and Camunda provide proven reliability for enterprise-scale orchestration. Their assumptions hold well in stable environments. However, in contexts where rapid adaptation is required, these assumptions can become constraints."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Do's & Don'ts */}
|
||||
<div className="grid md:grid-cols-2 gap-chorus-lg">
|
||||
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-lg dark:border-emerald-800">
|
||||
<h3 className="text-xl font-semibold text-emerald-800 dark:text-emerald-300 mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png"
|
||||
alt=""
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
Do's
|
||||
</h3>
|
||||
<ul className="text-sm space-y-2 text-emerald-700 dark:text-emerald-300">
|
||||
<li>• Use metaphors (ecology, species, hidden structures) as subtle framing devices</li>
|
||||
<li>• Highlight strengths before mentioning limitations</li>
|
||||
<li>• Ask questions to spark dialogue, not just broadcast opinions</li>
|
||||
<li>• Keep copy clean, plain, and respectful</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 p-chorus-lg dark:border-red-800">
|
||||
<h3 className="text-xl font-semibold text-red-800 dark:text-red-300 mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Close.png"
|
||||
alt=""
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
Don'ts
|
||||
</h3>
|
||||
<ul className="text-sm space-y-2 text-red-700 dark:text-red-300">
|
||||
<li>• Bash other tools or sound adversarial</li>
|
||||
<li>• Use overblown marketing language ("revolutionary," "game-changing")</li>
|
||||
<li>• Fall into jargon-heavy, academic prose</li>
|
||||
<li>• Force metaphors — let them appear naturally</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Checklist */}
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-lg border border-sand-200 dark:border-carbon-700">
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg flex items-center gap-3">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/List.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/List.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
Copywriting Quick Checklist
|
||||
</h2>
|
||||
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 mb-chorus-md">
|
||||
When drafting any social post, blog, or paper, ask yourself:
|
||||
</p>
|
||||
|
||||
<div className="grid gap-chorus-sm">
|
||||
<div className="flex items-start gap-3 p-chorus-sm bg-white dark:bg-mulberry-900 border border-nickel-200 dark:border-mulberry-800">
|
||||
<span className="flex-shrink-0 w-6 h-6 bg-ocean-600 text-white text-xs font-bold rounded-full flex items-center justify-center">1</span>
|
||||
<div>
|
||||
<p className="font-medium">Am I observing or overselling?</p>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Keep it reflective, not hyped.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 p-chorus-sm bg-white dark:bg-mulberry-900 border border-nickel-200 dark:border-mulberry-800">
|
||||
<span className="flex-shrink-0 w-6 h-6 bg-ocean-600 text-white text-xs font-bold rounded-full flex items-center justify-center">2</span>
|
||||
<div>
|
||||
<p className="font-medium">Have I acknowledged strengths before pointing out limits?</p>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Respect builds credibility.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 p-chorus-sm bg-white dark:bg-mulberry-900 border border-nickel-200 dark:border-mulberry-800">
|
||||
<span className="flex-shrink-0 w-6 h-6 bg-ocean-600 text-white text-xs font-bold rounded-full flex items-center justify-center">3</span>
|
||||
<div>
|
||||
<p className="font-medium">Is there at least one metaphor or framing device to aid understanding?</p>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Use ecological/field guide imagery subtly.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 p-chorus-sm bg-white dark:bg-mulberry-900 border border-nickel-200 dark:border-mulberry-800">
|
||||
<span className="flex-shrink-0 w-6 h-6 bg-ocean-600 text-white text-xs font-bold rounded-full flex items-center justify-center">4</span>
|
||||
<div>
|
||||
<p className="font-medium">Does the copy end with a question or an invitation to reflect?</p>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Spark dialogue, don't just broadcast.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 p-chorus-sm bg-white dark:bg-mulberry-900 border border-nickel-200 dark:border-mulberry-800">
|
||||
<span className="flex-shrink-0 w-6 h-6 bg-ocean-600 text-white text-xs font-bold rounded-full flex items-center justify-center">5</span>
|
||||
<div>
|
||||
<p className="font-medium">Is this written clearly enough that a curious outsider could follow?</p>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">No jargon walls, no "AI slop."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-chorus-md p-chorus-sm bg-ocean-50 dark:bg-ocean-900/20 border border-ocean-200 dark:border-ocean-800">
|
||||
<p className="text-sm font-medium text-ocean-800 dark:text-ocean-300 mb-1">Important Reminder:</p>
|
||||
<p className="text-sm text-ocean-700 dark:text-ocean-300">
|
||||
When asking for dialogue always ensure the reader has a means to do so! Never include questions inviting response in print media without providing a link, email, or comment mechanism.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800">
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg">
|
||||
Summary
|
||||
</h2>
|
||||
<div className="prose prose-carbon dark:prose-invert max-w-none">
|
||||
<p className="text-lg mb-chorus-md">
|
||||
Our copywriting reflects the same philosophy as our visuals: <strong>observational, structured, curious</strong>.
|
||||
</p>
|
||||
<div className="grid gap-chorus-md md:grid-cols-3">
|
||||
<div className="text-center p-chorus-md bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold mb-2">Social Media</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">We invite conversation</p>
|
||||
</div>
|
||||
<div className="text-center p-chorus-md bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold mb-2">Blogs</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">We offer clear analysis</p>
|
||||
</div>
|
||||
<div className="text-center p-chorus-md bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold mb-2">Papers</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">We present studied observations</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-chorus-md p-chorus-md bg-mulberry-50 dark:bg-mulberry-800/30 border border-mulberry-200 dark:border-mulberry-700">
|
||||
<p className="text-sm font-medium text-mulberry-800 dark:text-mulberry-300">
|
||||
We don't shout or oversell. We point, observe, and question — like a field guide showing the shape of the landscape.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
462
brand-assets/brand-style-guide-site/src/app/diagrams/page.tsx
Normal file
462
brand-assets/brand-style-guide-site/src/app/diagrams/page.tsx
Normal file
@@ -0,0 +1,462 @@
|
||||
export default function Diagrams() {
|
||||
return (
|
||||
<div className="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-950 to-white from-sand-200">
|
||||
<section id="diagrams" className="pt-chorus-xxl">
|
||||
<div className="max-w-5xl mx-auto mb-chorus-lg px-chorus-lg">
|
||||
|
||||
<header className="border-b border-nickel-200 pb-chorus-lg dark:border-mulberry-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight text-carbon-950 dark:text-white">
|
||||
Diagram Style Guide
|
||||
</h1>
|
||||
<p className="mt-chorus-sm text-lg text-carbon-600 dark:text-mulberry-200">
|
||||
Scientific field guide-inspired diagramming for CHORUS systems
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Diagram.png"
|
||||
alt="Diagrams"
|
||||
className="h-12 w-12 dark:hidden opacity-60"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Diagram.png"
|
||||
alt="Diagrams"
|
||||
className="hidden h-12 w-12 dark:block opacity-60"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="mt-chorus-xl space-y-chorus-xl">
|
||||
|
||||
{/* Concept Section */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800 rounded">
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg flex items-center gap-3">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Bulb.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Bulb.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
Concept
|
||||
</h2>
|
||||
<div className="prose prose-carbon dark:prose-invert max-w-none">
|
||||
<p className="text-lg mb-chorus-md">
|
||||
Our diagramming style is inspired by <strong>scientific field guides</strong>: precise, informative, and aesthetically restrained. Instead of sterile vector diagrams, we use <strong>illustrative styles</strong> (watercolor washes and copperplate-style line drawings) to evoke the tradition of naturalist documentation.
|
||||
</p>
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-md border border-sand-200 dark:border-carbon-700">
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
This reinforces our brand story of mapping ecosystems — in this case, the ecosystem of automation and intelligence tools.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Field Journal Foundation */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800 rounded">
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg flex items-center gap-3">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Diagram.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Diagram.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
Field Journal Illustration Foundation
|
||||
</h2>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 mb-chorus-md">
|
||||
<strong>Field journal illustration</strong> is one of our three core visual identity pillars, introducing a human, observational quality. Like naturalist plates, our diagrams are studies of an ecosystem: annotated, contextual, and exploratory. This conveys curiosity and trustworthiness without the sterility of typical corporate diagrams.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-chorus-md md:grid-cols-2">
|
||||
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-md dark:border-emerald-700">
|
||||
<h4 className="font-semibold text-emerald-800 dark:text-emerald-300 mb-2">Illustration Do's</h4>
|
||||
<ul className="text-sm space-y-1 text-emerald-700 dark:text-emerald-300">
|
||||
<li>• Employ hand-drawn copperplate-style linework</li>
|
||||
<li>• Use subtle watercolor washes for grouping/context</li>
|
||||
<li>• Annotate with small labels, numbering, or marginalia — like a scientific plate</li>
|
||||
<li>• Maintain restraint: diagrams feel studied, not decorative</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 p-chorus-md dark:border-red-700">
|
||||
<h4 className="font-semibold text-red-800 dark:text-red-300 mb-2">Illustration Don'ts</h4>
|
||||
<ul className="text-sm space-y-1 text-red-700 dark:text-red-300">
|
||||
<li>• Avoid cartoonish vector icons or corporate clip-art</li>
|
||||
<li>• Don't use bright, flat infographic colors</li>
|
||||
<li>• No glossy gradients, 3D bevels, or skeuomorphic UI</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-chorus-md p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300">
|
||||
<strong>Cross-reference:</strong> See the <a href="/visual-identity" className="text-ocean-600 dark:text-ocean-400 hover:underline">Visual Identity page</a> for how field journal illustration integrates with our complete design philosophy including Bauhaus typography and infrared photography.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Visual Characteristics */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg flex items-center gap-3">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Media/Image_01.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Media/Image_01.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
Visual Characteristics
|
||||
</h2>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
|
||||
{/* Medium & Line Work */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800">
|
||||
<h3 className="text-xl font-semibold text-carbon-950 dark:text-white mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Pen.png"
|
||||
alt=""
|
||||
className="h-5 w-5 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Pen.png"
|
||||
alt=""
|
||||
className="hidden h-5 w-5 dark:block"
|
||||
/>
|
||||
Medium & Line Work
|
||||
</h3>
|
||||
<div className="space-y-chorus-sm">
|
||||
<div className="p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold mb-1">Medium:</h4>
|
||||
<ul className="text-sm text-carbon-600 dark:text-mulberry-300 space-y-1">
|
||||
<li>• Illustrative watercolors (for depth, texture, and organic variation)</li>
|
||||
<li>• Fine copperplate-style line drawings (for clarity and technical detail)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold mb-1">Line Work:</h4>
|
||||
<ul className="text-sm text-carbon-600 dark:text-mulberry-300 space-y-1">
|
||||
<li>• Thin, deliberate strokes (0.5–0.7pt equivalent)</li>
|
||||
<li>• Hatching and stippling instead of heavy shading</li>
|
||||
<li>• Labels in clear sans-serif or humanist serif font</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Color & Composition */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800">
|
||||
<h3 className="text-xl font-semibold text-carbon-950 dark:text-white mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Swatches_Palette.png"
|
||||
alt=""
|
||||
className="h-5 w-5 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Swatches_Palette.png"
|
||||
alt=""
|
||||
className="hidden h-5 w-5 dark:block"
|
||||
/>
|
||||
Color & Composition
|
||||
</h3>
|
||||
<div className="space-y-chorus-sm">
|
||||
<div className="p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold mb-1">Color Palette:</h4>
|
||||
<ul className="text-sm text-carbon-600 dark:text-mulberry-300 space-y-1">
|
||||
<li>• Muted, natural washes in grayscale or soft tones</li>
|
||||
<li>• Occasional single accent color (ochre, teal) for key elements</li>
|
||||
<li>• Aligned with brand B&W aesthetic</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold mb-1">Composition:</h4>
|
||||
<ul className="text-sm text-carbon-600 dark:text-mulberry-300 space-y-1">
|
||||
<li>• Diagrams feel like "plates" in a field guide</li>
|
||||
<li>• Framed, balanced, often annotated with marginalia</li>
|
||||
<li>• Key elements isolated and numbered/lettered for reference</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Use Cases */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg flex items-center gap-3">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
Use Cases
|
||||
</h2>
|
||||
|
||||
<div className="grid gap-chorus-md">
|
||||
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-md dark:border-mulberry-800 flex items-start gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Puzzle.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Puzzle.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-carbon-950 dark:text-white mb-1">System Diagrams</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Show modules (HMMM, COOEE, BZZZ, UCXL, etc.) as if they are "species" plates. Each part annotated, as though in a botanical drawing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-md dark:border-mulberry-800 flex items-start gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Trending_Up.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Trending_Up.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-carbon-950 dark:text-white mb-1">Process Flows</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Arrows as fine copperplate strokes with watercolor "washes" behind groups or zones.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-md dark:border-mulberry-800 flex items-start gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Compare.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Compare.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-carbon-950 dark:text-white mb-1">Comparisons</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Side-by-side "plates" with shared baseline grid, like comparative bird species pages.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-md dark:border-mulberry-800 flex items-start gap-4">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Main_Component.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Main_Component.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-carbon-950 dark:text-white mb-1">Iconography</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Subtle, hand-drawn-style icons for recurring elements (keys for encryption, envelopes for messages, etc.).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Placeholder for visual examples */}
|
||||
<div className="mt-chorus-lg bg-sand-50 dark:bg-carbon-800 p-chorus-lg border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-medium mb-chorus-sm">Visual Examples</h4>
|
||||
<div className="grid md:grid-cols-2 gap-chorus-md">
|
||||
<div className="aspect-video bg-white dark:bg-mulberry-900 border-2 border-dashed border-sand-300 dark:border-mulberry-700 flex items-center justify-center">
|
||||
<p className="text-sm text-carbon-500 dark:text-mulberry-400 text-center">
|
||||
[System Diagram Example]<br/>
|
||||
Watercolor wash background<br/>
|
||||
Copperplate line work
|
||||
</p>
|
||||
</div>
|
||||
<div className="aspect-video bg-white dark:bg-mulberry-900 border-2 border-dashed border-sand-300 dark:border-mulberry-700 flex items-center justify-center">
|
||||
<p className="text-sm text-carbon-500 dark:text-mulberry-400 text-center">
|
||||
[Process Flow Example]<br/>
|
||||
Field guide annotations<br/>
|
||||
Numbered elements
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Do's & Don'ts */}
|
||||
<div className="grid md:grid-cols-2 gap-chorus-lg">
|
||||
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-lg dark:border-emerald-800">
|
||||
<h3 className="text-xl font-semibold text-emerald-800 dark:text-emerald-300 mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png"
|
||||
alt=""
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
Do's
|
||||
</h3>
|
||||
<ul className="text-sm space-y-2 text-emerald-700 dark:text-emerald-300">
|
||||
<li>• Use watercolor textures to suggest context and environment</li>
|
||||
<li>• Keep line work clean and precise, avoiding cartoonish exaggeration</li>
|
||||
<li>• Maintain a sense of restraint — diagrams should feel like study plates, not marketing infographics</li>
|
||||
<li>• Include annotations and marginalia like field guide plates</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 p-chorus-lg dark:border-red-800">
|
||||
<h3 className="text-xl font-semibold text-red-800 dark:text-red-300 mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Close.png"
|
||||
alt=""
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
Don'ts
|
||||
</h3>
|
||||
<ul className="text-sm space-y-2 text-red-700 dark:text-red-300">
|
||||
<li>• Use flat, bright corporate vector icons</li>
|
||||
<li>• Overuse color — keep it subdued</li>
|
||||
<li>• Sacrifice clarity for style. The diagrams must be both beautiful and functional</li>
|
||||
<li>• Create glossy, marketing-style infographics</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tone & Message */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800">
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg flex items-center gap-3">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Message.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Message.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
Tone & Message
|
||||
</h2>
|
||||
|
||||
<p className="text-lg mb-chorus-md text-carbon-600 dark:text-mulberry-200">
|
||||
This style conveys:
|
||||
</p>
|
||||
|
||||
<div className="grid gap-chorus-md md:grid-cols-3">
|
||||
<div className="text-center p-chorus-md bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<div className="mb-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Trophy.png"
|
||||
alt=""
|
||||
className="h-8 w-8 mx-auto dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Trophy.png"
|
||||
alt=""
|
||||
className="hidden h-8 w-8 mx-auto dark:block"
|
||||
/>
|
||||
</div>
|
||||
<h4 className="font-semibold mb-2">Authority</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Rooted in tradition of careful observation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-chorus-md bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<div className="mb-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search.png"
|
||||
alt=""
|
||||
className="h-8 w-8 mx-auto dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Search.png"
|
||||
alt=""
|
||||
className="hidden h-8 w-8 mx-auto dark:block"
|
||||
/>
|
||||
</div>
|
||||
<h4 className="font-semibold mb-2">Curiosity</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Exploratory, not prescriptive
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-chorus-md bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<div className="mb-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Shield.png"
|
||||
alt=""
|
||||
className="h-8 w-8 mx-auto dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Shield.png"
|
||||
alt=""
|
||||
className="hidden h-8 w-8 mx-auto dark:block"
|
||||
/>
|
||||
</div>
|
||||
<h4 className="font-semibold mb-2">Trustworthiness</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Beauty with clarity, emphasizing transparency
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-chorus-lg p-chorus-md bg-mulberry-50 dark:bg-mulberry-800/30 border border-mulberry-200 dark:border-mulberry-700">
|
||||
<p className="text-sm font-medium text-mulberry-800 dark:text-mulberry-300 text-center">
|
||||
It visually separates our work from glossy corporate diagrams, reinforcing that our approach is more <strong>observational, careful, and context-aware</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Final Message */}
|
||||
<div className="bg-ocean-50 dark:bg-ocean-900/20 border border-ocean-200 p-chorus-lg dark:border-ocean-800">
|
||||
<div className="text-center">
|
||||
<h3 className="text-xl font-semibold text-ocean-800 dark:text-ocean-300 mb-chorus-sm">
|
||||
Field Guide Quality
|
||||
</h3>
|
||||
<p className="text-ocean-700 dark:text-ocean-300">
|
||||
With this approach, your diagrams will feel like they belong to the same world as your <em>Field Guide posts</em>. Each image will look like a naturalist's study plate — timeless, precise, and unique.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,364 @@
|
||||
export default function PressMediaKit() {
|
||||
return (
|
||||
<div className="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-950 to-white from-sand-200">
|
||||
<section id="press-media-kit" className="pt-chorus-xxl">
|
||||
<div className="max-w-5xl mx-auto mb-chorus-lg px-chorus-lg">
|
||||
|
||||
<header className="border-b border-nickel-200 pb-chorus-lg dark:border-mulberry-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight text-carbon-950 dark:text-white">
|
||||
Press & Media Kit
|
||||
</h1>
|
||||
<p className="mt-chorus-sm text-lg text-carbon-600 dark:text-mulberry-200">
|
||||
Guidelines and assets for media coverage of CHORUS
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Paper_Plane.png"
|
||||
alt="Press & Media"
|
||||
className="h-12 w-12 dark:hidden opacity-60"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Paper_Plane.png"
|
||||
alt="Press & Media"
|
||||
className="hidden h-12 w-12 dark:block opacity-60"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="mt-chorus-xl space-y-chorus-xl">
|
||||
|
||||
{/* Core Narrative Section */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800 rounded">
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg flex items-center gap-3">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Message.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Message.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
Core Narrative
|
||||
</h2>
|
||||
<div className="prose prose-carbon dark:prose-invert max-w-none">
|
||||
<p className="text-lg mb-chorus-md">
|
||||
We set expectations for how <strong>journalists, analysts, and partners</strong> should talk about the project without limiting freedom of expression or controlling the narrative. The goal: suggest how to shape the narrative style only, <em>without over-controlling it</em>.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-chorus-md">
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-md border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold mb-2 text-carbon-950 dark:text-white">What We Are:</h4>
|
||||
<ul className="text-sm space-y-1 text-carbon-600 dark:text-mulberry-300">
|
||||
<li>• <strong>Not just another AI tool</strong></li>
|
||||
<li>• Building a <strong>secure, context-aware system for distributed reasoning and collaboration</strong></li>
|
||||
<li>• Our design borrows from <strong>ecology and natural sciences metaphors</strong></li>
|
||||
<li>• Focus is on <strong>trust, auditability, and compartmentalization</strong>, not hype</li>
|
||||
<li>• A small dedicated team of Aussie AI enthusiasts with social and ecological conscience</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Suggested Language */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg flex items-center gap-3">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Text.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Text.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
Suggested Language for Outlets
|
||||
</h2>
|
||||
|
||||
<div className="grid gap-chorus-md">
|
||||
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800">
|
||||
<div className="space-y-chorus-md">
|
||||
<div className="p-chorus-sm bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-700">
|
||||
<p className="text-sm font-medium text-emerald-800 dark:text-emerald-300 mb-1">Recommended Framing:</p>
|
||||
<p className="text-sm italic text-emerald-700 dark:text-emerald-300">
|
||||
"A <em>field guide to automation and intelligence systems</em> — mapping the strengths and limits of today's tools while charting a new course for distributed collaboration."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-chorus-sm bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-700">
|
||||
<p className="text-sm font-medium text-emerald-800 dark:text-emerald-300 mb-1">Approach Description:</p>
|
||||
<p className="text-sm italic text-emerald-700 dark:text-emerald-300">
|
||||
"Blends rigor with curiosity: academic-inspired clarity and natural sciences observation meets artistic expression and creative problem solving."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-chorus-sm bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-700">
|
||||
<p className="text-sm font-medium text-emerald-800 dark:text-emerald-300 mb-1">Brand Differentiation:</p>
|
||||
<p className="text-sm italic text-emerald-700 dark:text-emerald-300">
|
||||
"Differentiates itself from glossy AI branding by leaning into timeless aesthetics and a focus on trust."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-chorus-sm bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-700">
|
||||
<p className="text-sm font-medium text-emerald-800 dark:text-emerald-300 mb-1">Mission Statement:</p>
|
||||
<p className="text-sm italic text-emerald-700 dark:text-emerald-300">
|
||||
"Not just automating workflows, but building the protocols for how humans and machines reason together securely as intellectual equals."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Messaging Boundaries */}
|
||||
<div className="grid md:grid-cols-2 gap-chorus-lg">
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 p-chorus-lg dark:border-red-800">
|
||||
<h3 className="text-xl font-semibold text-red-800 dark:text-red-300 mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Close.png"
|
||||
alt=""
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
What to Avoid
|
||||
</h3>
|
||||
<ul className="text-sm space-y-2 text-red-700 dark:text-red-300">
|
||||
<li>• Don't frame us as "the next Zapier" or "the next LangChain"</li>
|
||||
<li>• Don't reduce to buzzwords like "game-changing AI" or "the ChatGPT of X"</li>
|
||||
<li>• Don't oversell GPU/LLM providers as our identity — they're interchangeable parts</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-lg dark:border-emerald-800">
|
||||
<h3 className="text-xl font-semibold text-emerald-800 dark:text-emerald-300 mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png"
|
||||
alt=""
|
||||
className="h-5 w-5"
|
||||
/>
|
||||
What to Emphasize
|
||||
</h3>
|
||||
<ul className="text-sm space-y-2 text-emerald-700 dark:text-emerald-300">
|
||||
<li>• <strong>The system, the philosophy, and the trust model</strong></li>
|
||||
<li>• Context-aware distributed reasoning</li>
|
||||
<li>• Ecological metaphors and naturalist approach</li>
|
||||
<li>• Australian team with social conscience</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Press Kit Contents */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg flex items-center gap-3">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/File/File_Folder.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/File/File_Folder.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
Press Kit Contents
|
||||
</h2>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
|
||||
{/* Written Materials */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800">
|
||||
<h3 className="text-xl font-semibold text-carbon-950 dark:text-white mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Book.png"
|
||||
alt=""
|
||||
className="h-5 w-5 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Book.png"
|
||||
alt=""
|
||||
className="hidden h-5 w-5 dark:block"
|
||||
/>
|
||||
Written Materials
|
||||
</h3>
|
||||
<div className="space-y-chorus-sm">
|
||||
<div className="p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold text-sm mb-1">About Page / One-Pager</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300">Clear, plain language description of what we are</p>
|
||||
</div>
|
||||
<div className="p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold text-sm mb-1">Founder Bio</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300">Your voice: practical, skeptical, forward-looking</p>
|
||||
</div>
|
||||
<div className="p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold text-sm mb-1">Fact Sheet</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300">Modules (BZZZ, HMMM, COOEE, UCXL), dates, milestones</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Visual Assets */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800">
|
||||
<h3 className="text-xl font-semibold text-carbon-950 dark:text-white mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Media/Image_01.png"
|
||||
alt=""
|
||||
className="h-5 w-5 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Media/Image_01.png"
|
||||
alt=""
|
||||
className="hidden h-5 w-5 dark:block"
|
||||
/>
|
||||
Visual Assets
|
||||
</h3>
|
||||
<div className="space-y-chorus-sm">
|
||||
<div className="p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold text-sm mb-1">Logo Variations</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300">Monochrome + inverted versions</p>
|
||||
</div>
|
||||
<div className="p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold text-sm mb-1">Sample "Plates"</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300">3–5 illustrative diagrams in field guide style</p>
|
||||
</div>
|
||||
<div className="p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold text-sm mb-1">Photography</h4>
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300">IR + B&W field imagery</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Architecture Diagram */}
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-lg border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-medium mb-chorus-sm flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Diagram.png"
|
||||
alt=""
|
||||
className="h-5 w-5 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Diagram.png"
|
||||
alt=""
|
||||
className="hidden h-5 w-5 dark:block"
|
||||
/>
|
||||
High-Level Architecture Diagram
|
||||
</h4>
|
||||
<div className="aspect-video bg-white dark:bg-mulberry-900 border-2 border-dashed border-sand-300 dark:border-mulberry-700 flex items-center justify-center">
|
||||
<p className="text-sm text-carbon-500 dark:text-mulberry-400 text-center">
|
||||
[Architecture Diagram Placeholder]<br/>
|
||||
Field guide style diagram showing<br/>
|
||||
system modules and relationships
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quotes & Boilerplate */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800">
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg flex items-center gap-3">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Quote.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Quote.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
Quotes & Boilerplate
|
||||
</h2>
|
||||
|
||||
<div className="grid gap-chorus-md">
|
||||
<div className="p-chorus-md bg-ocean-50 dark:bg-ocean-900/20 border border-ocean-200 dark:border-ocean-800">
|
||||
<h4 className="font-semibold text-ocean-800 dark:text-ocean-300 mb-2">Philosophy Quote:</h4>
|
||||
<blockquote className="text-sm italic text-ocean-700 dark:text-ocean-300 border-l-4 border-ocean-300 dark:border-ocean-600 pl-4">
|
||||
"Our system is about context over time, not just computation of convenience."
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div className="p-chorus-md bg-ocean-50 dark:bg-ocean-900/20 border border-ocean-200 dark:border-ocean-800">
|
||||
<h4 className="font-semibold text-ocean-800 dark:text-ocean-300 mb-2">Approach Quote:</h4>
|
||||
<blockquote className="text-sm italic text-ocean-700 dark:text-ocean-300 border-l-4 border-ocean-300 dark:border-ocean-600 pl-4">
|
||||
"We see software ecosystems the way naturalists see forests — full of interdependencies and hidden patterns that explain deeper wisdom."
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-chorus-md p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300">
|
||||
<strong>Note:</strong> These quotes are designed to be used in press materials and interviews to maintain consistent messaging about our approach and philosophy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Visual Examples Placeholder */}
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-lg border border-sand-200 dark:border-carbon-700">
|
||||
<h3 className="text-xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg">Visual Asset Examples</h3>
|
||||
|
||||
<div className="grid gap-chorus-md md:grid-cols-3">
|
||||
<div>
|
||||
<h4 className="font-medium mb-2">Logo Variations</h4>
|
||||
<div className="aspect-square bg-white dark:bg-mulberry-900 border-2 border-dashed border-sand-300 dark:border-mulberry-700 flex items-center justify-center">
|
||||
<p className="text-xs text-carbon-500 dark:text-mulberry-400 text-center">
|
||||
[Logo Examples]<br/>
|
||||
Monochrome<br/>
|
||||
& Inverted
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-medium mb-2">Field Guide Plates</h4>
|
||||
<div className="aspect-square bg-white dark:bg-mulberry-900 border-2 border-dashed border-sand-300 dark:border-mulberry-700 flex items-center justify-center">
|
||||
<p className="text-xs text-carbon-500 dark:text-mulberry-400 text-center">
|
||||
[Diagram Examples]<br/>
|
||||
Watercolor wash<br/>
|
||||
Copperplate lines
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-medium mb-2">Photography Style</h4>
|
||||
<div className="aspect-square bg-white dark:bg-mulberry-900 border-2 border-dashed border-sand-300 dark:border-mulberry-700 flex items-center justify-center">
|
||||
<p className="text-xs text-carbon-500 dark:text-mulberry-400 text-center">
|
||||
[Photo Examples]<br/>
|
||||
IR & B&W<br/>
|
||||
Nature imagery
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Final Message */}
|
||||
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-lg dark:border-emerald-800">
|
||||
<div className="text-center">
|
||||
<h3 className="text-xl font-semibold text-emerald-800 dark:text-emerald-300 mb-chorus-sm flex items-center justify-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Trophy.png"
|
||||
alt=""
|
||||
className="h-6 w-6"
|
||||
/>
|
||||
New Category Definition
|
||||
</h3>
|
||||
<p className="text-emerald-700 dark:text-emerald-300">
|
||||
With this in place, we influence how outlets frame us: not as "another AI startup," but as a <strong>new category</strong> with its own philosophy, language, and visual identity.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -12,6 +12,53 @@ export default function TypographyPage() {
|
||||
The CHORUS typography system is designed for clarity, hierarchy, and accessibility across all devices.
|
||||
</p>
|
||||
|
||||
{/* Bauhaus Influence */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800 rounded mb-chorus-lg">
|
||||
<h3 className="text-xl font-semibold text-carbon-950 dark:text-white mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Bulb.png"
|
||||
alt=""
|
||||
className="h-5 w-5 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Bulb.png"
|
||||
alt=""
|
||||
className="hidden h-5 w-5 dark:block"
|
||||
/>
|
||||
Bauhaus Typography Foundation
|
||||
</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 mb-chorus-md">
|
||||
Our typography is rooted in <strong>Bauhaus principles</strong> — providing rational foundation through clarity, structure, and disciplined hierarchy. This reflects the engineered rigor of our systems while keeping compositions clean, functional, and legible.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-chorus-md md:grid-cols-2">
|
||||
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-md dark:border-emerald-700">
|
||||
<h4 className="font-semibold text-emerald-800 dark:text-emerald-300 mb-2">Typography Do's</h4>
|
||||
<ul className="text-sm space-y-1 text-emerald-700 dark:text-emerald-300">
|
||||
<li>• Use approved humanist sans or geometric sans-serifs (Inter, Helvetica Neue, Futura, Avenir)</li>
|
||||
<li>• Emphasize clear hierarchy with grid layouts and generous spacing</li>
|
||||
<li>• Favor all-caps headers with restrained weight OR mixed case with stronger weight</li>
|
||||
<li>• Never mix both approaches in the same document</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 p-chorus-md dark:border-red-700">
|
||||
<h4 className="font-semibold text-red-800 dark:text-red-300 mb-2">Typography Don'ts</h4>
|
||||
<ul className="text-sm space-y-1 text-red-700 dark:text-red-300">
|
||||
<li>• Avoid trendy display fonts, script styles, or overuse of italics</li>
|
||||
<li>• Don't mix too many typefaces — consistency is critical</li>
|
||||
<li>• Never combine all-caps headers with mixed case headers in one document</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-chorus-md p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
|
||||
<p className="text-xs text-carbon-600 dark:text-mulberry-300">
|
||||
<strong>Cross-reference:</strong> See the <a href="/visual-identity" className="text-ocean-600 dark:text-ocean-400 hover:underline">Visual Identity page</a> for more about our Bauhaus influence in the complete design system.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md mb-chorus-lg">
|
||||
<h4 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100">✓ Complete System Scaling</h4>
|
||||
<p className="text-eucalyptus-800 dark:text-eucalyptus-200">
|
||||
|
||||
@@ -19,58 +19,304 @@ export default function VisualIdentityPage() {
|
||||
|
||||
<div className="mt-chorus-xl space-y-chorus-xl">
|
||||
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg">
|
||||
{/* Design Philosophy */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800 rounded">
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg flex items-center gap-3">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Bulb.png"
|
||||
alt=""
|
||||
className="h-6 w-6 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Bulb.png"
|
||||
alt=""
|
||||
className="hidden h-6 w-6 dark:block"
|
||||
/>
|
||||
Design Philosophy
|
||||
</h2>
|
||||
<div className="prose prose-carbon dark:prose-invert max-w-none">
|
||||
<p>
|
||||
The CHORUS visual identity system is built on principles of clarity,
|
||||
sophistication, and accessibility. Each element serves a purpose in
|
||||
creating a cohesive and memorable brand experience.
|
||||
<p className="text-lg mb-chorus-md">
|
||||
Our visual identity is deliberately eclectic — a fusion of <strong>Bauhaus typography, natural sciences field journals, and B&W and infrared photography</strong>. Each element serves a purpose:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-chorus-lg">
|
||||
<div className=" border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h3 className="font-semibold text-carbon-950 dark:text-white mb-chorus-md">Logo System</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 text-sm mb-chorus-md">
|
||||
Complete logo variations and usage guidelines
|
||||
</p>
|
||||
<a href="/logo" className="text-ocean-600 dark:text-ocean-400 hover:underline text-sm">
|
||||
View Logo Guidelines →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className=" border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h3 className="font-semibold text-carbon-950 dark:text-white mb-chorus-md">Color Palette</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 text-sm mb-chorus-md">
|
||||
Brand colors with accessibility considerations
|
||||
</p>
|
||||
<a href="/colors" className="text-ocean-600 dark:text-ocean-400 hover:underline text-sm">
|
||||
View Color System →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className=" border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h3 className="font-semibold text-carbon-950 dark:text-white mb-chorus-md">Typography</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 text-sm mb-chorus-md">
|
||||
Font hierarchy and typographic principles
|
||||
</p>
|
||||
<a href="/typography" className="text-ocean-600 dark:text-ocean-400 hover:underline text-sm">
|
||||
View Typography →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className=" border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h3 className="font-semibold text-carbon-950 dark:text-white mb-chorus-md">Iconography</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 text-sm mb-chorus-md">
|
||||
Icon system and visual symbols
|
||||
</p>
|
||||
<a href="/iconography" className="text-ocean-600 dark:text-ocean-400 hover:underline text-sm">
|
||||
View Icons →
|
||||
</a>
|
||||
|
||||
<div className="grid gap-chorus-md md:grid-cols-3 mt-chorus-lg">
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-md border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold mb-2 flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Text.png"
|
||||
alt=""
|
||||
className="h-4 w-4 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Text.png"
|
||||
alt=""
|
||||
className="hidden h-4 w-4 dark:block"
|
||||
/>
|
||||
Bauhaus Typography
|
||||
</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Provides the rational foundation — clarity, structure, and disciplined hierarchy. Reflects the engineered rigor of our systems.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-md border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold mb-2 flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Diagram.png"
|
||||
alt=""
|
||||
className="h-4 w-4 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Diagram.png"
|
||||
alt=""
|
||||
className="hidden h-4 w-4 dark:block"
|
||||
/>
|
||||
Field Journal Illustration
|
||||
</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Introduces human, observational quality. Like naturalist plates — annotated, contextual, and exploratory.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-md border border-sand-200 dark:border-carbon-700">
|
||||
<h4 className="font-semibold mb-2 flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Media/Image_01.png"
|
||||
alt=""
|
||||
className="h-4 w-4 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Media/Image_01.png"
|
||||
alt=""
|
||||
className="hidden h-4 w-4 dark:block"
|
||||
/>
|
||||
Infrared Photography
|
||||
</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Adds revelation — seeing beneath the surface, uncovering hidden patterns and structures invisible to the naked eye.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-chorus-lg p-chorus-md bg-mulberry-50 dark:bg-mulberry-800/30 border border-mulberry-200 dark:border-mulberry-700">
|
||||
<p className="text-sm font-medium text-mulberry-800 dark:text-mulberry-300">
|
||||
Together, these influences create a brand voice that is <strong>timeless, precise, and curious</strong>. It distinguishes us in a market saturated with glossy "AI slop" and derivative interfaces. Ours signals both <strong>scientific seriousness and creative exploration</strong> — a system built for depth, not trend.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Visual Elements Grid */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg">
|
||||
Visual Elements
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-chorus-lg">
|
||||
<div className="border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h3 className="font-semibold text-carbon-950 dark:text-white mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png"
|
||||
alt=""
|
||||
className="h-4 w-4 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png"
|
||||
alt=""
|
||||
className="hidden h-4 w-4 dark:block"
|
||||
/>
|
||||
Logo System
|
||||
</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 text-sm mb-chorus-md">
|
||||
Complete logo variations and usage guidelines
|
||||
</p>
|
||||
<a href="/logo" className="text-ocean-600 dark:text-ocean-400 hover:underline text-sm">
|
||||
View Logo Guidelines →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h3 className="font-semibold text-carbon-950 dark:text-white mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Text.png"
|
||||
alt=""
|
||||
className="h-4 w-4 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Text.png"
|
||||
alt=""
|
||||
className="hidden h-4 w-4 dark:block"
|
||||
/>
|
||||
Typography
|
||||
</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 text-sm mb-chorus-md">
|
||||
Bauhaus-inspired font hierarchy and typographic principles
|
||||
</p>
|
||||
<a href="/typography" className="text-ocean-600 dark:text-ocean-400 hover:underline text-sm">
|
||||
View Typography →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h3 className="font-semibold text-carbon-950 dark:text-white mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Swatches_Palette.png"
|
||||
alt=""
|
||||
className="h-4 w-4 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Swatches_Palette.png"
|
||||
alt=""
|
||||
className="hidden h-4 w-4 dark:block"
|
||||
/>
|
||||
Color Palette
|
||||
</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 text-sm mb-chorus-md">
|
||||
Brand colors with accessibility considerations
|
||||
</p>
|
||||
<a href="/colors" className="text-ocean-600 dark:text-ocean-400 hover:underline text-sm">
|
||||
View Color System →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h3 className="font-semibold text-carbon-950 dark:text-white mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Main_Component.png"
|
||||
alt=""
|
||||
className="h-4 w-4 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Main_Component.png"
|
||||
alt=""
|
||||
className="hidden h-4 w-4 dark:block"
|
||||
/>
|
||||
Iconography
|
||||
</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 text-sm mb-chorus-md">
|
||||
Icon system and visual symbols
|
||||
</p>
|
||||
<a href="/iconography" className="text-ocean-600 dark:text-ocean-400 hover:underline text-sm">
|
||||
View Icons →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h3 className="font-semibold text-carbon-950 dark:text-white mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Diagram.png"
|
||||
alt=""
|
||||
className="h-4 w-4 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Diagram.png"
|
||||
alt=""
|
||||
className="hidden h-4 w-4 dark:block"
|
||||
/>
|
||||
Diagrams
|
||||
</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 text-sm mb-chorus-md">
|
||||
Field guide-inspired diagramming and illustration style
|
||||
</p>
|
||||
<a href="/diagrams" className="text-ocean-600 dark:text-ocean-400 hover:underline text-sm">
|
||||
View Diagram Guidelines →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h3 className="font-semibold text-carbon-950 dark:text-white mb-chorus-md flex items-center gap-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Media/Image_01.png"
|
||||
alt=""
|
||||
className="h-4 w-4 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Media/Image_01.png"
|
||||
alt=""
|
||||
className="hidden h-4 w-4 dark:block"
|
||||
/>
|
||||
Photography
|
||||
</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 text-sm mb-chorus-md">
|
||||
Infrared and B&W photography guidelines and art direction
|
||||
</p>
|
||||
<a href="/art-direction" className="text-ocean-600 dark:text-ocean-400 hover:underline text-sm">
|
||||
View Art Direction →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-lg border border-sand-200 dark:border-carbon-700">
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg">
|
||||
Summary
|
||||
</h2>
|
||||
<div className="prose prose-carbon dark:prose-invert max-w-none">
|
||||
<p className="text-lg mb-chorus-md text-center">
|
||||
Every visual element should feel like it belongs to a <strong>field journal of modern intelligence systems</strong>:
|
||||
</p>
|
||||
<div className="grid gap-chorus-md md:grid-cols-3">
|
||||
<div className="text-center p-chorus-md bg-white dark:bg-mulberry-900 border border-nickel-200 dark:border-mulberry-800">
|
||||
<div className="mb-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Text.png"
|
||||
alt=""
|
||||
className="h-8 w-8 mx-auto dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Text.png"
|
||||
alt=""
|
||||
className="hidden h-8 w-8 mx-auto dark:block"
|
||||
/>
|
||||
</div>
|
||||
<h4 className="font-semibold mb-2">Structured</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
by Bauhaus typography
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-chorus-md bg-white dark:bg-mulberry-900 border border-nickel-200 dark:border-mulberry-800">
|
||||
<div className="mb-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Diagram.png"
|
||||
alt=""
|
||||
className="h-8 w-8 mx-auto dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Diagram.png"
|
||||
alt=""
|
||||
className="hidden h-8 w-8 mx-auto dark:block"
|
||||
/>
|
||||
</div>
|
||||
<h4 className="font-semibold mb-2">Illustrated</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
like a naturalist's plate
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-chorus-md bg-white dark:bg-mulberry-900 border border-nickel-200 dark:border-mulberry-800">
|
||||
<div className="mb-2">
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Media/Image_01.png"
|
||||
alt=""
|
||||
className="h-8 w-8 mx-auto dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Media/Image_01.png"
|
||||
alt=""
|
||||
className="hidden h-8 w-8 mx-auto dark:block"
|
||||
/>
|
||||
</div>
|
||||
<h4 className="font-semibold mb-2">Photographed</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
like an unseen spectrum of reality
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -42,10 +42,12 @@ const Sidebar = () => {
|
||||
icon: 'Shape/Circle',
|
||||
items: [
|
||||
{ href: '/visual-identity', section: 'visual-identity', icon: 'Shape/Circle', label: 'Visual Identity' },
|
||||
{ href: '/art-direction', section: 'art-direction', icon: 'Media/Image_01', label: 'Art Direction' },
|
||||
{ href: '/logo', section: 'logo', icon: 'Interface/Star', label: 'Logo System' },
|
||||
{ href: '/typography', section: 'typography', icon: 'Edit/Text', label: 'Typography' },
|
||||
{ href: '/colors', section: 'colors', icon: 'Edit/Swatches_Palette', label: 'Color Palette' },
|
||||
{ href: '/iconography', section: 'iconography', icon: 'Interface/Main_Component', label: 'Iconography' },
|
||||
{ href: '/diagrams', section: 'diagrams', icon: 'Interface/Diagram', label: 'Diagrams' },
|
||||
{ href: '/accessibility', section: 'accessibility', icon: 'Interface/Heart_01', label: 'Accessibility' },
|
||||
{ href: '/components', section: 'components', icon: 'Environment/Puzzle', label: 'Components' },
|
||||
{ href: '/motion', section: 'motion', icon: 'Interface/Trending_Up', label: 'Motion System' },
|
||||
@@ -58,8 +60,10 @@ const Sidebar = () => {
|
||||
icon: 'Communication/Chat',
|
||||
items: [
|
||||
{ href: '/culture', section: 'culture', icon: 'Environment/Bulb', label: 'Culture' },
|
||||
{ href: '/copywriting', section: 'copywriting', icon: 'Edit/Text', label: 'Copywriting' },
|
||||
{ href: '/communications', section: 'communications', icon: 'Communication/Chat', label: 'Language Support' },
|
||||
{ href: '/public-relations', section: 'public-relations', icon: 'Communication/Paper_Plane', label: 'Public Relations' },
|
||||
{ href: '/press-media-kit', section: 'press-media-kit', icon: 'File/File_Folder', label: 'Press & Media Kit' },
|
||||
{ href: '/investor-relations', section: 'investor-relations', icon: 'Interface/Chart_Line', label: 'Investor Relations' },
|
||||
{ href: '/collaborators', section: 'collaborators', icon: 'User/Users_Group', label: 'Collaborators' },
|
||||
{ href: '/social-media', section: 'social-media', icon: 'Communication/Share_iOS_Export', label: 'Social Media' },
|
||||
|
||||
Reference in New Issue
Block a user