Brand & Design System¶
Welcome to the Carbon Connect design system. This section documents the visual identity, color palette, typography, and design principles that define how Carbon Connect looks, feels, and communicates.
Purpose¶
A consistent design system ensures that Carbon Connect presents a unified, professional identity across all touchpoints -- from the web application to marketing materials to documentation. These guidelines apply to everyone creating content, interfaces, or materials for the Carbon Connect brand.
Design System Contents¶
-
Visual Identity
Logo usage, brand personality, voice and tone, and core visual principles.
-
Color System
Primary emerald palette, carbon scope colors, semantic colors, neutrals, and dark mode specifications.
-
Typography
Inter for interfaces, Source Serif Pro for editorial content, JetBrains Mono for code. Full type scale with usage guidelines.
Design Principles¶
1. Clarity Over Decoration¶
Carbon Connect deals with complex data -- carbon emissions, grant eligibility criteria, matching scores. Every design decision should make information clearer, not prettier. If an element does not help the user understand or act, remove it.
2. Professional Trust¶
Our users are sustainability managers, CFOs, and consultants making decisions about significant funding. The design must convey competence, reliability, and authority. Avoid trends that sacrifice professionalism for novelty.
3. Accessible by Default¶
The platform must be usable by everyone, regardless of visual ability, device, or technical sophistication. Color contrast, font sizes, and interactive elements all follow accessibility best practices.
4. Carbon-Aware Identity¶
The visual identity reflects our mission: the emerald green palette connects to sustainability, the structured layouts reflect the precision of carbon accounting, and the clear data visualization conveys the intelligence of our matching algorithm.
5. Consistent Everywhere¶
Whether a user sees Carbon Connect in the web application, a marketing email, an investor deck, or this documentation site, the brand should be instantly recognizable. Consistency builds trust.
Quick Reference¶
| Element | Specification |
|---|---|
| Primary color | Emerald (#059669) |
| Primary font | Inter |
| Editorial font | Source Serif Pro |
| Code font | JetBrains Mono |
| Logo | Leaf icon + "Carbon Connect" wordmark |
| Brand personality | The Sage (wisdom, knowledge) + The Hero (courage, impact) |
| Voice | Authoritative, clear, supportive, precise |