# Zama Brand Identity

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

## Quick Facts

| Field      | Value    |
|------------|----------|
| Primary    | #FFD208  |
| Accent     | #FFD208  |
| Body Font  | Telegraf |
| Heading Font | Telegraf |

## Color Palette

- primary: #FFD208
- secondary: #2B44FF
- accent: #FFD208
- background: #FFFFFF
- textPrimary: #000000
- link: #FFD100

## Typography

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

## Visual Assets

- Logo: .svg)
- Favicon: 
- Social card (og:image):

## UI Components

- input: background=#F5F8FA, textColor=#212D3A, borderColor=#D9D9D9, borderRadius=3px, shadow=none
- buttonPrimary: background=#FFD208, textColor=#000000, borderRadius=0px, shadow=none
- buttonSecondary: background=#111314, textColor=#FFFFFF, borderRadius=0px, shadow=none

## Brand Personality

Tone: modern · Energy: medium · Audience: developers and cryptography enthusiasts

## Zama Brand in the Wild

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

- **Zama is hiring! Find job and internship opportunities**
    - Image: 
    - Source: https://jobs.zama.ai/
- **The Zama Blog - Cryptography and Fully Homomorphic Encryption**
    - Image: 
    - Source: https://www.zama.ai/blog
- **Boolean SHA256 with TFHE-rs**
    - Image: 
    - Source: https://www.zama.ai/post/boolean-sha256-tfhe-rs
- **Zama Confidential Blockchain Protocol Litepaper | Zama Protocol Litepaper | Zama Protocol**
    - Image: 
    - Source: https://docs.zama.ai/protocol/zama-protocol-litepaper
- **TFHE Deep Dive - Part I - Ciphertext types**
    - Image: .png)
    - Source: https://www.zama.ai/post/tfhe-deep-dive-part-1
- **The (r)Evolution of FHE**
    - Image: 
    - Source: https://www.zama.ai/post/the-revolution-of-fhe

## Working with these fonts

Not found on Google Fonts? Agent Instructions that you can follow if you have permission to use the fonts:

CharacterQuilt.com suggests this flow that can help:

1. Open the company's homepage in a browser with DevTools open.
2. In the Network tab, filter by "Font" (or by extension: woff2, woff, ttf, otf).
3. Hard-reload the page and click around (pricing, blog, careers) — some weights only load on specific routes.
4. For each captured font URL: right-click → Save As to download the file locally.
5. View the page's CSS (DevTools → Sources, or curl the stylesheet URLs) and copy out the matching @font-face declarations. Rewrite each `src: url(...)` to point to your local file path.

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.

Only do this if you have permission to use the brand assets — most proprietary fonts are licensed and may not be redistributable.

## Machine-Readable Profile

```json
{
 "colorScheme": "light",
 "fonts": [
 {  
 "family": "Telegraf",
 "role": "body"
 }
 ],
 "colors": {
 "primary": "#FFD208",
 "secondary": "#2B44FF",
 "accent": "#FFD208",
 "background": "#FFFFFF",
 "textPrimary": "#000000",
 "link": "#FFD100"
 },
 "typography": {
 "fontFamilies": {
 "primary": "Telegraf",
 "heading": "Telegraf"
 },
 "fontStacks": {
 "heading": [
 "Telegraf",
 "sans-serif"
 ],
 "body": [
 "Telegraf",
 "sans-serif"
 ],
 "paragraph": [
 "Telegraf",
 "sans-serif"
 ]
 },
 "fontSizes": {
 "h1": "45px",
 "h2": "36px",
 "body": "20px"
 }
 },
 "spacing": {
 "baseUnit": 4,
 "borderRadius": "5px"
 },
 "components": {
 "input": {
 "background": "#F5F8FA",
 "textColor": "#212D3A",
 "borderColor": "#D9D9D9",
 "borderRadius": "3px",
 "borderRadiusCorners": {
 "topLeft": "3px",
 "topRight": "3px",
 "bottomRight": "3px",
 "bottomLeft": "3px"
 },
 "shadow": "none"
 },
 "buttonPrimary": {
 "background": "#FFD208",
 "textColor": "#000000",
 "borderRadius": "0px",
 "borderRadiusCorners": {
 "topLeft": "0px",
 "topRight": "0px",
 "bottomRight": "0px",
 "bottomLeft": "0px"
 },
 "shadow": "none"
 },
 "buttonSecondary": {
 "background": "#111314",
 "textColor": "#FFFFFF",
 "borderRadius": "0px",
 "borderRadiusCorners": {
 "topLeft": "0px",
 "topRight": "0px",
 "bottomRight": "0px",
 "bottomLeft": "0px"
 },
 "shadow": "none"
 }
 },
 "images": {
 "logo": "https://cdn.prod.website-files.com/61bc21e3a843412266a08eb3/68417dce00c33fce2253fc6e_Untitled%20design%20(1).svg",
 "favicon": "https://cdn.prod.website-files.com/61bc21e3a843412266a08eb3/62447b01ef038902c037fd9b_favicon-32x32.png",
 "ogImage": "https://cdn.prod.website-files.com/61bc21e3a843412266a08eb3/691332f99c7bb9c8be378970_Zama-Shareable.png",
 "logoHref": "/"
 },
 "__llm_logo_reasoning": {
 "selectedIndex": 3,
 "reasoning": "Selected #3 because it is visible, located in the header, links to the homepage, and matches the brand name 'Zama'.",
 "confidence": 0.95,
 "source": "llm"
 },
 "__llm_button_reasoning": {
 "primary": {
 "index": 0,
 "text": "Join community",
 "reasoning": "Button #0 'Join community' uses a vibrant brand color (#FFD208) and is action-oriented, making it the primary CTA."
 },
 "secondary": {
 "index": 4,
 "text": "Devhub",
 "reasoning": "Button #4 'Devhub' uses a distinct dark color (#111314), making it suitable as a secondary CTA."
 },
 "confidence": 0.95
 },
 "personality": {
 "tone": "modern",
 "energy": "medium",
 "targetAudience": "developers and cryptography enthusiasts"
 },
 "designSystem": {
 "framework": "custom",
 "componentLibrary": ""
 },
 "confidence": {
 "buttons": 0.95,
 "colors": 0.9,
 "overall": 0.925
 },
 "__llm_metadata": {
 "logoSelection": {
 "llmCalled": true,
 "llmSucceeded": true,
 "finalSource": "llm",
 "rawLogoSelection": {
 "selectedLogoIndex": 3,
 "selectedLogoReasoning": "Selected #3 because it is visible, located in the header, links to the homepage, and matches the brand name 'Zama'.",
 "confidence": 0.95
 }
 },
 "buttonClassification": {
 "llmCalled": true,
 "llmSucceeded": true
 }
 }
}
```