AZMX
API Examples
Interactive examples, code snippets, and common integration patterns
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 in 30 seconds
Fetch and apply AZMX color systems
Load 587 design system tokens
Generate on-brand content with LLMs
The simplest way to get started: fetch the API index to see all available endpoints. Metadata (version, base URL, contact) lives under $meta.
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));
});
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']}")
curl -s https://gamaleldientarek.github.io/azmx-brand/api/v1/index.json | jq '.endpoints[].path'
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.
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;
}
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;
}
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']}")
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.
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;
}
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', ... }
}
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();
}
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[].
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;
}
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"}
]
)
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);
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.
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'], ... }
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
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.
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`);
# 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}'
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")