From 284942fb6caf69e205baf270205b970ccc8ffa49 Mon Sep 17 00:00:00 2001 From: tony Date: Tue, 2 Sep 2025 13:28:31 +1000 Subject: [PATCH] Add comprehensive brand guidelines to brand guide site MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .../src/app/art-direction/page.tsx | 334 +++++++++++++ .../src/app/copywriting/page.tsx | 342 +++++++++++++ .../src/app/diagrams/page.tsx | 462 ++++++++++++++++++ .../src/app/press-media-kit/page.tsx | 364 ++++++++++++++ .../src/app/typography/page.tsx | 47 ++ .../src/app/visual-identity/page.tsx | 338 +++++++++++-- .../src/components/Sidebar.tsx | 4 + 7 files changed, 1845 insertions(+), 46 deletions(-) create mode 100644 brand-assets/brand-style-guide-site/src/app/art-direction/page.tsx create mode 100644 brand-assets/brand-style-guide-site/src/app/copywriting/page.tsx create mode 100644 brand-assets/brand-style-guide-site/src/app/diagrams/page.tsx create mode 100644 brand-assets/brand-style-guide-site/src/app/press-media-kit/page.tsx diff --git a/brand-assets/brand-style-guide-site/src/app/art-direction/page.tsx b/brand-assets/brand-style-guide-site/src/app/art-direction/page.tsx new file mode 100644 index 0000000..27af196 --- /dev/null +++ b/brand-assets/brand-style-guide-site/src/app/art-direction/page.tsx @@ -0,0 +1,334 @@ +import ScrollReveal from '@/components/ScrollReveal'; + +export default function ArtDirectionPage() { + return ( +
+
+ + Black-and-white macro of eucalyptus end grain, concentric rings and a hairline crack—evokes layered time. + + + +
+ +

Photography & Imagery

+

+ 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 true B&W, documentary-lean, and free of human artifacts. +

+ + {/* Visual Identity Connection */} +
+

+ + + Infrared Photography Foundation +

+

+ Infrared photography 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. +

+ +
+
+

Photography Do's

+
    +
  • • High-contrast B&W infrared or false-color IR with natural subjects
    • +
  • • Highlight hidden textures (leaf veins, canopy structures, coral, termite mounds)
    • +
  • • Keep tone observational, almost documentary
    • +
  • • Look for mathematical, symmetrical, or self-organizing structure
    • +
+
+ +
+

Photography Don'ts

+
    +
  • • Avoid stocky, staged human imagery ("smiling people in offices")
    • +
  • • Don't use saturated, lifestyle-style photos — they break the scientific tone
    • +
  • • No generic tech clichés (server racks, neon circuit boards)
    • +
+
+
+ +
+

+ Cross-reference: See the Visual Identity page for how infrared photography integrates with our complete design philosophy including Bauhaus typography and field journal illustration. +

+
+
+ + + +
+

Core principles

+
    +
  • Truth-effect: Real photographs, not illustrations or composites. No synthetic “data” overlays.
    • +
  • Australian, untouched: Native species, landscapes, textures. No human objects, infrastructure, or tracks.
    • +
  • Metaphor first: Every subject must embody at least one of our pillars—structure, intelligence, time, growth, ecosystems, emergence.
    • +
  • High contrast, fine detail: Deep blacks, crisp midtones, visible micro-texture (grain, fibers, pores).
    • +
  • Modular: Images should stand alone or grid together without stylistic clash.
    • +
  • Brand echo (optional): A subtle circular light falloff (“ring”) at 2–4% opacity—felt, never seen.
    • +
+
+ + + +
+

Visual motifs & how to use them

+ +
+
+

1) Time & Accretion

+
+
+ Black-and-white macro of eucalyptus end grain, concentric rings and a hairline crack—evokes layered time. +

Tree growth rings: Temporal layers and auditability for roadmaps and governance.

+
+
+ Black-and-white of layered microbial rock formations, showing deep time and iterative deposition. +

Stromatolites: Deep time and iterative deposition for foundations and first principles.

+
+
+
+ +
+

2) Structure & Emergent Geometry

