# Chari Brand Identity

A complete profile of **Chari**'s visual system — colors, typography, components, and personality.

## Quick Facts

| Field    | Value    |
|----------|----------|
| Primary  | #75D69C  |
| Accent   | #20B8FF  |
| Body Font| Hind     |
| Heading Font | Poppins |

## Color Palette

- primary: #75D69C
- secondary: #5472D2
- accent: #20B8FF
- background: #FFFFFF
- textPrimary: #20B8FF
- link: #20B8FF

## Typography

- primary: Hind — https://fonts.google.com/specimen/Hind
- heading: Poppins — https://fonts.google.com/specimen/Poppins

## Visual Assets

- Logo: 
- Favicon:

## UI Components

- input: background=#F7F8F8, textColor=#1F2124, borderColor=null, borderRadius=0px, shadow=none
- buttonPrimary: background=#20B8FF, textColor=#FFFFFF, borderRadius=19px, shadow=rgba(0, 0, 0, 0.5) 0px 5px 17px -5px
- buttonSecondary: background=#FFFFFF, textColor=#20B8FF, borderColor=#E7E7E7, borderRadius=30px, shadow=none

## Brand Personality

Tone: modern · Energy: medium · Audience: B2B customers in Francophone Africa

## Chari Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.

- **Chari leader du e-commerce de produits FMCG pour le B2B en afrique francophone**  
  - Image:   
  - Source: https://www.chari.com/  
- **Chari leader du e-commerce de produits FMCG pour le B2B en afrique francophone**  
  - Image:   
  - Source: https://www.chari.com/  
- **Chari leader du e-commerce de produits FMCG pour le B2B en afrique francophone**  
  - Image:   
  - Source: https://www.chari.com/  
- **Chari leader du e-commerce de produits FMCG pour le B2B en afrique francophone**  
  - Image:   
  - Source: https://www.chari.com/  
- **Chari leader du e-commerce de produits FMCG pour le B2B en afrique francophone**  
  - Image:   
  - Source: https://www.chari.com/revue-presse?page=4  
- **Chari leader du e-commerce de produits FMCG pour le B2B en afrique francophone**  
  - Image:   
  - Source: http://chari.com/revue-presse?page=2

## Working with these fonts

Not found on Google Fonts?

Programmatic alternative: load the URL with Playwright or Puppeteer, listen for `response` events whose `Content-Type` starts with `font/`, and write the body to disk. The CSS extraction step is the same.

## Machine-Readable Profile

```json
{
 "colorScheme": "light",
 "fonts": [
  {
   "family": "Poppins",
   "role": "heading"
  },
  {
   "family": "Hind",
   "role": "body"
  }
 ],
 "colors": {
  "primary": "#75D69C",
  "secondary": "#5472D2",
  "accent": "#20B8FF",
  "background": "#FFFFFF",
  "textPrimary": "#20B8FF",
  "link": "#20B8FF"
 },
 "typography": {
  "fontFamilies": {
   "primary": "Hind",
   "heading": "Poppins"
  },
  "fontStacks": {
   "heading": [
    "Hind",
    "sans-serif"
   ],
   "body": [
    "Hind",
    "sans-serif"
   ],
   "paragraph": [
    "Hind",
    "sans-serif"
   ]
  },
  "fontSizes": {
   "h1": "15px",
   "h2": "15px",
   "body": "22px"
  }
 },
 "spacing": {
  "baseUnit": 4,
  "borderRadius": "5px"
 },
 "components": {
  "input": {
   "background": "#F7F8F8",
   "textColor": "#1F2124",
   "borderColor": null,
   "borderRadius": "0px",
   "borderRadiusCorners": {
    "topLeft": "0px",
    "topRight": "0px",
    "bottomRight": "0px",
    "bottomLeft": "0px"
   },
   "shadow": "none"
  },
  "buttonPrimary": {
   "background": "#20B8FF",
   "textColor": "#FFFFFF",
   "borderRadius": "19px",
   "borderRadiusCorners": {
    "topLeft": "19px",
    "topRight": "19px",
    "bottomRight": "19px",
    "bottomLeft": "19px"
   },
   "shadow": "rgba(0, 0, 0, 0.5) 0px 5px 17px -5px"
  },
  "buttonSecondary": {
   "background": "#FFFFFF",
   "textColor": "#20B8FF",
   "borderColor": "#E7E7E7",
   "borderRadius": "30px",
   "borderRadiusCorners": {
    "topLeft": "30px",
    "topRight": "30px",
    "bottomRight": "30px",
    "bottomLeft": "30px"
   },
   "shadow": "none"
  }
 },
 "images": {
  "logo": "https://chari.com/assets/uploads/logo-white.webp",
  "favicon": "https://chari.com/assets/uploads/logo.png",
  "ogImage": null,
  "logoHref": "/",
  "logoAlt": "Chari"
 },
 "__llm_logo_reasoning": {
  "selectedIndex": 0,
  "reasoning": "Selected #0 because it is visible, located in the header, links to the homepage, and matches the brand name 'Chari'.",
  "confidence": 0.9,
  "source": "llm"
 },
 "__llm_button_reasoning": {
  "primary": {
   "index": 0,
   "text": "Envoyez le message",
   "reasoning": "Button #0 has a vibrant blue background (#20B8FF), which is the accent color and stands out as the primary call-to-action with the text 'Envoyez le message'."
  },
  "secondary": {
   "index": 1,
   "text": "Télécharger\n Google Play",
   "reasoning": "Button #1 is a secondary action with a white background (#FFFFFF) and blue text, making it less prominent than the primary button."
  },
  "confidence": 0.95
 },
 "personality": {
  "tone": "modern",
  "energy": "medium",
  "targetAudience": "B2B customers in Francophone Africa"
 },
 "designSystem": {
  "framework": "bootstrap",
  "componentLibrary": ""
 },
 "confidence": {
  "buttons": 0.95,
  "colors": 0.9,
  "overall": 0.925
 },
 "__llm_metadata": {
  "logoSelection": {
   "llmCalled": true,
   "llmSucceeded": true,
   "finalSource": "llm",
   "rawLogoSelection": {
    "selectedLogoIndex": 0,
    "selectedLogoReasoning": "Selected #0 because it is visible, located in the header, links to the homepage, and matches the brand name 'Chari'.",
    "confidence": 0.9
   }
  },
  "buttonClassification": {
   "llmCalled": true,
   "llmSucceeded": true
  }
 }
}
```