AZMX AZMX

API Examples

Getting Started with AZMX Brand API

Interactive examples, code snippets, and common integration patterns

← Back to Documentation · API Reference

The AZMX Brand API provides programmatic access to brand guidelines, design tokens, voice rules, and audience personas. All endpoints are read-only, require no authentication, and return JSON.

Base URL: https://gamaleldientarek.github.io/azmx-brand/api/v1/

Your First API Request

The simplest way to get started: fetch the API index to see all available endpoints. Metadata (version, base URL, contact) lives under $meta.

Try it now

JavaScript
fetch('https://gamaleldientarek.github.io/azmx-brand/api/v1/index.json')
  .then(response => response.json())
  .then(data => {
    console.log('API version:', data.$meta.version);
    console.log('Available endpoints:', data.endpoints.length);
    console.log('Paths:', data.endpoints.map(e => e.path));
  });

Other Languages

Python
import requests

response = requests.get('https://gamaleldientarek.github.io/azmx-brand/api/v1/index.json')
data = response.json()

print(f"API version: {data['$meta']['version']}")
print(f"Available endpoints: {len(data['endpoints'])}")
for endpoint in data['endpoints']:
    print(f"  {endpoint['path']}: {endpoint['description']}")
Bash
curl -s https://gamaleldientarek.github.io/azmx-brand/api/v1/index.json | jq '.endpoints[].path'

Working with Color Palettes

Six palettes: Blue carries its full 12-step ramp as an array of {step, hex, notes}; the five secondary palettes (Orange, Green, Yellow, Purple, Red) expose signature, deep and text_safe_hex. Full secondary ramps live in the tokens endpoint.

Fetch Blue Palette

JavaScript
async function getBluePalette() {
  const response = await fetch('https://gamaleldientarek.github.io/azmx-brand/api/v1/palettes.json');
  const data = await response.json();

  const blue = data.palettes.find(p => p.name === 'Blue');
  const step = (n) => blue.ramp.find(r => r.step === `Blue ${n}`);

  console.log('Steps:', blue.ramp.map(r => r.step));
  console.log('Electric (Blue 600):', step(600).hex);   // #001AFF
  console.log('Dark Navy (Blue 1000):', step(1000).hex); // #040038

  return blue;
}

Generate CSS Variables

JavaScript
async function generateCSSVariables() {
  const response = await fetch('https://gamaleldientarek.github.io/azmx-brand/api/v1/palettes.json');
  const data = await response.json();

  let css = ':root {\n';

  data.palettes.forEach(palette => {
    const prefix = palette.name.toLowerCase();
    if (palette.ramp) {
      // Blue: full ramp, step labels look like "Blue 500"
      palette.ramp.forEach(({ step, hex }) => {
        css += `  --${prefix}-${step.split(' ')[1]}: ${hex};\n`;
      });
    } else {
      // Secondary palettes: signature, deep and text-safe values
      css += `  --${prefix}-signature: ${palette.signature};\n`;
      css += `  --${prefix}-deep: ${palette.deep};\n`;
      css += `  --${prefix}-text: ${palette.text_safe_hex};\n`;
    }
  });

  css += '}';
  return css;
}

Python Example

Python
import requests

def get_palette(name: str):
    response = requests.get('https://gamaleldientarek.github.io/azmx-brand/api/v1/palettes.json')
    palettes = response.json()['palettes']
    return next(p for p in palettes if p['name'] == name)

blue = get_palette('Blue')
ramp = {r['step']: r['hex'] for r in blue['ramp']}
print(f"Blue 600 (Electric): {ramp['Blue 600']}")   # #001AFF

orange = get_palette('Orange')
print(f"Orange signature: {orange['signature']}")   # #F47A48
print(f"Orange text-safe: {orange['text_safe_hex']}")

Design Tokens

587 tokens in six collections. Each collection has a name, its modes, and a tokens map. Single-mode collections map a token name to a value; multi-mode collections (Palette, Semantic, RTL) map it to an array with one value per mode. A value starting with @ aliases another token.

Fetch All Tokens

JavaScript
async function loadDesignTokens() {
  const response = await fetch('https://gamaleldientarek.github.io/azmx-brand/api/v1/tokens.json');
  const tokens = await response.json();

  const byName = Object.fromEntries(tokens.collections.map(c => [c.name, c]));

  console.log('Total tokens:', tokens.count);
  console.log('Collections:', tokens.collections.map(c => `${c.name} (${c.count})`));
  console.log('Palette modes:', byName['1b. Palette'].modes);
  console.log('Semantic modes:', byName['2. Semantic'].modes);
  console.log('Blue 200:', byName['1. Primitives'].tokens['color/blue/200']); // #BFD5FF

  return tokens;
}