+
+
+ Black-and-white macro of termite mound interior, showing ventilation lattices and chambers—evokes distributed control. +

Termite mound interiors: Distributed control and self-regulation for orchestration and load-balancing.

+
+
+ Black-and-white aerial of eucalyptus canopy, forming emergent boundaries and negative-space networks—evokes graph partitioning. +

Aerial canopy occlusion: Graph partitioning for clustering, sharding, and routing.

+
+
+
+ +
+

3) Growth & Recurrence

+
+
+ Black-and-white of a fern frond unfurling, showing fractal patterns—evokes recursion and expansion. +

Ferns: Recursion and expansion for scaling and onboarding.

+
+
+ Black-and-white macro of a Banksia cone, with repeating modules—evokes indexed storage and redundancy. +

Banksia cones: Indexed storage and redundancy for indexing and caching.

+
+
+
+ +
+

4) Signals & Flow

+
+
+ Black-and-white aerial of river braids, showing dynamic routing and back-pressure—evokes scheduling and retries. +

River braids: Dynamic routing for scheduling and congestion control.

+
+
+ Black-and-white of peeling eucalyptus bark, showing layers—evokes rolling updates and surface renewal. +

Eucalyptus bark sheeting: Rolling updates and surface renewal for upgrade paths and migrations.

+
+
+
+
+
+ + + +
+

Composition & tone

+
    +
  • Format: Prefer portrait 4:5 for social (1080×1350), landscape 16:9 for web hero, square 1:1 for grids.
    • +
  • Safe zones: Keep type/logo inside a 6–8% inset.
    • +
  • Subject dominance: 1 clear motif per frame. Avoid busy composites.
    • +
  • Negative space: Intentionally reserve clean bands for headlines.
    • +
  • Motion (video): If used, ultra-slow push or light sweep only (2–3% over 4–8 s).
    • +
+
+ + + +
+

Post-processing standard (B&W only)

+
    +
  1. Convert to monochrome (no tint/sepia).
    2. +
  2. Curves: gentle S-curve; protect highlights from clipping.
    3. +
  3. Local contrast: texture/clarity +10–20; modest sharpening.
    4. +
  4. Grain: 2–5% to unify.
    5. +
  5. Optional brand ring: soft elliptical dodge/burn at 2–4% centered on the “organizing nucleus” (pith, node, vertex).
    6. +
  6. Never: fake film borders, heavy vignettes, light leaks, glitch effects, “data” overlays.
    7. +
+
+ + + +
+

Do / Don’t

+
+
+

Do

+
    +
  • Use raking light and macro to reveal micro-structure.
    • +
  • Prefer abstraction over literal “hero animal” portraits.
    • +
  • Shoot in harsh midday sun when textures pop; underexpose slightly.
    • +
+
+
+

Don’t

+
    +
  • Show people, roads, fences, fire trails, boats, or gear.
    • +
  • Use illustrative icons, neon circuits, fake network lines.
    • +
  • Tone images (no cyanotypes, warm washes).
    • +
+
+
+
+ + + +
+

Shot list starter (Australia-first)

+
    +
  • End-grain cross-sections (fallen snapped limbs only not human-cut, petrified wood would be ideal!), paperbark peels, stringybark sheets.
    • +
  • Termite mound, fossil, or coral interiors (fracture/reveal), not tourist exteriors.
    • +
  • Aerial canopy mosaics and rainforest edge ecotones.
    • +
  • Mangrove pneumatophore fields; root lattices.
    • +
  • Spinifex ripple fields; salt-pan polygon crackle.
    • +
  • Coral texture macros (branching vs massive forms).
    • +
  • Tree fern frond spirals; fern vein networks.
    • +
  • Banksia cones; grass tree (Xanthorrhoea) leaf fans.
    • +
  • River braidplains; oxbow patterns; dune slipfaces.
    • +
  • Fungi, mushrooms, mycelium networks
    • +
  • Macro detail of feathers / plumage.
    • +
+
+ + + +
+

Delivery specs

