Quick Start Guide
For AI Agents
Machine-readable guide for AI agents building Ontopix-branded UIs
Production
AI Agent Consumption Guide
This page helps AI agents (via MCP or direct brand.json access) make consistent design decisions.
brand.json Structure
The complete brand data is available at output/brand.json and via the Ontopix Docs MCP (stylebook collection).
Key Paths
| Data | Path in brand.json |
|---|---|
| Semantic color tokens | brand.color.config.semantic.tokens |
| Color palette (all colors) | brand.color.data.palette.colors |
| Font definitions | brand.typography.config.fonts |
| Typography scales | brand.typography.config.scales |
| Typography contexts | brand.typography.config.contexts |
| Logo variants | brand.logo.data.variants |
| Logo groups | brand.logo.config.groups |
| Voice character | brand.voice.config.character |
| Writing style | brand.writing.config.style |
Decision Algorithms
Selecting a Logo Variant
INPUT: background_type (light|dark), needs_transparency (bool), format (full|square|spinner)
1. format → determines group: full=logo, square=avatar, spinner=spinner
2. background_type → determines arrow: light=black_arrow, dark=white_arrow
3. needs_transparency → determines bg: yes=onlight/ondark, no=onwhite/onblack
4. LOOKUP: brand.logo.data.variants[{group}{bg_variant}].save-as
Selecting a Color Token
INPUT: element_purpose (brand|navigation|action|status)
1. brand decoration → token: brand
2. navigation link → token: navigation
3. primary action (save, submit) → token: primary
4. secondary action (cancel, back) → token: secondary
5. hero CTA → token: prominent
6. success/error/warning/info → matching status token
7. text, borders, backgrounds → token: neutral
Selecting Typography
INPUT: context (web|ui|docs|print|internal|commercial)
1. LOOKUP: brand.typography.config.contexts[context]
2. GET fonts: context.fonts.headings, context.fonts.body, context.fonts.code
3. GET scale: brand.typography.config.scales[context.scale]
4. APPLY rules: context.rules (min sizes, line heights, max widths)
MCP Query Patterns
When consuming via ontopix-docs MCP:
| Decision | Query |
|---|---|
| Which logo to use? | get-page /stylebook/logos/decision-guide |
| Which color token? | get-page /stylebook/colors/usage-guide |
| Font for context? | get-page /stylebook/typography/fonts |
| Voice/tone? | get-page /stylebook/voice-writing/tones |
| Writing rules? | get-page /stylebook/voice-writing/contexts |