Extract Semantic Tokens

JavaScript
async function getSemanticTokens(mode = 'Light') {
  const response = await fetch('https://gamaleldientarek.github.io/azmx-brand/api/v1/tokens.json');
  const tokens = await response.json();

  const semantic = tokens.collections.find(c => c.name === '2. Semantic');
  const modeIndex = semantic.modes.indexOf(mode); // ['Light', 'Dark']

  const extracted = {};
  for (const [name, values] of Object.entries(semantic.tokens)) {
    extracted[name] = values[modeIndex];
  }

  return extracted; // e.g. { 'surface/page': '@color/base/white', ... }
}

TypeScript Interface

TypeScript
type TokenValue = string | number;

interface TokenCollection {
  name: string;               // '1. Primitives', '1b. Palette', '2. Semantic', ...
  modes: string[];            // ['Mode 1'] or ['Light', 'Dark'] or the six palettes
  count: number;
  tokens: Record<string, TokenValue | TokenValue[]>; // array when modes.length > 1
}

interface DesignTokens {
  version: string;            // API version
  description: string;
  name: string;
  source: string;
  source_version: string;     // Figma export version
  exported: string;           // YYYY-MM-DD
  count: number;
  collections: TokenCollection[];
}

async function loadTokens(): Promise<DesignTokens> {
  const response = await fetch('https://gamaleldientarek.github.io/azmx-brand/api/v1/tokens.json');
  return response.json();
}

Voice Guidelines & Content Generation

Use AZMX voice rules and audience personas to generate on-brand content. Voice data is keyed as dimensions[].dimension, tone_rules[], writing_mechanics[] (banned patterns), format_rules[] and platform_voice[].

Fetch Voice Guidelines

JavaScript
async function getVoiceGuidelines() {
  const response = await fetch('https://gamaleldientarek.github.io/azmx-brand/api/v1/voice.json');
  const voice = await response.json();

  console.log('Voice in one line:', voice.voice_summary);
  console.log('Dimensions:', voice.dimensions.map(d => `${d.dimension}: ${d.position}`));
  console.log('Avoid:', voice.writing_mechanics);
  console.log('Formats:', voice.format_rules.map(f => f.format));

  return voice;
}

Generate Content with LLM

Python
import requests
import openai

BASE_URL = 'https://gamaleldientarek.github.io/azmx-brand/api/v1'

# Fetch brand data
voice = requests.get(f'{BASE_URL}/voice.json').json()
audiences = requests.get(f'{BASE_URL}/audiences.json').json()

# Find target persona (C-Suite is a B2B persona)
target = next(p for p in audiences['personas'] if p['name'] == 'C-Suite')

# Build system prompt
dimensions = '\n'.join(
    f"- {d['dimension']}: {d['position']} We are {d['we_are']}; not {d['we_are_not']}."
    for d in voice['dimensions']
)
avoid = '\n'.join(f"- {rule}" for rule in voice['writing_mechanics'])
tone = '\n'.join(f"- {r['heading']} {r['description']}" for r in voice['tone_rules'])

system_prompt = f"""
You are writing for AZMX. {voice['voice_summary']}

Voice dimensions:
{dimensions}

Tone rules:
{tone}

Never do this (no-AI-tells rules):
{avoid}

Target audience: {target['name']} ({target['motion']}, {', '.join(target['brands'])})
Pain points: {target['pain_points']}
Core message: {target['core_message']}
"""

# Generate content
response = openai.chat.completions.create(
    model="gpt-4o",
    messages=[
        {"role": "system", "content": system_prompt},
        {"role": "user", "content": "Write a 2-paragraph intro for our new case study"}
    ]
)

Fetch Specific Persona

JavaScript
async function getPersona(motion, name) {
  const response = await fetch('https://gamaleldientarek.github.io/azmx-brand/api/v1/audiences.json');
  const data = await response.json();

  // motion is one of 'B2G', 'B2B', 'B2C'
  return data.personas.find(p =>
    p.motion === motion && p.name.includes(name)
  );
}

// Example
const ceo = await getPersona('B2B', 'C-Suite');
console.log(ceo.core_message);