+
    +
  • Social (portrait): 1080×1350 PNG/JPEG (quality 90+).
    • +
  • Hero (web): 2400×1350 WEBP + 1600×900 fallback.
    • +
  • Grid (brand library): 2048×2048, consistent grain and contrast.
    • +
  • Color master: Keep original full-size RAWs archived; deliver final B&W exports.
    • +
+
+ + + +
+

Decision checklist (before publishing)

+
    +
  • Does the photo show a natural Australian subject with no human artifacts?
    • +
  • Can you point to one pillar (structure/intelligence/time/growth/ecosystems/emergence) the image clearly expresses?
    • +
  • Is the B&W treatment neutral, high-contrast, and grain-truthful?
    • +
  • Is there clean space for type or is the image strong enough to run without it?
    • +
  • Would this image still feel on-brand if placed next to three others from different biomes? (If yes, it’s modular; ship it.)
    • +
+
+ + + +
+

Do / Don’t

+
+
+

Do

+
+ Black-and-white macro shot of stringybark with harsh, raking light revealing deep texture and abstract patterns. +

DO: Use raking light and macro to reveal micro-structure.

+
+
    +
  • Use raking light and macro to reveal micro-structure.
    • +
  • Prefer abstraction over literal “hero animal” portraits.
    • +
  • Shoot in harsh midday sun when textures pop; underexpose slightly.
    • +
+
+
+

Don’t

+
+ A color-toned image of a forest with a person walking on a path, illustrating multiple 'don't' examples. +

DON'T: Show people, roads, or use color toning.

+
+
    +
  • Show people, roads, fences, fire trails, boats, or gear.
    • +
  • Use illustrative icons, neon circuits, fake network lines.
    • +
  • Tone images (no cyanotypes, warm washes).
    • +
+
+
+
+ + + +
+

Addendum — Infrared (IR) Imagery for Structure Discovery

+

+ This is an addendum to our imagery section — it keeps the B&W discipline while revealing structure you can’t see in visible light. +

+
+ Infrared (near-IR) black-and-white aerial of eucalyptus canopy — bright leaves, dark voids forming network-like negative space. +

Near-IR reveals canopy boundaries—local rules, global structure.

+
+

Why use IR

+
    +
  • Reveals non-obvious structure: Vegetation reflects strongly in near-IR (NIR) → canopy boundaries pop; stress/drought reduce reflectance → natural contrast.
    • +
  • Separates materials: Sky and water go very dark in NIR; healthy leaves go very bright (Wood effect) → clean masks, graph-like negative spaces.
    • +
  • Texture contrast: Bark, termite-mound interiors, spinifex, salt-pan polygons pick up micro-relief under harsh sun that looks flat in RGB.
    • +
+
+ + + +
+

Free Australian National Imagery Resources

+

+ Excellent free imagery resources from Australian national institutions that align perfectly with our brand guidelines. +

+ +
+
+

Major National Collections

+
+

National Library of Australia (NLA)

+
    +
  • Black and white historical photographs covering Australian landscapes, flora, and fauna.
    • +
+ Visit NLA Pictures +
+
+

CSIRO Data Access Portal

+
    +
  • Australian National Herbarium (ANH) specimen images.
    • +
  • High-resolution botanical specimen photography.
    • +
  • Perfect for your Growth & Recurrence and Structure motifs.
    • +
+ Visit CSIRO Data Access Portal +
+
+ +
+

Strategic Recommendations

+

Primary Sources:

+
    +
  1. CSIRO Herbarium Collections - Perfect for your Banksia cones, fern spirals, and coral morphologies
    2. +
  2. State Library Wikimedia Commons - Broad landscape and natural subject coverage
    3. +
