# CMRU Brand Standard

This is the single source of truth for the CMRU visual identity. All agents, designers, and developers building for cmru.com or any CMRU material should reference this document.

The official brand assets live in `brand/official/`. Archived concept explorations are in `brand/_archive/` and should not be used.

---

## The Name

The brand name is **CMRU**. Always uppercase. Always four letters. No tagline, no subtitle, no expansion appended to the wordmark. The logo and all brand materials say only "CMRU."

CMRU is a Living Acronym -- it has no single canonical expansion. The four letters shift meaning depending on context (e.g., "Collective Minds Research Union" on a grant application, "Collaborative Minds Research Union" at a community event). This is intentional and central to the brand identity. However, the wordmark itself is always just "CMRU" with no additional words.

**Never write:** CMRU Innovation Lab, CMRU Research Institute, CMRU Cleveland, or any other appended descriptor in the logo or brand mark.

---

## Logo System

The CMRU logo consists of two elements: a **cluster mark** (7-9 circles of varying sizes grouped tightly together) and a **wordmark** ("CMRU" in Nunito Sans, weight 600, letter-spacing 8px).

### Variants

| Variant | File | Use case |
|---------|------|----------|
| Logo on light | `brand/official/cmru-logo-light.svg` | White or light backgrounds |
| Logo on dark | `brand/official/cmru-logo-dark.svg` | Dark backgrounds (#0A1F0D or similar) |
| Mark on light | `brand/official/cmru-mark-light.svg` | Favicons, app icons, social avatars, small placements on light backgrounds |
| Mark on dark | `brand/official/cmru-mark-dark.svg` | Same, on dark backgrounds |

### Logo construction

The cluster mark uses circles in three colors at varying opacities:

- Primary (#1B5E20) circles at 0.85 and 0.6 opacity
- Secondary (#388E3C) circles at 0.85 and 0.6 opacity
- Accent (#FFC107) circles at 0.6 opacity

The wordmark sits to the right of the cluster. On light backgrounds, the wordmark is Primary (#1B5E20). On dark backgrounds, the wordmark is Secondary (#388E3C).

### Clear space

The exclusion zone around the logo is 24px (3x the 8px base unit). No other elements may intrude into this space.

### Minimum sizes

- Digital full logo: 120px width minimum
- Digital mark only: 32px width minimum
- Print full logo: 1.5 inch width minimum
- Print mark only: 0.5 inch width minimum

---

## Color Palette

### Primary colors

| Role | Hex | RGB | Usage |
|------|-----|-----|-------|
| Primary | `#1B5E20` | rgb(27, 94, 32) | Headlines, CTAs, logo, primary buttons |
| Secondary | `#388E3C` | rgb(56, 142, 60) | Hover states, secondary actions, supporting graphics |
| Accent | `#FFC107` | rgb(255, 193, 7) | Sparingly for emphasis, interactive highlights, notifications |

### Neutrals

| Role | Hex | RGB | Usage |
|------|-----|-----|-------|
| Dark Neutral | `#1C1C1E` | rgb(28, 28, 30) | Body text, dark UI elements |
| Light Neutral | `#E8F5E9` | rgb(232, 245, 233) | Light backgrounds, cards, subtle fills |
| BG Light | `#FFFFFF` | rgb(255, 255, 255) | Page backgrounds (light mode) |
| BG Dark | `#0A1F0D` | rgb(10, 31, 13) | Page backgrounds (dark mode) |

### Color rules

- WCAG AA contrast: 4.5:1 for body text, 3:1 for large text and UI components
- Never combine Primary + Accent as text-on-background (insufficient contrast)
- Accent is used sparingly -- it draws the eye and should highlight, not dominate

---

## Typography

### Font stack

| Role | Font | Fallback | Weight range |
|------|------|----------|-------------|
| Primary | Nunito Sans | system-ui, -apple-system, sans-serif | 400 (body), 600 (semi-bold), 700 (bold), 800 (display) |
| Secondary | Nunito | system-ui, -apple-system, sans-serif | 400 (body), 700 (bold) |

Google Fonts links:
- `https://fonts.google.com/specimen/Nunito+Sans`
- `https://fonts.google.com/specimen/Nunito`

### Type scale

| Level | Size/Line-height | Weight | Use |
|-------|-----------------|--------|-----|
| Display | 48px / 56px | 800 | Hero headlines, page titles |
| H1 | 36px / 44px | 700 | Section headers |
| H2 | 28px / 36px | 700 | Sub-section headers |
| H3 | 22px / 28px | 700 | Card titles, sidebar headers |
| H4 | 18px / 24px | 700 | Small headers, labels |
| Body Large | 16px / 24px | 400 | Lead paragraphs, featured text |
| Body | 14px / 20px | 400 | Default body copy |
| Caption | 12px / 16px | 400 | Metadata, timestamps, helper text |
| Overline | 10px / 14px | 400 | Category labels, section markers |

### Wordmark typography

The "CMRU" wordmark in the logo uses:
- Font: Helvetica, Arial, sans-serif (system fonts for SVG compatibility)
- Weight: 600
- Size: 48px (in the standard logo SVG)
- Letter-spacing: 8px

---

## Spacing and Grid

### Base unit

All spacing derives from an **8px base unit**.

| Token | Value | Common use |
|-------|-------|------------|
| 1x | 8px | Tight internal padding, icon gaps |
| 2x | 16px | Default padding, element gaps |
| 3x | 24px | Card padding, section gaps |
| 4x | 32px | Component separation |
| 6x | 48px | Section padding |
| 8x | 64px | Large section padding |
| 12x | 96px | Page section breaks |
| 16x | 128px | Hero/cover section padding |

### Grid

12-column grid layout for page content. Gutter width: 6px minimum.

### Border radius

The brand uses rounded corners. Standard radii:
- 0px: No rounding (data tables, code blocks)
- 4px: Small elements (badges, tags, inputs)
- 8px: Default (buttons, small cards)
- 12px: Medium (cards, modals, containers)
- 16px: Large (feature cards, hero elements)
- 24px: Extra large (pill buttons, full-rounding)

---

## Logo Placement Guidelines

### Website header

Logo left-aligned with 24px left padding, vertically centered, logo height 24-32px. Navigation to the right.

### Email signature

Logo left-aligned, 12-16px height, paired with contact info to the right.

### Presentation slides

Bottom-right corner, 8-10px height, white or light variant on dark slides. Minimal opacity (0.6) to avoid competing with slide content.

### Social media

Use the standalone mark (cluster only, no wordmark) for profile images and avatars.

---

## Usage Rules

### Do

- Use the logo with adequate clear space (24px minimum)
- Maintain minimum size requirements
- Use approved color combinations only
- Use dark variant on dark backgrounds, light variant on light backgrounds
- Scale proportionally with locked aspect ratio
- Reference CMRU with shifting meanings in content (the Living Acronym)
- Use the standalone mark for placements under 48px wide

### Do not

- Place the logo on busy or low-contrast backgrounds
- Rotate, skew, stretch, or distort the logo
- Change colors outside the approved palette
- Add shadows, glows, outlines, or bevels
- Lock CMRU to one canonical expansion in branding
- Use below minimum size
- Crowd the logo within the clear space zone
- Use unapproved typefaces in brand materials
- Append any words to "CMRU" in the logo (no "Innovation Lab," no taglines)

---

## Brand Assets Reference

```
brand/
  official/                    <-- USE THESE
    cmru-logo-light.svg        Full logo, light background
    cmru-logo-dark.svg         Full logo, dark background
    cmru-mark-light.svg        Standalone mark, light background
    cmru-mark-dark.svg         Standalone mark, dark background
    cmru-logo-light.pdf        Print-ready logo, light
    cmru-logo-dark.pdf         Print-ready logo, dark
    cmru-brand-kit.pdf         Full brand kit (print)
    cmru-brand-kit.html        Full brand kit (interactive)
  concept-10-community/        Original concept source files
  _archive/                    Rejected concepts (do not use)
```

---

## CSS Custom Properties

For web implementations, use these CSS custom properties:

```css
:root {
  /* Colors */
  --cmru-primary: #1B5E20;
  --cmru-secondary: #388E3C;
  --cmru-accent: #FFC107;
  --cmru-dark: #1C1C1E;
  --cmru-light: #E8F5E9;
  --cmru-bg-light: #FFFFFF;
  --cmru-bg-dark: #0A1F0D;

  /* Typography */
  --cmru-font-primary: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  --cmru-font-secondary: 'Nunito', system-ui, -apple-system, sans-serif;

  /* Spacing (8px base) */
  --cmru-space-1: 8px;
  --cmru-space-2: 16px;
  --cmru-space-3: 24px;
  --cmru-space-4: 32px;
  --cmru-space-6: 48px;
  --cmru-space-8: 64px;
  --cmru-space-12: 96px;
  --cmru-space-16: 128px;

  /* Border radius */
  --cmru-radius-sm: 4px;
  --cmru-radius-md: 8px;
  --cmru-radius-lg: 12px;
  --cmru-radius-xl: 16px;
  --cmru-radius-full: 24px;
}
```

---

## Tailwind Configuration (if applicable)

```js
// tailwind.config.js (partial)
module.exports = {
  theme: {
    extend: {
      colors: {
        cmru: {
          primary: '#1B5E20',
          secondary: '#388E3C',
          accent: '#FFC107',
          dark: '#1C1C1E',
          light: '#E8F5E9',
          'bg-light': '#FFFFFF',
          'bg-dark': '#0A1F0D',
        },
      },
      fontFamily: {
        primary: ['"Nunito Sans"', 'system-ui', '-apple-system', 'sans-serif'],
        secondary: ['"Nunito"', 'system-ui', '-apple-system', 'sans-serif'],
      },
      spacing: {
        '1u': '8px',
        '2u': '16px',
        '3u': '24px',
        '4u': '32px',
        '6u': '48px',
        '8u': '64px',
        '12u': '96px',
        '16u': '128px',
      },
      borderRadius: {
        sm: '4px',
        DEFAULT: '8px',
        lg: '12px',
        xl: '16px',
        full: '24px',
      },
    },
  },
};
```

---

*This document is part of the CMRU project. See also: [CMRU-FOUNDING-PHILOSOPHY.md](./CMRU-FOUNDING-PHILOSOPHY.md), [CMRU-SITEMAP.md](./CMRU-SITEMAP.md)*