---
name: Design for Meaning
slug: design-for-meaning
version: 0.1.0
lastUpdated: 2026-06-09
canonicalUrl: /brand/design-for-meaning
---

# Design for Meaning Brand Spec

> A shared vocabulary for working with AI. Design for Meaning helps humans and agents align on the terms, references, and definitions a project depends on.

This is the agent-optimized brand spec. It mixes the human-authored brand book with structured sections from the JSON tokens. Use it to author on-brand copy, generate assets, or wire tokens into a client repo.

## How to use this spec

If you are an AI agent (Cursor, Claude Code, ChatGPT, internal Workhorse session agent, or other) generating copy or assets for this brand, treat this document as canonical:

1. **Read the Voice section first.** Tone words, guidelines, banned terms, preferred terms.
2. **Match the surface.** When you write a hero, CTA, newsletter intro, social caption, press quote, or any other surface, find that surface under "Surface do/don't" and follow the do/don't pattern explicitly.
3. **Call prompts by id.** When the user asks for something that maps to a `promptKit` entry (e.g. `newsletter-intro`, `hero-line`, `agency-pitch`), use that prompt's template structure and example output.
4. **Cite the spec.** When you produce on-brand copy, end with a short footer like `(brand · v0.1.0)`.
5. **Never use banned terms.** Prefer `preferredTerms`. The list at the bottom of the Voice section is opinionated for a reason.
6. **Spec.json is also available.** Same content, structured as JSON, at `/brand/design-for-meaning/spec.json`. Use it when you need programmatic access to a specific section.

---

## Foundation

**Position.** The shared lexicon layer for teams building with AI.

**Founding belief.** Most failures in AI work are not capability failures, they are meaning failures: two parties using the same word for different things.

**Mission.** Make meaning explicit, shared, and legible to both humans and machines.

**Tagline.** Meaning, made shared.

**Homepage line.** Align on what the words mean before you build.

**Descriptor.** Shared vocabulary. AI collaboration. A working dictionary.

**Value proposition.** Design for Meaning is a working dictionary for human-and-agent collaboration. When people and AI agents share the same definitions for terms, references, and concepts, the work gets clearer and the mistakes get rarer. The lexicon is browsable for people and machine-readable for agents.

## Color

| Token | Hex | Role | Notes |
|---|---|---|---|
| `indigo.ink` | `#2A2A6A` |  | Indigo Ink. Primary. The settled, considered hue. |
| `indigo.deep` | `#1B1B47` |  | Deep Indigo. Heaviest brand weight, near-black headings. |
| `indigo.soft` | `#6F6FB3` |  | Soft Indigo. Muted accents and links at rest. |
| `signal.cyan` | `#0FB5BA` |  | Signal Cyan. Highlights the term in focus. |
| `signal.amber` | `#E8A23D` |  | Amber. Sparingly, for callouts and warnings. |
| `neutral.ink` | `#1A1A24` |  | Ink. Near-black body text. |
| `neutral.slate` | `#55555F` |  | Slate. Muted body and metadata. |
| `neutral.mist` | `#D7D7DF` |  | Mist. Borders and dividers. |
| `neutral.paper` | `#F7F6F2` |  | Paper. Warm canvas background. |
| `white` | `#FFFFFF` |  | White |

## Typography

### Families

- **Newsreader** (`primary`): 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif
  *Newsreader. Heading and definition face. Literary, dictionary-like serif.*
- **Inter** (`editorial`): 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif
  *Inter. UI and body. The quiet workhorse.*
- **JetBrains Mono** (`mono`): 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
  *JetBrains Mono. Term keys, aliases, machine-readable data.*
- **Inter** (`condensed`): 'Inter', ui-sans-serif, sans-serif
  *Inter at tighter tracking. Short labels and dense headings.*

### Scale

| Token | Value | Use |
|---|---|---|
| `display` | `4.300rem` | 69px. Display headlines |
| `h1` | `3.583rem` | 57px. Hero / page title |
| `h2` | `2.986rem` | 48px. Section headline |
| `h3` | `2.488rem` | 40px. Sub-section |
| `h4` | `2.074rem` | 33px. Card heading |
| `h5` | `1.728rem` | 28px. Small heading |
| `h6` | `1.440rem` | 23px. Eyebrow / kicker |
| `lead` | `1.200rem` | 19px. Lede / large body |
| `body` | `1.000rem` | 16px. Default body |
| `small` | `0.833rem` | 13px. Secondary text |
| `xs` | `0.694rem` | 11px. Labels, meta, mono |