# Claude Marketers Brand Guidelines

Claude Marketers is a project by GrowthPair & Growth Stack Mafia.

## Logo

The Claude Marketers mark is a parallelogram (skewed rectangle) containing the monogram "CM" in bold monospace type. The shape uses a 10% offset on left/right edges: `polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%)`.

### Logo Variants
- **cm-mark.svg** -- Standalone mark (parallelogram + CM monogram)
- **cm-logo-full.svg** -- Mark + "CLAUDE MARKETERS" wordmark + "by GrowthPair & Growth Stack Mafia" tagline (light background)
- **cm-logo-dark.svg** -- Same as full, with light text for dark backgrounds

### Clear Space
Maintain a minimum clear space equal to the height of the "CM" text around all sides of the logo.

### Minimum Size
The mark should not be displayed smaller than 24px wide. The full logo should not be smaller than 160px wide.

## Colors

### Primary Palette
| Name          | Hex       | Usage                                      |
|---------------|-----------|---------------------------------------------|
| Accent        | #d97706   | Primary brand color, CTAs, highlights       |
| Accent Hover  | #b45309   | Hover state (light mode)                    |
| Accent Hover  | #f59e0b   | Hover state (dark mode)                     |

### Light Theme
| Name          | Hex       | Usage                                      |
|---------------|-----------|---------------------------------------------|
| Background    | #fafaf9   | Page background                             |
| Foreground    | #1c1917   | Primary text                                |
| Card          | #ffffff   | Card/panel backgrounds                      |
| Border        | #e7e5e4   | Borders, dividers                           |
| Muted         | #78716c   | Secondary text, labels                      |

### Dark Theme
| Name          | Hex       | Usage                                      |
|---------------|-----------|---------------------------------------------|
| Background    | #0c0a09   | Page background                             |
| Foreground    | #fafaf9   | Primary text                                |
| Card          | #1c1917   | Card/panel backgrounds                      |
| Border        | #292524   | Borders, dividers                           |
| Muted         | #a8a29e   | Secondary text, labels                      |

## Typography

### Primary Font
**Geist Mono** (monospace) -- Used for UI labels, navigation, badges, and small text. All-caps with wide letter-spacing for labels.

### Secondary Font
**Geist Sans** (sans-serif) -- Used for headings and body text.

### Pixel Font
**Press Start 2P** (pixel) -- Used sparingly for the tagline "Claude on." and decorative elements.

### Type Scale
- Navigation labels: 10-11px, mono, uppercase, tracking-widest
- Body: 14px, sans-serif
- Headings: 18-24px, sans-serif, font-bold
- Micro labels: 8-9px, mono, uppercase

## Usage Rules

1. **Do not** alter the proportions of the parallelogram mark
2. **Do not** change the accent color -- always use #d97706
3. **Do not** place the light-background logo on dark backgrounds (use cm-logo-dark.svg)
4. **Do not** add effects (drop shadows, gradients, outlines) to the logo
5. **Do** maintain the monospace typeface for the "CM" monogram
6. **Do** use the accent color consistently across all brand touchpoints

## Generating PNGs

The provided SVGs should be exported to PNG at the following sizes for common use:
- Mark only: 32px, 64px, 128px, 256px, 512px
- Full logo: 160px, 320px, 640px wide

Export from Figma or use a tool like Inkscape / `rsvg-convert` for batch export.