Quick Start Guide
How to use the Ontopix stylebook for consistent brand application
Production
This stylebook provides everything needed to create consistent Ontopix-branded outputs — whether you're a human designer, developer, or an AI agent generating UI.
What You Need For...
Building a UI
- Colors → Semantic Tokens for palette, Usage Guide for decisions
- Typography → Fonts for families, Scale for sizes
- Logo → Decision Guide to pick the right variant
- Layout → Spacing and Grid
Writing Content
- Tone → Voice & Tone for personality
- Style → Voice & Writing for rules, Terminology for approved terms
- Context → Tones for context-specific adaptation
Brand Materials
- Logo files → Full Logos, Icons
- Color palette → Palettes for all colors and shades
- Avatars → Team and Agents
Semantic Token Quick Reference
| Token | Purpose | Palette |
|---|---|---|
brand | Brand color for the primary brand logo and branding | brand |
error | Error states and destructive actions | red |
info | Informational messages and neutral actions | sky |
navigation | Primary actionable elements that cause navigation to... | brand |
neutral | Internal Nuxt UI neutral variant — not for direct use | paper |
paper | Neutral grayscale color for text, borders, and... | paper |
phase-active | In progress | sky |
phase-archived | Soft-deleted or moved to cold storage | space |
phase-done | Completed successfully | emerald |
phase-expired | Time-based termination | yellow |
phase-failed | Terminal failure | rose |
phase-idle | Not started or pending | paper |
phase-queued | Waiting in queue | indigo |
phase-retry | Re-processing after a transient failure | violet |
polarity-mixed | Mixed or ambiguous judgment (partial, conflicting, debatable) | amber |
polarity-negative | Negative judgment (bad, false, rejected, denied) | red |
polarity-neutral | Neutral or unknown judgment (N/A, unresolved, no opinion) | paper |
polarity-positive | Positive judgment (good, true, resolved, approved) | green |
primary | Primary color for main actions and highlights (primary... | cyan |
prominent | Specially decorated action elements for more prominent... | amber |
quality-bad | Below standard quality (0.15–0.50) | orange |
quality-excellent | Strong performance (0.80–1.0) | green |
quality-good | Meets standard (0.65–0.80) | lime |
quality-insufficient | Unacceptable quality (0–0.15) | red |
quality-none | No data or not evaluated | paper |
quality-perfect | Flawless quality (exactly 1.0) | brand |
quality-regular | Below expectations (0.50–0.65) | amber |
secondary | Secondary color for supporting actions (secondary... | emerald |
space | Neutral grayscale color for text, borders, and... | space |
success | Success states and confirmations | green |
warning | Warning states and cautions | orange |
Font Quick Reference
| Context | Font | CSS Stack |
|---|---|---|
| Actionable | Monda | 'Monda', ui-sans-serif, system-ui, sans-serif |
| Code | Geist Mono | 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace |
| Docs | Literata | 'Literata', ui-serif, Georgia, serif |
| Logo | Helvetica | Helvetica, Arial, sans-serif |
| Ui | Geist Sans | 'Geist Sans', ui-sans-serif, system-ui, sans-serif |