+
+
+
+ +
+
+
+ ); +} diff --git a/brand-assets/brand-style-guide-site/src/app/copywriting/page.tsx b/brand-assets/brand-style-guide-site/src/app/copywriting/page.tsx new file mode 100644 index 0000000..e26add6 --- /dev/null +++ b/brand-assets/brand-style-guide-site/src/app/copywriting/page.tsx @@ -0,0 +1,342 @@ +export default function Copywriting() { + return ( +
+
+
+ +
+
+
+

+ Copywriting Guidelines +

+

+ Voice, tone, and style guidelines for CHORUS communications +

+
+ Copywriting + Copywriting +
+
+ +
+ + {/* Overall Voice Section */} +
+

+ + + Overall Voice +

+
+

+ Our voice is observational, reflective, and precise. 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. +

+
+
+

We aim to sound:

+
    +
  • • Thoughtful, not promotional
    • +
  • • Curious, not dismissive
    • +
  • • Analytical, not academic
    • +
  • • Confident, but humble
    • +
+
+
+

Visual Identity Note:

+

+ [Placeholder for example of voice alignment with brand visuals - field guide aesthetic] +

+
+
+
+
+ + {/* Tone by Channel */} +
+

+ + + Tone by Channel +

+ +
+ + {/* Social Media */} +
+

+ + + Social Media +

+
+
+

+ Conversational, approachable. Start with a hook that invites curiosity or sparks recognition. +

+
    +
  • • Use metaphors sparingly but effectively (ecosystem, species, patterns)
    • +
  • • End with open-ended questions to encourage discussion
    • +
  • • Keep posts scannable (short paragraphs, line breaks, 1-2 emojis max)
    • +
+
+
+

Example:

+

+ "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?" +

+
+
+
+ + {/* Blogs / Long-Form */} +
+

+ + + Blogs / Long-Form Content +

+
+
+

+ Deeper analysis, but still readable and flowing. +

+
    +
  • • Use metaphors as framing devices (not as gimmicks)
    • +
  • • Organize content with clear sections (Strengths, Limitations, Use Cases)
    • +
  • • Respect other tools — acknowledge achievements before surfacing friction
    • +
  • • Invite reflection at the end
    • +
+
+
+

Example:

+

+ "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..." +

+
+
+
+ + {/* White Papers / Research Notes */} +
+

+ + + White Papers / Research Notes +

+
+
+

+ More formal, structured, citation-friendly. +

+
    +
  • • Use precise language but keep readability a priority
    • +
  • • Frame findings as observations and implications, not just claims
    • +
  • • Introduce diagrams like "plates" in a field guide
    • +
  • • Maintain consistent narrative: what was observed, what it means, why it matters
    • +
+
+
+

Example:

+

+ "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." +

+
+
+
+ +
+
+ + {/* Do's & Don'ts */} +
+
+

+ + Do's +

+
    +
  • • Use metaphors (ecology, species, hidden structures) as subtle framing devices
    • +
  • • Highlight strengths before mentioning limitations
    • +
  • • Ask questions to spark dialogue, not just broadcast opinions
    • +
  • • Keep copy clean, plain, and respectful
    • +
+
+ +
+

+ + Don'ts +

+
    +
  • • Bash other tools or sound adversarial
    • +
  • • Use overblown marketing language ("revolutionary," "game-changing")
    • +
  • • Fall into jargon-heavy, academic prose
    • +
  • • Force metaphors — let them appear naturally
    • +
+
+
+ + {/* Quick Checklist */} +
+

+ + + Copywriting Quick Checklist +

+ +

+ When drafting any social post, blog, or paper, ask yourself: +

+ +
+
+ 1 +
+

Am I observing or overselling?

+

Keep it reflective, not hyped.

+
+
+ +
+ 2 +
+

Have I acknowledged strengths before pointing out limits?

+

Respect builds credibility.

+
+
+ +
+ 3 +
+

Is there at least one metaphor or framing device to aid understanding?

+

Use ecological/field guide imagery subtly.

+
+
+ +
+ 4 +
+

Does the copy end with a question or an invitation to reflect?

+

Spark dialogue, don't just broadcast.

+
+
+ +
+ 5 +
+

Is this written clearly enough that a curious outsider could follow?

+

No jargon walls, no "AI slop."

+
+
+
+ +
+

Important Reminder:

+

+ 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. +

+
+
+ + {/* Summary */} +
+

+ Summary +

+
+

+ Our copywriting reflects the same philosophy as our visuals: observational, structured, curious. +

+
+
+

Social Media

+

We invite conversation

+
+
+

Blogs

+

We offer clear analysis

+
+
+

Papers

+

We present studied observations

+
+
+
+

+ We don't shout or oversell. We point, observe, and question — like a field guide showing the shape of the landscape. +

+
+
+
+ +
+
+
+
+ ); +} \ No newline at end of file diff --git a/brand-assets/brand-style-guide-site/src/app/diagrams/page.tsx b/brand-assets/brand-style-guide-site/src/app/diagrams/page.tsx new file mode 100644 index 0000000..1cb349d --- /dev/null +++ b/brand-assets/brand-style-guide-site/src/app/diagrams/page.tsx @@ -0,0 +1,462 @@ +export default function Diagrams() { + return ( +
+
+
+ +
+
+
+

+ Diagram Style Guide +

+

+ Scientific field guide-inspired diagramming for CHORUS systems +

+
+ Diagrams + Diagrams +
+
+ +
+ + {/* Concept Section */} +
+

+ + + Concept +

+
+

+ Our diagramming style is inspired by scientific field guides: precise, informative, and aesthetically restrained. Instead of sterile vector diagrams, we use illustrative styles (watercolor washes and copperplate-style line drawings) to evoke the tradition of naturalist documentation. +

+
+

+ This reinforces our brand story of mapping ecosystems — in this case, the ecosystem of automation and intelligence tools. +

+
+
+
+ + {/* Field Journal Foundation */} +
+

+ + + Field Journal Illustration Foundation +

+

+ Field journal illustration 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. +

+ +
+
+

Illustration Do's

+
    +
  • • Employ hand-drawn copperplate-style linework
    • +
  • • Use subtle watercolor washes for grouping/context
    • +
  • • Annotate with small labels, numbering, or marginalia — like a scientific plate
    • +
  • • Maintain restraint: diagrams feel studied, not decorative
    • +
+
+ +
+

Illustration Don'ts

+
    +
  • • Avoid cartoonish vector icons or corporate clip-art
    • +
  • • Don't use bright, flat infographic colors
    • +
  • • No glossy gradients, 3D bevels, or skeuomorphic UI
    • +
+
+
+ +
+

+ Cross-reference: See the Visual Identity page for how field journal illustration integrates with our complete design philosophy including Bauhaus typography and infrared photography. +

+
+
+ + {/* Visual Characteristics */} +
+

+ + + Visual Characteristics +

+ +
+ + {/* Medium & Line Work */} +
+

+ + + Medium & Line Work +

+
+
+

Medium:

+
    +
  • • Illustrative watercolors (for depth, texture, and organic variation)
    • +
  • • Fine copperplate-style line drawings (for clarity and technical detail)
    • +
+
+
+

Line Work:

+
    +
  • • Thin, deliberate strokes (0.5–0.7pt equivalent)
    • +
  • • Hatching and stippling instead of heavy shading
    • +
  • • Labels in clear sans-serif or humanist serif font
    • +
+
+
+
+ + {/* Color & Composition */} +
+

+ + + Color & Composition +

+
+
+

Color Palette:

+
    +
  • • Muted, natural washes in grayscale or soft tones
    • +
  • • Occasional single accent color (ochre, teal) for key elements
    • +
  • • Aligned with brand B&W aesthetic
    • +
+
+
+

Composition:

+
    +
  • • Diagrams feel like "plates" in a field guide
    • +
  • • Framed, balanced, often annotated with marginalia
    • +
  • • Key elements isolated and numbered/lettered for reference
    • +
+
+
+
+ +
+
+ + {/* Use Cases */} +
+

+ + + Use Cases +

+ +
+ +
+
+ + +
+
+

System Diagrams

+

+ Show modules (HMMM, COOEE, BZZZ, UCXL, etc.) as if they are "species" plates. Each part annotated, as though in a botanical drawing. +

+
+
+ +
+
+ + +
+
+

Process Flows

+

+ Arrows as fine copperplate strokes with watercolor "washes" behind groups or zones. +

+
+
+ +
+
+ + +
+
+

Comparisons

+

+ Side-by-side "plates" with shared baseline grid, like comparative bird species pages. +

+
+
+ +
+
+ + +
+
+

Iconography

+

+ Subtle, hand-drawn-style icons for recurring elements (keys for encryption, envelopes for messages, etc.). +

+
+
+ +
+ + {/* Placeholder for visual examples */} +
+

Visual Examples

+
+
+

+ [System Diagram Example]
+ Watercolor wash background
+ Copperplate line work +

+
+
+

+ [Process Flow Example]
+ Field guide annotations
+ Numbered elements +

+
+
+
+
+ + {/* Do's & Don'ts */} +
+
+

+ + Do's +

+
    +
  • • Use watercolor textures to suggest context and environment
    • +
  • • Keep line work clean and precise, avoiding cartoonish exaggeration
    • +
  • • Maintain a sense of restraint — diagrams should feel like study plates, not marketing infographics
    • +
  • • Include annotations and marginalia like field guide plates
    • +
+
+ +
+

+ + Don'ts +

+
    +
  • • Use flat, bright corporate vector icons
    • +
  • • Overuse color — keep it subdued
    • +
  • • Sacrifice clarity for style. The diagrams must be both beautiful and functional
    • +
  • • Create glossy, marketing-style infographics
    • +
+
+
+ + {/* Tone & Message */} +
+

+ + + Tone & Message +

+ +

+ This style conveys: +

+ +
+
+
+ + +
+

Authority

+

+ Rooted in tradition of careful observation +

+
+ +
+
+ + +
+

Curiosity

+

+ Exploratory, not prescriptive +

+
+ +
+
+ + +
+

Trustworthiness

+

+ Beauty with clarity, emphasizing transparency +

+
+
+ +
+

+ It visually separates our work from glossy corporate diagrams, reinforcing that our approach is more observational, careful, and context-aware. +

+
+
+ + {/* Final Message */} +
+
+

+ Field Guide Quality +

+

+ With this approach, your diagrams will feel like they belong to the same world as your Field Guide posts. Each image will look like a naturalist's study plate — timeless, precise, and unique. +

+
+
+ +
+
+
+
+ ); +} \ No newline at end of file diff --git a/brand-assets/brand-style-guide-site/src/app/press-media-kit/page.tsx b/brand-assets/brand-style-guide-site/src/app/press-media-kit/page.tsx new file mode 100644 index 0000000..ef1c7c3 --- /dev/null +++ b/brand-assets/brand-style-guide-site/src/app/press-media-kit/page.tsx @@ -0,0 +1,364 @@ +export default function PressMediaKit() { + return ( +
+
+
+ +
+
+
+

+ Press & Media Kit +

+

+ Guidelines and assets for media coverage of CHORUS +

+
+ Press & Media + Press & Media +
+
+ +
+ + {/* Core Narrative Section */} +
+

+ + + Core Narrative +

+
+

+ We set expectations for how journalists, analysts, and partners should talk about the project without limiting freedom of expression or controlling the narrative. The goal: suggest how to shape the narrative style only, without over-controlling it. +

+ +
+
+

What We Are:

+
    +
  • • Not just another AI tool
    • +
  • • Building a secure, context-aware system for distributed reasoning and collaboration
    • +
  • • Our design borrows from ecology and natural sciences metaphors
    • +
  • • Focus is on trust, auditability, and compartmentalization, not hype
    • +
  • • A small dedicated team of Aussie AI enthusiasts with social and ecological conscience
    • +
+
+
+
+
+ + {/* Suggested Language */} +
+

+ + + Suggested Language for Outlets +

+ +
+ +
+
+
+

Recommended Framing:

+

+ "A field guide to automation and intelligence systems — mapping the strengths and limits of today's tools while charting a new course for distributed collaboration." +

+
+ +
+

Approach Description:

+

+ "Blends rigor with curiosity: academic-inspired clarity and natural sciences observation meets artistic expression and creative problem solving." +

+
+ +
+

Brand Differentiation:

+

+ "Differentiates itself from glossy AI branding by leaning into timeless aesthetics and a focus on trust." +

+
+ +
+

Mission Statement:

+

+ "Not just automating workflows, but building the protocols for how humans and machines reason together securely as intellectual equals." +

+
+
+
+ +
+
+ + {/* Messaging Boundaries */} +
+
+

+ + What to Avoid +

+
    +
  • • Don't frame us as "the next Zapier" or "the next LangChain"
    • +
  • • Don't reduce to buzzwords like "game-changing AI" or "the ChatGPT of X"
    • +
  • • Don't oversell GPU/LLM providers as our identity — they're interchangeable parts
    • +
+
+ +
+

+ + What to Emphasize +

+
    +
  • • The system, the philosophy, and the trust model
    • +
  • • Context-aware distributed reasoning
    • +
  • • Ecological metaphors and naturalist approach
    • +
  • • Australian team with social conscience
    • +
+
+
+ + {/* Press Kit Contents */} +
+

+ + + Press Kit Contents +

+ +
+ + {/* Written Materials */} +
+

+ + + Written Materials +

+
+
+

About Page / One-Pager

+

Clear, plain language description of what we are

+
+
+

Founder Bio

+

Your voice: practical, skeptical, forward-looking

+
+
+

Fact Sheet

+

Modules (BZZZ, HMMM, COOEE, UCXL), dates, milestones

+
+
+
+ + {/* Visual Assets */} +
+

+ + + Visual Assets +

+
+
+

Logo Variations

+

Monochrome + inverted versions

+
+
+

Sample "Plates"

+

3–5 illustrative diagrams in field guide style

+
+
+

Photography

+

IR + B&W field imagery

+
+
+
+ +
+ + {/* Architecture Diagram */} +
+

+ + + High-Level Architecture Diagram +

+
+

+ [Architecture Diagram Placeholder]
+ Field guide style diagram showing
+ system modules and relationships +

+
+
+
+ + {/* Quotes & Boilerplate */} +
+

+ + + Quotes & Boilerplate +

+ +
+
+

Philosophy Quote:

+
+ "Our system is about context over time, not just computation of convenience." +
+
+ +
+

Approach Quote:

+
+ "We see software ecosystems the way naturalists see forests — full of interdependencies and hidden patterns that explain deeper wisdom." +
+
+
+ +
+

+ Note: These quotes are designed to be used in press materials and interviews to maintain consistent messaging about our approach and philosophy. +

+
+
+ + {/* Visual Examples Placeholder */} +
+

Visual Asset Examples

+ +
+
+

Logo Variations

+
+

+ [Logo Examples]
+ Monochrome
+ & Inverted +

+
+
+ +
+

Field Guide Plates

+
+

+ [Diagram Examples]
+ Watercolor wash
+ Copperplate lines +

+
+
+ +
+

Photography Style

+
+

+ [Photo Examples]
+ IR & B&W
+ Nature imagery +

+
+
+
+
+ + {/* Final Message */} +
+
+

+ + New Category Definition +

+

+ With this in place, we influence how outlets frame us: not as "another AI startup," but as a new category with its own philosophy, language, and visual identity. +

+
+
+ +
+
+
+
+ ); +} \ No newline at end of file diff --git a/brand-assets/brand-style-guide-site/src/app/typography/page.tsx b/brand-assets/brand-style-guide-site/src/app/typography/page.tsx index 45eb000..b197dd3 100644 --- a/brand-assets/brand-style-guide-site/src/app/typography/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/typography/page.tsx @@ -12,6 +12,53 @@ export default function TypographyPage() { The CHORUS typography system is designed for clarity, hierarchy, and accessibility across all devices.

+ {/* Bauhaus Influence */} +
+

+ + + Bauhaus Typography Foundation +

+

+ Our typography is rooted in Bauhaus principles — providing rational foundation through clarity, structure, and disciplined hierarchy. This reflects the engineered rigor of our systems while keeping compositions clean, functional, and legible. +

+ +
+
+

Typography Do's

+
    +
  • • Use approved humanist sans or geometric sans-serifs (Inter, Helvetica Neue, Futura, Avenir)
    • +
  • • Emphasize clear hierarchy with grid layouts and generous spacing
    • +
  • • Favor all-caps headers with restrained weight OR mixed case with stronger weight
    • +
  • • Never mix both approaches in the same document
    • +
+
+ +
+

Typography Don'ts

+
    +
  • • Avoid trendy display fonts, script styles, or overuse of italics
    • +
  • • Don't mix too many typefaces — consistency is critical
    • +
  • • Never combine all-caps headers with mixed case headers in one document
    • +
+
+
+ +
+

+ Cross-reference: See the Visual Identity page for more about our Bauhaus influence in the complete design system. +

+
+
+

✓ Complete System Scaling

diff --git a/brand-assets/brand-style-guide-site/src/app/visual-identity/page.tsx b/brand-assets/brand-style-guide-site/src/app/visual-identity/page.tsx index 56d5d64..dea2ffe 100644 --- a/brand-assets/brand-style-guide-site/src/app/visual-identity/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/visual-identity/page.tsx @@ -19,58 +19,304 @@ export default function VisualIdentityPage() {

-

+ {/* Design Philosophy */} +
+

+ + Design Philosophy

-

- 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. +

+ Our visual identity is deliberately eclectic — a fusion of Bauhaus typography, natural sciences field journals, and B&W and infrared photography. Each element serves a purpose:

-
- -
-
-

Logo System

-

- Complete logo variations and usage guidelines -

- - View Logo Guidelines → - -
- -
-

Color Palette

-

- Brand colors with accessibility considerations -

- - View Color System → - -
- -
-

Typography

-

- Font hierarchy and typographic principles -

- - View Typography → - -
- -
-

Iconography

-

- Icon system and visual symbols -

- - View Icons → - + +
+
+

+ + + Bauhaus Typography +

+

+ Provides the rational foundation — clarity, structure, and disciplined hierarchy. Reflects the engineered rigor of our systems. +

+
+ +
+

+ + + Field Journal Illustration +

+

+ Introduces human, observational quality. Like naturalist plates — annotated, contextual, and exploratory. +

+
+ +
+

+ + + Infrared Photography +

+

+ Adds revelation — seeing beneath the surface, uncovering hidden patterns and structures invisible to the naked eye. +

+
+
+ +
+

+ Together, these influences create a brand voice that is timeless, precise, and curious. It distinguishes us in a market saturated with glossy "AI slop" and derivative interfaces. Ours signals both scientific seriousness and creative exploration — a system built for depth, not trend. +

+
+ + {/* Visual Elements Grid */} +
+

+ Visual Elements +

+ +
+
+

+ + + Logo System +

+

+ Complete logo variations and usage guidelines +

+ + View Logo Guidelines → + +
+ +
+

+ + + Typography +

+

+ Bauhaus-inspired font hierarchy and typographic principles +

+ + View Typography → + +
+ +
+

+ + + Color Palette +

+

+ Brand colors with accessibility considerations +

+ + View Color System → + +
+ +
+

+ + + Iconography +

+

+ Icon system and visual symbols +

+ + View Icons → + +
+ +
+

+ + + Diagrams +

+

+ Field guide-inspired diagramming and illustration style +

+ + View Diagram Guidelines → + +
+ +
+

+ + + Photography +

+

+ Infrared and B&W photography guidelines and art direction +

+ + View Art Direction → + +
+
+
+ + {/* Summary */} +
+

+ Summary +

+
+

+ Every visual element should feel like it belongs to a field journal of modern intelligence systems: +

+
+
+
+ + +
+

Structured

+

+ by Bauhaus typography +

+
+ +
+
+ + +
+

Illustrated

+

+ like a naturalist's plate +

+
+ +
+
+ + +
+

Photographed

+

+ like an unseen spectrum of reality +

+
+
+
+
+

diff --git a/brand-assets/brand-style-guide-site/src/components/Sidebar.tsx b/brand-assets/brand-style-guide-site/src/components/Sidebar.tsx index 328883b..043027f 100644 --- a/brand-assets/brand-style-guide-site/src/components/Sidebar.tsx +++ b/brand-assets/brand-style-guide-site/src/components/Sidebar.tsx @@ -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' },