# Obney.ai Design System

> The visual and voice operating system for Obney.ai — *engineering clarity, human warmth*. Every color, type style, space, and component is rendered live from one canonical token source, so people and coding agents build on-brand from the same contract.

Obney.ai builds greenfield software for the AI era. The brand pairs **midnight + ocean** on a **cream** ground, with pill buttons, crisp 1px borders, and a mono eyebrow over every heading. Two registers from one token set: light (company surfaces) and dark (methodology). Cal Sans for display only; Figtree for everything; IBM Plex Mono for eyebrows, labels, and code.

## Design system
- [design.md](https://brand.obney.ai/design.md): Machine-readable tokens (DESIGN.md format) + the human rationale — the entry point for coding agents.
- [colors_and_type.css](https://brand.obney.ai/colors_and_type.css): The canonical token source — colors, type scale, spacing, radii, shadows, motion as CSS variables.
- [SKILL.md](https://brand.obney.ai/SKILL.md): The Obney design Agent Skill — install as a Claude Code skill to build on-brand automatically.
- [Brand guidelines (PDF)](https://brand.obney.ai/assets/Obney.ai-Brand-Guidelines.pdf): The source-of-truth brand guidelines (Feb 2026).

## Live catalog
- [Design system catalog](https://brand.obney.ai/): Color, type, space, and components — rendered live from the tokens.

## Rules of thumb
- Pair midnight `#142C37` + ocean `#68E4E9`; ground in cream `#F5F1EA`; white cards.
- Pill buttons (radius 999px), crisp 1px borders, quiet shadows, one accent at a time.
- No gradients, no emoji, no Inter/Roboto fallbacks; Cal Sans only at ≥48px.
- Maintain WCAG AA contrast; sentence-case copy, first-person plural.