[BRAND] CampaignPro Mexico — Visual Identity

{
  "code": "## CampaignPro Mexico — Visual Identity System\n\n### 1. Color Palette\n\n**Primary System**\n| Token | Hex | Usage |\n|-------|-----|-------|\n| `primary` | `#e11d48` | CTAs, active states, brand accent (political red — already chosen) |\n| `primary-light` | `#fb7185` | Hover states, secondary emphasis |\n| `primary-dark` | `#9f1239` | Pressed states, text on light backgrounds |\n\n**Secondary System**\n| Token | Hex | Usage |\n|-------|-----|-------|\n| `secondary` | `#f59e0b` | Alerts, territory highlights, warmth accent |\n| `secondary-light` | `#fbbf24` | Active territories, badges |\n| `secondary-dark` | `#b45309` | Pressed/dark variant |\n\n**Accent System**\n| Token | Hex | Usage |\n|-------|-----|-------|\n| `accent` | `#06b6d4` | Links, informational, data viz, contrast to red |\n| `accent-light` | `#22d3ee` | Charts, progress indicators |\n| `accent-dark` | `#0e7490` | Dark mode links |\n\n**Background System (Dark Theme Primary)**\n| Token | Hex | Usage |\n|-------|-----|-------|\n| `bg-base` | `#0f172a` | Main app background (already chosen) |\n| `bg-card` | `#1e293b` | Cards, modals, panels |\n| `bg-elevated` | `#334155` | Popovers, dropdown menus |\n| `bg-input` | `#0f172a` | Input fields (border: `#475569`) |\n\n**Surface/Text**\n| Token | Hex | Usage |\n|-------|-----|-------|\n| `text-primary` | `#f8fafc` | Headings, primary text |\n| `text-secondary` | `#94a3b8` | Labels, descriptions, timestamps |\n| `text-muted` | `#64748b` | Placeholder, disabled |\n| `border` | `#334155` | Card borders, dividers |\n| `success` | `#10b981` | Completed surveys, confirmed voters |\n| `warning` | `#f59e0b` | Pending actions, low battery |\n| `error` | `#ef4444` | Errors, failed syncs |\n\n**High-Contrast Ratios (WCAG AA on dark)**\n- `#f8fafc` on `#0f172a` → 15.8:1 ✓\n- `#e11d48` on `#0f172a` → 5.2:1 ✓\n- `#94a3b8` on `#0f172a` → 5.7:1 ✓\n- `#06b6d4` on `#0f172a` → 6.1:1 ✓\n\n**Avoiding Partisan Tricolor**: No green+red+white combinations. The red stands alone as \"action/energy\" rather than \"PRI party red.\" Accent cyan creates a modern tech identity that distances from traditional party colors.\n\n---\n\n### 2. Typography\n\n**Recommended System Stack (Android-first)**\n\n```css\n/* Primary — used for UI text, forms, data */\nfont-family: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;\n\n/* Headings — slightly more personality */\nfont-family: 'Inter', 'Roboto', system-ui, sans-serif;\nfont-weight: 700;\nletter-spacing: -0.025em;\n\n/* Monospace — for codes, IDs, voter numbers */\nfont-family: 'JetBrains Mono', 'Roboto Mono', 'Courier New', monospace;\n```\n\n**Why Inter/Roboto**:\n- Pre-installed on Android (Roboto) — zero download cost\n- Excellent Spanish character support (á, é, í, ó, ú, ñ, ü, ¿, ¡)\n- Designed for small screens and varying DPI\n- Clear at 12sp–16sp (field worker readability in sun)\n- Inter available via Google Fonts for web/marketing\n\n**Type Scale (Android sp)**\n| Level | Size | Weight | Usage |\n|-------|------|--------|-------|\n| Display | 28sp | 700 | Campaign name, dashboard header |\n| H1 | 22sp | 700 | Screen titles |\n| H2 | 18sp | 600 | Section headers |\n| H3 | 16sp | 600 | Card titles |\n| Body | 14sp | 400 | Default text, form labels |\n| Caption | 12sp | 400 | Timestamps, metadata |\n| Overline | 11sp | 600 | Category labels (uppercase, tracking +0.1em) |\n\n---\n\n### 3. App Icon Concept\n\n**Design: \"Nodo\" (Node/Hub)**\n\nA simplified network node — one central circle with 3 radiating connection lines, forming an abstract \"person connecting to community\" shape. The shape resembles both a communication hub and a raised fist (subtle, not overt).\n\n```\nVisual Description:\n┌──────────────┐\n│              │\n│    ╱ ● ╲    │  Central node = coordinator\n│   ●     ●   │  Connected nodes = promoters/voters\n│    ╲   ╱    │  \n│      ●      │  Lines = communication channels\n│              │\n└──────────────┘\n\nColor: Primary red (#e11d48) node on dark slate (#1e293b)\nShape: Rounded square (Android adaptive icon)\nBackground: #1e293b (bg-card)\nForeground: #e11d48 central node, #f8fafc connection lines\n```\n\n**Specifications:**\n- Android adaptive icon: 108dp × 108dp (72dp safe zone)\n- Foreground layer: Network node graphic\n- Background layer: Solid `#1e293b`\n- Minimum recognizable size: 24dp (notification icon)\n- Monochrome variant: White on transparent (status bar)\n\n---\n\n### 4. Logo Mark\n\n**Wordmark + Icon**\n\n```\n     ●\n    ╱|╲        CampaignPro\n   ● | ●       M É X I C O\n    ╲|╱\n     ●\n```\n\n**Components:**\n1. **Icon**: Network node (same as app icon) — 4 dots connected, representing the organizing network\n2. **Wordmark**: \"CampaignPro\" in Inter Bold, tracking -0.02em\n3. **Submark**: \"MÉXICO\" in Inter SemiBold, uppercase, tracking +0.15em, text-secondary color\n4. **Divider**: Thin horizontal line between wordmark and submark (border color)\n\n**Variants:**\n| Variant | Usage |\n|---------|-------|\n| Full horizontal | Marketing, web header (icon left, text right) |\n| Full stacked | Splash screen, about page (icon top, text below) |\n| Icon only | App icon, favicon, small spaces |\n| Wordmark only | Legal docs, email signature |\n\n**Color Usage:**\n| Context | Icon | Wordmark | Submark |\n|---------|------|----------|---------|\n| Dark background | `#e11d48` | `#f8fafc` | `#94a3b8` |\n| Light background | `#e11d48` | `#0f172a` | `#64748b` |\n| Monochrome | `#f8fafc` | `#f8fafc` | `#f8fafc` |\n\n**Minimum Sizes:**\n- Full logo: 120px width minimum\n- Icon only: 24px minimum\n- Clear space: 1× icon height on all sides\n\n---\n\n### Design Tokens (React Native / Tailwind)\n\n```typescript\nexport const BRAND = {\n  colors: {\n    primary: '#e11d48',\n    primaryLight: '#fb7185',\n    primaryDark: '#9f1239',\n    secondary: '#f59e0b',\n    secondaryLight: '#fbbf24',\n    accent: '#06b6d4',\n    accentLight: '#22d3ee',\n    bgBase: '#0f172a',\n    bgCard: '#1e293b',\n    bgElevated: '#334155',\n    textPrimary: '#f8fafc',\n    textSecondary: '#94a3b8',\n    textMuted: '#64748b',\n    border: '#334155',\n    success: '#10b981',\n    warning: '#f59e0b',\n    error: '#ef4444',\n  },\n  fonts: {\n    primary: 'Inter',\n    fallback: 'Roboto',\n    mono: 'JetBrains Mono',\n  },\n  spacing: {\n    xs: 4, sm: 8, md: 16, lg: 24, xl: 32,\n  },\n  radii: {\n    sm: 6, md: 8, lg: 12, xl: 16, full: 9999,\n  },\n} as const;\n```",
  "content": "## CampaignPro Mexico — Visual Identity System\n\n### 1. Color Palette\n\n**Primary System**\n| Token | Hex | Usage |\n|-------|-----|-------|\n| `primary` | `#e11d48` | CTAs, active states, brand accent (political red — already chosen) |\n| `primary-light` | `#fb7185` | Hover states, secondary emphasis |\n| `primary-dark` | `#9f1239` | Pressed states, text on light backgrounds |\n\n**Secondary System**\n| Token | Hex | Usage |\n|-------|-----|-------|\n| `secondary` | `#f59e0b` | Alerts, territory highlights, warmth accent |\n| `secondary-light` | `#fbbf24` | Active territories, badges |\n| `secondary-dark` | `#b45309` | Pressed/dark variant |\n\n**Accent System**\n| Token | Hex | Usage |\n|-------|-----|-------|\n| `accent` | `#06b6d4` | Links, informational, data viz, contrast to red |\n| `accent-light` | `#22d3ee` | Charts, progress indicators |\n| `accent-dark` | `#0e7490` | Dark mode links |\n\n**Background System (Dark Theme Primary)**\n| Token | Hex | Usage |\n|-------|-----|-------|\n| `bg-base` | `#0f172a` | Main app background (already chosen) |\n| `bg-card` | `#1e293b` | Cards, modals, panels |\n| `bg-elevated` | `#334155` | Popovers, dropdown menus |\n| `bg-input` | `#0f172a` | Input fields (border: `#475569`) |\n\n**Surface/Text**\n| Token | Hex | Usage |\n|-------|-----|-------|\n| `text-primary` | `#f8fafc` | Headings, primary text |\n| `text-secondary` | `#94a3b8` | Labels, descriptions, timestamps |\n| `text-muted` | `#64748b` | Placeholder, disabled |\n| `border` | `#334155` | Card borders, dividers |\n| `success` | `#10b981` | Completed surveys, confirmed voters |\n| `warning` | `#f59e0b` | Pending actions, low battery |\n| `error` | `#ef4444` | Errors, failed syncs |\n\n**High-Contrast Ratios (WCAG AA on dark)**\n- `#f8fafc` on `#0f172a` → 15.8:1 ✓\n- `#e11d48` on `#0f172a` → 5.2:1 ✓\n- `#94a3b8` on `#0f172a` → 5.7:1 ✓\n- `#06b6d4` on `#0f172a` → 6.1:1 ✓\n\n**Avoiding Partisan Tricolor**: No green+red+white combinations. The red stands alone as \"action/energy\" rather than \"PRI party red.\" Accent cyan creates a modern tech identity that distances from traditional party colors.\n\n---\n\n### 2. Typography\n\n**Recommended System Stack (Android-first)**\n\n```css\n/* Primary — used for UI text, forms, data */\nfont-family: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;\n\n/* Headings — slightly more personality */\nfont-family: 'Inter', 'Roboto', system-ui, sans-serif;\nfont-weight: 700;\nletter-spacing: -0.025em;\n\n/* Monospace — for codes, IDs, voter numbers */\nfont-family: 'JetBrains Mono', 'Roboto Mono', 'Courier New', monospace;\n```\n\n**Why Inter/Roboto**:\n- Pre-installed on Android (Roboto) — zero download cost\n- Excellent Spanish character support (á, é, í, ó, ú, ñ, ü, ¿, ¡)\n- Designed for small screens and varying DPI\n- Clear at 12sp–16sp (field worker readability in sun)\n- Inter available via Google Fonts for web/marketing\n\n**Type Scale (Android sp)**\n| Level | Size | Weight | Usage |\n|-------|------|--------|-------|\n| Display | 28sp | 700 | Campaign name, dashboard header |\n| H1 | 22sp | 700 | Screen titles |\n| H2 | 18sp | 600 | Section headers |\n| H3 | 16sp | 600 | Card titles |\n| Body | 14sp | 400 | Default text, form labels |\n| Caption | 12sp | 400 | Timestamps, metadata |\n| Overline | 11sp | 600 | Category labels (uppercase, tracking +0.1em) |\n\n---\n\n### 3. App Icon Concept\n\n**Design: \"Nodo\" (Node/Hub)**\n\nA simplified network node — one central circle with 3 radiating connection lines, forming an abstract \"person connecting to community\" shape. The shape resembles both a communication hub and a raised fist (subtle, not overt).\n\n```\nVisual Description:\n┌──────────────┐\n│              │\n│    ╱ ● ╲    │  Central node = coordinator\n│   ●     ●   │  Connected nodes = promoters/voters\n│    ╲   ╱    │  \n│      ●      │  Lines = communication channels\n│              │\n└──────────────┘\n\nColor: Primary red (#e11d48) node on dark slate (#1e293b)\nShape: Rounded square (Android adaptive icon)\nBackground: #1e293b (bg-card)\nForeground: #e11d48 central node, #f8fafc connection lines\n```\n\n**Specifications:**\n- Android adaptive icon: 108dp × 108dp (72dp safe zone)\n- Foreground layer: Network node graphic\n- Background layer: Solid `#1e293b`\n- Minimum recognizable size: 24dp (notification icon)\n- Monochrome variant: White on transparent (status bar)\n\n---\n\n### 4. Logo Mark\n\n**Wordmark + Icon**\n\n```\n     ●\n    ╱|╲        CampaignPro\n   ● | ●       M É X I C O\n    ╲|╱\n     ●\n```\n\n**Components:**\n1. **Icon**: Network node (same as app icon) — 4 dots connected, representing the organizing network\n2. **Wordmark**: \"CampaignPro\" in Inter Bold, tracking -0.02em\n3. **Submark**: \"MÉXICO\" in Inter SemiBold, uppercase, tracking +0.15em, text-secondary color\n4. **Divider**: Thin horizontal line between wordmark and submark (border color)\n\n**Variants:**\n| Variant | Usage |\n|---------|-------|\n| Full horizontal | Marketing, web header (icon left, text right) |\n| Full stacked | Splash screen, about page (icon top, text below) |\n| Icon only | App icon, favicon, small spaces |\n| Wordmark only | Legal docs, email signature |\n\n**Color Usage:**\n| Context | Icon | Wordmark | Submark |\n|---------|------|----------|---------|\n| Dark background | `#e11d48` | `#f8fafc` | `#94a3b8` |\n| Light background | `#e11d48` | `#0f172a` | `#64748b` |\n| Monochrome | `#f8fafc` | `#f8fafc` | `#f8fafc` |\n\n**Minimum Sizes:**\n- Full logo: 120px width minimum\n- Icon only: 24px minimum\n- Clear space: 1× icon height on all sides\n\n---\n\n### Design Tokens (React Native / Tailwind)\n\n```typescript\nexport const BRAND = {\n  colors: {\n    primary: '#e11d48',\n    primaryLight: '#fb7185',\n    primaryDark: '#9f1239',\n    secondary: '#f59e0b',\n    secondaryLight: '#fbbf24',\n    accent: '#06b6d4',\n    accentLight: '#22d3ee',\n    bgBase: '#0f172a',\n    bgCard: '#1e293b',\n    bgElevated: '#334155',\n    textPrimary: '#f8fafc',\n    textSecondary: '#94a3b8',\n    textMuted: '#64748b',\n    border: '#334155',\n    success: '#10b981',\n    warning: '#f59e0b',\n    error: '#ef4444',\n  },\n  fonts: {\n    primary: 'Inter',\n    fallback: 'Roboto',\n    mono: 'JetBrains Mono',\n  },\n  spacing: {\n    xs: 4, sm: 8, md: 16, lg: 24, xl: 32,\n  },\n  radii: {\n    sm: 6, md: 8, lg: 12, xl: 16, full: 9999,\n  },\n} as const;\n```"
}