Brand Compliance Validation

Validate colors against the brand. The palettes endpoint gives the Blue ramp and the secondary key colors; for every approved hex (all six 12-step ramps plus neutrals) use the Primitives collection of the tokens endpoint.

Color Validation

JavaScript
async function validateBrandColors(colors) {
  const response = await fetch('https://gamaleldientarek.github.io/azmx-brand/api/v1/tokens.json');
  const tokens = await response.json();

  // Every primitive color token (all ramps, neutrals, base colors)
  const primitives = tokens.collections.find(c => c.name === '1. Primitives').tokens;
  const approvedColors = new Set(
    Object.entries(primitives)
      .filter(([name, value]) => name.startsWith('color/') && typeof value === 'string' && value.startsWith('#'))
      .map(([, value]) => value.toUpperCase())
  );

  const violations = colors.filter(c => !approvedColors.has(c.toUpperCase()));

  return {
    valid: violations.length === 0,
    violations,
    message: violations.length > 0
      ? `Found ${violations.length} off-brand colors: ${violations.join(', ')}`
      : 'All colors are on-brand'
  };
}

// Example usage
const result = await validateBrandColors(['#001AFF', '#FFFFFF', '#FF00FF']);
console.log(result); // { valid: false, violations: ['#FF00FF'], ... }

Python Validator Class

Python
import requests
from typing import Dict, List

class AZMXBrandValidator:
    TOKENS_URL = 'https://gamaleldientarek.github.io/azmx-brand/api/v1/tokens.json'

    def __init__(self):
        tokens = requests.get(self.TOKENS_URL).json()
        primitives = next(c for c in tokens['collections'] if c['name'] == '1. Primitives')
        self.approved_colors = {
            value.upper()
            for name, value in primitives['tokens'].items()
            if name.startswith('color/') and isinstance(value, str) and value.startswith('#')
        }

    def validate_colors(self, colors: List[str]) -> Dict:
        violations = [c for c in colors if c.upper() not in self.approved_colors]
        return {
            'valid': not violations,
            'violations': violations,
            'approved_count': len(colors) - len(violations),
            'total': len(colors),
        }

# Usage
validator = AZMXBrandValidator()
result = validator.validate_colors(['#001AFF', '#FFFFFF', '#FF00FF'])
print(f"Valid: {result['valid']}")  # False - #FF00FF is off-brand

Brand Image Library

Search the 240-image library. Each entry is {filename, tags, url} with three concept tags and a ready-made CDN link. The files are served from jsDelivr (the response's cdn field is the base); the filename prefix is the palette folder, so blue-014.jpg lives at <cdn>/blue/blue-014.jpg.

Fetch Images by Tag

JavaScript
const IMAGE_BASE = 'https://cdn.jsdelivr.net/gh/Gamaleldientarek/azmx-brand-cdn@main/images';

function imageUrl(filename) {
  const palette = filename.split('-')[0]; // blue-014.jpg -> blue
  return `${IMAGE_BASE}/${palette}/${filename}`;
}

async function getImagesByTag(tag) {
  const response = await fetch('https://gamaleldientarek.github.io/azmx-brand/api/v1/images.json');
  const data = await response.json();

  return data.images
    .filter(img => img.tags.includes(tag))
    .map(img => ({ ...img, url: imageUrl(img.filename) }));
}

// Example: every image tagged "focus"
const focus = await getImagesByTag('focus');
console.log(`Found ${focus.length} images tagged focus`);

Find Images by Palette

Bash
# All gradient images (filename prefix is the palette folder)
curl -s https://gamaleldientarek.github.io/azmx-brand/api/v1/images.json | \
  jq '.images[] | select(.filename | startswith("gradient-")) | {filename, tags}'

Python Search Function

Python
import requests
from typing import Dict, List, Optional

def search_images(tags: Optional[List[str]] = None, palette: Optional[str] = None) -> List[Dict]:
    response = requests.get('https://gamaleldientarek.github.io/azmx-brand/api/v1/images.json')
    images = response.json()['images']

    results = images

    if tags:
        results = [img for img in results if any(tag in img['tags'] for tag in tags)]

    if palette:
        results = [img for img in results if img['filename'].startswith(f'{palette}-')]

    return results

# Example: blue images about structure or precision
results = search_images(tags=['structure', 'precision'], palette='blue')
print(f"Found {len(results)} matching images")